/* Los estilos para elegir, propios de la versión web: el clásico (el de la
 * app de escritorio, sin marca), Pastel y Disruptivo pastel, como en Mi
 * Crédito UVA. Los elige assets/js/estilo.js, que pone data-estilo en
 * <html>.
 *
 * style.css es copia sincronizada de la app de escritorio y no se edita: acá
 * se pisan sus variables y, donde hace falta, sus formas. Se carga último. */

/* ── Pastel: lavanda, menta y durazno, todo redondeado y suave ─────────── */
:root[data-estilo="pastel"]{
  --bg:#f8f5fc; --panel:#fff; --panel2:#f3eefb; --linea:#ece6f6; --linea2:#e0d8ef; --hover:#f5f1fc;
  --txt:#231d33; --txt2:#544d66; --txt3:#6c6580; --txt-chip:#4a4360;
  --negro:#6f55c9; --sobre-negro:#fff; --negro-hover:#5a43ad; --barra:#6f55c9;
  --pri:#6f55c9; --sobre-pri:#fff; --pri-claro:#5f46bd; --pri-hover:#5a43ad; --pri-suave:#ece7fb;
  --rosa:#d4593f; --rosa-suave:#fde3d6; --violeta:#8a6ee0; --degrade:#6f55c9;
  --ok:#227a5c; --ok-suave:#def5ec; --warn:#875a0e; --warn-suave:#fdeed4; --err:#b3412a; --err-suave:#fde3d6;
  --lavanda:#ece7fb; --lavanda-tinta:#5a43ad;
  --menta:#def5ec; --menta-tinta:#1f6e52;
  --durazno:#fdecd9; --durazno-tinta:#9c4a1e;
  --ambar:#fff3d6; --ambar-tinta:#875a0e;
  --radio:30px; --radio-chico:20px;
  --sombra:0 4px 10px rgba(111,85,201,.08),0 16px 36px rgba(111,85,201,.12);
  --sombra-suave:0 2px 6px rgba(111,85,201,.06),0 10px 24px rgba(111,85,201,.08);
}
:root[data-estilo="pastel"][data-tema="oscuro"]{
  --bg:#15121f; --panel:#1e1a2c; --panel2:#272238; --linea:#2c2640; --linea2:#3a3352; --hover:#241f35;
  --txt:#f3f0fb; --txt2:#c2bad8; --txt3:#9a92b4; --txt-chip:#d2cbe6;
  --negro:#c3b2ff; --sobre-negro:#15121f; --negro-hover:#d6c9ff; --barra:#2c2640;
  --pri:#6f55c9; --pri-claro:#c3b2ff; --pri-hover:#8a6ee0; --pri-suave:#2e2752;
  --rosa:#ef8a70; --rosa-suave:#3e2433; --violeta:#b49dff;
  --ok:#8fe0bd; --ok-suave:#1a3a30; --warn:#ffd07e; --warn-suave:#3a2f17; --err:#ff9a86; --err-suave:#3e2433;
  --lavanda:#2e2752; --lavanda-tinta:#d0c4ff;
  --menta:#1a3a30; --menta-tinta:#8fe0bd;
  --durazno:#3e2a22; --durazno-tinta:#ffb49b;
  --ambar:#3a2f17; --ambar-tinta:#ffd07e;
  --sombra:0 12px 32px rgba(0,0,0,.5);
  --sombra-suave:0 8px 22px rgba(0,0,0,.35);
}
/* Las tarjetas, sin borde: flotan con una sombra lavanda. */
:root[data-estilo="pastel"] .panel,
:root[data-estilo="pastel"] .kpi,
:root[data-estilo="pastel"] .cat-card{border-color:transparent;box-shadow:var(--sombra-suave)}
:root[data-estilo="pastel"] .r-stats .kpi,
:root[data-estilo="pastel"] .r-principal{box-shadow:none}
:root[data-estilo="pastel"] .lateral{border-right-color:transparent;box-shadow:var(--sombra-suave)}
:root[data-estilo="pastel"] .r-hero{border-radius:34px;box-shadow:0 14px 34px rgba(111,85,201,.28)}
:root[data-estilo="pastel"] .datos-locales{border-radius:22px}
:root[data-estilo="pastel"] .barra-movil__item{color:#e4dcff}
:root[data-estilo="pastel"] .barra-movil__item.activa{color:#4a3699}
:root[data-estilo="pastel"] .titulo-pantalla{color:var(--pri-claro)}
:root[data-estilo="pastel"][data-tema="oscuro"] .barra-movil__item{color:#c2bad8}
:root[data-estilo="pastel"][data-tema="oscuro"] .barra-movil__item.activa{color:#15121f}

/* ── Disruptivo pastel: bordes gruesos y sombras duras, con pasteles ───── */
:root[data-estilo="pop"]{
  --bg:#fbf6ee; --panel:#fff; --panel2:#f4eee4; --linea:#e6ddcf; --linea2:#cfc4b3; --hover:#f4eee4;
  --txt:#1b1726; --txt2:#4a4458; --txt3:#5e586c; --txt-chip:#1b1726;
  --negro:#1b1726; --sobre-negro:#fff; --negro-hover:#3a3446; --barra:#1b1726;
  --pri:#5a3fd1; --sobre-pri:#fff; --pri-claro:#4a30c0; --pri-hover:#4a30c0; --pri-suave:#e4dbff;
  --rosa:#d4462c; --rosa-suave:#ffd8bf; --violeta:#5a3fd1; --degrade:#5a3fd1;
  --ok:#17714f; --ok-suave:#c9f2dd; --warn:#7a5200; --warn-suave:#ffeaa6; --err:#b3203a; --err-suave:#ffd4da;
  --lavanda:#d9ccff; --lavanda-tinta:#3a2799;
  --menta:#c9f2dd; --menta-tinta:#0f5a3e;
  --durazno:#ffd8bf; --durazno-tinta:#8f3410;
  --ambar:#ffeaa6; --ambar-tinta:#6b4800;
  --radio:16px; --radio-chico:10px;
  --sombra:5px 5px 0 #1b1726;
  --duro:#1b1726; --contorno:#1b1726; --relleno:#d9ccff;
}
:root[data-estilo="pop"][data-tema="oscuro"]{
  --bg:#14121b; --panel:#1d1a27; --panel2:#262233; --linea:#332e40; --linea2:#4a4458; --hover:#262233;
  --txt:#f4f0fb; --txt2:#bdb5cf; --txt3:#9d96b0; --txt-chip:#f4f0fb;
  --negro:#f4f0fb; --sobre-negro:#14121b; --negro-hover:#d9d3e8; --barra:#262233;
  --pri:#5a3fd1; --pri-claro:#c3b2ff; --pri-hover:#6f55e0; --pri-suave:#2f2752;
  --rosa:#ff9c80; --rosa-suave:#4f3222; --violeta:#c3b2ff;
  --ok:#93e3bd; --ok-suave:#1d3b2f; --warn:#ffd47a; --warn-suave:#3a2f12; --err:#ff9cab; --err-suave:#40202a;
  --lavanda:#3a2f66; --lavanda-tinta:#d9ccff;
  --menta:#1d4a38; --menta-tinta:#93e3bd;
  --durazno:#4f3222; --durazno-tinta:#ffc3a3;
  --ambar:#4a3d14; --ambar-tinta:#ffd47a;
  --sombra:5px 5px 0 #c3b2ff;
  --duro:#c3b2ff; --contorno:#f4f0fb; --relleno:#3a2f66;
}
/* Las tarjetas: borde grueso y una sombra dura, como recortadas. */
:root[data-estilo="pop"] .panel,
:root[data-estilo="pop"] .kpi,
:root[data-estilo="pop"] .cat-card{border:2px solid var(--contorno);box-shadow:4px 4px 0 var(--duro)}
:root[data-estilo="pop"] .r-stats .kpi{border:2px solid rgba(255,255,255,.55);box-shadow:none}
/* la cifra grande no es una tarjeta: va suelta sobre el bloque */
:root[data-estilo="pop"] .r-principal{border:0;box-shadow:none}
:root[data-estilo="pop"] .r-hero{border:2px solid var(--contorno);box-shadow:5px 5px 0 var(--duro);border-radius:22px}
:root[data-estilo="pop"] .lateral{border-right:2px solid var(--contorno)}
:root[data-estilo="pop"] .datos-locales{border:2px solid var(--contorno);border-radius:14px}
/* Los botones: con relleno lavanda, borde y sombra; al apretarlos bajan. */
:root[data-estilo="pop"] .btn{
  background:var(--relleno);color:var(--txt);border:2px solid var(--contorno);
  box-shadow:3px 3px 0 var(--duro);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
}
:root[data-estilo="pop"] .btn:hover{background:color-mix(in srgb,var(--relleno) 82%,var(--txt))}
:root[data-estilo="pop"] .btn:active{transform:translate(3px,3px);box-shadow:none}
:root[data-estilo="pop"] .btn.sec{background:var(--panel);border-color:var(--contorno)}
:root[data-estilo="pop"] .btn.azul{background:var(--pri);color:#fff}
:root[data-estilo="pop"] .btn.peligro{background:var(--rosa);color:#fff}
:root[data-estilo="pop"] .chip,
:root[data-estilo="pop"] .cat-sel{border:1.5px solid var(--contorno)}
:root[data-estilo="pop"] .periodo-form select,
:root[data-estilo="pop"] .filtros select,
:root[data-estilo="pop"] .filtros input{border:2px solid var(--contorno)}
/* El menú: la elegida, en una pastilla lavanda con borde. */
:root[data-estilo="pop"] .nav a{border:2px solid transparent;font-weight:700}
:root[data-estilo="pop"] .nav a.on,
:root[data-estilo="pop"] .nav a.on:hover{background:var(--relleno);color:var(--txt);border-color:var(--contorno);box-shadow:2px 2px 0 var(--duro)}
/* Los títulos, grandes y en mayúsculas. */
:root[data-estilo="pop"] .titulo-pantalla{font-size:32px;font-weight:800;text-transform:uppercase;letter-spacing:-.03em}
:root[data-estilo="pop"] .panel h2{font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:16px}
/* El celular: la barra y la hoja «Más», con borde grueso. */
:root[data-estilo="pop"] .barra-movil{border:2px solid var(--contorno);box-shadow:4px 4px 0 var(--duro)}
:root[data-estilo="pop"] .barra-movil__item.activa{background:var(--relleno);color:var(--txt);border:2px solid #fff}
:root[data-estilo="pop"] .hoja,
:root[data-estilo="pop"] .modal-caja{border:2px solid var(--contorno);box-shadow:var(--sombra)}
:root[data-estilo="pop"][data-tema="oscuro"] .barra-movil__item.activa{border-color:var(--contorno)}

/* ── En el celular ────────────────────────────────────────────────────
   Las partes del Resumen no son tarjetas (movil.css de la app de escritorio
   les saca el marco): las tarjetas son lo de adentro. */
@media (max-width:700px){
  :root[data-estilo] .resumen-grilla .panel{border:0;box-shadow:none;background:none}
  :root[data-estilo="pastel"] .aviso,
  :root[data-estilo="pastel"] .vencimientos,
  :root[data-estilo="pastel"] .pocas,
  :root[data-estilo="pastel"] .resumen-fue .filas{border-color:transparent;box-shadow:var(--sombra-suave)}
  :root[data-estilo="pop"] .aviso,
  :root[data-estilo="pop"] .aviso + .aviso,
  :root[data-estilo="pop"] .vencimientos,
  :root[data-estilo="pop"] .pocas,
  :root[data-estilo="pop"] .resumen-fue .filas{border:2px solid var(--contorno);box-shadow:4px 4px 0 var(--duro)}
}

/* ── «Estilo», en el menú de la PC: como «Modo oscuro», con el elegido ── */
.boton-estilo small{font-size:12px;color:var(--txt3);font-weight:500}
.boton-estilo .ic{font-size:20px;width:1em;height:1em}

/* ── La ventana para elegirlo ──────────────────────────────────────────── */
.ventana-estilo{
  width:min(640px,calc(100% - 24px));max-height:calc(100dvh - 24px);
  margin:auto;padding:0;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--panel);color:var(--txt);box-shadow:var(--sombra);
}
:root[data-estilo="pop"] .ventana-estilo{border:2px solid var(--contorno)}
.ventana-estilo::backdrop{background:rgba(17,19,24,.45)}
.ventana-estilo__caja{display:grid;gap:14px;padding:20px 20px 0}
.ventana-estilo__cabeza{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ventana-estilo__cabeza h2{display:flex;flex-direction:row;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.ventana-estilo__cabeza h2 .ic{font-size:22px;width:1em;height:1em}
.ventana-estilo__ayuda{color:var(--txt2);font-size:13.5px}
.ventana-estilo .tema-interruptor{border:1px solid var(--linea2)}
/* Listo, siempre a mano: tapa de lado a lado lo que pasa por abajo. */
.ventana-estilo__pie{
  position:sticky;bottom:0;display:flex;justify-content:flex-end;
  margin:0 -20px;padding:12px 20px 20px;border-top:1px solid var(--linea);background:var(--panel);
}

.estilo-opciones{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.estilo-opcion{
  display:grid;gap:6px;align-content:start;padding:10px;text-align:left;cursor:pointer;
  border:2px solid var(--linea2);border-radius:var(--radio-chico);background:var(--panel);color:var(--txt);
  font:inherit;scroll-margin:12px 0 96px;
}
.estilo-opcion:hover{border-color:var(--txt3)}
.estilo-opcion[aria-pressed="true"]{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri)}
.estilo-opcion__muestra{display:block;height:66px;padding:10px 12px;border-radius:10px;background:var(--m-fondo);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.estilo-opcion__tarjeta{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;align-items:center;gap:5px 9px;
  height:100%;padding:5px 9px;background:var(--m-sup);border:var(--m-grueso) solid var(--m-borde);
  border-radius:var(--m-radio);box-shadow:var(--m-sombra);
}
.estilo-opcion__tarjeta b{grid-row:1 / 3;font:800 21px/1 var(--font);letter-spacing:-.03em;color:var(--m-titulo)}
.estilo-opcion__tarjeta i{display:block;height:7px;border-radius:99px;background:var(--m-acento)}
.estilo-opcion__tarjeta i + i{width:66%;background:var(--m-segundo)}
.estilo-opcion__nombre{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px}
.estilo-opcion__nombre .ic{color:var(--pri-claro)}
.estilo-opcion small{color:var(--txt2);font-size:12.5px;line-height:1.35}