/* ═══════════════════════════════════════════════════════════════════════════
   El vidrio: el programa entero sobre el Arco dorado (vidrio.js pone el cielo)
   ═══════════════════════════════════════════════════════════════════════════

   Va de último y se apoya en el tema oscuro, que ya viste cada pantalla del
   programa: aquí se cambian sus colores de base por los del vidrio y se le da
   la forma de los bocetos de la hoja de diseño (rondas 15 y 16) a cada pieza.
   No se quita ni se mueve nada: las mismas pestañas, cuadros y botones, con
   otra piel. La regla de siempre para el teléfono (≤ 480 px) sigue: lo que es
   solo del teléfono va dentro de su @media.

   La receta del vidrio (skill liquid-glass): tinte translúcido, un canto de luz
   y un brillo arriba. El desenfoque va solo en lo grande (láminas, menú, tira,
   hojas): en piezas chicas no se ve y frena el deslizar. */

/* ═══ PALETA DE CADA FONDO ═══════════════════════════════════════════════════
   Cada fondo trae su juego de colores (Erick: "cada tema con sus colores"). Todo el
   archivo usa estas variables en vez del oro escrito a mano, así un fondo nuevo solo
   tiene que decir los suyos. Los valores van como "r g b" para poder ponerles
   transparencia: rgb(var(--ac) / .34).
     --ac        el acento (el oro del Arco dorado)       --ac2   el acento claro
     --ac-luz    casi blanco, con un toque del acento     --ac-brillo / --ac-sombra  resplandores
     --ac-hondo  la sombra de adentro del botón           --ac-tinta  la letra sobre el botón
     --calido    el blanco con el tono del fondo          --tinte / --tinte2  el vidrio oscuro
     --b1..b3    los tres tonos del botón principal       --r1..r6  el filo de las monedas */
html.vidrio {
  --ac: 232 196 127; --ac2: 244 223 179; --ac-luz: 255 243 214; --ac-brillo: 235 200 130; --ac-sombra: 196 146 64; --ac-hondo: 110 72 18;
  --ac-tinta: #2a1d08; --calido: 255 246 232; --tinte: 18 14 8; --tinte2: 30 24 15;
  --b1: #f4e2b8; --b2: #e0bb78; --b3: #cfa25c;
  --r1: #fff4d8; --r2: #e2b86c; --r3: #8c6a33; --r4: #d9b06a; --r5: #fbe7bd; --r6: #a67c3d;
  --luz-arco: #f2c77a;
}
/* Ola azul: plata azulada, como el hielo. */
html.vidrio[data-fondo="azul"] {
  --ac: 150 196 245; --ac2: 206 227 252; --ac-luz: 234 244 255; --ac-brillo: 130 180 245; --ac-sombra: 60 110 190; --ac-hondo: 24 52 96;
  --ac-tinta: #0b1a2e; --calido: 234 243 255; --tinte: 6 10 20; --tinte2: 14 22 38;
  --b1: #e6f1ff; --b2: #aacdf5; --b3: #7aa7de;
  --r1: #f0f7ff; --r2: #9cc4f0; --r3: #3d6899; --r4: #8fb8e6; --r5: #dcebff; --r6: #5a84b8;
  --luz-arco: #8cc8ff;
}
/* Seda esmeralda: verde menta, de banca privada. */
html.vidrio[data-fondo="esmeralda"] {
  --ac: 152 222 190; --ac2: 206 243 225; --ac-luz: 232 250 241; --ac-brillo: 125 212 172; --ac-sombra: 40 130 95; --ac-hondo: 16 64 44;
  --ac-tinta: #0b2218; --calido: 234 250 242; --tinte: 5 14 10; --tinte2: 12 28 20;
  --b1: #e3f8ed; --b2: #a8e4c8; --b3: #6fbf9b;
  --r1: #effcf5; --r2: #96debe; --r3: #2f7a5c; --r4: #86d2b0; --r5: #d9f5e8; --r6: #4e9c7c;
  --luz-arco: #9fe6c6;
}
/* Grafito: el Arco en blanco y negro, con plata. */
html.vidrio[data-fondo="grafito"] {
  --ac: 214 219 226; --ac2: 236 239 243; --ac-luz: 248 249 251; --ac-brillo: 220 225 232; --ac-sombra: 110 118 130; --ac-hondo: 50 54 60;
  --ac-tinta: #14171b; --calido: 242 244 247; --tinte: 10 10 11; --tinte2: 24 25 27;
  --b1: #f6f8fa; --b2: #d3d9e1; --b3: #aab3be;
  --r1: #ffffff; --r2: #d6dbe2; --r3: #69717c; --r4: #c3c9d1; --r5: #f1f3f6; --r6: #8a929d;
  --luz-arco: #e8ebf0;
}
/* Seda clara: el blanco. Verde salvia sobre seda clara. */
html.vidrio[data-fondo="seda"] {
  --ac: 84 128 108; --ac2: 128 166 148; --ac-luz: 236 244 239; --ac-brillo: 120 170 145; --ac-sombra: 60 100 80; --ac-hondo: 28 58 44;
  --ac-tinta: #ffffff; --calido: 40 60 50; --tinte: 255 255 255; --tinte2: 248 250 249;
  --b1: #86ab98; --b2: #5f8a75; --b3: #4a7260;
  --r1: #eaf2ee; --r2: #9dbfae; --r3: #4a7260; --r4: #8fb3a2; --r5: #dbe8e1; --r6: #628c78;
  --luz-arco: #ffffff;
}
/* Papel crema: bronce sobre papel de algodón. */
html.vidrio[data-fondo="crema"] {
  --ac: 150 110 50; --ac2: 190 152 96; --ac-luz: 252 244 228; --ac-brillo: 205 165 100; --ac-sombra: 150 110 50; --ac-hondo: 90 60 20;
  --ac-tinta: #2a1d08; --calido: 70 50 20; --tinte: 255 253 248; --tinte2: 250 246 238;
  --b1: #f6e7c8; --b2: #e6c890; --b3: #cfa562;
  --r1: #fff6e2; --r2: #d9b475; --r3: #8a6630; --r4: #cfa966; --r5: #f6e3bb; --r6: #a47c3f;
  --luz-arco: #ffffff;
}
/* ═══ FIN DE LA PALETA ═══ */

/* ═══════════ 1 · Los colores de base ═══════════ */
html.vidrio[data-theme="dark"] {
  --canvas: transparent;
  --card: rgba(255, 255, 255, .045);
  --line: rgba(255, 255, 255, .12);
  --ink: #f7f8fb;
  --muted: rgba(255, 255, 255, .66);
  --teal: rgb(var(--ac));
  --oro: rgb(var(--ac));
  --oro-claro: rgb(var(--ac2));
  --shadow: 0 10px 30px rgba(0, 0, 0, .28);
  --e1: 0 8px 24px rgba(0, 0, 0, .24);
  --e2: 0 12px 30px rgba(0, 0, 0, .32);
  --e3: 0 18px 40px rgba(0, 0, 0, .4);
  --e4: 0 28px 70px rgba(0, 0, 0, .5);
  /* Los íconos de cada módulo ya no llevan un color cada uno (se volvía un
     arcoíris sobre la foto): todos toman el oro, y en el menú van en blanco con
     el oro solo en la pestaña abierta. */
  --m-inicio: rgb(var(--ac)); --m-colaboradores: rgb(var(--ac)); --m-tiempo: rgb(var(--ac)); --m-pagos: rgb(var(--ac));
  --m-vacaciones: rgb(var(--ac)); --m-ausencias: rgb(var(--ac)); --m-aguinaldos: rgb(var(--ac)); --m-liquidaciones: rgb(var(--ac));
  --m-reportes: rgb(var(--ac)); --m-expedientes: rgb(var(--ac)); --m-configuracion: rgb(var(--ac));
  /* Las piezas del vidrio, para usarlas en todo el archivo. */
  /* El tinte y el desenfoque salen de la transparencia que escoge cada persona (18). */
  --v-lamina: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)), rgb(var(--tinte) / var(--v-a));
  --v-canto: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 .5px rgba(255, 255, 255, .14);
  --v-desen: blur(calc(var(--v-mas) * 20px)) saturate(calc(1 + var(--v-mas) * .5));
  --v-hilo: linear-gradient(90deg, rgb(var(--ac) / .34), rgba(255, 255, 255, .06));
  --v-pozo: rgb(var(--tinte) / calc(.14 + var(--v-op) * .57));
  --v-pozo-canto: inset 0 1px 2px rgba(0, 0, 0, .36), inset 0 0 0 .5px rgba(255, 255, 255, .16);
  --v-oro-boton: linear-gradient(180deg, var(--b1) 0%, var(--b2) 52%, var(--b3) 100%);
  --v-didot: Didot, "Bodoni 72", "Bodoni Moda", Georgia, serif;
  background: #050506;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
html.vidrio[data-theme="dark"]::before { display: none; }
html.vidrio body,
html.vidrio .app-shell,
html.vidrio .app-shell.home-shell { background: transparent; }
html.vidrio #app-viewport { position: relative; z-index: 1; }
html.vidrio .vidrio-cielo { z-index: 0; }
/* Sobre la foto, las letras chicas necesitan un respiro de sombra para leerse igual en todo el arco. */
html.vidrio .content { text-shadow: 0 1px 2px rgb(0 0 0 / calc(.28 * var(--v-sombra, 1))); }

/* ═══════════ 2 · Las láminas: cada sección es una hoja de vidrio ═══════════ */
html.vidrio :is(
  .data-area, .detail-panel, .chart-card, .available-reports, .report-actions, .employee-list, .file-detail,
  .agui-overview > article, .metrics-strip, .selected-summary, .selected-person-bar, .stat-card, .report-filter, .hero,
  .roster-card, .time-card, .time-header, .cfg-card, .cfg-status, .liq-statement, .liq-panel, .liq-salida, .liq-quien-fijo,
  .agui-panel, .agui-ficha, .agui-meses, .agui-periodo, .vac-hero, .vac-periodo, .vac-calendario, .vac-otro,
  .calendario, .falta-calendario, .falta-quien, .rep-panel, .rep-ficha, .exp-panel,
  .employee-summary-card, .employee-tab-content, .employee-detail-side section, .ficha-alertas article, .tramos-historia,
  .receipt-side article, .quien, .ajustes, .esp-tarjeta, .portada-marco
) {
  background: var(--v-lamina);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--v-canto), 0 10px 30px rgba(0, 0, 0, .26);
  -webkit-backdrop-filter: var(--v-desen);
  backdrop-filter: var(--v-desen);
}
/* Lo que va DENTRO de una lámina no lleva otra lámina encima (dos vidrios se ensucian):
   un tinte leve y su canto, sin desenfoque. */
html.vidrio :is(.data-area, .detail-panel, .chart-card, .liq-panel, .agui-panel, .rep-panel, .exp-panel, .employee-tab-content, .ajustes, .selected-summary, .vac-hero, .time-card, .cfg-card)
  :is(.metric, .stat-card, .employee-tab-content .detail-section, .detail-section, .vac-fila, .pago-fila, .agui-periodo, .rep-ficha, .exp-hoja, .aj-mini-modulo, .pausa-opcion, .esp-opcion, .payment-accounts article, .sinpe-accounts article) {
  background: rgba(255, 255, 255, .045);
  border: 0;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.vidrio .hero::after,
html.vidrio .hero:after { background: none; }

/* ═══════════ 3 · Las letras ═══════════ */
/* Todos los títulos de página en Didot (menos el comprobante, que no se toca). */
html.vidrio .content h1:not(:where(.comprobante *, .pv-quien *)),
html.vidrio .page-heading h1 {
  font-family: var(--v-didot);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-shadow: 0 1px 14px rgb(0 0 0 / calc(.35 * var(--v-sombra, 1)));
}
html.vidrio .page-heading p { color: var(--muted); }
html.vidrio :is(.data-area h2, .chart-card h2, .available-reports h2, .detail-panel h2, .employee-list h2) {
  color: rgb(var(--vt) / .6);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}
html.vidrio .dato-vacio { color: rgb(var(--vt) / .42); }

/* ═══════════ 4 · Los botones ═══════════
   Uno de oro por pantalla (lo que se viene a hacer); los demás, de vidrio. */
html.vidrio .button {
  min-height: 44px;
  border-radius: 14px;
  text-shadow: none;
}
html.vidrio .button.primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  background: var(--v-oro-boton);
  color: var(--ac-tinta);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgb(var(--ac-hondo) / .28), 0 8px 22px rgb(var(--ac-sombra) / .26);
}
html.vidrio .button.primary:not(:disabled):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgb(var(--ac-hondo) / .28), 0 12px 28px rgb(var(--ac-sombra) / .34), 0 0 24px rgb(var(--ac-brillo) / .3); filter: none; }
html.vidrio .button.primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translate3d(-70%, 0, 0);
  animation: vidrio-brillo 9s cubic-bezier(.4, 0, .2, 1) 2s infinite;
  pointer-events: none;
}
@keyframes vidrio-brillo { 0% { transform: translate3d(-70%, 0, 0); } 12%, 100% { transform: translate3d(70%, 0, 0); } }
html.vidrio .button.primary:disabled { opacity: .45; filter: saturate(.6); }
html.vidrio .button.primary:disabled::after { display: none; }
html.vidrio :is(.button.outline, .button.quiet, .select-button, .button.secondary, .button.ghost),
html.vidrio[data-theme="dark"] :is(.button.outline, .button.quiet, .select-button) {
  border: 0;
  background: rgba(255, 255, 255, .1);
  color: var(--ink);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3), inset 0 0 0 .5px rgba(255, 255, 255, .18);
}
html.vidrio :is(.button.outline, .button.quiet, .select-button):not(:disabled):hover { background: rgba(255, 255, 255, .16); }
html.vidrio .button.danger-outline,
html.vidrio[data-theme="dark"] .button.danger-outline {
  border: 0;
  background: rgba(214, 72, 56, .14);
  color: #ffab9f;
  box-shadow: inset 0 0 0 .5px rgba(255, 150, 135, .45);
}
html.vidrio .button.danger,
html.vidrio .button.primary.danger { background: linear-gradient(180deg, #d9604f, #b8412f); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(184, 65, 47, .3); }
html.vidrio .more,
html.vidrio[data-theme="dark"] .more {
  border: 0;
  border-radius: 50%;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 60%, rgba(255, 255, 255, .06));
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 .5px rgba(255, 255, 255, .12);
}

/* ═══════════ 5 · Donde se escribe: pozos que se encienden de oro ═══════════ */
html.vidrio :is(.content, .drawer, #overlay-root) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
  border: 0;
  border-radius: 12px;
  background-color: var(--v-pozo);
  color: var(--ink);
  box-shadow: var(--v-pozo-canto);
  outline: none;
  transition: box-shadow .3s ease;
}
html.vidrio :is(.content, .drawer, #overlay-root) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea):focus {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .36), inset 0 0 0 1px rgb(var(--ac) / .8), 0 0 0 3px rgb(var(--ac) / .16);
}
html.vidrio :is(input, textarea)::placeholder { color: rgb(var(--vt) / .4); }
html.vidrio input[type="date"], html.vidrio input[type="month"] { color-scheme: dark; }
/* Los buscadores: la caja es el pozo y la casilla va transparente adentro. */
html.vidrio :is(.search, .aj-buscar, .exp-buscar, .quien-buscar),
html.vidrio[data-theme="dark"] .search {
  border: 0;
  border-radius: 14px;
  background: var(--v-pozo);
  box-shadow: var(--v-pozo-canto);
  color: rgb(var(--vt) / .56);
}
html.vidrio :is(.search, .aj-buscar, .exp-buscar, .quien-buscar):focus-within { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .36), inset 0 0 0 1px rgb(var(--ac) / .8), 0 0 0 3px rgb(var(--ac) / .16); }
html.vidrio :is(.content, .drawer, #overlay-root) :is(.search, .aj-buscar, .exp-buscar, .quien-buscar, .portada-buscar) input {
  background: transparent;
  box-shadow: none;
}
html.vidrio input[type="checkbox"], html.vidrio input[type="radio"] { accent-color: var(--b2); }

/* ═══════════ 6 · Las tablas: renglones con hilo dorado ═══════════ */
html.vidrio :is(.data-area, .file-detail) th,
html.vidrio[data-theme="dark"] :is(.data-area, .file-detail) th {
  color: rgb(var(--vt) / .56);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html.vidrio :is(.data-area, .file-detail) td,
html.vidrio[data-theme="dark"] :is(.data-area, .file-detail) td {
  color: var(--ink);
  border-top: .5px solid rgb(var(--ac) / .2);
}
html.vidrio :is(.selected-row, .danger-row, .orange-row) td,
html.vidrio[data-theme="dark"] :is(.selected-row, .danger-row, .orange-row) td { background: rgb(var(--calido) / .06); }
html.vidrio .row-pick:hover td { background: rgb(var(--calido) / .04); }

/* ═══════════ 7 · Pastillas de estado ═══════════
   Lo hecho en blanco; el ámbar y el rojo solo para lo que pide atención. */
html.vidrio .badge { text-shadow: none; }
html.vidrio .badge.success, html.vidrio[data-theme="dark"] .badge.success { color: var(--ink); background: rgba(255, 255, 255, .12); }
html.vidrio .badge.warning, html.vidrio[data-theme="dark"] .badge.warning { color: #f9c157; background: rgba(249, 193, 87, .16); }
html.vidrio .badge.danger, html.vidrio[data-theme="dark"] .badge.danger { color: #ffab9f; background: rgba(214, 72, 56, .2); }
html.vidrio .badge.muted, html.vidrio[data-theme="dark"] .badge.muted { color: rgb(var(--vt) / .6); background: rgba(255, 255, 255, .07); }
html.vidrio .badge.info, html.vidrio[data-theme="dark"] .badge.info { color: rgb(var(--ac2)); background: rgb(var(--ac) / .15); }
html.vidrio .badge.teal, html.vidrio[data-theme="dark"] .badge.teal { color: rgb(var(--ac2)); background: rgb(var(--ac) / .15); }

/* ═══════════ 8 · Las iniciales: monedas con filo dorado ═══════════ */
html.vidrio .avatar {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 50% 22%, rgb(var(--calido) / .2), rgb(var(--calido) / .05) 52%, rgb(var(--tinte) / .28) 100%) !important;
  color: rgb(var(--ac2)) !important;
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .26), inset 0 1.5px 2px rgb(var(--calido) / .16), 0 5px 12px rgba(0, 0, 0, .3);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
html.vidrio .avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1.3px;
  background: conic-gradient(from -40deg, var(--r1), var(--r2) 16%, var(--r3) 36%, var(--r4) 54%, var(--r5) 68%, var(--r6) 84%, var(--r1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .78;
  pointer-events: none;
}

/* ═══════════ 9 · La barra lateral (ventana ancha): un menú de vidrio que flota ═══════════ */
@media (min-width: 481px) {
  html.vidrio .sidebar,
  html.vidrio[data-theme="dark"] .sidebar {
    border: 0;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgb(var(--tinte) / calc(.04 + var(--v-op) * .75));
    box-shadow: var(--v-canto), 0 14px 40px rgba(0, 0, 0, .34);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }
  html.vidrio .app-shell.home-shell .content { margin-left: 0; }
  html.vidrio .sidebar::after { display: none; }
  html.vidrio .nav-item { color: rgb(var(--vt) / .78); border-radius: 15px; }
  html.vidrio .nav-item:hover,
  html.vidrio[data-theme="dark"] .nav-item:hover { background: rgb(var(--calido) / .06); box-shadow: none; transform: none; color: var(--ink); }
  html.vidrio .nav-item::before { display: none; }
  html.vidrio .nav-item.active,
  html.vidrio[data-theme="dark"] .nav-item.active {
    padding-left: 14px;
    border-left: 0;
    background: rgba(255, 255, 255, .14);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 .5px rgb(var(--calido) / .3), 0 0 18px rgb(var(--ac-brillo) / .18);
  }
  html.vidrio .nav-item .nav-icon { color: rgb(var(--vt) / .78); }
  html.vidrio .nav-item.active .nav-icon { color: var(--oro); }
}

/* El menú flota con un aire alrededor. En la ventana ancha va fijo y la página se corre;
   en la angosta (481–1239 px) el programa los pone en rejilla, y ahí el aire va en la columna. */
@media (min-width: 1240px) {
  html.vidrio .sidebar { top: 14px; bottom: 14px; left: 14px; }
  html.vidrio .app-shell:not(.home-shell) .content { margin-left: 248px; }
}
@media (min-width: 481px) and (max-width: 1239px) {
  html.vidrio .app-shell:not(.home-shell) { grid-template-columns: 248px minmax(0, 1fr); }
  html.vidrio .sidebar { top: 14px; margin: 14px 0 14px 14px; height: calc(100vh - 28px); }
  html.vidrio .app-shell:not(.home-shell) .content { margin-left: 0; padding-left: 28px; padding-right: 28px; }
}

/* ═══════════ 10 · Hojas, cajones y avisos ═══════════ */
html.vidrio .modal-backdrop { background: rgb(var(--tinte) / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.vidrio .drawer,
html.vidrio[data-theme="dark"] .drawer {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgb(var(--tinte) / calc(.3 + var(--v-op) * .9));
  box-shadow: var(--v-canto), -18px 0 50px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}
html.vidrio .drawer-close,
html.vidrio[data-theme="dark"] .drawer-close { border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); color: var(--ink); }
html.vidrio .form-grid h2 { font-family: var(--v-didot); font-weight: 400; font-size: 30px; }
html.vidrio .toast {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgb(var(--tinte2) / .7);
  color: var(--ink);
  box-shadow: var(--v-canto), 0 14px 34px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* ═══════════ 11 · El Inicio: la bienvenida, en todos los tamaños ═══════════
   Sin medallones (los módulos están en el menú): el saludo, los textos de
   bienvenida de Configuración y cuatro láminas con lo de hoy. */
html.vidrio .pv-lema { margin: -8px 4px 18px; color: rgb(var(--vt) / .66); font-size: 14.5px; line-height: 1.45; text-shadow: 0 1px 2px rgb(0 0 0 / calc(.45 * var(--v-sombra, 1))); }
html.vidrio .pv-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
html.vidrio .pv-rejilla .pv-pagar { order: 1; }
html.vidrio .pv-rejilla .pv-modulos { order: 2; margin: 10px 0 6px; }
html.vidrio .pv-modulos .pv-sec-mod { margin: 0 4px 12px; }
html.vidrio .pv-rejilla .pv-atender { order: 2; }
html.vidrio .pv-rejilla .pv-equipo { order: 3; }
html.vidrio .pv-rejilla .pv-fechas { order: 4; }
html.vidrio .pv-bloque { display: flex; flex-direction: column; padding: 6px 0 6px; border-radius: 26px; text-align: left; }
html.vidrio .pv-bloque > .pv-sec { display: flex; align-items: center; gap: 8px; margin: 12px 18px 6px; }
html.vidrio .pv-cuenta { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: #ec2535; color: var(--ink); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; letter-spacing: 0; text-shadow: none; }
html.vidrio .pv-renglon { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px; border: 0; background: none; color: var(--pv-txt, #f7f8fb); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .3s ease; }
html.vidrio .pv-renglon:hover { background-color: rgb(var(--calido) / .05); }
html.vidrio .pv-renglon:active { background-color: rgb(var(--calido) / .09); }
html.vidrio .pv-renglon + .pv-renglon::before { content: ""; position: absolute; top: 0; left: 64px; right: 16px; height: .5px; background: linear-gradient(90deg, rgb(var(--ac) / .34), rgba(255, 255, 255, .06)); }
html.vidrio .pv-mon { position: relative; display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 50% 22%, rgb(var(--calido) / .16), rgb(var(--calido) / .04) 52%, rgb(var(--tinte) / .26) 100%); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .24), 0 4px 10px rgba(0, 0, 0, .26); color: var(--ink); }
html.vidrio .pv-mon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1.1px; background: conic-gradient(from -40deg, var(--r1), var(--r2) 16%, var(--r3) 36%, var(--r4) 54%, var(--r5) 68%, var(--r6) 84%, var(--r1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .62; pointer-events: none; }
html.vidrio .pv-mon svg { width: 17px; height: 17px; stroke-width: 1.7; }
html.vidrio .pv-dia { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 36px; height: 40px; border-radius: 11px; background: rgb(var(--ac) / .1); box-shadow: inset 0 0 0 .5px rgb(var(--ac) / .36); color: var(--oro-claro); line-height: 1; }
html.vidrio .pv-dia b { font-size: 16px; font-weight: 700; }
html.vidrio .pv-dia small { margin-top: 2px; font-size: 9.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
html.vidrio .pv-txt { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
html.vidrio .pv-txt b { overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
html.vidrio .pv-txt small { overflow: hidden; color: rgb(var(--vt) / .64); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
html.vidrio .pv-flecha { flex: none; width: 16px; height: 16px; color: rgb(var(--vt) / .45); }
html.vidrio .pv-todos { display: flex; align-items: center; gap: 2px; align-self: flex-start; margin: 4px 16px 10px; padding: 6px 0; border: 0; background: none; color: var(--oro-claro); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
html.vidrio .pv-todos svg { width: 15px; height: 15px; }
html.vidrio .pv-vacio { display: flex; align-items: center; gap: 12px; padding: 12px 18px 16px; }
html.vidrio .pv-vacio svg { flex: none; width: 22px; height: 22px; color: var(--oro-claro); }
html.vidrio .pv-vacio span { display: flex; flex-direction: column; gap: 2px; }
html.vidrio .pv-vacio small { color: rgb(var(--vt) / .64); font-size: 12.5px; }
html.vidrio .pv-pie-pagina { margin: 22px 4px 0; color: rgb(var(--vt) / .46); font-size: 12px; text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / calc(.45 * var(--v-sombra, 1))); }
html.vidrio .pv-pie-pagina p { max-width: 560px; margin: 0 auto 6px; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 480px) {
  html.vidrio .pv-cuerpo { min-height: 0; }
}
@media (min-width: 481px) {
  html.vidrio .app-shell.home-shell .content { width: auto; max-width: none; padding: 30px 48px 40px; margin-left: 0; }
  html.vidrio .portada-vidrio { max-width: 1120px; margin: 0 auto; padding: 0; min-height: 0; }
  html.vidrio .portada-vidrio .portada-cielo { display: none; }
  html.vidrio .pv-cuerpo { min-height: 0; }
  html.vidrio .pv-saludo { font-size: 46px; margin-top: 4px; }
  html.vidrio .pv-modulos { display: none; }
}
/* Dos columnas que se apilan cada una por su lado (sin huecos entre láminas de distinto alto).
   En el teléfono las columnas desaparecen y todo va en una sola fila, en orden. */
html.vidrio .pv-col { display: contents; }
html.vidrio .pv-rejilla .pv-agui { order: 5; }
html.vidrio .pv-agui { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 14px; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
html.vidrio .pv-agui > .pv-fila { margin: 0; }
html.vidrio .pv-agui > .pv-fila .pv-sec { margin: 0; }
html.vidrio .pv-monto.chico { font-size: 28px; margin-top: 6px; }
html.vidrio .pv-regla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 12px; }
html.vidrio .pv-regla i { height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
html.vidrio .pv-regla i.hecho { background: rgb(var(--ac) / .88); }
html.vidrio .pv-regla i.curso { background: rgb(var(--ac) / .35); box-shadow: inset 0 0 0 1px rgb(var(--ac) / .8); }
html.vidrio .pv-regla-m { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 5px; color: rgb(var(--vt) / .45); font-size: 10px; font-weight: 650; text-align: center; }
html.vidrio .pv-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 4px; padding-top: 14px; border-top: .5px solid rgb(var(--ac) / .26); }
html.vidrio .pv-tres > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 12px; }
html.vidrio .pv-tres > span:first-child { padding-left: 0; }
html.vidrio .pv-tres > span + span { border-left: .5px solid rgb(var(--ac) / .26); }
html.vidrio .pv-tres small { overflow: hidden; color: rgb(var(--vt) / .56); font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
html.vidrio .pv-tres b { overflow: hidden; font-size: 15px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  html.vidrio .pv-rejilla { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  html.vidrio .pv-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  html.vidrio .pv-saludo { font-size: 54px; }
}

/* El menú sin logo: el ícono de la empresa en su vitrina, con el nombre debajo. */
html.vidrio .vidrio-marca { display: flex; flex-direction: column; align-items: center; gap: 10px; height: auto; padding: 6px 8px 20px; margin-bottom: 10px; border-bottom: .5px solid rgb(var(--ac) / .22); }
html.vidrio .vidrio-vitrina { position: relative; display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 18px; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
html.vidrio .vidrio-vitrina img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.vidrio .vidrio-vitrina::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; background: conic-gradient(from -40deg, var(--r1), var(--r2) 16%, var(--r3) 36%, var(--r4) 54%, var(--r5) 68%, var(--r6) 84%, var(--r1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .85; }
html.vidrio .vidrio-marca-txt { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
html.vidrio .vidrio-marca-txt b { font-size: 15px; font-weight: 650; }
html.vidrio .vidrio-marca-txt small { color: rgb(var(--vt) / .5); font-size: 11.5px; }

/* ═══════════ 12 · El banner de cada pestaña ═══════════
   La ilustración de oficina era del tema claro: sobre la foto estorba. Queda la
   frase, con su ícono en moneda. */
html.vidrio .hero-scene { display: none; }
html.vidrio .hero { height: auto; min-height: 0; padding: 14px 20px; gap: 16px; }
html.vidrio .hero h2 { margin: 0; font-size: 15.5px; font-weight: 600; }
html.vidrio .hero p { color: var(--muted); }

/* Los íconos que iban en un cuadrito de color (cifras, banners, resúmenes) pasan
   a moneda de vidrio con filo dorado: uno de un color por cifra era el arcoíris. */
html.vidrio :is(.hero-icon, .stat-icon, .metric > span, .agui-overview > article > span),
html.vidrio .hero.purple .hero-icon, html.vidrio .hero.red .hero-icon, html.vidrio .hero.orange .hero-icon,
html.vidrio :is(.metric > span.green, .metric > span.orange, .metric > span.red, .metric > span.blue),
html.vidrio :is(.stat-card.red, .stat-card.blue, .stat-card.orange, .stat-card.purple) .stat-icon {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 22%, rgb(var(--calido) / .16), rgb(var(--calido) / .04) 52%, rgb(var(--tinte) / .26) 100%);
  color: var(--oro-claro);
  box-shadow: inset 0 0 0 1px rgb(var(--ac) / .5), inset 0 -4px 8px rgba(0, 0, 0, .24), 0 4px 10px rgba(0, 0, 0, .26);
}

/* ═══════════ 13 · El teléfono ═══════════ */
@media (max-width: 480px) {
  /* La barra de arriba se va (Erick no la quería, y repetía el título que ya
     está en la página). Quedan la campana y el volver, redondos, que se van con
     la página al deslizar, como en los bocetos. */
  html.vidrio .tel-cabeza,
  html.vidrio[data-theme="dark"] .tel-cabeza {
    position: absolute;
    inset: calc(env(safe-area-inset-top) + 14px) 0 auto 0;
    height: 44px;
    padding: 0 16px;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
  }
  html.vidrio .tel-cabeza > * { pointer-events: auto; }
  html.vidrio .tel-marca,
  html.vidrio .tel-titulo { visibility: hidden; }
  html.vidrio :is(.tel-campana, .tel-volver) {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 60%, rgba(255, 255, 255, .06));
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .24);
  }
  html.vidrio .content { padding-top: calc(env(safe-area-inset-top) + 18px); text-shadow: 0 1px 2px rgb(0 0 0 / calc(.4 * var(--v-sombra, 1))); }
  /* Con el botón de volver (la ficha, una sección de Configuración) el título baja un renglón. */
  html.vidrio .app-shell:has(.tel-volver) .content { padding-top: calc(env(safe-area-inset-top) + 72px); }

  /* El encabezado: el título en Didot a la izquierda y, a su derecha, sus
     botones redondos (el de la pestaña y la campana). */
  html.vidrio .page-heading { position: relative; display: block; min-height: 46px; padding-right: 108px; margin-bottom: 18px; }
  html.vidrio .page-heading h1 { margin: 0 0 4px; font-size: clamp(28px, 8.4vw, 34px); line-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.vidrio .page-heading p { margin-right: -108px; font-size: 14px; }
  html.vidrio .page-heading > .button,
  html.vidrio .page-heading > .button-group { position: absolute; top: 0; right: 54px; margin: 0; }
  html.vidrio .page-heading > .button {
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 60%, rgba(255, 255, 255, .06));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .24);
  }
  /* Solo el ícono: el nombre queda para los lectores de pantalla (el botón ya trae su texto). */
  html.vidrio .page-heading > .button { gap: 0; font-size: 0; color: var(--ink); }
  html.vidrio .page-heading > .button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.vidrio .page-heading > .button svg { width: 20px; height: 20px; }
  html.vidrio .tel-campana, html.vidrio .tel-campana.con-avisos { color: var(--ink); }
  /* Sin encabezado (la pantalla de "¿a quién?") el cuadro baja para no quedar debajo de la campana. */
  html.vidrio .content:not(:has(.page-heading)) { padding-top: calc(env(safe-area-inset-top) + 72px); }

  /* La tira de abajo, de vidrio como en los bocetos: la pestaña abierta en una
     gota clara con su canto de luz. */
  html.vidrio .tel-barra,
  html.vidrio[data-theme="dark"] .tel-barra {
    height: 66px;
    padding: 6px;
    border: 0;
    border-radius: 26px;
    background: rgb(var(--tinte) / calc(.06 + var(--v-op) * .52));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .14), 0 12px 34px rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
  html.vidrio .tel-tab { color: rgb(var(--vt) / .7); border-radius: 18px; text-shadow: 0 1px 2px rgb(0 0 0 / calc(.35 * var(--v-sombra, 1))); }
  html.vidrio .tel-tab span { font-size: 10.5px; font-weight: 500; }
  html.vidrio .tel-tab.activo { color: var(--ink); }
  html.vidrio .tel-tab.activo span { font-weight: 650; }
  html.vidrio .tel-tab.activo::before {
    inset: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 .5px rgba(255, 255, 255, .14), 0 0 20px rgb(var(--ac-brillo) / .2);
  }

  /* Con una hoja abierta la tira se aparta: la hoja llega hasta abajo y sus
     botones quedan libres, como en los bocetos. */
  html.vidrio:has(#overlay-root .drawer) .tel-barra {
    transform: translateY(calc(100% + var(--tel-barra-hueco) + env(safe-area-inset-bottom)));
    opacity: 0;
    pointer-events: none;
  }
}
@media (min-width: 481px) {
  html.vidrio { --tel-abajo: 0px; }
}

/* La franja de las tarjetas de Colaboradores dice cómo se le paga: oro el salario
   mensual, plata el pago por horas. Más fina, como un hilo. */
html.vidrio .roster-card::before { top: 18px; bottom: 18px; height: auto; width: 3px; border-radius: 0 3px 3px 0; background: var(--oro); }
html.vidrio .roster-card[data-modality="horas"]::before { background: #cfd6e0; }

/* Configuración: cada sección traía su color (azul, morado, rosado…). Todas en oro;
   Restablecer se queda en rojo porque borra. */
html.vidrio :is(.aj-tono-empresa, .aj-tono-inicio, .aj-tono-apariencia, .aj-tono-planilla, .aj-tono-privacidad, .aj-tono-contrasena, .aj-tono-respaldos, .aj-tono-nube, .aj-tono-soporte, .aj-tono-actualizaciones, .aj-tono-sistema) { --tono: rgb(var(--ac)); }
html.vidrio .aj-tono-restablecer { --tono: #d9604f; }
html.vidrio[data-theme="dark"] [class*="aj-tono-"] { --tono-texto: color-mix(in srgb, var(--tono) 70%, #fff); }
/* Expedientes: los separadores de carpeta, en oro. */
html.vidrio :is(.exp-separador, .exp-carpeta) { --tono: rgb(var(--ac)); }
html.vidrio[data-theme="dark"] .exp-separador.on .exp-separador-icono { color: var(--ac-tinta); }

/* El pie de los cajones (los botones de guardar) va encima del contenido que se
   desliza: necesita un vidrio más tupido para que no se lea lo de atrás. */
html.vidrio :is(.drawer .drawer-actions, .drawer .sticky-form-actions),
html.vidrio[data-theme="dark"] :is(.drawer .drawer-actions, .drawer .sticky-form-actions) {
  background: linear-gradient(180deg, rgb(var(--tinte2) / .82), rgb(var(--tinte) / .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* ═══════════ 14 · Que nada se salga de su cuadro en el teléfono ═══════════
   Las casillas con letra de 16 px (para que Safari no acerque la pantalla) tienen
   un ancho mínimo natural, y una rejilla de "1fr 1fr" no puede encoger por debajo
   de eso: el cajón de la liquidación se salía 140 px. Se deja encoger todo. */
@media (max-width: 480px) {
  html.vidrio .drawer :is(.form-grid, fieldset, .mini-cards, .liq-quien-fijo) { min-width: 0; }
  html.vidrio .drawer .form-grid { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  html.vidrio .drawer fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.vidrio .drawer :is(input, select, textarea) { min-width: 0; max-width: 100%; }
  html.vidrio .drawer .mini-cards { flex-wrap: wrap; }
  html.vidrio .drawer .mini-cards > span { flex: 1 1 40%; min-width: 0; }
}

@media (max-width: 480px) {
  html.vidrio .pv-tres small, html.vidrio .pv-tres b { white-space: normal; }
  html.vidrio .pv-tres > span { padding: 0 8px; }
}

/* ═══════════ 15 · Los colores de las vacaciones: oro y plata ═══════════
   Sobre el Arco dorado el rojo, el ámbar y el turquesa hacían arcoíris. Los
   mismos seis estados, en oro y plata, que se distinguen por la FORMA además
   del tono: lo disfrutado en oro, hoy encendido, lo programado solo con su
   borde, lo pagado en plata, lo que queda en blanco tenue. La regla sigue
   creciendo al pasar el puntero, día por día. */
html.vidrio .vac-regla i,
html.vidrio[data-theme="dark"] .vac-regla i { --tono: #ffffff; --relleno: 9%; box-shadow: none; }
html.vidrio :is(.vac-regla i, .vac-pie .pt).gozada { --tono: rgb(var(--ac)); --relleno: 70%; box-shadow: none; }
html.vidrio :is(.vac-regla i, .vac-pie .pt).encurso { --tono: rgb(var(--ac-luz)); --relleno: 100%; box-shadow: 0 0 9px rgb(var(--ac-luz) / .65); }
html.vidrio :is(.vac-regla i, .vac-pie .pt).pactada { --tono: rgb(var(--ac)); --relleno: 0%; box-shadow: inset 0 0 0 1.5px rgb(var(--ac) / .9); }
html.vidrio :is(.vac-regla i, .vac-pie .pt).pagada { --tono: #cfd6e0; --relleno: 70%; box-shadow: none; }
html.vidrio :is(.vac-regla i, .vac-pie .pt).queda { --tono: #ffffff; --relleno: 32%; box-shadow: none; }
html.vidrio[data-theme="dark"] :is(.vac-regla i, .vac-pie .pt):is(.gozada, .encurso, .pactada, .pagada, .queda) { background: color-mix(in srgb, var(--tono) var(--relleno), transparent); }

html.vidrio .cal-dia.gozado,
html.vidrio[data-theme="dark"] .cal-dia.gozado { background: rgb(var(--ac) / .3); border-color: rgb(var(--ac) / .55); color: rgb(var(--ac2)); }
html.vidrio .cal-dia.encurso,
html.vidrio[data-theme="dark"] .cal-dia.encurso { background: rgb(var(--ac-luz)); border-color: rgb(var(--ac-luz)); color: var(--ac-tinta); font-weight: 700; text-shadow: none; box-shadow: 0 0 16px rgb(var(--ac-luz) / .5); }
html.vidrio .cal-dia.pendiente,
html.vidrio[data-theme="dark"] .cal-dia.pendiente { background: transparent; border: 1.5px solid rgb(var(--ac) / .9); color: rgb(var(--ac2)); box-shadow: 0 0 12px rgb(var(--ac) / .18); }
html.vidrio .cal-dia.escogiendo { background: var(--v-oro-boton); border-color: transparent; color: var(--ac-tinta); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 12px rgb(var(--ac-sombra) / .3); }
html.vidrio .cal-leyenda .pt.gozado { background: rgb(var(--ac) / .3); border-color: rgb(var(--ac) / .55); }
html.vidrio .cal-leyenda .pt.encurso { background: rgb(var(--ac-luz)); border-color: rgb(var(--ac-luz)); box-shadow: 0 0 6px rgb(var(--ac-luz) / .6); }
html.vidrio .cal-leyenda .pt.pendiente { background: transparent; border: 1.5px solid rgb(var(--ac) / .9); }

/* ── Inicio en la computadora: sin menú al lado, los medallones dorados son la entrada a
   cada pestaña (los diez), en una fila debajo del saludo. En el teléfono esa fila no va:
   ahí están los ocho de siempre y la tira de abajo. ── */
html.vidrio .g32 { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
html.vidrio .g32 .o { stroke: var(--oro); }
html.vidrio .g32 .of { fill: var(--oro); stroke: none; }
html.vidrio .g32 .d { fill: currentColor; stroke: none; opacity: .5; }
html.vidrio .pv-modulos-ancho { display: none; }
@media (min-width: 481px) {
  html.vidrio .pv-modulos-ancho { display: block; margin: 4px 0 26px; }
  html.vidrio .pv-modulos-ancho .pv-monedas { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 18px; }
  html.vidrio .pv-cabeza { margin-bottom: 6px; }
}
@media (min-width: 1100px) {
  html.vidrio .pv-modulos-ancho .pv-monedas { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  html.vidrio .pv-modulos-ancho .pv-moneda { width: 64px; height: 64px; }
  html.vidrio .pv-modulos-ancho .pv-nombre { font-size: 12.5px; }
}

@media (max-width: 480px) {
  /* Los selectores de varias partes no se parten en dos renglones: se deslizan de lado. */
  html.vidrio .segmented { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  html.vidrio .segmented::-webkit-scrollbar { display: none; }
  html.vidrio .segmented > button { flex: none; white-space: nowrap; }
}

/* ═══════════ 16 · Los fondos: la galería y el cielo de cada uno ═══════════ */
html.vidrio .vidrio-cielo .entrada-cielo-luz path { stroke: var(--luz-arco); }
html.vidrio .vidrio-cielo .entrada-cielo-destello .halo { stroke: rgb(var(--ac-brillo) / .34); }
/* Los fondos sin escena (Ola azul, Seda esmeralda) usan la foto con su luz también en el teléfono. */
@media (max-width: 480px) {
  html.vidrio .vidrio-cielo.sin-escena .entrada-cielo-ancho { display: block; }
}
/* La portada del teléfono trae su propio cielo del Arco dorado: con otro fondo se aparta. */
html.vidrio:not([data-fondo="oro"]):not([data-fondo="grafito"]) .portada-cielo { display: none; }
/* El Grafito es el Arco en blanco y negro. */
html.vidrio[data-fondo="grafito"] :is(.vidrio-cielo, .portada-cielo) { filter: grayscale(1) brightness(.9) contrast(1.05); }

html.vidrio .vidrio-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 4px; }
html.vidrio .vidrio-fondo { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.vidrio .vidrio-fondo-foto { display: block; aspect-ratio: .78; border-radius: 16px; background-size: cover; background-position: center 58%; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22), 0 6px 16px rgba(0, 0, 0, .35); transition: box-shadow .35s ease, transform .5s cubic-bezier(.22, .9, .25, 1); }
html.vidrio .vidrio-fondo-foto.f-grafito { filter: grayscale(1) brightness(.9); }
html.vidrio .vidrio-fondo:hover .vidrio-fondo-foto { transform: translateY(-2px); }
html.vidrio .vidrio-fondo.on .vidrio-fondo-foto { box-shadow: 0 0 0 2px rgb(var(--ac)), 0 0 20px rgb(var(--ac-brillo) / .35); }
html.vidrio .vidrio-fondo-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
html.vidrio .vidrio-fondo-pie b { font-size: 13.5px; font-weight: 600; }
html.vidrio .vidrio-fondo-tonos { display: flex; gap: 4px; }
html.vidrio .vidrio-fondo-tonos i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }
/* Los tres tonos de cada fondo (los pone vidrio.js con el color de cada uno). */
html.vidrio .vidrio-fondo .aj-marca { position: absolute; top: 8px; right: 8px; opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .35s cubic-bezier(.26, 1.6, .42, 1); }
html.vidrio .vidrio-fondo.on .aj-marca { opacity: 1; transform: none; }

/* La vista previa de Configuración › Pantalla de inicio: la bienvenida nueva, en chiquito. */
html.vidrio .aj-mini-inicio { display: none; }
html.vidrio .aj-mini-vidrio { position: relative; display: flex; flex-direction: column; gap: 6px; overflow: hidden; padding: 18px 18px 14px; border-radius: 18px; background: #050506 url("fondo-oro.jpg") center 62% / cover; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 10px 26px rgba(0, 0, 0, .35); color: var(--ink); text-shadow: 0 1px 2px rgb(0 0 0 / calc(.5 * var(--v-sombra, 1))); }
html.vidrio[data-fondo="azul"] .aj-mini-vidrio { background-image: url("fondo-azul.jpg"); }
html.vidrio[data-fondo="esmeralda"] .aj-mini-vidrio { background-image: url("fondo-esmeralda.jpg"); }
html.vidrio[data-fondo="grafito"] .aj-mini-vidrio { filter: grayscale(1); }
html.vidrio .aj-mini-fecha { color: rgb(var(--vt) / .7); font-size: 10.5px; }
html.vidrio .aj-mini-saludo { font-family: var(--v-didot); font-size: 26px; font-weight: 400; line-height: 1.1; }
html.vidrio .aj-mini-lema { color: rgb(var(--vt) / .72); font-size: 11px; }
html.vidrio .aj-mini-medallones { display: flex; gap: 8px; margin: 8px 0 4px; }
html.vidrio .aj-mini-medallones i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 22%, rgb(var(--calido) / .18), rgb(var(--calido) / .04) 52%, rgb(var(--tinte) / .3)); box-shadow: inset 0 0 0 1px rgb(var(--ac) / .6), 0 3px 8px rgba(0, 0, 0, .3); color: var(--ink); }
html.vidrio .aj-mini-medallones .g32 { width: 16px; height: 16px; }
html.vidrio .aj-mini-laminas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
html.vidrio .aj-mini-laminas i { height: 34px; border-radius: 9px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)), rgb(var(--tinte) / .4); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); }
html.vidrio .aj-mini-vidrio p { margin: 8px 0 0; color: rgb(var(--vt) / .6); font-size: 10px; line-height: 1.4; text-align: center; }
html.vidrio .aj-mini-vidrio .aj-mini-pie { color: rgb(var(--vt) / .45); font-size: 9.5px; text-align: center; }

/* La gotita de la tira: una sola pieza de vidrio que viaja de pestaña en pestaña. */
@media (max-width: 480px) {
  html.vidrio .tel-barra.con-gota { position: fixed; }
  html.vidrio .vidrio-gota {
    position: absolute; z-index: 0; left: 0; top: 0; border-radius: 18px; pointer-events: none;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 0 20px rgb(var(--ac-brillo) / .22);
    transition: transform .6s cubic-bezier(.3, 1.35, .45, 1), width .6s cubic-bezier(.3, 1.35, .45, 1), opacity .3s ease;
    will-change: transform, width;
  }
  html.vidrio .vidrio-gota.sin-paso { transition: none; }
  html.vidrio .vidrio-gota.viva { animation: vidrio-gota .6s cubic-bezier(.3, 1.35, .45, 1); }
  @keyframes vidrio-gota { 30% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 .5px rgba(255, 255, 255, .3), 0 0 26px rgb(var(--ac-brillo) / .45); } }
  html.vidrio .tel-barra.con-gota .tel-tab.activo::before { display: none; }
  html.vidrio .tel-barra.con-gota .tel-tab { position: relative; z-index: 1; }
}


/* ═══════════ 17 · Los fondos claros (Seda clara, Papel crema) ═══════════
   Sobre una foto clara el programa usa su tema claro por debajo y el vidrio
   pasa a ser blanco: letras casi negras, láminas de vidrio lechoso, pozos
   claros hundidos, y el acento de cada fondo más hondo para que se lea. */
html.vidrio {
  --vt: 255 255 255; --v-sombra: 1;
  /* La transparencia (vidrio.js la pone según la persona): 0 transparente … 1 opaco. */
  --v-op: .35;
  --v-a: calc(.06 + var(--v-op) * .8);                   /* el tinte de las láminas: .34 en el punto de siempre */
  --v-mas: clamp(0, (var(--v-op) - .35) / .65, 1);       /* 0 hasta el punto de siempre, 1 en lo más opaco */
}
html.vidrio[data-theme="light"] {
  --vt: 31 29 26; --v-sombra: 0;
  --canvas: transparent;
  --card: rgba(255, 255, 255, .52);
  --line: rgba(60, 48, 30, .14);
  --ink: #1f1d1a;
  --muted: rgba(31, 29, 26, .62);
  --teal: rgb(var(--ac));
  --oro: rgb(var(--ac));
  --oro-claro: rgb(var(--ac2));
  --shadow: 0 10px 30px rgba(60, 45, 20, .12);
  --e1: 0 6px 18px rgba(60, 45, 20, .1); --e2: 0 10px 26px rgba(60, 45, 20, .14); --e3: 0 16px 36px rgba(60, 45, 20, .18); --e4: 0 26px 60px rgba(60, 45, 20, .22);
  --m-inicio: rgb(var(--ac)); --m-colaboradores: rgb(var(--ac)); --m-tiempo: rgb(var(--ac)); --m-pagos: rgb(var(--ac)); --m-vacaciones: rgb(var(--ac)); --m-ausencias: rgb(var(--ac));
  --m-aguinaldos: rgb(var(--ac)); --m-liquidaciones: rgb(var(--ac)); --m-reportes: rgb(var(--ac)); --m-expedientes: rgb(var(--ac)); --m-configuracion: rgb(var(--ac));
  --v-lamina: linear-gradient(180deg, rgb(255 255 255 / calc(var(--v-a) * 2.1)), rgb(255 255 255 / calc(var(--v-a) * 1.41))), rgb(var(--tinte) / .2);
  --v-canto: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(60, 48, 30, .14);
  --v-desen: blur(calc(var(--v-mas) * 20px)) saturate(calc(1 + var(--v-mas) * .4));
  --v-hilo: linear-gradient(90deg, rgb(var(--ac) / .4), rgba(60, 48, 30, .06));
  --v-pozo: rgb(255 255 255 / calc(.28 + var(--v-op) * 1.2));
  --v-pozo-canto: inset 0 1px 2px rgba(60, 45, 20, .14), inset 0 0 0 .5px rgba(60, 48, 30, .18);
  --v-oro-boton: linear-gradient(180deg, var(--b1) 0%, var(--b2) 52%, var(--b3) 100%);
  --v-didot: Didot, "Bodoni 72", "Bodoni Moda", Georgia, serif;
  background: #efe9df;
  color-scheme: light;
}
html.vidrio[data-theme="light"] .entrada-cielo { background: #efe9df; }
html.vidrio[data-theme="light"] :is(.data-area, .detail-panel, .chart-card, .available-reports, .report-actions, .employee-list, .file-detail, .agui-overview > article, .metrics-strip, .selected-summary, .selected-person-bar, .stat-card, .report-filter, .hero, .roster-card, .time-card, .time-header, .cfg-card, .cfg-status, .liq-statement, .liq-panel, .liq-salida, .liq-quien-fijo, .agui-panel, .agui-ficha, .agui-meses, .agui-periodo, .vac-hero, .vac-periodo, .vac-calendario, .vac-otro, .calendario, .falta-calendario, .falta-quien, .rep-panel, .rep-ficha, .exp-panel, .employee-summary-card, .employee-tab-content, .employee-detail-side section, .ficha-alertas article, .tramos-historia, .receipt-side article, .quien, .ajustes, .esp-tarjeta, .portada-marco) {
  box-shadow: var(--v-canto), 0 10px 30px rgba(60, 45, 20, .12);
}
/* Los botones redondos, las monedas, el menú y la tira: vidrio lechoso con su canto oscuro fino. */
html.vidrio[data-theme="light"] :is(.more, .tel-campana, .tel-volver, .page-heading > .button, .pv-redondo) {
  background: rgb(255 255 255 / calc(.2 + var(--v-op) * 1.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(60, 48, 30, .18), 0 4px 12px rgba(60, 45, 20, .12);
}
html.vidrio[data-theme="light"] :is(.button.outline, .button.quiet, .select-button) {
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(60, 48, 30, .18);
}
html.vidrio[data-theme="light"] .avatar { color: rgb(var(--ac)) !important; text-shadow: none; }
html.vidrio[data-theme="light"] .nav-item.active,
html.vidrio[data-theme="light"] .tel-tab.activo::before,
html.vidrio[data-theme="light"] .vidrio-gota { background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 .5px rgba(60, 48, 30, .14), 0 4px 14px rgba(60, 45, 20, .12); }
html.vidrio[data-theme="light"] .nav-item.active { color: var(--ink); }
html.vidrio[data-theme="light"] .tel-tab.activo { color: var(--ink); }
html.vidrio[data-theme="light"] :is(.badge.success, .badge.muted) { color: var(--ink); background: rgba(60, 48, 30, .08); }
html.vidrio[data-theme="light"] :is(.badge.info, .badge.teal) { color: rgb(var(--ac)); background: rgb(var(--ac) / .12); }
html.vidrio[data-theme="light"] .badge.warning { color: #8f5c00; background: rgba(239, 150, 0, .14); }
html.vidrio[data-theme="light"] .badge.danger { color: #b3261e; background: rgba(192, 57, 43, .12); }
html.vidrio[data-theme="light"] :is(.data-area, .file-detail) td { border-top-color: rgb(var(--ac) / .22); }
/* La portada (Inicio) era oscura siempre: con un fondo claro va con letras oscuras. */
html.vidrio[data-theme="light"] .portada-vidrio {
  --pv-txt: #1f1d1a; --pv-txt2: rgba(31, 29, 26, .72); --pv-txt3: rgba(31, 29, 26, .56);
  --pv-ficha: rgba(255, 255, 255, .62); --pv-canto: rgba(60, 48, 30, .16);
  color-scheme: light;
}
html.vidrio[data-theme="light"] :is(.pv-saludo, .pv-fecha, .pv-lema, .pv-sec, .pv-nombre, .pv-quien b, .pv-quien small, .pv-pie-pagina) { text-shadow: none; }
html.vidrio[data-theme="light"] .pv-vd { background: var(--v-lamina); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(60, 48, 30, .14), 0 10px 30px rgba(60, 45, 20, .12); }
html.vidrio[data-theme="light"] .pv-moneda { background: radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55) 52%, rgba(60, 48, 30, .08) 100%); color: var(--ink); }
html.vidrio[data-theme="light"] .pv-mon { background: radial-gradient(circle at 50% 22%, #fff, rgba(255, 255, 255, .6) 60%, rgba(60, 48, 30, .08)); color: var(--ink); }
html.vidrio[data-theme="light"] .pv-renglon { color: var(--ink); }
html.vidrio[data-theme="light"] .pv-renglon + .pv-renglon::before { background: linear-gradient(90deg, rgb(var(--ac) / .34), rgba(60, 48, 30, .06)); }
html.vidrio[data-theme="light"] :is(.pv-txt small, .pv-tres small, .pv-mut, .pv-regla-m) { color: rgba(31, 29, 26, .6); }
html.vidrio[data-theme="light"] .pv-regla i { background: rgba(60, 48, 30, .1); }
html.vidrio[data-theme="light"] .vidrio-marca-txt small { color: rgba(31, 29, 26, .55); }
/* Vacaciones en un fondo claro: lo disfrutado en el acento, hoy en tinta, lo que queda en gris. */
html.vidrio[data-theme="light"] :is(.vac-regla i, .vac-pie .pt).encurso { --tono: #1f1d1a; --relleno: 85%; box-shadow: none; }
html.vidrio[data-theme="light"] :is(.vac-regla i, .vac-pie .pt).queda { --tono: #1f1d1a; --relleno: 22%; }
html.vidrio[data-theme="light"] .vac-regla i,
html.vidrio[data-theme="light"] .vac-regla i:not([class]) { --tono: #1f1d1a; --relleno: 8%; }
html.vidrio[data-theme="light"] .cal-dia.encurso { background: #1f1d1a; border-color: #1f1d1a; color: #fff; box-shadow: none; }
/* Sin logo, la portada lleva el ícono de la empresa (no el cuadro blanco con las iniciales). */
html.vidrio .pv-logo.con-icono { background: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
html.vidrio .pv-logo.con-icono img { object-fit: cover; }

/* ═══════════ 18 · Los paisajes en video ═══════════
   Seis escenas que se mueven de verdad, muy despacio (vidrio.js). Cada una trae su
   paleta, sacada de sus propios colores, y un velo oscuro a su medida (--v-velo).
   La tinta (27-09, aprobada por Erick): el acento con color de verdad y las letras
   (--ink, --vt) en un blanco apenas teñido, como el marfil del oro; con acentos muy
   pálidos (nevado, estrellas, montanas) todo se leía blanco. La afinó el chat de
   Configuración con la revisión de legibilidad (diseno/legibilidad/); los velos y el
   tinte de las láminas de cada paisaje siguen en vidrio-config.css §4. */
/* Camino al atardecer: miel. */
html.vidrio[data-fondo="camino"] {
  --ac: 240 187 106; --ac2: 247 218 173; --ac-luz: 252 241 225; --ac-brillo: 240 187 106; --ac-sombra: 173 135 76; --ac-hondo: 91 71 40; --ac-tinta: #1d160d; --calido: 253 245 233; --tinte: 16 14 8; --tinte2: 34 29 19; --b1: #f8e0bc; --b2: #f0bb6a; --b3: #ca9d59; --r1: #fcf1e1; --r2: #f0bb6a; --r3: #785e35; --r4: #ddac62; --r5: #f9e4c3; --r6: #a37f48; --luz-arco: #f5d39e; --v-velo: 0.34; --ink: #fbf4ea; --vt: 251 244 234;
}
/* Lago entre montañas: azul de lago. */
html.vidrio[data-fondo="montanas"] {
  --ac: 99 194 238; --ac2: 169 221 246; --ac-luz: 224 243 252; --ac-brillo: 99 194 238; --ac-sombra: 71 140 171; --ac-hondo: 38 74 90; --ac-tinta: #0c171d; --calido: 232 246 252; --tinte: 6 13 18; --tinte2: 17 28 35; --b1: #b9e4f7; --b2: #63c2ee; --b3: #53a3c8; --r1: #e0f3fc; --r2: #63c2ee; --r3: #326177; --r4: #5bb2db; --r5: #c1e7f8; --r6: #4384a2; --luz-arco: #9ad7f4; --v-velo: 0.3; --ink: #f0f8fc; --vt: 240 248 252;
}
/* Cañón del río: arenisca. */
html.vidrio[data-fondo="canon"] {
  --ac: 239 152 108; --ac2: 246 198 174; --ac-luz: 252 234 226; --ac-brillo: 239 152 108; --ac-sombra: 172 109 78; --ac-hondo: 91 58 41; --ac-tinta: #1d120d; --calido: 253 240 233; --tinte: 20 12 8; --tinte2: 37 25 19; --b1: #f8d1bd; --b2: #ef986c; --b3: #c9805b; --r1: #fceae2; --r2: #ef986c; --r3: #784c36; --r4: #dc8c63; --r5: #f9d6c4; --r6: #a36749; --luz-arco: #f5bc9f; --v-velo: 0.3; --ink: #fdf3ed; --vt: 253 243 237;
}
/* Vía Láctea: lavanda. */
html.vidrio[data-fondo="estrellas"] {
  --ac: 165 148 249; --ac2: 206 196 252; --ac-luz: 237 234 254; --ac-brillo: 165 148 249; --ac-sombra: 119 107 179; --ac-hondo: 63 56 95; --ac-tinta: #14121e; --calido: 242 239 254; --tinte: 10 10 20; --tinte2: 25 25 38; --b1: #d6cffc; --b2: #a594f9; --b3: #8b7cd1; --r1: #edeafe; --r2: #a594f9; --r3: #524a7c; --r4: #9888e5; --r5: #dbd4fd; --r6: #7065a9; --luz-arco: #c4b9fb; --v-velo: 0.06; --ink: #f5f3ff; --vt: 245 243 255;
}
/* Olas desde el aire: agua. */
html.vidrio[data-fondo="olas"] {
  --ac: 88 218 192; --ac2: 163 235 220; --ac-luz: 222 248 242; --ac-brillo: 88 218 192; --ac-sombra: 63 157 138; --ac-hondo: 33 83 73; --ac-tinta: #0b1a17; --calido: 230 249 246; --tinte: 4 18 18; --tinte2: 13 34 33; --b1: #b4eee3; --b2: #58dac0; --b3: #4ab7a1; --r1: #def8f2; --r2: #58dac0; --r3: #2c6d60; --r4: #51c9b1; --r5: #bcf0e6; --r6: #3c9483; --luz-arco: #92e7d6; --v-velo: 0.3; --ink: #effcf9; --vt: 239 252 249;
}
/* Valle nevado: hielo. */
html.vidrio[data-fondo="nevado"] {
  --ac: 140 192 238; --ac2: 192 220 246; --ac-luz: 232 242 252; --ac-brillo: 140 192 238; --ac-sombra: 101 138 171; --ac-hondo: 53 73 90; --ac-tinta: #11171d; --calido: 238 246 252; --tinte: 8 12 18; --tinte2: 21 28 35; --b1: #cbe3f7; --b2: #8cc0ee; --b3: #76a1c8; --r1: #e8f2fc; --r2: #8cc0ee; --r3: #466077; --r4: #81b1db; --r5: #d1e6f8; --r6: #5f83a2; --luz-arco: #b4d6f4; --v-velo: 0.28; --ink: #f1f7fd; --vt: 241 247 253;
}
html.vidrio .vidrio-cielo.con-video { background: #0b0d12; }
html.vidrio .vidrio-peli { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--encuadre, 50% 50%); }
/* El video baja en segundo plano (vidrio.js, vidrioTraerPeli): mientras tanto se ve la foto
   quieta de debajo, y cuando arranca entra con un fundido. */
html.vidrio .vidrio-peli { opacity: 0; transition: opacity 1.4s ease; }
html.vidrio .vidrio-peli.vidrio-peli-lista { opacity: 1; }
html.vidrio .vidrio-velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / calc(var(--v-velo, .3) + .2)) 0%, rgb(0 0 0 / var(--v-velo, .3)) 30%, rgb(0 0 0 / var(--v-velo, .3)) 68%, rgb(0 0 0 / calc(var(--v-velo, .3) + .24)) 100%);
}
/* En la galería, los paisajes llevan un triangulito: se mueven. */
html.vidrio .vidrio-fondo-foto { position: relative; }
html.vidrio .vidrio-fondo-mueve { position: absolute; left: 8px; bottom: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(0 0 0 / .46); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .32); color: #fff; }
html.vidrio .vidrio-fondo-mueve svg { width: 10px; height: 10px; margin-left: 1.5px; fill: currentColor; stroke-width: 0; }

/* ═══════════ 19 · La transparencia que escoge cada persona ═══════════
   Configuración › Apariencia. Todo el vidrio sale de --v-op (vidrio.js): el tinte de
   las láminas, de los pozos, del menú, la tira y los cajones, y de ahí para arriba el
   desenfoque. Hasta el punto de siempre (35) no hay desenfoque: el vidrio se ve
   limpio desde que entra y no se empaña. */
html.vidrio .pv-vd { background: var(--v-lamina); -webkit-backdrop-filter: var(--v-desen); backdrop-filter: var(--v-desen); }
/* Los botones redondos y los medallones van directo sobre el fondo: al pedir más
   opaco se oscurecen por debajo de su brillo. */
html.vidrio[data-theme="dark"] :is(.more, .tel-campana, .tel-volver, .page-heading > .button, .pv-redondo, .pv-moneda) { background-color: rgb(var(--tinte) / calc(var(--v-mas) * .75)); }

html.vidrio .vidrio-transp { --v-pct: 35%; display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px; }
html.vidrio .vidrio-transp-vista { position: relative; height: 150px; overflow: hidden; isolation: isolate; border-radius: 18px; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2), 0 8px 22px rgba(0, 0, 0, .32); }
html.vidrio .vidrio-transp-foto { position: absolute; inset: -8%; background-size: cover; background-position: center 58%; }
html.vidrio .vidrio-transp-foto::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--v-velo, 0)); }
html.vidrio .vidrio-transp-vista.f-grafito .vidrio-transp-foto { filter: grayscale(1) brightness(.9); }
html.vidrio .vidrio-transp-lamina {
  position: absolute; top: 50%; left: 14px; right: 14px; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border-radius: 16px; transform: translateY(-50%);
  background: var(--v-lamina); box-shadow: var(--v-canto), 0 8px 20px rgba(0, 0, 0, .24);
  -webkit-backdrop-filter: var(--v-desen); backdrop-filter: var(--v-desen);
  color: var(--ink); text-shadow: 0 1px 2px rgb(0 0 0 / calc(.4 * var(--v-sombra, 1)));
}
html.vidrio .vidrio-transp-lamina > small { color: rgb(var(--vt) / .6); font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
html.vidrio .vidrio-transp-renglon { display: flex; align-items: center; gap: 12px; }
html.vidrio .vidrio-transp-renglon > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.vidrio .vidrio-transp-renglon b { font-size: 14px; font-weight: 600; }
html.vidrio .vidrio-transp-renglon small { color: rgb(var(--vt) / .64); font-size: 12px; }
html.vidrio .vidrio-transp-mando { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html.vidrio [data-vidrio-transp] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
html.vidrio [data-vidrio-transp]:focus-visible { outline: none; }
html.vidrio [data-vidrio-transp]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--ac)) 0 var(--v-pct), rgb(var(--vt) / .16) var(--v-pct) 100%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .22); }
html.vidrio [data-vidrio-transp]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .08); transition: transform .25s cubic-bezier(.32, .72, 0, 1); }
html.vidrio [data-vidrio-transp]:active::-webkit-slider-thumb { transform: scale(1.1); }
html.vidrio [data-vidrio-transp]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgb(var(--ac) / .5), 0 3px 10px rgba(0, 0, 0, .3); }
html.vidrio [data-vidrio-transp]::-moz-range-track { height: 6px; border-radius: 999px; background: rgb(var(--vt) / .16); }
html.vidrio [data-vidrio-transp]::-moz-range-progress { height: 6px; border-radius: 999px; background: rgb(var(--ac)); }
html.vidrio [data-vidrio-transp]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
html.vidrio .vidrio-transp-puntas { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgb(var(--vt) / .6); font-size: 12.5px; }
html.vidrio .vidrio-transp-normal { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgb(var(--ac) / .14); box-shadow: inset 0 0 0 .5px rgb(var(--ac) / .4); color: var(--oro-claro); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
html.vidrio[data-theme="light"] .vidrio-transp-normal { color: rgb(var(--ac)); }
/* Se acomoda al espacio que tiene su caja (en la tableta el panel de Configuración es angosto). */
html.vidrio .aj-caja:has(> .vidrio-transp) { container-type: inline-size; }
@container (max-width: 540px) {
  html.vidrio .vidrio-transp { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ═══════════ 20 · "Viendo a" ═══════════
   Las caras solo se deslizan de lado (el aro que late alrededor de la escogida se
   salía de la fila y la dejaba moverse también de arriba abajo), y la escogida la
   marca una sola pieza de vidrio que viaja de una cara a otra (vidrio.js). */
html.vidrio .quien-lista { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; margin: -4px -6px; padding: 6px; }
html.vidrio .quien-lista.con-gota { position: relative; }
html.vidrio .quien-lista.con-gota .quien-ficha { position: relative; z-index: 1; }
html.vidrio .quien-lista.con-gota .quien-ficha.on,
html.vidrio[data-theme] .quien-lista.con-gota .quien-ficha.on { border-color: transparent; background: transparent; }
html.vidrio .quien-lista.con-gota .quien-ficha.on::after { display: none; }
html.vidrio .quien-gota {
  position: absolute; z-index: 0; top: 0; left: 0; border-radius: 999px; opacity: 0; pointer-events: none;
  background: rgb(var(--ac) / .16);
  box-shadow: inset 0 0 0 1.5px rgb(var(--ac) / .9), inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 18px rgb(var(--ac-brillo) / .2);
  transition: transform .52s cubic-bezier(.34, 1.16, .46, 1), width .52s cubic-bezier(.34, 1.16, .46, 1), opacity .25s ease;
  will-change: transform, width;
}
html.vidrio .quien-gota::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgb(var(--ac)); opacity: 0; animation: quien-pulso 2.6s var(--ease) 1.2s infinite; }
html[data-movimiento="reducido"] .quien-gota { transition: none; }
html[data-movimiento="reducido"] .quien-gota::after { animation: none; }

/* La lupa ya no va en la fila de las caras (al abrirse se les ponía encima): va
   arriba, en el renglón de "Viendo a", y al tocarla se estira a lo ancho de ese
   renglón mientras el título se aparta. Abre con la curva del iPhone: arranca
   decidida y se posa suave. */
@media (max-width: 1120px) {
  html.vidrio .quien { position: relative; display: block; padding: 12px 14px 10px; }
  html.vidrio .quien-titulo { display: flex; align-items: center; min-height: 40px; margin-right: 50px; transition: opacity .2s ease, transform .46s cubic-bezier(.32, .72, 0, 1); }
  html.vidrio .quien-lista { margin-top: 2px; }
  html.vidrio .quien-buscar,
  html.vidrio .quien:not(.buscando) .quien-buscar:not(:focus-within):not(.abriendo) {
    position: absolute; z-index: 2; top: 12px; right: 12px; box-sizing: border-box;
    width: 40px; height: 40px; min-height: 40px; padding: 0 11px; gap: 10px; overflow: hidden;
    border: 0; border-radius: 999px;
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .28), inset 0 0 0 .5px rgba(255, 255, 255, .18);
    color: var(--ink);
    transition: width .46s cubic-bezier(.32, .72, 0, 1), background-color .32s ease, box-shadow .32s ease, color .2s ease;
  }
  html.vidrio .quien-buscar svg { width: 18px; height: 18px; }
  html.vidrio .quien-buscar:is(:focus-within, .abriendo),
  html.vidrio .quien.buscando .quien-buscar {
    width: calc(100% - 24px);
    background-color: var(--v-pozo);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px rgb(var(--ac) / .7), 0 0 0 3px rgb(var(--ac) / .12);
    color: var(--oro-claro);
  }
  html.vidrio .quien-buscar input,
  html.vidrio .quien-buscar:is(:focus-within, .abriendo) input,
  html.vidrio .quien.buscando .quien-buscar input { flex: 1 1 auto; width: 0; min-width: 0; height: 100%; min-height: 0; padding: 0; opacity: 0; transition: opacity .14s ease; }
  html.vidrio .quien-buscar:is(:focus-within, .abriendo) input,
  html.vidrio .quien.buscando .quien-buscar input { opacity: 1; transition: opacity .3s ease .14s; }
  html.vidrio .quien:has(.quien-buscar:is(:focus-within, .abriendo)) .quien-titulo,
  html.vidrio .quien.buscando .quien-titulo { opacity: 0; transform: translateX(-10px); }
  html.vidrio .quien-conteo { flex: none; }
  html.vidrio[data-theme="light"] .quien-buscar,
  html.vidrio[data-theme="light"] .quien:not(.buscando) .quien-buscar:not(:focus-within):not(.abriendo) { background-color: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 .5px rgba(60, 48, 30, .18); }
  html.vidrio[data-theme="light"] .quien-buscar:is(:focus-within, .abriendo),
  html.vidrio[data-theme="light"] .quien.buscando .quien-buscar { color: rgb(var(--ac)); }
}
/* La lupa se abría de golpe (Erick, 27-09: "se ve así como de golpe"): la regla general de las
   casillas (§5), mucho más fuerte, le cambiaba la transición a la casilla por la de la sombra. En
   la compu el ancho saltaba de una vez; en el teléfono la caja sí se estiraba, pero "Nombre o
   cédula" aparecía entero al primer toque, con la caja todavía chiquita. Ahora, en todos los
   tamaños, el texto entra con un fundido cuando la caja ya va abriendo y se va primero al
   cerrar. El selector largo es para ganarle a §5. */
html.vidrio :is(.content, .drawer, #overlay-root) .quien-buscar input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
  opacity: 0;
  transition: opacity .14s ease, box-shadow .3s ease;
}
html.vidrio :is(.content, .drawer, #overlay-root) :is(.quien-buscar:focus-within, .quien-buscar.abriendo, .quien.buscando .quien-buscar) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
  opacity: 1;
  transition: opacity .3s ease .14s, box-shadow .3s ease;
}
/* En la compu la lupa va al final de la fila de caras y la que se estira es la casilla: con la
   curva del iPhone, igual que la caja en el teléfono, y el canto se enciende de oro. */
@media (min-width: 1121px) {
  html.vidrio .quien-buscar { transition: background-color .32s ease, box-shadow .32s ease, color .2s ease; }
  html.vidrio :is(.content, .drawer, #overlay-root) .quien-buscar input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
    transition: width .46s cubic-bezier(.32, .72, 0, 1), padding .46s cubic-bezier(.32, .72, 0, 1), opacity .14s ease, box-shadow .3s ease;
  }
  html.vidrio :is(.content, .drawer, #overlay-root) :is(.quien-buscar:focus-within, .quien-buscar.abriendo, .quien.buscando .quien-buscar) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
    transition: width .46s cubic-bezier(.32, .72, 0, 1), padding .46s cubic-bezier(.32, .72, 0, 1), opacity .3s ease .14s, box-shadow .3s ease;
  }
}
html[data-movimiento="reducido"] :is(.quien-buscar, .quien-buscar input, .quien-titulo) { transition: none; }

/* ═══════════ 21 · En el teléfono, se hunde solo lo que se toca ═══════════
   El :active del navegador se enciende apenas baja el dedo, aunque uno vaya a
   deslizar: lo que quedaba debajo se encogía y volvía, y al pasar rápido la
   pantalla temblaba. Aquí se apaga, y el hundido lo pone vidrio.js (.v-pulsado)
   solo cuando es un toque. */
@media (max-width: 480px) {
  html.vidrio :is(.tel-tab, .pv-vd, .pv-redondo, .button, .quien-ficha, .more, .settings-float, .espacio-float, .welcome-acciones button, .roster-card, .exp-hoja, .welcome-module):active:not(.v-pulsado) { transform: none; }
  html.vidrio .pv-app:active:not(.v-pulsado) .pv-moneda { transform: perspective(280px) translate3d(0, 0, 0) scale(1) rotateX(var(--pv-rx)) rotateY(var(--pv-ry)); }
  html.vidrio :is(.aj-fila, .aviso-ir, .tel-hoja-fila, .pv-renglon):active:not(.v-pulsado),
  html.vidrio table:not(:where(.comprobante *)) tbody tr:active:not(.v-pulsado) { background-color: transparent; }

  html.vidrio :is(.roster-card, .exp-hoja, .welcome-module).v-pulsado { transform: scale(.975); }
  html.vidrio :is(.tel-tab, .button, .quien-ficha, .more, .settings-float, .espacio-float, .welcome-acciones button).v-pulsado { transform: scale(.94); }
  html.vidrio .pv-vd.v-pulsado { transform: scale(.985); }
  html.vidrio .pv-redondo.v-pulsado { transform: scale(1.1); transition: transform .4s var(--pv-rebote); }
  html.vidrio .pv-app.v-pulsado .pv-moneda {
    transform: perspective(280px) translate3d(0, -4px, 0) scale(1.14);
    transition: transform .45s var(--pv-rebote), box-shadow .3s ease;
    box-shadow: inset 0 -7px 14px rgba(0, 0, 0, .26), inset 0 2px 3px rgb(var(--calido) / .2), 0 16px 30px rgba(0, 0, 0, .42), 0 0 22px var(--pv-halo);
  }
  html.vidrio .pv-app.v-pulsado .pv-moneda::before { opacity: 1; }
  html.vidrio .pv-app.v-pulsado .pv-nombre { transform: translate3d(0, 3px, 0); transition: transform .45s var(--pv-rebote); }
  html.vidrio :is(.aj-fila, .aviso-ir, .tel-hoja-fila, .pv-renglon).v-pulsado,
  html.vidrio table:not(:where(.comprobante *)) tbody tr.v-pulsado { background-color: rgba(255, 255, 255, .07); }
  html.vidrio[data-theme="light"] :is(.aj-fila, .aviso-ir, .tel-hoja-fila, .pv-renglon).v-pulsado,
  html.vidrio[data-theme="light"] table:not(:where(.comprobante *)) tbody tr.v-pulsado { background-color: rgba(60, 48, 30, .07); }
}

/* Hasta el punto de siempre, el vidrio va sin desenfoque (vidrio.js pone la marca). */
html.vidrio[data-vidrio-liso] { --v-desen: none; }

/* ═══════════ 22 · La galería de fondos en espacios angostos ═══════════
   De a uno por renglón, los dieciséis fondos medían más de seis mil pixeles y la
   transparencia quedaba hasta abajo. Cuando la caja es angosta (el teléfono, o el panel
   de Configuración en la tableta) cada grupo va en una fila que se desliza de lado,
   como el selector de fondos del iPhone. */
html.vidrio .aj-caja:has(> .vidrio-galeria) { container-type: inline-size; }
@container (max-width: 560px) {
  html.vidrio .vidrio-galeria {
    display: flex; gap: 12px; margin: 0 -4px; padding: 4px 4px 10px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: 4px; scrollbar-width: none;
  }
  html.vidrio .vidrio-galeria::-webkit-scrollbar { display: none; }
  html.vidrio .vidrio-fondo { flex: 0 0 112px; min-width: 0; scroll-snap-align: start; }
  html.vidrio .vidrio-fondo-foto { border-radius: 14px; }
  html.vidrio .vidrio-fondo-pie { flex-direction: column; align-items: flex-start; gap: 6px; }
  html.vidrio .vidrio-fondo-pie b { font-size: 12.5px; line-height: 1.25; }
  html.vidrio .vidrio-fondo .aj-marca { top: 6px; right: 6px; }
}

/* ═══════════ 23 · El celular acostado ═══════════
   Mientras el celular esté acostado (vidrio.js pone html.vidrio-acostado según cómo está girado
   el aparato, no según la forma de la ventana: el teclado la deja más ancha que alta) el programa se tapa: queda
   el paisaje y, al centro, un medallón con el teléfono que se endereza y el aviso. Nada se
   borra: lo de abajo solo se vuelve invisible, y al enderezarlo sigue donde estaba. La
   tableta y la computadora nunca entran aquí (ver vidrio.js). */
.vidrio-gire { display: none; }
@media all {
  html.vidrio.vidrio-acostado body > :not(.vidrio-cielo):not(.vidrio-gire) { opacity: 0 !important; pointer-events: none !important; }
  html.vidrio.vidrio-acostado .vidrio-gire {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: radial-gradient(55% 75% at 50% 50%, rgb(0 0 0 / .42), rgb(0 0 0 / 0) 75%);
    color: var(--ink);
    text-align: center;
    animation: vg-entra .5s ease both;
  }
  html.vidrio.vidrio-acostado[data-theme="light"] .vidrio-gire { background: radial-gradient(55% 75% at 50% 50%, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 75%); }
  html.vidrio.vidrio-acostado .vg-marco { display: grid; justify-items: center; gap: 6px; }
  /* El medallón de Inicio y de Configuración: filo de metal del color del fondo y aro fino. */
  html.vidrio.vidrio-acostado .vg-medalla {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 22%, rgb(var(--calido) / .22), rgb(var(--calido) / .06) 52%, rgb(var(--tinte) / .34) 100%);
    box-shadow: inset 0 -8px 16px rgba(0, 0, 0, .28), inset 0 2px 3px rgb(var(--calido) / .16), 0 10px 24px rgba(0, 0, 0, .36);
    color: rgb(var(--ac2));
  }
  html.vidrio.vidrio-acostado .vg-medalla::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.6px;
    border-radius: 50%;
    background: conic-gradient(from -40deg, var(--r1), var(--r2) 16%, var(--r3) 36%, var(--r4) 54%, var(--r5) 68%, var(--r6) 84%, var(--r1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .9;
  }
  html.vidrio.vidrio-acostado .vg-medalla::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; box-shadow: 0 0 0 .6px rgb(var(--ac) / .42); }
  html.vidrio.vidrio-acostado[data-theme="light"] .vg-medalla { color: rgb(var(--ac)); box-shadow: inset 0 -8px 16px rgba(60, 45, 20, .1), inset 0 2px 3px rgba(255, 255, 255, .7), 0 8px 20px rgba(60, 45, 20, .16); }
  html.vidrio.vidrio-acostado .vg-medalla svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: vg-endereza 3.2s cubic-bezier(.5, 0, .2, 1) infinite;
  }
  html.vidrio.vidrio-acostado .vidrio-gire b {
    font-family: var(--v-didot);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.1;
    text-shadow: 0 0 2px rgb(0 0 0 / .5), 0 1px 3px rgb(0 0 0 / .55), 0 0 14px rgb(0 0 0 / .45);
  }
  html.vidrio.vidrio-acostado .vidrio-gire small { color: var(--muted); font-size: 14px; text-shadow: 0 0 2px rgb(0 0 0 / .5), 0 1px 3px rgb(0 0 0 / .55), 0 0 12px rgb(0 0 0 / .45); }
  html.vidrio.vidrio-acostado[data-theme="light"] .vidrio-gire :is(b, small) { text-shadow: 0 0 2px rgb(255 255 255 / .75), 0 0 12px rgb(255 255 255 / .6); }
  /* Acostado → se endereza → se queda un rato derecho → vuelve a empezar. */
  @keyframes vg-endereza {
    0%, 18% { transform: rotate(-90deg); }
    46%, 100% { transform: rotate(0deg); }
  }
  @keyframes vg-entra { from { opacity: 0; } to { opacity: 1; } }
  html.vidrio-acostado[data-movimiento="reducido"] .vidrio-gire,
  html.vidrio-acostado[data-movimiento="reducido"] .vg-medalla svg { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.vidrio.vidrio-acostado .vidrio-gire,
  html.vidrio.vidrio-acostado .vg-medalla svg { animation: none; }
}

/* ═══════════ 24 · El logo de la cabecera ═══════════
   Erick (27-09): el logo de arriba a la izquierda de Inicio iba en una pastilla blanca de 40 px
   ("como escondido"; el blanco "pierde la estética"). Ahora va más grande y, según escoja la
   empresa en Configuración › Apariencia (vidrio.js, vidrioPintarLogo → data-logo-marco):
   · libre: el logo tal como se subió, sin nada detrás, con una sombra suave para despegarlo.
   · circulo: un círculo de vidrio con los dos colores del logo (--logo-c1, --logo-c2) y el
     acento del fondo (--ac): al cambiar de fondo, cambia con él. Un logo sin color (blanco y
     negro) toma los del fondo.
   El ícono entero (.con-icono: ya trae su fondo, el de la pantalla de inicio) sigue como un
   ícono de aplicación, con esquinas redondas. */
html.vidrio .pv-logo { width: 56px; height: 56px; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
html.vidrio .pv-logo img { object-fit: contain; filter: drop-shadow(0 2px 5px rgb(0 0 0 / .38)); }
html.vidrio .pv-logo .logo-vacio { border-radius: 16px; background: rgb(var(--tinte) / var(--v-a, .3)); color: var(--ink); box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .22); }
html.vidrio .pv-logo.con-icono { width: 52px; height: 52px; overflow: hidden; border-radius: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
html.vidrio .pv-logo.con-icono img { object-fit: cover; filter: none; }

/* Sin logo, en el menú de la computadora: el ícono sin su fondo, suelto y más grande. */
html.vidrio .vidrio-vitrina.limpia { width: 84px; height: 84px; overflow: visible; border-radius: 0; box-shadow: none; }
html.vidrio .vidrio-vitrina.limpia::after { display: none; }
html.vidrio .vidrio-vitrina.limpia img { object-fit: contain; filter: drop-shadow(0 3px 7px rgb(0 0 0 / .38)); }

/* El círculo de color: el de la cabecera, el del menú y la muestra de Configuración. */
html.vidrio[data-logo-marco="circulo"] .pv-logo:not(.con-icono),
html.vidrio[data-logo-marco="circulo"] .vidrio-vitrina.limpia,
html.vidrio .vidrio-logo-muestra.m-circulo {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(80% 60% at 30% 16%, rgb(255 255 255 / .42), rgb(255 255 255 / 0) 58%),
    radial-gradient(90% 90% at 78% 96%, rgb(var(--logo-c2, var(--ac2)) / .7), rgb(var(--logo-c2, var(--ac2)) / 0) 62%),
    conic-gradient(from 215deg, rgb(var(--logo-c1, var(--ac)) / .95), rgb(var(--ac) / .8) 36%, rgb(var(--logo-c2, var(--ac2)) / .92) 64%, rgb(var(--logo-c1, var(--ac)) / .95));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .42), inset 0 -10px 18px rgb(0 0 0 / .24), 0 6px 18px rgb(0 0 0 / .38);
}
html.vidrio[data-logo-marco="circulo"] .pv-logo:not(.con-icono) { width: 60px; height: 60px; }
html.vidrio[data-logo-marco="circulo"] .vidrio-vitrina.limpia { width: 88px; height: 88px; }
html.vidrio[data-logo-marco="circulo"] .vidrio-vitrina.limpia::after { display: block; }
/* El logo adentro, a tres cuartos del círculo (en % del círculo: un padding en % se mediría
   contra la caja de afuera). */
html.vidrio[data-logo-marco="circulo"] :is(.pv-logo:not(.con-icono), .vidrio-vitrina.limpia) img,
html.vidrio .vidrio-logo-muestra.m-circulo img { width: 76%; height: 76%; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .3)); }

/* Las dos muestras en Configuración › Apariencia: el fondo puesto, con el logo encima. */
html.vidrio .vidrio-marcos-logo { grid-template-columns: repeat(2, minmax(0, 190px)); }
html.vidrio .vidrio-marco-vista { display: grid; aspect-ratio: 1.25; place-items: center; background-position: center; }
html.vidrio .vidrio-logo-muestra { display: block; width: 44%; aspect-ratio: 1; }
html.vidrio .vidrio-logo-muestra img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 5px rgb(0 0 0 / .38)); }
/* Son dos: en la caja angosta no hace falta la fila que se desliza (§22), van mitad y mitad. */
@container (max-width: 560px) {
  html.vidrio .vidrio-galeria.vidrio-marcos-logo { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  html.vidrio .vidrio-marcos-logo .vidrio-fondo { flex: none; }
}

/* ═══════════ 25 · El menú entra entero, sin deslizarse ═══════════
   Erick (27-09): en la compu el menú de la izquierda se deslizaba por dentro y la versión quedaba
   escondida abajo (ventanas de 650 px de alto o menos, sobre todo con el ícono en vez del logo).
   Ahora la marca y el pie no se encogen, y los botones se reparten el alto que queda: de 48 px
   hasta 32 si hace falta. En pantallas bajas la marca también se achica. Solo si ni así cabe
   (menos de unos 520 px de alto) se desliza, como último recurso. */
@media (min-width: 481px) {
  html.vidrio .sidebar :is(.brand, .vidrio-marca, .espacio-marca, .side-foot) { flex: none; }
  html.vidrio .sidebar nav { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  html.vidrio .sidebar .nav-item { flex: 0 1 auto; min-height: 32px; }
}
@media (min-width: 481px) and (max-height: 700px) {
  html.vidrio .vidrio-marca { gap: 6px; padding: 2px 8px 12px; margin-bottom: 8px; }
  html.vidrio .vidrio-vitrina { width: 48px; height: 48px; border-radius: 14px; }
  html.vidrio .vidrio-vitrina.limpia,
  html.vidrio[data-logo-marco="circulo"] .vidrio-vitrina.limpia { width: 60px; height: 60px; }
  html.vidrio .sidebar .side-foot { gap: 6px; padding-top: 6px; }
}
@media (min-width: 481px) and (max-height: 600px) {
  html.vidrio .vidrio-marca-txt small { display: none; }
  html.vidrio .sidebar { padding-top: 14px; padding-bottom: 12px; }
}

/* ═══════════ 26 · Con el teclado ═══════════
   El cielo con su alto guardado (vidrio.js, --cielo-alto): el teclado ya no lo encoge y la foto
   no salta. Sin la medida (la compu), el alto grande de siempre. */
html.vidrio :is(.entrada-cielo, .portada-cielo) { height: var(--cielo-alto, 100lvh); }

/* ═══════════ 27 · Lo que se despliega encima ═══════════
   Erick (27-09): la lista de años salía casi transparente ("no va con el resto"): tomaba --card,
   que en el vidrio es un blanco al 4,5 %. Lo que se abre ENCIMA del contenido —la lista de años y
   la de períodos, el filtro de Colaboradores, los avisos de la campana— va con el vidrio de cada
   fondo: su tinte y su transparencia de base (--tinte, --v-a), que ya cambian con el fondo y con
   el deslizador de Transparencia. Encima de eso, más cuerpo (medio punto más de tinte) y el
   esmerilado, para que se lea sobre las láminas de abajo. El cuerpo es lo que asegura la lectura:
   el esmerilado no siempre alcanza a ver lo de atrás (dentro de una barra que entra animada, el
   navegador no le deja mirar fuera de ella). */
html.vidrio :is(.anio-lista, .filtro-estado-menu, .avisos-pop),
html.vidrio[data-theme] :is(.anio-lista, .filtro-estado-menu, .avisos-pop) {
  border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgb(var(--tinte) / min(.95, calc(var(--v-a) + .5)));
  box-shadow: var(--v-canto), 0 16px 38px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}
html.vidrio .avisos-pop::before { display: none; }
html.vidrio :is(.anio-lista, .filtro-estado-menu) button { color: var(--ink); }
html.vidrio :is(.anio-lista, .filtro-estado-menu) button:hover { background: rgb(var(--calido) / .08); }
html.vidrio .anio-lista button.puesto,
html.vidrio .filtro-estado-menu button.on {
  background: rgb(var(--ac) / .18);
  color: rgb(var(--ac-letra, var(--ac)));
  box-shadow: inset 0 0 0 .5px rgb(var(--ac) / .45);
}

/* ═══════════ 28 · La lupa de la portada ═══════════
   En la portada de cada pestaña ("¿A quién le vamos a ver…?"), con poca gente el buscador va
   plegado en su lupa. Plegado era una casilla del color de la lámina y solo se veía el ícono;
   Erick (27-09) la pidió "dentro de un óvalo pequeñito, y que al tocarla el óvalo se haga
   grande". Plegada: un óvalo de vidrio claro con su canto, como el botón de la lupa de "Viendo
   a". Al tocarla se estira con la curva del iPhone y el canto se enciende del acento del fondo.
   El selector largo es para ganarle a las casillas (§5). */
html.vidrio .portada-buscar.discreta { width: 72px; max-width: 72px; transition: max-width .46s cubic-bezier(.32, .72, 0, 1), width .46s cubic-bezier(.32, .72, 0, 1); }
html.vidrio .portada-buscar.discreta:is(:focus-within, .abriendo) { width: 100%; max-width: 320px; }
html.vidrio :is(.content, .drawer, #overlay-root) .portada-buscar.discreta input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .28), inset 0 0 0 .5px rgba(255, 255, 255, .18), 0 4px 12px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: background-color .32s ease, box-shadow .32s ease, padding .46s cubic-bezier(.32, .72, 0, 1);
}
html.vidrio :is(.content, .drawer, #overlay-root) .portada-buscar.discreta:is(:focus-within, .abriendo) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
  border-radius: 999px;
  background-color: var(--v-pozo);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px rgb(var(--ac) / .7), 0 0 0 3px rgb(var(--ac) / .12);
  cursor: text;
}
html.vidrio .portada-buscar.discreta svg { color: var(--ink); transition: left .46s cubic-bezier(.32, .72, 0, 1), margin .46s cubic-bezier(.32, .72, 0, 1), color .2s ease; }
html.vidrio .portada-buscar.discreta:is(:focus-within, .abriendo) svg { color: rgb(var(--ac-letra, var(--ac))); }
html.vidrio[data-theme="light"] :is(.content, .drawer, #overlay-root) .portada-buscar.discreta:not(:focus-within):not(.abriendo) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
  background-color: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 .5px rgba(60, 48, 30, .18), 0 4px 12px rgba(60, 48, 30, .12);
}
html[data-movimiento="reducido"] .portada-buscar.discreta,
html[data-movimiento="reducido"] .portada-buscar.discreta :is(input, svg) { transition: none; }