/* Layout: barra de marca + titular, cifras que filtran, chips de región/materia, lista de empresas desplegables. */
:root {
  --bg: #f4f6f9; --surface: #ffffff; --soft: #eef2f7; --ink: #14233a; --muted: #5a6a80; --line: #d9e0ea;
  --navy: #0f2a50; --barra-a: #071630; --barra-b: #0d2446; --navy-ink: #ffffff; --s1: #b5780f; --s2: #2a6fb8; --s3: #1a8f7d; --s4: #8a5fb0; --s0: #a9b4c4; --wa: #128c4b; --navy-soft: #c7d4e8; --accent: #b07a12; --gold: #e0ae4a;
  --bad: #a3341f; --bad-soft: #fbe9e4; --sent: #7a4a9e; --sent-soft: #f1e8f8; --wait: #24588f; --wait-soft: #e4edf8;
  --none: #7a5a10; --none-soft: #fbf1d9; --ok: #1f7a4d; --ok-soft: #e1f3e9;
  --display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) {
  --bg: #0d1520; --surface: #152030; --soft: #1b2a3e; --ink: #e8edf4; --muted: #9aa9bd; --line: #293a51;
  --navy: #1b3a68; --barra-a: #040d1d; --barra-b: #0a1b36; --navy-soft: #a9bbd6; --accent: #e0ae4a; --s1: #b5822a; --s2: #4a8ad4; --s3: #3aa98c; --s4: #a070c8; --s0: #5a6a80; --wa: #2fb86e;
  --bad: #f2937e; --bad-soft: #3b1c15; --sent: #c9a5ea; --sent-soft: #2c1f3b; --wait: #8fb8ec; --wait-soft: #172b46;
  --none: #e6c46c; --none-soft: #33290f; --ok: #72d3a1; --ok-soft: #12301f; color-scheme: dark } }
:root[data-tema="oscuro"] {
  --bg: #0d1520; --surface: #152030; --soft: #1b2a3e; --ink: #e8edf4; --muted: #9aa9bd; --line: #293a51;
  --navy: #1b3a68; --barra-a: #040d1d; --barra-b: #0a1b36; --navy-soft: #a9bbd6; --accent: #e0ae4a; --s1: #b5822a; --s2: #4a8ad4; --s3: #3aa98c; --s4: #a070c8; --s0: #5a6a80; --wa: #2fb86e;
  --bad: #f2937e; --bad-soft: #3b1c15; --sent: #c9a5ea; --sent-soft: #2c1f3b; --wait: #8fb8ec; --wait-soft: #172b46;
  --none: #e6c46c; --none-soft: #33290f; --ok: #72d3a1; --ok-soft: #12301f; color-scheme: dark }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1.0625rem/1.5 var(--body); }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
.ancho { max-width: 1240px; margin: 0 auto; padding-inline: 16px; }
.suave { color: var(--muted); margin: 0; }
.marca { font: 700 .82rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Botones */
.btn { font: 600 1rem var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; min-height: 44px; cursor: pointer; transition: transform .08s, background .15s, border-color .15s; }
.btn:hover { border-color: var(--wait); }
.btn:active { transform: scale(.97); }
.btn.primario { background: var(--navy); color: var(--navy-ink); border-color: var(--navy); }
.btn.primario:hover { filter: brightness(1.2); }
.btn.dorado { background: var(--gold); color: #1c1503; border-color: var(--gold); }
.btn.dorado:hover { filter: brightness(1.07); }
.btn.fantasma { background: transparent; color: var(--navy-ink); border-color: rgba(255,255,255,.35); }
.btn.grande { min-height: 52px; font-size: 1.08rem; }
.btn.centro { display: block; margin: 18px auto 0; }
input, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-height: 44px; min-width: 0; }

/* Entrar */
/* El azul se oscurece hacia abajo, hasta casi negro en el pie. */
.entrar { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; gap: 28px; padding: 0 16px 26px; background: linear-gradient(180deg, #1b4a8a 0%, #0f2a55 42%, #071630 74%, #020812 100%); }
.tarjeta-entrar { width: min(420px, 100%); background: var(--surface); border-radius: 12px; padding: 28px 24px; display: grid; gap: 8px; }
.tarjeta-entrar .marca { color: var(--accent); }
.tarjeta-entrar h1 { font-size: 1.6rem; }
.tarjeta-entrar label, .menu label:not(.interruptor) { font-weight: 600; margin-top: 8px; display: block; }
.tarjeta-entrar button { margin-top: 14px; }
.ayuda-entrar { color: var(--muted); font-size: .92rem; text-align: center; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.ayuda-entrar a { color: var(--wait); font-weight: 600; }
.pie-entrar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; color: #a9bfdc; font-size: .92rem; margin: 0; max-width: none; text-align: center; }
.pie-entrar img { display: block; height: 44px; width: auto; }
.pie-entrar a { color: #fff; font-weight: 600; }
.error { color: var(--bad); background: var(--bad-soft); border-radius: 8px; padding: 8px 12px; margin: 6px 0 0; }

/* Barra superior */
.tope { position: sticky; top: 0; z-index: 30; background: var(--barra-a); color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); }
.tope-in { display: flex; align-items: center; gap: 16px 28px; padding-block: 10px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.logo svg { width: 46px; height: 46px; flex: none; }
.logo .l1 { fill: #fff; }
.logo .l2 { fill: none; stroke: #4fc3f7; stroke-width: 3.2; stroke-linecap: round; }
.logo circle.l2 { fill: var(--barra-a); }
.logo b { display: block; font: 700 1.12rem/1.1 var(--display); }
.logo small { display: block; color: #a9bfdc; font-size: .78rem; margin-top: 3px; }
.menu-sitio { display: flex; flex-wrap: wrap; gap: 4px; margin-inline: auto; }
.menu-sitio button { font: 600 .98rem var(--body); color: #dbe6f5; background: none; border: 0; border-radius: 8px; padding: 9px 18px; min-height: 42px; cursor: pointer; transition: background .15s, color .15s; }
.menu-sitio button:hover { background: rgba(255,255,255,.1); color: #fff; }
.menu-sitio button[aria-current="true"] { background: #1d4f8f; color: #fff; }
.cuenta { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(320px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.menu form { display: grid; gap: 6px; }
.menu input { width: 100%; }
.interruptor { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.interruptor input { min-height: 0; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--navy); }

/* Portada */
.hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(120deg, var(--barra-a), var(--barra-b)); padding-bottom: 64px; }
/* La foto ocupa solo el lado derecho y se funde hacia la izquierda: así se ve el volcán completo con su cielo. */
.hero::before { content: ''; position: absolute; inset: 0 0 0 auto; width: min(100%, 1040px); background: linear-gradient(180deg, rgba(6, 20, 44, .1), rgba(6, 20, 44, .5)), url(img/volcan.webp) 62% 12% / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%); mask-image: linear-gradient(90deg, transparent 0%, #000 46%); }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) 160px; gap: 28px; align-items: center; padding-block: 30px 18px; min-height: 300px; }
.ceja { font: 700 .8rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: #4fc3f7; margin: 0 0 8px; }
.hero h1 { font: 400 clamp(1.9rem, 4.6vw, 3.3rem)/1.05 var(--display); letter-spacing: -.01em; }
.hero h1 b { display: block; font-weight: 800; }
.bajada { margin: 14px 0 0; color: #d3e0f2; max-width: 56ch; font-size: 1.05rem; }
.act-sitio.grande { justify-self: start; align-self: center; min-height: 1px; max-width: 100%; }
#actChico { margin-top: 14px; min-height: 38px; }
.act { display: flex; align-items: flex-start; gap: 16px; text-align: left; font: inherit; color: #fff; background: rgba(8, 26, 56, .72); border: 1px solid rgba(120, 180, 255, .45); border-radius: 12px; padding: 20px 24px; cursor: pointer; backdrop-filter: blur(6px); transition: padding .45s ease, gap .45s ease, border-radius .45s ease, background .2s; max-width: 100%; }
.act:hover { background: rgba(14, 40, 82, .85); }
.act-ico { width: 38px; height: 38px; flex: none; fill: none; stroke: #4fc3f7; stroke-width: 3.4; stroke-linecap: round; transition: width .45s ease, height .45s ease; }
.act-texto { display: grid; min-width: 0; }
.act small { color: #a9bfdc; font-size: .88rem; }
.act b { font: 700 1.35rem/1.25 var(--display); transition: font-size .45s ease; }
.act-mas { color: #c6d6ec; font-size: .98rem; max-height: 2em; opacity: 1; overflow: hidden; transition: max-height .45s ease, opacity .3s ease; }
.act.chica { padding: 9px 16px; gap: 10px; border-radius: 99px; align-items: center; }
.act.chica .act-ico { width: 20px; height: 20px; }
.act.chica b { font-size: .98rem; }
.act.chica small { display: none; }
.act.chica .act-mas { max-height: 0; opacity: 0; }
.mapa-caja { position: relative; justify-self: end; width: 160px; margin-right: -36px; }
/* Detrás del mapa la foto se va aclarando hacia un azul parejo: tapa el volcán y deja leer los puntos. */
.mapa-caja::before { content: ''; position: absolute; top: -200px; bottom: -200px; left: -230px; right: -100vw; background: linear-gradient(90deg, rgba(27, 84, 150, 0) 0, rgba(27, 84, 150, .78) 190px, rgba(30, 92, 162, .93) 300px); pointer-events: none; }
#mapa { position: relative; }
#mapa { display: block; width: 160px; height: 370px; cursor: pointer; margin-block: -14px -40px; }
.mapa-rotulo { position: absolute; right: calc(100% + 8px); top: 0; background: #fff; color: var(--barra-a); border-radius: 8px; padding: 6px 10px; font-size: .88rem; line-height: 1.3; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.3); pointer-events: none; }
.mapa-rotulo b { display: block; font-family: var(--display); }

/* Indicadores */
.cifras { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: -46px; }
.cifra { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; display: flex; align-items: center; gap: 16px; text-align: left; box-shadow: 0 6px 18px rgba(7, 22, 48, .08); transition: transform .15s, border-color .15s, box-shadow .15s; }
.cifra:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 16px 30px rgba(7, 22, 48, .2); }
.cifra:hover .disco { transform: scale(1.1); }
.cifra[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 -4px 0 var(--gold), 0 6px 18px rgba(7, 22, 48, .08); }
.disco { flex: none; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; transition: transform .15s; }
.ico { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cifra[data-rapido="todas"] .disco, .cifra[data-rapido="revisadas"] .disco { background: var(--wait-soft); color: var(--wait); }
.cifra[data-rapido="nuevas"] .disco { background: var(--ok-soft); color: var(--ok); }
.cifra[data-rapido="fallida"] .disco { background: var(--bad-soft); color: var(--bad); }
.cifra-t { display: grid; min-width: 0; }
.cifra-t > span { color: var(--muted); font-size: .95rem; }
.cifra b { font: 800 2rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.cifra small { color: var(--muted); font-size: .85rem; }

.cuerpo { padding-bottom: 48px; }
.aviso { background: var(--none-soft); color: var(--none); border-radius: 8px; padding: 10px 14px; margin-top: 14px; }

/* Filtros */
.filtros { display: grid; gap: 10px; margin: 12px 0 8px; }

/* Tablero: listas a la izquierda, empresas a la derecha */
.tablero { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.lateral { display: grid; gap: 14px; }
.bloque { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 8px; }
.bloque label { font-weight: 600; font-size: .95rem; margin-top: 4px; }
.bloque input, .bloque select, .bloque > .btn { width: 100%; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.whatsapp { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn.whatsapp:not(:disabled):hover { filter: brightness(1.1); }
.lista-item.hija { margin-left: 18px; width: calc(100% - 18px); min-height: 40px; padding-block: 7px; font-size: .95rem; }
.lista-item.todo { background: var(--none-soft); }
.ayuda.visible { display: block; }
.elegir { display: flex; align-items: center; padding: 0 4px 0 14px; cursor: pointer; }
.elegir input { width: 22px; height: 22px; min-height: 0; accent-color: var(--navy); cursor: pointer; }
.empresa > .detalle { grid-column: 1 / -1; }
.empresa.marcada { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }

/* Panorama */
.panel { margin-top: 36px; display: grid; gap: 14px; }
.hallazgos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.hallazgo { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; }
.hallazgo small { font: 600 .72rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hallazgo b { font: 700 1.25rem/1.2 var(--display); overflow-wrap: anywhere; }
.hallazgo span { color: var(--muted); font-size: .92rem; }
.graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grafico { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.grafico.ancho-total { grid-column: 1 / -1; }
.grafico h3 { font-size: 1.02rem; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; color: var(--muted); font-size: .9rem; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.muestra { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.muestra.s1, .col .s1, .barra-h .s1 { background: var(--s1); }
.muestra.s2, .col .s2, .barra-h .s2 { background: var(--s2); }
.columnas { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; }
.col { flex: 1 1 0; min-width: 30px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; cursor: default; }
.col .seg { width: 70%; max-width: 34px; transition: filter .15s; }
.col .seg:first-of-type { border-radius: 4px 4px 0 0; }
.col:hover .seg, .barra-h:hover .relleno { filter: brightness(1.2); }
.col .total { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.col .eje { align-self: stretch; text-align: center; border-top: 1px solid var(--line); margin-top: 0; padding-top: 5px; font-size: .74rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.col.finde .eje { opacity: .6; }
.barras { display: grid; gap: 8px; }
.barra-h { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .94rem; }
.barra-h .nombre { overflow-wrap: anywhere; line-height: 1.25; }
.barra-h .pista { height: 16px; background: var(--soft); border-radius: 0 4px 4px 0; overflow: hidden; }
.barra-h .relleno { height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; transition: width .4s ease, filter .15s; }
.barra-h .valor { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.sin-datos { color: var(--muted); margin: 0; }
.flotante { position: fixed; z-index: 20; pointer-events: none; background: var(--ink); color: var(--bg); border-radius: 8px; padding: 8px 12px; font-size: .9rem; line-height: 1.35; max-width: 260px; white-space: pre-line; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.bloque h2, .cab-lista h2 { font-size: 1.15rem; }
.listas { display: grid; gap: 6px; }
.lista-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; font: 600 1rem var(--body); color: var(--ink); background: var(--soft); border: 2px solid transparent; border-radius: 8px; padding: 10px 12px; min-height: 44px; cursor: pointer; transition: background .15s, border-color .15s, transform .08s; }
.lista-item span { min-width: 0; overflow-wrap: anywhere; }
.lista-item small { font-weight: 600; font-variant-numeric: tabular-nums; background: var(--surface); border-radius: 99px; padding: 1px 9px; color: var(--muted); }
.lista-item:hover { border-color: var(--wait); }
.lista-item[aria-pressed="true"] { background: var(--navy); color: var(--navy-ink); }
.lista-item.sobre { border-color: var(--gold); background: var(--none-soft); color: var(--ink); transform: scale(1.03); }
.moviendo .lista-item:not([aria-pressed="true"]) { border-style: dashed; border-color: var(--gold); }
.nueva-lista { display: grid; gap: 8px; }
.nueva-lista input { width: 100%; }
.ayuda { color: var(--muted); font-size: .88rem; margin: 0; }
.principal { min-width: 0; }
.cab-lista { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.acciones-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.chico { min-height: 38px; padding: 6px 12px; font-size: .92rem; }
.btn.peligro { color: var(--bad); }
.btn.peligro:hover { border-color: var(--bad); }
#formRenombrar { grid-template-columns: minmax(0, 1fr) auto; margin-top: 10px; }
.empresa[draggable="true"] { cursor: grab; }
.empresa.arrastrando { opacity: .5; }
.fila-mover { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: 600; }
select.mover { font-weight: 600; border-color: var(--wait); }
.datos .ancho2 { grid-column: span 2; }
.pill.fuera { background: var(--soft); color: var(--muted); margin-left: 8px; }
dt.sub { font: 600 .72rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.grupo { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 600 .98rem var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 8px 16px; min-height: 42px; cursor: pointer; transition: background .15s, transform .08s; }
.chip:hover { border-color: var(--wait); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--navy-ink); border-color: var(--navy); }
.chip small { font-weight: 400; opacity: .75; margin-left: 4px; font-variant-numeric: tabular-nums; }
.linea { display: flex; flex-wrap: wrap; gap: 10px; }
.linea input { flex: 1 1 240px; }
.conteo { color: var(--muted); margin: 10px 0 8px; }

/* Lista de empresas */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.empresa { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.empresa.abierta { border-color: var(--wait); }
.cab { min-width: 0; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 14px 16px; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.cab:hover { background: var(--soft); }
.cab h2 { font-size: 1.12rem; line-height: 1.25; overflow-wrap: anywhere; }
.cab .meta { color: var(--muted); font-size: .95rem; grid-column: 1; }
.cab .lado { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 10px; }
.flecha { font-size: 1.2rem; color: var(--muted); transition: transform .2s; }
.abierta .flecha { transform: rotate(90deg); }
.pill { display: inline-block; font-size: .85rem; font-weight: 600; border-radius: 99px; padding: 3px 11px; white-space: nowrap; }
.pill.fallida { background: var(--bad-soft); color: var(--bad); }
.pill.enviada { background: var(--sent-soft); color: var(--sent); }
.pill.pendiente { background: var(--wait-soft); color: var(--wait); }
.pill.sin_gestion { background: var(--none-soft); color: var(--none); }
.pill.notificada, .pill.nueva { background: var(--ok-soft); color: var(--ok); }
.detalle { border-top: 1px solid var(--line); padding: 14px 16px 16px; display: grid; gap: 14px; background: var(--soft); animation: abrir .18s ease-out; }
@keyframes abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .detalle { animation: none; } .btn, .chip, .cifra, .flecha, .ico, .relleno { transition: none; } .cifra:hover { transform: none; } }
.causa { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; }
.causa h3 { font-size: 1.02rem; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
.datos div { min-width: 0; }
.datos dt { font: 600 .72rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.datos dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.otras { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.otras li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.acciones .btn { flex: 1 1 200px; text-align: center; text-decoration: none; }
.vacio { text-align: center; color: var(--muted); padding: 40px 16px; background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; }
footer { color: var(--muted); font-size: .92rem; margin-top: 28px; max-width: 78ch; }
footer p { margin: 0 0 8px; }
.firma { margin-top: 16px; font-weight: 600; color: var(--ink); }
.tostada { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 99px; font-weight: 600; z-index: 10; max-width: calc(100vw - 32px); }
@media (max-width: 860px) {
  .tablero { grid-template-columns: minmax(0, 1fr); }
  .graficos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .datos .ancho2 { grid-column: auto; }
    .cab { grid-template-columns: minmax(0, 1fr); }
  .cab .lado { grid-row: auto; grid-column: 1; justify-content: space-between; }
  .linea select, .linea .btn { flex: 1 1 100%; }
}

/* Bloques laterales y tabla de resultados */
.bloque-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bloque-cab h2 { display: flex; align-items: center; gap: 8px; }
.ico-t { width: 20px; height: 20px; fill: var(--navy); stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; }
.enlace { font: 600 .92rem var(--body); color: var(--wait); background: none; border: 0; padding: 6px; cursor: pointer; border-radius: 6px; }
.enlace:hover { text-decoration: underline; }
.bloque.alerta { background: var(--wait-soft); border-color: transparent; }
.bloque.alerta .ico-t { fill: var(--wait); stroke: var(--wait); }
.bloque.alerta .btn { border-color: var(--wait); color: var(--wait); }
.bloque.alerta .btn.activa { background: var(--wait); color: #fff; }
.cab-lista h2 { font-size: 1.5rem; }
.cab-lista .conteo { margin: 2px 0 0; }
.cab-lista.sub { margin-top: 12px; }
.cab-lista.sub h3 { font-size: 1.02rem; color: var(--muted); }
.tabla-cab, .empresa { grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(96px, .6fr) minmax(0, 1fr) 110px 28px; }
.tabla-cab { display: grid; align-items: center; margin-top: 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px 10px 0 0; padding: 10px 0; font: 700 .74rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tabla-cab span { padding-inline: 8px; }
.lista { gap: 0; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; overflow: hidden; background: var(--surface); }
.empresa { display: grid; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; align-items: center; transition: background .12s; }
.empresa:last-child { border-bottom: 0; }
.empresa:hover { background: var(--soft); }
.empresa.abierta { background: var(--soft); box-shadow: inset 4px 0 0 var(--wait); }
.empresa.marcada { box-shadow: inset 4px 0 0 var(--gold); }
.cab { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; align-items: center; gap: 0; padding: 14px 0; }
.cab:hover { background: none; }
.cab > * { padding-inline: 8px; min-width: 0; }
.c-emp { display: flex; align-items: center; gap: 12px; }
.c-emp .ico { flex: none; width: 26px; height: 26px; color: var(--navy); }
.c-emp h2 { font: 700 .98rem/1.25 var(--display); overflow-wrap: anywhere; }
.c-emp small, .c-det small, .c-fecha small { display: block; color: var(--muted); font-size: .88rem; }
.c-det { font-size: .95rem; line-height: 1.4; }
.c-det b { font-weight: 600; }
.c-est { display: flex; flex-wrap: wrap; gap: 6px; }
.c-fecha { font-size: .95rem; font-variant-numeric: tabular-nums; }
.c-flecha { font-size: 1.4rem; color: var(--muted); transition: transform .2s; text-align: center; padding: 0 !important; }
.abierta .c-flecha { transform: rotate(90deg); }
.empresa > .detalle { grid-column: 1 / -1; }

/* Acerca de y contacto */
.info { margin-top: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 16px; }
.info h2 { font-size: 1.5rem; }
.info h3 { font-size: 1rem; margin-bottom: 4px; }
.info p { margin: 0; }
.info-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.info-cols p { color: var(--muted); }
.info.contacto { grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: linear-gradient(120deg, var(--barra-a), var(--barra-b)); color: #fff; border: 0; }
.info.contacto p { color: #c6d6ec; max-width: 60ch; margin-top: 6px; }
.contacto-dato { display: grid; gap: 6px; justify-items: start; }
.contacto-dato small { color: #a9bfdc; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
.contacto-dato a { color: #fff; font: 700 1.2rem var(--display); overflow-wrap: anywhere; }
.panel { scroll-margin-top: 90px; } .info { scroll-margin-top: 90px; }


@media (max-width: 1000px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) 110px; }
  .act-sitio.grande { grid-column: 1; grid-row: 2; }
  .mapa-caja { grid-row: 1 / span 2; grid-column: 2; width: 110px; } #mapa { width: 110px; height: 254px; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tabla-cab { grid-template-columns: 44px 1fr; } .tabla-cab span:not(:nth-child(2)) { display: none; }
  .empresa { grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
  .empresa > .elegir { padding-top: 16px; }
  .cab { grid-column: 2; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 8px 14px 0; }
  .c-flecha { display: none; }
  .info.contacto { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tope { position: static; }
  .menu-sitio { order: 3; width: 100%; margin: 0; overflow-x: auto; flex-wrap: nowrap; }
  .menu-sitio button { padding-inline: 12px; white-space: nowrap; }
  .logo small { display: none; }
  .cuenta { margin-left: auto; }
  .hero-in { grid-template-columns: minmax(0, 1fr); padding-block: 24px 16px; }
  .mapa-caja { display: none; }
  .cifras { grid-template-columns: minmax(0, 1fr); margin-top: -40px; }
}
@media (prefers-reduced-motion: reduce) { .act, .act *, .cifra, .disco, .empresa, .c-flecha { transition: none; } }

/* Páginas interiores, pie y diálogo */
.cab-pag { background: linear-gradient(120deg, var(--barra-a), var(--barra-b)); color: #fff; padding-block: 30px 34px; }
.cab-pag h1 { font: 800 clamp(1.7rem, 4vw, 2.5rem)/1.1 var(--display); }
.cab-pag .ceja { margin-bottom: 6px; }
.cuerpo > .panel:first-of-type, .cuerpo > .info { margin-top: 28px; }
.cuerpo { min-height: 46vh; }
.pie { background: var(--barra-a); color: #c6d6ec; text-align: center; padding: 22px 16px; font-size: .95rem; margin: 0; max-width: none; }
.pie p { margin: 0; }
.pie a { color: #fff; font-weight: 600; }
.dialogo { width: min(480px, calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.dialogo::backdrop { background: rgba(4, 12, 28, .6); }
.dialogo form, .dialogo #dlgListo { display: grid; gap: 12px; }
.dialogo h2 { font-size: 1.35rem; }
.dialogo p { margin: 0; color: var(--muted); }
.dialogo label { font-weight: 600; }
.dialogo textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; resize: vertical; }

/* Acerca de (al estilo de "Nosotros" de gestionadatos.cl) */
.ceja.dorada { color: var(--gold); }
#acerca { display: grid; gap: 44px; }
.nos-hero { position: relative; overflow: hidden; background: linear-gradient(140deg, var(--barra-a), #123264); color: #fff; padding-block: clamp(48px, 9vw, 110px); }
#redAcerca { position: absolute; inset: 0; width: 100%; height: 100%; }
.nos-hero .ancho { position: relative; }
.nos-hero h1 { font: 800 clamp(2rem, 5.4vw, 3.6rem)/1.08 var(--display); max-width: 18ch; }
.nos-hero p:not(.ceja) { color: #c6d6ec; max-width: 60ch; margin: 14px 0 0; font-size: 1.05rem; }
.nos-titulo { text-align: center; margin-bottom: 26px; }
.nos-titulo h2 { font: 800 clamp(1.7rem, 4vw, 2.5rem)/1.15 var(--display); }
.nos-titulo .suave { max-width: 70ch; margin: 12px auto 0; }
.camino { max-width: 900px; margin-inline: auto; display: grid; }
/* Cada paso entra deslizándose y luego su línea baja hasta conectar con el siguiente. */
.paso { display: flex; gap: 26px; padding-bottom: 40px; position: relative; opacity: 0; transform: translateX(-60px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .9, .3, 1.2); }
.paso:nth-child(even) { transform: translateX(60px); }
.paso.visto { opacity: 1; transform: none; }
.paso::before { content: ''; position: absolute; left: 31px; top: 64px; bottom: 0; width: 3px; background: linear-gradient(var(--gold), var(--s2)); transform: scaleY(0); transform-origin: top; transition: transform .9s ease .5s; }
.paso.visto::before { transform: scaleY(1); }
.paso:last-child::before { display: none; }
.punto { width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--barra-b); border: 4px solid var(--gold); display: grid; place-items: center; font-size: 28px; transform: scale(.3); transition: transform .6s cubic-bezier(.2, 1.6, .4, 1) .15s, box-shadow .3s; }
.paso.visto .punto { transform: scale(1); box-shadow: 0 0 0 8px rgba(224, 174, 74, .18); }
.paso-caja { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; box-shadow: 0 8px 22px rgba(7, 22, 48, .08); transition: transform .2s, box-shadow .2s; }
.paso-caja:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(7, 22, 48, .16); }
.paso-caja h3 { font: 800 clamp(1.2rem, 2.6vw, 1.6rem)/1.2 var(--display); margin-bottom: 8px; }
.paso-caja p { margin: 0; color: var(--muted); font-size: 1.08rem; }
@media (prefers-reduced-motion: reduce) { .paso, .paso::before, .punto { transition: none; opacity: 1; transform: none; } }
.centro-t { text-align: center; }
/* Contacto (al estilo de gestionadatos.cl): panel oscuro con datos + formulario claro */
.contacto-doble { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 150px); }
.contacto-izq { background: linear-gradient(160deg, var(--barra-a), #123264); color: #fff; padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 64px) clamp(32px, 6vw, 72px) max(16px, calc(50vw - 604px)); display: flex; flex-direction: column; justify-content: center; }
.contacto-izq h1 { font: 800 clamp(1.7rem, 3.6vw, 2.4rem)/1.12 var(--display); }
.contacto-izq .bajada { font-size: 1rem; }
.contacto-items { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 22px; }
.contacto-items li { display: flex; gap: 16px; align-items: flex-start; }
.contacto-items li > span { width: 48px; font-size: 30px; line-height: 1.1; text-align: center; flex: none; }
.contacto-items h4 { margin: 0 0 3px; font: 700 .78rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.contacto-items p { margin: 0; color: #d3e0f2; }
.contacto-items a { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.enlace.claro { color: #9fd0ff; }
.contacto-der { background: var(--surface); padding: clamp(32px, 6vw, 72px) max(16px, calc(50vw - 604px)) clamp(32px, 6vw, 72px) clamp(24px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.contacto-der h2 { font: 800 1.35rem var(--display); margin-bottom: 4px; }
.contacto-der form { display: grid; gap: 8px; margin-top: 20px; }
.contacto-der label { font-weight: 600; font-size: .95rem; margin-top: 6px; display: block; }
.contacto-der input, .contacto-der select, .contacto-der textarea { width: 100%; font: inherit; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; }
.contacto-der textarea { resize: vertical; }
.contacto-der .btn { margin-top: 12px; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.exito { color: var(--ok); background: var(--ok-soft); border-radius: 8px; padding: 10px 12px; margin: 6px 0 0; }
@media (max-width: 860px) {
  .contacto-doble { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .contacto-izq, .contacto-der { padding-inline: 16px; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .fila-2 { grid-template-columns: minmax(0, 1fr); }
}

.btn.salir { color: var(--bad); border-color: var(--bad); margin-top: 6px; }
.btn.salir:hover { background: var(--bad-soft); }

/* Franja de lado a lado dentro del contenedor centrado */
html, body { overflow-x: clip; }
.sangrado { width: 100vw; margin-left: calc(50% - 50vw); }
.cuerpo:has(> #contacto:not([hidden])) { padding-bottom: 0; }
#contacto.sangrado { margin-top: 0; }

/* Bloques laterales plegables */
details.bloque { display: block; }
details.bloque > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-radius: 6px; }
details.bloque > summary::-webkit-details-marker { display: none; }
details.bloque > summary::after { content: '▾'; color: var(--muted); font-size: 1.1rem; transition: transform .2s; }
details.bloque:not([open]) > summary::after { transform: rotate(-90deg); }
details.bloque > summary h2 { display: flex; align-items: center; gap: 8px; }
details.bloque > summary:hover h2 { color: var(--wait); }
details.bloque[open] > summary { margin-bottom: 10px; }
details.bloque > :not(summary) { margin-top: 8px; }
details.bloque > label { display: block; }
.frecuencia { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.frecuencia legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: 4px; }
.frecuencia label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; cursor: pointer; }
.frecuencia input { width: 18px; height: 18px; min-height: 0; accent-color: var(--wait); }
.costo { margin: 0; font-size: .92rem; color: var(--ink); background: var(--surface); border-radius: 8px; padding: 8px 10px; }

/* Al arrastrar una empresa, las listas crecen para apuntarles mejor; la que queda bajo el cursor, más. */
.lista-item span { transition: font-size .15s; }
.moviendo .lista-item { font-size: 1.14rem; padding-block: 13px; }
.moviendo .lista-item.sobre { font-size: 1.36rem; padding-block: 16px; }

/* Ficha de la causa en formato tabla */
.ficha { width: 100%; border-collapse: collapse; font-size: .98rem; }
.ficha caption { text-align: left; font: 800 1.05rem var(--display); padding-bottom: 10px; }
.ficha th, .ficha td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.ficha th[scope="row"] { width: 34%; font-weight: 600; color: var(--muted); background: var(--soft); border-right: 1px solid var(--line); }
.ficha .ficha-grupo th { background: var(--navy); color: #fff; font: 700 .74rem var(--display); letter-spacing: .1em; text-transform: uppercase; padding-block: 7px; }
.ficha td { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ficha-marco { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ficha tr:last-child th, .ficha tr:last-child td { border-bottom: 0; }
.ficha .otras { gap: 4px; }

/* Estadísticas: modos y donas */
.modos { display: flex; flex-wrap: wrap; gap: 8px; }
.dona-caja { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.dona { width: 170px; height: 170px; flex: none; }
.dona circle { fill: none; stroke-width: 22; transition: stroke-dasharray 3s cubic-bezier(.2, .8, .2, 1), stroke-dashoffset 3s cubic-bezier(.2, .8, .2, 1); }
.dona .fondo { stroke: var(--soft); }
.dona text { font: 800 26px var(--display); fill: var(--ink); text-anchor: middle; }
.dona text.sub { font: 400 11px var(--body); fill: var(--muted); }
.dona-leyenda { display: grid; gap: 8px; flex: 1 1 180px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.dona-leyenda li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.dona-leyenda i { width: 12px; height: 12px; border-radius: 3px; }
.dona-leyenda b { font-variant-numeric: tabular-nums; }
.c0 { background: var(--s0); stroke: var(--s0); } .c1 { background: var(--s1); stroke: var(--s1); } .c2 { background: var(--s2); stroke: var(--s2); } .c3 { background: var(--s3); stroke: var(--s3); } .c4 { background: var(--s4); stroke: var(--s4); }
.barra-h .relleno { transition: width 3s cubic-bezier(.2, .8, .2, 1), filter .15s; }
.col .seg { transition: height 3s cubic-bezier(.2, .8, .2, 1), filter .15s; }
@media (prefers-reduced-motion: reduce) { .dona circle, .barra-h .relleno, .col .seg { transition: none; } }

/* Planes y políticas */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.calc-lista { display: grid; gap: 8px; }
.reg { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.reg.elegida { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
.reg-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; }
.reg-cab input, .reg-trib input { width: 20px; height: 20px; min-height: 0; accent-color: var(--navy); }
.reg-cab label { font-weight: 700; font-family: var(--display); cursor: pointer; }
.reg-cab small { color: var(--muted); display: block; font-family: var(--body); font-weight: 400; }
.reg-precio { font: 800 1.05rem var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reg-trib { border-top: 1px solid var(--line); padding: 10px 14px 12px 46px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.reg-trib label { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.calc-total { position: sticky; top: 86px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: grid; gap: 10px; }
.calc-total h3 { font-size: 1.15rem; }
.calc-total dl { margin: 0; display: grid; gap: 8px; }
.calc-total dl div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.calc-total dt { color: var(--muted); }
.calc-total dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-alerta label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.calc-alerta input { width: 18px; height: 18px; min-height: 0; }
.calc-suma { border-top: 2px solid var(--line); padding-top: 10px; }
.calc-suma dd { font: 800 1.6rem var(--display); }
.calc-final { border-top: 1px solid var(--line); padding-top: 8px; } .calc-final dt, .calc-final dd { font-weight: 700; }
.calc-doc { margin: 6px 0 12px; font-size: .92rem; }
.aviso-iva { margin: 10px 0 0; padding: 10px 14px; border-left: 4px solid var(--gold, #e0ad4a); background: var(--soft); border-radius: 8px; }
.politicas-lista { max-width: 860px; margin-inline: auto; display: grid; gap: 10px; }
.politicas-lista details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; }
.politicas-lista summary { font: 700 1.05rem var(--display); cursor: pointer; }
.politicas-lista p { color: var(--muted); margin: 10px 0 0; }
#acerca { padding-bottom: 12px; }

/* Cabecera formal de la pantalla de entrada: marca y fuente de los datos */
.entrar-cab { width: 100vw; margin-inline: -16px; padding: 16px max(16px, calc(50vw - 560px)); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; background: rgba(4, 12, 28, .55); border-bottom: 1px solid rgba(255, 255, 255, .16); color: #fff; }
.fuente { display: flex; align-items: center; gap: 14px; max-width: 560px; border-left: 3px solid var(--gold); padding-left: 16px; }
.fuente svg { width: 46px; height: 46px; flex: none; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fuente p { margin: 0; display: grid; gap: 2px; font-size: .9rem; color: #c6d6ec; }
.fuente small { font: 700 .7rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.fuente b { color: #fff; font: 700 1rem/1.3 var(--display); }
.fuente a { color: #9fd0ff; font-weight: 600; justify-self: start; }
.fuente span { font-size: .84rem; }
@media (max-width: 640px) { .entrar-cab .logo small { display: block; } .fuente svg { width: 36px; height: 36px; } }

/* Logo en versión clara (maletín blanco, sin fondo) para las barras oscuras. La lente gira cada 30 s; al hacer clic se deshace y se rearma. */
.logo-radar { position: relative; display: block; flex: none; width: 56px; height: 56px; cursor: pointer; }
.logo-radar img { position: absolute; display: block; max-width: none; }
.lr-base { inset: 0; width: 100%; height: 100%; }
.lr-lente { left: 50.89%; top: 47.43%; width: 31.62%; height: auto; aspect-ratio: 1; animation: lr-buscar 30s ease-in-out infinite; }
@keyframes lr-buscar { 0%, 88% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.logo-radar.roto > img { visibility: hidden; }
.lr-trozo { position: absolute; background-image: url(img/logo_claro.png); background-repeat: no-repeat; pointer-events: none; will-change: transform, opacity; }
.fuente a { font: 700 1rem/1.3 var(--display); color: #fff; }
.fuente { max-width: 420px; }
.fuente svg { width: 38px; height: 38px; }
.pie-entrar a { display: block; border-radius: 8px; transition: transform .15s, filter .15s; }
.pie-entrar a:hover { transform: scale(1.05); filter: brightness(1.2); }
@media (prefers-reduced-motion: reduce) { .lr-lente { animation: none; } }

/* ---------- Portada pública ---------- */
.portada .menu-sitio a { font: 600 .98rem var(--body); color: #dbe6f5; text-decoration: none; border-radius: 8px; padding: 9px 16px; transition: background .15s; }
.portada .menu-sitio a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.portada-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.portada a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.p-hero { padding-bottom: 76px; }
.p-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding-block: 48px 20px; }
.p-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.p-muestra { background: rgba(255, 255, 255, .97); color: var(--barra-a); border-radius: 14px; padding: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.p-muestra-tit { margin: 0 0 8px; font: 700 .95rem var(--display); display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.p-muestra-tit span { font: 600 .7rem var(--display); letter-spacing: .08em; text-transform: uppercase; background: #fbf1d9; color: #7a5a10; border-radius: 99px; padding: 3px 10px; }
.p-muestra ul { list-style: none; margin: 0; padding: 0; display: grid; }
.p-muestra li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 4px; border-top: 1px solid #dde2ea; }
.p-muestra li b { display: block; font: 700 .92rem var(--display); }
.p-muestra li small { color: #5a6a80; font-size: .82rem; }
.p-muestra li em { font: 800 .92rem var(--display); font-style: normal; font-variant-numeric: tabular-nums; }
.p-cuerpo { padding-bottom: 0; display: grid; gap: 56px; }
.p-cifras { position: relative; z-index: 2; margin-top: -48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.p-cifras > div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: 0 8px 22px rgba(7, 22, 48, .1); display: grid; gap: 4px; }
.p-cifras b { font: 800 2.4rem/1 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.p-cifras span { color: var(--ink); font-size: .98rem; line-height: 1.3; }
.p-cifras small { color: var(--muted); }
.p-nota { margin: -44px 0 0; color: var(--muted); font-size: .88rem; text-align: center; }
.p-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.p-tres article { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 8px; align-content: start; transition: transform .2s, box-shadow .2s; }
.p-tres article:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(7, 22, 48, .14); }
.p-tres .ico { width: 38px; height: 38px; color: var(--wait); }
.p-tres h3 { font-size: 1.12rem; }
.p-tres p { margin: 0; color: var(--muted); }
.p-tres.usos article { border-left: 4px solid var(--gold); }
.p-precio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px, 4vw, 40px); }
.p-precio h2 { font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--display); margin-bottom: 8px; }
.p-precio dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.p-precio dl div { background: var(--soft); border-radius: 12px; padding: 16px; display: grid; gap: 2px; }
.p-precio dt { color: var(--muted); font-size: .9rem; }
.p-precio dd { margin: 0; font: 800 1.7rem var(--display); font-variant-numeric: tabular-nums; }
.p-precio small { color: var(--muted); }
.p-demo { border-radius: 14px; overflow: hidden; min-height: 0; margin-bottom: 56px; }
.p-demo .contacto-izq, .p-demo .contacto-der { padding: clamp(24px, 4vw, 48px); }
.p-demo h2 { font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--display); }
.pie-fuente { font-size: .82rem; opacity: .8; margin-top: 6px !important; }

/* ---------- Semáforo, conmutador y tablero ---------- */
.luz { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
.luz.verde { background: #1f9d55; } .luz.amarilla { background: #e0a100; } .luz.roja { background: #d64533; }
.semaforo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.semaforo .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 12px; font-size: .9rem; }
.semaforo > span { color: var(--muted); font-size: .9rem; }
.conmutador { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.conmutador button { font: 600 .95rem var(--body); color: var(--ink); background: var(--surface); border: 0; padding: 9px 14px; min-height: 44px; cursor: pointer; }
.conmutador button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.c-fecha .luz { margin-right: 6px; vertical-align: -1px; }
.monto { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.marcas { display: inline-flex; gap: 6px; margin-left: 6px; font-size: .9rem; }
.pill.tarea { background: var(--none-soft); color: var(--none); } .pill.vencida { background: var(--bad-soft); color: var(--bad); } .pill.seguida { background: var(--wait-soft); color: var(--wait); }
.kanban { display: flex; gap: 12px; overflow-x: auto; padding: 12px 2px 16px; align-items: flex-start; }
.k-col { flex: 0 0 270px; background: var(--soft); border: 2px solid transparent; border-radius: 12px; padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 160px; transition: border-color .15s, background .15s; }
.k-col.sobre { border-color: var(--gold); background: var(--none-soft); }
.k-col h3 { font-size: .95rem; display: flex; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.k-col h3 small { background: var(--surface); border-radius: 99px; padding: 0 9px; color: var(--muted); font-family: var(--body); }
.k-tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; cursor: grab; text-align: left; font: inherit; color: inherit; transition: transform .12s, box-shadow .12s; }
.k-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(7, 22, 48, .14); }
.k-tarjeta b { font: 700 .92rem/1.25 var(--display); overflow-wrap: anywhere; }
.k-tarjeta small { color: var(--muted); font-size: .84rem; }
.k-pie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.k-vacio { color: var(--muted); font-size: .88rem; text-align: center; padding: 18px 6px; border: 1px dashed var(--line); border-radius: 10px; }

/* ---------- Notas, seguimiento e historial en la ficha ---------- */
.notas { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; }
.notas h4 { margin: 0; font: 700 1rem var(--display); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.notas h4 small { font: 400 .84rem var(--body); color: var(--muted); }
.notas textarea, .notas input[type="text"], .notas input[type="date"] { font: inherit; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%; min-height: 0; }
.notas textarea { resize: vertical; }
.notas-fila { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 10px; align-items: center; }
.notas-fila label { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.notas-fila input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; }
.historia { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.historia li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; font-size: .94rem; }
.historia time { color: var(--muted); font-variant-numeric: tabular-nums; }
.historia li.nuevo { font-weight: 700; }
.origen { font-size: .8rem; color: var(--muted); font-weight: 400; margin-left: 8px; }

/* ---------- Informe para imprimir ---------- */
.informe { display: none; }
@media print {
  body.imprimiendo > *:not(#impMarco) { display: none !important; }
  .informe { display: block; color: #000; background: #fff; font: 11pt/1.4 var(--body); }
  .informe h1 { font: 800 18pt var(--display); margin: 0 0 2pt; }
  .informe .inf-sub { color: #444; margin: 0 0 12pt; font-size: 10pt; }
  .informe article { break-inside: avoid; border: 1px solid #999; border-radius: 4pt; padding: 8pt 10pt; margin-bottom: 8pt; }
  .informe h2 { font: 700 12pt var(--display); margin: 0 0 4pt; }
  .informe table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .informe th, .informe td { text-align: left; vertical-align: top; padding: 2pt 6pt 2pt 0; border-bottom: 1px solid #ddd; }
  .informe th { width: 26%; color: #444; font-weight: 600; }
  .informe .inf-pie { margin-top: 12pt; font-size: 8.5pt; color: #555; }

}
@media (max-width: 900px) {
  .p-hero-in, .p-precio { grid-template-columns: minmax(0, 1fr); }
  .p-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-tres, .p-precio dl { grid-template-columns: minmax(0, 1fr); }
  .notas-fila { grid-template-columns: minmax(0, 1fr); }
  .portada .menu-sitio { order: 3; width: 100%; margin: 0; }
}

/* Portada: Acerca de y Contacto a continuación de la portada inicial */
.portada .menu-sitio button { font: 600 .98rem var(--body); color: #dbe6f5; background: none; border: 0; border-radius: 8px; padding: 9px 16px; min-height: 42px; cursor: pointer; }
.portada .menu-sitio button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.p-cuerpo { gap: 0; }
.p-hero { padding-bottom: 48px; }
.portada #acerca { padding-bottom: 44px; }
.portada #contacto, .portada #acerca { scroll-margin-top: 78px; }

/* Portada por páginas: la opción activa del menú queda marcada y cada página ocupa al menos la pantalla */
.portada .menu-sitio button[aria-current="true"] { background: #1d4f8f; color: #fff; }
.portada { min-height: 100vh; display: flex; flex-direction: column; }
.portada .p-cuerpo { flex: 0 0 auto; display: block; }
.portada .p-hero[hidden] ~ .p-cuerpo { flex: 1; }
.portada .p-hero { flex: 1; display: grid; align-items: center; padding-bottom: 56px; }
.portada .p-hero[hidden] { display: none; }
.portada #acerca { padding-bottom: 56px; }

/* Precio como página propia */
#precios { padding-block: 44px 56px; }

/* Con sesión iniciada: mismas páginas públicas más las dos propias de la cuenta */
body:not(.con-sesion) .solo-sesion, body.con-sesion .solo-visita { display: none !important; }
.menu-sep { width: 1px; align-self: stretch; margin: 6px 8px; background: rgba(255, 255, 255, .25); }
.menu-sitio button.propio { color: var(--gold); }
.menu-sitio button.propio[aria-current="true"] { background: var(--gold); color: #1c1503; }
#panelPortada h1 b { font-size: .55em; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
#vistaApp > #inicioPortada { padding-bottom: 56px; min-height: calc(100vh - 150px); display: grid; align-items: center; }
#vistaApp > #inicioPortada[hidden] { display: none; }

/* ---------- Estadísticas: rediseño ---------- */
.panel.est { margin-top: 26px; gap: 16px; }
.est-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 24px; }
.est-cab h1 { font: 800 clamp(1.9rem, 4.6vw, 3rem)/1.05 var(--display); color: var(--ink); letter-spacing: -.01em; }
#panelNota { margin: 0; text-align: right; display: grid; gap: 2px; }
#panelNota b { font: 600 1.05rem var(--body); color: var(--ink); }
#panelNota span { color: var(--muted); font-size: .92rem; }
.est-barra { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.est-barra .modos .chip { min-height: 46px; padding: 10px 20px; font-size: 1rem; }
.est-barra .modos .chip[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--gold); }
.est-selects { display: flex; flex-wrap: wrap; gap: 10px; }
.est-selects select { min-width: 0; max-width: 100%; }
.est-acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.est-acciones .suave { font-size: .88rem; max-width: 30ch; text-align: right; }
.est-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--none-soft); border-radius: 10px; padding: 8px 12px; }
.est-filtros > span { font-weight: 600; color: var(--none); }
.est-pie { text-align: center; font-size: .9rem; }
.est .hallazgos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.est .hallazgo { grid-template-columns: auto minmax(0, 1fr); display: grid; gap: 14px; align-items: center; border-radius: 14px; padding: 16px 18px; box-shadow: 0 6px 18px rgba(7, 22, 48, .06); transition: transform .15s, box-shadow .15s, border-color .15s; cursor: help; }
.est .hallazgo:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(7, 22, 48, .14); border-color: var(--s2); }
.est .hallazgo > div { display: grid; gap: 2px; min-width: 0; }
.est .hallazgo .ico { width: 38px; height: 38px; color: var(--navy); }
.est .hallazgo b { font: 800 1.45rem/1.15 var(--display); }
.est .hallazgo.oscuro { background: linear-gradient(150deg, var(--barra-a), #17407a); border-color: transparent; color: #fff; }
.est .hallazgo.oscuro .ico { color: #fff; }
.est .hallazgo.oscuro small, .est .hallazgo.oscuro span { color: #c6d6ec; }
.est .hallazgo.oscuro b { font-size: 2rem; }
.est .grafico { border-radius: 14px; box-shadow: 0 6px 18px rgba(7, 22, 48, .06); transition: box-shadow .15s, border-color .15s; }
.est .grafico:hover { box-shadow: 0 14px 30px rgba(7, 22, 48, .12); }
.est .grafico.elegido { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 174, 74, .45); }
.g-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.g-cab h3 { font-size: 1.12rem; cursor: help; display: flex; align-items: center; gap: 8px; }
.g-info { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--muted); color: var(--muted); font: 700 .7rem var(--body); font-style: italic; }
.g-elegir { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.g-elegir input { width: 18px; height: 18px; min-height: 0; accent-color: var(--gold); }
.pulsable { cursor: pointer; transition: opacity .2s, filter .15s; }
.pulsable.apagado { opacity: .28; }
.barra-h.pulsable { border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.barra-h.pulsable:hover, .dona-leyenda li.pulsable:hover, .tabla-est tr.pulsable:hover { background: var(--soft); }
.barra-h.elegida .nombre, .dona-leyenda li.elegida span, .tabla-est tr.elegida td:first-child { font-weight: 700; }
.dona circle.pulsable:hover { filter: brightness(1.15); }
.dona circle.elegida { stroke-width: 28; }
.dona-leyenda li { border-radius: 6px; padding: 3px 6px; }
.col.pulsable:hover .seg { filter: brightness(1.2); }
.col.elegida { background: var(--wait-soft); border-radius: 6px 6px 0 0; }
.eje-y { position: relative; padding-left: 30px; }
.rejilla { position: absolute; left: 0; right: 0; bottom: 25px; height: 170px; pointer-events: none; }
.rejilla span { position: absolute; left: 0; right: 0; border-bottom: 1px dashed var(--line); font-size: .74rem; color: var(--muted); line-height: 0; font-variant-numeric: tabular-nums; }
.eje-y .columnas { position: relative; min-height: 215px; }
.tabla-est { overflow-x: auto; }
.tabla-est table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.tabla-est th { background: var(--soft); }
.tabla-est th, .tabla-est td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.tabla-est .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { #panelNota { text-align: left; } .est-acciones { margin-left: 0; justify-content: flex-start; } .est-acciones .suave { text-align: left; } }
@media print {
  body.imp-est .no-imp, body.imp-est .est-pie { display: none !important; }
  body.imp-est #estadisticas { display: grid !important; margin: 0; }
  body.imp-est.solo-elegidos .grafico:not(.elegido), body.imp-est.solo-elegidos .hallazgos { display: none !important; }
  body.imp-est .grafico, body.imp-est .hallazgo { break-inside: avoid; box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.imp-est .graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.imp-est .pulsable.apagado { opacity: .35; }
}

.est .hallazgos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.est .hallazgo b { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.est .hallazgo b.cifra-n { font-size: 1.9rem; }
.est .hallazgo b.cifra-t2 { font-size: 1.08rem; line-height: 1.25; }
.est .hallazgo.oscuro b.cifra-n { font-size: 2.3rem; }

/* Período en estadísticas, tarjeta de imprimir y preferencias de perfil */
.periodo { display: grid; gap: 2px; min-width: 210px; font-size: .92rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px 7px; }
.periodo b { color: var(--ink); }
.periodo input[type="range"] { width: 100%; min-height: 0; padding: 0; border: 0; accent-color: var(--navy); cursor: pointer; }
.est .hallazgo.accion { cursor: default; grid-template-columns: minmax(0, 1fr); border-style: dashed; background: var(--soft); }
.est .hallazgo.accion:hover { transform: none; box-shadow: none; border-color: var(--line); }
.est .hallazgo.accion .btn { width: 100%; }
.est .hallazgo.accion span { font-size: .86rem; }
html.letra-grande { font-size: 112.5%; }
body.filas-compactas .cab { padding-block: 7px; }
body.filas-compactas .c-emp h2 { font-size: .9rem; }
body.filas-compactas .c-det, body.filas-compactas .c-fecha { font-size: .86rem; }
.dialogo select, .dialogo input[type="text"] { width: 100%; }
.dialogo .fila-2 label { margin-top: 0; }
@media print { body.imp-est .hallazgo.accion { display: none !important; } }

/* Menú de la cuenta: si no cabe en la pantalla (letra grande, ventana baja), se desplaza por dentro. */
.menu { max-height: calc(100vh - 84px); overflow-y: auto; overscroll-behavior: contain; }

/* Estadísticas: tamaños de presentación. El contenido se escala; la barra de controles queda siempre igual. */
.est-escala { display: grid; gap: 16px; }
.est.gigante .est-escala { zoom: 2; }
.est.compacto .est-escala { zoom: .58; }
.est.compacto .hallazgos { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.est.compacto .hallazgo { grid-template-columns: minmax(0, 1fr); padding: 12px; }
.est.compacto .hallazgo .ico { display: none; }
.est.compacto .graficos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.est.compacto .grafico.ancho-total { grid-column: span 2; }
.est.compacto .dona-caja { flex-direction: column; align-items: stretch; }
.est.compacto .dona { align-self: center; }
.est.gigante .graficos, .est.gigante .hallazgos { grid-template-columns: minmax(0, 1fr); }
.conmutador.tamano button { min-height: 44px; }
@media (max-width: 900px) { .est.compacto .est-escala { zoom: .8; } .est.compacto .graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .est.compacto .hallazgos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .est.gigante .est-escala { zoom: 1.4; } }
@media print { .est .est-escala { zoom: 1 !important; } }

/* Barra superior: el botón de la cuenta queda siempre arriba a la derecha, también con letra grande o nombres largos. */
.cuenta { margin-left: auto; flex: none; }
.logo { flex: none; }
#btnCuenta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#btnCuenta #cuentaCorreo { display: inline-block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
#btnCuenta .cuenta-nombre { white-space: nowrap; }
@media (min-width: 901px) {
  #vistaApp .tope-in { flex-wrap: nowrap; gap: 14px; }
  #vistaApp .menu-sitio { flex: 1 1 auto; min-width: 0; margin-inline: 0; justify-content: center; }
  #vistaApp .menu-sitio button { padding-inline: 12px; }
}
@media (max-width: 1250px) { #vistaApp .logo small { display: none; } }
html.letra-grande #vistaApp .logo small { display: none; }
html.letra-grande #vistaApp .menu-sitio button { padding-inline: 9px; }
/* En pantallas angostas el menú pasa a una segunda fila completa y el botón de la cuenta se queda junto al logo, a la derecha. */
@media (max-width: 900px) { #vistaApp .menu-sitio { order: 3; width: 100%; margin: 0; } }

/* ---------- Marco de impresión: en cada hoja, logo arriba a la derecha, título centrado al pie y número de página ---------- */
@page {
  margin: 12mm 14mm 20mm;
  @bottom-center { content: "Informe de Radar Demandas Laborales"; font: 600 9pt "Source Sans 3", Arial, sans-serif; color: #444; }
  @bottom-right { content: "Página " counter(page) " de " counter(pages); font: 9pt "Source Sans 3", Arial, sans-serif; color: #444; }
}
@page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media print { html, body { background: #fff !important; } html { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- Inicio: vitrina con dos capturas de las estadísticas, puestas como fotos sobre una mesa ---------- */
.vitrina { background: linear-gradient(180deg, var(--bg), var(--soft)); padding-block: 56px 0; overflow: hidden; }
.vitrina-in { display: grid; gap: 8px; justify-items: center; }
.vitrina-texto { position: relative; z-index: 3; text-align: center; max-width: 780px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 28px; box-shadow: 0 18px 40px rgba(7, 22, 48, .16); margin-bottom: -46px; }
.vitrina-texto h2 { font: 800 clamp(1.4rem, 3.2vw, 2.1rem)/1.15 var(--display); margin: 4px 0 10px; }
.vitrina-texto p:not(.ceja) { margin: 0; color: var(--muted); }
.vitrina-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: center; width: 100%; max-width: 1180px; }
.foto { margin: 0; border-radius: 22px; overflow: hidden; background: var(--surface); border: 8px solid var(--surface); box-shadow: 0 26px 60px rgba(7, 22, 48, .28); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), box-shadow .35s; }
.foto img { display: block; width: 100%; height: auto; border-radius: 14px; }
.foto.f1 { transform: rotate(-4deg) translate(18px, 10px); z-index: 1; }
.foto.f2 { transform: rotate(3.5deg) translate(-18px, 34px); z-index: 2; }
/* La tercera va al centro, montada sobre las otras dos, y su borde inferior toca el pie de la página. */
.foto.f3 { grid-column: 1 / -1; justify-self: center; width: min(68%, 800px); margin-top: -34px; z-index: 3; border-bottom: 0; border-radius: 22px 22px 0 0; transform-origin: 50% 100%; }
.foto.f3 img { border-radius: 14px 14px 0 0; }
.foto.f3:hover { transform: scale(1.03); }
.foto:hover { transform: rotate(0) scale(1.04); z-index: 4; box-shadow: 0 34px 80px rgba(7, 22, 48, .4); }
.portada .p-hero { flex: 0 0 auto; min-height: min(78vh, 720px); }
.portada .vitrina[hidden] { display: none; }
#vistaApp > #inicioPortada { min-height: min(78vh, 720px); }
@media (max-width: 760px) {
  .vitrina-fotos { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .foto.f1 { transform: rotate(-2.5deg); } .foto.f2 { transform: rotate(2.5deg); }
  .foto.f3 { width: 100%; margin-top: 0; }
  .vitrina-texto { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .foto { transition: none; } }

/* Marco de impresión: mientras se imprime, cubre la pantalla con lo que saldrá en papel; en la hoja, el logo
   va en el encabezado de una tabla, que el navegador repite arriba de cada página. */
.imp-marco { display: none; }
body.imprimiendo .imp-marco { display: block; position: fixed; inset: 0; z-index: 200; overflow: auto; background: var(--bg); padding: 16px; }
.imp-marco table { width: 100%; border-collapse: collapse; }
.imp-marco thead td { text-align: right; padding: 0 0 4mm; }
.imp-marco thead img { width: 15mm; height: 15mm; }
.imp-marco td { padding: 0; }
body.imprimiendo .imp-marco .informe { display: block; }
@media print {
  body.imprimiendo .imp-marco { position: static; overflow: visible; padding: 0; background: #fff; }
  .imp-marco thead { display: table-header-group; }
}
/* Con sesión, en Inicio no queda nada bajo la vitrina: sin relleno, la tercera foto toca el pie. */
#vistaApp > .vitrina:not([hidden]) ~ main { padding-block: 0; min-height: 0; }

/* Estadísticas de montos demandados */
.barra-h .s3 { background: var(--s3); } .barra-h .s4 { background: var(--s4); }
.barras.montos .barra-h .valor { min-width: 7ch; }

/* Listado de tribunales desplegable: las causas del tribunal abierto van debajo de su fila, en cuadros */
.acordeon tr.trib { cursor: pointer; }
.acordeon tr.trib:hover, .acordeon tr.trib.abierto { background: var(--soft); }
.acordeon tr.trib.abierto td:first-child { font-weight: 700; }
.acordeon .flecha { display: inline-block; width: 18px; font-weight: 700; color: var(--accent); transition: transform .2s; }
.acordeon tr.abierto .flecha { transform: rotate(90deg); }
.acordeon tr.trib-causas > td { padding: 14px 10px 20px; background: var(--soft); }
.cuadros { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cuadro { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--s0); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.cuadro.sit-pendiente { border-left-color: var(--s1); } .cuadro.sit-notificada { border-left-color: var(--s2); }
.cuadro header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cuadro .rol { font: 800 1.05rem var(--display); }
.cuadro-emp { margin: 0; font-weight: 600; line-height: 1.3; } .cuadro-emp span { display: block; } .cuadro-emp .suave { font-weight: 400; color: var(--muted); }
.cuadro dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.cuadro dl div:first-child { grid-column: 1 / -1; }
.cuadro dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .cuadro dd { margin: 0; font-size: .93rem; }
.pill.sit-pendiente { background: #fbefd5; color: #7a4f00; } .pill.sit-notificada { background: #e3ecf9; color: #1d4f91; }
.cuadro .pill:not(.sit-pendiente):not(.sit-notificada) { background: var(--soft); color: var(--muted); }
@media print { .cuadro { break-inside: avoid; } }

/* Mi panel: columna con el monto demandado */
.tabla-cab .num, .c-monto { text-align: right; }
.c-monto { font-size: .98rem; } .c-monto small { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; }
.c-monto.sin-monto { color: var(--muted); }
@media (max-width: 900px) { .c-monto { text-align: left; } .c-monto.sin-monto { display: none; } .c-monto .monto::before { content: "Monto demandado: "; font-weight: 400; } .c-monto small { display: inline; margin-left: 6px; } }

/* Portada pública: el mismo mapa de Mi panel (mismo velo azul), más grande, en lugar de la lista de ejemplo */
.mapa-caja.mapa-pub { width: 215px; }
#mapaPub { position: relative; display: block; width: 215px; height: 497px; cursor: pointer; }
/* Al elegir una región: su nombre y la pregunta de ir a ver el precio. */
.mapa-pregunta { position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%); width: 250px; background: #fff; color: var(--barra-a); border-radius: 14px; padding: 16px 18px; box-shadow: 0 18px 44px rgba(0, 0, 0, .4); display: grid; gap: 4px; z-index: 5; }
.mapa-pregunta[hidden] { display: none; }
.mapa-pregunta b { font: 800 1.25rem var(--display); padding-right: 24px; }
.mapa-pregunta small { color: #5a6a80; }
.mapa-pregunta p { margin: 6px 0 10px; }
.mapa-pregunta .cerrar { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; background: none; color: #5a6a80; font-size: 1rem; cursor: pointer; border-radius: 50%; }
.mapa-pregunta .cerrar:hover { background: #eef1f6; }
.reg.destacada { box-shadow: 0 0 0 3px var(--gold); transition: box-shadow .3s; }
@media (max-width: 900px) { .mapa-caja.mapa-pub { display: block; grid-column: auto; grid-row: auto; justify-self: center; margin-right: 0; width: 150px; } #mapaPub { width: 150px; height: 347px; } .mapa-pub::before { display: none; } .mapa-pub .mapa-rotulo { display: none; } .mapa-pregunta { right: auto; left: 50%; transform: translate(-50%, -50%); width: min(280px, 86vw); } }

/* Mi panel: detalle de la última actualización, bajo las cifras */
.act-detalle { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 14px; padding: 16px 20px; box-shadow: 0 6px 18px rgba(7, 22, 48, .06); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end; justify-content: space-between; }
.act-detalle[hidden] { display: none; }
.act-detalle dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 28px; flex: 1 1 520px; }
.act-detalle dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.act-detalle dd { margin: 2px 0 0; font-weight: 600; }
.cifra[aria-expanded="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }

/* ====================================================================================
   CELULAR: la página se comporta como una aplicación.
   Barra superior fija de una sola fila (sin logo), contenido a todo el ancho, tamaños que
   se adaptan al ancho del teléfono y respeto de las zonas seguras (muesca y barra inferior).
   ==================================================================================== */
.cuenta-ico { display: none; }
.plan-barra { display: none; }
@media (max-width: 760px) {
  /* El tamaño base sigue al ancho del teléfono: en uno angosto todo se achica un poco, en uno grande crece. */
  html { font-size: clamp(14.5px, 4.1vw, 17.5px); -webkit-text-size-adjust: 100%; }
  html.letra-grande { font-size: clamp(16.5px, 4.7vw, 20px); }
  body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
  .ancho { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  /* Los campos de al menos 16 px evitan que iPhone amplíe la pantalla al escribir. */
  input, select, textarea { font-size: max(16px, 1rem); }

  /* ---- Barra superior: siempre arriba, una fila, sin logo ---- */
  .tope { position: sticky; top: 0; z-index: 60; padding-top: env(safe-area-inset-top); box-shadow: 0 4px 14px rgba(0, 0, 0, .28); }
  .tope-in { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding-block: 6px; min-height: 0; }
  .tope .logo { display: none; }
  .tope .menu-sitio, #vistaApp .menu-sitio { order: 0; width: auto; flex: 1 1 auto; min-width: 0; margin: 0; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .tope .menu-sitio::-webkit-scrollbar { display: none; }
  .tope .menu-sitio button { flex: none; padding: 8px 10px; min-height: 40px; font-size: .9rem; white-space: nowrap; scroll-snap-align: center; border-radius: 999px; }
  .tope .menu-sep { flex: none; width: 1px; height: 20px; background: rgba(255, 255, 255, .25); margin-inline: 2px; }
  .portada-acciones { flex: none; display: flex; gap: 6px; margin: 0; }
  .portada-acciones [data-demo] { display: none; }
  .portada-acciones .btn { padding: 8px 14px; min-height: 40px; font-size: .9rem; }
  .cuenta { flex: none; margin-left: 0; position: static; }
  #btnCuenta { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
  #btnCuenta .cuenta-ico { display: block; width: 20px; height: 20px; }
  #btnCuenta .cuenta-nombre { display: none; }
  /* El menú de la cuenta se abre como una hoja bajo la barra, a todo el ancho. */
  .cuenta .menu { position: fixed; left: 8px; right: 8px; top: calc(54px + env(safe-area-inset-top)); width: auto; max-width: none; max-height: calc(100dvh - 70px - env(safe-area-inset-top)); overflow-y: auto; border-radius: 16px; }

  /* ---- Portadas más compactas ---- */
  .hero { padding-bottom: 28px; }
  .hero h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .portada .p-hero, #vistaApp > #inicioPortada { min-height: 0; }
  .p-hero-in { padding-block: 26px 8px; gap: 18px; }
  .p-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .p-cta .btn { width: 100%; padding-inline: 8px; }
  #panelPortada .bajada { display: none; }
  #panelPortada { padding-bottom: 40px; }

  /* ---- Mi panel: cifras en dos columnas, resultados antes que los bloques secundarios ---- */
  .cuerpo { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: -30px; }
  .cifra { padding: 12px; gap: 10px; border-radius: 14px; flex-direction: column; align-items: flex-start; }
  .cifra .disco { width: 34px; height: 34px; }
  .cifra .disco .ico { width: 18px; height: 18px; }
  .cifra b { font-size: 1.55rem; }
  .cifra-t > span:first-child, .cifra small { font-size: .8rem; line-height: 1.25; }
  .act-detalle dl { grid-template-columns: 1fr; }
  .tablero { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
  .lateral { display: contents; }
  #blqFiltros { order: 1; }
  .principal { order: 2; }
  #blqListas { order: 3; } #blqAlertas { order: 4; } #blqDescargar { order: 5; }
  .bloque { border-radius: 14px; }
  .cab-lista { gap: 8px; }
  .cab-lista h2 { font-size: 1.25rem; }
  .semaforo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .semaforo::-webkit-scrollbar { display: none; }
  .semaforo > * { flex: none; }
  .empresa { border-radius: 14px; }
  .causa .ficha-marco { overflow-x: auto; }
  .causa table th[scope="row"] { width: 38%; }
  .kanban { grid-auto-flow: column; grid-auto-columns: 82vw; overflow-x: auto; scroll-snap-type: x mandatory; }
  .kanban > * { scroll-snap-align: start; }

  /* ---- Estadísticas ---- */
  .est-cab h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .est .hallazgos, .est.compacto .hallazgos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .est .hallazgo { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; border-radius: 14px; }
  .est .hallazgo .ico { width: 22px; height: 22px; }
  .est .hallazgo.oscuro, .est .hallazgo.accion { grid-column: 1 / -1; }
  .est .graficos, .est.compacto .graficos { grid-template-columns: minmax(0, 1fr); }
  .grafico { border-radius: 14px; padding: 14px; }
  .barra-h { grid-template-columns: minmax(84px, 40%) minmax(0, 1fr) auto; gap: 8px; font-size: .88rem; }
  .dona-caja { grid-template-columns: 1fr; justify-items: center; }
  .eje-y { overflow-x: auto; }
  .tabla-est { overflow-x: auto; }
  .acordeon th:nth-child(2), .acordeon tr.trib td:nth-child(2) { display: none; }
  .cuadros { grid-template-columns: minmax(0, 1fr); }
  .est-filtros select, .est-filtros .conmutador, .est-periodo { width: 100%; }

  /* ---- Precio: "Tu plan" deja de flotar; va después de las regiones y una barra abajo resume la selección ---- */
  .calc { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .calc-total { position: static; top: auto; border-radius: 14px; }
  .reg { border-radius: 14px; }
  .reg-cab { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px; }
  .reg-cab label { font-size: 1.02rem; }
  .reg-cab small { font-size: .82rem; }
  .reg-cab .reg-precio { grid-column: 3; grid-row: 1; font-size: 1rem; }
  .reg-cab .enlace { grid-column: 2 / -1; grid-row: 2; justify-self: start; padding: 4px 0; min-height: 32px; }
  .reg-trib { grid-template-columns: minmax(0, 1fr); padding: 4px 12px 12px; }
  .reg-trib label { padding-block: 6px; }
  .plan-barra { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: var(--barra-a); color: #fff; box-shadow: 0 -6px 18px rgba(0, 0, 0, .3); }
  .plan-barra b { display: block; font: 800 1.05rem var(--display); } .plan-barra small { color: #c7d4e8; font-size: .85rem; }
  .plan-barra .btn { flex: none; min-height: 42px; }
  body.con-plan.en-precio .precios { padding-bottom: 84px; }

  /* ---- Otros ---- */
  .vitrina { padding-top: 34px; }
  .vitrina-texto { padding: 16px 18px; border-radius: 16px; }
  .entrar-tarjeta, .tarjeta-entrar { border-radius: 18px; }
  dialog, .dialogo { width: calc(100vw - 20px); max-width: none; border-radius: 18px; }
  .tostada { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .pie { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}
/* Instalada en la pantalla de inicio se ve sin la barra del navegador: se reserva el espacio de la hora y la batería. */
@media (display-mode: standalone) { .tope { padding-top: env(safe-area-inset-top); } }
@media (max-width: 760px) {
  /* Todas las opciones caben en una fila: el texto se ajusta al ancho del teléfono (y si aun así no cabe, la fila se desliza). */
  .tope .menu-sitio button { padding: 8px clamp(5px, 1.9vw, 10px); font-size: clamp(.7rem, 3.25vw, .9rem); }
  /* Con sesión son cinco opciones más el botón de la cuenta: letra y márgenes un poco más ajustados. */
  #vistaApp .tope-in { padding-inline: 8px; }
  #vistaApp .tope .menu-sitio { gap: 0; justify-content: space-between; }
  #vistaApp .tope .menu-sitio button { padding: 8px clamp(3px, 1.1vw, 8px); font-size: clamp(.62rem, 2.95vw, .86rem); letter-spacing: -.01em; }
  #btnCuenta { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  #vistaApp .tope .menu-sep { display: none; }
  #vistaApp .tope-in { gap: 4px; }
  .tablero > .lateral > .bloque, .tablero .bloque { width: 100%; }
}
@media (max-width: 760px) {
  /* Cada bloque de Mi panel ocupa justo el ancho del teléfono. */
  .tablero { align-items: stretch; }
  .principal { width: 100%; min-width: 0; max-width: 100%; }
  .cab-lista > * { min-width: 0; max-width: 100%; }
  .cab-lista select { max-width: 100%; min-width: 0; }
  .orden-caja, .cab-lista .orden { flex-wrap: wrap; }
}

/* Mi panel: una fila por causa, sin casillas de selección */
.tabla-cab, .empresa { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(96px, .6fr) minmax(0, 1fr) 110px 28px; }
.tabla-cab > span:first-child, .empresa .c-emp { padding-left: 16px; }
/* Sin la columna de casillas, la fila ocupa las seis columnas completas. */
.cab { grid-column: 1 / -1; }
.alerta-otras { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--bad-soft, #fbe6e3); color: var(--bad, #a3261a); border: 1px solid currentColor; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.alerta-otras span { font-weight: 600; text-decoration: underline; }
.alerta-otras:hover { filter: brightness(.97); }
.filtro-empresa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 10px 0 0; padding: 10px 14px; background: var(--bad-soft, #fbe6e3); color: var(--bad, #a3261a); border-radius: 10px; font-weight: 600; }
@media (max-width: 860px) {
  .tabla-cab { grid-template-columns: 1fr; } .tabla-cab > span { display: none; } .tabla-cab > span:first-child { display: block; }
  .empresa { grid-template-columns: minmax(0, 1fr); }
  .cab { grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; }
  .empresa .c-emp { padding-left: 0; }
}

/* Estadísticas: regiones que se despliegan en sus tribunales */
.acordeon tr.reg-fila { cursor: pointer; background: var(--soft); font-weight: 700; }
.acordeon tr.reg-fila td:first-child { font-family: var(--display); font-size: 1.02rem; }
.acordeon tr.reg-fila small { font: 400 .85rem var(--body); color: var(--muted); margin-left: 10px; }
.acordeon tr.reg-fila:hover { filter: brightness(.97); }
.acordeon tr.reg-fila.abierto { background: var(--navy); color: #fff; } .acordeon tr.reg-fila.abierto small { color: #c7d4e8; } .acordeon tr.reg-fila.abierto .flecha { color: var(--gold); }
.acordeon tr.trib td:first-child { padding-left: 34px; }
@media (max-width: 760px) { .acordeon th:nth-child(2), .acordeon tr.trib td:nth-child(2), .acordeon tr.reg-fila td:nth-child(2) { display: table-cell; } .acordeon tr.reg-fila small { display: block; margin-left: 18px; } .acordeon tr.trib td:first-child { padding-left: 22px; } }

/* ====================================================================================
   MI PANEL: puerta de entrada y "programa" de archivos (planilla)
   ==================================================================================== */
/* Antes de entrar, Mi panel muestra solo el resumen y la puerta. */
body:not(.archivos) #vistaApp .tablero { display: none; }
.puerta { margin-top: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 22px; align-items: center; background: linear-gradient(120deg, var(--barra-a), var(--barra-b)); color: #fff; border-radius: 18px; padding: clamp(18px, 3vw, 30px); box-shadow: 0 14px 34px rgba(7, 22, 48, .22); }
.puerta[hidden] { display: none; }
.puerta .ceja { color: var(--gold); margin: 0 0 4px; }
.puerta h2 { font: 800 clamp(1.3rem, 2.6vw, 1.8rem)/1.15 var(--display); margin: 0 0 6px; color: #fff; }
.puerta .suave { color: #c7d4e8; margin: 0; max-width: 62ch; }
.puerta-ico { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; }
.puerta-ico .ico { width: 30px; height: 30px; stroke: var(--gold); }
/* Pantalla de carga: la lupa del logo girando al centro. */
.cargando { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(7, 22, 48, .82); color: #fff; animation: aparecer .3s ease both; }
.cargando[hidden] { display: none; }
.cargando-in { display: grid; justify-items: center; gap: 10px; text-align: center; }
.cargando-in b { font: 800 1.3rem var(--display); } .cargando-in small { color: #c7d4e8; min-height: 1.4em; }
.cargando-lupa { width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 3px solid rgba(255, 255, 255, .16); border-top-color: var(--gold); animation: girar 1s linear infinite; margin-bottom: 6px; }
.cargando-lupa img { width: 62px; height: 62px; animation: girar 1s linear infinite reverse; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes aparecer { from { opacity: 0; } }
/* Al confirmar, el resumen se va hacia arriba y se desvanece. */
#panelPortada, #vistaApp .cifras, .puerta { transition: opacity .7s ease, transform .7s ease, filter .7s ease; }
body.abriendo #panelPortada, body.abriendo #vistaApp .cifras, body.abriendo .puerta { opacity: 0; transform: translateY(-40px) scale(.98); filter: blur(2px); pointer-events: none; }

/* ---- Dentro de los archivos: solo la barra superior y el programa, sobre fondo gris ---- */
body.archivos { background: #d9dde3; }
:root[data-tema="oscuro"] body.archivos { background: #0f1319; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) body.archivos { background: #0f1319; } }
body.archivos #panelPortada, body.archivos #vistaApp .cifras, body.archivos .puerta, body.archivos #vistaApp > .pie, body.archivos #vistaApp footer { display: none !important; }
body.archivos #vistaApp .cuerpo { max-width: none; padding: 0; min-height: 0; }
body.archivos .tablero { display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; margin: 0; height: calc(100dvh - var(--alto-tope, 82px)); align-items: stretch; animation: aparecer .5s ease both; }
body.archivos .herramientas { grid-column: 1 / -1; }
body.archivos .lateral { overflow-y: auto; padding: 10px; gap: 10px; background: #eceff3; border-right: 1px solid #b9c0ca; align-content: start; }
body.archivos .principal { overflow: hidden; display: flex; flex-direction: column; min-height: 0; padding: 10px 12px 0; }
body.archivos .barra-estado { grid-column: 1 / -1; }
body.archivos .bloque { border-radius: 6px; box-shadow: none; }
body.archivos .cab-lista { flex: none; }
body.archivos .cab-lista h2 { font-size: 1.05rem; }
body.archivos .semaforo, body.archivos .filtro-empresa, body.archivos #barraLista, body.archivos #formRenombrar, body.archivos .formula { flex: none; }
body.archivos #lista, body.archivos #kanban { overflow: auto; flex: 1 1 auto; min-height: 0; }
body.archivos .tabla-cab { flex: none; }
body:not(.archivos) .herramientas, body:not(.archivos) .barra-estado { display: none; }
:root[data-tema="oscuro"] body.archivos .lateral { background: #171c24; border-color: #2a323e; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) body.archivos .lateral { background: #171c24; border-color: #2a323e; } }

/* Barra de herramientas */
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 10px; background: var(--surface); border-bottom: 1px solid #b9c0ca; }
.h-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 .86rem var(--body); color: var(--ink); background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px 10px; min-height: 34px; cursor: pointer; }
.h-btn .ico { width: 18px; height: 18px; }
.h-btn:hover { background: var(--soft); border-color: var(--line); }
.h-btn.h-principal { background: var(--navy); color: #fff; }
.h-btn.h-principal:hover { background: var(--navy); filter: brightness(1.15); }
.h-btn.h-principal.pendiente { background: #1f7a44; box-shadow: 0 0 0 2px rgba(31, 122, 68, .28); }
.h-btn:disabled { opacity: .6; cursor: progress; }
.h-sep { width: 1px; height: 22px; background: var(--line); margin-inline: 4px; }
.h-titulo { margin-left: auto; color: var(--muted); font-size: .86rem; padding-right: 4px; } .h-titulo b { color: var(--ink); }
.h-menu { position: relative; }
.h-lista { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: 250px; max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 34px rgba(7, 22, 48, .22); padding: 8px; display: grid; gap: 2px; }
.h-lista[hidden] { display: none; }
.h-lista label { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; font-size: .9rem; cursor: pointer; } .h-lista label:hover { background: var(--soft); }
.h-lista input { width: 16px; height: 16px; min-height: 0; }

/* Barra de fórmulas y planilla */
.formula { display: flex; align-items: center; gap: 0; margin-top: 8px; background: var(--surface); border: 1px solid #b9c0ca; border-bottom: 0; font-size: .86rem; }
.formula[hidden], .planilla[hidden] { display: none; }
.f-celda { flex: none; width: 74px; text-align: center; padding: 5px 6px; font-weight: 700; border-right: 1px solid #b9c0ca; font-variant-numeric: tabular-nums; }
.f-fx { flex: none; padding: 5px 10px; color: var(--muted); font-style: italic; border-right: 1px solid #b9c0ca; }
.f-valor { flex: 1; min-width: 0; padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planilla { flex: 1 1 auto; min-height: 220px; overflow: auto; background: var(--surface); border: 1px solid #b9c0ca; outline: none; }
.hoja { border-collapse: separate; border-spacing: 0; font: 400 13px/1.3 var(--body); width: max-content; min-width: 100%; }
.hoja th, .hoja td { border-right: 1px solid #d3d8df; border-bottom: 1px solid #d3d8df; padding: 4px 8px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; text-align: left; height: 28px; }
.hoja thead th { position: sticky; z-index: 3; background: #e9ecf0; color: #3b4656; font-weight: 600; }
.hoja thead tr.letras th { top: 0; text-align: center; font-size: 11px; height: 20px; padding-block: 1px; color: #6b7686; }
.hoja thead tr.titulos th { top: 20px; cursor: pointer; user-select: none; border-bottom: 2px solid #9aa4b2; }
.hoja thead tr.titulos th:hover { background: #dfe4ea; }
.hoja thead th.orden { background: #d5e6d9; color: #17633a; }
.hoja .flechita { margin-left: 6px; font-size: 9px; color: #8a94a3; } .hoja th.orden .flechita { color: #17633a; }
.hoja .esquina, .hoja .nfila { position: sticky; left: 0; z-index: 2; width: 44px; min-width: 44px; text-align: center; background: #e9ecf0; color: #6b7686; font-weight: 400; font-size: 11px; }
.hoja thead .esquina { z-index: 5; }
.hoja .nfila { cursor: pointer; } .hoja .nfila:hover { background: #cfe0d4; color: #17633a; font-weight: 700; }
.hoja td.fija { position: sticky; left: 44px; z-index: 1; background: var(--surface); font-weight: 600; border-right: 2px solid #9aa4b2; }
.hoja thead tr.titulos th:nth-child(2), .hoja thead tr.letras th:nth-child(2) { position: sticky; left: 44px; z-index: 4; border-right: 2px solid #9aa4b2; }
.hoja td.num, .hoja th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hoja tbody tr:nth-child(even) td { background: #f7f8fa; } .hoja tbody tr:nth-child(even) td.fija { background: #f7f8fa; }
.hoja tbody tr:hover td { background: #eef4ff; } .hoja tbody tr:hover td.fija { background: #eef4ff; }
.hoja tr.fila-sel td, .hoja tr.fila-sel td.fija { background: #e3f0e6; } .hoja tr.fila-sel .nfila { background: #1f7a44; color: #fff; font-weight: 700; }
.hoja td.sel { outline: 2px solid #1f7a44; outline-offset: -2px; }
.hoja tr.sucia .nfila { box-shadow: inset 4px 0 0 #d08a00; }
.hoja td.edita { padding: 0; }
.hoja td.edita input, .hoja td.edita select { width: 100%; min-height: 0; height: 27px; border: 0; border-radius: 0; background: transparent; font: inherit; padding: 2px 8px; color: inherit; }
.hoja td.edita input:focus, .hoja td.edita select:focus { outline: 2px solid #1f7a44; outline-offset: -2px; background: #fff; }
.hoja .pill { font-size: 11.5px; padding: 1px 8px; }
:root[data-tema="oscuro"] .hoja thead th, :root[data-tema="oscuro"] .hoja .esquina, :root[data-tema="oscuro"] .hoja .nfila { background: #1c222b; color: #aab4c2; }
:root[data-tema="oscuro"] .hoja th, :root[data-tema="oscuro"] .hoja td { border-color: #2a323e; }
:root[data-tema="oscuro"] .hoja tbody tr:nth-child(even) td, :root[data-tema="oscuro"] .hoja tbody tr:nth-child(even) td.fija { background: #161b22; }
:root[data-tema="oscuro"] .hoja tbody tr:hover td, :root[data-tema="oscuro"] .hoja tbody tr:hover td.fija, :root[data-tema="oscuro"] .hoja tr.fila-sel td { background: #1d2a3a; }

/* Barra de estado */
.barra-estado { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; padding: 5px 12px; background: #1f7a44; color: #fff; font-size: .82rem; }
.barra-estado b { font-weight: 700; } .barra-estado .e-fin { margin-left: auto; opacity: .9; }

/* Ficha lateral */
.cajon { position: fixed; z-index: 70; top: var(--alto-tope, 82px); right: 0; bottom: 0; width: min(640px, 100vw); background: var(--bg); border-left: 1px solid #9aa4b2; box-shadow: -18px 0 40px rgba(7, 22, 48, .25); display: flex; flex-direction: column; animation: entrar-cajon .25s ease both; }
.cajon[hidden] { display: none; }
.cajon header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--navy); color: #fff; } .cajon header b { font: 700 1rem var(--display); overflow-wrap: anywhere; } .cajon header .h-btn { color: #fff; }
#cajonCuerpo { overflow-y: auto; padding: 14px; flex: 1; }
@keyframes entrar-cajon { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cargando-lupa, .cargando-lupa img, .cajon, .cargando { animation: none; } #panelPortada, #vistaApp .cifras, .puerta { transition: none; } }

/* Celular */
@media (max-width: 760px) {
  .puerta { grid-template-columns: minmax(0, 1fr); justify-items: start; margin-top: 14px; }
  .puerta .btn { width: 100%; }
  .puerta-ico { width: 48px; height: 48px; }
  body.archivos .tablero { display: flex; flex-direction: column; height: auto; min-height: calc(100dvh - var(--alto-tope, 53px)); }
  body.archivos .lateral { display: contents; }
  body.archivos .herramientas { order: 0; position: sticky; top: var(--alto-tope, 53px); z-index: 20; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.archivos .herramientas::-webkit-scrollbar { display: none; }
  .h-btn { flex: none; } .h-titulo { display: none; } .h-lista { position: fixed; left: 8px; right: 8px; top: 110px; width: auto; }
  body.archivos .bloque { margin-inline: 8px; width: auto; }
  body.archivos .principal { order: 2; padding: 8px 8px 0; overflow: visible; }
  body.archivos .planilla { max-height: 68dvh; }
  body.archivos .barra-estado { order: 9; position: sticky; bottom: 0; padding-bottom: calc(5px + env(safe-area-inset-bottom)); }
  .barra-estado .e-fin { margin-left: 0; }
  .cajon { top: 0; z-index: 90; }
}

/* En los archivos, a la izquierda van primero las carpetas y después los filtros; exportar e imprimir están en la barra de herramientas. */
body.archivos #blqListas { order: -1; }
body.archivos #blqAlertas, body.archivos #blqDescargar { display: none; }
body.archivos .lateral .bloque h2 { font-size: 1rem; }
body.archivos .lateral input, body.archivos .lateral select { min-height: 36px; padding-block: 6px; font-size: .92rem; }
body.archivos .lateral label { font-size: .86rem; margin-top: 2px; }
@media (max-width: 760px) { body.archivos #blqListas { order: 1; } body.archivos #blqFiltros { order: 1; } }
@media (max-width: 760px) {
  /* En celular la columna de la empresa no queda fija (ocuparía toda la pantalla): la hoja se desliza hacia los lados. */
  .hoja td.fija, .hoja thead tr.titulos th:nth-child(2), .hoja thead tr.letras th:nth-child(2) { position: static; }
  .hoja thead tr.titulos th:nth-child(2), .hoja thead tr.letras th:nth-child(2) { position: sticky; left: auto; }
  .hoja th, .hoja td { max-width: 210px; }
  .hoja thead tr.titulos th { min-width: 0 !important; }
}

/* ---- Archivos: más espacio para la tabla y barra de herramientas ampliada ---- */
/* La cabecera gris (Resultados, ordenar, vistas) y el semáforo se van: todo eso vive ahora en la barra de herramientas. */
body.archivos .principal > .cab-lista:not(.sub), body.archivos .principal > .semaforo { display: none; }
body.archivos #barraLista h3 { display: none; }
body.archivos #barraLista { margin: 0; min-height: 0; }
body.archivos .principal { padding-top: 6px; }
body.archivos .formula { margin-top: 0; }
body.archivos .tabla-cab { margin-top: 0; }
.herramientas { position: relative; z-index: 30; }
.h-btn.solo-ico { padding-inline: 8px; }
.h-btn.activo { background: #e3f0e6; color: #17633a; border-color: #b9d8c2; }
.h-cae { font-size: .7rem; opacity: .7; }
.h-lista { min-width: 270px; width: max-content; max-width: min(360px, 92vw); }
.h-op { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; width: 100%; text-align: left; font: inherit; font-size: .9rem; color: var(--ink); background: none; border: 0; border-radius: 6px; padding: 7px 8px; cursor: pointer; }
.h-op > span { grid-column: 2; font-weight: 600; } .h-op > small { grid-column: 2; color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-op > .luz { grid-row: 1 / span 2; }
.h-op:hover { background: var(--soft); }
.h-op.marcado { background: #e3f0e6; } .h-op.marcado > span::after { content: " ✓"; color: #17633a; }
/* Interruptores */
.h-switch { display: inline-flex; align-items: center; gap: 8px; font: 600 .86rem var(--body); color: var(--ink); padding: 4px 8px; cursor: pointer; white-space: nowrap; }
.h-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.h-pista { position: relative; width: 36px; height: 20px; border-radius: 20px; background: #b3bbc7; transition: background .2s; flex: none; }
.h-pista::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s; }
.h-switch input:checked + .h-pista { background: #1f7a44; } .h-switch input:checked + .h-pista::after { transform: translateX(16px); }
.h-switch input:focus-visible + .h-pista { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Tamaño de letra: tres "A" de menor a mayor */
.h-letras { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.h-letras .h-btn { border-radius: 0; border: 0; min-width: 30px; justify-content: center; padding-inline: 8px; }
.h-letras .h-btn:nth-child(1) { font-size: .72rem; } .h-letras .h-btn:nth-child(3) { font-size: 1.08rem; }
.h-letras .h-btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
body.archivos.letra-chica .tablero { --esc: .86; } body.archivos.letra-mediana .tablero { --esc: 1; } body.archivos.letra-grande-arch .tablero { --esc: 1.2; }
body.archivos .hoja { font-size: calc(13px * var(--esc, 1)); }
body.archivos .hoja th, body.archivos .hoja td { height: calc(28px * var(--esc, 1)); }
body.archivos .hoja td.edita input, body.archivos .hoja td.edita select { height: calc(27px * var(--esc, 1)); }
body.archivos .hoja .pill { font-size: calc(11.5px * var(--esc, 1)); }
body.archivos .lateral, body.archivos .barra-estado, body.archivos .formula, body.archivos #lista { font-size: calc(1em * var(--esc, 1)); }
body.archivos .barra-estado { font-size: calc(.82rem * var(--esc, 1)); }
body.archivos #lista .cab h2 { font-size: calc(1.12rem * var(--esc, 1)); }
/* Filas seleccionadas y filas pintadas por el semáforo */
.hoja tr.marcada td, .hoja tr.marcada td.fija { background: #dbe8ff; } .hoja tr.marcada .nfila { background: #1d4f8f; color: #fff; font-weight: 700; }
.con-luz { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.hoja tr.tinte-verde td, .hoja tr.tinte-verde td.fija { background: #e7f5ea; } .hoja tr.tinte-amarilla td, .hoja tr.tinte-amarilla td.fija { background: #fdf3d6; } .hoja tr.tinte-roja td, .hoja tr.tinte-roja td.fija { background: #fbe4e1; }
.pill.otra { background: var(--soft); color: var(--muted); }

/* ---- Modo oscuro completo de los archivos ---- */
:root[data-tema="oscuro"] body.archivos .herramientas, :root[data-tema="oscuro"] body.archivos .formula, :root[data-tema="oscuro"] body.archivos .planilla { border-color: #2a323e; }
:root[data-tema="oscuro"] .f-celda, :root[data-tema="oscuro"] .f-fx { border-color: #2a323e; }
:root[data-tema="oscuro"] .hoja thead tr.titulos th { border-bottom-color: #4a5566; }
:root[data-tema="oscuro"] .hoja thead tr.titulos th:hover { background: #252d38; }
:root[data-tema="oscuro"] .hoja thead th.orden { background: #1d3a29; color: #8fd6a8; } :root[data-tema="oscuro"] .hoja th.orden .flechita { color: #8fd6a8; }
:root[data-tema="oscuro"] .hoja td.fija, :root[data-tema="oscuro"] .hoja thead tr.titulos th:nth-child(2), :root[data-tema="oscuro"] .hoja thead tr.letras th:nth-child(2) { border-right-color: #4a5566; }
:root[data-tema="oscuro"] .hoja .nfila:hover { background: #1d3a29; color: #8fd6a8; }
:root[data-tema="oscuro"] .hoja tr.fila-sel td, :root[data-tema="oscuro"] .hoja tr.fila-sel td.fija { background: #1a2f22; }
:root[data-tema="oscuro"] .hoja tr.marcada td, :root[data-tema="oscuro"] .hoja tr.marcada td.fija { background: #1b2c47; }
:root[data-tema="oscuro"] .hoja tr.tinte-verde td, :root[data-tema="oscuro"] .hoja tr.tinte-verde td.fija { background: #14261a; } :root[data-tema="oscuro"] .hoja tr.tinte-amarilla td, :root[data-tema="oscuro"] .hoja tr.tinte-amarilla td.fija { background: #2b2410; } :root[data-tema="oscuro"] .hoja tr.tinte-roja td, :root[data-tema="oscuro"] .hoja tr.tinte-roja td.fija { background: #2e1715; }
:root[data-tema="oscuro"] .hoja td.edita input:focus, :root[data-tema="oscuro"] .hoja td.edita select:focus { background: #0f1319; }
:root[data-tema="oscuro"] .h-btn.activo, :root[data-tema="oscuro"] .h-op.marcado { background: #1d3a29; color: #8fd6a8; border-color: #2c5a40; }
:root[data-tema="oscuro"] .h-pista { background: #4a5566; }
:root[data-tema="oscuro"] .h-letras .h-btn[aria-pressed="true"] { background: var(--gold); color: #1c1503; }
:root[data-tema="oscuro"] .h-btn.h-principal { background: #23406e; }
:root[data-tema="oscuro"] .cajon { border-left-color: #2a323e; }
@media (max-width: 760px) { .h-switch { flex: none; } .h-letras { flex: none; } .h-lista { min-width: 0; width: auto; } }
/* Modo dinámico dentro de los archivos: las tarjetas conservan su alto y la lista se desplaza dentro del programa. */
body.archivos #lista { display: block; background: var(--surface); border: 1px solid #b9c0ca; border-top: 0; border-radius: 0 0 10px 10px; }
body.archivos #lista .empresa { min-height: max-content; }
body.archivos #mas { flex: none; margin-block: 8px; }
body.archivos #vacio { flex: none; }
:root[data-tema="oscuro"] body.archivos #lista { border-color: #2a323e; }

/* ---- Cuenta: empresa arriba, usuario abajo ---- */
#btnCuenta .cuenta-lineas { display: inline-grid; text-align: left; line-height: 1.15; vertical-align: middle; max-width: 22ch; }
#btnCuenta .cuenta-lineas b { font: 700 .95rem var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btnCuenta .cuenta-lineas small { font-size: .78rem; color: var(--gold); font-weight: 600; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btnCuenta .cuenta-lineas small:empty { display: none; }
#btnCuenta #cuentaCorreo { display: block; max-width: none; }
/* ---- Quién ingresa ---- */
.puerta-acceso { margin: 10px 0 0; color: #fff; font-weight: 600; font-size: .95rem; }
.miembros { display: grid; gap: 10px; margin: 14px 0; }
.miembro { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; }
.miembro:hover, .miembro:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 174, 74, .25); }
.miembro:active { transform: scale(.99); }
.miembro b { font: 700 1.05rem var(--display); letter-spacing: .04em; }
.miembro-ini { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 800 1.1rem var(--display); flex: none; }

/* ---- Archivos sin barra izquierda: la tabla ocupa todo el ancho ---- */
body.archivos .lateral, body.archivos #barraLista, body.archivos #formRenombrar { display: none !important; }
body.archivos .tablero { grid-template-columns: minmax(0, 1fr); transition: width .25s ease; }
/* Buscar en la barra superior de la hoja */
.formula .f-fx { font-style: normal; font-weight: 700; color: var(--ink); cursor: text; }
.formula input.f-valor { border: 0; border-radius: 0; background: transparent; min-height: 0; height: 32px; font: inherit; color: inherit; padding: 4px 10px; }
.formula input.f-valor:focus { outline: 2px solid #1f7a44; outline-offset: -2px; }
/* Vistas por carpeta y acciones de la fila elegida */
.h-vistas { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-left: 4px; }
.h-vistas .h-btn { border-radius: 0; border: 0; } .h-vistas .h-btn small { background: var(--soft); border-radius: 99px; padding: 0 7px; font-size: .74rem; }
.h-vistas .h-btn[aria-pressed="true"] { background: var(--navy); color: #fff; } .h-vistas .h-btn[aria-pressed="true"] small { background: rgba(255, 255, 255, .22); color: #fff; }
.h-btn.h-fila { background: #fff7e0; border-color: #e6c66f; color: #6b4a00; animation: aparecer .2s ease both; }
.h-btn.h-fila.peligro { background: #fbe6e3; border-color: #e2a199; color: #8f2318; }
.h-btn[hidden] { display: none; }
#lista .empresa.elegida { box-shadow: inset 4px 0 0 var(--gold); background: var(--soft); }
:root[data-tema="oscuro"] .h-btn.h-fila { background: #33290d; border-color: #6b5415; color: #f0d48a; }
:root[data-tema="oscuro"] .h-btn.h-fila.peligro { background: #3a1a16; border-color: #6e2a22; color: #f0a79d; }
:root[data-tema="oscuro"] .h-vistas .h-btn[aria-pressed="true"] { background: var(--gold); color: #1c1503; }

/* ---- Detalle a la derecha: un tercio de la pantalla; la tabla usa los otros dos ---- */
body.archivos .cajon { width: 33.34vw; min-width: 340px; }
body.archivos.con-cajon .tablero { width: calc(100vw - max(33.34vw, 340px)); }
/* En modo Excel el detalle se ve como una hoja: cuadrícula, encabezados grises y barra verde. */
.cajon.excel { background: #fff; border-left: 2px solid #1f7a44; box-shadow: -8px 0 20px rgba(0, 0, 0, .12); }
.cajon.excel header { background: #1f7a44; padding: 7px 10px; } .cajon.excel header b { font: 600 13.5px var(--body); }
.cajon.excel #cajonCuerpo { padding: 0; font: 400 13px/1.35 var(--body); }
.cajon.excel .causa, .cajon.excel .ficha-marco { border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
.cajon.excel table.ficha { border-collapse: collapse; width: 100%; font-size: 13px; }
.cajon.excel table.ficha caption { text-align: left; font: 700 13px var(--body); padding: 7px 8px; background: #e9ecf0; border-bottom: 2px solid #9aa4b2; color: #17633a; }
.cajon.excel table.ficha th, .cajon.excel table.ficha td { border: 1px solid #d3d8df; padding: 4px 8px; background: #fff; color: #1d2530; font-size: 13px; text-align: left; vertical-align: top; }
.cajon.excel table.ficha th[scope="row"] { background: #f1f3f6; font-weight: 600; width: 38%; color: #3b4656; }
.cajon.excel table.ficha tr.ficha-grupo th { background: #e9ecf0; color: #3b4656; font: 700 11px var(--body); letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid #9aa4b2; }
.cajon.excel table.ficha tr.ficha-grupo .origen { color: #6b7686; }
.cajon.excel .alerta-otras { border-radius: 0; margin: 0; border-width: 0 0 1px; font-size: 13px; }
.cajon.excel .notas, .cajon.excel .causa > *:not(.ficha-marco) { margin: 8px; font-size: 13px; }
.cajon.excel .btn { border-radius: 4px; min-height: 30px; padding: 4px 10px; font-size: 13px; }
.cajon.excel input, .cajon.excel textarea, .cajon.excel select { border-radius: 2px; font-size: 13px; min-height: 28px; }
.cajon.excel .pill { font-size: 11.5px; padding: 1px 8px; }
:root[data-tema="oscuro"] .cajon.excel { background: #12161c; }
:root[data-tema="oscuro"] .cajon.excel table.ficha th, :root[data-tema="oscuro"] .cajon.excel table.ficha td { background: #12161c; color: #dbe2ec; border-color: #2a323e; }
:root[data-tema="oscuro"] .cajon.excel table.ficha th[scope="row"], :root[data-tema="oscuro"] .cajon.excel table.ficha tr.ficha-grupo th, :root[data-tema="oscuro"] .cajon.excel table.ficha caption { background: #1c222b; color: #aab4c2; border-color: #2a323e; }
:root[data-tema="oscuro"] .cajon.excel table.ficha caption { color: #8fd6a8; }
@media (max-width: 760px) {
  body.archivos .cajon { width: 100vw; min-width: 0; }
  body.archivos.con-cajon .tablero { width: auto; }
  .h-vistas { flex: none; }
  #btnCuenta .cuenta-lineas { display: none; }
}
/* El aviso de datos antiguos se ve en el resumen; dentro de los archivos no quita espacio a la tabla. */
body.archivos #aviso { display: none !important; }

/* ---- Modo dinámico dentro de los archivos: buscador, títulos que ordenan y tamaños de letra ---- */
.formula.sin-celda .f-celda { display: none; }
body.archivos .formula.sin-celda { border: 1px solid #b9c0ca; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
body.archivos #tablaCab [data-col] { cursor: pointer; user-select: none; }
body.archivos #tablaCab [data-col]:hover { color: var(--ink); }
body.archivos #tablaCab [data-col]::after { content: " ▾"; opacity: .45; font-size: .8em; }
body.archivos #tablaCab [data-col].orden { color: #17633a; } body.archivos #tablaCab [data-col].orden::after { opacity: 1; content: " ▲"; } body.archivos #tablaCab [data-col].orden[data-dir="desc"]::after { content: " ▼"; }
:root[data-tema="oscuro"] body.archivos #tablaCab [data-col].orden { color: #8fd6a8; }
/* Letra mediana: algo más compacta que la vista original. */
body.archivos.letra-mediana #lista { font-size: .9rem; }
body.archivos.letra-mediana #lista .cab { padding-block: 9px; } body.archivos.letra-mediana #lista .cab h2 { font-size: 1rem; }
/* Letra chica: cada demanda en una sola línea. */
body.archivos.letra-chica #lista, body.archivos.letra-chica #tablaCab { font-size: .76rem; }
body.archivos.letra-chica #tablaCab { padding-block: 5px; font-size: .64rem; }
body.archivos.letra-chica #lista .cab { padding-block: 3px; min-height: 0; }
body.archivos.letra-chica #lista .cab > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.archivos.letra-chica #lista .cab h2 { font-size: .8rem; display: inline; white-space: nowrap; }
body.archivos.letra-chica #lista .c-emp { display: flex; align-items: center; gap: 6px; } body.archivos.letra-chica #lista .c-emp > span { overflow: hidden; text-overflow: ellipsis; }
body.archivos.letra-chica #lista .c-emp .ico { width: 14px; height: 14px; flex: none; }
body.archivos.letra-chica #lista .c-emp small, body.archivos.letra-chica #lista .c-det small, body.archivos.letra-chica #lista .c-monto small, body.archivos.letra-chica #lista .c-fecha small { display: inline; margin-left: 6px; font-size: .92em; }
body.archivos.letra-chica #lista .c-monto small { display: none; }
body.archivos.letra-chica #lista .c-est { flex-wrap: nowrap; gap: 4px; } body.archivos.letra-chica #lista .pill { font-size: .68rem; padding: 0 7px; }
body.archivos.letra-chica #lista .luz { width: 9px; height: 9px; }
body.archivos.letra-grande-arch #lista { font-size: 1.08rem; }
@media (max-width: 860px) { body.archivos.letra-chica #lista .cab { gap: 1px; padding: 6px 10px; } body.archivos.letra-chica #lista .cab > * { white-space: normal; } }
body.archivos.letra-chica #lista .c-fecha small { display: none; }
body.archivos.letra-chica #lista .empresa { min-height: 0; }
body.archivos.letra-chica #lista .cab { padding-block: 1px; line-height: 1.25; }
body.archivos.letra-chica #lista .cab > * { padding-block: 0; }
body.archivos.letra-chica #lista .c-flecha { font-size: .9rem; line-height: 1; }

/* ---- Barra de herramientas fija: dos renglones que no cambian de lugar ni de tamaño ---- */
.herramientas { display: grid; gap: 4px; padding: 6px 10px; font-size: 13.5px; }
.h-renglon { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-height: 36px; overflow-x: auto; scrollbar-width: none; }
.h-renglon::-webkit-scrollbar { display: none; }
.herramientas .h-btn { font-size: 13.5px; flex: none; white-space: nowrap; height: 34px; min-height: 34px; }
.herramientas .h-btn .ico { width: 17px; height: 17px; flex: none; }
.herramientas .h-switch { font-size: 13.5px; flex: none; }
.herramientas .h-titulo { font-size: 13px; flex: none; white-space: nowrap; }
.herramientas .h-letras .h-btn:nth-child(1) { font-size: 10.5px; } .herramientas .h-letras .h-btn:nth-child(2) { font-size: 13.5px; } .herramientas .h-letras .h-btn:nth-child(3) { font-size: 16.5px; }
/* Los botones cuyo texto cambia tienen ancho fijo, para que los de al lado no se corran. */
#hGuardar { width: 118px; justify-content: center; } #hFavorito { width: 184px; } #hEliminar { width: 168px; }
.h-modo { width: 158px; }
.h-btn:disabled { opacity: .45; cursor: default; }
.h-btn.h-fila:disabled { background: none; border-color: transparent; color: var(--ink); animation: none; }
.h-campo { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px var(--body); color: var(--ink); flex: none; padding-right: 4px; }
.h-campo select { height: 32px; min-height: 32px; padding: 2px 26px 2px 8px; font-size: 13.5px; border-radius: 6px; max-width: none; }

.h-premium { font: 700 9.5px var(--display); letter-spacing: .08em; text-transform: uppercase; background: var(--gold); color: #1c1503; border-radius: 99px; padding: 1px 7px; margin-left: 2px; }
.h-btn.h-nuevas { border-color: var(--gold); }
/* Los menús se abren por encima de todo, sin mover la barra. */
.herramientas .h-lista { position: fixed; top: auto; left: auto; z-index: 120; }
/* ---- El detalle nunca tapa la barra: parte debajo de ella y solo se achica la tabla ---- */
body.archivos .cajon { top: calc(var(--alto-tope, 82px) + var(--alto-herr, 86px)); bottom: var(--alto-estado, 28px); z-index: 25; }
body.archivos.con-cajon .tablero { width: auto; }
body.archivos.con-cajon .principal { margin-right: max(33.34vw, 340px); transition: margin-right .2s ease; }
.cajon-botones { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.cajon header .h-btn { font-size: 13px; height: 30px; min-height: 30px; border: 1px solid rgba(255, 255, 255, .35); }
.cajon header .h-btn .ico { width: 16px; height: 16px; }
.cajon header b { min-width: 0; }
/* Impresión de una causa: cabecera, cifras clave y secciones cortas que no se parten entre hojas */
.hoja-causa { color: #14213d; font: 10pt/1.42 var(--body); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hc-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12pt; padding-bottom: 9pt; border-bottom: 2.5pt solid #14213d; }
.hc-cab small { display: block; font-size: 7.5pt; letter-spacing: .12em; text-transform: uppercase; color: #5b6478; margin-bottom: 3pt; }
.hc-cab h1 { font: 800 19pt/1.12 var(--display); margin: 0 0 3pt; color: #14213d; }
.hc-cab p { margin: 0; font-size: 10pt; color: #3d4760; }
.hc-estado { flex: none; max-width: 42%; font-weight: 700; font-size: 8.5pt; padding: 4pt 9pt; border-radius: 99pt; background: #fdecc8; color: #7a4b00; border: 1pt solid #e8c476; text-align: center; }
.hc-estado.fallida { background: #fde3e1; color: #9b1c13; border-color: #f0a8a2; }
.hc-estado.notificada, .hc-estado.otra { background: #e3f3e8; color: #17603a; border-color: #a5d6b7; }
.hc-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7pt; margin: 8pt 0; break-inside: avoid; }
.hc-cifra { background: #eef2f9; border-left: 3pt solid #c9a227; border-radius: 3pt; padding: 6pt 8pt; min-width: 0; }
.hc-cifra small { display: block; font-size: 7pt; letter-spacing: .08em; text-transform: uppercase; color: #5b6478; }
.hc-cifra b { display: block; font: 800 12.5pt/1.2 var(--display); color: #14213d; overflow-wrap: anywhere; }
.hc-cifra span { font-size: 8pt; color: #5b6478; }
.hc-resumen { background: #14213d; color: #fff; border-radius: 4pt; padding: 7pt 11pt; margin-bottom: 8pt; break-inside: avoid; }
.hc-resumen h2 { font: 700 7.5pt var(--body); letter-spacing: .12em; text-transform: uppercase; color: #e6c65c; margin: 0 0 3pt; }
.hc-resumen p { margin: 0; font-size: 10.5pt; line-height: 1.45; }
.hc-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8pt; align-items: start; margin-bottom: 7pt; break-inside: avoid; }
.hc-sec { border: 1pt solid #cfd6e4; border-radius: 4pt; padding: 7pt 10pt 8pt; break-inside: avoid; min-width: 0; }
.hc-sec h2 { display: flex; align-items: center; gap: 6pt; font: 800 10.5pt var(--display); color: #14213d; margin: 0 0 6pt; padding-bottom: 4pt; border-bottom: 1pt solid #e2e7f0; }
.hc-sec h2 i { font: 700 7.5pt var(--body); font-style: normal; color: #fff; background: #14213d; border-radius: 2pt; padding: 1.5pt 4pt; }
.hc-sec dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5pt 10pt; margin: 0; }
.hc-dato { min-width: 0; }
.hc-dato.hc-ancho { grid-column: 1 / -1; }
.hc-dato dt { font-size: 7pt; letter-spacing: .07em; text-transform: uppercase; color: #6a7388; }
.hc-dato dd { margin: 0; font-size: 10pt; font-weight: 600; color: #14213d; overflow-wrap: anywhere; }
.hc-notas { margin-bottom: 8pt; }
body.imp-causa .imp-marco thead td { padding-bottom: 1mm; }
body.imp-causa .imp-marco thead img { width: 12mm; height: 12mm; }
.hc-mov ol { list-style: none; margin: 0; padding: 0; }
.hc-mov li { display: grid; grid-template-columns: 54pt minmax(0, 1fr); gap: 6pt; padding: 2pt 0 2pt 8pt; border-left: 1.5pt solid #c9a227; font-size: 9.5pt; break-inside: avoid; }
.hc-mov li + li { border-top: 0; }
.hc-mov time { color: #5b6478; font-variant-numeric: tabular-nums; }
.hc-pie { margin: 0; padding-top: 5pt; break-before: avoid; border-top: 1pt solid #cfd6e4; font-size: 7.5pt; color: #6a7388; }
@media (max-width: 760px) {
  body.archivos .herramientas { flex-wrap: nowrap; overflow: visible; display: grid; }
  body.archivos .cajon { top: 0; bottom: 0; z-index: 90; }
  body.archivos.con-cajon .principal { margin-right: 0; }
  .herramientas .h-lista { left: 8px; right: 8px; }
}

/* Barra de herramientas: los renglones se acomodan al ancho de la ventana, pero no cambian al usar los botones. */
.h-renglon { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
.h-renglon > * { flex: none; }
#hGuardar { width: 104px; } #hFavorito { width: 178px; } #hEliminar { width: 164px; }

.herramientas .h-btn { padding-inline: 8px; }

/* ---------- Estadísticas en celular: un gráfico a la vez y el filtro siempre a mano ---------- */
.visor, .g-ayuda { display: none; }
@media screen and (max-width: 760px) {
  .est .est-escala { zoom: 1 !important; }
  .est-selects { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .est-selects .tamano { display: none; }
  .est-selects select, .est-selects .periodo { width: 100%; }
  .est-barra .modos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .est-barra .modos .chip { padding: 8px 6px; font-size: .92rem; min-height: 44px; }
  /* Las cifras clave pasan a una tira que se desliza de lado. */
  .est .hallazgos, .est.compacto .hallazgos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  .est .hallazgos::-webkit-scrollbar { display: none; }
  .est .hallazgos > * { flex: 0 0 62%; scroll-snap-align: center; }
  .est .hallazgos > .oscuro { flex-basis: 74%; }
  .visor { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; align-items: stretch; position: sticky; top: var(--alto-tope, 56px); z-index: 6; background: var(--bg); padding: 8px 0; scroll-margin-top: var(--alto-tope, 56px); }
  .visor button { border: 0; border-radius: 12px; background: var(--ink); color: var(--bg); font: 700 1.7rem/1 var(--body); min-height: 52px; }
  .visor button:disabled { opacity: .25; }
  .visor label { display: grid; gap: 1px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 5px 10px; min-width: 0; }
  .visor small { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .visor select { border: 0; background: transparent; padding: 0; min-height: 0; height: auto; font: 700 1rem var(--body); color: var(--ink); width: 100%; min-width: 0; text-overflow: ellipsis; }
  .est .graficos > .grafico:not(.actual) { display: none; }
  .est .graficos > .grafico { min-height: 52vh; box-shadow: none; grid-template-columns: minmax(0, 1fr); }
  .est .graficos > .grafico > * { min-width: 0; }
  .est .grafico .leyenda { flex-wrap: wrap; }
  .g-elegir, .g-info { display: none !important; }
  .g-ayuda { display: block; margin: -4px 0 0; font-size: .86rem; color: var(--muted); }
  .est-pie { display: none; }
  /* Filtro nacido de un toque en el gráfico: queda fijo abajo, con su botón para quitarlo. */
  .est-filtros { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; background: var(--ink); color: var(--bg); border-radius: 14px; padding: 8px 12px 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); gap: 6px 8px; max-height: 40vh; overflow-y: auto; }
  .est-filtros > span { color: var(--bg); flex: 1 1 auto; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
  .est-filtros .chip { order: 2; flex: 1 1 100%; background: var(--gold); color: #14213d; border: 0; font-weight: 700; white-space: normal; text-align: left; border-radius: 10px; padding: 8px 12px; min-height: 44px; font-size: .92rem; }
  .est-filtros .enlace { order: 1; flex: none; color: var(--bg); font-size: .85rem; min-height: 0; padding: 0; }
  .est:has(.est-filtros:not([hidden])) { padding-bottom: 96px; }
  .flotante { display: none !important; }
}

/* ---------- Filtros de varias opciones (región, tribunal) y selector de modo ---------- */
.h-btn.h-filtro { width: 196px; border-color: var(--line); justify-content: flex-start; }
.h-btn.h-filtro > span:first-child { color: var(--muted); font-weight: 400; flex: none; }
.h-btn.h-filtro b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 700; }
.h-btn.h-filtro.activo { border-color: #1f7a44; background: rgba(31, 122, 68, .1); }
#hTribunal { width: 250px; }
.h-btn.h-nuevas { width: 292px; } .h-btn.h-nuevas #hNuevasTexto { flex: 1 1 auto; text-align: left; }
.h-lista.h-marcas { max-height: min(60vh, 460px); overflow-y: auto; min-width: 280px; }
.h-lista.h-marcas label { font-size: 13.5px; } .h-lista.h-marcas input { width: 17px; height: 17px; min-height: 0; flex: none; accent-color: #1f7a44; }
.h-modos { margin-left: auto; }
.movil-conteo { display: none; }
/* ---------- Versión móvil dentro de los archivos: tarjetas simples y solo tres filtros ---------- */
body.archivos.vmovil .herramientas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; }
body.archivos.vmovil .h-renglon { display: contents; }
body.archivos.vmovil .h-renglon > * { display: none; }
body.archivos.vmovil .h-renglon > #hSalir, body.archivos.vmovil .h-renglon > .h-modos { display: inline-flex; }
body.archivos.vmovil .h-renglon > .h-menu:has(#hRegion, #hTribunal, #hNuevas) { display: inline-block; }
body.archivos.vmovil #hSalir { order: -2; } body.archivos.vmovil .h-modos { order: 5; margin-left: 0; }
body.archivos.vmovil .herramientas .h-btn { height: 40px; min-height: 40px; font-size: 14.5px; }
body.archivos.vmovil .h-btn.h-filtro, body.archivos.vmovil .h-btn.h-nuevas { border-radius: 99px; padding-inline: 14px; background: var(--surface); }
body.archivos.vmovil .h-premium { display: none; }
body.archivos.vmovil .h-btn.h-nuevas { width: 250px; border-color: var(--line); } body.archivos.vmovil .h-btn.h-nuevas.activo { border-color: var(--gold); background: rgba(224, 174, 74, .18); }
body.archivos.vmovil .formula, body.archivos.vmovil #tablaCab, body.archivos.vmovil .barra-estado, body.archivos.vmovil .fila-mover, body.archivos.vmovil .filtro-empresa .suave { display: none !important; }
body.archivos.vmovil .movil-conteo { display: block; flex: none; text-align: center; margin: 12px 0 2px; color: var(--muted); font-size: .95rem; }
body.archivos.vmovil #lista { display: flex; flex-direction: column; gap: 10px; background: none; border: 0; border-radius: 0; padding: 10px max(12px, calc(50% - 300px)) 40px; font-size: 1rem; }
body.archivos.vmovil #lista .empresa { display: block; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 4px 14px rgba(7, 22, 48, .06); overflow: hidden; cursor: default; }
body.archivos.vmovil #lista .empresa.abierta { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(224, 174, 74, .5); background: var(--surface); }
body.archivos.vmovil #lista .cab { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "emp emp" "det det" "monto fecha" "est est"; gap: 8px 12px; padding: 16px; align-items: center; }
body.archivos.vmovil #lista .cab > * { padding: 0; white-space: normal; }
body.archivos.vmovil #lista .c-emp { grid-area: emp; padding-left: 0; } body.archivos.vmovil #lista .c-emp h2 { font: 800 1.08rem/1.25 var(--display); }
body.archivos.vmovil #lista .c-det { grid-area: det; color: var(--muted); }
body.archivos.vmovil #lista .c-monto { grid-area: monto; text-align: left; display: block; } body.archivos.vmovil #lista .c-monto .monto { font: 800 1.25rem var(--display); color: var(--ink); } body.archivos.vmovil #lista .c-monto .monto::before { content: none; }
body.archivos.vmovil #lista .c-monto small { display: inline; margin-left: 6px; }
body.archivos.vmovil #lista .c-fecha { grid-area: fecha; text-align: right; }
body.archivos.vmovil #lista .c-est { grid-area: est; }
body.archivos.vmovil #lista .c-flecha { display: none; }
body.archivos.vmovil #lista .detalle { padding: 0 12px 14px; }
body.archivos.vmovil .principal { background: var(--bg); }
@media (max-width: 760px) {
  body.archivos.vmovil .herramientas { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; overflow: visible; position: static; padding: 10px 12px; }
  body.archivos.vmovil .h-renglon > .h-menu:has(#hRegion, #hTribunal, #hNuevas) { display: block; min-width: 0; }
  body.archivos.vmovil #hRegion, body.archivos.vmovil #hTribunal, body.archivos.vmovil .h-btn.h-nuevas { width: 100%; }
  body.archivos.vmovil .h-btn.h-filtro > span:first-child { display: none; }
  body.archivos.vmovil .h-renglon > .h-menu:has(#hNuevas) { grid-column: 1 / -1; grid-row: 2; }
  body.archivos.vmovil .h-renglon > .h-menu:has(#hRegion) { grid-row: 3; grid-column: 1; } body.archivos.vmovil .h-renglon > .h-menu:has(#hTribunal) { grid-row: 3; grid-column: 2; }
  body.archivos.vmovil #hSalir { grid-row: 1; grid-column: 1; justify-self: start; }
  body.archivos.vmovil .h-modos { grid-row: 1; grid-column: 2; justify-self: end; } body.archivos.vmovil .h-modos .h-btn { padding-inline: 8px; font-size: 13px; }
  body.archivos.vmovil .h-modos .h-btn[data-modo-vista="movil"] { display: none; }
  body.archivos.vmovil #lista { overflow: visible; padding-inline: 12px; }
  .h-lista.h-marcas { min-width: 0; }
}

/* Renglón 2 de la barra: filtros más angostos para que el selector de modo quepa en la misma línea. */
.h-btn.h-filtro, #hTribunal { width: 150px; }
.h-btn.h-nuevas { width: 208px; }
.herramientas .h-modos .h-btn { padding-inline: 7px; }
.herramientas .h-vistas .h-btn { padding-inline: 7px; }
.herramientas .h-renglon .h-sep { margin-inline: 2px; }
.dlg-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
@media (min-width: 1240px) { body.archivos:not(.vmovil) .h-renglon { flex-wrap: nowrap; } }
#hGuardar { width: 98px; } #hFavorito { width: 168px; } #hEliminar { width: 152px; }
.herramientas .h-renglon { gap: 2px; } .herramientas .h-btn { padding-inline: 6px; } .herramientas .h-letras .h-btn { min-width: 26px; padding-inline: 6px; }
/* Ventanas medianas: la barra se compacta para seguir en dos líneas. */
@media (min-width: 1095px) and (max-width: 1239px) {
  body.archivos:not(.vmovil) .h-renglon { flex-wrap: nowrap; }
  .herramientas .h-btn, .herramientas .h-switch { font-size: 12px; } .herramientas .h-btn { padding-inline: 4px; gap: 4px; } .herramientas .h-btn .ico { width: 15px; height: 15px; }
  #hGuardar { width: 84px; } #hFavorito { width: 148px; } #hEliminar { width: 134px; }
  .h-btn.h-filtro, #hTribunal { width: 124px; } .h-btn.h-nuevas { width: 178px; }
  .herramientas .h-renglon .h-sep { margin-inline: 0; } .herramientas .h-switch { padding-inline: 4px; gap: 5px; }
  .herramientas .h-letras .h-btn { min-width: 22px; padding-inline: 4px; }
}

.miembro small { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; }
#formPin { display: grid; gap: 8px; } #formPin input { font-size: 1.3rem; letter-spacing: .3em; text-align: center; }

/* Candado: página cerrada hasta que ingrese un usuario con clave */
.candado { max-width: 560px; margin: 48px auto; padding: 32px 24px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(7, 22, 48, .08); display: grid; gap: 12px; justify-items: center; }
.candado > .ico { width: 44px; height: 44px; color: var(--navy); fill: none; stroke: currentColor; stroke-width: 1.6; }
.candado h1 { font: 800 1.6rem var(--display); color: var(--ink); } .candado p { color: var(--muted); margin: 0; }
.candado .miembros { width: 100%; margin-top: 8px; }
body.candado-puesto [data-vista~="panel"], body.candado-puesto [data-vista~="estadisticas"] { display: none !important; }

.columnas.semanas .col { min-width: 52px; }

/* ---------- Abogados ---------- */
.ab-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ab-barra input[type=search] { flex: 1 1 280px; min-width: 0; }
.ab-barra select { flex: 0 1 220px; }
.ab-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ab-tabla th, .ab-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.ab-tabla th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ab-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.ab-fila { cursor: pointer; } .ab-fila:hover, .ab-fila.abierta { background: var(--soft); }
.ab-detalle > td { padding: 0 0 12px 18px; background: var(--soft); }
.ab-causas { width: 100%; border-collapse: collapse; font-size: .84rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.ab-causas th, .ab-causas td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ab-causas th { color: var(--muted); font-weight: 600; }
.abog .hallazgos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.abog .hallazgo b.cifra-t2 { overflow-wrap: anywhere; }
@media (max-width: 760px) { .abog .hallazgos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-tabla th:nth-child(n+4):not(:last-child), .ab-tabla td:nth-child(n+4):not(:last-child) { display: none; } }
.ab-causas td:nth-child(1), .ab-causas td:nth-child(2), .ab-causas td:nth-child(5), .ab-causas td:last-child { white-space: nowrap; }

/* ---------- Mi panel: solo vista dinámica, con Estadísticas y Abogados en la misma barra ---------- */
#vistaApp #panelPortada, #vistaApp .cifras, #vistaApp #puerta { display: none !important; }
.h-menu:has(#hColumnas), #hGuardar, #fCelda { display: none !important; }
.h-vp .h-btn { padding-inline: 10px; }
.h-vp .h-btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
:root[data-tema="oscuro"] .h-vp .h-btn[aria-pressed="true"] { background: var(--gold); color: #1c1503; }
body.archivos.vp-otra .principal > :not(#analisis) { display: none !important; }
body.archivos.vp-otra .principal > #analisis { display: block !important; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px 40px; background: var(--bg); }
/* Lo que solo sirve para la lista de demandas queda apagado en Estadísticas y Abogados (la barra no cambia de forma). */
body.vp-otra :is(#hFicha, #hFavorito, #hEliminar, #hDeshacer, [data-carpeta], .h-menu:has(#hExportar, #hImprimir, #hOrdenar, #hRegion, #hTribunal, #hNuevas)) { opacity: .35; pointer-events: none; }
body.vp-otra:has([data-vp="abogados"][aria-pressed="true"]) .h-switch:has(#hSoloPend) { opacity: .35; pointer-events: none; }
#analisis .est-barra .modos, #abCifras { display: none !important; }
#analisis .panel { margin: 0; }
.kpis { background: linear-gradient(180deg, #13336b, #0d2a5c); padding-bottom: 10px; }
.kpis-in { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 8px; }
.kpi { text-align: left; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); color: #fff; border-radius: 12px; padding: 8px 12px; cursor: pointer; display: grid; gap: 1px; min-width: 0; transition: background .15s, transform .15s, border-color .15s; font: inherit; }
.kpi:not(:disabled):hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.kpi:disabled { cursor: default; opacity: 1; }
.kpi small { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #b8c6e3; }
.kpi b { font: 800 1.35rem/1.15 var(--display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi span { font-size: .78rem; color: #c9d4ec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.grande { background: linear-gradient(135deg, rgba(224, 174, 74, .3), rgba(224, 174, 74, .08)); border-color: rgba(224, 174, 74, .5); }
.kpi.grande b { color: #f4d27f; font-size: 1.6rem; }
.kpi.rojo b { color: #ffb4a9; }
.kpi.activo { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: rgba(224, 174, 74, .18); }

@media (max-width: 760px) { .kpis-in { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .kpi { flex: 0 0 62%; scroll-snap-align: start; } }
/* ---------- Estadísticas y Abogados con el mismo aspecto que la lista de demandas ---------- */
#kpis { display: none !important; }
body.archivos.vp-otra .principal > #analisis { padding: 0 0 24px; background: transparent; }
#analisis .panel.est { display: grid; gap: 8px; padding: 0; }
#analisis .est-escala { gap: 8px; zoom: 1 !important; }
/* Cabecera: una barra blanca como la de "Buscar" */
#analisis .est-cab { background: var(--surface); border: 1px solid #b9c0ca; border-radius: 10px; padding: 8px 14px; align-items: center; gap: 4px 18px; }
#analisis .est-cab h1 { font: 800 1.05rem var(--display); letter-spacing: 0; }
#analisis .est-cab p, #analisis #panelNota { font-size: .84rem; margin: 0; text-align: left; }
#analisis #panelNota b { font-weight: 600; }
#analisis .est-barra, #analisis .ab-barra { background: var(--surface); border: 1px solid #b9c0ca; border-radius: 10px; padding: 6px 10px; gap: 8px; }
#analisis .est-barra .tamano, #analisis .est-pie { display: none !important; }
#analisis .est-barra select, #analisis .ab-barra select, #analisis .ab-barra input { height: 32px; min-height: 32px; font-size: .86rem; padding-block: 2px; border-radius: 6px; }
#analisis .est-barra .periodo { padding: 2px 10px; font-size: .84rem; border-radius: 6px; }
#analisis .ab-barra .conmutador button { min-height: 32px; padding: 4px 12px; font-size: .86rem; }
#analisis .est-filtros { border-radius: 10px; padding: 6px 10px; }
/* Cifras: fichas chicas y planas, como filas de la lista */
#analisis .hallazgos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
#analisis .hallazgo { border: 1px solid #b9c0ca; border-radius: 10px; box-shadow: none; padding: 8px 12px; gap: 8px; align-items: center; }
#analisis .hallazgo .ico { width: 22px; height: 22px; }
#analisis .hallazgo.oscuro { background: var(--surface); color: var(--ink); border-color: #b9c0ca; }
#analisis .hallazgo.oscuro .ico { color: var(--navy); } #analisis .hallazgo.oscuro small, #analisis .hallazgo.oscuro span { color: var(--muted); }
#analisis .hallazgo b.cifra-n, #analisis .hallazgo.oscuro b { font-size: 1.35rem; }
#analisis .hallazgo b.cifra-t2 { font-size: .95rem; }
#analisis .hallazgo span { font-size: .8rem; }
#analisis .hallazgo.accion { padding: 8px 12px; }
/* Gráficos: tarjetas planas con cabecera gris en mayúsculas, como la cabecera de la tabla */
#analisis .graficos { gap: 8px; }
#analisis .grafico { border: 1px solid #b9c0ca; border-radius: 10px; box-shadow: none; padding: 0 14px 14px; gap: 10px; overflow: hidden; }
#analisis .grafico:hover { box-shadow: none; }
#analisis .g-cab { margin: 0 -14px; padding: 9px 14px; background: var(--soft); border-bottom: 1px solid #b9c0ca; align-items: center; }
#analisis .g-cab h3 { font: 700 .76rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#analisis .g-elegir { font-size: .78rem; }
#analisis .barra-h { font-size: .88rem; }
/* Abogados: tabla con la misma cabecera que la lista */
#analisis .ab-tabla { font-size: .9rem; }
#analisis .ab-tabla thead th { background: var(--soft); font: 700 .74rem var(--display); letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid #b9c0ca; }
#analisis .ab-tabla td { padding-block: 9px; }
#analisis .grafico .tabla-est { margin: 0 -14px -14px; }
:root[data-tema="oscuro"] #analisis :is(.est-cab, .est-barra, .ab-barra, .hallazgo, .grafico, .g-cab, .ab-tabla thead th) { border-color: #2a323e; }
#analisis #panelNota, #analisis #panelNota * { font-size: .84rem; } #analisis #panelNota { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Herramientas de gráficos en la barra (solo Estadísticas y Abogados) ---------- */
.h-graf { display: none; align-items: center; gap: 2px; }
body.archivos.vp-otra .h-graf { display: inline-flex; }
body.archivos.vp-otra :is(#hFicha, #hFavorito, #hEliminar, #hDeshacer, .h-menu:has(#hExportar), .h-menu:has(#hImprimir), .h-menu:has(#hOrdenar)) { display: none !important; }
.h-graf .h-btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.h-graf small { background: var(--soft); border-radius: 99px; padding: 0 7px; font-size: .74rem; }
.h-graf .h-btn[aria-pressed="true"] small { background: rgba(255, 255, 255, .22); color: #fff; }
.g-herr { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.g-btn { border: 1px solid #b9c0ca; background: var(--surface); color: var(--ink); border-radius: 6px; min-width: 28px; height: 26px; padding: 0 6px; font-size: .9rem; line-height: 1; cursor: pointer; }
.g-btn:hover { background: var(--soft); }
.g-btn.estrella { border-color: transparent; background: transparent; font-size: 1.15rem; color: #9aa4b2; }
.g-btn.estrella.on { color: #d39a2a; }
.grafico.destacado { border-color: #d39a2a !important; box-shadow: inset 0 3px 0 #d39a2a !important; }
.grafico.elegido { box-shadow: 0 0 0 2px var(--gold) !important; }
.g-elegir2 { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--muted); }
#analisis .g-elegir { display: none; }
body.eligiendo-graf #analisis .g-elegir { display: inline-flex; }
.ordenando > .grafico[draggable="true"] { cursor: grab; outline: 1px dashed #9aa4b2; outline-offset: -4px; }
.ordenando > .grafico.arrastrando { opacity: .45; }
.ordenando > .grafico.sobre { outline: 2px solid var(--gold); }
@media print { body.imp-est #abogados { display: grid !important; margin: 0; } body.imp-est .g-herr, body.imp-est .ab-barra { display: none !important; } }
/* ---------- Tamaño de letra (A A A) también para la lista grande, Estadísticas y Abogados ---------- */
/* Chica: la lista mantiene su formato de una línea; los gráficos y tablas se achican. Grande: todo se amplía, incluidos los gráficos. */
body.archivos.letra-chica #analisis > section { zoom: .85; }
body.archivos.letra-grande-arch #analisis > section { zoom: 1.2; }
body.archivos.letra-grande-arch #lista { font-size: 1rem; zoom: 1.18; }
body.archivos.letra-grande-arch #tablaCab { zoom: 1.18; }
body.archivos.letra-grande-arch .formula { font-size: 1rem; zoom: 1.1; }
body.archivos.letra-grande-arch #lista .cab h2 { font-size: 1.05rem; }
#lista .empresa:has(.pill.otra) .c-emp h2 { font-weight: 600; font-style: italic; color: var(--muted); }

/* ---------- Selector de categorías (muy visible) ---------- */
.h-cat { display: inline-flex; border-radius: 10px; overflow: hidden; border: 2px solid var(--navy); flex: none; }
.h-cat button { border: 0; background: var(--surface); color: var(--ink); font: 700 13px var(--body); padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.h-cat button + button { border-left: 1px solid #b9c0ca; }
.h-cat button small { background: var(--soft); border-radius: 99px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.h-cat button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.h-cat button[aria-pressed="true"] small { background: var(--gold); color: #1c1503; }
.h-cat button[data-cat="reservadas"][aria-pressed="true"] { background: #5b6478; } .h-cat button[data-cat="personas"][aria-pressed="true"] { background: #6b3fa0; }
:root[data-tema="oscuro"] .h-cat { border-color: var(--gold); }
body.vp-otra:has([data-vp="abogados"][aria-pressed="true"]) .h-cat button:is([data-cat="reservadas"], [data-cat="personas"]) { opacity: .35; pointer-events: none; }
body.vp-otra:has([data-vp="estadisticas"][aria-pressed="true"]) .h-cat button:is([data-cat="reservadas"], [data-cat="personas"]) { opacity: .35; pointer-events: none; }
.ab-colegas { margin: 8px 0; font-size: .86rem; }
/* Franja propia para el selector de categorías, bajo la barra de herramientas */
.h-fila-cat { justify-content: center; gap: 10px; padding: 6px 0 2px; border-top: 1px solid #d9dee6; margin-top: 4px; }
.h-cat-titulo { font: 800 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.h-fila-cat .h-cat button { font-size: 14px; padding: 7px 16px; }
body.archivos.vmovil .h-fila-cat { display: flex !important; grid-column: 1 / -1; }
body.archivos.vmovil .h-renglon.h-fila-cat > * { display: inline-flex; }
@media (max-width: 760px) { .h-fila-cat { overflow-x: auto; justify-content: flex-start; } .h-fila-cat .h-cat button { font-size: 12.5px; padding: 6px 10px; } }

/* ===================== Diseño del panel según la maqueta (oct-2026) ===================== */
/* Encabezado: título en una línea, menú con separadores, cuenta y avatar */
#vistaApp .tope .logo b { font: 800 1.3rem/1.1 var(--display); white-space: nowrap; }
#vistaApp .tope .logo small { font-size: .9rem; opacity: .85; }
#vistaApp .menu-sitio { gap: 0; }
#vistaApp .menu-sitio [data-ir] { background: none !important; color: #fff !important; border-radius: 0; padding: 6px 18px; font-weight: 600; box-shadow: none !important; }
#vistaApp .menu-sitio [data-ir] + [data-ir], #vistaApp .menu-sitio .menu-sep + [data-ir] { border-left: 1px solid rgba(255, 255, 255, .25); }
#vistaApp .menu-sitio .menu-sep { display: none; }
#vistaApp .menu-sitio [data-ir][aria-current="true"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(255, 255, 255, .45); }
#vistaApp .cuenta { display: flex; align-items: center; gap: 14px; }
#btnCuenta { border: 1px solid rgba(255, 255, 255, .55); border-radius: 10px; padding: 8px 18px; }
#btnCuenta #cuentaCorreo { display: none; }
#btnCuenta #cuentaEmpresa { font: 700 1.05rem var(--display); }
.cuenta-avatar { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; cursor: pointer; padding: 0 0 0 14px; border-left: 1px solid rgba(255, 255, 255, .25); font: inherit; }
.cuenta-avatar #cuentaIniciales { width: 44px; height: 44px; border-radius: 50%; background: #eef1f6; color: #14213d; display: grid; place-items: center; font: 800 1rem var(--display); }
#vistaApp:not(:has(body.archivos)) .cuenta-avatar { }
/* Barra de herramientas */
body.archivos #herramientas { background: var(--surface); border-bottom: 1px solid #e3e7ee; padding: 12px 20px 14px; gap: 14px; display: flex; flex-direction: column; }
#herramientas .h-oculto { display: none !important; }
#herramientas .h-r1, #herramientas .h-r2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; overflow: visible; }
#herramientas .h-r2 { justify-content: space-between; }
#herramientas .h-etq, #herramientas .h-etq2 { font: 500 14px var(--body); color: #5b6478; }
#herramientas .h-etq { color: var(--ink); font-weight: 600; }
#herramientas .h-sep { width: 1px; height: 26px; background: #dfe3ea; margin: 0 6px; }
#herramientas .h-btn { height: 40px; min-height: 40px; font-size: 14.5px; padding: 0 12px; border-radius: 8px; gap: 8px; color: var(--ink); }
#herramientas .h-btn .ico { width: 19px; height: 19px; }
/* Vista: Demandas / Estadísticas / Abogados */
#herramientas .h-vp { display: inline-flex; gap: 8px; border: 0; overflow: visible; margin: 0; }
#herramientas .h-vp .h-btn { border: 1px solid #d6dbe3; background: var(--surface); padding: 0 16px; font-weight: 600; }
#herramientas .h-vp .h-btn[aria-pressed="true"] { background: #1f5bd1; border-color: #1f5bd1; color: #fff; }
#herramientas .h-vp .h-btn[aria-pressed="true"] .ico { stroke: #fff; }
/* Región, Tribunal y Fecha: etiqueta afuera y caja con flecha */
#herramientas .h-btn.h-filtro, #herramientas .h-btn.h-nuevas, #herramientas #hTribunal { width: auto; border: 0; background: none; padding: 0 2px; gap: 8px; }
#herramientas .h-btn.h-filtro.activo, #herramientas .h-btn.h-nuevas.activo { background: none; }
#herramientas .h-btn.h-filtro > span:first-child { color: #5b6478; font-weight: 500; }
#herramientas .h-caja { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 116px; height: 40px; padding: 0 12px; border: 1px solid #cfd5de; border-radius: 8px; background: var(--surface); }
#herramientas #hTribunal .h-caja { min-width: 130px; } #herramientas #hRegion .h-caja { min-width: 116px; }
#herramientas .h-caja b { font-weight: 600; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#herramientas .h-filtro.activo .h-caja, #herramientas .h-nuevas.activo .h-caja { border-color: #1f5bd1; box-shadow: 0 0 0 1px #1f5bd1; }
#herramientas .h-nuevas { border: 1px solid #cfd5de !important; border-radius: 8px; padding: 0 0 0 12px !important; }
#herramientas .h-nuevas .h-caja { border: 0; min-width: 100px; }
#herramientas .h-nuevas.activo { border-color: var(--gold) !important; }
#herramientas .h-cae { color: #5b6478; font-size: .8rem; }
#herramientas .h-menu:has(#hExportar) { margin-left: auto; }
body.archivos.vp-otra #herramientas .h-graf { margin-left: auto; }
/* Categorías: pastillas grandes con su cantidad */
#herramientas .h-cat { display: inline-flex; gap: 10px; border: 0; overflow: visible; border-radius: 0; }
#herramientas .h-cat button { border: 1px solid #dfe3ea !important; background: #f4f6f9; border-radius: 10px; padding: 9px 16px; font: 600 14.5px var(--body); color: var(--ink); gap: 10px; }
#herramientas .h-cat button small { background: #e3e7ee; color: var(--ink); border-radius: 99px; padding: 2px 10px; font-size: 13px; }
#herramientas .h-cat button[aria-pressed="true"] { background: #14213d; border-color: #14213d !important; color: #fff; }
#herramientas .h-cat button[aria-pressed="true"] small { background: #e8b53f; color: #1c1503; }
/* Buscador a la derecha */
#herramientas .h-buscar { display: flex; align-items: center; gap: 10px; flex: 0 1 540px; min-width: 260px; height: 44px; border: 1px solid #cfd5de; border-radius: 10px; padding: 0 14px; background: var(--surface); }
#herramientas .h-buscar .ico { width: 20px; height: 20px; color: #5b6478; flex: none; }
#herramientas .h-buscar input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font: 15px var(--body); color: var(--ink); height: 40px; padding: 0; }
body.archivos #formula, body.archivos .formula { display: none !important; }
/* Tabla */
body.archivos .principal { background: #f4f6f9; padding: 16px 16px 0; }
body.archivos #tablaCab { background: #f3f5f8; border: 1px solid #e3e7ee; border-radius: 12px 12px 0 0; padding: 16px 0; font: 700 .8rem var(--display); letter-spacing: .06em; color: #4b5568; }
body.archivos #tablaCab [data-col]::after { content: " ⇅" !important; opacity: .55 !important; font-size: .9em; }
body.archivos #tablaCab [data-col].orden::after { content: " ↑" !important; } body.archivos #tablaCab [data-col].orden[data-dir="desc"]::after { content: " ↓" !important; }
.tc-mas { text-align: center; } .tc-mas button, .c-mas { background: none; border: 0; font-size: 1.35rem; color: #5b6478; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 6px; }
.tc-mas button:hover, .c-mas:hover { background: #e9edf3; }
body.archivos #lista { background: var(--surface); border: 1px solid #e3e7ee; border-top: 0; border-radius: 0 0 12px 12px; }
body.archivos #lista .empresa { border-bottom: 1px solid #e8ebf0; }
body.archivos #lista .cab { padding-block: 16px; }
body.archivos #lista .c-emp h2 { font: 800 1rem/1.25 var(--display); color: #14213d; text-transform: uppercase; }
body.archivos #lista .c-emp small { color: #5b6478; font-size: .9rem; }
body.archivos #lista .c-emp .ico { color: #14213d; }
body.archivos #lista .empresa.sin-nombre .c-emp h2 { font-style: italic; font-weight: 600; color: #4b5568; text-transform: none; }
body.archivos #lista .empresa.persona .c-emp h2 { font-style: italic; font-weight: 600; color: #3d4f78; }
body.archivos #lista .c-det b { font-weight: 700; color: #14213d; } body.archivos #lista .c-det small { color: #5b6478; }
body.archivos #lista .c-monto .monto { font: 800 1.02rem var(--display); color: #14213d; } body.archivos #lista .c-monto small { color: #5b6478; }
body.archivos #lista .c-fecha { color: #14213d; } body.archivos #lista .c-fecha small { color: #5b6478; }
body.archivos #lista .c-mas { display: block; text-align: center; }
/* Estados con ícono */
#lista .pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 5px 14px; font-weight: 700; font-size: .88rem; }
#lista .pill .ico-p { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
#lista .pill.notificada { background: #e6f5ec; color: #1f7a44; }
#lista .pill.c-reservada { background: #eef0f3; color: #3b4558; }
#lista .pill.c-sin_empresa { background: #e8effc; color: #2457b8; }
#lista .pill.nueva { background: #fdf0d2; color: #9a6400; }
#lista .pill.pendiente, #lista .pill.sin_gestion, #lista .pill.enviada { background: #e5edfb; color: #1f4fa8; }
#lista .pill.fallida { background: #fde8e6; color: #b42318; }
#lista .pill.otra { background: #eef0f3; color: #3b4558; }
/* Barra de estado clara */
body.archivos .barra-estado { background: var(--surface); color: var(--ink); border-top: 1px solid #e3e7ee; padding: 12px 22px; font-size: .92rem; gap: 0; }
body.archivos .barra-estado > span { padding: 0 14px; border-left: 1px solid #d6dbe3; }
body.archivos .barra-estado > span:first-child { padding-left: 0; border-left: 0; }
body.archivos .barra-estado b { font-weight: 800; color: #14213d; }
body.archivos .barra-estado .e-fin { margin-left: auto; border-left: 0; display: inline-flex; align-items: center; gap: 8px; color: #3b4558; }
.e-punto { width: 10px; height: 10px; border-radius: 50%; background: #22a55a; display: inline-block; }
.e-chev { color: #1f5bd1; margin-left: 10px; font-size: 1rem; }
/* Menú flotante ⋮ */
.menu-flotante { position: fixed; z-index: 120; min-width: 240px; }
/* Las categorías también valen en Estadísticas y Abogados */
body.vp-otra:has([data-vp="abogados"][aria-pressed="true"]) .h-cat button:is([data-cat="reservadas"], [data-cat="personas"]),
body.vp-otra:has([data-vp="estadisticas"][aria-pressed="true"]) .h-cat button:is([data-cat="reservadas"], [data-cat="personas"]) { opacity: 1; pointer-events: auto; }
:root[data-tema="oscuro"] body.archivos :is(#herramientas, #tablaCab, #lista, .barra-estado) { border-color: #2a323e; }
:root[data-tema="oscuro"] body.archivos .principal { background: var(--bg); }
:root[data-tema="oscuro"] #herramientas :is(.h-caja, .h-buscar, .h-vp .h-btn, .h-nuevas) { border-color: #3a4352 !important; }
:root[data-tema="oscuro"] #herramientas .h-cat button { background: #1b2230; border-color: #3a4352 !important; color: var(--ink); }
:root[data-tema="oscuro"] body.archivos #tablaCab { background: #1b2230; color: #b8c1d1; }
:root[data-tema="oscuro"] body.archivos #lista .c-emp h2, :root[data-tema="oscuro"] body.archivos #lista .c-det b, :root[data-tema="oscuro"] body.archivos #lista .c-monto .monto, :root[data-tema="oscuro"] body.archivos .barra-estado b { color: var(--ink); }
@media (max-width: 760px) { #herramientas .h-buscar { flex: 1 1 100%; } #herramientas .h-cat { overflow-x: auto; } .cuenta-avatar { display: none; } }
/* Ajustes de medida para que cada fila de la barra quede en una línea */
body.archivos #herramientas { align-items: stretch; }
#herramientas .h-r1, #herramientas .h-r2 { width: 100%; gap: 8px; }
#herramientas .h-sep { margin: 0 4px; }
#herramientas .h-vp .h-btn { padding: 0 14px; }
#herramientas #hRegion .h-caja { min-width: 104px; } #herramientas #hTribunal .h-caja { min-width: 120px; }
#herramientas .h-r2 { flex-wrap: nowrap; }
#herramientas .h-r2 .h-cat { flex: none; }
#vistaApp .tope .logo > span:last-child { min-width: max-content; }
#vistaApp .tope .logo b { display: block; white-space: nowrap; }
@media (max-width: 1280px) { #herramientas .h-r1 { flex-wrap: wrap; } #herramientas .h-r2 { flex-wrap: wrap; } }
#lista .pill.otra.c-sin_empresa { background: #e8effc; color: #2457b8; }
#lista .pill.otra.c-reservada { background: #eef0f3; color: #3b4558; }


/* ---------- Barra en dos líneas fijas en todas las vistas ---------- */
.h-graf, body.archivos.vp-otra .h-graf { display: none !important; }
body.archivos.vp-otra #herramientas .h-menu:is(:has(#hExportar), :has(#hImprimir), :has(#hOrdenar)) { display: inline-block !important; }
body.vp-otra #herramientas .h-menu:is(:has(#hRegion), :has(#hTribunal), :has(#hNuevas)) { opacity: 1 !important; pointer-events: auto !important; }
#herramientas .h-r1, #herramientas .h-r2 { flex-wrap: nowrap !important; }
#herramientas .h-r1 > *, #herramientas .h-r2 > * { flex-shrink: 0; }
#herramientas .h-buscar { flex-shrink: 1 !important; }
@media (max-width: 1440px) { #herramientas .h-btn { font-size: 13.5px; padding: 0 9px; } #herramientas .h-vp .h-btn { padding: 0 11px; } #herramientas .h-caja { min-width: 92px !important; padding: 0 9px; } #herramientas .h-cat button { padding: 8px 12px; font-size: 13.5px; } }
@media (max-width: 1280px) { #herramientas .h-etq, #herramientas .h-etq2 { display: none; } #herramientas .h-btn .ico { display: none; } #herramientas .h-vp .h-btn .ico { display: inline; } }
@media (max-width: 1100px) { #herramientas .h-r1, #herramientas .h-r2 { flex-wrap: wrap !important; } }
/* Estadísticas y Abogados sin cabecera propia: los filtros están en la barra */
#analisis .est-cab, #analisis .est-barra, #analisis .ab-barra, #abogados > .est-cab { display: none !important; }
/* Botón de imprimir en la esquina de cada gráfico */
.g-btn.g-imprimir { display: inline-grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 1px solid #cfd5de; border-radius: 8px; background: var(--surface); }
.g-btn.g-imprimir .ico { width: 17px; height: 17px; fill: none; stroke: #3b4558; stroke-width: 1.8; }
#analisis .g-elegir, body.eligiendo-graf #analisis .g-elegir { display: none !important; }
.ab-lado { font-size: .78rem; font-weight: 700; border-radius: 99px; padding: 2px 9px; } .ab-lado.dte { background: #e5edfb; color: #1f4fa8; } .ab-lado.ddo { background: #fde8e6; color: #9b2c1f; }
@media print { body.imp-est .imp-uno { display: block !important; } body.imp-est .imp-uno .graficos { grid-template-columns: 1fr; } }
body.vp-otra #herramientas .h-menu:is(:has(#hExportar), :has(#hImprimir), :has(#hOrdenar)) { opacity: 1 !important; pointer-events: auto !important; }

/* ---------- Interruptor del período cargado (encabezado) ---------- */
.periodo-sel { display: none; align-items: center; gap: 14px; margin-left: auto; margin-right: 18px; padding-right: 18px; border-right: 1px solid rgba(255, 255, 255, .25); color: #fff; }
body.con-sesion .periodo-sel, #vistaApp:not([hidden]) .periodo-sel { display: flex; }
.periodo-int { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 600 .9rem var(--body); white-space: nowrap; }
.periodo-int input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.periodo-pista { width: 42px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .25); position: relative; transition: background .2s; flex: none; }
.periodo-pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.periodo-int input:checked + .periodo-pista { background: #e8b53f; } .periodo-int input:checked + .periodo-pista::after { transform: translateX(18px); }
.periodo-int input:focus-visible + .periodo-pista { outline: 2px solid #e8b53f; outline-offset: 2px; }
.periodo-texto { display: grid; line-height: 1.15; min-width: 0; }
.periodo-texto small { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.periodo-texto b { font: 800 .98rem var(--display); color: #f4d27f; white-space: nowrap; }
.periodo-texto span { font-size: .8rem; opacity: .85; white-space: nowrap; }
@media (max-width: 1280px) { .periodo-texto span { display: none; } #vistaApp .menu-sitio [data-ir] { padding: 6px 12px; } }
@media (max-width: 760px) { .periodo-sel { margin: 0; padding: 0; border: 0; gap: 8px; } .periodo-texto, .periodo-etq { display: none; } }
/* Encabezado de la app a todo el ancho: logo, menú en una fila, período y cuenta */
#vistaApp .tope-in { max-width: none; padding-inline: 24px; gap: 24px; flex-wrap: nowrap; }
#vistaApp .menu-sitio { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: none; }
#vistaApp .menu-sitio [data-ir] { white-space: nowrap; }
@media (max-width: 1200px) { #vistaApp .tope .logo small { display: none; } }
/* Barra de avance de la pantalla de carga */
.cargando-barra { width: min(320px, 70vw); height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.cargando-barra i { display: block; height: 100%; width: 0; border-radius: 99px; background: #e8b53f; transition: width .5s ease; }

/* ---------- Tamaño de empresa (SII) ---------- */
body.archivos .tabla-cab, body.archivos .empresa { grid-template-columns: minmax(0, 1.2fr) 124px minmax(0, 1.2fr) minmax(96px, .6fr) minmax(0, 1fr) 110px 28px; }
.c-tam { display: grid; gap: 3px; justify-items: start; align-content: center; }
.c-tam small { color: #5b6478; font-size: .78rem; }
.tam { display: inline-block; border-radius: 99px; padding: 3px 11px; font: 700 .8rem var(--body); white-space: nowrap; }
.tam.t-micro { background: #e6f5ec; color: #1f7a44; } .tam.t-pequena { background: #e5edfb; color: #1f4fa8; }
.tam.t-mediana { background: #fdf0d2; color: #8a5a00; } .tam.t-grande { background: #f1e7fb; color: #6b3fa0; }
.tam.t-sinventas, .tam.t-nd { background: #eef0f3; color: #5b6478; font-weight: 600; }
body.archivos.letra-chica #lista .c-tam small { display: none; }
#hTamanoLista label { display: flex; } #hTamanoLista .tam-n { margin-left: auto; color: #5b6478; font-size: .78rem; }
#herramientas .h-r2 .h-menu:has(#hTamano) { flex: none; margin-left: auto; }
@media (max-width: 760px) { body.archivos .tabla-cab, body.archivos .empresa { grid-template-columns: minmax(0, 1fr); } .c-tam { grid-auto-flow: column; } }

/* Contacto: solo el correo, sin formulario */
.contacto-correo { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.contacto-correo .correo-grande { font: 800 clamp(1.3rem, 3.4vw, 2.1rem)/1.2 var(--display); color: var(--ink); text-decoration: none; word-break: break-all; margin: 14px 0 6px; }
.contacto-correo .correo-grande:hover { text-decoration: underline; }
.contacto-correo .correo-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.contacto-correo .correo-acciones .btn { margin-top: 0; text-decoration: none; }

/* ---------- Contacto rediseñado: fondo animado, tarjetas de vidrio y mapa de Chile interactivo ---------- */
.periodo-sel[hidden] { display: none !important; }
.contacto-nuevo { position: relative; overflow: hidden; color: #fff; isolation: isolate; min-height: calc(100vh - 88px);
  background: radial-gradient(1100px 700px at 78% 45%, #0d3a78 0%, rgba(13, 58, 120, 0) 60%), radial-gradient(900px 600px at 10% 90%, #0a2a5c 0%, rgba(10, 42, 92, 0) 65%), linear-gradient(160deg, #04102a 0%, #061a3d 55%, #041029 100%); }
.cn-fondo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.cn-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: center; max-width: 1480px; margin: 0 auto; padding: clamp(36px, 6vw, 80px) clamp(16px, 5vw, 72px); min-height: inherit; }
.cn-ceja { font: 700 .95rem var(--display); letter-spacing: .32em; text-transform: uppercase; color: #f0b43c; margin: 0 0 14px; }
.cn-texto h1 { font: 900 clamp(2.4rem, 5.4vw, 4.6rem)/1.02 var(--display); letter-spacing: -.02em; margin: 0 0 22px; color: #fff; }
.cn-texto h1 span { background: linear-gradient(90deg, #1fb6ff, #38d6ff 55%, #7fe6ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(31, 182, 255, .35)); }
.cn-bajada { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: #dbe7f7; max-width: 34em; margin: 0 0 30px; }
.cn-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 880px; }
.cn-tarjeta { display: flex; gap: 20px; align-items: center; padding: 22px 24px; border-radius: 18px; background: linear-gradient(150deg, rgba(28, 56, 104, .55), rgba(10, 26, 58, .55)); border: 1px solid rgba(126, 176, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .25s, border-color .25s, box-shadow .25s; }
.cn-tarjeta:hover { transform: translateY(-3px); border-color: rgba(56, 214, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 48px rgba(0, 0, 0, .3), 0 0 0 1px rgba(56, 214, 255, .15), 0 0 30px rgba(31, 182, 255, .15); }
.cn-tarjeta h4 { margin: 0 0 6px; font: 700 .8rem var(--display); letter-spacing: .13em; text-transform: uppercase; color: #f0b43c; }
.cn-tarjeta p { margin: 0; font-size: 1.2rem; color: #eef4fc; }
.cn-ico { flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; }
.cn-ico svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cn-ico.azul { background: radial-gradient(circle at 35% 30%, #2f7dff, #0f3fb0 70%); box-shadow: 0 0 0 6px rgba(47, 125, 255, .12), 0 0 26px rgba(47, 125, 255, .45); }
.cn-ico.ambar { background: radial-gradient(circle at 35% 30%, #6b4a1c, #3a2710 75%); box-shadow: 0 0 0 6px rgba(240, 180, 60, .1), 0 0 22px rgba(240, 180, 60, .25); }
.cn-ico.ambar svg { stroke: #f4c25a; }
.cn-correo { grid-column: 1 / -1; padding: 28px 30px; }
.cn-correo .cn-ico { width: 78px; height: 78px; } .cn-correo .cn-ico svg { width: 38px; height: 38px; }
.cn-mail { display: block; white-space: nowrap; font: 800 clamp(1.3rem, 2.15vw, 2.2rem)/1.15 var(--display); color: #fff; text-decoration: none; overflow-wrap: anywhere; margin: 2px 0 16px; letter-spacing: -.01em; text-shadow: 0 0 24px rgba(56, 214, 255, .25); }
.cn-mail:hover { color: #7fe6ff; }
.cn-copiar { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem var(--body); color: #fff; background: rgba(18, 60, 140, .45); border: 1.5px solid #38c6ff; border-radius: 999px; padding: 11px 24px; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s; }
.cn-copiar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.cn-copiar:hover { background: rgba(31, 140, 255, .35); box-shadow: 0 0 24px rgba(56, 198, 255, .45); transform: translateY(-1px); }
.cn-copiar.ok { border-color: #3ddc97; background: rgba(61, 220, 151, .18); }
.cn-mapa { position: relative; height: min(82vh, 780px); min-height: 560px; }
.cn-mapa canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; }
.cn-chip { position: absolute; display: flex; align-items: flex-end; gap: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(14, 34, 72, .55); border: 1px solid rgba(126, 176, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .95rem; line-height: 1.3; color: #c9d8ee; pointer-events: none; animation: cn-flota 7s ease-in-out infinite; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
.cn-chip svg { width: 60px; height: 34px; }
.cn-chip rect { fill: #1f7bff; } .cn-chip rect:last-child { fill: #38c6ff; }
.cn-chip .linea { fill: none; stroke: #38a8ff; stroke-width: 2.2; stroke-linejoin: round; } .cn-chip .area { fill: rgba(31, 123, 255, .3); }
.cn-chip.ch1 { top: 8%; left: 2%; } .cn-chip.ch2 { top: 26%; right: 0; animation-delay: -2.3s; } .cn-chip.ch3 { bottom: 20%; right: 4%; animation-delay: -4.6s; }
@keyframes cn-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 1100px) { .cn-in { grid-template-columns: minmax(0, 1fr); } .cn-mapa { height: 620px; min-height: 0; } }
@media (max-width: 640px) {
  .cn-tarjetas { grid-template-columns: minmax(0, 1fr); } .cn-tarjeta { padding: 18px; gap: 14px; } .cn-correo { padding: 22px 18px; }
  .cn-ico { width: 54px; height: 54px; } .cn-correo .cn-ico { width: 58px; height: 58px; } .cn-correo { flex-direction: column; align-items: flex-start; }
  .cn-mapa { height: 520px; } .cn-chip { display: none; } .cn-mail { white-space: normal; overflow-wrap: anywhere; font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .cn-chip { animation: none; } .cn-tarjeta, .cn-copiar { transition: none; } }
/* Correo destacado en tarjeta blanca y franja de actualización diaria */
.cn-correo { background: #fff; border-color: #fff; box-shadow: 0 22px 50px rgba(0, 0, 0, .35), 0 0 40px rgba(56, 198, 255, .18); backdrop-filter: none; -webkit-backdrop-filter: none; }
.cn-correo:hover { border-color: #fff; box-shadow: 0 26px 56px rgba(0, 0, 0, .38), 0 0 46px rgba(56, 198, 255, .3); }
.cn-correo h4 { color: #a8740f; }
.cn-correo .cn-mail { color: #0b1f45; text-shadow: none; }
.cn-correo .cn-mail:hover { color: #1659d6; }
.cn-correo .cn-copiar { color: #fff; background: linear-gradient(135deg, #1f6fff, #0f45c0); border-color: transparent; box-shadow: 0 8px 20px rgba(31, 111, 255, .35); }
.cn-correo .cn-copiar:hover { background: linear-gradient(135deg, #2f80ff, #1652d6); box-shadow: 0 10px 26px rgba(31, 111, 255, .5); }
.cn-correo .cn-copiar.ok { background: #14a36b; box-shadow: 0 8px 20px rgba(20, 163, 107, .35); }
.cn-diaria { grid-column: 1 / -1; }
.cn-diaria p b { color: #5ee6a8; }
.cn-ico.verde { background: radial-gradient(circle at 35% 30%, #1f9e6c, #0b5a3d 75%); box-shadow: 0 0 0 6px rgba(61, 220, 151, .1), 0 0 22px rgba(61, 220, 151, .3); }
.cn-envivo { display: inline-block; width: 9px; height: 9px; margin-left: 8px; border-radius: 50%; background: #3ddc97; vertical-align: middle; box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: cn-latido 2s ease-out infinite; }
@keyframes cn-latido { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); } 100% { box-shadow: 0 0 0 10px rgba(61, 220, 151, 0); } }
@media (prefers-reduced-motion: reduce) { .cn-envivo { animation: none; } }

/* Contacto en una sola pantalla: alturas atadas al alto de la ventana */
@media (min-width: 1101px) {
  .contacto-nuevo { height: calc(100svh - var(--alto-tope, 82px)); min-height: 600px; }
  .cn-in { height: 100%; min-height: 0; padding-block: clamp(18px, 3.5vh, 44px); }
  .cn-ceja { font-size: clamp(.78rem, 1.5vh, .95rem); margin-bottom: clamp(6px, 1.2vh, 14px); }
  .cn-texto h1 { font-size: clamp(2.2rem, 7vh, 4.4rem); margin-bottom: clamp(10px, 2vh, 22px); }
  .cn-bajada { font-size: clamp(.98rem, 2vh, 1.25rem); margin-bottom: clamp(14px, 3vh, 30px); }
  .cn-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vh, 16px); }
  .cn-tarjeta { flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(14px, 2.2vh, 22px) 20px; }
  .cn-tarjeta p { font-size: clamp(.98rem, 1.9vh, 1.15rem); line-height: 1.35; }
  .cn-tarjeta .cn-ico { width: clamp(42px, 6vh, 56px); height: clamp(42px, 6vh, 56px); } .cn-tarjeta .cn-ico svg { width: 26px; height: 26px; }
  .cn-correo { flex-direction: row; align-items: center; gap: 22px; padding: clamp(18px, 3vh, 28px) 28px; }
  .cn-correo .cn-ico { width: clamp(56px, 8vh, 76px); height: clamp(56px, 8vh, 76px); }
  .cn-diaria { grid-column: auto; }
  .cn-mail { margin-bottom: clamp(8px, 1.6vh, 16px); }
  .cn-mapa { height: 100%; min-height: 0; }
}
/* Recuadros flotantes con explicación al hacer clic */
.cn-chip { pointer-events: auto; cursor: pointer; font: inherit; text-align: left; color: #c9d8ee; display: block; transition: border-color .25s, box-shadow .25s, width .3s; }
.cn-chip:hover { border-color: rgba(56, 198, 255, .55); box-shadow: 0 14px 30px rgba(0, 0, 0, .25), 0 0 22px rgba(31, 182, 255, .25); }
.cn-chip:focus-visible { outline: 2px solid #38c6ff; outline-offset: 3px; }
.chip-cara { display: flex; align-items: flex-end; gap: 14px; transition: opacity .3s; }
.chip-info { display: none; width: 250px; font-size: .92rem; line-height: 1.45; color: #e3edfa; animation: cn-aparece .35s ease both; }
.chip-info b { display: block; color: #f0b43c; font: 700 .78rem var(--display); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.cn-chip.info { animation-play-state: paused; background: rgba(10, 30, 70, .88); border-color: rgba(56, 198, 255, .6); z-index: 2; }
.cn-chip.info .chip-cara { display: none; } .cn-chip.info .chip-info { display: block; }
@keyframes cn-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cn-chip.ch2.info, .cn-chip.ch3.info { right: 0; }
/* Pantalla de Entrar: se mantiene el banner superior de la portada */
body.entrando #vistaPortada > :not(.tope) { display: none !important; }
body.entrando .entrar-cab { display: none; }
body.entrando .entrar { min-height: calc(100svh - 82px); grid-template-rows: 1fr auto; padding-top: 28px; }
.cn-chip:hover { animation-play-state: paused; }
body.entrando #vistaPortada { min-height: 0 !important; height: auto !important; padding: 0 !important; display: block !important; background: none !important; }
body.entrando #vistaPortada .tope { position: sticky; top: 0; }
.aviso-demo { margin: 4px 0 6px; padding: 12px 14px; border-radius: 10px; background: #eaf3ff; border: 1px solid #bcd6fb; color: #123264; font-size: .98rem; line-height: 1.45; }
/* Nombres de cuenta largos (p. ej. "Usuario de prueba"): se recortan para no empujar el avatar fuera del banner */
#btnCuenta .cuenta-lineas b { display: block; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Banner de la plataforma en pantallas medianas: todo en una línea, con el avatar siempre visible */
@media (min-width: 901px) and (max-width: 1500px) {
  #vistaApp .tope-in { gap: 14px; }
  #vistaApp .tope .logo small { display: none; }
  #vistaApp .tope .logo b { font-size: clamp(.95rem, 1.25vw, 1.25rem) !important; }
  #vistaApp .tope .logo-radar { width: 46px; height: 46px; }
  #vistaApp .periodo-sel { gap: 10px; }
}

/* Banda inferior con la fecha de la última actualización */
.banda-act { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; min-height: 40px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: rgba(5, 18, 44, .92); color: #dbe7f7; font: 500 .92rem var(--body); text-align: center; border-top: 1px solid rgba(120, 180, 255, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 -8px 24px rgba(0, 0, 0, .2); }
.banda-act b { color: #fff; font-weight: 700; }
.banda-extra { color: #9fb8d8; }
.banda-sep { color: #5d7aa3; }
.banda-punto { width: 9px; height: 9px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: cn-latido 2s ease-out infinite; flex: none; }
body.con-banda { padding-bottom: 44px; }
@media (min-width: 1101px) { body.con-banda .contacto-nuevo { height: calc(100svh - var(--alto-tope, 82px) - 40px); } }
@media (max-width: 760px) { .banda-sep, .banda-extra { display: none; } .banda-act { font-size: .85rem; } }
@media print { .banda-act { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .banda-punto { animation: none; } }