/* =====================================================================
   Tema GLASSMORFISMO v6 — responsivo, modo oscuro, barra inferior móvil
   ---------------------------------------------------------------------
   Puntos de quiebre:
     ≤ 900px  móvil/tableta vertical: barra inferior, tablas → tarjetas
     ≤ 640px  formularios a una columna
     ≤ 1200px nombres largos más cortos
   ===================================================================== */

/* ---------- Paleta clara (por omisión) ---------- */
:root{
  --azul:#1b3a6b;
  --azul2:#2f6fb3;
  --azul-claro:#eaf2fb;
  --acento:#1f8ceb;
  --ok:#2e9e5b; --warn:#e0a800; --mal:#d9534f;
  --gris:#5b6675; --texto:#16233a;

  --fondo1:#dbe7fb; --fondo2:#c7d9f6; --fondo3:#e6dcfb; --fondo4:#cfe9f7;

  --glass:rgba(255,255,255,.55);
  --glass-fuerte:rgba(255,255,255,.72);
  --glass-borde:rgba(255,255,255,.55);
  --glass-borde2:rgba(255,255,255,.35);
  --borde:rgba(120,150,190,.28);
  --blur:16px;
  --sombra:0 8px 30px rgba(20,45,90,.14);
  --sombra-hover:0 14px 40px rgba(20,45,90,.24);

  --th-bg:rgba(27,58,107,.85);
  --fila-par:rgba(246,249,253,.5);
  --fila-hover:rgba(233,242,252,.75);
  --input-bg:rgba(255,255,255,.55);
  --input-bg-focus:rgba(255,255,255,.9);
  --code-bg:rgba(238,243,249,.7);
  --topbar:linear-gradient(100deg,rgba(27,58,107,.82),rgba(47,111,179,.78));
  --bnav-bg:rgba(255,255,255,.78);
  --sheet-bg:rgba(255,255,255,.92);

  --safe-b:env(safe-area-inset-bottom,0px);
  --bnav-h:62px;

  /* Fondos OPACOS para la columna de acciones pegada a la derecha:
     si fueran translúcidos se vería el texto pasando por debajo. */
  --acc-bg:#eef3fa; --acc-bg-hover:#e2ecf9;
  --acc-venc:#fbd7d5; --acc-pronto:#fdedc8;
  --th-solido:#2a4a7d;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:"Segoe UI",Roboto,-apple-system,Arial,sans-serif;color:var(--texto);
  font-size:15px;line-height:1.45;min-height:100vh;
  background:linear-gradient(-45deg,var(--fondo1),var(--fondo2),var(--fondo3),var(--fondo4),var(--fondo1));
  background-size:400% 400%;
  animation:fondoGlass 26s ease infinite;
  background-attachment:fixed;
  color-scheme:light;   /* el sistema es de tema claro únicamente */
}
@keyframes fondoGlass{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
a{color:var(--acento);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ---------- Barra superior ---------- */
.topbar{
  display:flex;align-items:center;gap:16px;
  background:var(--topbar);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  color:#fff;padding:0 22px;height:58px;
  box-shadow:0 6px 24px rgba(20,45,90,.28);
  border-bottom:1px solid rgba(255,255,255,.22);
  position:sticky;top:0;z-index:50
}
.brand{font-size:21px;font-weight:800;letter-spacing:.3px;display:flex;align-items:center;text-shadow:0 1px 6px rgba(0,0,0,.25);white-space:nowrap}
.brand span{font-weight:300;opacity:.85;margin-left:6px}
.topbar .sp{flex:1}
.mainnav{display:flex;gap:3px;flex:1;flex-wrap:wrap}
.mainnav a{color:#e8f1ff;padding:8px 13px;border-radius:10px;font-weight:600;font-size:14px;transition:.18s}
.mainnav a:hover{background:rgba(255,255,255,.18);text-decoration:none;color:#fff}
.mainnav a.active{background:rgba(255,255,255,.85);color:var(--azul);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.userbox{font-size:13px;color:#e8f1ff;white-space:nowrap;display:flex;align-items:center;gap:10px}
.userbox a{color:#fff;font-weight:700}

/* Buscador global */
.buscador-global{position:relative}
.buscador-global input{width:240px;max-width:40vw;padding:8px 14px;border:1px solid rgba(255,255,255,.4);border-radius:22px;font-size:13px;background:rgba(255,255,255,.28);color:#fff}
.buscador-global input::placeholder{color:rgba(255,255,255,.8)}
.buscador-global input:focus{outline:none;background:rgba(255,255,255,.95);color:#16233a;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
#busqueda-result{
  display:none;position:fixed;top:72px;left:50%;transform:translateX(-50%);
  width:min(620px,94vw);background:var(--glass-fuerte);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid var(--glass-borde);border-radius:16px;box-shadow:0 24px 70px rgba(20,45,90,.4);
  overflow:hidden;z-index:200;max-height:75vh;overflow-y:auto;
}
#busqueda-result .bg-item{display:flex !important;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--borde);color:var(--texto);font-weight:400;font-size:14px}
#busqueda-result .bg-item:last-child{border-bottom:none}
#busqueda-result .bg-item:hover{background:var(--fila-hover);text-decoration:none}
#busqueda-result .bg-item b{font-weight:700}
#busqueda-result .bg-tipo{flex:0 0 auto;display:inline-block;color:#fff;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:12px;text-transform:uppercase;letter-spacing:.3px}
#busqueda-result .bg-txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#busqueda-result .bg-sub{color:var(--gris);font-size:12.5px;margin-left:4px}
#busqueda-result .bg-vacio{display:block;color:var(--gris);text-align:center;padding:16px}

/* ---------- Contenido ---------- */
.wrap{max-width:1560px;margin:26px auto;padding:0 18px}
.wrap > .panel > form .grid2{max-width:1100px}
h1{font-size:25px;margin:0 0 20px;color:var(--azul);font-weight:800;letter-spacing:.2px}
h2{font-size:17px;color:var(--azul);font-weight:700;margin:0 0 14px;padding-left:11px;border-left:4px solid var(--acento)}

/* Tarjetas KPI */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:26px}
.card{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-borde);border-top:3px solid rgba(47,111,179,.85);
  border-radius:16px;padding:18px 20px;box-shadow:var(--sombra);
  transition:.22s cubic-bezier(.2,.8,.2,1);display:block;position:relative;overflow:hidden;color:inherit
}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 55%);pointer-events:none}
a.card:hover{transform:translateY(-4px);box-shadow:var(--sombra-hover);text-decoration:none;background:var(--glass-fuerte)}
.card .num{font-size:30px;font-weight:800;color:var(--azul);line-height:1.1;word-break:break-word}
.card .lbl{color:var(--gris);font-size:13px;margin-top:6px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.card.alerta{border-top-color:var(--mal)}
.card.alerta .num{color:var(--mal)}

/* Paneles */
.panel{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-borde);border-radius:16px;padding:22px;margin-bottom:22px;
  box-shadow:var(--sombra)
}
.panel h2{margin-top:0}

/* Tablas */
table.tabla{width:100%;border-collapse:separate;border-spacing:0;background:rgba(255,255,255,.4);border-radius:12px;overflow:hidden;border:1px solid var(--glass-borde2)}
table.tabla th{background:var(--th-bg);color:#fff;text-align:left;padding:11px 12px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border:none}
table.tabla th a{color:#fff}
table.tabla td{padding:11px 12px;border-bottom:1px solid var(--borde);font-size:14px}
table.tabla tr:nth-child(even) td{background:var(--fila-par)}
table.tabla tr:hover td{background:var(--fila-hover)}
table.tabla td:first-child{font-weight:600;color:var(--texto)}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Botones */
.btn{display:inline-block;background:linear-gradient(180deg,#3aa0f4,#1f8ceb);color:#fff;border:1px solid rgba(255,255,255,.35);padding:9px 17px;border-radius:11px;cursor:pointer;font-size:14px;font-weight:700;box-shadow:0 4px 14px rgba(31,140,235,.35);transition:.18s;margin:2px 0;font-family:inherit;line-height:1.3}
.btn:hover{filter:brightness(1.07);text-decoration:none;box-shadow:0 8px 22px rgba(31,140,235,.5);transform:translateY(-1px)}
.btn.gris{background:linear-gradient(180deg,#8b95a5,#6b7280);box-shadow:0 4px 14px rgba(107,114,128,.3)}
.btn.verde{background:linear-gradient(180deg,#3cbd76,#2e9e5b);box-shadow:0 4px 14px rgba(46,158,91,.35)}
.btn.rojo{background:linear-gradient(180deg,#ea6b66,#d9534f);box-shadow:0 4px 14px rgba(217,83,79,.35)}
.btn.sm{padding:5px 11px;font-size:12.5px;font-weight:600}

/* Formularios */
.form-row{margin-bottom:15px}
.form-row label{display:block;font-size:12.5px;color:var(--azul);margin-bottom:6px;font-weight:700}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:10px 12px;border:1px solid var(--glass-borde2);border-radius:10px;font-size:14px;font-family:inherit;background:var(--input-bg);color:var(--texto);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.15s}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(31,140,235,.18);background:var(--input-bg-focus)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.form-row input[type=checkbox],.form-row input[type=radio]{width:auto;padding:0;margin:0 7px 0 0;vertical-align:-2px;accent-color:var(--acento);cursor:pointer}
.form-row label:has(input[type=checkbox]),.form-row label:has(input[type=radio]){display:flex;align-items:center;gap:0;font-weight:400;font-size:14px;color:inherit;margin-bottom:0;cursor:pointer}
select{color:var(--texto)}
option{color:#16233a;background:#fff}

/* Etiquetas de estado */
.tag{display:inline-block;padding:3px 11px;border-radius:20px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;border:1px solid transparent;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);white-space:nowrap}
.tag.activo,.tag.pagada,.tag.cerrado,.tag.aceptada,.tag.facturada{background:rgba(227,246,234,.85);color:#1d7a43;border-color:#bfe6cd}
.tag.suspendido,.tag.pendiente,.tag.respondido,.tag.media,.tag.enviada{background:rgba(255,244,214,.85);color:#8a6700;border-color:#f0dca0}
.tag.cancelado,.tag.vencido,.tag.abierto,.tag.alta,.tag.rechazada{background:rgba(253,226,225,.85);color:#a12d28;border-color:#f3b9b6}
.tag.baja,.tag.borrador{background:rgba(232,238,246,.85);color:#5b6675;border-color:#d2dcea}
.tag.terminado{background:rgba(226,236,253,.9);color:#2f4f8f;border-color:#bcd0f0}

/* Mensajes */
.aviso{padding:13px 17px;border-radius:12px;margin-bottom:18px;font-size:14px;font-weight:600;border:1px solid transparent;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.aviso.ok{background:rgba(227,246,234,.8);color:#176336;border-color:#b6e3c6}
.aviso.error{background:rgba(253,226,225,.8);color:#9a2a25;border-color:#f3b9b6}
/* Un aviso con fondo claro escrito en línea lleva SIEMPRE texto oscuro,
   aunque el tema sea oscuro: si no, queda claro sobre claro. */
.aviso[style*="background:rgba(255,244,214"],
.aviso[style*="background:rgba(234,242,251"],
.aviso[style*="background:rgba(253,226,225"],
.aviso[style*="background:rgba(227,246,234"],
.aviso[style*="background:rgba(255,255,255"]{color:#16233a}
.aviso[style*="background:rgba(255,244,214"] b,
.aviso[style*="background:rgba(234,242,251"] b,
.aviso[style*="background:rgba(253,226,225"] b{color:inherit}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.toolbar input[type=search]{padding:9px 13px;border:1px solid var(--glass-borde2);border-radius:10px;min-width:240px;background:var(--input-bg);color:var(--texto);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Login */
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(-45deg,#1b3a6b,#2f6fb3,#5a4b9c,#1f8ceb);background-size:400% 400%;animation:fondoGlass 22s ease infinite}
.login-card{background:var(--glass-fuerte);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--glass-borde);border-radius:20px;padding:36px;width:380px;max-width:100%;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.login-card h1{text-align:center}
.muted{color:var(--gris);font-size:13px}
code{background:var(--code-bg);padding:2px 6px;border-radius:5px;font-size:13px;color:var(--azul)}
pre{background:var(--code-bg);color:var(--texto);padding:12px;border-radius:8px;overflow-x:auto;font-size:12.5px}
hr{border:none;border-top:1px solid var(--borde)}

/* ---------- Layout escritorio: menú lateral izquierdo ---------- */
.layout{display:flex;align-items:flex-start}
.layout .wrap{flex:1;min-width:0;order:2}
.sidenav{
  order:1;flex:0 0 220px;position:sticky;top:58px;height:calc(100vh - 58px);overflow-y:auto;
  padding:16px 12px;background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border-right:1px solid var(--glass-borde);box-shadow:6px 0 24px rgba(20,45,90,.08)
}
.sidenav .sn-titulo{font-size:11px;font-weight:800;color:var(--gris);text-transform:uppercase;letter-spacing:.6px;padding:4px 12px 10px}
.sidenav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--azul);font-weight:600;font-size:14px;margin-bottom:4px;transition:.15s}
.sidenav a .ico{font-size:17px;width:22px;text-align:center;flex:0 0 22px}
.sidenav a:hover{background:var(--fila-hover);text-decoration:none;transform:translateX(2px)}
.sidenav a.active{background:linear-gradient(100deg,#1b3a6b,#2f6fb3);color:#fff;box-shadow:0 4px 14px rgba(27,58,107,.3)}
.sidenav .sn-cerrar{display:none}
.sn-fondo{display:none}

/* Barra inferior: oculta en escritorio */
.bnav{display:none}

/* ---------- Celdas editables ---------- */
td.edc{cursor:pointer;position:relative}
td.edc:hover{background:rgba(31,140,235,.12)!important;box-shadow:inset 0 0 0 1px rgba(31,140,235,.35)}
td.edc:hover::after{content:"✎";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--acento);opacity:.75}
td.edc.editando{padding:4px 6px;cursor:default}
td.edc.editando::after{content:none}
td.edc input,td.edc select{width:100%;min-width:90px;padding:6px 8px;border:1.5px solid var(--acento);border-radius:8px;font:inherit;font-size:13.5px;background:var(--input-bg-focus);color:var(--texto);box-shadow:0 0 0 3px rgba(31,140,235,.18)}
td.edc.ok{animation:edcOk 1.2s}
td.edc.err{animation:edcErr 1.2s}
@keyframes edcOk{0%{background:rgba(46,158,91,.4)}100%{background:transparent}}
@keyframes edcErr{0%{background:rgba(217,83,79,.4)}100%{background:transparent}}
.edc-vacio{color:#9aa6b6}
.edc-hint{font-size:12.5px;color:var(--gris);margin:0 0 10px;padding:8px 12px;background:var(--glass);border-radius:10px;border:1px dashed var(--borde)}
#toast{position:fixed;bottom:calc(22px + var(--safe-b));right:22px;z-index:300;background:rgba(29,39,51,.92);color:#fff;padding:11px 16px;border-radius:12px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.3);display:none;max-width:calc(100vw - 44px)}
#toast.rojo{background:rgba(217,83,79,.95)}

/* ---------- Etiqueta de IP / DNS ---------- */
.ipb{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700;white-space:nowrap;border:1px solid transparent;font-family:"Consolas",monospace}
.ipb.ok {background:rgba(227,246,234,.9);color:#1d7a43;border-color:#bfe6cd}
.ipb.ext{background:rgba(255,244,214,.9);color:#8a6700;border-color:#f0dca0}
.ipb.mal{background:rgba(253,226,225,.9);color:#a12d28;border-color:#f3b9b6}
.ipb.nd {background:rgba(232,238,246,.85);color:#7a8595;border-color:#d2dcea;font-weight:600}
.btn.sm.btn-ip{padding:3px 7px;font-size:11px;line-height:1.2}
.dom-cell{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;max-width:100%}
.dom-acc{display:inline-flex;gap:2px;visibility:hidden;transition:.12s}
tr:hover .dom-acc{visibility:visible}
td.edc.editando .dom-acc{display:none}
td.col-rev{text-align:center;white-space:nowrap;padding-left:4px;padding-right:4px}
.acciones .btn.ico{padding:4px 7px;font-size:12px}
#busca-tabla{padding:9px 14px;border:1.5px solid var(--glass-borde2);border-radius:22px;background:var(--input-bg);color:var(--texto);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:14px}
#busca-tabla:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(31,140,235,.18);background:var(--input-bg-focus)}
#busca-info{font-size:12.5px;white-space:nowrap}

.btn.btn-sitio{background:var(--glass-fuerte);color:var(--acento);border:1px solid var(--glass-borde2);box-shadow:none;padding:2px 7px;font-size:12px;line-height:1.3;vertical-align:middle}
.btn.btn-sitio:hover{background:var(--acento);color:#fff;transform:none;box-shadow:0 2px 8px rgba(31,140,235,.35)}
.btn.btn-cpanel,.btn.btn-whois,.btn.btn-mail{background:var(--glass-fuerte);color:var(--gris);border:1px solid var(--glass-borde2);box-shadow:none;padding:2px 7px;font-size:12px;line-height:1.3;vertical-align:middle}
.btn.btn-cpanel:hover,.btn.btn-whois:hover,.btn.btn-mail:hover{background:var(--azul2);color:#fff;transform:none}
.btn.btn-wa{background:rgba(37,211,102,.15);color:#128c3f;border:1px solid rgba(37,211,102,.45);box-shadow:none;padding:2px 7px;font-size:12px;line-height:1.3;vertical-align:middle}
.btn.btn-wa:hover{background:#25d366;color:#fff;transform:none;box-shadow:0 2px 8px rgba(37,211,102,.4)}
#ip-progreso{font-size:12.5px}

/* Tabla compacta */
table.tabla.compacta th{padding:8px 9px;font-size:11px}
table.tabla.compacta td{padding:6px 9px;font-size:13px;vertical-align:middle}
table.tabla.compacta .tag{padding:2px 8px;font-size:10.5px}
table.tabla.compacta .ipb{font-size:10.5px;padding:2px 7px}
.nom-corto{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.dom-corto{display:inline-block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.acciones{white-space:nowrap;text-align:right}
.btn.ico{padding:5px 9px;font-size:13px;line-height:1.15;font-weight:700;margin:0 1px}
.num-col{text-align:right;white-space:nowrap}
@media(max-width:1200px){.nom-corto{max-width:110px}.dom-corto{max-width:150px}}

/* Barra de avance */
.avance{position:relative;display:inline-block;width:74px;height:15px;border-radius:9px;background:rgba(120,150,190,.22);overflow:hidden;vertical-align:middle}
.avance-b{position:absolute;left:0;top:0;bottom:0;border-radius:9px;transition:width .3s}
.avance span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#16233a}

/* ===== Filas resaltadas por vencimiento =====
   Claro: fondo pastel y letra oscura. Oscuro: fondo tinto/ámbar profundo y
   letra clara, para que el contraste se mantenga en los dos temas. */
table.tabla tr.f-vencida > td{background:#fde2e1;color:#16233a}
table.tabla tr.f-pronto  > td{background:#fff4d6;color:#16233a}
table.tabla tr.f-vencida:hover > td{background:#fbd2d0}
table.tabla tr.f-pronto:hover  > td{background:#ffedbe}
table.tabla tr.f-vencida > td a,table.tabla tr.f-pronto > td a{color:#12508f}
table.tabla tr.f-vencida > td.edc:hover,table.tabla tr.f-pronto > td.edc:hover{background:rgba(31,140,235,.18)!important}
table.tabla tr.f-vencida > td:first-child{box-shadow:inset 3px 0 0 var(--mal)}
table.tabla tr.f-pronto  > td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

/* Fila marcada desde el buscador */
tr.fila-marcada > td{background:rgba(255,236,170,.85)!important;box-shadow:inset 0 0 0 9999px rgba(224,168,0,.08);animation:filaPulso 1.1s ease-in-out 2;color:#16233a}
tr.fila-marcada > td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
@keyframes filaPulso{0%,100%{background:rgba(255,236,170,.85)}50%{background:rgba(255,222,110,.95)}}

/* ---------- Pulido de escritorio ---------- */
.toolbar h1{margin:0}
.panel > .tabla-scroll > table.tabla,.panel > table.tabla{border-radius:0;border:none}
.panel[style*="padding:0"] table.tabla{border-radius:16px}
.acciones .btn + .btn{margin-left:2px}
.btn:active{transform:translateY(0);filter:brightness(.97)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
::selection{background:rgba(31,140,235,.25)}

/* El botón ⋯ y su hoja son solo de móvil */
.btn.btn-mas{display:none}

/* Hoja de acciones (menú ⋯): compartida por móvil; en escritorio no se usa */
.hoja-fondo{position:fixed;inset:0;background:rgba(10,20,40,.45);z-index:470;opacity:0;pointer-events:none;transition:.2s}
.hoja-fondo.abierta{opacity:1;pointer-events:auto}
.hoja{position:fixed;left:0;right:0;bottom:0;z-index:471;background:var(--sheet-bg);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-radius:20px 20px 0 0;padding:10px 16px calc(16px + var(--safe-b));
  box-shadow:0 -12px 40px rgba(0,0,0,.3);transform:translateY(105%);transition:transform .25s cubic-bezier(.2,.8,.2,1);
  max-height:80vh;overflow-y:auto}
.hoja.abierta{transform:translateY(0)}
.hoja .asa{width:42px;height:5px;border-radius:3px;background:var(--borde);margin:4px auto 12px}
.hoja .hoja-titulo{font-weight:800;color:var(--azul);font-size:15px;margin:0 0 10px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hoja .btn{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 8px;padding:13px 16px;font-size:15px;text-align:left;border-radius:14px}
.hoja .btn .ico-h{font-size:19px;width:26px;text-align:center;flex:none}
.hoja .btn.ico{padding:13px 16px;font-size:15px}
.hoja .hoja-sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--gris);margin:14px 4px 8px}

/* =====================================================================
   MÓVIL Y TABLETA VERTICAL (≤ 900px)
   ===================================================================== */
@media(max-width:900px){
  :root{--blur:8px}                /* vidrio más ligero: scroll fluido */
  body{background-attachment:scroll;animation:none;background-size:200% 200%}

  /* Barra superior compacta */
  .topbar{padding:0 12px;height:54px;gap:8px}
  .brand{font-size:17px}
  .brand img{max-height:28px!important}
  .userbox{font-size:12px;gap:6px}
  .userbox .nombre-u{display:none}
  .buscador-global input{width:36px;max-width:36px;padding:8px 0 8px 30px;border-radius:50%;
    background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 9px center/16px no-repeat;
    color:transparent;transition:.2s}
  .buscador-global input::placeholder{color:transparent}
  .buscador-global input:focus{width:min(70vw,320px);max-width:70vw;border-radius:22px;padding-left:34px;color:#16233a;
    background-color:rgba(255,255,255,.96);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3a6b' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
  #busqueda-result{top:64px;width:96vw}

  /* Contenido con espacio para la barra inferior */
  .layout{display:block}
  .wrap{margin:14px auto;padding:0 12px calc(var(--bnav-h) + var(--safe-b) + 16px)}
  h1{font-size:21px;margin-bottom:14px}
  h2{font-size:15.5px}
  .panel{padding:16px;border-radius:14px;margin-bottom:14px}
  .cards{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
  .card{padding:14px;border-radius:14px}
  .card .num{font-size:22px}
  .card .lbl{font-size:11px}
  .toolbar{gap:8px}
  .toolbar > div{display:flex;flex-wrap:wrap;gap:6px}
  .toolbar input[type=search]{min-width:0;width:100%}
  .btn{padding:10px 16px;font-size:14px}       /* dedo, no cursor */
  .btn.sm{padding:8px 12px;font-size:13px}
  .btn.ico{padding:8px 11px;font-size:14px}
  .acciones .btn.ico{padding:8px 11px;font-size:14px}
  .form-row input,.form-row select,.form-row textarea{padding:12px 13px;font-size:16px}  /* 16px: iOS no hace zoom */
  #busca-tabla{width:100%;font-size:16px}

  /* Menú lateral → cajón deslizable (se abre con "Más") */
  .sidenav{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(84vw,320px);height:100vh;z-index:450;
    order:0;flex:none;display:block;padding:14px 12px calc(14px + var(--safe-b));
    background:var(--sheet-bg);border-right:none;border-left:1px solid var(--glass-borde);
    box-shadow:-12px 0 40px rgba(0,0,0,.3);transform:translateX(105%);transition:transform .25s cubic-bezier(.2,.8,.2,1);overflow-y:auto}
  .sidenav.abierto{transform:translateX(0)}
  .sidenav .sn-titulo{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:6px 10px 12px}
  .sidenav .sn-cerrar{display:inline-flex;background:none;border:none;font-size:22px;color:var(--gris);cursor:pointer;padding:0 4px;line-height:1}
  .sidenav a{padding:12px 12px;font-size:15px;margin-bottom:2px}
  .sidenav a:hover{transform:none}
  .sn-fondo{display:block;position:fixed;inset:0;background:rgba(10,20,40,.45);z-index:440;opacity:0;pointer-events:none;transition:.2s}
  .sn-fondo.abierto{opacity:1;pointer-events:auto}

  /* Barra inferior tipo app */
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:430;height:calc(var(--bnav-h) + var(--safe-b));
    padding:0 4px var(--safe-b);background:var(--bnav-bg);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-top:1px solid var(--glass-borde);box-shadow:0 -6px 24px rgba(20,45,90,.14)}
  .bnav a,.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--gris);font-size:10.5px;font-weight:700;text-decoration:none;background:none;border:none;
    font-family:inherit;padding:6px 2px;cursor:pointer;border-radius:12px;transition:.15s;min-width:0}
  .bnav .ico{font-size:21px;line-height:1}
  .bnav a.active{color:var(--acento)}
  .bnav a.active .ico{transform:translateY(-1px)}
  .bnav a:hover,.bnav button:hover{text-decoration:none}
  .bnav .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

  /* Tablas → tarjetas. El script movil.js pone data-l en cada celda. */
  table.tabla.a-tarjetas{display:block;background:none;border:none;border-radius:0}
  table.tabla.a-tarjetas thead,table.tabla.a-tarjetas tr.cabecera{display:none}
  table.tabla.a-tarjetas tbody{display:block}
  table.tabla.a-tarjetas tr{display:block;background:var(--glass);border:1px solid var(--glass-borde);border-radius:14px;
    padding:12px 14px 10px;margin-bottom:10px;box-shadow:var(--sombra);position:relative}
  table.tabla.a-tarjetas tr:nth-child(even) td,table.tabla.a-tarjetas tr:hover td{background:transparent}
  table.tabla.a-tarjetas td{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:6px 0;border-bottom:1px dashed var(--borde);font-size:14px;text-align:right;white-space:normal}
  table.tabla.a-tarjetas td:last-child{border-bottom:none}
  table.tabla.a-tarjetas td::before{content:attr(data-l);color:var(--gris);font-size:11px;font-weight:800;
    text-transform:uppercase;letter-spacing:.4px;text-align:left;flex:0 0 38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.tabla.a-tarjetas td[data-l=""]::before,table.tabla.a-tarjetas td.sin-l::before{display:none}
  /* Primera celda: título de la tarjeta */
  table.tabla.a-tarjetas td.titulo-t{display:block;text-align:left;font-size:16px;font-weight:800;color:var(--azul);
    padding:0 0 8px;border-bottom:1px solid var(--borde);margin-bottom:4px}
  table.tabla.a-tarjetas td.titulo-t::before{display:none}
  table.tabla.a-tarjetas td.titulo-t .nom-corto,table.tabla.a-tarjetas td.titulo-t .dom-corto{max-width:100%;white-space:normal}
  /* Celda vacía: no ocupa lugar */
  table.tabla.a-tarjetas td.vacia-t{display:none}
  /* Acciones: fila de botones al pie */
  table.tabla.a-tarjetas td.acciones{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:6px;padding:10px 0 2px;border-bottom:none;text-align:left;
    position:static;background:none;box-shadow:none}
  table.tabla.a-tarjetas td.acciones::before{display:none}
  /* La tarjeta ya lleva su propio color de fondo por vencimiento */
  table.tabla.a-tarjetas tr.f-vencida{background:var(--acc-venc);border-color:rgba(217,83,79,.5)}
  table.tabla.a-tarjetas tr.f-pronto{background:var(--acc-pronto);border-color:rgba(224,168,0,.5)}
  table.tabla.a-tarjetas tr.f-vencida > td,table.tabla.a-tarjetas tr.f-pronto > td{background:transparent}
  table.tabla.a-tarjetas td.acciones::before{display:none}
  table.tabla.a-tarjetas td.acciones .btn{margin:0}
  table.tabla.a-tarjetas td.acciones .btn.ico{padding:9px 13px;font-size:15px}
  table.tabla.a-tarjetas td.acciones .btn.oculto-m{display:none}
  table.tabla.a-tarjetas td.acciones .btn.btn-mas{display:inline-flex;margin-left:auto;background:var(--glass-fuerte);color:var(--azul);border:1px solid var(--glass-borde2);box-shadow:none;font-size:18px;padding:6px 14px;line-height:1}
  /* Semáforos y accesos del dominio siempre visibles en tarjeta */
  table.tabla.a-tarjetas .dom-acc{visibility:visible}
  table.tabla.a-tarjetas .dom-cell{white-space:normal;flex-wrap:wrap}
  table.tabla.a-tarjetas td.col-rev{justify-content:space-between}
  table.tabla.a-tarjetas .num-col{white-space:normal}
  /* Renglones de una sola celda ("Mostrando 2 de 33", "No hay registros"): sin tarjeta */
  table.tabla.a-tarjetas tr.fila-plana{background:none;border:none;box-shadow:none;padding:6px 4px}
  table.tabla.a-tarjetas tr.fila-plana td{display:block;text-align:center;border:none;padding:4px 0}
  /* Casilla de selección masiva: arriba a la derecha */
  table.tabla.a-tarjetas td.sel-t{position:absolute;top:10px;right:12px;padding:0;border:none;width:auto}
  table.tabla.a-tarjetas td.sel-t::before{display:none}
  table.tabla.a-tarjetas td.sel-t input{width:20px;height:20px;accent-color:var(--acento)}
  table.tabla.a-tarjetas td.titulo-t.con-sel{padding-right:34px}
  /* Tablas chicas que no se vuelven tarjeta: scroll horizontal */
  .tabla-scroll{margin:0 -16px;padding:0 16px}

  /* Suplantación y hoja */
  .hoja .btn{font-size:15px}
  /* Login */
  .login-card{padding:26px 20px;border-radius:16px}
  /* Ficha de cliente: cabecera con avatar apilada */
  .ficha-cab{flex-direction:column;align-items:flex-start}
}

/* ===== Escritorio: tablas anchas =====
   El panel se desplaza de lado y la columna de acciones se queda pegada a la
   derecha, para que los botones nunca se corten. */
@media(min-width:901px){
  .panel:has(> table.tabla),.panel:has(> .tabla-scroll){overflow-x:auto}
  /* El overflow:hidden de la tabla (que redondea las esquinas) convierte a la
     propia tabla en contenedor de desplazamiento y anula el pegado. Dentro de
     un panel que ya se desplaza, se quita. */
  .panel:has(> table.tabla) > table.tabla{overflow:visible}
  table.tabla th:last-child,table.tabla td.acciones{
    position:sticky;right:0;z-index:2;
    box-shadow:-10px 0 14px -10px rgba(20,45,90,.35)
  }
  table.tabla th:last-child{background:var(--th-solido)}   /* opaco: si no, se ve el texto por detrás */
  /* La celda flota sobre el resto de la tabla, así que su fondo NO puede ser
     traslúcido. Se pinta con una capa propia en vez de con el fondo de la
     celda: así no compite en especificidad con los colores de fila. */
  table.tabla td.acciones::before{
    content:"";position:absolute;inset:0;z-index:-1;background:var(--acc-bg)
  }
  table.tabla tr:hover td.acciones::before{background:var(--acc-bg-hover)}
  table.tabla tr.f-vencida td.acciones::before{background:var(--acc-venc)}
  table.tabla tr.f-pronto  td.acciones::before{background:var(--acc-pronto)}
}

/* Pantallas muy chicas */
@media(max-width:380px){
  .cards{grid-template-columns:1fr 1fr;gap:8px}
  .card .num{font-size:19px}
  .bnav a,.bnav button{font-size:10px}
  .bnav .ico{font-size:19px}
}

/* Móvil apaisado / tableta: dos columnas de tarjetas */
@media(min-width:640px) and (max-width:900px){
  table.tabla.a-tarjetas tbody{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  table.tabla.a-tarjetas tr{margin-bottom:0}
  .cards{grid-template-columns:repeat(4,1fr)}
}

/* Menos movimiento si el usuario lo pidió */
@media(prefers-reduced-motion:reduce){
  body{animation:none}
  *{transition:none!important;animation:none!important}
}

/* Impresión limpia */
@media print{
  body{background:#fff;color:#000}
  .topbar,.sidenav,.bnav,.toolbar .btn,.acciones{display:none!important}
  .panel,.card{background:#fff;box-shadow:none;border:1px solid #ccc;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* =====================================================================
   CENTRO DE AYUDA
   ===================================================================== */

/* ---------- Panel: zona de la imagen de portada ---------- */
.kb-portada{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:150px;border:2px dashed var(--glass-borde2);border-radius:14px;
  background:rgba(255,255,255,.45);cursor:pointer;overflow:hidden;transition:.15s
}
.kb-portada:hover,.kb-portada.encima{border-color:var(--acento);background:rgba(31,140,235,.06)}
.kb-portada img{display:none;width:100%;max-height:260px;object-fit:cover}
.kb-portada.con-img img{display:block}
.kb-portada.con-img .kb-portada-vacia{display:none}
.kb-portada-vacia{text-align:center;color:var(--gris);padding:24px 16px;line-height:1.6}
.kb-portada #img-quitar{display:none;position:absolute;top:10px;right:10px;z-index:2}
.kb-portada.con-img #img-quitar{display:inline-block}

/* ---------- Panel: lista ordenable ---------- */
tr.kb-cat > td{background:rgba(27,58,107,.09)!important;font-size:13px;color:var(--azul)}
tr.kb-cat .kb-mover{float:right;display:inline-flex;gap:2px}
td.kb-asa{cursor:grab;color:var(--gris);text-align:center;font-size:16px;user-select:none}
td.kb-asa:active{cursor:grabbing}
tr.kb-art.arrastrando{opacity:.4}
tr.kb-art.encima-fila > td{box-shadow:inset 0 -3px 0 var(--acento)}
img.kb-mini{width:44px;height:30px;object-fit:cover;border-radius:5px;vertical-align:middle;margin-right:8px;border:1px solid var(--borde)}

/* ---------- Portal: tarjetas del centro de ayuda ---------- */
.kb-buscador{position:relative;margin-bottom:22px}
.kb-buscador input{
  width:100%;padding:15px 18px 15px 46px;font-size:16px;border-radius:14px;
  border:1px solid var(--glass-borde);background:var(--glass-fuerte);color:var(--texto);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:var(--sombra)
}
.kb-buscador input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 4px rgba(31,140,235,.15)}
.kb-buscador::before{content:"🔍";position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:17px;opacity:.6}

.kb-seccion{margin-bottom:30px}
.kb-seccion > h2{margin-bottom:14px}
.kb-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.kb-tarjeta{
  display:flex;flex-direction:column;background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-borde);border-radius:16px;overflow:hidden;
  box-shadow:var(--sombra);transition:.22s cubic-bezier(.2,.8,.2,1);color:inherit;font-weight:400
}
.kb-tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-hover);text-decoration:none;background:var(--glass-fuerte)}
.kb-tarjeta .kb-img{display:block;width:100%;height:132px;object-fit:cover;background:var(--azul-claro)}
.kb-tarjeta .kb-sinimg{
  height:132px;display:flex;align-items:center;justify-content:center;font-size:40px;
  background:linear-gradient(135deg,rgba(47,111,179,.14),rgba(31,140,235,.06))
}
.kb-tarjeta .kb-cuerpo{padding:15px 17px 17px;flex:1;display:flex;flex-direction:column}
.kb-tarjeta h3{margin:0 0 7px;font-size:15.5px;color:var(--azul);font-weight:700;line-height:1.35}
.kb-tarjeta p{margin:0;font-size:13px;color:var(--gris);line-height:1.55;flex:1}
.kb-tarjeta .kb-leer{margin-top:12px;font-size:13px;font-weight:700;color:var(--acento)}

.kb-vacio{text-align:center;padding:40px 20px;color:var(--gris)}
.kb-vacio .em{font-size:44px;display:block;margin-bottom:10px}

/* Artículo abierto */
.kb-cabecera{width:100%;max-height:300px;object-fit:cover;border-radius:16px;margin-bottom:20px;box-shadow:var(--sombra)}
.kb-cuerpo-art{font-size:15.5px;line-height:1.75}
.kb-cuerpo-art img{max-width:100%;height:auto;border-radius:10px;margin:14px 0;box-shadow:var(--sombra)}
.kb-cuerpo-art h3{color:var(--azul);margin:22px 0 10px;font-size:16px}
.kb-cuerpo-art ol,.kb-cuerpo-art ul{padding-left:22px}
.kb-cuerpo-art li{margin-bottom:6px}
.kb-cuerpo-art pre{white-space:pre-wrap;word-break:break-word}

@media(max-width:900px){
  .kb-rejilla{grid-template-columns:1fr;gap:12px}
  .kb-tarjeta{flex-direction:row}
  .kb-tarjeta .kb-img,.kb-tarjeta .kb-sinimg{width:96px;height:auto;min-height:96px;flex:none;font-size:28px}
  .kb-tarjeta .kb-cuerpo{padding:12px 14px}
  .kb-tarjeta h3{font-size:14.5px}
  .kb-tarjeta p{font-size:12.5px}
  .kb-cabecera{max-height:180px;border-radius:12px}
  .kb-portada{min-height:120px}
}