/* ==========================================================================
   MiQdar · base común de la plataforma y el portal (diseño del 27-10-2026)
   --------------------------------------------------------------------------
   Este trozo es igual en plataforma.css y portal.css: construir.sh lo pega
   delante de la parte propia de cada web. Sin importar otras hojas (un archivo por web).
   Cumple la CSP: sin fuentes ni imágenes de fuera, sin data:, todo con clases.
   ========================================================================== */

/* ---------- 1. Fichas de diseño (colores, letra, tamaños, espacios) ---------- */
:root {
  color-scheme: light;

  /* Marca (docs/rediseno/MARCA.md) */
  --noche: #13233F;          /* barra lateral, cabecera oscura, títulos de marca */
  --noche-2: #1E3357;        /* hover y elemento activo sobre noche */
  --acero: #1F5FA8;          /* enlaces, botón principal, foco, página actual */
  --acero-oscuro: #174A85;   /* hover del botón principal */
  --cielo: #3D8FE0;          /* pieza del logo sobre claro; barras «cobrado» */
  --cielo-claro: #74B6F5;    /* pieza del logo y foco sobre noche */
  --niebla: #E9EEF5;         /* resaltes suaves, cabecera de tabla */

  /* Neutros (con un punto de azul, como la marca) */
  --fondo: #F3F5F8;          /* fondo de página */
  --papel: #FFFFFF;          /* bloques, tarjetas, campos */
  --texto: #17202E;          /* texto principal (16,4:1 sobre papel) */
  --texto-2: #4A5568;        /* texto secundario (7,4:1 sobre papel) */
  --borde: #D3DAE4;          /* separadores y bordes de bloque */
  --borde-campo: #7A8699;    /* borde de campos y botones secundarios (3,7:1) */

  /* Estados: texto oscuro sobre fondo claro, siempre con su símbolo y su palabra */
  --ok: #1D6B3F;        --ok-fondo: #E4F3EA;        --ok-borde: #9DCDB1;
  --atencion: #7A4A00;  --atencion-fondo: #FFF2D3;  --atencion-borde: #E2B455;
  --peligro: #B3261E;   --peligro-fondo: #FCEBEA;   --peligro-borde: #E6A29D;
  --info: #1F5FA8;      --info-fondo: #E8F0FB;      --info-borde: #A9C6EC;
  --neutro: #4A5568;    --neutro-fondo: #EDF0F4;    --neutro-borde: #C4CCD7;

  /* Letra: la del sistema (sin licencias ni archivos que servir) */
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Escala de tamaños (1 rem = 16 px) */
  --t-xs: .8125rem;   /* 13 px · franjas, notas, cabecera de tabla */
  --t-s: .875rem;     /* 14 px · texto de ayuda, insignias */
  --t-m: 1rem;        /* 16 px · texto normal y campos */
  --t-l: 1.125rem;    /* 18 px · título de bloque (h2/h3 dentro de main) */
  --t-xl: 1.5rem;     /* 24 px · título de página en móvil */
  --t-xxl: 1.875rem;  /* 30 px · título de página; valor de una cifra */

  /* Espacios: múltiplos de 4 px */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem;

  --radio: 6px;         /* campos y botones */
  --radio-bloque: 10px; /* bloques y tarjetas */
  --sombra: 0 1px 2px rgba(19, 35, 63, .06);
  --toque: 44px;        /* objetivo táctil mínimo */
  --foco: var(--acero);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--letra); font-size: var(--t-m); line-height: 1.5;
  color: var(--texto); background: var(--fondo);
}
h1, h2, h3, h4 { line-height: 1.25; text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-xxl); font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: var(--t-l); font-weight: 650; }
h3 { font-size: var(--t-m); font-weight: 650; }
h4 { font-size: var(--t-s); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); }
p, ul, ol, dl, pre { margin: 0; }
p { max-width: 70ch; overflow-wrap: anywhere; }
a { color: var(--acero); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--acero-oscuro); text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
code, kbd, .mono { font-family: var(--letra-mono); font-size: .92em; overflow-wrap: anywhere; }
.texto { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; }
.sr, .solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.secundario-texto, .nota { color: var(--texto-2); font-size: var(--t-s); }
main { min-width: 0; }

/* Foco visible en todo lo que se puede usar con el teclado */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-offset: 3px; }

/* Saltar al contenido */
.saltar {
  position: absolute; left: var(--e4); top: -10rem; z-index: 10;
  background: var(--papel); color: var(--acero); padding: var(--e3) var(--e4); border-radius: var(--radio);
  box-shadow: 0 2px 8px rgba(19, 35, 63, .2);
}
.saltar:focus { top: var(--e4); }

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

/* ---------- 3. Franjas (arriba de todo) ---------- */
/* Las de pruebas, juntas en una sola franja que se parte en líneas si no caben */
.franjas { display: flex; flex-wrap: wrap; column-gap: var(--e5); background: var(--atencion-fondo); border-bottom: 1px solid var(--atencion-borde); padding-inline: var(--e2); }
.franjas p.pruebas { border-bottom: 0; padding-inline: var(--e2); }
.franjas p.pruebas + p.pruebas::before { content: none; }
.franjas p.mantenimiento { flex-basis: calc(100% + 2 * var(--e2)); margin-inline: calc(-1 * var(--e2)); padding-inline: var(--e4); }
.franjas p, p.pruebas, p.mantenimiento {
  max-width: none; margin: 0; padding: var(--e2) var(--e4); font-size: var(--t-xs); line-height: 1.4;
  display: flex; gap: var(--e2); align-items: baseline;
}
p.pruebas {
  color: var(--atencion); background: var(--atencion-fondo);
  border-bottom: 1px solid var(--atencion-borde);
}
p.pruebas::before { content: "PRUEBAS"; font-weight: 700; letter-spacing: .06em; font-size: .6875rem; white-space: nowrap; flex: none; }
p.mantenimiento { color: var(--papel); background: var(--noche); }
p.mantenimiento::before { content: "MANTENIMIENTO"; font-weight: 700; letter-spacing: .06em; font-size: .6875rem; color: var(--cielo-claro); white-space: nowrap; flex: none; }

/* ---------- 4. Marca (logotipo en la cabecera) ---------- */
.marca { display: inline-flex; align-items: center; gap: var(--e3); text-decoration: none; color: inherit; min-height: var(--toque); }
.marca:hover { color: inherit; }
.marca img { width: 30px; height: 30px; flex: none; }
.marca__texto { display: grid; line-height: 1.15; }
.marca__nombre { font-weight: 750; font-size: 1.25rem; letter-spacing: -.01em; }
.marca__web { font-size: var(--t-xs); opacity: .82; }

/* ---------- 5. Encabezado de página ---------- */
.encabezado { display: grid; gap: var(--e2); margin-bottom: var(--e5); }
.encabezado__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.encabezado__detalle { color: var(--texto-2); }
.encabezado__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
.migas { font-size: var(--t-s); }
.migas ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.migas li + li::before { content: "/"; color: var(--texto-2); margin-right: var(--e2); }
.migas a { display: inline-block; padding-block: var(--e1); }

/* ---------- 6. Bloques (secciones de una página) ---------- */
.bloque {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-bloque);
  padding: var(--e5); margin-bottom: var(--e4); box-shadow: var(--sombra);
  display: grid; gap: var(--e4); min-width: 0;
}
.bloque__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e2) var(--e4); }
.bloque__cabecera .nota { margin: 0; }
.bloque > *, .tarjeta > * { min-width: 0; }
.rejilla-2 { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.rejilla-3 { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: start; margin-bottom: var(--e4); }
.rejilla-2 > .bloque, .rejilla-3 > .bloque { margin-bottom: 0; }
.rejilla-2 { margin-bottom: var(--e4); }
.pila { display: grid; gap: var(--e3); }

/* Lista de datos (clave → valor) */
.bloque, .tarjeta { container-type: inline-size; }
.datos { display: grid; grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); gap: var(--e2) var(--e4); }
.datos dt { color: var(--texto-2); font-size: var(--t-s); padding-top: .1rem; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
@container (max-width: 24rem) {
  .datos { grid-template-columns: 1fr; gap: 0; }
  .datos dd { margin-bottom: var(--e3); }
}

/* Listas sencillas */
.lista { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.lista > li { overflow-wrap: anywhere; }
.lista--separada > li { padding-block: var(--e3); border-bottom: 1px solid var(--borde); }
.lista--separada > li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista--separada > li:first-child { padding-top: 0; }

/* ---------- 7. Botones ---------- */
button, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--toque); padding: .55rem 1.05rem; border-radius: var(--radio);
  font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--acero); color: var(--papel); border: 1px solid var(--acero);
}
button:hover, .boton:hover { background: var(--acero-oscuro); border-color: var(--acero-oscuro); color: var(--papel); text-decoration: none; }
button:active, .boton:active { transform: translateY(1px); }

/* Secundario: acciones normales que no son la principal del bloque */
button.secundario, .boton.secundario { background: var(--papel); color: var(--acero); border-color: var(--borde-campo); }
button.secundario:hover, .boton.secundario:hover { background: var(--niebla); color: var(--acero-oscuro); border-color: var(--acero); }

/* Peligroso: dar de baja, terminar ya, anular, borrar, desactivar */
button.peligro, .boton.peligro { background: var(--peligro); border-color: var(--peligro); color: var(--papel); }
button.peligro:hover, .boton.peligro:hover { background: #8F1E18; border-color: #8F1E18; }
button.peligro:focus-visible { outline-color: var(--peligro); }

/* Discreto (cerrar sesión, salir) */
button.discreto, .boton.discreto { background: transparent; color: inherit; border-color: currentColor; font-weight: 500; }
button.discreto:hover, .boton.discreto:hover { background: rgba(127, 140, 160, .14); color: inherit; }

/* Deshabilitado: atenuado y con el cursor de «no» (el texto sigue explicando por qué) */
button:disabled, button[aria-disabled="true"] {
  background: var(--neutro-fondo); color: var(--texto-2); border-color: var(--neutro-borde); cursor: not-allowed; transform: none;
}

/* Descarga (PDF, CSV): flecha delante */
.descarga::before { content: "↓"; font-weight: 700; }

/* Fila de acciones: varios formularios de un botón, en línea */
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: flex-start; }
.acciones > form { margin: 0; display: contents; }
.acciones > form > button { flex: none; }
.acciones--fin { justify-content: flex-end; }
/* Un formulario con un campo y su botón en la misma fila (p. ej. «Guardar nombre» de un equipo) */
.acciones > form.en-linea { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: flex-end; }
.acciones > form.en-linea label { min-width: 10rem; }

/* ---------- 8. Formularios ---------- */
form { margin: 0; min-width: 0; }
form.formulario, form.negocio { display: grid; gap: var(--e4); max-width: 40rem; }
.campos { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.campos .ancho { grid-column: 1 / -1; }
label { display: grid; gap: var(--e1); align-content: start; font-weight: 600; font-size: var(--t-s); color: var(--texto); }
label > input, label > select, label > textarea { font-weight: 400; }
input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-height: var(--toque); padding: .6rem .75rem;
  font: inherit; font-size: var(--t-m); color: var(--texto); background: var(--papel);
  border: 1px solid var(--borde-campo); border-radius: var(--radio);
}
textarea { min-height: 7.5rem; resize: vertical; line-height: 1.45; }
select { appearance: auto; }
input:hover, select:hover, textarea:hover { border-color: var(--texto-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--acero); }
input:disabled, select:disabled, textarea:disabled { background: var(--neutro-fondo); color: var(--texto-2); cursor: not-allowed; }
input[type=file] { padding: .5rem; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: var(--e3); padding: .4rem .8rem; border-radius: var(--radio);
  border: 1px solid var(--borde-campo); background: var(--niebla); color: var(--acero); cursor: pointer;
}
input[type=hidden] { display: none; }
::placeholder { color: #6B7586; }

/* Error de un campo: borde rojo + texto debajo (nunca solo el color) */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--peligro); border-width: 2px; }
.campo-error { color: var(--peligro); font-weight: 600; font-size: var(--t-s); }
.campo-error::before { content: "✕ "; }

/* Texto de ayuda dentro de un formulario (el «Solo vale un código nuevo…» de hoy) */
form > p, .ayuda { font-size: var(--t-s); color: var(--texto-2); font-weight: 400; }

/* Casilla y grupo de casillas */
label.casilla, .casilla {
  display: flex; gap: var(--e3); align-items: flex-start; font-weight: 500; font-size: var(--t-m);
  min-height: var(--toque); padding-block: .6rem; cursor: pointer;
}
input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; flex: none; accent-color: var(--acero); }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e3) var(--e4) var(--e2); margin: 0; min-width: 0; }
legend { font-weight: 600; font-size: var(--t-s); padding: 0 var(--e1); }
fieldset .casilla { padding-block: .45rem; }

/* Botón de enviar del formulario: a su ancho, alineado a la izquierda */
form.formulario > button, form.negocio > button { justify-self: start; }

/* Código del móvil: se reconoce por autocomplete=one-time-code (no hace falta clase) */
input[autocomplete="one-time-code"] {
  font-family: var(--letra-mono); font-size: 1.125rem; letter-spacing: .18em; max-width: 26rem;
}
input[autocomplete="one-time-code"][maxlength="6"] { max-width: 10.5rem; letter-spacing: .32em; text-align: center; }
.campo-codigo { max-width: 26rem; }
.campo-codigo > span.icono-movil::before { content: "▯ "; }

/* Filtros de una lista */
form.filtros {
  display: grid; gap: var(--e3); align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-bloque); padding: var(--e4);
}
form.filtros .buscar { grid-column: 1 / -1; }
form.filtros > button { justify-self: start; }

/* ---------- 9. Desplegables (<details>) ---------- */
/* Normal: una fila con flecha; se usa para «Editar datos», «Añadir contacto»… */
details { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--papel); }
details > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e2);
  min-height: var(--toque); padding: .55rem var(--e4); font-weight: 600; color: var(--acero); border-radius: var(--radio);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ""; width: .5rem; height: .5rem; flex: none; margin-right: .15rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { background: var(--niebla); }
details[open] > summary { border-bottom: 1px solid var(--borde); border-radius: var(--radio) var(--radio) 0 0; }
details > :not(summary) { margin: var(--e4); }
details > :not(summary) + :not(summary) { margin-top: 0; }
.desplegables { display: grid; gap: var(--e2); }

/* Más acciones: el desplegable como botón secundario */
details.mas { display: inline-block; border: 0; background: transparent; }
details.mas > summary { border: 1px solid var(--borde-campo); background: var(--papel); }
details.mas[open] { display: block; flex-basis: 100%; border: 1px solid var(--borde); background: var(--papel); }

/* Zona peligrosa: rojo en el borde y en el título, aviso dentro, casilla y código */
details.peligro { border-color: var(--peligro-borde); }
details.peligro > summary { color: var(--peligro); }
details.peligro > summary::after { content: "Acción delicada"; margin-left: auto; font-size: var(--t-xs); font-weight: 600; color: var(--peligro); }
details.peligro > summary:hover { background: var(--peligro-fondo); }
details.peligro[open] { background: var(--papel); box-shadow: inset 4px 0 0 var(--peligro); }
details.peligro[open] > summary { border-bottom-color: var(--peligro-borde); background: var(--peligro-fondo); }
@media (max-width: 30rem) { details.peligro > summary::after { content: none; } }

/* ---------- 10. Mensajes y avisos ---------- */
.mensaje, .aviso, .destacado {
  position: relative; display: grid; gap: var(--e1); align-content: start;
  padding: var(--e3) var(--e4) var(--e3) 3rem; border-radius: var(--radio); border: 1px solid; border-left-width: 4px;
  max-width: none;
}
.mensaje::before, .aviso::before, .destacado::before {
  position: absolute; left: .85rem; top: .8rem; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .8rem; line-height: 1;
}
.mensaje__titulo { font-weight: 700; }
.mensaje .acciones, .aviso .acciones { margin-top: var(--e2); }
.mensaje ul, .aviso ul { padding-left: 1.2rem; }

.mensaje.error, .aviso.error   { color: var(--texto); background: var(--peligro-fondo); border-color: var(--peligro-borde); border-left-color: var(--peligro); }
.mensaje.error::before, .aviso.error::before { content: "✕"; background: var(--peligro); color: var(--papel); }
.mensaje.atencion, .aviso      { color: var(--texto); background: var(--atencion-fondo); border-color: var(--atencion-borde); border-left-color: var(--atencion); }
.mensaje.atencion::before, .aviso::before { content: "!"; background: var(--atencion); color: var(--papel); }
.mensaje.info, .destacado      { color: var(--texto); background: var(--info-fondo); border-color: var(--info-borde); border-left-color: var(--info); }
.mensaje.info::before, .destacado::before { content: "i"; background: var(--info); color: var(--papel); font-family: Georgia, serif; font-style: italic; }
.mensaje.exito                 { color: var(--texto); background: var(--ok-fondo); border-color: var(--ok-borde); border-left-color: var(--ok); }
.mensaje.exito::before { content: "✓"; background: var(--ok); color: var(--papel); }
.aviso.error::before { content: "✕"; background: var(--peligro); }

/* ---------- 11. Insignias de estado (texto + forma + color) ---------- */
.insignia {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; vertical-align: middle;
  padding: .12rem .55rem .12rem .45rem; border-radius: 999px; border: 1px solid;
  font-size: var(--t-xs); font-weight: 650; line-height: 1.35;
  color: var(--neutro); background: var(--neutro-fondo); border-color: var(--neutro-borde);
}
.insignia::before { content: ""; width: .5rem; height: .5rem; flex: none; background: currentColor; border-radius: 50%; }
.insignia.ok       { color: var(--ok); background: var(--ok-fondo); border-color: var(--ok-borde); }
.insignia.atencion { color: var(--atencion); background: var(--atencion-fondo); border-color: var(--atencion-borde); }
.insignia.atencion::before { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: .6rem; }
.insignia.peligro  { color: var(--peligro); background: var(--peligro-fondo); border-color: var(--peligro-borde); }
.insignia.peligro::before { border-radius: 1px; }
.insignia.info     { color: var(--info); background: var(--info-fondo); border-color: var(--info-borde); }
.insignia.info::before { border-radius: 0; transform: rotate(45deg); width: .45rem; height: .45rem; }
.insignia.neutro::before { background: transparent; border: 2px solid currentColor; }
.insignia.borrador { border-style: dashed; }
.insignia.borrador::before { background: transparent; border: 2px dashed currentColor; }
.insignia.urgente  { color: var(--papel); background: var(--peligro); border-color: var(--peligro); text-transform: uppercase; letter-spacing: .05em; }
.insignia.urgente::before { content: "!"; background: none; width: auto; height: auto; font-weight: 900; }

/* ---------- 12. Tablas ---------- */
.tabla { max-width: 100%; overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio-bloque); background: var(--papel); }
.bloque .tabla { border-radius: var(--radio); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
caption { text-align: left; font-weight: 650; padding: var(--e3) var(--e4); }
th, td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
thead th {
  background: var(--niebla); color: var(--texto-2); font-size: var(--t-xs); font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; vertical-align: bottom;
}
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover { background: #F7F9FC; }
td.numero, th.numero { text-align: right; white-space: nowrap; }
td.nowrap { white-space: nowrap; }
@media (max-width: 40rem) { th, td { padding: .5rem .6rem; } thead th { letter-spacing: .02em; } }
tfoot td, tfoot th { font-weight: 700; border-top: 2px solid var(--borde); border-bottom: 0; }
td form { display: inline; }
td button { min-height: 36px; padding: .35rem .75rem; font-size: var(--t-s); }

/* En móvil, la tabla .tarjetas pasa a una tarjeta por fila (cada <td> lleva data-titulo) */
@media (max-width: 40rem) {
  .tabla.tarjetas { border: 0; background: transparent; overflow: visible; }
  .tabla.tarjetas table, .tabla.tarjetas tbody, .tabla.tarjetas tr, .tabla.tarjetas td { display: block; width: 100%; }
  .tabla.tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla.tarjetas tr {
    background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-bloque);
    padding: var(--e2) var(--e4); margin-bottom: var(--e3);
  }
  .tabla.tarjetas td { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e2); padding: .45rem 0 .45rem 9rem; position: relative; border-bottom: 1px solid var(--borde); text-align: left; min-height: 2.25rem; }
  .tabla.tarjetas td > details, .tabla.tarjetas td > form, .tabla.tarjetas td > .nota { flex-basis: 100%; }
  .tabla.tarjetas tr > td:last-child { border-bottom: 0; }
  .tabla.tarjetas td::before { content: attr(data-titulo); position: absolute; left: 0; top: .6rem; width: 8.5rem; color: var(--texto-2); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
  .tabla.tarjetas td.principal { padding-left: 0; font-size: var(--t-m); font-weight: 650; }
  .tabla.tarjetas td.principal::before { content: none; }
  .tabla.tarjetas td.numero { white-space: normal; }
}

/* ---------- 13. Tarjetas (una por usuario, equipo, factura, aviso…) ---------- */
.tarjetas-lista { display: grid; gap: var(--e3); }
.tarjeta {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-bloque);
  padding: var(--e4) var(--e5); display: grid; gap: var(--e3); box-shadow: var(--sombra);
}
.tarjeta__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e3); }
.tarjeta__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.tarjeta__meta { color: var(--texto-2); font-size: var(--t-s); display: flex; flex-wrap: wrap; gap: .15rem var(--e3); }
.tarjeta__meta > * + *::before { content: "·"; margin-right: var(--e3); color: var(--borde-campo); }

/* ---------- 14. Cifras (tarjetas de números) ---------- */
.cifras { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); margin-bottom: var(--e4); }
.cifra {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-bloque);
  padding: var(--e4) var(--e5); display: grid; gap: var(--e1); align-content: start; box-shadow: var(--sombra);
}
@media (max-width: 40rem) { .cifra { padding: var(--e3) var(--e4); } }
.cifra h3 { font-size: var(--t-s); font-weight: 600; color: var(--texto-2); }
.cifra .valor { font-size: clamp(1.35rem, 5vw, var(--t-xxl)); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--noche); margin: var(--e1) 0; }
.cifra p:last-child:not(.valor) { font-size: var(--t-s); color: var(--texto-2); }
.cifra.atencion { border-top: 4px solid var(--atencion); }

/* ---------- 15. Estado vacío ---------- */
.vacio {
  display: grid; justify-items: start; gap: var(--e2);
  padding: var(--e5); border: 1px dashed var(--borde-campo); border-radius: var(--radio-bloque);
  color: var(--texto-2); background: transparent;
}
.vacio::before { content: "○"; font-size: 1.5rem; line-height: 1; color: var(--borde-campo); }
.vacio strong { color: var(--texto); }

/* ---------- 16. Paginación ---------- */
.paginacion { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; justify-content: space-between; margin-top: var(--e4); }
.paginacion a {
  display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--e4);
  border: 1px solid var(--borde-campo); border-radius: var(--radio); background: var(--papel); font-weight: 600; text-decoration: none;
}
.paginacion a:hover { background: var(--niebla); }
.paginacion a[rel=prev]::before { content: "← "; }
.paginacion a[rel=next]::after { content: " →"; margin-left: .3em; }
.paginacion .nota { flex: 1; text-align: center; }

/* ---------- 17. Historial (línea de tiempo) ---------- */
.historial { list-style: none; padding: 0; display: grid; gap: 0; }
.historial > li { position: relative; padding: 0 0 var(--e4) var(--e5); border-left: 2px solid var(--borde); margin-left: .4rem; display: grid; gap: var(--e1); }
.historial > li::before { content: ""; position: absolute; left: -.45rem; top: .3rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--papel); border: 2px solid var(--acero); }
.historial > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.historial__cuando { font-size: var(--t-s); color: var(--texto-2); }
.cambio { font-family: var(--letra-mono); font-size: var(--t-s); }
.cambio del { color: var(--peligro); }
.cambio ins { color: var(--ok); text-decoration: none; }

/* ---------- 18. Página de error y de acceso ---------- */
.centrado { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--e6) var(--e4); }
.caja {
  width: min(100%, 26rem); background: var(--papel); border: 1px solid var(--borde); border-radius: 14px;
  padding: var(--e6); display: grid; gap: var(--e4); box-shadow: 0 8px 30px rgba(19, 35, 63, .08);
}
.caja .marca { color: var(--noche); justify-self: start; }
.caja h1 { font-size: var(--t-xl); }
.caja form.formulario { max-width: none; }
.caja form.formulario > button { justify-self: stretch; }
.caja__pie a { display: inline-flex; align-items: center; min-height: var(--toque); }
.caja__pie { display: grid; gap: 0; font-size: var(--t-s); border-top: 1px solid var(--borde); padding-top: var(--e4); }
.pagina-error .codigo-error { font-family: var(--letra-mono); font-size: var(--t-xs); color: var(--texto-2); letter-spacing: .08em; text-transform: uppercase; }
.pagina-error h1::before { content: "!"; display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-right: var(--e3); border-radius: 50%; background: var(--peligro-fondo); color: var(--peligro); border: 2px solid var(--peligro-borde); font-size: 1.1rem; vertical-align: .1em; }
@media (max-width: 30rem) { .caja { padding: var(--e5) var(--e4); } .centrado { padding: var(--e4) var(--e3); place-items: start center; } }

/* ---------- 19. Gráfico de barras (SVG del servidor) ---------- */
.grafico { display: grid; gap: var(--e3); }
.grafico svg { display: block; width: 100%; height: auto; max-width: 48rem; overflow: visible; }
.grafico .facturado { fill: var(--noche); }
.grafico .cobrado { fill: var(--cielo); }
.grafico .eje { stroke: var(--borde-campo); stroke-width: 1; }
.grafico .rejilla { stroke: var(--borde); stroke-width: 1; stroke-dasharray: 2 4; }
.grafico text { font-family: var(--letra); font-size: 11px; fill: var(--texto-2); }
.grafico text.cifra-eje { font-size: 10px; }
.leyenda-grafico { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); font-size: var(--t-s); color: var(--texto-2); }
.leyenda { font-size: 1.1em; line-height: 1; }
.leyenda.facturado { color: var(--noche); }
.leyenda.cobrado { color: var(--cielo); }
.grafico-desplazable { overflow-x: auto; }
.grafico-desplazable svg { min-width: 34rem; }

/* Barra de proporción (ocupación, antigüedad del pendiente) */
.barra { height: .5rem; border-radius: 999px; background: var(--niebla); overflow: hidden; display: flex; }
.barra > span { display: block; height: 100%; background: var(--acero); }
.barra > span.atencion { background: var(--atencion-borde); }
.barra > span.peligro { background: var(--peligro); }
.barra .p10 { width: 10%; } .barra .p20 { width: 20%; } .barra .p30 { width: 30%; } .barra .p40 { width: 40%; }
.barra .p50 { width: 50%; } .barra .p60 { width: 60%; } .barra .p70 { width: 70%; } .barra .p80 { width: 80%; } .barra .p90 { width: 90%; } .barra .p100 { width: 100%; }

/* ---------- 20. Utilidades ---------- */
.fila { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: center; }
.separado { justify-content: space-between; }
.derecha { margin-left: auto; }
.mt { margin-top: var(--e4); }
.importe { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tachado { text-decoration: line-through; color: var(--texto-2); }
hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e2) 0; }
.claves { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: var(--e2); counter-reset: clave; }
.claves li { font-family: var(--letra-mono); font-size: var(--t-s); padding: var(--e2) var(--e3); background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); counter-increment: clave; }
.claves li::before { content: counter(clave, decimal-leading-zero) "  "; color: var(--texto-2); }
.clave-totp { font-family: var(--letra-mono); font-size: 1.05rem; letter-spacing: .12em; word-spacing: .3em; padding: var(--e3) var(--e4); background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); overflow-wrap: anywhere; }

/* Desplegables dentro de una fila de acciones: abiertos, ocupan toda la fila */
.acciones > details { flex: none; }
.acciones > details[open] { flex-basis: 100%; }
.acciones > details.peligro > summary::after { content: none; }

/* ---------- 21. Impresión (p. ej. los códigos de recuperación, una factura en pantalla) ---------- */
@media print {
  :root { --fondo: #FFFFFF; }
  .franjas, .lateral, .cabecera, .pie, .saltar, .indice-ficha, details:not([open]), form button, .encabezado__acciones { display: none !important; }
  .marco { display: block; }
  .bloque, .tarjeta, .cifra { box-shadow: none; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ==========================================================================
   Plataforma del propietario: barra lateral azul noche + contenido ancho
   ========================================================================== */

/* Esqueleto: franjas arriba · marco (lateral + main) */
.marco { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.plataforma main { padding: var(--e5) var(--e4) var(--e7); width: 100%; max-width: 76rem; }

/* Lateral (en móvil, barra de arriba con el menú plegable) */
.lateral {
  background: var(--noche); color: var(--papel); --foco: var(--cielo-claro);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2);
  padding: var(--e2) var(--e4) var(--e3);
}
.lateral .marca__web { color: #C9D6EA; opacity: 1; }
.lateral .salir { margin: 0; }
.lateral .salir button { min-height: 40px; font-size: var(--t-s); padding: .4rem .8rem; color: #DCE6F4; }

/* Menú: <details class="menu"> con <nav> dentro. En móvil se pliega; en escritorio se ve siempre. */
details.menu { border: 0; background: transparent; color: inherit; order: 3; flex-basis: 100%; }
details.menu > summary {
  color: var(--papel); border: 1px solid rgba(255, 255, 255, .35);
}
details.menu > summary::before { border-color: var(--papel); }
details.menu > summary:hover { background: var(--noche-2); }
details.menu[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radio); }
details.menu > nav { margin: var(--e3) 0 var(--e2); }

.menu__grupo { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #9FB3D1; margin: var(--e4) var(--e3) var(--e1); }
.menu__grupo:first-child { margin-top: 0; }
.menu ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.menu a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  min-height: var(--toque); padding: 0 var(--e3); border-radius: var(--radio);
  color: #E4ECF7; text-decoration: none; font-weight: 500;
}
.menu a:hover { background: var(--noche-2); color: var(--papel); }
/* Página actual: fondo, raya de color y negrita (no solo color) */
.menu a[aria-current="page"] { background: var(--noche-2); color: var(--papel); font-weight: 700; box-shadow: inset 3px 0 0 var(--cielo-claro); }
.contador {
  min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--cielo-claro); color: var(--noche); font-size: .75rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.contador.urgente { background: #F28B82; }

/* Escritorio: barra lateral fija de 16 rem */
@media (min-width: 60rem) {
  .marco { grid-template-columns: 16rem minmax(0, 1fr); }
  .lateral {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
    padding: var(--e5) var(--e3); height: 100vh; overflow-y: auto; position: sticky; top: 0;
  }
  .lateral > .marca { padding: 0 var(--e3) var(--e4); }
  .lateral .salir { margin-top: auto; padding: var(--e4) var(--e3) 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .lateral .salir button { width: 100%; }
  details.menu { order: 0; flex-basis: auto; }
  details.menu > summary { display: none; }
  details.menu > nav { margin: 0; }
  .plataforma main { padding: var(--e6) var(--e6) var(--e7); }
  /* Navegadores con ::details-content: el menú cerrado se ve igualmente en escritorio */
  @supports selector(::details-content) {
    details.menu::details-content { content-visibility: visible; display: block; }
  }
  /* Sin ese soporte, el servidor puede pintar <details class="menu" open>: abierto en escritorio y en móvil */
}
@media (min-width: 60rem) {
  @supports not selector(::details-content) {
    details.menu > summary { display: flex; margin: 0 0 var(--e3); width: 100%; }
  }
}

/* Encabezado de la plataforma */
.plataforma .encabezado h1 { font-size: var(--t-xxl); }
@media (max-width: 40rem) { .plataforma .encabezado h1 { font-size: var(--t-xl); } .plataforma main { padding-top: var(--e4); } }


/* Bandeja de avisos */
.avisos-lista { display: grid; gap: var(--e3); }
.aviso-item { border-left: 4px solid var(--borde-campo); }
.aviso-item.urgente { border-left-color: var(--peligro); }
.aviso-item.nuevo .tarjeta__titulo h2::after, .aviso-item.nuevo .tarjeta__titulo h3::after { content: ""; }
.aviso-item.resuelto { opacity: .78; border-left-color: var(--ok); }
.aviso-item .tarjeta__titulo h2, .aviso-item .tarjeta__titulo h3 { font-size: var(--t-m); }
.aviso-item .acciones button { min-height: 40px; }

/* Ficha: índice de bloques (anclas del propio documento, sin parámetros) */
.indice-ficha { display: flex; gap: var(--e1); overflow-x: auto; padding-bottom: var(--e1); margin-bottom: var(--e4); scrollbar-width: thin; }
.indice-ficha a {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--e3); border-radius: 999px;
  border: 1px solid var(--borde); background: var(--papel); text-decoration: none; font-size: var(--t-s); font-weight: 600; color: var(--texto);
}
.indice-ficha a:hover { border-color: var(--acero); color: var(--acero); }
.bloque[id] { scroll-margin-top: 5rem; }

/* Factura: totales a la derecha */
.totales { display: grid; grid-template-columns: auto auto; justify-content: end; gap: var(--e1) var(--e6); font-variant-numeric: tabular-nums; }
.totales dt { color: var(--texto-2); }
.totales dd { margin: 0; text-align: right; }
.totales .total { font-weight: 800; font-size: var(--t-l); color: var(--noche); border-top: 2px solid var(--noche); padding-top: var(--e2); }