/* Herramienta de trabajo: barra fija, pestañas, filtros y tabla densa; ficha lateral para editar. */
:root {
  --fondo: #ffffff;
  --tinta: #111111;
  --suave: #555555;
  --linea: #e4e4e4;
  --zona: #f6f6f5;
  --acento: #e8590c;
  --plesk: #17803d;  --plesk-f: #e7f5ec;
  --ovh: #1d4ed8;    --ovh-f: #e8eefc;
  --redir: #7c3aed;  --redir-f: #f1eafd;
  --otro: #3f3f46;   --otro-f: #efefef;
  --mal: #b42318;    --mal-f: #fdecea;
  --ojo: #9a6700;    --ojo-f: #fff4d6;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b0b0b; --tinta: #f4f4f4; --suave: #d2d2d2; --linea: #2c2c2c; --zona: #161616;
    --acento: #ff7a33;
    --plesk: #6ee7a0; --plesk-f: #0f2a1a; --ovh: #9db8ff; --ovh-f: #121c36;
    --redir: #c4a6ff; --redir-f: #221636; --otro: #e4e4e7; --otro-f: #222222;
    --mal: #ff9b8f; --mal-f: #3a1512; --ojo: #ffd46b; --ojo-f: #332608;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--tinta); font: 15px/1.45 var(--sans); }
.mono, code { font-family: var(--mono); font-size: .92em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
a { color: inherit; }

.barra { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: #1c1c1c; color: #ffffff; }
.logo { display: block; height: 26px; width: auto; }
.marca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.marca strong { font-size: 20px; letter-spacing: -.01em; }
.flecha { font-size: 14px; }
.quien { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.quien input { width: 210px; max-width: 50vw; padding: 6px 10px; border: 1px solid #ffffff; border-radius: 6px;
  background: #1c1c1c; color: #ffffff; }
.quien input::placeholder { color: #ffffff; opacity: .75; }

.pestanas { display: flex; gap: 4px; overflow-x: auto; padding: 0 16px; border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; background: var(--fondo); z-index: 5; }
.pestanas button { border: 0; background: none; padding: 12px 12px 10px; cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent; font-weight: 500; min-height: 44px; }
.pestanas button[aria-selected="true"] { border-bottom-color: var(--acento); font-weight: 700; }

main { padding: 16px 20px 48px; }
.aviso-carga { color: var(--suave); }
h2 { font-size: 17px; margin: 22px 0 10px; text-wrap: balance; }
.nota-sec { color: var(--suave); margin: -6px 0 10px; font-size: 13px; }

.cifras { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cifra { border: 1px solid var(--linea); border-radius: 8px; padding: 8px 12px; min-width: 120px; background: var(--fondo);
  text-align: left; cursor: pointer; }
.cifra b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cifra span { font-size: 12.5px; color: var(--suave); }
.cifra[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }

.alertas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.alerta { border: 1px solid var(--ojo); background: var(--ojo-f); color: var(--tinta); border-radius: 8px; padding: 7px 12px;
  cursor: pointer; text-align: left; font-size: 13.5px; }
.alerta b { font-variant-numeric: tabular-nums; }
.alerta.grave { border-color: var(--mal); background: var(--mal-f); }
.alerta[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tinta); }

.filtros { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; padding: 12px; background: var(--zona);
  border-radius: 10px; margin-bottom: 8px; }
.filtros label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.filtros input, .filtros select { min-width: 170px; max-width: 100%; padding: 7px 9px; border: 1px solid var(--linea);
  border-radius: 6px; background: var(--fondo); font-weight: 400; font-size: 14px; min-height: 36px; }
.filtros input[type="search"] { min-width: 230px; }
.acciones-filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
button.sec, button.pri { border-radius: 6px; padding: 7px 12px; cursor: pointer; min-height: 36px; }
button.sec { border: 1px solid var(--tinta); background: var(--fondo); }
button.pri { border: 1px solid var(--tinta); background: var(--tinta); color: var(--fondo); font-weight: 600; }
button:disabled { opacity: .55; cursor: progress; }
.contador { font-size: 13px; color: var(--suave); margin: 8px 0; font-variant-numeric: tabular-nums; }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: 10px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { position: sticky; top: 0; background: var(--zona); text-align: left; font-size: 12px; letter-spacing: .03em;
  text-transform: uppercase; padding: 9px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr.clic { cursor: pointer; }
.tabla tbody tr.clic:hover td { background: var(--zona); }
.tabla.compacta td { padding: 5px 8px; font-size: 13px; white-space: pre-line; }
.tabla td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.host { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.sub { display: block; font-size: 12px; color: var(--suave); }
.btn-abrir { border: 1px solid var(--linea); background: var(--fondo); border-radius: 6px; padding: 4px 10px; cursor: pointer;
  min-height: 32px; white-space: nowrap; }

.chip { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid currentColor; }
.k-plesk { color: var(--plesk); background: var(--plesk-f); }
.k-ovh { color: var(--ovh); background: var(--ovh-f); }
.k-redir { color: var(--redir); background: var(--redir-f); }
.k-otro { color: var(--otro); background: var(--otro-f); }
.k-noresuelve, .k-mal { color: var(--mal); background: var(--mal-f); }
.k-sin { color: var(--suave); background: transparent; border-style: dashed; font-weight: 500; }
.k-ojo { color: var(--ojo); background: var(--ojo-f); }
.vivo { font-size: 11px; color: var(--suave); display: block; margin-top: 2px; }

.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.dos > div { min-width: 0; }
.lista { list-style: none; padding: 0; margin: 0; border: 1px solid var(--linea); border-radius: 10px; }
.lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--linea); }
.lista li:last-child { border-bottom: 0; }

.velo { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
.ficha { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--fondo); z-index: 21;
  overflow-y: auto; border-left: 1px solid var(--linea); padding: 0 20px 32px; }
.ficha-cab { position: sticky; top: 0; background: var(--fondo); display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 16px 0 10px; border-bottom: 1px solid var(--linea); z-index: 1; }
.ficha-cab h2 { margin: 0; font-family: var(--mono); font-size: 16px; word-break: break-all; }
.cerrar { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; width: 44px; height: 44px; flex: none; }
.bloque { padding: 14px 0; border-bottom: 1px solid var(--linea); display: grid; gap: 10px; }
.bloque h3 { margin: 0; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.campo { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.campo input, .campo select, .campo textarea { font-weight: 400; font-size: 14px; padding: 8px 10px; border: 1px solid var(--linea);
  border-radius: 6px; background: var(--fondo); width: 100%; min-height: 38px; }
.campo textarea { min-height: 90px; resize: vertical; }
.dato { display: grid; grid-template-columns: 140px 1fr; gap: 8px; font-size: 14px; }
.dato > span:first-child { color: var(--suave); }
.dato > span:last-child { min-width: 0; word-break: break-word; white-space: pre-line; }
.enlaces { display: flex; flex-wrap: wrap; gap: 8px; }
.enlaces a { border: 1px solid var(--tinta); border-radius: 6px; padding: 6px 10px; text-decoration: none; font-size: 13.5px; }
.hist { list-style: none; margin: 0; padding: 0; font-size: 13px; display: grid; gap: 6px; }
.hist li { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.hist li > span:first-child { color: var(--suave); font-variant-numeric: tabular-nums; }
.cambio { font-size: 12px; color: var(--suave); }

.tostada { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--tinta); color: var(--fondo);
  padding: 10px 16px; border-radius: 8px; z-index: 30; max-width: calc(100% - 32px); }
.tostada.error { background: var(--mal); color: #fff; }

@media (max-width: 640px) {
  main { padding: 12px 16px 40px; }
  .barra { padding: 12px 16px; }
  .filtros input, .filtros select, .filtros input[type="search"] { min-width: 0; width: 100%; }
  .filtros label { flex: 1 1 100%; }
  .acciones-filtro { margin-left: 0; }
  .dato { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .ficha { animation: entra .18s ease-out; }
  @keyframes entra { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* Resumen */
.avance { border: 1px solid var(--linea); border-radius: 12px; padding: 16px; display: grid; gap: 12px; margin-bottom: 8px; }
.avance-cab { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; }
.avance-cab b { font-size: 34px; font-variant-numeric: tabular-nums; line-height: 1; }
.avance-cab span { color: var(--suave); }
.barra-total { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--zona); }
.barra-total > i { display: block; height: 100%; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; }
.leyenda button { border: 0; background: none; padding: 2px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.c-hecho { background: var(--plesk); } .c-vencido { background: var(--mal); } .c-urgente { background: var(--acento); }
.c-pronto { background: var(--ojo); } .c-plazo { background: var(--ovh); } .c-caducar { background: var(--suave); } .c-renovado { background: var(--redir); } .c-sinfecha { background: var(--linea); }
.dos.ancho { grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); }
@media (max-width: 900px) { .dos.ancho { grid-template-columns: 1fr; } }
.filtros.mini { padding: 8px 10px; }
.filtros.mini select { min-width: 150px; }
.cuenta { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 10px; }
.cuenta li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(90px, 1fr) 96px; gap: 10px; align-items: center;
  padding: 7px 12px; border-bottom: 1px solid var(--linea); cursor: pointer; }
.cuenta li:last-child { border-bottom: 0; }
.cuenta li:hover { background: var(--zona); }
.cuenta .host { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carril { height: 10px; background: var(--zona); border-radius: 5px; overflow: hidden; }
.carril > i { display: block; height: 100%; border-radius: 5px; }
.quedan { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.quedan small { display: block; font-weight: 400; color: var(--suave); font-size: 12px; }
.fila-barra { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 13.5px; padding: 5px 0; }
.fila-barra > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.fila-barra .barra-total { height: 14px; }
@media (max-width: 640px) {
  .cuenta li { grid-template-columns: minmax(0, 1fr) 88px; }
  .cuenta .carril { grid-column: 1 / -1; grid-row: 2; }
  .fila-barra { grid-template-columns: 110px minmax(0, 1fr) 56px; }
}

.tabla td.ns { font-size: 12px; white-space: pre-line; max-width: 240px; word-break: break-all; color: var(--suave); }

.cuenta li.vacio { display: block; cursor: default; padding: 12px; }
.cuenta li.vacio:hover { background: none; }

.tabla td.botones { white-space: nowrap; }
.tabla td.botones .btn-abrir + .btn-abrir { margin-left: 6px; }
.tabla td .sub.mono { font-size: 11.5px; white-space: pre-line; word-break: break-all; }
.nota-linea { margin-top: 3px; max-width: 280px; }
.hist.notas li > span:last-child { white-space: pre-line; }
.chip.externo { display: inline-block; margin-top: 4px; white-space: normal; }

/* Resumen con bandeja de avisos a la derecha */
.resumen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 480px); gap: 24px; align-items: start; }
.res-principal { min-width: 0; }
@media (max-width: 1100px) { .resumen { grid-template-columns: 1fr; } }
.bandeja { position: sticky; top: 56px; border: 1px solid var(--linea); border-radius: 12px; padding: 14px; background: var(--fondo);
  max-height: calc(100vh - 72px); overflow-y: auto; }
.bandeja-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bandeja-cab h2 { margin: 0; }
.bandeja-cab select { padding: 6px 8px; border: 1px solid var(--linea); border-radius: 6px; background: var(--fondo); min-height: 34px; }
.chips-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip-filtro { border: 1px solid var(--linea); background: var(--fondo); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; min-height: 30px; }
.chip-filtro[aria-pressed="true"] { border-color: var(--tinta); background: var(--tinta); color: var(--fondo); }
.avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.aviso { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tipo cuando" "cuerpo cuando"; gap: 2px 10px;
  padding: 8px 10px; border-radius: 8px; border-left: 4px solid var(--otro); background: var(--zona); cursor: pointer; }
.aviso:hover { outline: 1px solid var(--linea); }
.aviso-tipo { grid-area: tipo; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--suave); }
.aviso-cuerpo { grid-area: cuerpo; min-width: 0; }
.aviso-cuerpo .host { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-cuando { grid-area: cuando; text-align: right; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aviso-cuando small { display: block; color: var(--suave); }
.a-mal { border-left-color: var(--mal); } .a-ojo { border-left-color: var(--ojo); } .a-plesk { border-left-color: var(--plesk); }
.avisos .vacio { padding: 10px; color: var(--suave); }
.etiqueta { display: inline-block; font-size: 11.5px; padding: 1px 7px; border: 1px solid var(--linea); border-radius: 4px; margin: 1px 0; white-space: nowrap; }
button.enlace { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font-size: inherit; }
.cifra.sync { border-style: dashed; }

.firma { border: 1px solid #ffffff; background: none; color: #ffffff; border-radius: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; min-height: 34px; }
.dialogo { position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); z-index: 41;
  background: var(--fondo); border-radius: 12px; padding: 20px; display: grid; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.dialogo h2 { margin: 0; }
.dialogo p { margin: 0; color: var(--suave); }
#velo-nombre { z-index: 40; }

.enlace-web { color: inherit; text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px; }
.enlace-web:hover { text-decoration-color: currentColor; }
.cuenta li { grid-template-columns: minmax(0, 1.3fr) minmax(90px, 1fr) 96px auto; cursor: default; }
.aviso { cursor: default; }

.donde { display: grid; gap: 2px; font-size: 12.5px; margin: 4px 0 2px; }
.donde b { font-weight: 600; }
.chip.mini { font-size: 11.5px; padding: 0 7px; }

.aviso-cuando { white-space: normal; max-width: 120px; }
.aviso-cuando b { display: block; line-height: 1.25; }

.barra-actualizar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin: -4px 0 12px; }
.barra-actualizar .ultima { margin: 0; }
.chip.ajeno { border-style: dashed; }
.chip-filtro.chip-caducados { border-color: var(--mal); color: var(--mal); }
.chip-filtro.chip-caducados[aria-pressed="true"] { background: var(--mal); border-color: var(--mal); color: #fff; }
.chip.creada { display: inline-block; margin-top: 4px; white-space: normal; }
.chips-sub { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; padding: 8px 0 0 12px; border-left: 3px solid var(--mal); margin-top: 2px; }
.cuenta .chip, .tabla td .chip.externo, .tabla td .chip.creada { margin: 4px 6px 0 0; }
.sub.comentario { font-style: italic; margin-top: 3px; }
.chip-filtro.chip-gris[aria-pressed="true"] { background: var(--suave); border-color: var(--suave); color: var(--fondo); }

.cuenta li[data-svc], .aviso { cursor: pointer; }
.cuenta li[data-svc]:hover, .aviso:hover { background: var(--zona); outline: 1px solid var(--linea); }
.cuenta li { grid-template-columns: minmax(0, 1.3fr) minmax(90px, 1fr) 96px; }