/* =============================================================================
   NoDuck — tokens and components.
   The palette is the house's (CAT/EAGLE ark.css, the NoDuck mockups): navy, paper, a red
   kept for what matters. System fonts, as in CAT: nothing is fetched from another origin.
   ============================================================================= */
:root {
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Brand navy: the sidebar, the top bar and the sign-in half. Never inverted. */
  --navy: #0e1732;
  --navy-2: #16204a;
  --navy-linea: #1b2650;
  --navy-sub: #2a3563;
  --navy-avatar: #252f5e;
  --claro: #ffffff;
  --claro-2: #93a0c4;
  --claro-3: #7b88b0;
  --claro-grupo: #8b97bd;
  --acento: #2fb39a;        /* NoDuck's accent on the Ark */

  --canvas: #f6f7fa;
  --card: #ffffff;
  --ink: #0e1732;
  --ink2: #3a4460;
  --ink3: #5a6480;
  --ink4: #6b7590;
  --fill: #eef0f5;
  --fill2: #f2f4f8;         /* a hover or a quiet box (was used, never defined) */
  --fill3: #e8ecf5;         /* the current item of a list */
  --bbtn: #b4bccd;          /* a hovered card's border */
  --th: #f8f9fc;
  --bcard: #e4e7ef;
  --bfield: #dfe3ec;
  --brow: #eef0f5;
  --prim: #1a2456;
  --primfg: #ffffff;
  --primhover: #0e1732;
  --link: #1a2456;
  --dato: #2b4ba8;
  --datobg: #eef1f9;
  --ok: #0f7a5a;
  --okbg: #e6f4ef;
  --err: #b81d38;
  --errbg: #fdeaed;
  --berr: #f2c3cc;
  --info: #2b4ba8;
  --infobg: #eef1f9;
  --binfo: #c9d3ee;
  --focus: #3b5bc0;
  --av: #d98324;
  --avt: #8f5608;
  --avbg: #fdf3e0;
  --bav: #f1d3a3;
  --neu: #9aa2b5;
  --neut: #3a4460;
  --neubg: #f1f3f9;
  --okt: #0b6a4e;
  --errt: #b81d38;
  --datot: #2b4ba8;
  --track: #e8ebf2;
  --shadow: 0 6px 20px rgba(14, 23, 50, .10);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --canvas: #0c111f;
  --card: #141b2d;
  --ink: #e7eaf2;
  --ink2: #c3cbe0;
  --ink3: #a3aecb;
  --ink4: #8f9bbc;
  --fill: #1a2238;
  --fill2: #172036;
  --fill3: #1f2943;
  --bbtn: #3b4a7c;
  --th: #19213a;
  --bcard: #232c45;
  --bfield: #2a3450;
  --brow: #1e2640;
  --prim: #9db1e8;
  --primfg: #0c111f;
  --primhover: #c3d0f4;
  --link: #9db1e8;
  --dato: #9db1e8;
  --datobg: #1c2647;
  --ok: #4cc38a;
  --okbg: #17291f;
  --err: #f28b9c;
  --errbg: #3a1620;
  --berr: #5b2634;
  --info: #9db1e8;
  --infobg: #1c2647;
  --binfo: #3b4a7c;
  --focus: #9db1e8;
  --av: #e2a54e;
  --avt: #f0c99a;
  --avbg: #3a2a16;
  --bav: #6b4a1f;
  --neu: #6f7a9a;
  --neut: #c3cbe0;
  --neubg: #19203a;
  --okt: #4cc38a;
  --errt: #f28b9c;
  --datot: #9db1e8;
  --track: #222b45;
  --shadow: 0 6px 20px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }
body { font-family: var(--sans); font-size: 15px; line-height: 1.45; color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
a:hover { color: var(--primhover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mono { font-family: var(--mono); overflow-wrap: anywhere; }
.tenue { color: var(--ink3); }
.sin-corte { white-space: nowrap; }
/* visually hidden, for screen readers. «left: 0» pins the 1 px box to its containing block's left edge: left
   at its static place, a label in the last column of a wide table sat past the phone's edge and widened the
   whole page (DCK-N03, build 15) */
.sr { position: absolute; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { width: 18px; height: 18px; flex: none; }
.saltar { position: absolute; left: -9999px; top: 8px; background: var(--card); color: var(--ink); padding: 8px 12px; border-radius: 6px; z-index: 10; }
.saltar:focus { left: 8px; }
:root:not([data-theme="dark"]) .solo-oscuro, :root[data-theme="dark"] .solo-claro { display: none; }
.solo-claro, .solo-oscuro { display: inline-flex; }

/* ---------------------------------------------------------------- brand ---- */
.marca { display: inline-flex; align-items: center; gap: 11px; }
.marca-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--acento); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; }
.ic-marca { width: 22px; height: 22px; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-nombre { font-size: 18px; font-weight: 700; letter-spacing: .03em; color: var(--claro); }
.marca-sub { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--claro-3); }

/* ---------------------------------------------------------------- shell ---- */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--navy) 252px, transparent 252px); }
.lateral { background: var(--navy); border-right: 1px solid var(--navy-linea); padding: 14px 10px 12px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.lateral-marca { display: block; padding: 4px 8px 18px; text-decoration: none; border-radius: 8px; }
.lateral-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 10px 0 12px; border-radius: 7px; font-size: 15.5px; text-decoration: none; color: var(--claro-2); }
.nav-item:hover { background: var(--navy-2); color: var(--claro); }
.nav-item[aria-current="page"] { background: var(--navy-avatar); color: var(--claro); box-shadow: inset 3px 0 0 var(--acento); }
.nav-item span:first-of-type { flex: 1; }
.nav-insignia, .insignia { font-family: var(--mono); font-size: 12px; font-weight: 600; background: #cf2440; color: #ffffff; padding: 1px 7px; border-radius: 10px; line-height: 1.5; }
.lateral-grupo { margin: 14px 12px 6px; padding-top: 12px; border-top: 1px solid var(--navy-linea); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--claro-grupo); }
.lateral-pie { margin-top: auto; border-top: 1px solid var(--navy-linea); padding: 12px 4px 0; display: flex; flex-direction: column; gap: 8px; }
.cuenta { display: flex; align-items: center; gap: 10px; }
.cuenta-avatar { width: 34px; height: 34px; border-radius: 7px; background: var(--navy-avatar); color: var(--claro); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: none; }
.cuenta-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cuenta-nombre { font-size: 14.5px; font-weight: 600; color: var(--claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-rol { font-size: 12.5px; color: var(--claro-3); }
.cuenta-salir { margin: 0; }
.lateral-enlace { display: inline-flex; align-items: center; gap: 8px; color: var(--claro-2); font-size: 13.5px; text-decoration: none; padding: 6px 8px; border-radius: 6px; }
.lateral-enlace:hover { color: var(--claro); background: var(--navy-2); }
.lateral-enlace .ic { width: 15px; height: 15px; }

.area { display: flex; flex-direction: column; min-width: 0; }
.cabecera { min-height: 58px; background: var(--navy); border-bottom: 1px solid var(--navy-linea); display: flex; align-items: center; gap: 14px; padding: 8px 20px; position: sticky; top: 0; z-index: 2; }
.cabecera-titulo { margin: 0; font-size: 17.5px; font-weight: 600; color: var(--claro); }
.cabecera .volver { flex: none; }
.cabecera-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sociedad { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--claro-2); border: 1px solid var(--navy-sub); border-radius: 999px; padding: 4px 11px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-icono { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 7px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.btn-icono-oscuro { color: var(--claro-2); }
.btn-icono-oscuro:hover { color: var(--claro); background: var(--navy-2); border-color: var(--navy-sub); }
.con-insignia .insignia { position: absolute; top: -4px; right: -4px; }
.contenido { flex: 1; padding: 20px 22px 28px; display: flex; flex-direction: column; gap: 16px; max-width: 1400px; width: 100%; }

/* ---------------------------------------------------------------- blocks --- */
.bloque { background: var(--card); border: 1px solid var(--bcard); border-radius: 9px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bloque-cabeza { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bloque-titulo { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink2); }
.bloque-titulo .ic { width: 17px; height: 17px; color: var(--ink3); }
.bloque-dato { margin: 0 0 0 auto; font-size: 13.5px; color: var(--ink3); }
.aviso { display: flex; gap: 10px; align-items: flex-start; border-radius: 8px; padding: 11px 13px; border: 1px solid; font-size: 14px; }
.aviso p { margin: 0; }
.aviso .ic { margin-top: 1px; }
.aviso-info { background: var(--infobg); border-color: var(--binfo); color: var(--ink2); }
.aviso-info .ic { color: var(--info); }
.aviso-peligro { background: var(--errbg); border-color: var(--berr); color: var(--ink); }
.aviso-peligro .ic { color: var(--err); }
.aviso-cuidado { background: var(--avbg); border-color: var(--av); color: var(--ink); }
.aviso-cuidado .ic { color: var(--avt); }
.vacio { margin: 0; color: var(--ink3); font-size: 14px; }

/* the new-case form's search in the padrón (duck.js fills the list with textContent only) */
.padron { display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--brow); padding-bottom: 14px; }
.padron-filas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.padron-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--bfield); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.padron-fila:hover, .padron-fila:focus-visible { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--datobg); }
.padron-nombre { font-weight: 600; overflow-wrap: anywhere; }
.padron-dato { color: var(--ink3); font-size: 13px; }
.padron-avisos { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink2); }
.padron .campo > .btn { align-self: flex-start; min-height: 44px; }   /* «Llenar a mano», beside the search box */

/* ----------------------------------------------------------- the pipeline -- */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; counter-reset: etapa; }
.etapa { position: relative; background: var(--canvas); border: 1px solid var(--bcard); border-radius: 9px; padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.etapa-cabeza { display: flex; align-items: center; gap: 10px; }
.etapa-num { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--navy); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; box-shadow: inset 0 -3px 0 var(--acento); }
.etapa-nombre { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.etapa-desc { margin: 0; color: var(--ink2); font-size: 14px; white-space: pre-line; }
.etapa-parte { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--brow); padding-top: 10px; }
.etapa-sub { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.etapa-sub .ic { width: 15px; height: 15px; }
.docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.doc { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 14px; }
.doc-nombre { min-width: 0; overflow-wrap: anywhere; }
.areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--bfield); color: var(--ink3); background: var(--card); white-space: nowrap; }
.chip-fuerte { color: var(--dato); background: var(--datobg); border-color: var(--binfo); }
.chip-area { color: var(--ink); background: var(--card); border-color: var(--bfield); white-space: normal; }

/* ---------------------------------------------------------------- tables --- */
.tabla-caja { overflow-x: auto; border: 1px solid var(--bcard); border-radius: 8px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--brow); vertical-align: top; }
.tabla thead th { background: var(--th); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody th { font-weight: 600; }
.matriz td, .matriz thead th:not(:first-child) { text-align: center; }
.marca-si { display: inline-flex; color: var(--ok); }
.marca-no { color: var(--ink4); }
.fila-alerta td { background: var(--errbg); }

/* --------------------------------------------------------------- buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 7px; border: 1px solid var(--bfield); background: var(--card); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--ink4); color: var(--ink); }
.btn-primario { background: var(--prim); border-color: var(--prim); color: var(--primfg); }
.btn-primario:hover { background: var(--primhover); border-color: var(--primhover); color: var(--primfg); }
.btn-ancho { width: 100%; }
.btn .ic { width: 17px; height: 17px; }

/* --------------------------------------------------------------- sign-in --- */
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); }
.acceso-marca { background: var(--navy); color: var(--claro); padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.acceso-frase { margin: 0; font-size: 36px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; max-width: 504px; color: var(--claro); }
.acceso-pie { margin: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--claro-3); overflow-wrap: anywhere; }
.acceso-panel { background: var(--canvas); display: grid; place-items: center; padding: 40px 24px; border-left: 1px solid var(--navy-sub); }
.acceso-tarjeta { width: 420px; max-width: 100%; background: var(--card); border: 1px solid var(--bcard); border-radius: 10px; padding: 26px; }
.acceso-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.acceso-titulo { margin: 0; font-size: 22px; font-weight: 600; color: var(--ink); }
.acceso-cuenta { margin: -6px 0 0; color: var(--ink3); font-size: 14px; }
.acceso-texto { margin: 0; color: var(--ink2); font-size: 14.5px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 14.5px; color: var(--ink2); }
.campo input { height: 44px; padding: 0 13px; border: 1px solid var(--bfield); border-radius: 7px; font-size: 16px; color: var(--ink); background: var(--card); width: 100%; }
.campo input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--datobg); }
.campo input::placeholder { color: var(--ink4); }
.campo .codigo { font-size: 20px; letter-spacing: .25em; }
.campo-ojo { position: relative; display: flex; align-items: center; }
.campo-ojo input { padding-right: 46px; }
.ojo { position: absolute; right: 4px; width: 38px; height: 38px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink4); border-radius: 6px; }
.ojo:hover, .ojo[aria-pressed="true"] { color: var(--ink); background: var(--fill); }
.acceso-nota-2fa { margin: 0; display: flex; gap: 7px; align-items: flex-start; font-size: 14px; color: var(--ink2); }
.acceso-nota-2fa .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--ok); }
.acceso-o { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink4); font-size: 13px; }
.acceso-o span { flex: 1; height: 1px; background: var(--bcard); }
.btn-sso { font-weight: 600; }
.acceso-nota { margin: 0; text-align: center; font-size: 13.5px; color: var(--ink3); }
.pasos { margin: 0; padding-left: 20px; color: var(--ink2); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.qr { display: block; width: 200px; height: 200px; margin: 0 auto; border-radius: 8px; border: 1px solid var(--bcard); background: #ffffff; }
.secreto { margin: 0; text-align: center; font-size: 13.5px; overflow-wrap: anywhere; }
.codigos { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; background: var(--fill); border-radius: 8px; font-size: 15px; }

/* ----------------------------------------------------------------- error --- */
.error-pagina { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--navy); }
.error-caja { width: 440px; max-width: 100%; background: var(--card); border: 1px solid var(--bcard); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.error-marca .marca-nombre { color: var(--ink); }
.error-marca .marca-sub { color: var(--ink3); }
.error-codigo { margin: 8px 0 0; font-size: 13px; color: var(--ink3); }
.error-titulo { margin: 0; font-size: 22px; }
.error-detalle { margin: 0 0 8px; color: var(--ink2); }


/* ============================================================= admission ===== */
.nav-cuenta { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--claro); background: var(--navy-sub); padding: 1px 8px; border-radius: 10px; line-height: 1.5; }
.cabecera-buscar { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 7px; background: var(--navy-2); border: 1px solid var(--navy-sub); color: var(--claro-2); }
.cabecera-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--claro); font-size: 14.5px; outline: none; }
.cabecera-buscar input::placeholder { color: var(--claro-3); }
.cabecera-buscar:focus-within { border-color: var(--claro-2); }
.cabecera-titulo .mono { font-size: 16px; }

.btn-claro { background: #ffffff; border-color: #ffffff; color: var(--navy); min-height: 40px; }
.btn-claro:hover { background: #e7eaf2; border-color: #e7eaf2; color: var(--navy); }
.btn-borde-claro { background: transparent; border-color: #5b678f; color: #ffffff; min-height: 40px; }
.btn-borde-claro:hover { border-color: #ffffff; color: #ffffff; background: var(--navy-2); }
.btn-chico { min-height: 36px; padding: 0 12px; font-size: 14px; gap: 6px; }
.btn-chico .ic { width: 15px; height: 15px; }
.btn-ok { color: var(--okt); border-color: var(--ok); }
.btn-ok:hover { background: var(--okbg); color: var(--okt); border-color: var(--ok); }
.btn-peligro { background: var(--err); border-color: var(--err); color: #ffffff; }
.btn-peligro:hover { background: var(--errt); border-color: var(--errt); color: #ffffff; }
:root[data-theme="dark"] .btn-peligro { color: #0c111f; }
.btn-peligro-borde { color: var(--errt); border-color: var(--berr); }
.btn-texto { border-color: transparent; background: transparent; color: var(--link); }
.btn-texto:hover { border-color: var(--bfield); }
.aviso-ok { background: var(--okbg); border-color: var(--ok); color: var(--ink); }
.aviso-ok .ic { color: var(--ok); }

.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.pill-punto { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pill-dato { color: var(--datot); } .pill-dato .pill-punto { background: var(--dato); }
.pill-av { color: var(--avt); } .pill-av .pill-punto { background: var(--av); }
.pill-ok { color: var(--okt); } .pill-ok .pill-punto { background: var(--ok); }
.pill-err { color: var(--errt); } .pill-err .pill-punto { background: var(--err); }
.pill-neu { color: var(--ink3); } .pill-neu .pill-punto { background: var(--neu); }
.plazo { font-family: var(--mono); font-size: 12.5px; color: var(--ink3); white-space: nowrap; }
.plazo-vencido { color: var(--errt); font-weight: 600; }
.texto-err { color: var(--errt); }
.texto-aviso { color: var(--avt); }
.sub { display: block; font-size: 12.5px; color: var(--ink3); margin-top: 2px; }
.tabla a.mono, .tabla td.mono, .tabla .sub .mono { white-space: nowrap; overflow-wrap: normal; }
.lista-pills { list-style: none; padding-left: 0; }
.nota { margin: 0; font-size: 13.5px; color: var(--ink3); }
.bloque-enlace { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.bloque-enlace .ic { width: 15px; height: 15px; }
.bloque-dato-izq { margin: 0; }
.bloque-tenue { opacity: .7; }
.bloque-titulo-normal { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--ink); }
.lista-simple { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink2); }

/* dashboard */
.intervencion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.intervencion-titulo { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.intervencion-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-cuenta { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bcard); background: var(--card); color: var(--ink2); font-size: 14px; text-decoration: none; }
.chip-cuenta .mono { font-weight: 600; color: var(--ink3); }
.chip-cuenta-activa { border-color: var(--bav); background: var(--avbg); color: var(--ink); }
.chip-cuenta-activa .mono { color: var(--avt); }
a.chip-cuenta:hover { border-color: var(--ink4); color: var(--ink); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--card); border: 1px solid var(--bcard); border-radius: 9px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi-dato { font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.kpi-nombre { font-size: 13.5px; color: var(--ink3); }
.rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.rejilla-principal, .rejilla-lateral { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.embudo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.embudo-paso { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "cab barra" "cab det"; gap: 3px 14px; align-items: center; }
.embudo-cabeza { grid-area: cab; display: flex; justify-content: space-between; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.embudo-total { color: var(--ink2); }
.embudo-barra { grid-area: barra; height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.embudo-relleno { display: block; height: 100%; border-radius: 5px; background: var(--prim); }
.embudo-detalle { grid-area: det; font-size: 12.5px; color: var(--ink3); }
.ancho-0 { width: 0%; }
.ancho-5 { width: 5%; }
.ancho-10 { width: 10%; }
.ancho-15 { width: 15%; }
.ancho-20 { width: 20%; }
.ancho-25 { width: 25%; }
.ancho-30 { width: 30%; }
.ancho-35 { width: 35%; }
.ancho-40 { width: 40%; }
.ancho-45 { width: 45%; }
.ancho-50 { width: 50%; }
.ancho-55 { width: 55%; }
.ancho-60 { width: 60%; }
.ancho-65 { width: 65%; }
.ancho-70 { width: 70%; }
.ancho-75 { width: 75%; }
.ancho-80 { width: 80%; }
.ancho-85 { width: 85%; }
.ancho-90 { width: 90%; }
.ancho-95 { width: 95%; }
.ancho-100 { width: 100%; }

.actividad { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.actividad li { padding: 9px 0; border-bottom: 1px solid var(--brow); }
.actividad li:last-child { border-bottom: 0; }
.actividad-que { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.actividad-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--ink3); overflow-wrap: anywhere; }

/* lists and filters */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.filtros .campo { min-width: 170px; }
.filtros-buscar { flex: 1; min-width: 240px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-filtro { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bfield); background: var(--card); color: var(--ink2); font-size: 14px; text-decoration: none; }
.chip-filtro .mono { font-size: 12.5px; color: var(--ink3); }
.chip-filtro[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.chip-filtro[aria-current="true"] .mono { color: var(--claro-2); }
:root[data-theme="dark"] .chip-filtro[aria-current="true"] { background: var(--prim); border-color: var(--prim); color: var(--primfg); }
.paginas { display: flex; flex-wrap: wrap; gap: 4px; }
.pagina { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bfield); border-radius: 6px; text-decoration: none; font-family: var(--mono); font-size: 13.5px; }
.pagina[aria-current="page"] { background: var(--prim); border-color: var(--prim); color: var(--primfg); }

/* forms */
.formulario { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; border: 0; margin: 0; padding: 0; align-items: end; }
.campos-ids { border-top: 1px solid var(--brow); padding-top: 12px; }
.campos-ids legend { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); padding: 0; }
.campos-ids .nota { grid-column: 1 / -1; }
.campo-ancho { grid-column: 1 / -1; }
.campo select, .campo textarea { min-height: 44px; padding: 8px 12px; border: 1px solid var(--bfield); border-radius: 7px; font-size: 15px; color: var(--ink); background: var(--card); width: 100%; }
.campo textarea { resize: vertical; }
.campo select:focus, .campo textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--datobg); }
.campo input[type="file"] { height: auto; padding: 8px; font-size: 14px; }
.campo-tabla { width: 100%; min-width: 180px; height: 36px; padding: 0 10px; border: 1px solid var(--bfield); border-radius: 6px; background: var(--card); }
.opciones { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.opciones-fila { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.opcion { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--bfield); border-radius: 8px; cursor: pointer; background: var(--card); }
.opcion:has(input:checked) { border-color: var(--prim); box-shadow: inset 0 0 0 1px var(--prim); background: var(--datobg); }
.opcion input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--prim); }
.opcion-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcion-nombre { font-weight: 600; font-size: 15px; }
.opcion-sub { font-size: 12.5px; color: var(--ink3); overflow-wrap: anywhere; }
.casilla { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink2); min-height: 44px; }
.casilla input { width: 18px; height: 18px; accent-color: var(--prim); }
.barra-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.en-linea { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; }
.en-linea select { min-height: 36px; padding: 0 10px; border: 1px solid var(--bfield); border-radius: 6px; background: var(--card); font-size: 14px; }
.en-linea .campo input { height: 40px; }
.formulario-oscuro .campo label { color: var(--claro-2); font-size: 13px; }
.formulario-oscuro .campo input { background: var(--navy-2); border-color: var(--navy-sub); color: #ffffff; }
.formulario-oscuro .casilla { color: var(--claro-2); }   /* a checkbox on the navy panel (light --ink2 there: 1.8:1) */

/* one case */
.caso-cabeza { background: var(--card); border: 1px solid var(--bcard); border-radius: 9px; padding: 16px 18px; display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.caso-quien { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.caso-nombre { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.caso-meta { margin: 0; font-size: 14px; color: var(--ink3); overflow-wrap: anywhere; }
.caso-id { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.caso-numero { font-size: 15px; font-weight: 600; color: var(--ink2); }
.pasos-caso { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.paso-caso { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--bcard); background: var(--card); min-width: 0; }
.paso-num { width: 26px; height: 26px; border-radius: 6px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; background: var(--fill); color: var(--ink3); }
.paso-num .ic { width: 15px; height: 15px; }
.paso-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.paso-nombre { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: break-word; hyphens: auto; }
.paso-sub { font-size: 12.5px; color: var(--ink3); overflow-wrap: anywhere; }
.paso-hecho .paso-num { background: var(--okbg); color: var(--okt); }
.paso-actual { border-color: var(--prim); box-shadow: inset 0 0 0 1px var(--prim); }
.paso-actual .paso-num { background: var(--navy); color: #ffffff; box-shadow: inset 0 -3px 0 var(--acento); }
.paso-cerrado .paso-num { background: var(--errbg); color: var(--errt); }
.paso-pendiente { background: transparent; }
.paso-pendiente .paso-nombre { color: var(--ink3); }
.paso-no_llego { background: transparent; border-style: dashed; }
.paso-no_llego .paso-nombre { color: var(--ink4); }
.paso-plazo { margin-top: 4px; align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--okbg); color: var(--okt); }
.paso-plazo-vencido { background: var(--errbg); color: var(--errt); }
.progreso-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--ink2); }
.progreso-n { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.progreso-barra { width: 120px; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; flex: none; }
.progreso-relleno { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.progreso-texto { flex: 1 1 260px; min-width: 0; }
.progreso-linea .bloque-enlace { margin-left: auto; }
.mini-avance { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: var(--ink3); white-space: nowrap; }
.progreso-barra-chica { width: 56px; height: 4px; }
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0 0 18px; }
.cifras > div { border: 1px solid var(--bcard); border-radius: 8px; padding: 10px 12px; }
.cifras dt { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.cifras dd { margin: 3px 0 0; font-size: 15px; color: var(--ink); }
.cifras dd .mono, .cifras dd.mono { font-size: 17px; font-weight: 600; }
.recorrido { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--bcard); display: flex; flex-direction: column; gap: 14px; }
.tramo { position: relative; padding: 2px 0 2px 6px; }
.tramo::before { content: ""; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--okbg); border: 2px solid var(--ok); }
.tramo-actual::before { background: var(--navy); border-color: var(--acento); }
.tramo-devuelto::before { background: var(--avbg); border-color: var(--av); }
.tramo-cierre::before { background: var(--errbg); border-color: var(--err); }
.tramo-pendiente::before { background: var(--card); border-color: var(--bfield); }
.tramo-pendiente .tramo-nombre { color: var(--ink3); }
.tramo-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tramo-nombre { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.tramo-tiempo { margin-left: auto; font-size: 12.5px; color: var(--ink3); white-space: nowrap; }
.tramo-linea, .tramo-extra { margin: 3px 0 0; font-size: 13px; color: var(--ink3); }
.tramo-salida { margin: 4px 0 0; font-size: 14px; color: var(--ink2); }
.tramo-salida-devuelto { color: var(--avt); }
.siguiente { background: var(--navy); color: #ffffff; border: 1px solid var(--navy-linea); border-radius: 9px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.siguiente-texto { margin: 0; font-size: 15px; line-height: 1.5; }
.siguiente-texto strong { color: #ffffff; }
.siguiente-devuelto { display: flex; gap: 8px; align-items: flex-start; color: #f6d9a8; }
.siguiente-devuelto .ic { flex: none; margin-top: 3px; color: #f0b45a; }
.siguiente-devuelto strong { color: #f6d9a8; }
.siguiente-nota { margin: 0; font-size: 13px; color: var(--claro-2); }
.siguiente-nota a, .siguiente a:not(.btn) { color: #c9d3ee; }
.siguiente-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.siguiente form { margin: 0; }
.siguiente > .btn, .siguiente > form { align-self: flex-start; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bcard); overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; font-size: 15px; font-weight: 600; color: var(--ink3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--prim); }
.tab-n { font-size: 12px; background: var(--fill); color: var(--ink3); padding: 1px 7px; border-radius: 10px; }
.docs-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.doc-fila { padding: 12px 0; border-bottom: 1px solid var(--brow); display: flex; flex-direction: column; gap: 6px; }
.doc-fila:last-child { border-bottom: 0; }
.doc-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.doc-cabeza .doc-nombre { font-weight: 600; font-size: 14.5px; }
.doc-estado { margin-left: auto; }
.doc-meta { margin: 0; font-size: 13px; color: var(--ink3); overflow-wrap: anywhere; }
.doc-meta a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.doc-meta .ic { width: 15px; height: 15px; }
.doc-motivo { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--errt); }
.doc-motivo .ic { width: 15px; height: 15px; }
.doc-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.doc-acciones form { margin: 0; }
.versiones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.desplegable { position: relative; }
.desplegable > summary { list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable[open] > summary { border-color: var(--ink4); }
.desplegable-cuerpo { margin-top: 8px; padding: 12px; border: 1px solid var(--bcard); border-radius: 8px; background: var(--canvas); display: flex; flex-direction: column; gap: 10px; min-width: 280px; max-width: 460px; }
.desplegable-oscuro .desplegable-cuerpo { background: var(--card); color: var(--ink); }
.datos { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; }
.datos div { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--brow); padding-bottom: 8px; }
.datos dt { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.datos dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.resp { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.cuenta-avatar-claro { background: var(--fill); color: var(--ink2); width: 30px; height: 30px; font-size: 12px; }
.casillas { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 18px; }
.casillas legend { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); padding: 0; margin-bottom: 2px; }
.casillas .casilla { min-height: 36px; font-size: 14px; }
.campo-corto { min-width: 0; width: 96px; }
.tabla-docs select, .tabla select { min-height: 36px; padding: 0 8px; border: 1px solid var(--bfield); border-radius: 6px; background: var(--card); font-size: 14px; }
.tabla input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--prim); }
.fila-nueva td { background: var(--th); }
.plegable > summary { list-style: none; cursor: pointer; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
/* a chevron, not the words «Editar»/«Cerrar» (the summary's title says it) */
.plegable-cabeza::after { content: ""; margin-left: auto; align-self: center; width: 9px; height: 9px; border-right: 2px solid var(--ink3); border-bottom: 2px solid var(--ink3); transform: rotate(45deg); }
.plegable[open] > .plegable-cabeza::after { transform: rotate(-135deg); }
.plegable-cuerpo { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.quitar-tipo { margin: -8px 0 0; display: flex; justify-content: flex-end; }
.notif-dia { margin: 8px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.notif-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bcard); border-radius: 8px; overflow: hidden; }
.notif { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--brow); }
.notif:last-child { border-bottom: 0; }
.notif-nueva { background: var(--datobg); box-shadow: inset 3px 0 0 var(--dato); }
.notif-texto { margin: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.notif-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--ink3); }
.notif-hora { font-size: 12.5px; color: var(--ink3); padding-top: 2px; }
.comentarios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.comentario { display: flex; gap: 10px; align-items: flex-start; }
.comentario-cuerpo { min-width: 0; flex: 1; background: var(--canvas); border: 1px solid var(--bcard); border-radius: 8px; padding: 9px 12px; }
.comentario-meta { margin: 0 0 3px; font-size: 12.5px; color: var(--ink3); }
.comentario-texto { margin: 0; font-size: 14.5px; white-space: pre-line; overflow-wrap: anywhere; }
.cabecera-acciones form { margin: 0; }
.enlace-quieto { color: inherit; text-decoration: none; }
.enlace-quieto:hover { text-decoration: underline; color: inherit; }
.datos-una { grid-template-columns: 1fr; }
.filtros .btn { min-height: 44px; }
.tipos-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

/* ------------------------------------------------------------ narrow -------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; background: none; }
  .lateral { position: static; height: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--navy-linea); }
  .lateral-marca { grid-column: 1; grid-row: 1; padding: 2px 4px; justify-self: start; }
  .lateral-pie { grid-column: 2; grid-row: 1; margin: 0; border: 0; padding: 0; flex-direction: row; align-items: center; }
  .lateral-nav { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .lateral-grupo { display: none; }
  .cuenta-texto, .lateral-enlace { display: none; }
  .cabecera { position: static; padding: 8px 16px; }
  .contenido { padding: 16px; }
  .bloque { padding: 14px; }
  .bloque-dato { margin-left: 0; }
  .acceso { grid-template-columns: 1fr; }
  .acceso-marca { padding: 24px 16px; gap: 14px; }
  .acceso-frase { font-size: 24px; }
  .acceso-panel { border-left: 0; padding: 20px 16px 32px; align-items: start; }
  .acceso-tarjeta { padding: 20px; }
  .cabecera { flex-wrap: wrap; }
  .cabecera-buscar { order: 3; flex-basis: 100%; max-width: none; }
  .rejilla { grid-template-columns: 1fr; }
  .embudo-paso { grid-template-columns: 1fr; grid-template-areas: "cab" "barra" "det"; }
  .caso-id { align-items: flex-start; }
  .desplegable-cuerpo { min-width: 0; }
  .cabecera-acciones .btn span { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .volver .volver-texto { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cabecera .volver { min-width: 44px; min-height: 44px; padding: 0 12px; }
}
@media (max-width: 520px) {
  .sociedad { max-width: 140px; }
  .codigos { grid-template-columns: 1fr; }
  .paso-caso { flex-direction: row; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* contact, opened documents */
.chip-ok { color: var(--okt); border-color: var(--ok); background: var(--okbg); gap: 4px; }
.chip-ok .ic { width: 13px; height: 13px; }
.chip-aviso { color: var(--avt); border-color: var(--av); background: var(--avbg); }
.nota-caja { display: flex; gap: 8px; align-items: center; border: 1px solid var(--bcard); border-radius: 8px; padding: 9px 12px; background: var(--card); }
.contacto-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.contacto-numero { font-size: 16px; font-weight: 600; color: var(--ink); }
.sub-titulo { margin: 14px 0 8px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.barra-izq { justify-content: flex-start; margin-top: 6px; }
#m-sugerido { background: var(--fill2); }

/* the bell's panel */
.campana { position: relative; }
.campana > summary { list-style: none; cursor: pointer; }
.campana > summary::-webkit-details-marker { display: none; }
.campana-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(380px, calc(100vw - 32px));
  background: var(--card); color: var(--ink); border: 1px solid var(--bcard); border-radius: 10px; box-shadow: var(--sombra, 0 6px 20px rgba(14,23,50,.16)); overflow: hidden; }
.campana-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--bcard); }
.campana-cabeza form { margin: 0; }
.campana-titulo { font-size: 14px; font-weight: 600; }
.btn-enlace { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--link, var(--prim)); text-decoration: underline; cursor: pointer; }
.campana-lista { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.campana-item a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--brow, var(--bcard)); }
.campana-item a:hover, .campana-item a:focus-visible { background: var(--fill2); }
.campana-nueva a { box-shadow: inset 3px 0 0 var(--prim); background: var(--fill3, var(--fill2)); }
.campana-texto { font-size: 13.5px; line-height: 1.4; }
.campana-meta { font-size: 12px; color: var(--ink3); }
.campana-vacia { padding: 14px; font-size: 13.5px; color: var(--ink3); }
.campana-todas { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; font-size: 13.5px; font-weight: 600; color: var(--prim); text-decoration: none; }
.campana-todas:hover { background: var(--fill2); }
/* case list: more filters */
.filtros-mas { flex-basis: 100%; order: 10; }
.filtros-mas > summary { list-style: none; cursor: pointer; display: inline-flex; min-height: 36px; }
.filtros-mas > summary::-webkit-details-marker { display: none; }
.filtros-mas-cuerpo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding-top: 6px; }
.chip-filtro-alerta .mono { color: var(--errt); font-weight: 600; }
/* Inicio: time per step */
.tiempos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tiempo { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "nom barra" "nom dato"; gap: 3px 14px; align-items: center; }
.tiempo-nombre { grid-area: nom; font-weight: 600; font-size: 14px; color: var(--ink); }
.tiempo-barra { grid-area: barra; position: relative; height: 10px; border-radius: 5px; background: var(--track); }
.tiempo-relleno { display: block; height: 100%; border-radius: 5px; background: var(--dato); }
.tiempo-pasado { background: var(--av); }
.tiempo-plazo { position: absolute; left: 0; top: -3px; bottom: -3px; border-right: 2px dashed var(--ink2); pointer-events: none; }
.tiempo-dato { grid-area: dato; font-size: 12.5px; color: var(--ink2); }
@media (max-width: 900px) { .tiempo { grid-template-columns: 1fr; grid-template-areas: "nom" "barra" "dato"; } }
/* person page: where it is today, approved documents */
.hoy-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; font-size: 14.5px; color: var(--ink2); }
.mini-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.mini-paso { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px; border-radius: 7px; border-top: 3px solid var(--track); background: var(--fill2); min-width: 0; }
.mini-paso-nombre { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow-wrap: break-word; }
.mini-paso-sub { font-size: 11.5px; color: var(--ink3); font-family: var(--mono); }
.mini-paso-hecho { border-top-color: var(--ok); }
.mini-paso-actual { border-top-color: var(--prim); background: var(--card); box-shadow: inset 0 0 0 1px var(--prim); }
.mini-paso-cerrado { border-top-color: var(--err); }
.mini-paso-pendiente .mini-paso-nombre, .mini-paso-no_llego .mini-paso-nombre { color: var(--ink3); }
.vigentes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.vigentes li { display: flex; flex-direction: column; gap: 1px; }
.vigentes .tenue { font-size: 12.5px; }
@media (max-width: 520px) {
  .campana-panel { position: fixed; left: 16px; right: 16px; top: auto; width: auto; margin-top: 8px; }
}
/* filing portal */
.pasos-portal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.paso-portal a { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--bcard); background: var(--card); text-decoration: none; color: var(--ink); min-height: 44px; }
.paso-portal a:hover { border-color: var(--bbtn); }
.paso-portal-actual a { border-color: var(--prim); box-shadow: inset 0 0 0 1px var(--prim); }
.paso-portal-actual .paso-num { background: var(--navy); color: #ffffff; box-shadow: inset 0 -3px 0 var(--acento); }
.ficha-grupo { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.ficha-grupo > legend { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.ficha-cerrada { opacity: .75; }
.ficha-cerrada input { background: var(--fill); color: var(--ink4); }
.etiqueta { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink2); margin-bottom: 4px; }
.dato-fijo { margin: 0; min-height: 44px; display: flex; align-items: center; font-size: 15px; color: var(--ink); }
.grabaciones { border: 1px solid var(--bcard); border-radius: 8px; padding: 10px 12px 4px; margin: 10px 0; min-width: 0; }
.grabaciones > legend { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.grabaciones-filas { display: flex; flex-direction: column; gap: 8px; }
/* rows a person adds and removes by hand: seudónimos, a work's performers */
.grabacion { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; gap: 8px 10px; align-items: end; }
.grabacion .campo, .fila-lista .campo { margin: 0; }
.filas-lista { display: flex; flex-direction: column; gap: 8px; }
.fila-lista { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; }
.grabacion > .btn, .fila-lista > .btn, .barra-izq > .btn { min-height: 44px; }
/* a person's IPIs: number, the name it goes with, «Quitar» (the primary has no «Quitar») */
.fila-ipi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 76px; gap: 8px 10px; align-items: end; margin-bottom: 8px; }
.fila-ipi .campo { margin: 0; }
.fila-ipi > .btn { min-height: 44px; }
.fila-ipi select { width: 100%; min-width: 0; }
/* a search that matched a seudónimo: one row per person, to pick from */
.por-seudonimo { margin: 6px 0 14px; }
.por-seudonimo-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.personas-seudonimo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.persona-seudonimo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--bfield); border-radius: 7px; background: var(--card); color: var(--ink); font-size: 14px; text-decoration: none; }
.persona-seudonimo:hover, .persona-seudonimo:focus-visible { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--datobg); }
.persona-seudonimo .padron-dato { grid-column: 1 / -1; overflow-wrap: anywhere; }
.persona-seudonimo-caso { display: inline-flex; align-items: center; gap: 6px; justify-self: end; }
.rad-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rad-doc { border: 1px solid var(--bcard); border-left: 4px solid var(--bfield); border-radius: 8px; padding: 10px 12px; scroll-margin-top: 80px; }
.rad-doc-ok { border-left-color: var(--ok); }
.rad-doc-falta { border-left-color: var(--av); }
.rad-doc-mal { border-left-color: var(--err); }
.rad-doc-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rad-doc-icono { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px; background: var(--fill); color: var(--ink3); }
.rad-doc-ok .rad-doc-icono { background: var(--okbg); color: var(--okt); }
.rad-doc-mal .rad-doc-icono { background: var(--errbg); color: var(--errt); }
.rad-doc-icono .ic { width: 14px; height: 14px; }
.rad-doc-nombre { font-weight: 600; color: var(--ink); }
.rad-doc-estado { margin-left: auto; }
.rad-doc-carga { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-top: 8px; }
.rad-doc-carga .campo { margin: 0; min-width: 200px; flex: 1; }
.rad-doc-carga .campo label { font-size: 12.5px; }
.resumen-rad { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.resumen-rad > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 14px; padding-bottom: 12px; border-bottom: 1px solid var(--brow); }
.resumen-rad dt { font-size: 13px; font-weight: 600; color: var(--ink3); display: flex; flex-direction: column; gap: 2px; }
.resumen-rad dt a { font-weight: 500; font-size: 12.5px; }
.resumen-rad dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.resumen-obra { display: block; }
.comp-totales { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.comp-n { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.comp-ok { background: var(--okbg); color: var(--okt); }
.comp-aviso { background: var(--avbg); color: var(--avt); }
.comp-bloqueo { background: var(--errbg); color: var(--errt); }
.comp-grupo { margin: 12px 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.comp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.comp { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink); }
.comp-icono { flex: none; display: inline-flex; width: 18px; height: 18px; margin-top: 1px; align-items: center; justify-content: center; border-radius: 50%; }
.comp-icono .ic { width: 12px; height: 12px; }
.comp-ok .comp-icono, .comp.comp-ok .comp-icono { background: var(--okbg); color: var(--okt); }
li.comp-ok, li.comp-aviso, li.comp-bloqueo, li.comp-info { background: none; padding: 0; border-radius: 0; font-weight: 400; }
li.comp-aviso .comp-icono { background: var(--avbg); color: var(--avt); }
li.comp-bloqueo .comp-icono { background: var(--errbg); color: var(--errt); }
li.comp-info .comp-icono { background: var(--neubg); color: var(--ink3); }
li.comp-ok .comp-icono { background: var(--okbg); color: var(--okt); }
.comp-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.comp-detalle { font-size: 12.5px; color: var(--ink3); overflow-wrap: anywhere; }
li.comp-bloqueo .comp-detalle { color: var(--errt); }
.comp-ir { font-size: 12.5px; align-self: flex-start; }
@media (max-width: 520px) { .grabacion { grid-template-columns: minmax(0, 1fr) auto; } .grabacion .campo:first-child { grid-column: 1 / -1; } .resumen-rad > div { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .fila-ipi { grid-template-columns: minmax(0, 1fr) auto; } .fila-ipi .campo:first-child { grid-column: 1 / -1; } .persona-seudonimo { grid-template-columns: minmax(0, 1fr); } .persona-seudonimo-caso { justify-self: start; } }
/* document viewer */
.visor { display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.visor-lista { border: 1px solid var(--bcard); border-radius: 9px; background: var(--card); padding: 10px 8px; position: sticky; top: 12px; max-height: calc(100vh - 100px); overflow-y: auto; }
.visor-lista ul { list-style: none; margin: 0; padding: 0; }
.visor-lista-cabeza { display: flex; flex-direction: column; gap: 2px; margin: 2px 6px 8px; font-size: 13.5px; }
.visor-grupo { margin: 10px 6px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.visor-item { display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; border-radius: 7px; text-decoration: none; color: var(--ink); }
.visor-item:hover { background: var(--fill2); }
.visor-item-actual { background: var(--fill3, var(--fill2)); box-shadow: inset 3px 0 0 var(--prim); }
.visor-item-nombre { font-size: 13.5px; font-weight: 600; }
.visor-item-meta { display: flex; align-items: center; gap: 6px; }
.visor-item-meta .pill { font-size: 12px; }
.visor-abierto { display: inline-flex; color: var(--okt); }
.visor-abierto .ic { width: 15px; height: 15px; }
.visor-centro { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.visor-barra { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.visor-titulo h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.visor-titulo p { margin: 2px 0 0; font-size: 12.5px; }
.visor-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.visor-marco { border: 1px solid var(--bcard); border-radius: 9px; background: var(--fill); overflow: hidden; }
.visor-marco iframe { display: block; width: 100%; height: calc(100vh - 170px); min-height: 520px; border: 0; background: #ffffff; }
.visor-marco-imagen { display: flex; justify-content: center; padding: 12px; }
.visor-marco img { max-width: 100%; height: auto; display: block; background: #ffffff; }
.visor-audio { display: flex; align-items: center; gap: 12px; padding: 40px 20px; justify-content: center; color: var(--ink3); }
.visor-audio .ic { width: 32px; height: 32px; }
.visor-audio audio { width: min(480px, 100%); }
.visor-panel { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.visor-estado { margin: 0 0 6px; }
.visor-datos { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.visor-datos > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; font-size: 13.5px; }
.visor-datos dt { color: var(--ink3); }
.visor-datos dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.visor-decision { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.visor-chequeo { border: 1px solid var(--bcard); border-radius: 8px; padding: 8px 10px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.visor-chequeo legend { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.visor-chequeo .casilla { font-size: 13.5px; }
.visor-rechazo { margin-bottom: 8px; }
.visor-rechazo > summary { justify-content: center; }
@media (max-width: 1180px) { .visor { grid-template-columns: 220px minmax(0, 1fr); } .visor-panel { grid-column: 1 / -1; position: static; } }
@media (max-width: 760px) { .visor { grid-template-columns: 1fr; } .visor-lista { position: static; max-height: none; } .visor-marco iframe { height: 70vh; min-height: 360px; } }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.visor-pie { margin: 0; padding: 6px 10px; font-size: 12px; border-top: 1px solid var(--bcard); background: var(--card); }
[hidden] { display: none !important; }   /* hidden wins over a class that sets display (.campos, .campo) */

/* =============================================================================
   Configuración: a board of tiles (owner, 2026-11-12, CAT's pattern). Each tile is an icon, a
   short title and one status line; it opens its panel alone. On a phone the tiles stack.
   ============================================================================= */
.cfg-tablero { display: flex; flex-direction: column; gap: 18px; }
.cfg-grupo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cfg-grupo-t { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.cfg-baldosas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.cfg-baldosas > li { min-width: 0; display: flex; }
.cfg-baldosa { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 68px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--bcard); border-radius: 9px; color: inherit; text-decoration: none; }
.cfg-baldosa:hover { border-color: var(--ink4); box-shadow: var(--shadow); color: inherit; }
.cfg-ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--infobg); color: var(--dato); }
.cfg-baldosa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cfg-baldosa-t { font-weight: 600; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.cfg-baldosa .pill { white-space: normal; }

/* a segmented toggle: one choice of a few, the current one raised */
.conmutador { display: inline-flex; align-self: flex-start; max-width: 100%; gap: 3px; padding: 3px; border: 1px solid var(--bfield); border-radius: 9px; background: var(--fill); }
.segmento-caja { display: flex; margin: 0; }
.segmento { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink3); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.segmento:hover { background: var(--card); color: var(--ink); }
.segmento-actual, .segmento[aria-current] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(14, 23, 50, .16); cursor: default; }
.segmento:disabled { opacity: .45; cursor: not-allowed; }
.segmento:disabled:hover { background: transparent; color: var(--ink3); }
.segmento-n { font-size: 12.5px; padding: 0 7px; border-radius: 10px; background: var(--fill); }
.linea-ico { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--ink2); }
.linea-ico > .ic { width: 16px; height: 16px; color: var(--ink3); }
.lista-simple .ic { width: 16px; height: 16px; vertical-align: -3px; }   /* an icon in a line sits on its text */

/* a field and its button on one row; the field takes the width (a whole address shows) */
.campo-y-boton { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.campo-y-boton label { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 14px; color: var(--ink2); }
.campo-y-boton label .ic { width: 16px; height: 16px; color: var(--ink3); }
.campo-y-boton-fila { display: flex; gap: 8px; }
.campo-y-boton-fila input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 13px; border: 1px solid var(--bfield); border-radius: 7px; background: var(--card); font-size: 15px; }
.campo-y-boton-fila input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--datobg); }
.campo-y-boton-fila .btn { flex: none; }

/* the sending mailbox */
.buzon-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.buzon-ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--infobg); color: var(--dato); }
.buzon-ico .ic { width: 22px; height: 22px; }
.buzon-dir { flex: 1 1 220px; min-width: 0; font-size: 19px; font-weight: 600; color: var(--ink); }
.buzon-estado { flex: none; }
.buzon-prueba { display: inline-flex; }
.buzon-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.buzon-acciones form { margin: 0; }
.boton-caja { display: inline-flex; }
.btn-fantasma { background: transparent; }
.btn-peligro-borde:hover { color: var(--errt); border-color: var(--err); background: var(--errbg); }
.info-ico { position: relative; flex: none; margin-left: auto; }
.info-ico > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 7px; color: var(--ink3); }
.info-ico > summary::-webkit-details-marker { display: none; }
.info-ico > summary:hover, .info-ico[open] > summary { color: var(--ink); background: var(--fill); }
.info-ico-cuerpo { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(420px, calc(100vw - 32px)); margin: 0; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--bcard); border-radius: 8px; box-shadow: var(--shadow); font-size: 13.5px; }
/* a list behind an icon («+N»): it opens in the flow, under its line, never over the page's edge */
.aviso-compartido { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.lista-ico { margin-left: 0; }
.lista-ico[open] { flex-basis: 100%; }
.lista-ico > summary { width: auto; min-width: 40px; height: 32px; padding: 0 8px; }
.lista-ico-cuerpo { list-style: none; margin: 4px 0 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--bcard); border-radius: 8px; font-size: 13.5px; color: var(--ink);
  max-height: 260px; overflow-y: auto; overflow-wrap: anywhere; }
.comp:has(> .lista-ico) { flex-wrap: wrap; }                       /* a filing check with names behind an icon */
.comp:has(> .lista-ico) > .comp-texto { flex: 1 1 calc(100% - 26px); }
.comp > .lista-ico { margin-left: 26px; flex-basis: calc(100% - 26px); }
.con-info { display: inline-flex; align-items: center; gap: 6px; }
.con-info .ic { width: 15px; height: 15px; color: var(--ink3); }

/* a switch that saves when it changes (duck.js); without JavaScript, its «Guardar» */
.interruptor-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding-top: 12px; border-top: 1px solid var(--brow); }
.interruptor { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; color: var(--ink2); cursor: pointer; }
.interruptor input { position: absolute; left: 0; top: 50%; width: 44px; height: 24px; margin: -12px 0 0; opacity: 0; cursor: pointer; }
.interruptor-riel { position: relative; flex: none; width: 44px; height: 24px; border-radius: 999px; border: 1px solid var(--bfield); background: var(--track); transition: background .15s; }
.interruptor-riel::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(14, 23, 50, .3); transition: transform .15s; }
.interruptor input:checked + .interruptor-riel { background: var(--ok); border-color: var(--ok); }
.interruptor input:checked + .interruptor-riel::after { transform: translateX(20px); }
.interruptor input:focus-visible + .interruptor-riel { outline: 2px solid var(--focus); outline-offset: 2px; }
.con-js .solo-sin-js { display: none; }

/* «Qué sale por correo» and the outbox */
.select-y-boton { display: flex; align-items: center; gap: 8px; margin: 0; }
.select-y-boton select { flex: 1 1 auto; min-width: 0; min-height: 40px; }
.fallo-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fallo-fila form { margin: 0; flex: none; }
.btn-icono-tabla { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--bfield); border-radius: 7px;
  background: var(--card); color: var(--ink2); cursor: pointer; }
.btn-icono-tabla:hover { border-color: var(--ink4); color: var(--ink); }

@media (max-width: 900px) {
  .cfg-baldosas { grid-template-columns: 1fr; }
  .cfg-baldosa { min-height: 60px; }
  .conmutador { display: flex; align-self: stretch; width: 100%; }
  .conmutador > * { flex: 1 1 0; min-width: 0; }
  .segmento { width: 100%; min-height: 44px; padding: 0 8px; }
  .buzon-acciones > *, .buzon-acciones .btn { width: 100%; }
  .info-ico > summary, .btn-icono-tabla { width: 44px; height: 44px; }
  .interruptor-fila .btn, .select-y-boton .btn, .campo-y-boton-fila .btn { min-height: 44px; }
  .select-y-boton select { min-height: 44px; }
}

/* =============================================================================
   Icons instead of words («la gente ojea», build 10). An icon-only control keeps its word in
   title and aria-label. Icon colours are the TEXT tones (--datot, --okt, --avt, --errt, --ink3),
   ≥ 3:1 against their backgrounds in both themes (never --neu or --av, which are dot colours);
   at phone width every tap target is 44 px or more.
   ============================================================================= */
/* an icon-only button or link */
.btn-ico { width: 36px; min-height: 36px; padding: 0; gap: 0; flex: none; }
.btn-ico .ic { width: 17px; height: 17px; }
.btn-ico-peligro { color: var(--errt); }
.btn-ico-peligro:hover { color: var(--errt); border-color: var(--err); background: var(--errbg); }
.btn-ico-n { font-size: 12.5px; margin-left: 3px; }
.btn-ico.con-n { width: auto; padding: 0 9px; }
.desplegable > summary.btn-ico { display: inline-flex; }

/* help and short lists behind an icon, beside what they explain */
/* inline-block (not flex): a note placed «fixed» sits right under its icon */
.info-ico.pista { margin-left: 0; display: inline-block; vertical-align: middle; flex: none; }
.info-ico.pista > summary { width: 32px; height: 32px; }
.info-ico.pista > summary .ic { width: 17px; height: 17px; }
.pista .info-ico-cuerpo { left: 0; right: auto; font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink2); white-space: normal; line-height: 1.45; }
.info-ico.pista.ico-lista > summary { width: auto; min-width: 32px; padding: 0 7px; gap: 4px; }
/* a note that would leave the window (duck.js, on opening): anchored on its other side, else across the window */
.pista.pista-izq .info-ico-cuerpo { left: auto; right: 0; }
.pista.pista-ancha .info-ico-cuerpo { position: fixed; left: 16px; right: 16px; top: auto; width: auto; margin-top: 6px; }
.ico-lista-n { font-size: 12.5px; font-weight: 600; }
ul.info-ico-cuerpo { list-style: none; }
ul.info-ico-cuerpo li { overflow-wrap: anywhere; }
.siguiente .info-ico.pista > summary { color: var(--claro-2); }
.siguiente .info-ico.pista > summary:hover, .siguiente .info-ico.pista[open] > summary { color: #ffffff; background: var(--navy-2); }
.siguiente .pista .info-ico-cuerpo { color: var(--ink2); }
/* …but inside a drop-down's light body on that panel, the card's colours again */
.siguiente .desplegable-cuerpo .info-ico.pista > summary { color: var(--ink3); }
.siguiente .desplegable-cuerpo .info-ico.pista > summary:hover, .siguiente .desplegable-cuerpo .info-ico.pista[open] > summary { color: var(--ink); background: var(--fill); }
.con-pista { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.con-pista > p, .con-pista > h2, .con-pista > h3 { margin: 0; }
.bloque-cabeza .info-ico.pista { align-self: center; }

/* a state as an icon (role="img": the word is its name) */
.estado-ico { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.estado-ico .ic { width: 16px; height: 16px; }
.estado-ico-n { font-size: 12.5px; font-weight: 600; }
.ico-dato { color: var(--datot); }
.ico-ok { color: var(--okt); }
.ico-av { color: var(--avt); }
.ico-err { color: var(--errt); }
.ico-neu { color: var(--ink3); }
.iconos-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }

/* each kind of notification: its icon on a tile of its tone */
.aviso-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--neubg); }
.aviso-ico .ic { width: 18px; height: 18px; }
.aviso-ico.ico-dato { background: var(--datobg); }
.aviso-ico.ico-av { background: var(--avbg); }
.aviso-ico.ico-err { background: var(--errbg); }
.sin-leer { display: inline-flex; color: var(--datot); vertical-align: middle; margin-right: 4px; }
.sin-leer .ic { width: 12px; height: 12px; }
.campana-item a { flex-direction: row; align-items: flex-start; gap: 10px; }
.campana-nueva a { background: var(--datobg); }   /* unread: its colour (with the dot), as on /notificaciones */
.campana-nueva a:hover, .campana-nueva a:focus-visible { background: var(--datobg); }
.campana-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.campana-cabeza .btn-ico { width: 36px; min-height: 36px; }
.notif { grid-template-columns: 32px minmax(0, 1fr) auto; }

/* a figure with its icon (a document's limit, a step's counts) */
.chip .ic { width: 14px; height: 14px; }
.chip-ico { gap: 4px; }
.paso-plazo { display: inline-flex; align-items: center; gap: 4px; }
.paso-plazo .ic { width: 13px; height: 13px; }
.plazo .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.tramo-extra { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fila-alerta .estado-ico { margin-right: 4px; }

/* =============================================================================
   Build 15: phone and contrast, from the real-browser pass of 2026-11-13 (DCK-N01…N19). All in
   this one block (plus the visually-hidden rules near the top), so a merge stays easy. Ratios
   are WCAG 2.1, computed from these colours.
   ============================================================================= */
/* N08: a form field's border, ≥ 3:1 against every surface a field sits on. Light #808aa0: 3.46 on --card,
   3.29 on --th, 3.23 on --canvas, 3.04 on --fill. Dark #66729a: 3.63 on --card, 3.98 on --canvas,
   3.36 on --th, 3.34 on --fill (was --bfield: 1.29 light, 1.39 dark, 1.22 on --th) */
:root { --bcampo: #808aa0; }
:root[data-theme="dark"] { --bcampo: #66729a; }
.campo input, .campo select, .campo textarea, .campo-tabla, .en-linea select, .tabla select, .tabla-docs select,
.campo-y-boton-fila input { border-color: var(--bcampo); }
/* …and the focused field still stands out from the darker resting border: 2 px of --focus, then the halo */
.campo input:focus, .campo select:focus, .campo textarea:focus, .campo-y-boton-fila input:focus { box-shadow: 0 0 0 1px var(--focus), 0 0 0 4px var(--datobg); }
/* N19: Usuarios' «Correo para avisos» and the «Motivo» of «Retirar la obra» (a bare input in a drop-down's body)
   are fields like the others (in dark they were the browser's grey box) */
.en-linea > input:not([type="hidden"], [type="checkbox"], [type="radio"]),
.desplegable-cuerpo > input:not([type="hidden"], [type="checkbox"], [type="radio"]) { min-height: 36px; padding: 0 10px; border: 1px solid var(--bcampo);
  border-radius: 6px; background: var(--card); color: var(--ink); }
/* N19: every field's placeholder in --ink4: 4.59:1 on --card light, 6.19:1 dark (the browser's #757575 was 3.72 in dark) */
.campo textarea::placeholder, .campo-tabla::placeholder, .en-linea > input::placeholder, .desplegable-cuerpo > input::placeholder,
.campo-y-boton-fila input::placeholder { color: var(--ink4); opacity: 1; }
/* N07: IPI, Carnet and the note on the navy panel read as boxes: --claro-3 is 5.05:1 on --navy and 4.47:1 on
   the field's own --navy-2 (was --navy-sub, 1.51:1); focused, the border turns white (3.51:1 against --claro-3) */
.formulario-oscuro .campo input { border-color: var(--claro-3); }
.formulario-oscuro .campo input:focus { border-color: #ffffff; }
/* N13: the whole search box is the field, so a tap anywhere in it opens the keyboard (it was a 23 px strip in a
   40 px box); the icon lies over it and lets taps through. Its border 5.05:1 on the navy bar (was 1.51:1), white
   when focused; the placeholder --claro-2 is 6.02:1 on --navy-2 (was --claro-3, 4.47:1) */
.cabecera-buscar { position: relative; padding: 0; border-color: var(--claro-3); }
.cabecera-buscar > .ic { position: absolute; left: 12px; top: 50%; margin-top: -9px; pointer-events: none; }
.cabecera-buscar input { align-self: stretch; padding: 0 12px 0 38px; }
.cabecera-buscar input::placeholder { color: var(--claro-2); }
.cabecera-buscar:focus-within { border-color: #ffffff; }
/* N10: the active filter's count in dark: --primfg on the light-blue chip, 8.86:1 (was --claro-2, 1.23:1) */
:root[data-theme="dark"] .chip-filtro[aria-current="true"] .mono { color: var(--primfg); }
/* N01, N02: the sign-in pages and the error card fit a 320 px phone. The cards' «max-width: 100%» resolved
   against a grid track the card itself had sized (420 / 440 px); a track with a 0 minimum lets them shrink */
.acceso-panel, .error-pagina { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .acceso { grid-template-columns: minmax(0, 1fr); } }
/* N09: Shift+Tab never leaves the focus under the sticky top bar (58 px; 61 with 44 px buttons). At ≤ 900 px
   the bar is not sticky. A filing document's own 80 px margin (for that same bar) now adds to the padding:
   8 px keeps its «#doc-…» links landing where they did, 80 px from the top */
@media (min-width: 901px) { html { scroll-padding-top: 72px; } .rad-doc { scroll-margin-top: 8px; } }
@media (max-width: 900px), (pointer: coarse) {
  /* N15: the navy panel's buttons and «+ Nuevo caso» reach 44 px with a finger (were 40) */
  .btn-claro, .btn-borde-claro { min-height: 44px; }
  /* N12: 16 px in every field, or iPhone zooms in when it is touched (the 6-digit code keeps its 20 px) */
  :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="hidden"]), select, textarea):not(.codigo) { font-size: 16px; }
}
/* ======================================================== end of build 15 === */

/* focus stays visible on the navy surfaces (the light theme's --focus is too dark there) */
.cabecera :focus-visible, .lateral :focus-visible, .siguiente :focus-visible { outline-color: #ffffff; }
.campana-panel :focus-visible, .siguiente .desplegable-cuerpo :focus-visible, .siguiente .info-ico-cuerpo :focus-visible { outline-color: var(--focus); }

@media (max-width: 900px), (pointer: coarse) {
  .btn-chico, .chip-filtro, .chip-cuenta, .tab, .bloque-enlace { min-height: 44px; }
  .btn-ico, .btn-icono, .campana-cabeza .btn-ico { width: 44px; min-height: 44px; height: 44px; }
  .btn-ico.con-n { width: auto; min-width: 44px; }
  .info-ico.pista > summary { width: 44px; height: 44px; }
  .info-ico.pista.ico-lista > summary { width: auto; min-width: 44px; }
  .pagina { min-width: 44px; height: 44px; }
  .ojo { width: 44px; height: 44px; right: 0; }
  .campo-ojo input { padding-right: 50px; }
  /* build 8's controls, at any width with a finger */
  .info-ico > summary, .btn-icono-tabla { width: 44px; height: 44px; }
  .segmento { min-height: 44px; }
  .interruptor-fila .btn, .select-y-boton .btn, .campo-y-boton-fila .btn, .select-y-boton select { min-height: 44px; }
  .cabecera .volver { min-width: 44px; min-height: 44px; }
}
/* the toggles on a phone (review 10A MED-4): a label wraps onto two lines inside its 44 px segment instead
   of spilling over the next; under 520 px a little less padding and 14 px. Measured in Segoe UI Semibold:
   the longest word, «Menciones», is 68.8 px at 14 px; at 320 px wide each of three segments leaves 73.3 px */
@media (max-width: 900px) {
  .conmutador .segmento { white-space: normal; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
}
@media (max-width: 520px) {
  .pista .info-ico-cuerpo { position: fixed; left: 16px; right: 16px; top: auto; width: auto; }
  .conmutador .segmento { padding: 0 4px; font-size: 14px; }
}
/* «Copiar» done (duck.js adds .copiado): its icon becomes a check, in the «ok» tone */
.ico-antes, .ico-hecho { display: inline-flex; }
.ico-hecho, .copiado .ico-antes { display: none; }
.copiado .ico-hecho { display: inline-flex; }
.btn.copiado { color: var(--okt); border-color: var(--ok); }
/* an icon link inside a line of text (a notice's relation) */
.notif-meta a .ic { width: 15px; height: 15px; vertical-align: -3px; }
.filtros .btn-ico { width: 44px; }
.siguiente .estado-ico { color: var(--claro-2); }
.en-linea-chips { display: inline-flex; vertical-align: middle; }
.comp-totales .estado-ico { padding: 2px 8px; border-radius: 999px; background: var(--fill); }
.comp-totales .estado-ico.ico-ok { background: var(--okbg); }
.comp-totales .estado-ico.ico-av { background: var(--avbg); }
.comp-totales .estado-ico.ico-err { background: var(--errbg); }
/* a fieldset heading with its help beside it (the legend is for screen readers: _iconos.leyenda) */
.leyenda { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.campos > .leyenda, .campos-ids > .leyenda { grid-column: 1 / -1; margin: 0; }
/* a field's label with its help on the same line */
.campo > .con-pista { gap: 2px 6px; }
.campo > .con-pista > label { margin: 0; }
/* the icons' legend on /notificaciones */
.leyenda-iconos { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; }
.leyenda-iconos li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink2); }
.leyenda-iconos .aviso-ico { width: 26px; height: 26px; }
.leyenda-iconos .aviso-ico .ic, .leyenda-iconos .estado-ico .ic { width: 16px; height: 16px; }
.info-ico-cuerpo .leyenda-iconos { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .info-ico-cuerpo .leyenda-iconos { grid-template-columns: 1fr; } }
/* a page's help in the navy top bar (Configuración → Avisos) */
.cabecera .info-ico.pista > summary { color: var(--claro-2); }
.cabecera .info-ico.pista > summary:hover, .cabecera .info-ico.pista[open] > summary { color: #ffffff; background: var(--navy-2); }
.cabecera .pista .info-ico-cuerpo { color: var(--ink2); }
@media (min-width: 521px) { .cabecera .pista:not(.pista-ancha) .info-ico-cuerpo { left: auto; right: 0; } }
.cabecera .info-ico-cuerpo :focus-visible { outline-color: var(--focus); }

/* ------------------------------------------------- legal documents (build 14) ---- */
/* every page's footer: the two documents as icons (their names in title= and aria-label) */
.pie-legal { display: flex; justify-content: flex-end; gap: 4px; }
.pie-legal-enlace { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 7px; color: var(--ink3); }
.pie-legal-enlace:hover { color: var(--ink); background: var(--fill); }
.pie { padding: 0 22px 12px; max-width: 1400px; width: 100%; }
.pie-legal-caja { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--bcard); align-self: stretch; }
/* a document's page and the acceptance: a reading column under the navy bar */
.lectura { min-height: 100vh; display: flex; flex-direction: column; }
.lectura-marca .marca-nombre { color: var(--claro); }
.lectura-cuerpo { flex: 1; padding: 24px 16px; display: flex; justify-content: center; }
.lectura-hoja { width: 760px; max-width: 100%; background: var(--card); border: 1px solid var(--bcard); border-radius: 10px; padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lectura-titulo { margin: 0; font-size: 24px; font-weight: 600; color: var(--ink); }
.lectura-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink3); }
.lectura-pie { padding: 0 16px 16px; display: flex; justify-content: center; }
.lectura-pie .pie-legal { width: 760px; max-width: 100%; }
.legal-texto { color: var(--ink2); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.legal-texto h2 { margin: 22px 0 8px; font-size: 17px; color: var(--ink); }
.legal-texto h3, .legal-texto h4, .legal-texto h5, .legal-texto h6 { margin: 16px 0 6px; font-size: 15.5px; color: var(--ink); }
.legal-texto p { margin: 0 0 10px; }
.legal-texto ul, .legal-texto ol { margin: 0 0 10px; padding-left: 22px; }
.legal-texto li { margin: 3px 0; }
.legal-texto hr { border: 0; border-top: 1px solid var(--bcard); margin: 16px 0; }
.legal-texto strong { color: var(--ink); }
.legal-blanco { background: var(--avbg); color: var(--avt); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.legal-caja { max-height: 52vh; overflow-y: auto; border: 1px solid var(--bcard); border-radius: 8px; padding: 4px 16px; background: var(--canvas); }
.aceptar-entrada { margin: 0; color: var(--ink); font-weight: 600; }
.aceptar-otros { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.aceptar-otros a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.aceptar-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.aceptar-botones { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) {
  .pie { padding: 0 16px 12px; }
  .lectura-cuerpo { padding: 16px; }
  .lectura-hoja { padding: 18px 16px; }
  .lectura-cabecera .sociedad { display: none; }
}