/* Gestión InFi v5 · sistema visual común (Monitoreo, Comercial, Pulso y Operación).
   Marca InFi: Public Sans y verde azulado #0F5C5A. Modo claro y oscuro con los mismos nombres de tokens;
   el oscuro se eligió aparte (no es una inversión) y conserva el acento de marca. Los colores de datos
   (--s1…--s4) están validados para daltonismo en ambos modos. */

@font-face { font-family: "Public Sans"; src: url("../accounts/fonts/PublicSans-Regular.a0d45ec6cee2.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../accounts/fonts/PublicSans-Medium.38b89f627846.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../accounts/fonts/PublicSans-SemiBold.2fe33dfe398c.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../accounts/fonts/PublicSans-Bold.fe554289d33b.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root, [data-theme="light"] {
  --fondo: #F4F6F5; --lat: #FAFBFA; --lat-tx: #4E5A56; --lat-tx-act: #16201E; --lat-act: #E8EEEB; --lat-linea: #E4E9E6; --lat-sec: #87928E;
  --sup: #FFFFFF; --sup-2: #F8FAF9; --sup-h: #F3F6F4; --hundida: #ECF0EE; --linea: #E3E8E5; --linea-2: #EDF1EF; --linea-f: rgba(16, 34, 31, .17);
  --tx: #16201E; --tx-2: #56625E; --tx-3: #66726E;
  --acc: #0F5C5A; --acc-f: #0B4644; --acc-tx: #FFFFFF; --acc-t: #0F5C5A; --acc-s: #E4EFEC; --acc-ss: #F1F7F5; --acc-m: rgba(15, 92, 90, .16);
  --info: #3B6D8C; --info-s: #E6EDF2; --info-t: #2A5170;
  --ok: #2F7A3A; --ok-s: #E6F3E7; --at: #9A6418; --at-s: #F8EFE0; --cr: #B34A43; --cr-s: #F9EBEA; --cr-t: #8A342E;
  --s1: #009486; --s2: #B6781E; --s3: #2F6FA0; --s4: #B34A43; --grid: #EDF1EF;
  --sombra: 0 1px 2px rgba(22, 32, 30, .05);
  --sombra-alta: 0 24px 60px -24px rgba(22, 32, 30, .35), 0 0 0 1px rgba(22, 32, 30, .06);
  --velo: rgba(22, 32, 30, .28); --papel: #FFFFFF;
  --logo-claro: block; --logo-oscuro: none;
  color-scheme: light;
}
[data-theme="dark"] {
  --fondo: #0D1211; --lat: #0A0F0E; --lat-tx: #93A09B; --lat-tx-act: #EEF3F1; --lat-act: #172120; --lat-linea: #1A2421; --lat-sec: #63706B;
  --sup: #131A18; --sup-2: #0F1614; --sup-h: #18221F; --hundida: #0A0F0E; --linea: #1F2A27; --linea-2: #19231F; --linea-f: rgba(233, 240, 238, .16);
  --tx: #ECF2F0; --tx-2: #A3B0AB; --tx-3: #7D8B86;
  --acc: #3FB0A3; --acc-f: #5CC2B6; --acc-tx: #05211E; --acc-t: #7DD0C6; --acc-s: rgba(63, 176, 163, .15); --acc-ss: rgba(63, 176, 163, .08); --acc-m: rgba(63, 176, 163, .26);
  --info: #6FA3C4; --info-s: rgba(111, 163, 196, .14); --info-t: #9CC3DC;
  --ok: #7DCF86; --ok-s: rgba(125, 207, 134, .13); --at: #E3A64A; --at-s: rgba(227, 166, 74, .14); --cr: #E8817A; --cr-s: rgba(232, 129, 122, .14); --cr-t: #F0A49E;
  --s1: #19B3A2; --s2: #D4932F; --s3: #4A8BC4; --s4: #D0625A; --grid: #1A2421;
  --sombra: 0 0 0 1px rgba(255, 255, 255, .02);
  --sombra-alta: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .07);
  --velo: rgba(0, 0, 0, .55); --papel: #FFFFFF;
  --logo-claro: none; --logo-oscuro: block;
  color-scheme: dark;
}
:root { --e: cubic-bezier(.23, 1, .32, 1); --f: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { font-family: var(--f); background: var(--fondo); color: var(--tx); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; }
body.anima, body.anima * { transition: background-color .3s var(--e), border-color .3s var(--e), color .2s var(--e) !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
svg.i { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo-claro { display: var(--logo-claro); } .logo-oscuro { display: var(--logo-oscuro); }
option { background-color: var(--sup); color: var(--tx); }

/* ---------- Armazón ---------- */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .25s var(--e); }
.lat { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--lat); border-right: 1px solid var(--lat-linea); padding: 14px 10px; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; z-index: 30; }
.lat .marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; min-height: 42px; }
.lat .marca img { height: 24px; width: auto; display: var(--logo-claro); }
.lat .marca img.logo-oscuro { display: var(--logo-oscuro); }
.zona { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-t); padding: 2px 7px; border-radius: 6px; background: var(--acc-s); white-space: nowrap; }
.lat .sec { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--lat-sec); padding: 14px 10px 5px; white-space: nowrap; }
.lat a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--lat-tx); text-decoration: none; font-weight: 500; font-size: 13.5px; white-space: nowrap; transition: background .15s var(--e), color .15s var(--e); }
.lat a:hover { background: var(--lat-act); color: var(--lat-tx-act); }
.lat a.act { background: var(--lat-act); color: var(--lat-tx-act); font-weight: 600; }
.lat a.act svg.i { color: var(--acc-t); }
.lat a .n { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--lat-sec); font-variant-numeric: tabular-nums; }
.lat a .n.al { color: var(--acc-tx); background: var(--acc); padding: 0 6px; border-radius: 999px; line-height: 18px; }
.lat a .pronto { margin-left: auto; font-size: 10.5px; color: var(--lat-sec); }
.lat .pie { margin-top: auto; padding: 12px 4px 0; border-top: 1px solid var(--lat-linea); display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lat-tx); }
.lat .pie .yo { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding: 4px; border-radius: 8px; text-decoration: none; }
.lat .pie .yo:hover { background: var(--lat-act); }
.lat .pie .yo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat .pie small { display: block; color: var(--lat-sec); font-size: 11.5px; }
.lat .pie form { margin: 0; }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--acc-s); color: var(--acc-t); flex-shrink: 0; }
.av.chico { width: 22px; height: 22px; font-size: 9.5px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 24px; background: color-mix(in srgb, var(--fondo) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.migas { font-size: 13.5px; color: var(--tx-3); display: flex; gap: 8px; align-items: center; white-space: nowrap; min-width: 0; overflow: hidden; }
.migas b { color: var(--tx); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.migas a { text-decoration: none; } .migas a:hover { color: var(--tx); }
.g-buscar { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 300px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--linea); background: var(--sup); color: var(--tx-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-align: left; }
.g-buscar:hover { border-color: color-mix(in srgb, var(--tx-3) 50%, var(--linea)); }
.g-buscar kbd { margin-left: auto; font: 500 11px var(--f); padding: 0 6px; border-radius: 5px; border: 1px solid var(--linea); }
.ibtn { position: relative; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--linea); background: var(--sup); display: grid; place-items: center; color: var(--tx-2); transition: background .15s, color .15s; flex-shrink: 0; padding: 0; text-decoration: none; }
.ibtn:hover { background: var(--sup-h); color: var(--tx); }
.ibtn .pt { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--s4); box-shadow: 0 0 0 2px var(--sup); }
.ibtn.abrir-m { display: none; }
.tema .sol { display: var(--logo-oscuro); } .tema .luna { display: var(--logo-claro); }
.cont { padding: 24px 28px 72px; width: 100%; max-width: 1320px; }
.cont.ancho { max-width: none; padding: 0; }

.lat a .txt { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Piezas comunes ---------- */
.cab { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.cab h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; font-weight: 700; line-height: 1.2; }
.cab p { margin: 4px 0 0; color: var(--tx-2); max-width: 70ch; }
.cab .der { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--linea); background: var(--sup); font-weight: 600; font-size: 13px; color: var(--tx); transition: transform .12s var(--e), background .2s, filter .2s, border-color .2s; white-space: nowrap; text-decoration: none; line-height: 1; }
.btn:hover { background: var(--sup-h); }
.btn:active { transform: translateY(1px); }
.btn.p, .btn.pri { background: var(--acc); border-color: transparent; color: var(--acc-tx); }
.btn.p:hover, .btn.pri:hover { background: var(--acc-f); }
.btn.fant, .btn.fantasma { border-color: transparent; background: none; color: var(--tx-2); }
.btn.fant:hover, .btn.fantasma:hover { background: var(--sup-h); color: var(--tx); }
.btn.chico { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn.alerta { color: var(--cr); }
.btn.alerta:hover { background: var(--cr-s); border-color: color-mix(in srgb, var(--cr) 30%, var(--linea)); }
.btn.peligro { background: var(--cr); color: #fff; border-color: transparent; }
.btn.peligro:hover { filter: brightness(1.08); }
.btn[disabled], .btn.off { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn svg.i { width: 15px; height: 15px; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--sup-2); border: 1px solid var(--linea); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button, .seg a { height: 27px; padding: 0 11px; border: 0; border-radius: 7px; background: none; font-size: 12.5px; font-weight: 500; color: var(--tx-2); white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; }
.seg button:hover, .seg a:hover { color: var(--tx); }
.seg .act { background: var(--sup); color: var(--tx); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 1px var(--linea); }
.seg span { color: var(--tx-3); font-weight: 500; margin-left: 5px; font-variant-numeric: tabular-nums; }
.tarj { background: var(--sup); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra); min-width: 0; }
.tarj > h3, .tarj > .h3 { margin: 0; padding: 14px 18px 0; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.tarj > h3 small, .tarj > .h3 small { margin-left: auto; font-weight: 500; color: var(--tx-3); font-size: 12px; text-align: right; }
.tarj > h3 .btn { margin-left: auto; }
.tarj > h3 small + .btn { margin-left: 8px; }
.grid { display: grid; gap: 14px; margin-bottom: 14px; }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.kpi { padding: 14px 16px 13px; position: relative; overflow: hidden; }
.kpi .et { font-size: 12px; color: var(--tx-2); font-weight: 500; padding-right: 66px; }
.kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 13px; color: var(--tx-3); font-weight: 500; }
.kpi .d { font-size: 12px; margin-top: 3px; color: var(--tx-3); }
.kpi .d b { font-weight: 600; }
.kpi svg.spk { position: absolute; right: 14px; top: 16px; width: 56px; height: 22px; overflow: visible; }
.sube { color: var(--ok); } .baja { color: var(--cr); }
.etq { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--acc-s); color: var(--acc-t); white-space: nowrap; }
.etq .pt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etq.ok { background: var(--ok-s); color: var(--ok); } .etq.at { background: var(--at-s); color: var(--at); } .etq.cr { background: var(--cr-s); color: var(--cr); }
.etq.info { background: var(--info-s); color: var(--info-t); }
.etq.gr { background: var(--sup-2); color: var(--tx-2); box-shadow: inset 0 0 0 1px var(--linea); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--sup-2); color: var(--tx-2); box-shadow: inset 0 0 0 1px var(--linea); white-space: nowrap; }
.nota { font-size: 12px; color: var(--tx-3); }
.vacio { padding: 44px 20px; text-align: center; color: var(--tx-2); font-size: 13.5px; }
.vacio .ic { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--sup-2); border: 1px solid var(--linea); color: var(--tx-3); }
.vacio b { display: block; color: var(--tx); font-size: 15px; margin-bottom: 4px; }
.vacio p { margin: 0 auto; max-width: 52ch; }
.vacio.chico { padding: 22px 18px; }
.aviso-g { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: var(--sup-2); border: 1px solid var(--linea); font-size: 13px; color: var(--tx-2); margin-bottom: 14px; }
.aviso-g svg.i { color: var(--acc-t); margin-top: 1px; }
.aviso-g b { color: var(--tx); }
.aviso-g.at svg.i { color: var(--at); }

/* Filas de acción */
.accion { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--linea-2); text-decoration: none; color: inherit; transition: background .15s; }
.tarj > h3 + .accion, .tarj > h3 + .lista-acciones > .accion:first-child { border-top: 0; margin-top: 8px; }
a.accion:hover, button.accion:hover { background: var(--sup-h); }
button.accion { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; text-align: left; }
.accion .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.accion .ic.acc { background: var(--acc-s); color: var(--acc-t); } .accion .ic.at { background: var(--at-s); color: var(--at); }
.accion .ic.cr { background: var(--cr-s); color: var(--cr); } .accion .ic.info { background: var(--info-s); color: var(--info-t); }
.accion .ic.gr { background: var(--sup-2); color: var(--tx-2); box-shadow: inset 0 0 0 1px var(--linea); }
.accion .q { flex: 1; min-width: 0; }
.accion .q b { display: block; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accion .q small { color: var(--tx-3); font-size: 12.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accion .cuando { font-size: 12px; color: var(--tx-3); white-space: nowrap; }
.accion:last-child { border-radius: 0 0 13px 13px; }
.tarj .pie-acc { padding: 10px 18px 14px; }

/* Gráficos */
.graf { padding: 10px 18px 16px; position: relative; }
.graf svg { display: block; width: 100%; overflow: visible; }
.graf text { font-family: var(--f); font-size: 11px; fill: var(--tx-3); }
.graf .sin-datos { padding: 34px 10px; text-align: center; color: var(--tx-3); font-size: 13px; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 18px 0; font-size: 12px; color: var(--tx-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; }
.tip { position: fixed; z-index: 95; pointer-events: none; background: var(--tx); color: var(--fondo); padding: 7px 10px; border-radius: 8px; font-size: 12px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .12s; white-space: nowrap; max-width: 320px; }
.tip b { display: block; font-size: 12.5px; }
.hb .fila { display: grid; grid-template-columns: var(--et-w, 140px) minmax(0, 1fr) 54px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.hb .fila > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb .pista { height: 9px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.hb .pista i { display: block; height: 100%; border-radius: 999px; background: var(--c, var(--s1)); }
.hb b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.embudo .fila { display: grid; grid-template-columns: var(--et-w, 190px) minmax(0, 1fr) 54px; align-items: center; gap: 12px; padding: 7px 0; }
.embudo .fila .et { font-size: 13px; color: var(--tx-2); }
.embudo .pista-e { min-width: 0; }
.embudo .barra { height: 26px; border-radius: 0 6px 6px 0; background: var(--s1); position: relative; min-width: 36px; }
.embudo .barra span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.embudo .tasa { font-size: 13px; text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tablas */
.barra-t { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--linea-2); flex-wrap: wrap; }
.campo-b { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; width: 260px; max-width: 100%; border-radius: 8px; border: 1px solid var(--linea); background: var(--sup-2); color: var(--tx-3); font-size: 13px; }
.campo-b:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-s); }
.campo-b input { border: 0; background: none; outline: none; width: 100%; color: var(--tx); }
.campo-b svg.i { width: 15px; height: 15px; }
.tabla-env { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
.t th { text-align: left; font-size: 11px; font-weight: 600; color: var(--tx-3); padding: 9px 14px; border-bottom: 1px solid var(--linea-2); white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }
.t td { padding: 10px 14px; border-bottom: 1px solid var(--linea-2); vertical-align: middle; }
.t td.der, .t th.der { text-align: right; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr { transition: background .12s; }
.t tbody tr.clic { cursor: pointer; }
.t tbody tr:hover { background: var(--sup-h); }
.t tbody tr.sel { background: var(--acc-ss); }
.t .tenue { color: var(--tx-3); }
.persona { display: flex; align-items: center; gap: 10px; min-width: 0; }
.persona > div { min-width: 0; }
.persona b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona small { color: var(--tx-3); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-l { display: flex; gap: 2px; align-items: flex-end; height: 18px; }
.mini-l i { width: 5px; border-radius: 2px; background: var(--s1); height: 18px; }
.mini-l i.o { background: var(--grid); height: 6px; }
.pie-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--linea-2); font-size: 12.5px; color: var(--tx-3); }
.pie-t .pag { display: flex; gap: 6px; }

/* Tablero de contactos */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.col { background: var(--sup-2); border: 1px solid var(--linea); border-radius: 14px; padding: 10px; min-height: 420px; transition: background .15s, border-color .15s; }
.col.sobre { background: var(--acc-ss); border-color: var(--acc-m); }
.col h4 { margin: 2px 4px 10px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.col h4 .c { font-size: 11.5px; color: var(--tx-3); font-weight: 600; margin-left: auto; }
.col h4 .pt { width: 8px; height: 8px; border-radius: 50%; }
.tk { display: block; width: 100%; text-align: left; background: var(--sup); border: 1px solid var(--linea); border-radius: 11px; padding: 11px 12px; margin-bottom: 8px; box-shadow: var(--sombra); cursor: grab; transition: transform .2s var(--e), box-shadow .2s var(--e); }
.tk:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.tk.arrastrando { opacity: .5; }
.tk b { display: block; font-size: 13.5px; font-weight: 600; }
.tk small { color: var(--tx-3); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk .pie-k { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--tx-3); }
.tk .pie-k .av { margin-left: auto; }
.tk .vieja, .t .vieja { color: var(--at); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.t .solo-m { display: none; }
/* Cobros › En línea (D-022, R-08 #15 y #17) */
.t-linea .motivo-cobro { display: block; margin-top: 4px; max-width: 320px; white-space: normal; font-size: 12.5px; color: var(--tx-2); line-height: 1.4; }
.t-linea .ref-cobro { display: block; margin-top: 3px; font-size: 12px; color: var(--tx-3); white-space: nowrap; }
.t-linea .estado-c { min-width: 220px; }
/* R-09 #9: up to 1100 px (narrow desktop and tablet) En línea uses the phone layout: state under the name */
@media (max-width: 1100px) { .t-linea .ocu-m { display: none; } .t-linea .solo-m { display: block; } }
.t-linea .acc-cobro { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.t-linea .acc-cobro a { color: var(--acc-t); text-decoration: none; } .t-linea .acc-cobro a:hover { text-decoration: underline; }
.t-linea .estado-m { margin-top: 6px; } .t-linea .estado-m .motivo-cobro { white-space: normal; overflow: visible; text-overflow: clip; } .t-linea .estado-m small { display: block; margin-bottom: 4px; }
.col .vacia { padding: 14px 6px; font-size: 12px; color: var(--tx-3); text-align: center; }

/* Ficha lateral, ventana, paleta, avisos, aviso flotante */
.velo { position: fixed; inset: 0; z-index: 60; background: var(--velo); opacity: 0; pointer-events: none; transition: opacity .25s; }
.ficha { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: 460px; max-width: 94vw; background: var(--sup); border-left: 1px solid var(--linea); box-shadow: var(--sombra-alta); transform: translateX(102%); transition: transform .35s var(--e); overflow-y: auto; }
body.f-abierta .velo, body.m-abierto .velo, body.k-abierta .velo { opacity: 1; pointer-events: auto; }
body.f-abierta .ficha { transform: none; }
:is(.ficha, .ficha-pagina) .cab-f { padding: 18px 20px; border-bottom: 1px solid var(--linea-2); display: flex; gap: 12px; align-items: center; position: sticky; top: 0; background: var(--sup); z-index: 1; }
:is(.ficha, .ficha-pagina) .cab-f .av { width: 42px; height: 42px; font-size: 14px; }
:is(.ficha, .ficha-pagina) .cab-f > div { min-width: 0; flex: 1; }
:is(.ficha, .ficha-pagina) .cab-f b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
:is(.ficha, .ficha-pagina) .cab-f small { color: var(--tx-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.ficha, .ficha-pagina) .sec-f { padding: 16px 20px; border-bottom: 1px solid var(--linea-2); }
:is(.ficha, .ficha-pagina) .sec-f:last-child { border-bottom: 0; }
:is(.ficha, .ficha-pagina) .sec-f h5 { margin: 0 0 10px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-3); font-weight: 600; }
:is(.ficha, .ficha-pagina) .acciones-f { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha .cargando { padding: 60px 20px; text-align: center; color: var(--tx-3); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.kv > span:first-child { color: var(--tx-2); flex-shrink: 0; }
.kv > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.lt { position: relative; padding-left: 18px; }
.lt > div { position: relative; padding: 0 0 13px; font-size: 13px; }
.lt > div::before { content: ""; position: absolute; left: -14px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--acc)); }
.lt > div::after { content: ""; position: absolute; left: -11px; top: 15px; bottom: -1px; width: 1px; background: var(--linea); }
.lt > div:last-child::after { display: none; }
.lt small { display: block; color: var(--tx-3); font-size: 12px; }
.lt .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.modal { position: fixed; z-index: 62; left: 50%; top: 10vh; width: min(520px, 94vw); max-height: 84vh; overflow-y: auto; transform: translate(-50%, 12px) scale(.98); opacity: 0; pointer-events: none; background: var(--sup); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-alta); transition: opacity .2s, transform .3s var(--e); }
body.m-abierto .modal { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.modal .cuerpo { padding: 20px 22px 4px; }
.modal h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.01em; }
.modal .pie-m { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; margin-top: 16px; border-top: 1px solid var(--linea-2); background: var(--sup-2); border-radius: 0 0 16px 16px; position: sticky; bottom: 0; }
.campo { margin-top: 14px; display: block; }
.campo > label, .campo > .et { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea { width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--linea); border-radius: 9px; background: var(--sup-2); outline: none; color: var(--tx); }
.campo textarea { height: 84px; padding: 9px 11px; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-s); }
.campo .ayuda, .campo .err { display: block; font-size: 12px; color: var(--tx-3); margin-top: 5px; }
.campo .err { color: var(--cr); font-weight: 500; }
.campo.error input, .campo.error select { border-color: var(--cr); }
.dos-c { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.resultado-pago { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--acc-ss); font-size: 13px; color: var(--tx-2); }
.resultado-pago b { color: var(--tx); }
.paleta { position: fixed; z-index: 63; left: 50%; top: 14vh; width: min(620px, 94vw); transform: translateX(-50%) scale(.98); opacity: 0; pointer-events: none; background: var(--sup); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-alta); transition: opacity .18s, transform .25s var(--e); overflow: hidden; }
body.k-abierta .paleta { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.paleta .ent { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linea-2); color: var(--tx-3); }
.paleta .ent input { flex: 1; border: 0; outline: none; background: none; font-size: 15px; color: var(--tx); }
.paleta .ent kbd { font: 500 11px var(--f); padding: 0 6px; border-radius: 5px; border: 1px solid var(--linea); }
.paleta #pres { max-height: 52vh; overflow-y: auto; padding-bottom: 6px; }
.paleta .gr { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-3); padding: 10px 16px 4px; }
.paleta .res { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13.5px; text-decoration: none; color: inherit; }
.paleta .res.act, .paleta .res:hover { background: var(--acc-ss); }
.paleta .res span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta .res small { margin-left: auto; color: var(--tx-3); font-size: 12px; white-space: nowrap; }
.avisos { position: fixed; z-index: 55; top: 52px; right: 20px; width: 380px; max-width: calc(100vw - 24px); background: var(--sup); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra-alta); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .16s, transform .22s var(--e); overflow: hidden; }
body.a-abierto .avisos { opacity: 1; transform: none; pointer-events: auto; }
.avisos h4 { margin: 0; padding: 14px 16px 6px; font-size: 13.5px; display: flex; align-items: center; }
.avisos h4 a { margin-left: auto; font-size: 12px; color: var(--acc-t); font-weight: 600; text-decoration: none; }
.avisos .accion { padding: 10px 16px; }
.avisos .vacio { padding: 26px 16px; }
.toast { position: fixed; z-index: 96; left: 50%; bottom: 28px; transform: translate(-50%, 16px); opacity: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 11px; background: var(--tx); color: var(--fondo); font-size: 13.5px; font-weight: 500; box-shadow: var(--sombra-alta); transition: opacity .2s, transform .3s var(--e); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.ver { opacity: 1; transform: translate(-50%, 0); }
.toast.error svg.i { color: var(--cr); }
.toast svg.i { color: var(--acc); }
[data-theme="dark"] .toast svg.i { color: #0F5C5A; }

/* Entrada de cada vista: movimiento ligero */
.entra > * { animation: entra .4s var(--e) both; }
.entra > *:nth-child(2) { animation-delay: .04s; } .entra > *:nth-child(3) { animation-delay: .08s; } .entra > *:nth-child(4) { animation-delay: .12s; } .entra > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* Formularios a página completa (pago, confirmación) */
.hoja-form { max-width: 640px; }
.hoja-form .tarj { padding: 4px 22px 22px; }
.hoja-form .pie-f { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.planes { display: grid; gap: 8px; margin-top: 6px; }
.plan-op { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--linea); border-radius: 10px; cursor: pointer; background: var(--sup-2); }
.plan-op:has(input:checked) { border-color: var(--acc); background: var(--acc-ss); box-shadow: 0 0 0 3px var(--acc-s); }
.plan-op input { margin-top: 3px; accent-color: var(--acc); }
.plan-op b { display: block; font-size: 13.5px; }
.plan-op small { color: var(--tx-3); font-size: 12px; }

/* Ajustes */
.ajuste { padding: 4px 18px 18px; }
.ajuste .kv { align-items: center; }
.ajuste .campo { margin-top: 12px; }
.ajuste .precio { display: flex; align-items: center; gap: 8px; }
.ajuste .precio input { width: 130px; text-align: right; }

/* Ingreso de Gestión */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 70%), var(--fondo); }
.ingreso .caja { width: min(400px, 100%); background: var(--sup); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra-alta); padding: 30px 28px 26px; }
.ingreso .marca-i { display: flex; align-items: center; gap: 10px; }
.ingreso .marca-i img { height: 26px; display: var(--logo-claro); }
.ingreso .marca-i img.logo-oscuro { display: var(--logo-oscuro); }
.ingreso h1 { font-size: 22px; margin: 22px 0 4px; letter-spacing: -.02em; }
.ingreso .sub { margin: 0; color: var(--tx-2); font-size: 13.5px; }
.ingreso .btn.p { width: 100%; height: 40px; margin-top: 18px; }
.ingreso .error-i { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--cr-s); color: var(--cr-t); font-size: 13px; }
.ingreso .pie-i { text-align: center; margin: 16px 0 0; }
.ingreso .olvido { display: block; text-align: right; font-size: 12.5px; color: var(--acc-t); text-decoration: none; margin-top: 8px; font-weight: 500; }

/* Mensajes del servidor */
.mensajes-g { margin-bottom: 14px; display: grid; gap: 8px; }
.mensajes-g .m { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--acc-ss); border: 1px solid var(--acc-m); font-size: 13px; }
.mensajes-g .m.error { background: var(--cr-s); border-color: color-mix(in srgb, var(--cr) 30%, transparent); color: var(--cr-t); }

/* ---------- Celular ---------- */
@media (max-width: 1100px) {
  .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-21, .g-12 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app, .app.plegado { grid-template-columns: minmax(0, 1fr); }
  .lat { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-100%); transition: transform .3s var(--e); box-shadow: var(--sombra-alta); }
  body.menu .lat { transform: none; }
  body.menu .velo { opacity: 1; pointer-events: auto; }
  .ibtn.abrir-m { display: grid; }
  .ibtn.plegar { display: none; }
  .g-buscar { width: 34px; flex: 0 0 34px; padding: 0; justify-content: center; } .g-buscar .txt, .g-buscar kbd { display: none; }
  .top { padding: 0 12px; gap: 8px; } .cont { padding: 16px 14px 72px; }
  .g-5, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3, .g-2 { grid-template-columns: minmax(0, 1fr); }
  .migas .m-ocu { display: none; }
  .cab .der { margin-left: 0; width: 100%; }
  .kpi .v { font-size: 22px; }
  .kpi svg.spk { display: none; } .kpi .et { padding-right: 0; }
  .dos-c { grid-template-columns: minmax(0, 1fr); }
  .campo-b { width: 100%; }
  .hb .fila { grid-template-columns: var(--et-w-m, 100px) minmax(0, 1fr) 44px; }
  .embudo .fila { grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 8px; }
  .t .ocu-m { display: none; }
  .t .solo-m { display: block; }
  .ficha { width: 100%; max-width: 100vw; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Páginas de Mi cuenta (allauth) dentro de Gestión */
.subnav-g { margin-bottom: 14px; }
.cuenta-g { max-width: 640px; padding: 6px 22px 22px; }
.cuenta-g h1, .cuenta-g .h1, .cuenta-g h2, .cuenta-g .h2 { font-size: 16px; margin: 16px 0 6px; letter-spacing: -.01em; }
.cuenta-g p { color: var(--tx-2); font-size: 13.5px; }
.cuenta-g .form-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.cuenta-g .msg-error { display: flex; gap: 6px; align-items: center; color: var(--cr); font-size: 12.5px; margin-top: 6px; }
.cuenta-g .msg-error svg.i { width: 14px; height: 14px; }
.cuenta-g .campo-check { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; }
.cuenta-g .tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.cuenta-g .tabla th { text-align: left; font-size: 11px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--linea-2); }
.cuenta-g .tabla td { padding: 9px 10px; border-bottom: 1px solid var(--linea-2); }
.cuenta-g .panel-allauth + .panel-allauth { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--linea-2); }
.btn.s { background: var(--sup); }
.btn.enlace { border-color: transparent; background: none; color: var(--acc-t); padding: 0 6px; }
.btn.enlace:hover { background: var(--acc-ss); }

/* Resumen: estados de la sala editorial */
.estados-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 18px 10px; }
.estados-mini a { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; background: var(--sup-2); border: 1px solid var(--linea-2); text-decoration: none; transition: border-color .15s; }
.estados-mini a:hover { border-color: var(--acc-m); }
.estados-mini b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.estados-mini span { font-size: 12px; color: var(--tx-2); }
.enlace-sec { color: var(--acc-t); font-weight: 600; text-decoration: none; font-size: 12.5px; }
.enlace-sec:hover { text-decoration: underline; }

.seg.etapas-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 2px; }
.seg.etapas-f button { justify-content: center; }
.confirmar-g { padding: 26px 26px 22px; }
.confirmar-g h1 { font-size: 19px; margin: 14px 0 6px; letter-spacing: -.01em; }
.confirmar-g p { margin: 0; color: var(--tx-2); font-size: 13.5px; }
.confirmar-g .ic-c { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--cr-s); color: var(--cr); }
.confirmar-g .ic-c.ok { background: var(--acc-s); color: var(--acc-t); }

/* Monitoreo: secciones con subvistas (pestañas bajo el título) */
.subvistas { display: flex; gap: 22px; margin: -4px 0 18px; box-shadow: inset 0 -1px 0 var(--linea); overflow-x: auto; scrollbar-width: none; }
.subvistas a { position: relative; padding: 4px 0 11px; font-size: 14px; font-weight: 500; color: var(--tx-3); text-decoration: none; white-space: nowrap; transition: color .15s var(--e); }
.subvistas a:hover { color: var(--tx); }
.subvistas a.act { color: var(--tx); font-weight: 600; }
.subvistas a.act::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--acc); }
.subcab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 16px; flex-wrap: wrap; }
.subcab p { margin: 0; color: var(--tx-2); font-size: 13.5px; }

/* Ajustes: grupos con filas «etiqueta y explicación | control», en un ancho legible */
.ajustes-g { max-width: 860px; }
.grupo-aj { margin-bottom: 16px; overflow: hidden; }
.grupo-aj > header { padding: 18px 22px 14px; border-bottom: 1px solid var(--linea-2); }
.grupo-aj > header h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.grupo-aj > header p { margin: 3px 0 0; font-size: 13px; color: var(--tx-2); }
.fila-aj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 24px; align-items: center; padding: 14px 22px; }
.fila-aj + .fila-aj { border-top: 1px solid var(--linea-2); }
.fila-aj.ancha { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.fila-aj label, .et-aj { display: flex; gap: 12px; align-items: center; min-width: 0; }
.fila-aj label { flex-direction: column; align-items: flex-start; gap: 0; }
.fila-aj b { display: block; font-size: 13.5px; font-weight: 600; }
.fila-aj small { display: block; font-size: 12.5px; color: var(--tx-3); margin-top: 1px; }
.ic-aj { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--sup-2); border: 1px solid var(--linea); color: var(--tx-2); }
.ctl-aj { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.ctl-aj.fin { justify-content: flex-end; text-align: right; }
.ctl-aj input { width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--linea); border-radius: 9px; background: var(--sup-2); color: var(--tx); outline: none; }
.ctl-aj input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-s); }
.ctl-aj.precio span { color: var(--tx-3); font-size: 13px; }
.ctl-aj.precio input { text-align: right; font-variant-numeric: tabular-nums; }
.acciones-aj { flex-wrap: wrap; }
.pie-aj { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
@media (max-width: 900px) {
  .fila-aj, .fila-aj.ancha { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
  .ctl-aj.fin { justify-content: flex-start; text-align: left; }
  .grupo-aj > header { padding: 16px; }
}
@media (max-width: 480px) { .subvistas { gap: 16px; } .subvistas a { font-size: 13.5px; } }

/* The same card as a full page (link «abrir en página», ?parcial missing) */
.ficha-pagina { max-width: 780px; padding: 0; overflow: hidden; }
.ficha-pagina .cab-f { position: static; }
.ficha-pagina [data-cerrar] { display: none; }

/* Radios and checkboxes inside a .campo kept the 100%-wide text-input style (giant circle on «Registrar pago») */
.campo input[type=radio], .campo input[type=checkbox] { width: 16px; height: 16px; padding: 0; flex: none; border-radius: 50%; box-shadow: none; background: none; }
.campo input[type=checkbox] { border-radius: 4px; }
.plan-op { align-items: center; }
.plan-op > span { flex: 1; min-width: 0; }
.plan-op input { margin-top: 0; }

/* Open sessions (Mi cuenta): one row per device instead of a raw browser string */
.ses-lista { list-style: none; margin: 0 0 18px; padding: 0; }
.ses { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linea-2); }
.ses:first-child { border-top: 0; }
.ses .disp { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--sup-2); border: 1px solid var(--linea); color: var(--tx-2); font-size: 11px; font-weight: 700; }
.ses .q { flex: 1; min-width: 0; }
.ses .q b { display: block; font-size: 14px; }
.ses .q small { display: block; color: var(--tx-3); font-size: 12.5px; }
.ses .actual { font-size: 12px; font-weight: 600; color: var(--acc); background: var(--acc-s); padding: 2px 9px; border-radius: 99px; white-space: nowrap; }

/* ── Revisión de interfaz (5 oct 2026, docs/REVISION_UI.md) ── */
/* Ctrl K and every screen's entrance: instant (used dozens of times a day) */
.paleta, body.k-abierta .paleta { transition: none; }
.entra > * { animation: none; }
/* Press feedback */
.btn:active { transform: scale(.97); }
/* Close faster than open: the open state carries the slower transition */
.ficha { transition: transform .16s var(--e); }
body.f-abierta .ficha { transition: transform .32s var(--e); }
.velo { transition: opacity .14s; }
body.f-abierta .velo, body.m-abierto .velo, body.k-abierta .velo { transition: opacity .22s; }
.modal { transition: opacity .12s, transform .14s var(--e); }
body.m-abierto .modal { transition: opacity .2s, transform .28s var(--e); }
.avisos { transition: opacity .1s, transform .12s var(--e); }
body.a-abierto .avisos { transition: opacity .16s, transform .22s var(--e); }
.toast { transition: opacity .14s, transform .16s var(--e); }
.toast.ver { transition: opacity .2s, transform .3s var(--e); }
/* Lifting cards only with a mouse (on touch the hover sticks after a tap) */
@media (hover: none) { .tk:hover { transform: none; box-shadow: none; } }
/* Worst-case data: long emails stay inside their row, dates never wrap, badges never get cut */
.t .persona { max-width: 460px; }
@media (max-width: 700px) { .t .persona { max-width: 62vw; } }
.t td.num { white-space: nowrap; }
.etq { white-space: nowrap; }
:is(.ficha, .ficha-pagina) .cab-f small { white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }
.copiar { border: 0; background: none; color: var(--tx-3); cursor: pointer; padding: 0 0 0 4px; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.copiar:hover { color: var(--acc); }

/* Loading state on submit buttons */
.btn.cargando { position: relative; color: transparent !important; pointer-events: none; }
.btn.cargando::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid rgba(120,135,130,.35); border-top-color: rgba(60,75,70,.9); animation: gira-c .7s linear infinite; }
.btn.p.cargando::after { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes gira-c { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Gestión v6 · capa visual sobre v5 (10 oct 2026). Referencia pedida por Martín: Kravio
   (kravio-dashboard.vercel.app): lienzo blanco junto a un menú sobre el fondo, tarjetas «bandeja»
   (marco gris con la tarjeta blanca adentro), filetes finos, sombras que aparecen al pasar el cursor
   y movimiento con curva exponencial. Se conserva la marca InFi: Public Sans, Petróleo y modo oscuro.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
:root, [data-theme="light"] {
  --fondo: #F7F8F7; --lienzo: #FFFFFF; --bandeja: #F4F5F4; --hundida: #EFF1F0;
  --lat: transparent; --lat-tx: #4A5552; --lat-tx-act: #16201E; --lat-act: #FFFFFF; --lat-h: rgba(16, 34, 31, .045); --lat-linea: #E5E8E6; --lat-sec: #8A9490;
  --sup: #FFFFFF; --sup-2: #FAFBFA; --sup-h: #F6F7F6; --linea: #E5E8E6; --linea-2: rgba(16, 34, 31, .07); --filete: rgba(16, 34, 31, .1);
  --tx-2: #55615D; --tx-3: #6E7975; --grid: #F0F2F1;
  --acc-grad: linear-gradient(180deg, #1C7774 0%, #0F5C5A 64%);
  --sombra: none;
  --sombra-h: 0 2px 3px -1px rgba(0, 0, 0, .1), 0 1px 0 rgba(25, 28, 33, .02), 0 0 0 .8px rgba(25, 28, 33, .08);
  --sombra-suave: 0 4px 7px rgba(0, 0, 0, .04);
  --sombra-flota: 0 12px 32px -8px rgba(16, 34, 31, .18), 0 0 0 .8px rgba(16, 34, 31, .08);
}
[data-theme="dark"] {
  --fondo: #0B100F; --lienzo: #0F1513; --bandeja: #151C1A; --hundida: #0B100F;
  --lat: transparent; --lat-tx: #93A09B; --lat-tx-act: #EEF3F1; --lat-act: #161E1C; --lat-h: rgba(255, 255, 255, .04); --lat-linea: #1C2623; --lat-sec: #63706B;
  --sup: #1A2220; --sup-2: #171F1D; --sup-h: #202A27; --linea: #27322F; --linea-2: rgba(233, 240, 238, .07); --filete: rgba(233, 240, 238, .09);
  --tx-2: #B6C2BD; --tx-3: #919E99; --grid: #24302C;
  --acc-grad: linear-gradient(180deg, #4CC0B2 0%, #3FB0A3 64%);
  --sombra: none;
  --sombra-h: 0 2px 6px -1px rgba(0, 0, 0, .5), 0 0 0 .8px rgba(255, 255, 255, .08);
  --sombra-suave: 0 4px 10px rgba(0, 0, 0, .3);
  --sombra-flota: 0 16px 40px -8px rgba(0, 0, 0, .7), 0 0 0 .8px rgba(255, 255, 255, .08);
}
:root { --ex: cubic-bezier(.16, 1, .3, 1); --e: var(--ex); }

/* ── Armazón: menú sobre el fondo, contenido en un lienzo blanco con un filete a la izquierda ── */
@media (min-width: 901px) {
  .app { grid-template-columns: 252px minmax(0, 1fr); transition: grid-template-columns .36s var(--ex); }
  /* Plegar oculta el menú por completo y el contenido toma todo el ancho (como Kravio) */
  .app.plegado, html.plegado-g .app { grid-template-columns: 0 minmax(0, 1fr); }
  .app.plegado .lat, html.plegado-g .lat { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s var(--ex), visibility 0s .36s; }
  .lat { transition: opacity .28s var(--ex) .06s, visibility 0s; }
}
.lat { background: var(--fondo); border-right: 0; padding: 0; display: block; overflow: hidden; }
.lat-in { width: 252px; height: 100%; display: flex; flex-direction: column; padding: 14px 12px 12px; }
.lat .marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 6px; min-height: 40px; }
.lat .marca a { display: flex; }
.lat .marca img { height: 22px; }
.lat .zona { font-size: 10px; letter-spacing: .09em; padding: 2px 7px; }
.lat-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px 12px; }
.lat-nav::-webkit-scrollbar { display: none; }
.grupo-l { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; }
.lat .sec { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--lat-sec); padding: 0 10px 8px; line-height: 1.6; }
.lat a { height: 32px; flex: none; padding: 0 10px; gap: 10px; border-radius: 8px; border: .8px solid transparent; font-size: 13.5px; font-weight: 400; color: var(--lat-tx);
  transition: background-color .15s var(--ex), border-color .15s var(--ex), box-shadow .15s var(--ex), color .15s var(--ex); }
.lat a svg.i { width: 16px; height: 16px; color: var(--lat-sec); transition: color .15s var(--ex); }
.lat a:hover { background: var(--lat-h); color: var(--lat-tx-act); }
.lat a:hover svg.i { color: var(--lat-tx); }
.lat a.act { background: var(--lat-act); border-color: var(--linea); box-shadow: var(--sombra-suave); color: var(--lat-tx-act); font-weight: 500; }
.lat a.act svg.i { color: var(--acc-t); }
.lat a:active { scale: .99; }
.lat a .n { font-weight: 500; font-size: 11.5px; }
.lat a .n.al { background: var(--acc-grad); color: #fff; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .15); line-height: 18px; min-width: 18px; text-align: center; }
[data-theme="dark"] .lat a .n.al { color: var(--acc-tx); }
.lat a .pronto { font-size: 11px; }
/* «Otros productos»: grupo plegable */
.plegable > summary { list-style: none; display: flex; align-items: center; cursor: pointer; border-radius: 6px; transition: color .15s var(--ex); }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary:hover { color: var(--lat-tx-act); }
.plegable .flecha-g { width: 13px; height: 13px; margin-left: auto; transition: rotate .25s var(--ex); }
.plegable:not([open]) .flecha-g { rotate: -90deg; }
.plegable:not([open]) > summary { padding-bottom: 0; }
.plegable-in { display: flex; flex-direction: column; gap: 2px; padding-top: 0; }
.plegable[open] .plegable-in { animation: sube .3s var(--ex) both; }
/* Pie fijo: solo la persona (Operación vuelve al menú que se desplaza, pedido de Martín 10 oct) */
.lat-pie { flex: none; padding-top: 10px; }
.lat .pie { margin-top: 0; padding: 0; border-top: 0; display: flex; align-items: center; gap: 8px; }
.lat .pie .yo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; height: auto; border-radius: 12px; border: .8px solid var(--linea); background: var(--sup); box-shadow: var(--sombra-suave); transition: box-shadow .2s var(--ex); text-decoration: none; }
.lat .pie .yo:hover { background: var(--sup); box-shadow: var(--sombra-h); }
.lat .pie .av { width: 32px; height: 32px; font-size: 11.5px; }
.lat .pie .yo-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.15; }
.lat .pie .yo-t b { font-size: 13px; font-weight: 500; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat .pie .yo-t small { font-size: 11.5px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat .pie .salir { width: 34px; height: 34px; border-radius: 10px; }
.lat .pie .salir:hover { color: var(--cr); }
@media (max-height: 760px) { .grupo-l { margin-top: 14px; } }
.main { background: var(--lienzo); box-shadow: inset .8px 0 0 var(--linea); }
.top { height: 52px; padding: 0 28px 0 20px; background: color-mix(in srgb, var(--lienzo) 82%, transparent); border-bottom: .8px solid transparent; transition: border-color .2s var(--ex); }
body.desplazado .top { border-bottom-color: var(--linea-2); }
.migas { font-size: 13px; } .migas b { font-weight: 500; }
.cont { padding: 20px 32px 72px; max-width: none; }
.cont.ancho { background: var(--lienzo); }

/* Controles de la barra superior */
.g-buscar, .ibtn { border: .8px solid var(--linea); border-radius: 8px; background: var(--sup); box-shadow: var(--sombra-suave);
  transition: border-color .15s var(--ex), box-shadow .15s var(--ex), background-color .15s var(--ex), color .15s var(--ex), scale .15s var(--ex); }
.g-buscar { height: 32px; width: 280px; }
.ibtn { width: 32px; height: 32px; box-shadow: none; }
.g-buscar:hover, .ibtn:hover { border-color: color-mix(in srgb, var(--tx-3) 35%, var(--linea)); background: var(--sup); }
.ibtn:active, .g-buscar:active { scale: .97; }
[data-avisos]:hover svg.i { animation: campana .6s ease-in-out; transform-origin: 50% 2px; }
@keyframes campana { 0%, 100% { rotate: 0deg; } 20% { rotate: 14deg; } 40% { rotate: -12deg; } 60% { rotate: 8deg; } 80% { rotate: -4deg; } }
.ibtn .pt { box-shadow: 0 0 0 2px var(--sup); }
.ibtn .pt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: latido 2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes latido { 75%, 100% { transform: scale(2.2); opacity: 0; } }

/* ── Encabezado de cada vista ── */
.cab { margin-bottom: 18px; align-items: center; }
.cab h1 { font-size: 23px; font-weight: 600; letter-spacing: -.025em; }
.cab p { font-size: 13px; margin-top: 3px; }

/* ── Botones: primario con degradé Petróleo, secundario blanco con filete ── */
.btn { height: 32px; padding: 0 12px; border-radius: 8px; border: .8px solid var(--linea); font-weight: 500; font-size: 12.5px; background: var(--sup);
  transition: background-color .15s var(--ex), border-color .15s var(--ex), box-shadow .15s var(--ex), color .15s var(--ex), scale .15s var(--ex), filter .15s var(--ex); }
.btn:hover { background: var(--sup); border-color: color-mix(in srgb, var(--tx-3) 35%, var(--linea)); box-shadow: var(--sombra-h); }
.btn:active { transform: none; scale: .97; }
.btn.p, .btn.pri { background: var(--acc-grad); border-color: transparent; box-shadow: inset 0 0 0 .5px var(--acc-f), 0 2px 8px -2px color-mix(in srgb, var(--acc) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn.p:hover, .btn.pri:hover { background: var(--acc-grad); filter: brightness(1.08); box-shadow: inset 0 0 0 .5px var(--acc-f), 0 4px 12px -2px color-mix(in srgb, var(--acc) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn.fant, .btn.fantasma { box-shadow: none; } .btn.fant:hover, .btn.fantasma:hover { box-shadow: none; border-color: transparent; background: var(--sup-h); }
.btn.enlace:hover { box-shadow: none; border-color: transparent; }
.btn.chico { height: 28px; border-radius: 7px; font-size: 12px; }
.btn.peligro { box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--cr) 50%, transparent); }

/* ── Selector segmentado con indicador que se desliza ── */
.seg { position: relative; padding: 3px; border-radius: 10px; background: var(--bandeja); border: .8px solid var(--linea-2); gap: 2px; }
.seg button, .seg a { position: relative; z-index: 1; height: 26px; padding: 0 11px; border-radius: 7px; font-weight: 500; font-size: 12px; transition: color .2s var(--ex); }
.seg .act { background: var(--sup); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 .8px var(--linea); font-weight: 500; }
.seg.con-ind .act { background: none; box-shadow: none; }
.seg .seg-ind { position: absolute; z-index: 0; top: 3px; height: calc(100% - 6px); border-radius: 7px; background: var(--sup); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 .8px var(--linea);
  transition: left .32s var(--ex), width .32s var(--ex), top .32s var(--ex); pointer-events: none; }
.seg.sin-anim .seg-ind { transition: none; }

/* Pestañas bajo el título: la línea activa también se desliza */
.subvistas { position: relative; }
.subvistas .sub-ind { position: absolute; bottom: 0; height: 2px; border-radius: 2px; background: var(--acc); transition: left .32s var(--ex), width .32s var(--ex); }
.subvistas.con-ind a.act::after { display: none; }
.subvistas.sin-anim .sub-ind { transition: none; }

/* ── Tarjetas ──
   Por defecto, una tarjeta blanca con filete fino (formularios, Mi cuenta, fichas a página completa).
   «Bandeja» (marco gris, título sobre el marco y contenido en una tarjeta blanca interior) solo cuando
   la tarjeta tiene título, es una cifra o envuelve una tabla o un vacío. */
.tarj { background: var(--sup); border: 0; box-shadow: inset 0 0 0 .8px var(--linea); border-radius: 14px; }
.tarj:has(> :is(h3, .h3, .barra-t, header)), .tarj:has(> :is(.tabla-env, .vacio):only-child) { background: var(--bandeja); padding: 4px; }
.tarj > :is(h3, .h3) { padding: 8px 8px 8px 10px; min-height: 36px; font-size: 13px; font-weight: 500; color: var(--tx-2); }
.tarj > :is(h3, .h3) small { font-size: 11.5px; }
.tarj > :is(h3, .h3, .barra-t, header) ~ * { background: var(--sup); border-left: .8px solid var(--filete); border-right: .8px solid var(--filete); margin-top: 0; margin-bottom: 0; }
.tarj > :is(h3, .h3, .barra-t, header) + * { border-top: .8px solid var(--filete); border-radius: 10px 10px 0 0; }
.tarj > :is(h3, .h3, .barra-t, header) ~ *:last-child { border-bottom: .8px solid var(--filete); border-radius: 0 0 10px 10px; }
.tarj > :is(h3, .h3, .barra-t, header) + *:last-child { border-radius: 10px; }
.tarj > :is(.tabla-env, .vacio):only-child { background: var(--sup); border-radius: 10px; box-shadow: inset 0 0 0 .8px var(--filete); }
.tarj > h3 + .accion, .tarj > h3 + .lista-acciones > .accion:first-child { margin-top: 0; }
.tarj > h3 ~ .accion { border-top-color: var(--linea-2); }
.tarj > h3 + .accion { border-top: .8px solid var(--filete); }
.tarj > h3 ~ .accion:last-child { border-radius: 0 0 10px 10px; }
.tarj > h3 + .accion:last-child { border-radius: 10px; }
.tarj > h3 ~ .estados-mini + p { border-top: 0; }
.tarj > h3 ~ p.pie-acc { padding: 2px 14px 14px; }
.tarj > .barra-t { padding: 2px 2px 6px; border-bottom: 0; }
.tarj > .barra-t + * { overflow: hidden; }
.tarj > :is(.tabla-env, .barra-t + *) { overflow-x: auto; }
/* Dos tarjetas lado a lado: la lista larga se ajusta al alto de su vecina y se desplaza por dentro,
   así ninguna tarjeta queda con un hueco blanco al fondo */
@media (min-width: 1101px) {
  .tarj.sigue-fila { height: 0; min-height: 100%; display: flex; flex-direction: column; }
  .tarj.sigue-fila > .lista-acciones { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
}
/* En el resto de las filas la tarjeta interior llena el alto, para que los marcos terminen parejos */
.tarj:has(> :is(h3, .h3, .barra-t, header)):not(.sigue-fila) { display: flex; flex-direction: column; }
.tarj:not(.sigue-fila) > :is(h3, .h3, .barra-t, header) ~ *:last-child { flex: 1 1 auto; }
.lista-acciones > .accion:first-child { border-top: 0; }
.lista-acciones > .accion:last-child { border-radius: 0 0 10px 10px; }

/* ── Cifras: la tarjeta blanca sube un pixel y gana sombra al pasar el cursor ── */
.kpi { background: var(--bandeja); padding: 4px; display: flex; flex-direction: column; overflow: visible; }
.kpi .et { padding: 7px 8px 8px; font-size: 12.5px; font-weight: 500; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-in { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 84px; padding: 14px 12px 12px; background: var(--sup);
  border: .8px solid var(--filete); border-radius: 10px; transition: transform .3s var(--ex), box-shadow .3s var(--ex); }
.kpi:hover .kpi-in { transform: translateY(-1px); box-shadow: var(--sombra-h); }
.kpi-t { min-width: 0; }
.kpi .v { font-size: 24px; font-weight: 600; letter-spacing: -.025em; margin-top: 0; line-height: 1.1; white-space: nowrap; }
.kpi .v small { font-size: 12.5px; }
.kpi .d { font-size: 11.5px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi svg.spk { position: static; width: 78px; height: 34px; flex: none; margin-bottom: 2px; }
/* Seis cifras: dos filas de tres hasta pantallas muy anchas (en una sola fila no caben con su tendencia) */
.g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1760px) { .g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .g-6 .kpi svg.spk { width: 56px; height: 28px; } }
@media (max-width: 1180px) { .g-5 .kpi svg.spk, .g-4 .kpi svg.spk { width: 56px; } }

/* ── Tablas: cabecera tenue, filas que se iluminan apenas ── */
.t th { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--tx-3); background: var(--sup-2); border-bottom: .8px solid var(--linea-2); padding: 9px 14px; }
.t td { border-bottom: .8px solid var(--linea-2); padding: 11px 14px; }
.t tbody tr { transition: background-color .15s var(--ex); }
.t tbody tr:hover { background: var(--sup-h); }
.campo-b { height: 32px; border: .8px solid var(--linea); background: var(--sup); box-shadow: var(--sombra-suave); transition: border-color .15s var(--ex), box-shadow .15s var(--ex); }
.campo-b:hover { border-color: color-mix(in srgb, var(--tx-3) 35%, var(--linea)); }
.campo-b:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-s); }
.pie-t { border-top: .8px solid var(--linea-2); }

/* Etiquetas y chips con filete fino */
.etq { height: 22px; font-weight: 500; box-shadow: inset 0 0 0 .8px color-mix(in srgb, currentColor 18%, transparent); }
.chip { font-weight: 500; border-radius: 7px; box-shadow: inset 0 0 0 .8px var(--linea); background: var(--sup); }
.accion .ic { border-radius: 9px; box-shadow: inset 0 0 0 .8px color-mix(in srgb, currentColor 16%, transparent); }
.accion { padding: 11px 14px; transition: background-color .15s var(--ex); }
.accion .q b { font-weight: 500; }

/* Formularios */
.campo input, .campo select, .campo textarea, .ctl-aj input { border: .8px solid var(--linea); border-radius: 8px; background: var(--sup); box-shadow: var(--sombra-suave);
  transition: border-color .15s var(--ex), box-shadow .15s var(--ex); }
.campo input:hover, .campo select:hover, .campo textarea:hover, .ctl-aj input:hover { border-color: color-mix(in srgb, var(--tx-3) 35%, var(--linea)); }
.campo input:focus, .campo select:focus, .campo textarea:focus, .ctl-aj input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-s); }
.campo > label, .campo > .et { font-weight: 500; }
.plan-op { background: var(--sup); border: .8px solid var(--linea); transition: border-color .15s var(--ex), box-shadow .15s var(--ex), background-color .15s var(--ex); }

/* Tablero de contactos */
.col { background: var(--bandeja); border: 0; box-shadow: inset 0 0 0 .8px var(--linea); padding: 6px; }
.col.sobre { box-shadow: inset 0 0 0 .8px var(--acc-m); }
.col h4 { margin: 6px 6px 10px; font-weight: 500; }
.tk { border: .8px solid var(--filete); border-radius: 10px; box-shadow: none; transition: transform .3s var(--ex), box-shadow .3s var(--ex); }
.tk:hover { transform: translateY(-1px); box-shadow: var(--sombra-h); }
.tk b { font-weight: 500; }

/* Resumen: estados de la sala */
.estados-mini a { background: var(--sup-2); border: .8px solid var(--linea-2); transition: border-color .15s var(--ex), box-shadow .3s var(--ex), transform .3s var(--ex); }
.estados-mini a:hover { transform: translateY(-1px); box-shadow: var(--sombra-h); border-color: transparent; }
.estados-mini b { font-weight: 600; }

/* ── Capas flotantes: aparecen con un leve crecimiento desde su origen ── */
.avisos { border: .8px solid var(--linea); box-shadow: var(--sombra-flota); transform: translateY(-4px) scale(.97); transform-origin: top right; }
body.a-abierto .avisos { transform: none; transition: opacity .18s var(--ex), transform .18s var(--ex); }
.modal { border: .8px solid var(--linea); box-shadow: var(--sombra-flota); transform: translate(-50%, 6px) scale(.97); }
body.m-abierto .modal { transition: opacity .2s var(--ex), transform .32s var(--ex); }
.paleta { border: .8px solid var(--linea); box-shadow: var(--sombra-flota); transform: translateX(-50%) translateY(-4px) scale(.98); }
body.k-abierta .paleta { transform: translateX(-50%); transition: opacity .14s var(--ex), transform .2s var(--ex); }
.paleta .res { border-radius: 8px; margin: 0 6px; padding: 8px 10px; }
.ficha { border-left: .8px solid var(--linea); box-shadow: var(--sombra-flota); }
.toast { border-radius: 10px; box-shadow: var(--sombra-flota); }

/* ── Movimiento de entrada: el contenido sube 8 px en cascada (no el menú ni la barra). «backwards»: al terminar no queda
   ninguna transformación aplicada, que encerraría a los paneles fijos (filtro en celular, menú «⋯») dentro de la tarjeta ── */
@keyframes sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes dibuja { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -4px 0 0); } }
@keyframes crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ancho { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.entra > * { animation: sube .52s var(--ex) backwards; }
.entra > *:nth-child(2) { animation-delay: .04s; } .entra > *:nth-child(3) { animation-delay: .08s; }
.entra > *:nth-child(4) { animation-delay: .12s; } .entra > *:nth-child(n+5) { animation-delay: .16s; }
.entra > .kpis { animation: none; }
.entra .kpis > .kpi { animation: sube .52s var(--ex) backwards; }
.entra .kpis > .kpi:nth-child(2) { animation-delay: .05s; } .entra .kpis > .kpi:nth-child(3) { animation-delay: .1s; }
.entra .kpis > .kpi:nth-child(4) { animation-delay: .15s; } .entra .kpis > .kpi:nth-child(5) { animation-delay: .2s; } .entra .kpis > .kpi:nth-child(6) { animation-delay: .25s; }
svg.spk .trazo { animation: dibuja 1.1s var(--ex) .25s both; }
svg.spk .area { animation: aparece .8s var(--ex) .45s both; }
.graf svg .barra-g { transform-box: fill-box; transform-origin: center bottom; animation: crece .9s var(--ex) both; }
.graf svg .linea-g { animation: dibuja 1.1s var(--ex) .1s both; }
.graf svg .punto-g { animation: aparece .3s var(--ex) .6s both; }
.hb .pista i, .embudo .barra { transform-origin: left center; animation: ancho .9s var(--ex) both; }
.tk { animation: sube .45s var(--ex) backwards; }

/* Móvil: el menú vuelve a ser un panel deslizable sobre el lienzo */
@media (max-width: 900px) {
  .lat { background: var(--fondo); box-shadow: var(--sombra-flota); z-index: 61; width: 276px; }
  .lat-in { width: 276px; }
  body:not(.menu) .lat { box-shadow: none; }
  .main { box-shadow: none; }
  .top { padding: 0 12px; }
  .cont { padding: 14px 14px 72px; }
  .g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .v { font-size: 21px; }
  .kpi-in { min-height: 72px; padding: 12px 10px 10px; }
  .kpi svg.spk { display: none; }
}

/* Ajustes: el título del grupo va sobre el marco y las filas en la tarjeta blanca */
.grupo-aj { overflow: visible; }
.grupo-aj > header { border-bottom: 0; padding: 10px 12px 12px; }
.grupo-aj > header h2 { font-weight: 600; font-size: 14px; }
.grupo-aj > .fila-aj + .fila-aj { border-top: .8px solid var(--linea-2); }

/* Modo oscuro: títulos de tarjeta y etiquetas de cifras en el tono principal (se leían apagados) */
[data-theme="dark"] .tarj > :is(h3, .h3), [data-theme="dark"] .kpi .et { color: var(--tx); }
[data-theme="dark"] .tarj > :is(h3, .h3) small { color: var(--tx-3); }
[data-theme="dark"] .lat a.act { border-color: var(--linea); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
[data-theme="dark"] .seg .seg-ind, [data-theme="dark"] .seg .act { background: var(--sup-h); }

/* Barras horizontales y embudo dentro de una tarjeta más alta que ellos: las filas se reparten en todo el alto
   (antes quedaba un hueco al fondo cuando la tarjeta vecina era más alta) */
.tarj > .graf:last-child:has(> :is(.hb, .embudo)) { display: flex; flex-direction: column; }
.graf > :is(.hb, .embudo) { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; }

/* ── Página del cliente (v6): encabezado con acción principal y menú «⋯», cifras y pestañas ── */
.cab-cli { position: relative; z-index: 5; display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.av.xl { width: 52px; height: 52px; font-size: 17px; letter-spacing: .02em; box-shadow: inset 0 0 0 .8px color-mix(in srgb, var(--acc) 20%, transparent); }
.cli-t { min-width: 0; flex: 1 1 320px; }
.cli-nombre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cli-nombre h1 { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; overflow-wrap: anywhere; }
.cli-t p { margin: 4px 0 0; color: var(--tx-2); font-size: 13px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.cli-t p span { overflow-wrap: anywhere; }
.cli-t .sep { color: var(--tx-3); }
.cab-cli .der { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.menu-acc { position: relative; }
.menu-acc .ibtn { width: 32px; height: 32px; }
.menu-acc.abierto .ibtn { border-color: color-mix(in srgb, var(--tx-3) 35%, var(--linea)); background: var(--sup-h); }
.pop-acc { position: absolute; z-index: 50; right: 0; top: calc(100% + 6px); min-width: 250px; padding: 6px; background: var(--sup); border: .8px solid var(--linea); border-radius: 12px;
  box-shadow: var(--sombra-flota); opacity: 0; transform: translateY(-4px) scale(.97); transform-origin: top right; pointer-events: none; visibility: hidden;
  transition: opacity .12s var(--ex), transform .12s var(--ex), visibility 0s .12s; }
.menu-acc.abierto .pop-acc { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .16s var(--ex), transform .2s var(--ex), visibility 0s; }
.pop-acc [role=menuitem] { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-size: 13px; color: var(--tx); text-decoration: none; text-align: left; white-space: nowrap; transition: background-color .12s var(--ex); }
.pop-acc [role=menuitem]:hover, .pop-acc [role=menuitem]:focus-visible { background: var(--sup-h); outline: none; }
.pop-acc [role=menuitem] svg.i { width: 16px; height: 16px; color: var(--tx-3); }
.pop-acc .peligro-i, .pop-acc .peligro-i svg.i { color: var(--cr); }
.pop-acc .peligro-i:hover { background: var(--cr-s); }
.pop-acc hr { border: 0; border-top: .8px solid var(--linea-2); margin: 6px 4px; }
.pop-et { display: block; padding: 4px 10px 6px; font-size: 11px; color: var(--tx-3); }
.cliente-p .kpis { margin-bottom: 22px; }
.kpi .v.v-txt { font-size: 18px; line-height: 1.35; white-space: normal; }
.pestanas-cli { margin: 0 0 16px; }
.pestanas-cli a { display: inline-flex; align-items: center; gap: 6px; }
.pestanas-cli .c { font-size: 11.5px; font-weight: 500; color: var(--tx-3); background: var(--bandeja); box-shadow: inset 0 0 0 .8px var(--linea-2); padding: 0 6px; border-radius: 999px; line-height: 18px; font-variant-numeric: tabular-nums; }
.panel-cli > * + * { margin-top: 14px; }
.t td.nw { white-space: nowrap; }
.panel-cli:not([hidden]) { animation: aparece .25s var(--ex) both; }
.tarj > h3 ~ .kvs { padding: 10px 16px 12px; }
.kvs .kv { padding: 7px 0; }
.kvs .kv + .kv { border-top: .8px solid var(--linea-2); }
.kvs > .lt { padding-top: 6px; }
.motivo-cli .kvs { align-items: center; }
.sel-cli { height: 32px; border: .8px solid var(--linea); border-radius: 8px; background: var(--sup); padding: 0 8px; box-shadow: var(--sombra-suave); color: var(--tx); }
@media (max-width: 900px) {
  .cab-cli { gap: 12px; }
  .av.xl { width: 44px; height: 44px; font-size: 15px; }
  .cab-cli .der { margin-left: 0; width: 100%; }
  .cab-cli .der .btn.p { flex: 1; }
  .cliente-p .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Resumen (10 oct): a la derecha de «Requiere tu acción», lectura y producción apiladas */
.col-res { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.col-res > .tarj { flex: 1 1 auto; }

/* ── Filtro de Clientes (v6, 12 oct): un botón, dimensiones en cascada y conteos que se recalculan ── */
.filtros-cli { gap: 8px; }
.filtro-d { position: relative; }
.btn-filtro .cuenta-f { min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--acc-grad); color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .btn-filtro .cuenta-f { color: var(--acc-tx); }
.btn-filtro.activo { border-color: var(--acc-m); background: var(--acc-ss); color: var(--acc-t); }
.btn-filtro[aria-expanded="true"] { border-color: color-mix(in srgb, var(--tx-3) 35%, var(--linea)); box-shadow: var(--sombra-h); }
.fx-pop { position: absolute; z-index: 50; left: 0; top: calc(100% + 6px); width: 248px; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px) scale(.97); transform-origin: top left; transition: opacity .12s var(--ex), transform .12s var(--ex), visibility 0s .12s; }
.fx-pop.abierto { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .16s var(--ex), transform .2s var(--ex), visibility 0s; }
.pf-lista, .pf-sub { background: var(--sup); border: .8px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra-flota); padding: 6px; }
.pf-dim, .pf-op { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none;
  font-size: 13px; color: var(--tx); text-align: left; cursor: pointer; transition: background-color .12s var(--ex), color .12s var(--ex); }
.pf-dim svg.i { width: 16px; height: 16px; color: var(--tx-3); }
.pf-dim > span:first-of-type { flex: 1; }
.pf-dim .fl { width: 14px; height: 14px; }
.pf-dim:hover, .pf-dim.on, .pf-op:hover:not([disabled]), .pf-dim:focus-visible, .pf-op:focus-visible { background: var(--sup-h); outline: none; }
.pf-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600;
  background: var(--acc-s); color: var(--acc-t); font-variant-numeric: tabular-nums; }
.pf-sub { position: absolute; left: calc(100% + 6px); top: 0; width: 264px; max-height: min(420px, 70vh); overflow-y: auto; animation: sub-f .18s var(--ex) both; }
@keyframes sub-f { from { opacity: 0; transform: translateX(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.pf-cab { display: flex; align-items: center; gap: 6px; padding: 4px 6px 8px 10px; font-size: 12px; color: var(--tx-3); }
.pf-cab b { font-weight: 500; flex: 1; }
.pf-volver { display: none; }
.pf-limpia { border: 0; background: none; color: var(--acc-t); font-size: 12px; font-weight: 500; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.pf-limpia:hover { background: var(--acc-ss); }
.pf-op .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-op .n { font-size: 12px; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.pf-op[disabled] { color: var(--tx-3); opacity: .5; cursor: default; }
.caja-f { width: 16px; height: 16px; flex: none; border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx-3) 55%, transparent); display: grid; place-items: center;
  transition: background-color .15s var(--ex), box-shadow .15s var(--ex); }
.caja-f svg.i { width: 11px; height: 11px; stroke-width: 3; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .2s var(--ex); }
.pf-op[aria-checked="true"] .caja-f { background: var(--acc); box-shadow: none; }
.pf-op[aria-checked="true"] .caja-f svg.i { opacity: 1; transform: none; }
[data-theme="dark"] .pf-op[aria-checked="true"] .caja-f svg.i { color: var(--acc-tx); }
.chips-f { display: flex; gap: 6px; flex-wrap: wrap; }
.chips-f:empty { display: none; }
.fx-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 8px; background: var(--sup); border: .8px solid var(--linea);
  font-size: 12.5px; color: var(--tx); box-shadow: var(--sombra-suave); animation: fx-chip-in .22s var(--ex) both; max-width: 100%; }
.fx-chip .et { color: var(--tx-3); }
.fx-chip button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--tx-3); cursor: pointer; flex: none; }
.fx-chip button:hover { background: var(--sup-h); color: var(--tx); }
.fx-chip button svg.i { width: 13px; height: 13px; }
@keyframes fx-chip-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.reset-f { border: 0; background: none; color: var(--tx-2); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.reset-f:hover { color: var(--tx); background: var(--sup-h); }
.btn-link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
#filas-cli > tr:not([hidden]) { animation: aparece .22s var(--ex) both; }
.tabla-cli .barra-t { position: relative; z-index: 3; }
@media (max-width: 900px) {
  .filtros-cli .campo-b { flex: 1 1 100%; }
  .fx-pop { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; transform: translateY(12px); transform-origin: bottom center; }
  .fx-pop.abierto { transform: none; }
  .fx-pop .pf-lista, .fx-pop .pf-sub { max-height: 70vh; overflow-y: auto; }
  .fx-pop.con-sub .pf-lista { display: none; }
  .pf-sub { position: static; width: auto; animation: none; }
  .pf-volver { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--tx-2); }
  .pf-dim, .pf-op { height: 42px; font-size: 14px; }
}

/* Filtro en el servidor (Historial, Correos): la zona de resultados se atenúa mientras llega la nueva */
.zona-f { transition: opacity .15s var(--ex); }
.zona-f.cargando-f { opacity: .55; }
.zona-f .lt-hist { padding: 16px 20px 6px 34px; }
.zona-f .pie-t { border-top: .8px solid var(--linea-2); }
.mas-f { display: flex; justify-content: center; padding: 10px; }
.mas-f:has(> [hidden]) { display: none; }
.tabla-cli .tabla-env { overflow-x: auto; }

/* Filtro en Pulso (12 oct): barra suelta en Boletines y Calendario, y botón compacto junto al buscador de la lista de Ediciones */
.barra-fx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.barra-fx .campo-b { width: 300px; }
.barra-fx .fx-total { margin-left: auto; font-size: 12.5px; color: var(--tx-3); }
.filtro-rail { flex-wrap: wrap; }
.filtro-rail .chips-f { flex-basis: 100%; }
.filtro-rail .chips-f:empty { display: none; }
.filtro-rail .fx-chip { max-width: 100%; }
.filtro-rail .fx-chip { white-space: normal; height: auto; min-height: 28px; padding-top: 3px; padding-bottom: 3px; }
.filtro-rail .reset-f { padding-left: 2px; }
.btn-filtro.solo-ic { width: 32px; padding: 0; position: relative; }
.btn-filtro.solo-ic .cuenta-f { position: absolute; top: -6px; right: -6px; margin: 0; box-shadow: 0 0 0 2px var(--lienzo); }
@media (max-width: 900px) { .barra-fx .campo-b { width: 100%; } .barra-fx .fx-total { margin-left: 0; } }
/* La lista de Ediciones es «sticky» (capa propia): mientras el filtro está abierto va por encima de la hoja y los comentarios */
.rail:has(.fx-pop.abierto) { z-index: 40; }