/* Panel de correo de bn-01 · tablero. Celular primero, claro/oscuro según el aparato.
   Identidad BN: azul #13358c de soporte, rojo #c81d25 solo en la marca. En el panel el rojo se reserva para BORRAR.
   Sin style="" (CSP): las barras usan .w-0 … .w-100 (al final del archivo). */
:root {
  --fondo: #f3f5fa; --sup: #fff; --sup-2: #f7f8fc; --texto: #111a2e; --suave: #556079; --borde: #e1e5ee; --borde-2: #cfd5e2;
  --marca: #13358c; --marca-2: #1f4bc2; --marca-f: #eaeffb; --marca-txt: #fff; --enlace: #1d43b0; --bn-rojo: #c81d25;
  --verde: #18794e; --verde-f: #e3f4ea; --ambar: #8a5300; --ambar-f: #fff4d9; --ambar-b: #e2a72e;
  --rojo: #b4161e; --rojo-f: #fdecec; --rojo-b: #c81d25; --rojo-txt: #fff;
  --seg-correo: #13358c; --seg-resto: #9aa8c4; --pista: #e7ebf3; --barra: #3f63d6;
  --sombra: 0 1px 2px rgb(17 26 46 / 6%), 0 6px 20px rgb(17 26 46 / 5%);
  --radio: 16px; --radio-2: 10px;
  --lateral-f: #0f2a72; --lateral-txt: #dfe6fb; --lateral-suave: #a9b8e6;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b1121; --sup: #121a2d; --sup-2: #172038; --texto: #e7ecf6; --suave: #a3aec6; --borde: #222d47; --borde-2: #2f3b5b;
    --marca: #3a62dd; --marca-2: #5479ec; --marca-f: #1a2650; --marca-txt: #fff; --enlace: #9db8ff;
    --verde: #5bd394; --verde-f: #0f2e22; --ambar: #f3c457; --ambar-f: #2d2310; --ambar-b: #8f6c1d;
    --rojo: #ff8a8f; --rojo-f: #3a1519; --rojo-b: #c4222a; --rojo-txt: #fff;
    --seg-correo: #7593ff; --seg-resto: #4a5878; --pista: #1d2741; --barra: #7593ff;
    --sombra: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 22%);
    --lateral-f: #0e1630; --lateral-txt: #dfe6fb; --lateral-suave: #94a3c9;
  }
}

/* ───── base ───── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-variant-numeric: tabular-nums; overflow-x: hidden; }
a { color: var(--enlace); text-underline-offset: 2px; }
h1 { font-size: 26px; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 16px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--sup-2); border: 1px solid var(--borde); border-radius: 6px; padding: 1px 6px; word-break: break-all; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--barra); outline-offset: 2px; border-radius: 6px; }

/* ───── armazón: barra lateral (escritorio) / barra de arriba (celular) ───── */
.shell { min-height: 100vh; }
.lateral {
  position: sticky; top: 0; z-index: 10; background: var(--lateral-f); color: var(--lateral-txt);
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "marca salud sesion" "menu menu menu";
  align-items: center; gap: 6px 10px; padding: 10px 16px 0;
}
.marca { grid-area: marca; display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.marca-ico { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #13358c; color: #fff; flex: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%); }
.marca-ico .ico { width: 20px; height: 20px; }
.marca-ico::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--bn-rojo); box-shadow: 0 0 0 2px #13358c; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marca-txt strong { font-size: 15px; white-space: nowrap; }
.marca-txt small { color: var(--lateral-suave); font-size: 12px; }
.menu { grid-area: menu; display: flex; gap: 2px; overflow-x: auto; margin: 0 -16px; padding: 4px 12px 8px; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; color: var(--lateral-suave); text-decoration: none; white-space: nowrap; font-size: 15px; font-weight: 600; min-height: 44px; }
.menu a:hover { background: rgb(255 255 255 / 8%); color: #fff; }
.menu a.activo { background: rgb(255 255 255 / 14%); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); }
.salud { grid-area: salud; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.25; min-width: 0; }
.salud-txt { display: flex; flex-direction: column; }
.salud-txt small { color: var(--lateral-suave); font-size: 12px; }
.salud-punto { width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgb(74 222 128 / 20%); flex: none; }
.salud-alerta .salud-punto { background: #ff5a5f; box-shadow: 0 0 0 4px rgb(255 90 95 / 25%); }
.salud-\? .salud-punto { background: #a9b8e6; box-shadow: none; }
.salud-alerta strong { color: #ffb3b6; }
.sesion { grid-area: sesion; display: flex; align-items: center; gap: 8px; }
.sesion-nombre { display: none; }
.en-linea { display: inline; margin: 0; }
.enlace { background: none; border: 0; cursor: pointer; font: inherit; min-height: 0; width: auto; margin: 0; padding: 0; color: inherit; }
.salir { display: inline-flex; align-items: center; gap: 6px; color: var(--lateral-txt); font-size: 14px; font-weight: 600; padding: 8px 10px; border-radius: 8px; min-height: 40px; }
.salir:hover { background: rgb(255 255 255 / 10%); color: #fff; }
@media (max-width: 559px) {
  .menu-largo { display: none; }
  .menu a { padding: 9px 10px; gap: 6px; }
  .salud-txt { display: none; }
  .marca-txt small { display: none; }
}
@media (max-width: 429px) {
  .menu a .ico { display: none; }
  .menu a { padding: 9px 11px; }
}

.contenido { padding: 16px 16px 40px; width: 100%; max-width: 1240px; margin: 0 auto; min-width: 0; }
.pie { text-align: center; color: var(--suave); font-size: 12px; padding: 28px 0 0; }

@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); }
  .lateral { height: 100vh; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 22px 16px 18px; }
  .marca { padding: 0 6px 22px; }
  .menu { flex-direction: column; margin: 0; padding: 0; gap: 4px; overflow: visible; }
  .menu a { padding: 10px 12px; }
  .salud { margin-top: auto; padding: 12px; border-radius: 12px; background: rgb(255 255 255 / 6%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%); }
  .sesion { margin-top: 10px; padding: 10px 6px 0; border-top: 1px solid rgb(255 255 255 / 10%); }
  .sesion-nombre { display: block; flex: 1; font-size: 14px; font-weight: 600; color: #fff; }
  .shell { background: linear-gradient(90deg, var(--lateral-f) 256px, transparent 256px); }
  .contenido { padding: 28px 36px 48px; }
  h1 { font-size: 30px; }
}

/* ───── piezas comunes ───── */
.tarjeta { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); min-width: 0; }
.tarjeta-suave { background: var(--sup-2); box-shadow: none; }
.tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tarjeta-cabeza h2 .ico, h2 .ico { color: var(--barra); }
.cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin: 4px 0 18px; }
.cabeza > div { min-width: 0; }
.sobre { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.nota { color: var(--suave); font-size: 14px; margin: 8px 0 0; }
.nota-ico { display: flex; align-items: flex-start; gap: 6px; }
.nota-ico .ico { width: 16px; height: 16px; margin-top: 2px; }
.nota-ico a { display: inline-flex; align-items: center; gap: 4px; }
.nota-ico a .ico { margin: 0; }
.miga { margin: 0 0 10px; }
.miga a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; font-size: 15px; padding: 6px 0; }
.vacio { color: var(--suave); text-align: center; padding: 18px; margin: 0; border: 1px dashed var(--borde-2); border-radius: var(--radio-2); }
.dos-col { display: grid; gap: 16px; }
@media (min-width: 900px) { .dos-col { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }

.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--marca-f); color: var(--enlace); font-weight: 700; font-size: 15px; flex: none; }
.avatar-chico { width: 30px; height: 30px; font-size: 13px; background: rgb(255 255 255 / 14%); color: #fff; }
.avatar-grande { width: 64px; height: 64px; font-size: 26px; border-radius: 18px; }
.avatar-suspendida { background: var(--rojo-f); color: var(--rojo); }

.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; line-height: 1.2; padding: 3px 9px; border-radius: 999px; background: var(--marca-f); color: var(--enlace); white-space: nowrap; }
.chip .ico { width: 13px; height: 13px; stroke-width: 2.4; vertical-align: 0; }
.chip-rojo { background: var(--rojo-f); color: var(--rojo); }
.chip-verde { background: var(--verde-f); color: var(--verde); }
.chip-ambar { background: var(--ambar-f); color: var(--ambar); }
.chip-gris { background: var(--sup-2); color: var(--suave); box-shadow: inset 0 0 0 1px var(--borde); }
.marcas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }

/* ───── botones ───── */
button, .boton, .boton-sec { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 650; padding: 10px 18px; min-height: 44px; border-radius: 12px; border: 1px solid var(--borde-2); background: var(--sup); color: var(--texto); cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, transform .1s; }
button:hover, .boton-sec:hover { border-color: var(--barra); }
button:active, .boton:active, .boton-sec:active { transform: translateY(1px); }
button.primario, .boton { background: var(--marca); color: var(--marca-txt); border-color: var(--marca); box-shadow: 0 1px 2px rgb(19 53 140 / 25%); }
button.primario:hover, .boton:hover { background: var(--marca-2); border-color: var(--marca-2); }
form > button.primario, form > button.peligro, form > button.alerta { width: 100%; margin-top: 18px; min-height: 48px; }
button.alerta { background: var(--ambar-f); color: var(--ambar); border: 1.5px solid var(--ambar-b); }
button.alerta:hover { border-color: var(--ambar); }
button.peligro { background: var(--rojo-b); color: var(--rojo-txt); border-color: var(--rojo-b); }
button.peligro:hover { filter: brightness(1.08); }
button:disabled, button:disabled:hover { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.chico { padding: 6px 12px; min-height: 40px; font-size: 14px; flex: none; border-radius: 10px; }
.chico .ico { width: 16px; height: 16px; }
.chico-acento { color: var(--enlace); border-color: var(--borde-2); background: var(--marca-f); }
.botonera { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ───── formularios ───── */
label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 15px; }
label.check { font-weight: 400; display: flex; gap: 10px; align-items: flex-start; }
label.check input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--marca); flex: none; }
input, select, textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--borde-2); border-radius: 10px; background: var(--sup-2); color: var(--texto); min-height: 46px; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: var(--suave); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--barra); box-shadow: 0 0 0 3px rgb(63 99 214 / 25%); background: var(--sup); }
input::placeholder, textarea::placeholder { color: var(--suave); opacity: .8; }
.direccion { display: flex; gap: 6px; align-items: center; }
.direccion input { flex: 1 1 40%; min-width: 0; }
.direccion select { flex: 1 1 55%; min-width: 0; }
.arroba { font-weight: 700; color: var(--suave); }
.clave-fila { display: flex; gap: 6px; flex-wrap: wrap; }
.clave-fila input { flex: 1 1 200px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.vista-previa { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--marca-f); color: var(--texto); font-size: 14px; word-break: break-all; }
.vista-previa strong { color: var(--enlace); }

/* ───── avisos ───── */
.aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; margin: 0 0 14px; border: 1px solid transparent; font-size: 15px; }
.aviso .ico { margin-top: 2px; }
.aviso-ok { background: var(--verde-f); color: var(--verde); border-color: currentColor; }
.aviso-error { background: var(--rojo-f); color: var(--rojo); border-color: currentColor; }
.aviso-alerta { background: var(--ambar-f); color: var(--ambar); border-color: var(--ambar-b); }
.aviso-info { background: var(--marca-f); color: var(--enlace); border-color: transparent; }

/* ───── tablero ───── */
.tablero, .tablero-2 { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 1100px) {
  .tablero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .tablero-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 700px) and (max-width: 1099px) { .tablero-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.estado { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.estado .ico { width: 15px; height: 15px; stroke-width: 2.4; }
.estado-ok { background: var(--verde-f); color: var(--verde); }
.estado-ajustado { background: var(--ambar-f); color: var(--ambar); }
.estado-critico { background: var(--rojo-f); color: var(--rojo); }
.estado-nd { background: var(--sup-2); color: var(--suave); }

.disco-cifras { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cifra-grande, .cifra-pct { margin: 0; display: flex; flex-direction: column; }
.cifra-grande strong { font-size: 44px; line-height: 1; font-weight: 750; letter-spacing: -.025em; }
.cifra-grande span, .cifra-pct span { color: var(--suave); font-size: 14px; margin-top: 6px; }
.cifra-pct { text-align: right; }
.cifra-pct strong { font-size: 26px; line-height: 1; font-weight: 700; }
.pila { display: flex; gap: 2px; height: 18px; margin: 18px 0 14px; border-radius: 6px; background: var(--pista); overflow: hidden; }
.seg { display: block; height: 100%; flex: none; }
.seg-correo { background: var(--seg-correo); }
.seg-resto { background: var(--seg-resto); }
.disco-ajustado .seg-resto { background: var(--ambar-b); }
.disco-critico .seg-resto { background: var(--rojo-b); }
.leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.leyenda li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--suave); }
.leyenda strong { margin-left: auto; color: var(--texto); font-size: 15px; }
.punto { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.punto-correo { background: var(--seg-correo); }
.punto-resto { background: var(--seg-resto); }
.punto-libre { background: var(--pista); box-shadow: inset 0 0 0 1px var(--borde-2); }
.disco-ajustado .punto-resto { background: var(--ambar-b); }
.disco-critico .punto-resto { background: var(--rojo-b); }
.disco-nota { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--marca-f); color: var(--texto); }
.disco-nota .ico { color: var(--enlace); }
@media (min-width: 560px) { .leyenda { grid-template-columns: repeat(3, minmax(0, 1fr)); } .leyenda li { flex-wrap: wrap; gap: 4px 8px; } .leyenda strong { margin-left: 0; width: 100%; padding-left: 20px; } }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi strong { font-size: 30px; line-height: 1.1; font-weight: 750; letter-spacing: -.02em; margin-top: 8px; }
.kpi > span:last-child { color: var(--suave); font-size: 13px; line-height: 1.35; }
.kpi-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--marca-f); color: var(--enlace); }
.kpi-alerta .kpi-ico { background: var(--ambar-f); color: var(--ambar); }
.kpi-rojo .kpi-ico { background: var(--rojo-f); color: var(--rojo); }
@media (min-width: 1100px) { .kpi strong { font-size: 32px; } }

.barra { display: block; height: 8px; border-radius: 4px; background: var(--pista); overflow: hidden; }
.barra-valor { display: block; height: 100%; border-radius: 4px; background: var(--barra); min-width: 3px; }
.barra-valor.w-0 { min-width: 0; }
.barra-top { background: var(--seg-correo); }
.barra-dom { background: var(--seg-resto); }
.tam { font-weight: 600; white-space: nowrap; text-align: right; font-size: 14px; }
.tam-top { font-weight: 750; }

.ranking, .dominios { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ranking li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 74px; grid-template-areas: "n dir tam" "n barra pct"; align-items: center; gap: 4px 10px; }
.puesto { grid-area: n; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--borde); font-size: 13px; font-weight: 700; color: var(--suave); }
.ranking li:first-child .puesto { background: var(--marca); color: #fff; box-shadow: none; }
.ranking-dir { grid-area: dir; font-weight: 600; color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ranking-dir:hover { color: var(--enlace); }
.ranking .tam { grid-area: tam; }
.ranking .barra { grid-area: barra; }
.ranking-pct { grid-area: pct; font-size: 12px; color: var(--suave); text-align: right; min-width: 34px; }
.dom { color: var(--suave); font-weight: 400; }
.dominios li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nom n tam" "barra barra barra"; align-items: center; gap: 4px 12px; }
.dominio-nombre { grid-area: nom; font-weight: 600; color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dominio-nombre:hover { color: var(--enlace); }
.dominio-n { grid-area: n; font-size: 12px; font-weight: 700; color: var(--suave); background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--borde); border-radius: 999px; padding: 1px 8px; }
.dominios .tam { grid-area: tam; min-width: 64px; }
.dominios .barra { grid-area: barra; height: 6px; }

/* ───── lista de casillas ───── */
.casillas { margin-top: 26px; }
.herramientas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.buscador { position: relative; flex: 1 1 260px; margin: 0; min-width: 0; }
.buscador .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--suave); pointer-events: none; }
.buscador input { padding-left: 42px; background: var(--sup); min-height: 48px; border-radius: 12px; box-shadow: var(--sombra); }
.segmentado { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--sup); border: 1px solid var(--borde); box-shadow: var(--sombra); flex: none; }
.segmentado a { padding: 8px 14px; border-radius: 9px; text-decoration: none; color: var(--suave); font-weight: 650; font-size: 14px; min-height: 38px; display: inline-flex; align-items: center; }
.segmentado a:hover { color: var(--texto); }
.segmentado a[aria-current] { background: var(--marca); color: #fff; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 14px; }
.filtro { min-height: 36px; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--suave); background: var(--sup); gap: 6px; }
.filtro .ico { width: 15px; height: 15px; }
.filtro b { font-weight: 700; color: var(--texto); background: var(--sup-2); border-radius: 999px; padding: 0 7px; font-size: 12px; }
.filtro[aria-pressed="true"] { background: var(--marca-f); color: var(--enlace); border-color: var(--barra); }
.filtro[aria-pressed="true"] b { background: var(--sup); }

.grupo { padding: 0; margin-bottom: 14px; overflow: hidden; }
.grupo-cabeza { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--borde); background: var(--sup-2); }
.grupo-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--borde); color: var(--enlace); flex: none; }
.grupo-titulo { flex: 1; min-width: 0; }
.grupo-titulo h2 { font-size: 17px; overflow-wrap: anywhere; }
.grupo-titulo .nota { margin: 2px 0 0; font-size: 13px; }
.grupo .vacio { margin: 14px 16px; }
.lista { list-style: none; margin: 0; padding: 0; }
.fila a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; grid-template-areas: "av dir fl" "av uso fl";
  align-items: center; gap: 4px 12px; padding: 12px 16px; text-decoration: none; color: var(--texto); min-height: 60px;
  border-top: 1px solid var(--borde); transition: background-color .12s;
}
.fila:first-child a { border-top: 0; }
.fila a:hover { background: var(--sup-2); }
.fila .avatar { grid-area: av; }
.fila-dir { grid-area: dir; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.dir { font-weight: 650; overflow-wrap: anywhere; }
.dom-tenue { opacity: .85; }
.fila-uso { grid-area: uso; display: flex; align-items: center; gap: 10px; min-width: 0; }
.fila-uso .barra { flex: 1; max-width: 360px; height: 6px; }
.fila-uso .tam { min-width: 64px; }
.fila-flecha { grid-area: fl; color: var(--suave); width: 16px; height: 16px; }
.es-suspendida a { background: linear-gradient(90deg, var(--rojo-f), transparent 40%); }
.es-suspendida .dir { color: var(--rojo); }
@media (min-width: 760px) {
  .fila a { grid-template-columns: 36px minmax(0, 1fr) minmax(220px, 34%) 16px; grid-template-areas: "av dir uso fl"; }
  .fila-uso .barra { max-width: none; }
}

/* ───── ficha de casilla ───── */
.ficha { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px 16px; align-items: start; margin-bottom: 16px; }
.ficha-id { min-width: 0; }
.ficha-id .marcas { margin-top: 10px; }
.ficha-id .chip { white-space: normal; }
.dir-grande { overflow-wrap: anywhere; font-size: 24px; }
.ficha-uso { grid-column: 1 / -1; padding: 14px; border-radius: 12px; background: var(--sup-2); border: 1px solid var(--borde); }
.ficha-uso .cifra-grande strong { font-size: 34px; }
.ficha-uso .barra { margin: 12px 0 0; }
.ficha-suspendida { border-color: var(--rojo); box-shadow: inset 4px 0 0 var(--rojo), var(--sombra); }
@media (min-width: 900px) {
  .ficha { grid-template-columns: 64px minmax(0, 1fr) minmax(260px, 32%); align-items: center; }
  .ficha-uso { grid-column: auto; }
  .dir-grande { font-size: 28px; }
}
.ficha-grid { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .ficha-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ficha-clave { grid-column: 2; grid-row: 1 / span 2; }
}
.datos-lista { margin: 0; display: grid; gap: 0; }
.datos-lista div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 9px 0; border-top: 1px solid var(--borde); }
.datos-lista div:first-child { border-top: 0; padding-top: 0; }
.datos-lista dt { font-size: 13px; color: var(--suave); font-weight: 600; }
.datos-lista dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; overflow-wrap: anywhere; }
.datos-lista small { color: var(--suave); }
@media (min-width: 560px) { .datos-lista div { grid-template-columns: 130px minmax(0, 1fr); gap: 12px; } }
.datos { background: var(--sup-2); border: 1px solid var(--borde); border-radius: 10px; padding: 12px; white-space: pre-wrap; word-break: break-word; font-size: 14px; }

/* zona de cuidado: suspender (ámbar, contorno) ≠ borrar (rojo lleno) */
.zona-peligro { margin-top: 28px; }
.zona-peligro > h2 { color: var(--rojo); margin-bottom: 12px; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; }
.zona-peligro > h2 .ico { color: var(--rojo); }
.peligro-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .peligro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.accion-suspender { border-color: var(--ambar-b); box-shadow: inset 4px 0 0 var(--ambar-b), var(--sombra); }
.accion-suspender h3 .ico { color: var(--ambar); }
.accion-reactivar { border-color: var(--verde); box-shadow: inset 4px 0 0 var(--verde), var(--sombra); }
.tarjeta.peligro { border-color: var(--rojo-b); background: linear-gradient(180deg, var(--rojo-f), var(--sup) 70%); box-shadow: inset 4px 0 0 var(--rojo-b), var(--sombra); }
.tarjeta.peligro h2, .tarjeta.peligro h3 { color: var(--rojo); }
.tarjeta.peligro h2 .ico, .tarjeta.peligro h3 .ico { color: var(--rojo); }
.tarjeta.peligro h2 { margin-bottom: 4px; }

/* ───── reenvíos ───── */
.fila-reenvio a { display: grid; grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "ori fl" "dst fl"; gap: 6px 12px; padding: 14px 4px; border-top: 1px solid var(--borde); text-decoration: none; color: var(--texto); align-items: center; }
.fila-reenvio:first-child a { border-top: 0; padding-top: 0; }
.fila-reenvio a:hover .dir { color: var(--enlace); }
.reenvio-origen { grid-area: ori; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.reenvio-flecha { display: none; color: var(--suave); }
.reenvio-destinos { grid-area: dst; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.destino { font-size: 13px; padding: 3px 10px; border-radius: 8px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--borde); overflow-wrap: anywhere; }
.destino::before { content: "→ "; color: var(--suave); }
.es-sin-copia a { box-shadow: inset 3px 0 0 var(--rojo); padding-left: 12px; }

/* ───── actividad ───── */
.registro { list-style: none; padding: 0; margin: 0; }
.evento { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--borde); }
.evento:first-child { border-top: 0; padding-top: 0; }
.evento-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--marca-f); color: var(--enlace); }
.evento-mal .evento-ico { background: var(--rojo-f); color: var(--rojo); }
.evento-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evento-titulo { overflow-wrap: anywhere; }
.evento-titulo .dir { font-weight: 400; color: var(--suave); }
.evento-meta { font-size: 13px; color: var(--suave); }
.evento-res { font-size: 13px; color: var(--rojo); overflow-wrap: anywhere; }
.evento-crudo { display: block; }

/* ───── nueva ───── */
.pasos { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
.tarjeta-suave h2 { margin-bottom: 4px; }

/* ───── entrada ───── */
.entrada-pagina { min-height: 100vh; padding: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(circle at 15% 10%, var(--marca-f), transparent 45%), var(--fondo); }
.entrada-aviso { width: 100%; max-width: 960px; }
.entrada { width: 100%; max-width: 960px; display: grid; gap: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgb(17 26 46 / 16%); }
.entrada-marca { display: none; }
.entrada-form { border-radius: 22px; padding: 26px 22px; border: 1px solid var(--borde); }
.entrada-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.entrada-cabeza .nota { margin: 2px 0 0; }
.codigo { font-size: 22px; letter-spacing: .35em; text-align: center; font-weight: 700; }
.codigo::placeholder { letter-spacing: .35em; }
.olvido { margin-top: 20px; padding: 12px 14px; border-radius: 12px; background: var(--sup-2); border: 1px solid var(--borde); }
.olvido summary { cursor: pointer; font-weight: 600; color: var(--texto); }
.olvido p { margin: 10px 0 0; }
@media (min-width: 820px) {
  .entrada-pagina { padding: 32px; }
  .entrada { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--sup); }
  .entrada-form { border-radius: 0; border: 0; box-shadow: none; padding: 44px 40px; }
  .entrada-cabeza .marca-ico { display: none; }
  .entrada-marca {
    display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 44px 40px; color: #fff;
    background: radial-gradient(rgb(255 255 255 / 10%) 1px, transparent 1.5px) 0 0 / 18px 18px, linear-gradient(160deg, #1a43a8 0%, #13358c 45%, #0c2366 100%);
  }
  .marca-ico-grande { width: 56px; height: 56px; border-radius: 16px; margin-bottom: auto; background: rgb(255 255 255 / 12%); }
  .marca-ico-grande .ico { width: 28px; height: 28px; }
  .marca-ico-grande::after { width: 14px; height: 14px; box-shadow: 0 0 0 3px #1a43a8; }
  .entrada-sobre { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #b9c8f2; font-weight: 700; }
  .entrada-titulo { margin: 0; font-size: 36px; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
  .entrada-bajada { margin: 0 0 18px; color: #d6dff8; font-size: 16px; max-width: 30ch; }
  .entrada-puntos { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgb(255 255 255 / 16%); display: grid; gap: 10px; font-size: 14px; color: #e3e9fb; }
  .entrada-puntos li { display: flex; align-items: center; gap: 10px; }
  .entrada-puntos .ico { color: #b9c8f2; }
}

/* ───── vencimientos y salud ───── */
.menu-corto { display: none; }
@media (max-width: 559px) { .menu-corto { display: inline; } .proximo .cifra-pct { display: none; } }
@media (max-width: 429px) { .menu { gap: 0; padding-left: 10px; padding-right: 10px; } .menu a { padding: 9px 7px; font-size: 14px; } }

/* franja del inicio: «Próximo vencimiento» */
.franja { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; padding: 12px 16px; background: var(--sup); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); color: var(--texto); text-decoration: none; transition: border-color .15s; }
.franja:hover { border-color: var(--barra); }
.franja:hover .fila-flecha { color: var(--enlace); }
.franja-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--marca-f); color: var(--enlace); flex: none; }
.franja-ok .franja-ico { background: var(--verde-f); color: var(--verde); }
.franja-ajustado .franja-ico { background: var(--ambar-f); color: var(--ambar); }
.franja-critico .franja-ico { background: var(--rojo-f); color: var(--rojo); }
.franja-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; line-height: 1.3; }
.franja-txt small { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.franja-txt strong { font-size: 16px; overflow-wrap: anywhere; }
.franja-plazo { font-weight: 600; }
.franja-ajustado .franja-plazo { color: var(--ambar); }
.franja-critico .franja-plazo { color: var(--rojo); }
.franja-meta { color: var(--suave); font-size: 14px; white-space: nowrap; }
.franja .fila-flecha { color: var(--suave); }
@media (max-width: 559px) { .franja { padding: 12px 14px; } .franja-meta { order: 3; width: 100%; padding-left: 52px; white-space: normal; } .franja .chip { order: 4; margin-left: 52px; } .franja .fila-flecha { display: none; } }

/* lo próximo */
.proximo-nombre { margin: -4px 0 12px; font-size: 22px; font-weight: 750; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cifra-grande strong small { font-size: 22px; font-weight: 650; letter-spacing: 0; }
.proximo-ajustado .cifra-grande strong { color: var(--ambar); }
.proximo-critico .cifra-grande strong { color: var(--rojo); }
.cifra-pct strong { overflow-wrap: anywhere; }
.proximo-despues { margin-top: 12px; }
.proximo-despues strong { color: var(--texto); font-weight: 600; }

/* para atender */
.pendientes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pend { display: flex; gap: 12px; align-items: flex-start; }
.pend-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex: none; background: var(--sup-2); color: var(--suave); box-shadow: inset 0 0 0 1px var(--borde); }
.pend-ico .ico { width: 16px; height: 16px; }
.pend-critico .pend-ico { background: var(--rojo-f); color: var(--rojo); box-shadow: none; }
.pend-ajustado .pend-ico { background: var(--ambar-f); color: var(--ambar); box-shadow: none; }
.pend-info .pend-ico { background: var(--marca-f); color: var(--enlace); box-shadow: none; }
.pend-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 5px; }
.pend-txt strong { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.pend-txt small { font-size: 13px; color: var(--suave); line-height: 1.4; overflow-wrap: anywhere; }

/* dominios: regla de 2 años por dominio (la barra termina el día que vence) */
.dominios-venc { margin-bottom: 16px; }
.leyenda-venc { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--suave); }
.lv { display: inline-flex; align-items: center; gap: 6px; }
.lv::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--barra); }
.lv-ajustado::before { background: var(--ambar-b); }
.lv-critico::before { background: var(--rojo-b); }
.vf-lista { list-style: none; margin: 0; padding: 0; }
.vf { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom dias" "regla regla"; align-items: center; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--borde); }
.vf-cabeza { border-top: 0; padding: 0 0 4px; grid-template-areas: "regla regla"; }
.vf-nombre { grid-area: nom; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vf-nombre strong { font-size: 15px; overflow-wrap: anywhere; }
.vf-nombre small { font-size: 13px; color: var(--suave); }
.vf-nombre .marcas { margin-top: 4px; }
.vf-nombre .chip { white-space: normal; }
.vf-dias { grid-area: dias; justify-self: end; white-space: nowrap; }
.vf-escala { grid-area: regla; display: flex; justify-content: space-between; font-size: 12px; color: var(--suave); }
.vf-escala span:nth-child(2), .vf-escala span:nth-child(4) { visibility: hidden; }
.vf-regla { grid-area: regla; position: relative; display: block; height: 10px; border-radius: 5px; margin-right: 7px;
  background:
    linear-gradient(90deg, transparent calc(25% - 1px), var(--borde-2) calc(25% - 1px) 25%, transparent 25% calc(50% - 1px), var(--borde-2) calc(50% - 1px) 50%, transparent 50% calc(75% - 1px), var(--borde-2) calc(75% - 1px) 75%, transparent 75%),
    linear-gradient(90deg, color-mix(in srgb, var(--rojo-b) 45%, var(--pista)) 0 2.05%, color-mix(in srgb, var(--ambar-b) 45%, var(--pista)) 2.05% 8.2%, var(--pista) 8.2%); }
.vf-barra { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: currentColor; color: var(--barra); min-width: 4px; }
.vf-barra::after { content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--sup); border: 3px solid currentColor; transform: translate(50%, -50%); box-sizing: border-box; }
.vf-ajustado .vf-barra { color: var(--ambar-b); }
.vf-critico .vf-barra { color: var(--rojo-b); }
.vf-nd .vf-barra { color: var(--seg-resto); }
.vf-mas::after { border-style: dashed; }
@media (min-width: 560px) { .vf-escala span:nth-child(2), .vf-escala span:nth-child(4) { visibility: visible; } }
@media (min-width: 860px) {
  .vf { grid-template-columns: minmax(0, 1.05fr) 104px minmax(0, 1.5fr); grid-template-areas: "nom dias regla"; gap: 6px 22px; }
  .vf-cabeza { grid-template-areas: ". . regla"; }
  .vf-dias { justify-self: center; }
}

/* certificados */
.cert-resumen { margin: 0; font-size: 15px; }
.certs { list-style: none; margin: 12px 0 0; padding: 0; }
.cert { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borde); font-size: 14px; }
.cert-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cert-nombre small { font-weight: 600; font-size: 12px; color: var(--suave); }
.cert-fecha { color: var(--suave); white-space: nowrap; font-size: 13px; }
.cert .estado { font-size: 12px; padding: 3px 9px; min-width: 64px; justify-content: center; }
.mas { margin-top: 4px; }
.mas summary { cursor: pointer; font-weight: 600; color: var(--enlace); padding: 10px 0 2px; font-size: 14px; min-height: 40px; display: flex; align-items: center; }
.mas .certs { margin-top: 4px; }
@media (max-width: 419px) { .cert-fecha { display: none; } }

/* servidor */
.medidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.medidas div { background: var(--sup-2); border: 1px solid var(--borde); border-radius: var(--radio-2); padding: 10px 12px; min-width: 0; }
.medidas dt { font-size: 12px; color: var(--suave); font-weight: 600; }
.medidas dd { margin: 2px 0 0; font-size: 22px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; }
@media (min-width: 560px) and (max-width: 699px), (min-width: 1300px) { .medidas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.salud-linea { margin: 12px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.disco-mini { margin: 14px 0 0; }
.disco-mini p { margin: 0 0 6px; font-size: 14px; color: var(--suave); }
.disco-mini strong { color: var(--texto); font-size: 15px; }
.barra-ok { background: var(--barra); }
.barra-ajustado { background: var(--ambar-b); }
.barra-critico { background: var(--rojo-b); }
.servicios { list-style: none; margin: 16px 0 0; padding: 0; }
.servicio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0 0; margin-top: 12px; border-top: 1px solid var(--borde); }
.servicio-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--sup-2); color: var(--suave); box-shadow: inset 0 0 0 1px var(--borde); }
.servicio-ok { background: var(--verde-f); color: var(--verde); box-shadow: none; }
.servicio-ajustado { background: var(--ambar-f); color: var(--ambar); box-shadow: none; }
.servicio-critico { background: var(--rojo-f); color: var(--rojo); box-shadow: none; }
.servicio-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.servicio-txt strong { font-size: 15px; }
.servicio-txt small { font-size: 13px; color: var(--suave); overflow-wrap: anywhere; }
.servicio-txt code { margin-top: 4px; align-self: flex-start; font-size: 12px; }
.servicio .estado { white-space: nowrap; }
@media (max-width: 419px) { .servicio { grid-template-columns: auto minmax(0, 1fr); } .servicio .estado { grid-column: 2; justify-self: start; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ───── anchos de barra (0 … 100 %) ───── */
.w-0{width:0%} .w-1{width:1%} .w-2{width:2%} .w-3{width:3%} .w-4{width:4%} .w-5{width:5%} .w-6{width:6%} .w-7{width:7%} .w-8{width:8%} .w-9{width:9%}
.w-10{width:10%} .w-11{width:11%} .w-12{width:12%} .w-13{width:13%} .w-14{width:14%} .w-15{width:15%} .w-16{width:16%} .w-17{width:17%} .w-18{width:18%} .w-19{width:19%}
.w-20{width:20%} .w-21{width:21%} .w-22{width:22%} .w-23{width:23%} .w-24{width:24%} .w-25{width:25%} .w-26{width:26%} .w-27{width:27%} .w-28{width:28%} .w-29{width:29%}
.w-30{width:30%} .w-31{width:31%} .w-32{width:32%} .w-33{width:33%} .w-34{width:34%} .w-35{width:35%} .w-36{width:36%} .w-37{width:37%} .w-38{width:38%} .w-39{width:39%}
.w-40{width:40%} .w-41{width:41%} .w-42{width:42%} .w-43{width:43%} .w-44{width:44%} .w-45{width:45%} .w-46{width:46%} .w-47{width:47%} .w-48{width:48%} .w-49{width:49%}
.w-50{width:50%} .w-51{width:51%} .w-52{width:52%} .w-53{width:53%} .w-54{width:54%} .w-55{width:55%} .w-56{width:56%} .w-57{width:57%} .w-58{width:58%} .w-59{width:59%}
.w-60{width:60%} .w-61{width:61%} .w-62{width:62%} .w-63{width:63%} .w-64{width:64%} .w-65{width:65%} .w-66{width:66%} .w-67{width:67%} .w-68{width:68%} .w-69{width:69%}
.w-70{width:70%} .w-71{width:71%} .w-72{width:72%} .w-73{width:73%} .w-74{width:74%} .w-75{width:75%} .w-76{width:76%} .w-77{width:77%} .w-78{width:78%} .w-79{width:79%}
.w-80{width:80%} .w-81{width:81%} .w-82{width:82%} .w-83{width:83%} .w-84{width:84%} .w-85{width:85%} .w-86{width:86%} .w-87{width:87%} .w-88{width:88%} .w-89{width:89%}
.w-90{width:90%} .w-91{width:91%} .w-92{width:92%} .w-93{width:93%} .w-94{width:94%} .w-95{width:95%} .w-96{width:96%} .w-97{width:97%} .w-98{width:98%} .w-99{width:99%}
.w-100{width:100%}