/* ═══════════ Configuración y los buscadores ═══════════
   Va después de vidrio.css. Dos cosas:

   1. Los buscadores de una sola caja (todos los tamaños). vidrio.css quería la
      casilla transparente dentro del pozo, pero la regla general de las
      casillas era más específica y le ganaba: se veía un pozo dentro de otro,
      corrido a la derecha. Erick lo vio como "dos barras, una encima de otra".

   2. Configuración: la empresa en su medallón, el buscador, las tarjetas vivas
      acomodadas como widgets y cada sección con su medallón junto al título
      (vidrio-config.js cuenta lo que se escogió). Nació en el teléfono (§2) y
      el 27-09 Erick la pidió igual en la computadora: §2 vale en todos los
      tamaños y §2b la acomoda arriba de 480 px (tablero de cuatro columnas,
      la sección aparte con su botón para volver). */

/* ═══ 1 · Los buscadores ═══ */
html.vidrio :is(.content, .drawer, #overlay-root) :is(.search, .aj-buscar, .exp-buscar, .quien-buscar, .portada-buscar) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
html.vidrio :is(.content, .drawer, #overlay-root) :is(.search, .aj-buscar, .exp-buscar, .quien-buscar, .portada-buscar) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* La vista previa de Configuración › Pantalla de inicio enseña el fondo que está
   puesto (app.js le pone la foto); sobre los paisajes, con su velo, igual que la
   pantalla de verdad. */
html.vidrio .aj-mini-vidrio { box-shadow: inset 0 0 0 999px rgb(0 0 0 / var(--v-velo, 0)), inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 10px 26px rgba(0, 0, 0, .35); }

/* El video de fondo nunca enseña el botón de "reproducir" de iOS: si no pudo arrancar,
   vidrio-config.js lo esconde (.vidrio-peli-quieta) y queda la foto quieta de debajo. */
html.vidrio .vidrio-peli { pointer-events: none; }
html.vidrio .vidrio-peli.vidrio-peli-quieta { visibility: hidden; }
html.vidrio .vidrio-peli::-webkit-media-controls,
html.vidrio .vidrio-peli::-webkit-media-controls-panel,
html.vidrio .vidrio-peli::-webkit-media-controls-overlay-play-button,
html.vidrio .vidrio-peli::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; opacity: 0; }

/* Las piezas del índice que solo usa el teléfono. */
:is(.aj-indice-cabeza, .aj-item) > :is(.aj-tel-lema, .aj-tel-casa, .aj-tel-medalla, .aj-tel-vivo, .aj-tel-flecha) { display: none; }
/* El botón de volver de la sección abierta es de la computadora (§2b); en el teléfono
   vuelve la flecha de la barra de arriba. */
.aj-volver { display: none; }

/* ═══ 2 · Configuración: el tablero de tarjetas vivas ═══
   Se hizo para el teléfono y así se lee (medidas de dedo, dos columnas); desde el
   27-09 vale en todos los tamaños, y lo de la computadora va encima en §2b. Por eso
   este bloque se queda tal cual: el teléfono no cambia ni un pixel. */
@media all {
  html.vidrio {
    --cfg-moneda: radial-gradient(circle at 50% 22%, rgb(var(--calido) / .18), rgb(var(--calido) / .04) 52%, rgb(var(--tinte) / .22) 100%);
    --cfg-sombra: 0 10px 30px rgba(0, 0, 0, .26);
    --cfg-rojo: 217 96 79;
    --cfg-resorte: cubic-bezier(.26, 1.45, .42, 1);
  }
  html.vidrio[data-theme="light"] {
    --cfg-moneda: radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55) 60%, rgb(var(--ac) / .12) 100%);
    --cfg-sombra: 0 10px 28px rgba(60, 45, 20, .12);
    --cfg-rojo: 178 62 44;
  }

  /* La caja de afuera se va: las hojas de vidrio quedan directo sobre el fondo,
     como en las otras pestañas. Antes era una hoja con otra hoja adentro. */
  html.vidrio .ajustes,
  html.vidrio[data-theme] .ajustes {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: visible;
  }
  /* El título arriba, a la altura del de las otras pestañas, con la campana al lado. */
  html.vidrio .content:has(.ajustes) { padding-top: calc(env(safe-area-inset-top) + 18px); }

  html.vidrio .aj-indice {
    gap: 0;
    padding: 0;
    background: none;
    overflow: visible;
  }
  html.vidrio .aj-indice-pie,
  html.vidrio .aj-indice-ico,
  html.vidrio .aj-indice-cabeza > div > small,
  html.vidrio .aj-pastilla { display: none; }

  /* ── El encabezado: "Configuración" en Didot, como las demás pestañas ── */
  html.vidrio .aj-indice-cabeza {
    display: block;
    margin: 0 0 22px;
    padding: 0;
  }
  html.vidrio .aj-indice-cabeza > div { display: block; padding-right: 56px; }
  html.vidrio .aj-indice-cabeza > div > b {
    display: block;
    color: var(--ink);
    font-family: var(--v-didot);
    font-size: clamp(30px, 9vw, 40px);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 44px;
    white-space: nowrap;
    text-shadow: 0 1px 14px rgb(0 0 0 / calc(.35 * var(--v-sombra, 1)));
  }
  html.vidrio .aj-tel-lema {
    display: block;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
  }

  /* ── La empresa: su logo en un medallón grande al centro, como el perfil de
     los Ajustes del iPhone. Toda la pieza es un botón que abre Empresa. ── */
  html.vidrio .aj-tel-casa {
    display: grid;
    justify-items: center;
    width: 100%;
    margin: 26px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  html.vidrio .aj-tel-casa.v-pulsado { transform: scale(.975); transition: transform .14s ease-out; }
  html.vidrio .aj-tel-casa:focus-visible { outline: 2px solid rgb(var(--ac)); outline-offset: 6px; border-radius: 22px; }
  html.vidrio .ec-logo {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 22%, rgb(var(--calido) / .22), rgb(var(--calido) / .06) 52%, rgb(var(--tinte) / .3) 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);
  }
  html.vidrio .ec-logo::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    padding: 1.8px;
    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;
    pointer-events: none;
  }
  html.vidrio .ec-logo::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; box-shadow: 0 0 0 .6px rgb(var(--ac) / .42); pointer-events: none; }
  html.vidrio[data-theme="light"] .ec-logo { 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 .ec-logo img { width: 62%; height: 62%; border-radius: 12px; object-fit: contain; }
  html.vidrio .ec-logo .logo-vacio { display: grid; place-items: center; width: 100%; height: 100%; background: none; border: 0; }
  html.vidrio .ec-logo .logo-vacio b { color: rgb(var(--ac2)); font-family: var(--v-didot); font-size: 36px; font-weight: 400; }
  html.vidrio[data-theme="light"] .ec-logo .logo-vacio b { color: rgb(var(--ac)); }
  html.vidrio .ec-logo .logo-vacio small { display: none; }
  html.vidrio .ec-datos { display: grid; justify-items: center; gap: 4px; max-width: 100%; min-width: 0; margin-top: 14px; }
  html.vidrio .ec-datos b { max-width: 100%; overflow: hidden; color: var(--ink); font-family: var(--v-didot); font-size: 29px; font-weight: 400; letter-spacing: -.01em; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 14px rgb(0 0 0 / calc(.35 * var(--v-sombra, 1))); }
  html.vidrio .ec-datos small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
  html.vidrio .ec-contacto { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; min-width: 0; margin-top: 14px; }
  html.vidrio .ec-contacto span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    padding: 6px 11px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.vidrio[data-theme="light"] .ec-contacto span { background: rgba(60, 48, 30, .05); box-shadow: inset 0 0 0 .5px rgba(60, 48, 30, .14); }
  html.vidrio .ec-contacto svg { flex: 0 0 auto; width: 14px; height: 14px; color: rgb(var(--ac)); stroke-width: 2; }
  html.vidrio .ec-editar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 14px;
    padding: 8px 10px 8px 16px;
    border-radius: 999px;
    background: var(--v-lamina);
    box-shadow: var(--v-canto), 0 6px 16px rgba(0, 0, 0, .22);
    color: rgb(var(--ac2));
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }
  html.vidrio[data-theme="light"] .ec-editar { color: rgb(var(--ac)); box-shadow: var(--v-canto), 0 6px 14px rgba(60, 45, 20, .12); }
  html.vidrio .ec-editar svg { width: 16px; height: 16px; transition: transform .45s var(--cfg-resorte); }
  html.vidrio .aj-tel-casa.v-pulsado .ec-editar svg { transform: translateX(3px); }

  /* ── El buscador, justo debajo de la empresa: una sola caja, del alto de un dedo ── */
  html.vidrio .aj-buscar {
    gap: 10px;
    height: 46px;
    margin: 0 0 26px;
    padding: 0 14px;
    border-radius: 14px;
  }
  html.vidrio .aj-buscar svg { width: 18px; height: 18px; }
  html.vidrio .aj-buscar input { height: 100%; font-size: 16px; }
  html.vidrio .aj-sin-resultados { padding: 22px 12px; color: var(--muted); font-size: 14px; }

  /* Tocar en el iPhone deja el :hover puesto; aquí no hace falta. Y cuando el
     índice no cabe en la ventana (.apretado), configuracion.css junta la lista y
     pinta rayitas entre grupos: en el teléfono la lista se desliza, no se aprieta. */
  html.vidrio .aj-item:hover { background: transparent; }
  html.vidrio .aj-indice.apretado .aj-indice-rotulo { display: block; }
  html.vidrio .aj-indice.apretado .aj-indice-grupo + .aj-indice-grupo { padding-top: 0; background: none; }
  html.vidrio .aj-lista,
  html.vidrio .aj-indice.apretado .aj-lista { gap: 26px; }

  /* ── Las tarjetas vivas, acomodadas como widgets: grandes y medianas ── */
  html.vidrio .aj-indice-grupo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.vidrio .aj-indice-rotulo {
    display: block;
    grid-column: 1 / -1;
    margin-bottom: -2px;
    padding: 0 18px;
    color: rgb(var(--ac));
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .14em;
  }
  /* La empresa ya está arriba en su medallón: su tarjeta de la lista no se ve. Al
     buscar, el medallón se queda en su lugar (si se quitara, el buscador saltaría
     bajo el dedo) y solo se apaga si la empresa no tiene que ver con lo buscado. */
  html.vidrio .aj-indice .aj-item[data-seccion="empresa"] { display: none; }
  html.vidrio .aj-tel-casa { transition: transform .5s var(--cfg-resorte), opacity .3s ease; }
  html.vidrio .aj-indice:has([data-cfg-buscar]:not(:placeholder-shown)):has(.aj-item[data-seccion="empresa"][hidden]) .aj-tel-casa { opacity: .32; }

  /* La tarjeta: una hoja de vidrio que se hunde al tocarla. Entran en cascada. */
  html.vidrio .aj-indice .aj-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto auto;
    column-gap: 10px;
    align-content: start;
    min-height: 142px;
    padding: 14px;
    border-radius: 22px;
    background: var(--v-lamina);
    box-shadow: var(--v-canto), var(--cfg-sombra);
    color: var(--ink);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.2;
    transition: transform .5s var(--cfg-resorte), box-shadow .3s ease;
    animation: cfg-entra .6s cubic-bezier(.22, .9, .25, 1) backwards;
    animation-delay: calc((var(--cfg-g, 0) * 3 + var(--cfg-k, 0)) * 45ms);
  }
  /* telefono.css tiñe los renglones al tocarlos: aquí la tarjeta se hunde entera. */
  html.vidrio .aj-indice .aj-item:active { background: var(--v-lamina); }
  html.vidrio .aj-indice .aj-item.v-pulsado {
    transform: scale(.97);
    box-shadow: var(--v-canto), 0 3px 10px rgba(0, 0, 0, .22);
    transition: transform .14s ease-out, box-shadow .14s ease-out;
  }
  html.vidrio .aj-indice .aj-item .aj-ficha { display: none; }
  html.vidrio .aj-indice .aj-item .aj-tel-medalla { display: grid; }
  html.vidrio .aj-indice .aj-item .aj-tel-vivo { display: contents; }
  html.vidrio .aj-indice .aj-item .aj-tel-flecha { display: grid; place-items: center; color: rgb(var(--vt) / .34); transition: transform .45s var(--cfg-resorte), color .2s ease; }
  html.vidrio .aj-indice .aj-item .aj-tel-flecha svg { width: 16px; height: 16px; }
  html.vidrio .aj-indice .aj-item.v-pulsado .aj-tel-medalla { transform: scale(.9); }
  html.vidrio .aj-indice .aj-item.v-pulsado .aj-tel-flecha { transform: translateX(3px); color: var(--ink); }
  html.vidrio .aj-indice .aj-item .aj-punto { position: absolute; top: 14px; right: 14px; margin: 0; }
  html.vidrio .aj-item-nombre .largo { display: inline; }
  html.vidrio .aj-item-nombre .corto { display: none; }
  /* El orden de la cascada: grupo y lugar en el grupo. */
  html.vidrio .aj-lista > div:nth-of-type(2) { --cfg-g: 1; }
  html.vidrio .aj-lista > div:nth-of-type(3) { --cfg-g: 2; }
  html.vidrio .aj-lista > div:nth-of-type(4) { --cfg-g: 3; }
  html.vidrio .aj-lista > div:nth-of-type(n + 5) { --cfg-g: 4; }
  html.vidrio .aj-indice-grupo > .aj-item:nth-of-type(2) { --cfg-k: 1; }
  html.vidrio .aj-indice-grupo > .aj-item:nth-of-type(3) { --cfg-k: 2; }
  html.vidrio .aj-indice-grupo > .aj-item:nth-of-type(n + 4) { --cfg-k: 3; }

  /* Mediana: medallón y dibujo arriba; nombre; el dato con su flecha abajo. */
  html.vidrio .aj-indice .aj-item .aj-tel-medalla { --md: 42px; grid-column: 1; grid-row: 1; }
  /* El dibujo va en el renglón del medallón pero sin ser columna: si no, su ancho le quitaba espacio al dato de abajo. */
  html.vidrio .aj-indice .aj-item .vv-vis { grid-column: 1 / -1; grid-row: 1; align-self: center; justify-self: end; }
  html.vidrio .aj-indice .aj-item .aj-item-nombre { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; font-size: 15.5px; white-space: normal; }
  html.vidrio .aj-indice .aj-item .vv-texto { grid-column: 1; grid-row: 4; margin-top: 3px; }
  html.vidrio .aj-indice .aj-item .vv-texto b { display: -webkit-box; color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  html.vidrio .aj-indice .aj-item .vv-texto small { display: none; }
  html.vidrio .aj-indice .aj-item .aj-tel-flecha { grid-column: 2; grid-row: 4; align-self: end; }

  /* Grande: medallón, nombre y flecha arriba; el adelanto en un pozo debajo. */
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) {
    grid-column: 1 / -1;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 14px;
    min-height: 0;
  }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) :is(.aj-tel-medalla, .aj-item-nombre, .aj-tel-flecha) { grid-row: 1; margin: 0; align-self: center; }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .aj-tel-medalla { --md: 44px; grid-column: 1; }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .aj-item-nombre { grid-column: 2; font-size: 16px; }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .aj-tel-flecha { grid-column: 3; }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .aj-tel-vivo {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .14);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(255, 255, 255, .08);
  }
  html.vidrio[data-theme="light"] .aj-indice .aj-item .aj-tel-vivo { background: rgba(60, 48, 30, .05); box-shadow: inset 0 1px 2px rgba(60, 45, 20, .1), inset 0 0 0 .5px rgba(60, 48, 30, .1); }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) :is(.vv-vis, .vv-texto) { grid-column: auto; grid-row: auto; margin: 0; }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .vv-texto small { display: block; }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .vv-texto b { color: var(--ink); font-size: 14px; font-weight: 600; }
  html.vidrio .aj-indice .aj-item[data-seccion="inicio"] .aj-tel-vivo { padding: 0; background: none; box-shadow: none; }
  html.vidrio .aj-indice .aj-item[data-seccion="inicio"] .vv-marco { flex: 1 1 auto; min-width: 0; }
  html.vidrio .aj-indice .aj-tono-restablecer .vv-texto b { color: rgb(var(--cfg-rojo)); }

  /* El medallón: el mismo de Inicio (filo de metal del color del fondo, aro
     fino adentro y un brillo que lo cruza despacio), con el ícono de la sección. */
  html.vidrio .aj-tel-medalla {
    --md: 44px;
    position: relative;
    isolation: isolate;
    place-items: center;
    width: var(--md);
    height: var(--md);
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 22%, rgb(var(--calido) / .2), rgb(var(--calido) / .05) 52%, rgb(var(--tinte) / .24) 100%);
    box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .26), inset 0 2px 3px rgb(var(--calido) / .16), 0 6px 14px rgba(0, 0, 0, .3);
    color: rgb(var(--ac2));
    transition: transform .5s var(--cfg-resorte);
  }
  html.vidrio .aj-tel-medalla::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    padding: 1.4px;
    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: .86;
    pointer-events: none;
  }
  html.vidrio .aj-tel-medalla::after {
    content: "";
    position: absolute;
    inset: 5.5px;
    border-radius: 50%;
    box-shadow: 0 0 0 .6px rgb(var(--ac) / .42);
    pointer-events: none;
  }
  html.vidrio .aj-tel-medalla svg { position: relative; z-index: 1; width: 20px; height: 20px; stroke-width: 1.6; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
  html.vidrio .aj-tel-brillo {
    position: absolute;
    z-index: 1;
    inset: -30%;
    background: linear-gradient(115deg, rgb(var(--calido) / 0) 42%, rgb(var(--calido) / .26) 50%, rgb(var(--calido) / 0) 58%);
    transform: translate3d(-72%, 0, 0);
    animation: cfg-brillo 15s cubic-bezier(.4, 0, .2, 1) infinite;
    will-change: transform;
    pointer-events: none;
  }
  html.vidrio[data-theme="light"] .aj-tel-medalla { color: rgb(var(--ac)); box-shadow: inset 0 -5px 10px rgba(60, 45, 20, .1), inset 0 2px 3px rgba(255, 255, 255, .7), 0 5px 12px rgba(60, 45, 20, .14); }
  html.vidrio[data-theme="light"] .aj-tel-medalla svg { filter: none; }
  html.vidrio .aj-tono-restablecer .aj-tel-medalla { color: rgb(var(--cfg-rojo)); }
  html.vidrio .aj-tono-restablecer .aj-tel-medalla::before { background: conic-gradient(from -40deg, #f3b1a6, #d9604f 30%, #8e2f22 55%, #e98a7b 80%, #f3b1a6); }
  html.vidrio .aj-tono-restablecer .aj-tel-medalla::after { box-shadow: 0 0 0 .6px rgb(var(--cfg-rojo) / .45); }


  /* La moneda de los renglones de adentro de cada sección: el ícono en un
     círculo con filo del acento, como las iniciales de las personas. */
  html.vidrio .aj-fila-ico {
    border-radius: 50%;
    background: var(--cfg-moneda);
    color: var(--oro-claro);
    box-shadow: inset 0 0 0 1px rgb(var(--ac) / .5), 0 3px 8px rgba(0, 0, 0, .18);
  }
  html.vidrio[data-theme="light"] .aj-fila-ico { color: rgb(var(--ac)); box-shadow: inset 0 0 0 1px rgb(var(--ac) / .45), 0 3px 8px rgba(60, 45, 20, .1); }

  /* Los adelantos de las tarjetas. */
  html.vidrio .vv-texto { display: grid; gap: 2px; min-width: 0; }
  html.vidrio .vv-texto b { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  html.vidrio .vv-texto small { overflow: hidden; color: var(--muted); font-size: 12.5px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
  html.vidrio .vv-vis { flex: 0 0 auto; }
  html.vidrio .vv-cifra { display: flex; align-items: baseline; gap: 2px; color: rgb(var(--ac2)); font-family: var(--v-didot); font-size: 34px; font-weight: 400; line-height: 1; }
  html.vidrio[data-theme="light"] .vv-cifra { color: rgb(var(--ac)); }
  html.vidrio .vv-cifra small { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; font-weight: 600; color: var(--muted); }
  html.vidrio .vv-foto { width: 56px; height: 56px; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2), 0 4px 12px rgba(0, 0, 0, .3); }
  html.vidrio .vv-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
  html.vidrio .vv-gris { filter: grayscale(1); }
  html.vidrio .vv-tonos { display: flex; gap: 5px; margin-top: 3px; }
  html.vidrio .vv-tonos i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .4); }
  html.vidrio .vv-marco {
    position: relative;
    display: grid;
    align-content: center;
    gap: 2px;
    min-height: 64px;
    padding: 10px 14px;
    overflow: hidden;
    border-radius: 14px;
    background: #050506 url("fondo-oro.jpg") center 62% / cover;
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16);
  }
  /* La miniatura lleva el velo de su paisaje y un poco más: es chica y las letras van
     encima de la foto (en el Valle nevado se perdían sobre la nieve). */
  html.vidrio .vv-marco { box-shadow: inset 0 0 0 999px rgb(0 0 0 / calc(var(--v-velo, 0) + .16)), inset 0 0 0 .5px rgba(255, 255, 255, .16); }
  html.vidrio[data-theme="light"] .vv-marco { box-shadow: inset 0 0 0 999px rgb(255 255 255 / .18), inset 0 0 0 .5px rgba(60, 48, 30, .16); }
  html.vidrio .vv-marco em { color: #f7f8fb; font-family: var(--v-didot); font-size: 21px; font-style: normal; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
  html.vidrio .vv-marco small { overflow: hidden; color: rgba(255, 255, 255, .78); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
  html.vidrio[data-fondo="seda"] .vv-marco :is(em, small),
  html.vidrio[data-fondo="crema"] .vv-marco :is(em, small) { color: #1f1d1a; text-shadow: none; }
  html.vidrio .vv-caras { display: flex; align-items: center; }
  html.vidrio .vv-caras i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--cfg-moneda);
    box-shadow: inset 0 0 0 1px rgb(var(--ac) / .55), 0 0 0 2px rgba(0, 0, 0, .35);
    color: rgb(var(--ac2));
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
  }
  html.vidrio .vv-caras i:first-child { margin-left: 0; }
  html.vidrio .vv-candado svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html.vidrio .vv-pastilla { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
  html.vidrio[data-theme="light"] .vv-pastilla { background: rgba(60, 48, 30, .06); box-shadow: inset 0 0 0 .5px rgba(60, 48, 30, .14); }
  html.vidrio .vv-pastilla.vv-nueva { background: rgb(var(--ac) / .22); box-shadow: inset 0 0 0 .5px rgb(var(--ac) / .5); }
  html.vidrio .vv-luz { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .28); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
  html.vidrio .vv-luz.on { background: #5fd49a; box-shadow: 0 0 0 4px rgba(95, 212, 154, .16), 0 0 14px rgba(95, 212, 154, .55); animation: cfg-late 3.2s ease-in-out infinite; }
  html.vidrio .vv-anillo {
    --pct: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(var(--tinte) / .4) 76%, transparent 78%), conic-gradient(rgb(var(--ac)) calc(var(--pct) * 1%), rgba(255, 255, 255, .12) 0);
  }
  html.vidrio .vv-anillo b { color: var(--ink); font-size: 11px; font-weight: 700; }

  /* ════════ La sección abierta ════════ */
  html.vidrio .aj-panel {
    --aj-lado: 0px;
    padding: 0;
    background: none;
    overflow: visible;
  }
  html.vidrio .aj-panel::before { display: none; }
  /* Arriba, la moneda de la sección junto al título en Didot. */
  html.vidrio .aj-cabeza,
  html.vidrio[data-theme] .aj-cabeza {
    position: static;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    margin: 0 0 24px;
    padding: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.vidrio .aj-cabeza .aj-ficha.grande { width: 54px; height: 54px; }
  html.vidrio .aj-cabeza .aj-ficha.grande svg { width: 24px; height: 24px; stroke-width: 1.7; }
  /* El mismo medallón de los widgets: filo de metal del color del fondo y aro fino adentro. */
  html.vidrio .aj-cabeza .aj-ficha.grande,
  html.vidrio[data-theme] .aj-panel .aj-cabeza .aj-ficha.grande {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 50%;  /* configuracion.css le daba esquinas de 13–14 px: se veía un cuadro con el aro redondo adentro */
    background: radial-gradient(circle at 50% 22%, rgb(var(--calido) / .2), rgb(var(--calido) / .05) 52%, rgb(var(--tinte) / .24) 100%);
    box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .26), inset 0 2px 3px rgb(var(--calido) / .16), 0 8px 18px rgba(0, 0, 0, .32);
    color: rgb(var(--ac2));
  }
  html.vidrio .aj-cabeza .aj-ficha.grande::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    padding: 1.5px;
    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: .86;
    pointer-events: none;
  }
  html.vidrio .aj-cabeza .aj-ficha.grande::after { content: ""; position: absolute; inset: 6.5px; border-radius: 50%; box-shadow: 0 0 0 .6px rgb(var(--ac) / .42); pointer-events: none; }
  html.vidrio .aj-cabeza .aj-ficha.grande svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
  html.vidrio[data-theme="light"] .aj-panel .aj-cabeza .aj-ficha.grande { color: rgb(var(--ac)); box-shadow: inset 0 -6px 12px rgba(60, 45, 20, .1), inset 0 2px 3px rgba(255, 255, 255, .7), 0 6px 14px rgba(60, 45, 20, .14); }
  html.vidrio[data-theme="light"] .aj-cabeza .aj-ficha.grande svg { filter: none; }
  html.vidrio .aj-panel.aj-tono-restablecer .aj-cabeza .aj-ficha.grande { color: rgb(var(--cfg-rojo)); }
  html.vidrio .aj-panel.aj-tono-restablecer .aj-cabeza .aj-ficha.grande::before { background: conic-gradient(from -40deg, #f3b1a6, #d9604f 30%, #8e2f22 55%, #e98a7b 80%, #f3b1a6); }
  html.vidrio .aj-cabeza h2 {
    color: var(--ink);
    font-family: var(--v-didot);
    font-size: clamp(27px, 7.8vw, 34px);
    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 .aj-cabeza p { margin-top: 5px; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
  html.vidrio .aj-cuerpo { gap: 26px; }
  html.vidrio .aj-grupo { display: grid; gap: 10px; }
  html.vidrio .aj-grupo h3 { color: rgb(var(--ac)); font-size: 11.5px; font-weight: 650; letter-spacing: .14em; }
  html.vidrio .aj-caja,
  html.vidrio[data-theme] .aj-caja {
    border: 0;
    border-radius: 22px;
    background: var(--v-lamina);
    box-shadow: var(--v-canto), var(--cfg-sombra);
    -webkit-backdrop-filter: var(--v-desen);
    backdrop-filter: var(--v-desen);
  }
  /* El botón de un grupo ("Crear la cuenta de dueño") iba metido al lado del
     rótulo y lo empujaba. Pasa debajo de la hoja, a lo ancho. */
  html.vidrio .aj-grupo-cabeza { display: contents; }
  html.vidrio .aj-grupo-cabeza > h3 { padding: 0 18px; }
  html.vidrio .aj-grupo > .aj-caja { order: 2; }
  html.vidrio .aj-grupo-cabeza > :is(.button, .aj-botones) { order: 3; }
  html.vidrio .aj-grupo > .aj-pie { order: 4; }
  html.vidrio .aj-grupo-cabeza > .button { width: 100%; min-height: 48px; justify-content: center; }
  html.vidrio .aj-grupo-cabeza > .aj-botones { display: flex; flex-wrap: wrap; gap: 8px; }
  html.vidrio .aj-grupo-cabeza > .aj-botones .button { flex: 1 1 auto; min-height: 46px; justify-content: center; }

  /* Cada renglón: moneda · texto · control. Los controles chicos (interruptor,
     dato) quedan a la derecha; un botón baja a su renglón, alineado con el
     texto. Antes el texto se caía debajo de la moneda y la moneda quedaba sola. */
  html.vidrio .aj-fila {
    display: grid;
    grid-template-columns: minmax(58%, 1fr) minmax(0, auto);
    align-items: center;
    column-gap: 14px;
    row-gap: 12px;
  }
  html.vidrio .aj-fila:has(> .aj-fila-ico) { grid-template-columns: 34px minmax(50%, 1fr) minmax(0, auto); }
  /* El dato de la derecha ("4 o 5 por mes", una fecha) no le quita la mitad del renglón
     a la descripción: si no cabe, baja a otro renglón él, no la descripción. */
  /* configuracion.css le daba sangría para alinearlo cuando bajaba; en la rejilla ya queda alineado. */
  html.vidrio .aj-fila-control,
  html.vidrio .aj-fila:has(.aj-fila-ico) .aj-fila-control:has(.aj-interruptor, .aj-dato) { width: auto; min-width: 0; padding-left: 0; }
  html.vidrio .aj-fila-control .aj-dato { height: auto; min-height: 26px; padding-top: 4px; padding-bottom: 4px; line-height: 1.3; white-space: normal; text-align: right; }
  html.vidrio .aj-fila > .aj-fila-control:has(.button) { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
  html.vidrio .aj-fila:has(> .aj-fila-ico) > .aj-fila-control:has(.button) { grid-column: 2 / -1; }
  html.vidrio .aj-fila + .aj-fila::before { left: 64px; background: var(--v-hilo); }
  html.vidrio .aj-fila:not(:has(> .aj-fila-ico)) + .aj-fila::before,
  html.vidrio .aj-fila + .aj-fila:not(:has(> .aj-fila-ico))::before { left: 18px; }
  html.vidrio .aj-fila-ico { width: 34px; height: 34px; }
  html.vidrio .aj-fila-ico svg { width: 17px; height: 17px; stroke-width: 1.8; }
  html.vidrio .aj-pie { padding: 0 18px; font-size: 12.5px; line-height: 1.5; }
  /* Los conteos de Respaldos: en tres columnas "Aguinaldos pagados" se cortaba. */
  html.vidrio .aj-conteos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.vidrio .aj-conteo small { white-space: normal; }

  @keyframes cfg-entra { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes cfg-brillo { 0% { transform: translate3d(-72%, 0, 0); } 10%, 100% { transform: translate3d(72%, 0, 0); } }
  @keyframes cfg-late { 0%, 100% { box-shadow: 0 0 0 4px rgba(95, 212, 154, .16), 0 0 10px rgba(95, 212, 154, .4); } 50% { box-shadow: 0 0 0 6px rgba(95, 212, 154, .08), 0 0 18px rgba(95, 212, 154, .7); } }
  html[data-movimiento="reducido"] :is(.aj-item, .aj-tel-brillo, .vv-luz) { animation: none; }
  @media (prefers-reduced-motion: reduce) { html.vidrio :is(.aj-item, .aj-tel-brillo, .vv-luz) { animation: none; } }
}

/* ═══ 2b · Configuración en la computadora (arriba de 480 px) ═══
   Erick (27-09): "algo parecido a lo del teléfono, adaptado a la compu; no me gusta
   el diseño que tenemos ahorita". Escogió el tablero y la sección aparte, como en
   el teléfono, en vez de la ventana de Ajustes de la Mac (índice a la izquierda y
   sección a la derecha, en una caja de alto fijo). Encima de §2:
     · la página se desliza como las demás, con su título en Didot a la misma altura;
     · la empresa en su medallón al centro, con el contacto y "Editar datos" en un
       renglón, y el buscador centrado debajo;
     · las tarjetas de cuatro en cuatro (las grandes ocupan dos; Pantalla de inicio y
       Soporte, a lo ancho) y, si el tablero es angosto, de dos en dos como el teléfono;
     · con mouse, la tarjeta se levanta y se le enciende el canto al pasar por encima;
     · la sección sola, con "‹ Configuración" arriba para volver (y Escape). */
@media (min-width: 481px) {
  html.vidrio .ajustes,
  html.vidrio[data-theme] .ajustes {
    display: block;
    height: auto;
    min-height: 0;
  }
  html.vidrio[data-cfg-nivel="indice"] .aj-panel { display: none; }
  html.vidrio[data-cfg-nivel="panel"] .aj-indice { display: none; }
  html.vidrio .aj-indice,
  html.vidrio .aj-panel {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    border: 0;
  }
  /* Los márgenes de las demás pestañas: configuracion.css le daba menos a esta. */
  html.vidrio .content:has(.ajustes) { padding-top: 38px; padding-bottom: 42px; }

  /* ── El encabezado: el título y el lema del tamaño de los de las otras pestañas ── */
  html.vidrio .aj-indice-cabeza { margin: 0; }
  html.vidrio .aj-indice-cabeza > div { padding-right: 0; }
  html.vidrio .aj-indice-cabeza > div > b { font-size: 40px; line-height: 44px; }
  html.vidrio .aj-tel-lema { margin-top: 6px; font-size: 16px; line-height: 1.2; }

  /* ── La empresa: el medallón al centro y, debajo, el contacto y "Editar datos"
     en un solo renglón (las dos columnas de las orillas los centran juntos) ── */
  html.vidrio .aj-tel-casa {
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    margin: 30px 0 0;
    cursor: pointer;
  }
  html.vidrio .aj-tel-casa > :is(.ec-logo, .ec-datos) { grid-column: 1 / -1; }
  html.vidrio .ec-logo { width: 104px; height: 104px; transition: transform .5s var(--cfg-resorte), box-shadow .3s ease; }
  html.vidrio .ec-logo .logo-vacio b { font-size: 40px; }
  html.vidrio .ec-datos { margin-top: 16px; gap: 6px; }
  html.vidrio .ec-datos b { font-size: 32px; }
  html.vidrio .ec-datos small { font-size: 11.5px; }
  html.vidrio .ec-contacto { grid-column: 2; margin-top: 18px; }
  html.vidrio .ec-editar { grid-column: 3; margin: 18px 0 0 8px; transition: box-shadow .3s ease; }
  html.vidrio .aj-tel-casa:focus-visible { outline-offset: 10px; border-radius: 28px; }
  html.vidrio .aj-tel-casa:active { transform: scale(.985); transition: transform .14s ease-out; }

  /* ── El buscador, centrado y de un ancho que se lee como buscador, no como barra ── */
  html.vidrio .aj-buscar {
    width: min(100%, 520px);
    height: 44px;
    margin: 28px auto 40px;
  }
  html.vidrio .aj-buscar input { font-size: 15px; }

  /* ── El tablero ── */
  html.vidrio .aj-indice { container: cfg-tablero / inline-size; }
  html.vidrio .aj-lista,
  html.vidrio .aj-indice.apretado .aj-lista { gap: 36px; }
  html.vidrio .aj-indice-grupo { gap: 14px; }
  html.vidrio .aj-indice-rotulo { margin-bottom: 0; padding: 0 6px; font-size: 12px; letter-spacing: .16em; }

  html.vidrio .aj-indice .aj-item {
    min-height: 158px;
    padding: 18px;
    border-radius: 24px;
    cursor: pointer;
  }
  html.vidrio .aj-indice .aj-item .aj-tel-medalla { --md: 46px; }
  html.vidrio .aj-indice .aj-item .aj-tel-medalla svg { width: 21px; height: 21px; }
  html.vidrio .aj-indice .aj-item .aj-item-nombre { margin-top: 16px; font-size: 16px; }
  html.vidrio .aj-indice .aj-item .vv-texto b { font-size: 13px; }
  html.vidrio .aj-indice .aj-item .aj-punto { top: 18px; right: 18px; }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    column-gap: 16px;
  }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .aj-tel-medalla { --md: 46px; }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .aj-item-nombre { font-size: 16.5px; }
  html.vidrio .aj-indice .aj-item:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .aj-tel-vivo { margin-top: 14px; padding: 12px 14px; }
  /* Pantalla de inicio va a lo ancho: su saludo sobre el fondo, más alto y en Didot grande. */
  html.vidrio .aj-indice .aj-item[data-seccion="inicio"] .aj-tel-vivo { padding: 0; }
  html.vidrio .aj-indice .aj-item[data-seccion="inicio"] .vv-marco { min-height: 92px; padding: 14px 22px; }
  html.vidrio .aj-indice .aj-item[data-seccion="inicio"] .vv-marco em { font-size: 26px; }
  html.vidrio .aj-indice .aj-item[data-seccion="inicio"] .vv-marco small { font-size: 13px; }

  /* De cuatro en cuatro cuando cabe; las grandes, de dos. Cada grupo llena su fila:
     Apariencia + Planilla + Privacidad, Cuentas + Respaldos + Nube,
     Actualizaciones + Acerca de + Restablecer. */
  @container cfg-tablero (min-width: 760px) {
    html.vidrio .aj-indice-grupo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    html.vidrio .aj-indice .aj-item:is([data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="restablecer"]) { grid-column: span 2; }
  }

  /* Con mouse: se levanta, se le enciende el canto del color del fondo y la flecha avanza.
     Al hacer clic se hunde. */
  html.vidrio .aj-indice .aj-item:focus-visible { outline: 2px solid rgb(var(--ac)); outline-offset: 3px; }
  html.vidrio .aj-indice .aj-item:active {
    transform: translateY(-1px) scale(.985);
    transition: transform .12s ease-out, box-shadow .12s ease-out;
  }
  @media (hover: hover) and (pointer: fine) {
    html.vidrio .aj-indice .aj-item:hover:not(:active) {
      transform: translateY(-3px);
      box-shadow: var(--v-canto), inset 0 0 0 1px rgb(var(--ac) / .3), 0 18px 40px rgba(0, 0, 0, .34);
    }
    html.vidrio[data-theme="light"] .aj-indice .aj-item:hover:not(:active) { box-shadow: var(--v-canto), inset 0 0 0 1px rgb(var(--ac) / .34), 0 16px 34px rgba(60, 45, 20, .16); }
    html.vidrio .aj-indice .aj-item:hover .aj-tel-flecha { transform: translateX(3px); color: var(--ink); }
    html.vidrio .aj-indice .aj-item:hover .aj-tel-medalla { transform: scale(1.06); }
    html.vidrio .aj-tel-casa:hover .ec-logo { transform: scale(1.035); }
    html.vidrio .aj-tel-casa:hover .ec-editar { box-shadow: var(--v-canto), inset 0 0 0 1px rgb(var(--ac) / .34), 0 8px 20px rgba(0, 0, 0, .26); }
    html.vidrio .aj-tel-casa:hover .ec-editar svg { transform: translateX(3px); }
  }

  /* ════════ La sección abierta ════════ */
  html.vidrio .aj-volver {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 22px;
    padding: 7px 16px 7px 9px;
    border: 0;
    border-radius: 999px;
    background: var(--v-lamina);
    box-shadow: var(--v-canto), 0 6px 16px rgba(0, 0, 0, .22);
    -webkit-backdrop-filter: var(--v-desen);
    backdrop-filter: var(--v-desen);
    color: rgb(var(--ac2));
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .45s var(--cfg-resorte), box-shadow .3s ease;
  }
  html.vidrio[data-theme="light"] .aj-volver { color: rgb(var(--ac-letra, var(--ac))); box-shadow: var(--v-canto), 0 6px 14px rgba(60, 45, 20, .12); }
  html.vidrio .aj-volver svg { width: 17px; height: 17px; transition: transform .45s var(--cfg-resorte); }
  html.vidrio .aj-volver:focus-visible { outline: 2px solid rgb(var(--ac)); outline-offset: 3px; }
  html.vidrio .aj-volver:active { transform: scale(.96); transition-duration: .12s; }
  @media (hover: hover) and (pointer: fine) {
    html.vidrio .aj-volver:hover { box-shadow: var(--v-canto), inset 0 0 0 1px rgb(var(--ac) / .34), 0 8px 20px rgba(0, 0, 0, .26); }
    html.vidrio .aj-volver:hover svg { transform: translateX(-3px); }
  }

  /* El medallón y el título de la sección, del tamaño del título de las otras pestañas. */
  html.vidrio .aj-cabeza,
  html.vidrio[data-theme] .aj-cabeza {
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 18px;
    margin: 0 0 34px;
  }
  html.vidrio .aj-cabeza .aj-ficha.grande { width: 60px; height: 60px; }
  html.vidrio .aj-cabeza .aj-ficha.grande svg { width: 26px; height: 26px; }
  html.vidrio .aj-cabeza .aj-ficha.grande::after { inset: 7px; }
  html.vidrio .aj-cabeza h2 { font-size: 40px; line-height: 44px; }
  html.vidrio .aj-cabeza p { margin-top: 6px; font-size: 16px; }

  /* Adentro, lo de la compu: el botón de un grupo vuelve al lado de su rótulo, y el de
     un renglón a la derecha del texto (en el teléfono bajan, a lo ancho del dedo). */
  html.vidrio .aj-cuerpo { gap: 30px; }
  html.vidrio .aj-grupo { gap: 12px; }
  html.vidrio .aj-grupo-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 6px; }
  html.vidrio .aj-grupo-cabeza > h3 { padding: 0; }
  html.vidrio .aj-grupo-cabeza > .button { width: auto; min-height: 36px; }
  html.vidrio .aj-grupo-cabeza > .aj-botones .button { flex: 0 0 auto; min-height: 36px; }
  html.vidrio .aj-pie { padding: 0 6px; }
  html.vidrio .aj-fila > .aj-fila-control:has(.button),
  html.vidrio .aj-fila:has(> .aj-fila-ico) > .aj-fila-control:has(.button) { grid-row: auto; grid-column: auto; justify-self: end; }
  html.vidrio .aj-conteos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══ 2c · Lo que encontró el buscador (teléfono y computadora) ═══
   app.js (cfgFiltrar) lee lo escrito dentro de cada sección. Mientras se busca, la tarjeta
   que coincide cambia su adelanto por el ajuste que coincidió, con una lupa; al abrirla, esa
   pieza se ilumina un momento con el acento del fondo (cfgIluminar). */
.aj-hallazgo { display: none; }
html.vidrio .aj-indice .aj-item[data-hallazgo] .aj-hallazgo {
  display: flex;
  grid-column: 1;
  grid-row: 4;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  margin-top: 3px;
  color: rgb(var(--ac2));
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
html.vidrio[data-theme="light"] .aj-indice .aj-item[data-hallazgo] .aj-hallazgo { color: rgb(var(--ac-letra, var(--ac))); }
/* Si coinciden dos y no caben, bajan a un segundo renglón en vez de cortarse. */
html.vidrio .aj-hallazgo span { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
html.vidrio .aj-hallazgo svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: .15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
html.vidrio .aj-indice .aj-item[data-hallazgo] .vv-texto { display: none; }
/* En las grandes va en el pozo de abajo, donde estaba el adelanto. */
html.vidrio .aj-indice .aj-item[data-hallazgo]:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .aj-tel-vivo { display: none; }
html.vidrio .aj-indice .aj-item[data-hallazgo]:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .aj-hallazgo {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .14);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(255, 255, 255, .08);
  font-size: 13.5px;
}
html.vidrio[data-theme="light"] .aj-indice .aj-item[data-hallazgo]:is([data-seccion="empresa"], [data-seccion="inicio"], [data-seccion="apariencia"], [data-seccion="contrasena"], [data-seccion="soporte"], [data-seccion="restablecer"], :only-of-type) .aj-hallazgo { background: rgba(60, 48, 30, .05); box-shadow: inset 0 1px 2px rgba(60, 45, 20, .1), inset 0 0 0 .5px rgba(60, 48, 30, .1); }

/* Al llegar buscando: la pieza se tiñe del acento y se apaga despacio. No es movimiento,
   así que también se ve con el movimiento reducido. */
html.vidrio .aj-destello { animation: aj-destello 2.4s ease-out; }
@keyframes aj-destello {
  0%, 35% { background-color: rgb(var(--ac) / .16); box-shadow: inset 0 0 0 1.5px rgb(var(--ac) / .6), 0 0 22px rgb(var(--ac) / .22); }
  100% { background-color: rgb(var(--ac) / 0); box-shadow: inset 0 0 0 1.5px rgb(var(--ac) / 0), 0 0 22px rgb(var(--ac) / 0); }
}

/* ═══ 3 · La tinta de cada paisaje ═══
   Se pasó al bloque de cada paisaje en vidrio.css §18 (27-09), para que la paleta viva en
   un solo lugar. */

/* ═══ 4 · Letras que se leen sobre los paisajes ═══
   Sobre un video las partes claras (la espuma de las Olas, la nieve y las nubes
   del Valle nevado) se comían las letras que van directo encima: el título, los
   rótulos, el teléfono y el correo, las cifras. La revisión de legibilidad
   (cada fondo × cada pantalla, contraste medido contra los pixeles de atrás)
   marcó dónde. Tres remedios, sin oscurecer el paisaje entero:
     · un halo oscuro suave detrás de las letras sueltas (como la pantalla
       bloqueada del iPhone), más fuerte en los paisajes claros;
     · las hojas de vidrio un poco más tintadas donde el fondo es claro, sin
       quitarle a cada persona su transparencia (se suma a la que escogió);
     · las pastillas sueltas (teléfono, correo, "Editar datos") en vidrio oscuro. */
html.vidrio:is([data-fondo="camino"], [data-fondo="montanas"], [data-fondo="canon"], [data-fondo="estrellas"], [data-fondo="olas"], [data-fondo="nevado"]) {
  --v-sombra: 1.6;
}
/* Los paisajes claros: el vidrio con más cuerpo detrás de las letras (el deslizador de
   Transparencia sigue mandando: se corre todo parejo) y el velo del video apenas más hondo,
   para que el paisaje siga viéndose vivo. */
html.vidrio:is([data-fondo="camino"], [data-fondo="canon"], [data-fondo="olas"], [data-fondo="nevado"]) {
  --v-sombra: 2;
  --v-a: calc(.2 + var(--v-op) * .95);
}
html.vidrio[data-fondo="camino"] { --v-velo: 0.42; }
html.vidrio[data-fondo="canon"] { --v-velo: 0.38; }
html.vidrio[data-fondo="olas"] { --v-velo: 0.38; }
html.vidrio[data-fondo="nevado"] { --v-velo: 0.36; }
html.vidrio[data-fondo="montanas"] {
  --v-sombra: 2;
  --v-velo: 0.34;
  --v-a: calc(.14 + var(--v-op) * .9);
}
@media (max-width: 480px) {
  html.vidrio:is([data-fondo="camino"], [data-fondo="montanas"], [data-fondo="canon"], [data-fondo="estrellas"], [data-fondo="olas"], [data-fondo="nevado"]) .content {
    text-shadow: 0 1px 2px rgb(0 0 0 / calc(.4 * var(--v-sombra))), 0 0 14px rgb(0 0 0 / calc(.2 * var(--v-sombra)));
  }
}
/* Las pastillas de la empresa en Configuración (teléfono y, desde el 27-09, computadora). */
html.vidrio:is([data-fondo="camino"], [data-fondo="montanas"], [data-fondo="canon"], [data-fondo="estrellas"], [data-fondo="olas"], [data-fondo="nevado"]) :is(.ec-contacto span, .ec-editar) {
  background: rgb(var(--tinte) / calc(var(--v-a) + .15));  /* sale del control de Transparencia (§7) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 .5px rgba(255, 255, 255, .12);
}

/* ═══ 5 · Las letras secundarias ═══
   La revisión de legibilidad marcó las letras chicas secundarias (el puesto de cada persona,
   "Pagos hechos", las notas) apenas por debajo de lo que se lee cómodo, en casi todos los
   fondos. Suben un punto (en los claros dos: la segunda revisión, 27-09, todavía las encontró
   bajas sobre los pliegues de la seda). En los fondos claros el acento claro se usa también para letras
   (las fechas de Inicio, "Ver los avisos"): ahí va un tono más hondo. */
html.vidrio[data-theme="dark"] { --muted: rgb(var(--vt) / .74); }
html.vidrio[data-theme="light"] { --muted: rgb(var(--vt) / .8); }
html.vidrio[data-fondo="seda"] { --ac2: 60 100 80; }
html.vidrio[data-fondo="crema"] { --ac2: 128 92 40; }
/* 27-09, con las pestañas destapadas: el acento de los fondos claros también es letra en muchas piezas
   (montos, meses, "SALARIO BRUTO", "Añadir deducción") y quedaba en 3–3,9. El mismo tono, un paso más hondo. */
html.vidrio[data-fondo="seda"] { --ac: 62 104 84; }
html.vidrio[data-fondo="crema"] { --ac: 132 92 36; }
/* La pestaña abierta de la ficha iba en oro sobre su pastilla de oro: la letra en tinta, y el
   oro queda en el ícono y la raya de abajo, que ya dicen cuál está abierta. */
html.vidrio[data-theme] .employee-tabs button.active { color: var(--ink); }
/* La vista del comprobante en Configuración es papel blanco: la inicial del logo vacío va en
   la tinta del papel, no en el acento (en el Grafito salía blanca sobre blanco). */
html.vidrio .aj-papel .logo-vacio b { color: #16202e; }

/* ═══ 6 · Lo que marcó la segunda revisión de legibilidad (27-09) ═══
   Medida con los arreglos de §4–5 ya puestos, contando el halo y sin contar lo que tapa la tira
   (diseno/legibilidad/, informes base.json → final.json). Nada de esto oscurece los paisajes:
   son láminas que faltaban, halos más ceñidos a la letra y colores de letra más firmes. */
/* Los globos de avisos (la campana, Inicio): blanco sobre el rojo de la marca daba 4,3 y la
   letra es de 10–11 px. Un rojo apenas más hondo —sigue siendo rojo, no vino— y la cifra en
   blanco en todos los fondos (en los claros la cifra salía en tinta oscura sobre rojo). */
html.vidrio :is(.tel-campana b, .pv-globo, .pv-cuenta) { background: #d31f2f; color: #fff; }

/* "Sin registrar" en la ficha: iba al 42 %, por debajo de lo que se lee. Queda más callado que
   un dato de verdad (--muted va al 74 %), pero se lee. */
html.vidrio .dato-vacio { color: rgb(var(--vt) / .64); }

/* Restablecer: el paso 2, mientras está cerrado, se apagaba a .45 y sus letras ("Hace falta la
   contraseña…", las casillas de RESTABLECER) casi desaparecían, en el teléfono y en la
   computadora. Sigue viéndose cerrado. */
html.vidrio .aj-paso[data-cfg-paso2]:not(.on) { opacity: .66; }
html.vidrio .aj-letras i:not(.bien, .mal) { color: var(--muted); }

/* El rótulo de las vistas previas ("Vista en los comprobantes", "Vista previa") va suelto, sin hoja,
   y en los fondos oscuros no llevaba halo: sobre la parte clara del arco o del paisaje se perdía. */
html.vidrio[data-theme="dark"] .aj-vista-rotulo { 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); }

/* Los fondos claros. El acento (verde de la seda, bronce del papel) se usa también como color de
   LETRA en piezas chicas —los rótulos de cada grupo, las iniciales de las monedas, los símbolos
   de moneda, "Quincenal", la opción escogida— y sobre los pliegues grises de la seda quedaba en
   2–3,5. Esas letras toman un acento hondo del mismo tono; los rellenos y bordes no cambian. */
html.vidrio[data-fondo="seda"] { --ac-letra: 42 76 60; }
html.vidrio[data-fondo="crema"] { --ac-letra: 94 63 22; }
html.vidrio[data-theme="light"] :is(.aj-grupo h3, .aj-indice-rotulo, .aj-moneda-simbolo, .badge.info, .freq-tag, .espera-opcion.puesta),
html.vidrio[data-theme="light"] .avatar { color: rgb(var(--ac-letra, var(--ac))) !important; }
/* El botón de oro de la seda llevaba letra blanca sobre un verde medio (3,8): el mismo verde,
   un paso más hondo. */
html.vidrio[data-fondo="seda"] { --b1: #6f9985; --b2: #4d7a65; --b3: #3d6452; }

@media all {
  /* Configuración en el teléfono quitó la caja de afuera y le dio lámina a cada grupo (.aj-caja),
     pero siete piezas tienen caja propia y se quedaron sin hoja, flotando sobre el paisaje: las
     dos tarjetas de Respaldos, la Nube y sus instrucciones, Actualizaciones, Acerca de y las dos
     de Restablecer. Llevan la misma lámina que las demás; el matiz de color de cada una va encima.
     Desde el 27-09 la computadora tampoco tiene caja de afuera (§2b): vale en todos los tamaños. */
  html.vidrio :is(.aj-destino, .aj-nube, .aj-desplegable, .aj-version, .aj-acerca, .aj-peligro, .aj-reset),
  html.vidrio[data-theme] :is(.aj-destino, .aj-nube, .aj-desplegable, .aj-version, .aj-acerca, .aj-peligro, .aj-reset) {
    border: 0;
    border-radius: 22px;
    background: var(--v-lamina);
    box-shadow: var(--v-canto), var(--cfg-sombra);
    -webkit-backdrop-filter: var(--v-desen);
    backdrop-filter: var(--v-desen);
  }
  html.vidrio[data-theme] .aj-nube { background: radial-gradient(80% 140% at 0% 50%, color-mix(in srgb, var(--tono) 9%, transparent), transparent 65%), var(--v-lamina); }
  html.vidrio[data-theme] .aj-version { background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--tono) 10%, transparent), transparent 60%), var(--v-lamina); }
  html.vidrio[data-theme] .aj-acerca { background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 60%), var(--v-lamina); }
  html.vidrio[data-theme] .aj-peligro {
    background: linear-gradient(180deg, rgb(var(--cfg-rojo) / .16), rgb(var(--cfg-rojo) / 0) 62%), var(--v-lamina);
    box-shadow: var(--v-canto), inset 0 0 0 1px rgb(var(--cfg-rojo) / .3), var(--cfg-sombra);
  }

}

/* Los símbolos de moneda (Planilla): en oscuro el recuadro iba teñido de oro y la letra de oro
   encima; sobre un paisaje claro quedaba oro sobre oro (2,9). El recuadro pasa a vidrio oscuro con
   un canto de oro; el escogido conserva su oro. */
html.vidrio[data-theme="dark"] .aj-moneda-simbolo { background: rgb(var(--tinte) / calc(var(--v-a) * 1.2)); box-shadow: inset 0 0 0 1px rgb(var(--ac) / .3); }
html.vidrio[data-theme="dark"] .aj-moneda.on .aj-moneda-simbolo { background: rgb(var(--tinte) / calc(var(--v-a) * .9)); box-shadow: inset 0 0 0 1.5px rgb(var(--ac) / .7); }
/* Los contadores de letras de Pantalla de inicio (24/60) iban más tenues que cualquier nota. */
html.vidrio .aj-cuenta:not(.cerca) { color: var(--muted); }

@media (max-width: 480px) {
  html.vidrio[data-theme="light"] .aj-mini-pie { color: rgb(var(--vt) / .86); }
}

/* Las letras que van sueltas sobre el paisaje, sin hoja detrás: títulos y rótulos de grupo,
   subtítulos, notas al pie, "Todo guardado", el pie de Inicio, las pestañas de la ficha. El halo
   general (§4) es ancho y suave; sobre las partes claras del video (el asfalto del Camino, la
   nieve) no alcanzaba. Aquí va uno más ceñido a la letra, como en la pantalla bloqueada del
   iPhone: se nota en la letra, no en el paisaje. En el teléfono y en la computadora. */
html.vidrio:is([data-fondo="camino"], [data-fondo="montanas"], [data-fondo="canon"], [data-fondo="estrellas"], [data-fondo="olas"], [data-fondo="nevado"]) :is(.aj-grupo h3, .aj-indice-rotulo, .aj-pie, .aj-guardar-estado, .aj-vista-rotulo, .aj-cabeza p, .aj-tel-lema, .ec-datos b, .ec-datos small, .pv-quien b, .pv-quien small, .pv-fecha, .pv-lema, .pv-sec, .pv-pie-pagina p, .pv-pie-pagina small, .page-heading p, .employee-detail-heading p, .roster-count, .employee-tabs button span, .employee-status-toggle, .portada-o, .aj-mini-fecha, .aj-mini-pie, .aj-mini-lema) {
  text-shadow: var(--v-halo-letra);
}
html.vidrio:is([data-fondo="camino"], [data-fondo="montanas"], [data-fondo="canon"], [data-fondo="estrellas"], [data-fondo="olas"], [data-fondo="nevado"]) { --v-halo-letra: 0 0 2px rgb(0 0 0 / .5), 0 1px 3px rgb(0 0 0 / .55), 0 0 12px rgb(0 0 0 / .45); }
/* El Camino es el más claro de los seis (asfalto y cielo casi blancos): halo más denso. */
html.vidrio[data-fondo="camino"] { --v-halo-letra: 0 0 2px rgb(0 0 0 / .7), 0 0 6px rgb(0 0 0 / .6), 0 1px 3px rgb(0 0 0 / .6), 0 0 16px rgb(0 0 0 / .5); }
/* En los fondos claros lo mismo, al revés: un resplandor blanco detrás de la letra oscura. */
html.vidrio[data-theme="light"] :is(.aj-grupo h3, .aj-indice-rotulo, .aj-pie, .aj-guardar-estado, .aj-vista-rotulo, .aj-cabeza p, .aj-tel-lema, .ec-datos small, .pv-quien small, .pv-fecha, .pv-lema, .pv-sec, .pv-pie-pagina p, .pv-pie-pagina small, .page-heading p, .employee-detail-heading p, .roster-count, .employee-tabs button span, .employee-status-toggle, .portada-o, .aj-mini-fecha, .aj-mini-pie, .aj-mini-lema) {
  text-shadow: 0 0 2px rgb(255 255 255 / .75), 0 0 12px rgb(255 255 255 / .6);
}

/* El subtítulo del menú de la computadora ("Varalia") iba al 50 % sobre el paisaje. */
html.vidrio:is([data-fondo="camino"], [data-fondo="montanas"], [data-fondo="canon"], [data-fondo="estrellas"], [data-fondo="olas"], [data-fondo="nevado"]) .vidrio-marca-txt small { color: var(--muted); }

@media (max-width: 480px) {
  /* Algunas nacieron tenues a propósito (el pie de Inicio al 46 %, los rótulos de sección al 58 %):
     sobre el video suben, siguen siendo las más calladas de la pantalla. Medido en el teléfono. */
  html.vidrio:is([data-fondo="camino"], [data-fondo="montanas"], [data-fondo="canon"], [data-fondo="estrellas"], [data-fondo="olas"], [data-fondo="nevado"]) :is(.pv-sec, .pv-lema, .pv-pie-pagina p, .pv-pie-pagina small, .pv-quien small) { color: rgb(var(--vt) / .84); }

  html.vidrio[data-theme="light"] :is(.pv-sec, .pv-pie-pagina p, .pv-pie-pagina small) { color: rgb(var(--vt) / .86); }
}
/* Lo mismo en Configuración (la línea de la empresa y el lema), en el teléfono y la computadora. */
html.vidrio:is([data-fondo="camino"], [data-fondo="montanas"], [data-fondo="canon"], [data-fondo="estrellas"], [data-fondo="olas"], [data-fondo="nevado"]) :is(.ec-datos small, .aj-tel-lema) { color: rgb(var(--vt) / .84); }

/* ═══ 7 · Las pestañas con datos, por dentro (27-09) ═══
   Vacaciones, Pagos, Tiempo, Ausencias… arrancan tapadas ("¿A quién le vamos a ver…?") y la primera
   revisión solo midió esa portada. Destapadas, aparecieron piezas sin hoja de vidrio, flotando
   sobre el fondo en TODOS los fondos, en el teléfono y en la computadora. Todo lo que se agrega
   aquí sale del control de Transparencia (--v-a, --v-desen), como el resto del vidrio. */

/* Tarjetas que quedan directo sobre el fondo, fuera de toda lámina: las de "Días asignados", el
   cuadro "Además tiene días ganados de otros períodos" y las filas de cada semana en Pagos. Dentro
   de una lámina llevan solo un tinte leve (§2 de vidrio.css: dos vidrios se ensucian); aquí no
   hay lámina afuera, así que llevan la suya. Los bordes quedan como estaban: en Pagos dicen el
   estado (listo, cambiado, sin registrar). */
html.vidrio :is(.vac-lista > .vac-fila, .vac-columna > .vac-otros, .pagos-lista > .pago-fila) {
  background: var(--v-lamina);
  box-shadow: var(--v-canto), 0 10px 30px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: var(--v-desen);
  backdrop-filter: var(--v-desen);
}
html.vidrio .vac-lista > .vac-fila.gozada { background: linear-gradient(rgb(var(--ac) / .07), rgb(var(--ac) / .07)), var(--v-lamina); }
html.vidrio[data-theme="light"] :is(.vac-lista > .vac-fila, .vac-columna > .vac-otros, .pagos-lista > .pago-fila) { 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, .1); }

/* Controles sueltos sobre el fondo: el selector de año, el filtro de Ausencias, los botones claros
   de la barra de arriba ("Saldar en dinero", "Boleta") y los que quedan fuera de una hoja
   ("Volver a los originales" junto a "Todo guardado", "Configuración" en la ficha). Iban con un
   4–10 % de blanco. Llevan vidrio un poco más firme que la lámina, porque van solos sobre el
   paisaje; también sale del control de Transparencia. */
html.vidrio :is(.toolbar .anio-boton, .toolbar .segmented, .toolbar > .button:not(.primary), .detail-top-actions .button:not(.primary), :not(.aj-caja) > .aj-guardar .button:not(.primary)) {
  background: rgb(var(--tinte) / calc(var(--v-a) + .15));
  box-shadow: var(--v-canto);
  -webkit-backdrop-filter: var(--v-desen);
  backdrop-filter: var(--v-desen);
}
/* "Anotar horas" y los demás botones claros dentro de una fila de Pagos ya van sobre su lámina. */

/* ── 7b · Lo que apareció al destapar: rojos de letra, ejes de los gráficos, fichas de fechas,
   la fila "Viendo a" y los rótulos de los selectores ── */
/* Los rojos de letra (una cifra en contra, lo que falta por subir, una baja en Reportes): el rojo de
   la marca y el salmón están hechos para papel blanco; sobre el vidrio oscuro no se leían (2,1). En
   oscuro un rojo claro que sigue siendo rojo; en los fondos claros, uno hondo. */
html.vidrio[data-theme="dark"] :is(.bad, .exp-separador-faltan, .rep-contra.baja, .pagar-repaso .cp-dato.rebaja > b) { color: #ffa39c !important; }
html.vidrio[data-theme="light"] :is(.bad, .exp-separador-faltan, .rep-contra.baja, .pagar-repaso .cp-dato.rebaja > b) { color: #c0392b !important; }
/* Las deducciones del repaso antes de pagar llevan el MISMO rojo que la cifra en contra (hay una prueba). */
html.vidrio[data-theme="dark"] .pagar-repaso .cp-dato.rebaja .pagar-detalle { color: color-mix(in srgb, #ffa39c 72%, var(--muted)); }
html.vidrio[data-theme="light"] .pagar-repaso .cp-dato.rebaja .pagar-detalle { color: color-mix(in srgb, #c0392b 72%, var(--muted)); }
/* Las cifras de los ejes de los gráficos (Aguinaldos, Reportes) iban al 41 %. */
html.vidrio :is(.agui-grafica-lineas, .rep-grafica-lineas) em { color: var(--muted); }
/* Las fechas en fichas de "Días asignados": acento sobre una ficha teñida del mismo acento. En
   oscuro la ficha pasa a vidrio (sale del control de Transparencia) con su canto de acento y la
   fecha en el acento claro; en los fondos claros la fecha va en el acento hondo. */
html.vidrio[data-theme="dark"] .vac-chip.ido { color: rgb(var(--ac2)); background: rgb(var(--tinte) / calc(var(--v-a) * .8)); }
html.vidrio[data-theme="light"] .vac-chip.ido { color: rgb(var(--ac-letra, var(--ac))); }
/* Los nombres de la fila "Viendo a" y los rótulos "Mes" / "Año" van sueltos sobre el paisaje. */
html.vidrio:is([data-fondo="camino"], [data-fondo="montanas"], [data-fondo="canon"], [data-fondo="estrellas"], [data-fondo="olas"], [data-fondo="nevado"]) :is(.quien-ficha b, .liquidation-picker) { text-shadow: var(--v-halo-letra); }
html.vidrio:is([data-fondo="camino"], [data-fondo="montanas"], [data-fondo="canon"], [data-fondo="estrellas"], [data-fondo="olas"], [data-fondo="nevado"]) .quien-ficha b { color: rgb(var(--vt) / .9); }
html.vidrio[data-theme="light"] :is(.quien-ficha b, .liquidation-picker) { text-shadow: 0 0 2px rgb(255 255 255 / .75), 0 0 12px rgb(255 255 255 / .6); }

/* ── 7c · El Arco dorado y la Ola azul en la computadora ──
   En pantalla ancha el arco y la cresta de la ola quedan justo detrás de las hojas, y en el punto
   normal del control (34 %) las letras chicas se leían menos ahí (18 graves en cada fondo). Erick
   escogió (27-09) darles un poco más de cuerpo, solo en la computadora: el punto normal pasa a 40 %.
   El control de Transparencia sigue mandando: se corre el punto de partida, no el recorrido. */
@media (min-width: 481px) {
  html.vidrio:is([data-fondo="oro"], [data-fondo="azul"]) { --v-a: calc(.12 + var(--v-op) * .8); }
}

/* ═══ 8 · Configuración en la computadora: las letras sueltas (27-09) ═══
   En la compu Configuración ya no va dentro de una caja (§2b), y en la pantalla ancha las letras
   que van sueltas —los rótulos de grupo, las notas, "Todo guardado"— caen sobre lo más claro del
   fondo: el arco del Arco dorado, la espuma de Olas, el asfalto del Camino. La revisión de
   legibilidad a 1440 (diseno/legibilidad, prueba-halo-compu.css) lo marcó: oro sobre oro en 1,8.
   Dos remedios, solo arriba de 480 px (el teléfono ya estaba medido y no cambia):
     · el halo ceñido del Camino (§6) en todos los fondos oscuros;
     · en los paisajes, los rótulos en el tono claro del acento: el hondo se parecía al fondo.
   Va al final para ganarle al halo de §6 con la misma forma de selector. */
@media (min-width: 481px) {
  html.vidrio[data-theme="dark"] :is(.aj-grupo h3, .aj-indice-rotulo, .aj-pie, .aj-guardar-estado, .aj-vista-rotulo, .aj-cabeza p, .aj-tel-lema, .ec-datos b, .ec-datos small, .ec-logo .logo-vacio b) {
    text-shadow: 0 0 2px rgb(0 0 0 / .7), 0 0 6px rgb(0 0 0 / .6), 0 1px 3px rgb(0 0 0 / .6), 0 0 16px rgb(0 0 0 / .5);
  }
  html.vidrio:is([data-fondo="camino"], [data-fondo="montanas"], [data-fondo="canon"], [data-fondo="estrellas"], [data-fondo="olas"], [data-fondo="nevado"]) :is(.aj-grupo h3, .aj-indice-rotulo) { color: rgb(var(--ac2)); }
}