/* ============================================================================================================
   Vidrio Nuezbit — el tema compartido de la suite (30-oct-2026). Sacado de Central de Nuezbit (app/estilos.css):
   fondo pastel con manchas de luz difuminadas, paneles blancos translúcidos y muy redondeados, menú lateral en
   escritorio y barra abajo en el teléfono, la sección activa como píldora del color de la app, cifras con ícono
   en degradado, hojas casi opacas y animaciones de entrada.

   La fuente de verdad está en ~/nuezbit-app/nuezbit-kit/vidrio-nuezbit.css; cada app lleva una copia idéntica.
   Lo ÚNICO que cambia por app es el bloque «LA APP» de aquí abajo (color, manchas y nombre). Lo propio de cada
   app (sus pantallas) va en su styles.css, cargado después de este archivo.
   Teléfono primero (440×956). Sin emoji. Nada tocable mide menos de 44 px.
   ============================================================================================================ */
@font-face{font-family:"Gabarito";src:url("/fuentes/Gabarito-var.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Archivo";src:url("/fuentes/Archivo-var.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* ---- LA APP: Mesa, tomate (restaurantes) ---- */
:root{
  --marca:#C8442F;             /* el color de la app: botón primario, píldora activa, acentos */
  --marca-osc:#7A2414;         /* para degradados y el texto de marca sobre claro */
  --marca-texto:#A3361F;       /* el color de marca legible como texto (≥4,5:1 sobre hueso) */
  --acento:#F09A84;            /* versión clara: foco de los campos, borde al pasar */
  --barra:#C8442F;             /* barras de gráficos y de avance */
  --marca-suave:#FBE9E4;       /* fondo suave del color de marca (chips, selección) */
  /* manchas de luz del fondo: tomate y durazno de la app + ámbar y albahaca */
  --v-m1:#F9D2C6;--v-m2:#FFE4BC;--v-m3:#F6DAD2;--v-m4:#DCEBD5;--v-m5:rgba(200,68,47,.14);
  --v-fondo:#F7F0EC;
  /* modo oscuro de la app */
  --o-marca:#F09A84;--o-marca-texto:#F5B3A2;--o-acento:#F09A84;--o-marca-suave:#3A2420;
  --o-m1:rgba(200,68,47,.30);--o-m2:rgba(200,140,40,.18);--o-m3:rgba(240,154,132,.14);--o-m4:rgba(70,140,90,.12);--o-m5:rgba(200,68,47,.10);
  --o-fondo:#170F0D;
}

/* ---- tokens comunes de la suite ---- */
:root{
  --hueso:#F7F6F3;--tinta:#16201F;--gris:#5B6866;--gris-suave:#8A9694;--gris-claro:#EEF0EE;--borde:#DCE1DF;--blanco:#fff;
  --ok:#1F7A4D;--ok-claro:#E3F3EA;--alerta:#9A5B00;--alerta-claro:#FFF3D6;--mal:#B3261E;--mal-claro:#FBE6E4;--info:#1C5152;--info-claro:#E2F4F1;
  --radio:14px;--sombra:0 6px 22px rgba(22,32,31,.07);
  --e:170ms cubic-bezier(.2,.7,.35,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
/* Que se sienta como una app: sin zoom al pellizcar ni con doble toque, sin rebote. Los campos van a 16px (iOS no hace zoom al escribir). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
html,body{overscroll-behavior:none;overflow-x:clip}
body{-webkit-tap-highlight-color:transparent;font-family:"Archivo",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--hueso);color:var(--tinta);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,.titulo{font-family:"Gabarito",system-ui,sans-serif;letter-spacing:-.01em;line-height:1.2}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;-webkit-touch-callout:none}
a{color:var(--marca-texto)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:4px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.chica{width:16px;height:16px}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ---- marco: lateral en escritorio, barra abajo en el teléfono ---- */
.marco{display:flex;min-height:100vh;min-height:100dvh}
.lateral{width:232px;flex:none;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;padding:18px 12px}
.marca-app{display:flex;align-items:center;gap:10px;padding:2px 8px 18px;text-align:left;color:inherit;width:100%}
.marca-app img,.marca-app .marca-logo{width:36px;height:36px;border-radius:10px;flex:none}
.marca-app .marca-logo{background:var(--marca);color:#fff;display:grid;place-items:center;font-family:"Gabarito";font-weight:800;font-size:14px}
.marca-app b{font-family:"Gabarito";font-size:18px;display:block;line-height:1.1}
.marca-app small{font-size:12px;color:var(--gris);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
#navLateral{display:grid;gap:2px}
#navLateral a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;color:var(--gris);text-decoration:none;font-weight:600;min-height:44px}
#navLateral a:hover{background:rgba(255,255,255,.7);color:var(--tinta)}
#navLateral a.activa{background:var(--marca);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--marca) 28%,transparent)}
.nav-grupo{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);opacity:.8;padding:14px 12px 4px;font-weight:700}
.lateral-pie{margin-top:auto;font-size:12.5px;color:var(--gris);padding:8px;overflow-wrap:anywhere}
.contenido{flex:1;min-width:0}
.cab-movil{display:none}
main{max-width:1180px;margin:0 auto;padding:22px 24px 60px;outline:none;width:100%}
main.angosta{max-width:760px}
main:focus-visible{outline:none}   /* el foco programático al cambiar de pantalla no dibuja contorno */
.barra-movil{display:none}
.globo{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#C2410C;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-variant-numeric:tabular-nums}
#navLateral a .globo{margin-left:auto}
.barra-movil a{position:relative}
.barra-movil a .globo{position:absolute;top:2px;left:calc(50% + 4px);height:17px;min-width:17px;font-size:10.5px;box-shadow:0 0 0 2px #fff}

@media(max-width:820px){
  .lateral{display:none}
  .cab-movil{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;min-height:56px}
  .cab-movil img,.cab-movil .marca-logo{width:28px;height:28px;border-radius:8px;flex:none}
  .cab-movil .marca-logo{background:var(--marca);color:#fff;display:grid;place-items:center;font-family:"Gabarito";font-weight:800;font-size:11px}
  .cab-movil b{font-family:"Gabarito";font-size:17px}
  .cab-movil span{margin-left:auto;font-size:12px;color:var(--gris);max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  main{padding:16px 16px calc(96px + env(safe-area-inset-bottom))}
  .barra-movil{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:25;border-top:1px solid var(--borde);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .barra-movil a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--gris);text-decoration:none;padding:6px 0;min-height:48px;justify-content:center;border-radius:14px}
  .barra-movil a.activa{color:var(--marca-texto)}
  .barra-movil a.activa .ic{stroke-width:2.3}
}
/* Enfocado (lección, examen, repaso): se esconden lateral, cabecera y barra; queda sólo la pantalla. */
body.enfocado .lateral,body.enfocado .cab-movil,body.enfocado .barra-movil{display:none}
body.enfocado main{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(110px + env(safe-area-inset-bottom));max-width:760px}

/* ---- piezas comunes ---- */
.cargando,.vacio{background:var(--blanco);border:1.5px dashed var(--borde);border-radius:var(--radio);padding:26px;text-align:center;color:var(--gris)}
.cargando{border-style:solid}
.vacio b{display:block;color:var(--tinta);font-size:15.5px;margin-bottom:4px}
.vacio .btn{margin-top:14px}
.fila-titulo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fila-titulo h1{font-size:26px;margin-right:auto;line-height:1.15}
.fila-titulo .sub{flex-basis:100%;color:var(--gris);font-size:13.5px;margin-top:-6px}
.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:16px;box-shadow:var(--sombra)}
.tarjeta+.tarjeta,.seccion+.seccion{margin-top:14px}
.tarjeta h2,.seccion h2{font-size:17px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.tarjeta h2 .der,.seccion h2 .der{margin-left:auto;font-family:"Archivo";font-size:13.5px;font-weight:600}
.seccion{margin-top:16px}
.seccion h2 small{font-family:"Archivo";font-weight:600;color:var(--gris)}
.nota{color:var(--gris);font-size:13.5px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--gris-claro);color:var(--gris);white-space:nowrap;line-height:1.35}
.chip.ok{background:var(--ok-claro);color:var(--ok)}
.chip.alerta{background:var(--alerta-claro);color:var(--alerta)}
.chip.mal{background:var(--mal-claro);color:var(--mal)}
.chip.info{background:var(--info-claro);color:var(--info)}
.chip.marca{background:var(--marca-suave);color:var(--marca-texto)}
.punto{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 16px;border-radius:12px;font-weight:700;font-size:14.5px;background:var(--gris-claro);color:var(--tinta);border:1px solid var(--borde);text-decoration:none;white-space:nowrap;transition:transform var(--e),background var(--e)}
.btn:active{transform:translateY(1px)}
.btn.prim{background:var(--marca);color:#fff;border-color:var(--marca)}
.btn.peligro{color:var(--mal);background:var(--blanco);border-color:#E9C2BE}
.btn.fantasma{background:transparent;border-color:transparent;color:var(--gris)}
.btn.chico{min-height:36px;padding:6px 11px;font-size:13.5px}
.btn.ancho{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.icono-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;color:var(--gris)}
.icono-btn:hover{background:var(--gris-claro)}
.acciones{display:flex;gap:8px;flex-wrap:wrap}
.acciones .btn{flex:1}
.volver{display:inline-flex;align-items:center;gap:4px;color:var(--gris);text-decoration:none;font-weight:600;font-size:14px;margin-bottom:8px;min-height:36px}
/* Botón fijo al pie (lección, examen, repaso) */
.pie-fijo{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(12px + env(safe-area-inset-bottom));display:flex;gap:8px;justify-content:center}
.pie-fijo .btn{flex:1;max-width:728px}
@media(min-width:821px){.pie-fijo{left:232px}body.enfocado .pie-fijo{left:0}}

/* chips de filtros: una sola fila que se desliza en el teléfono */
.filtros{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px;padding:0 16px}
.filtros::-webkit-scrollbar{display:none}
.filtro{flex:none;min-height:38px;padding:7px 13px;border-radius:20px;border:1px solid var(--borde);background:var(--blanco);font-weight:600;font-size:13.5px;color:var(--gris);display:inline-flex;align-items:center;gap:6px}
.filtro.activo{background:var(--marca);border-color:var(--marca);color:#fff}
@media(min-width:821px){.filtros{margin:0 0 14px;padding:0;flex-wrap:wrap}}
.pestanas-sec{display:flex;gap:4px;background:var(--gris-claro);border-radius:12px;padding:4px;margin-bottom:14px;width:fit-content;max-width:100%}
.pestanas-sec a,.pestanas-sec button{padding:8px 16px;border-radius:9px;font-weight:700;font-size:14px;color:var(--gris);text-decoration:none;min-height:38px;display:flex;align-items:center}
.pestanas-sec .activa{background:var(--blanco);color:var(--tinta);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* ---- campos ---- */
label.campo{display:block}
label .et,.etiqueta,.campo>span:first-child{display:block;font-size:12.5px;font-weight:700;color:var(--gris);margin:0 0 5px}
input,select,textarea{width:100%;background:var(--blanco);border:1.5px solid var(--borde);border-radius:11px;padding:10px 12px;font-size:16px;min-height:44px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:1px;border-color:var(--acento)}
textarea{min-height:84px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6866' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--marca)}
input[type=radio]{width:auto;min-height:0}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campos .ancho,.campo.ancho{grid-column:1/-1}
.campo+.campo,.campos+.campo,.campo+.campos{margin-top:12px}
.casilla{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--tinta);font-size:14.5px;min-height:44px}
.ayuda{font-size:12.5px;color:var(--gris);margin-top:4px}
.campo small{display:block;font-size:12.5px;color:var(--gris);margin-top:4px}
.buscador{position:relative;margin-bottom:12px}
.buscador .ic{position:absolute;left:12px;top:12px;color:var(--gris-suave)}
.buscador input{padding-left:40px}
@media(max-width:560px){.campos{grid-template-columns:1fr}}
input.invalido,select.invalido,textarea.invalido{border-color:var(--mal)}
.error-campo{color:var(--mal);font-size:13px;font-weight:600;margin:-4px 0 4px;grid-column:1/-1}
.error-caja{background:var(--mal-claro);color:var(--mal);border-radius:11px;padding:10px 12px;font-size:14px;font-weight:600;margin-bottom:12px}
/* interruptor (como iOS) dentro de una fila */
.interruptor{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--gris-claro);cursor:pointer}
.interruptor:last-child{border-bottom:0}
.interruptor b{display:block;font-weight:700;font-size:15px}
.interruptor small{display:block;font-size:13px;color:var(--gris);margin-top:2px;font-weight:500}
.interruptor input[type=checkbox]{appearance:none;width:50px;height:30px;border-radius:99px;background:var(--gris-suave);position:relative;flex:none;cursor:pointer;margin:0;transition:background var(--e);border:0;accent-color:auto}
.interruptor input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:99px;background:#fff;transition:transform var(--e);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.interruptor input[type=checkbox]:checked{background:var(--ok)}
.interruptor input[type=checkbox]:checked::after{transform:translateX(20px)}
.interruptor input:disabled{opacity:.5}
/* opciones que se eligen como píldoras (radios/casillas grandes) */
.resultados{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.resultados.tres{grid-template-columns:repeat(3,1fr)}
.resultados.cuatro{grid-template-columns:repeat(4,1fr)}
.resultado{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 12px;border:1.5px solid var(--borde);border-radius:12px;background:var(--blanco);font-weight:700;font-size:14.5px;cursor:pointer;text-align:center}
.resultado input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.resultado:has(input:checked){border-color:var(--marca);background:var(--marca-suave);box-shadow:inset 0 0 0 1px var(--marca)}
.resultado:has(input:focus-visible){outline:2px solid var(--acento);outline-offset:1px}
fieldset{border:0;padding:0;margin:0}
fieldset legend{display:block;font-size:12.5px;font-weight:700;color:var(--gris);margin:0 0 6px;padding:0}
fieldset+fieldset,fieldset+.campo,.campo+fieldset{margin-top:14px}

/* ---- cifras ---- */
.cifras{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.cifra{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:12px 14px;box-shadow:var(--sombra);color:inherit;text-decoration:none;text-align:left}
.cifra .et{font-size:12.5px;color:var(--gris);font-weight:600;display:flex;align-items:center;gap:8px}
.cifra .val{font-family:"Gabarito";font-size:22px;font-weight:700;margin:2px 0 3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.2;display:flex;align-items:center;gap:6px}
.cifra .cmp{font-size:12px;color:var(--gris);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cifra .cmp b{display:inline-flex;align-items:center;gap:1px}
.cifra .cmp b.bien{color:var(--ok)}.cifra .cmp b.mal{color:var(--mal)}
.cifra.destacada{background:var(--marca);border-color:var(--marca);color:#fff}
.cifra.destacada .et,.cifra.destacada .cmp{color:rgba(255,255,255,.78)}
.cifra.destacada .cmp b.bien{color:#8EE6C4}.cifra.destacada .cmp b.mal{color:#FFD27A}
.cifra-ico{width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:none;color:#fff;background:var(--g)}
.cifra-ico .ic{width:17px;height:17px}
.cifra-ico.marca{--g:linear-gradient(135deg,var(--acento),var(--marca-osc))}
.cifra-ico.azul{--g:linear-gradient(135deg,#7DB8E0,#2C5F7C)}
.cifra-ico.naranja{--g:linear-gradient(135deg,#F7A76C,#C2410C)}
.cifra-ico.lila{--g:linear-gradient(135deg,#B7A6E8,#5A4A7E)}
.cifra-ico.verde{--g:linear-gradient(135deg,#6FD3A6,#1F7A4D)}
.cifra-ico.gris{--g:linear-gradient(135deg,#B9C2C0,#5B6866)}
.cifra.destacada .cifra-ico{background:rgba(255,255,255,.22)}
a.cifra.enlace,button.cifra{display:block;width:100%;cursor:pointer}
@media(max-width:560px){.cifras{grid-template-columns:1fr 1fr}.cifra .val{font-size:19px}}
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px}
.dos-col.pareja{grid-template-columns:1fr 1fr}
@media(max-width:980px){.dos-col,.dos-col.pareja{grid-template-columns:1fr}}

/* ---- barras y medidor ---- */
.barras-h{display:grid;gap:12px}
.barra-h .cab{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:4px}
.barra-h .cab b{margin-left:auto;font-variant-numeric:tabular-nums}
.barra-h .pista{height:10px;background:var(--gris-claro);border-radius:10px}
.barra-h .lleno{height:10px;background:var(--barra);border-radius:10px;min-width:2px}
.avance{display:block;height:8px;background:var(--gris-claro);border-radius:8px;overflow:hidden}
.avance>span{display:block;height:8px;background:var(--barra);border-radius:8px;min-width:4px;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.medidor{display:flex;flex-direction:column;align-items:center;gap:2px}
.medidor svg{width:100%;max-width:240px;height:auto;display:block}
.medidor .pista-m{fill:none;stroke:rgba(74,40,62,.08);stroke-width:16;stroke-linecap:round}
.medidor .arco{fill:none;stroke:url(#medidorGrad);stroke-width:16;stroke-linecap:round}
.medidor b{font-family:"Gabarito";font-size:30px;margin-top:-46px;font-variant-numeric:tabular-nums}
.medidor small{color:var(--gris);font-size:12.5px;text-align:center}

/* ---- listas: filas, nunca tablas anchas ---- */
.lista{display:grid;gap:8px;list-style:none}
.fila{display:flex;align-items:center;gap:12px;background:var(--blanco);border:1px solid var(--borde);border-radius:12px;padding:11px 13px;color:inherit;text-decoration:none;width:100%;text-align:left;min-height:52px}
a.fila:hover,button.fila:hover{border-color:var(--acento)}
button.fila{font:inherit;cursor:pointer}
.fila .datos{flex:1;min-width:0}
.fila .datos b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .datos b.libre{white-space:normal}
.fila .datos small{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--gris);font-size:12.5px;margin-top:2px}
.fila .monto{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.fila.quieta{cursor:default}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;flex:none;font-family:"Gabarito";background:var(--marca)}
.avatar.cuadrado{border-radius:11px}
.dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:14px}
.dl dt{color:var(--gris);font-weight:600}
.dl dd{overflow-wrap:anywhere}
.pasos{margin:4px 0 2px;padding-left:22px;display:grid;gap:6px;font-size:14px;line-height:1.4}
.pasos li::marker{color:var(--marca);font-weight:700}
.aviso-caja{background:var(--info-claro);color:var(--info);border-radius:11px;padding:10px 12px;font-size:14px;margin-bottom:12px}
.aviso-caja.mal{background:var(--alerta-claro);color:var(--alerta)}

/* ---- hoja (formulario o detalle): abajo en el teléfono, al centro en escritorio ---- */
.hoja-fondo{position:fixed;inset:0;background:rgba(22,32,31,.45);z-index:40}
.hoja{position:fixed;z-index:50;background:var(--hueso);display:flex;flex-direction:column;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100vw - 32px));max-height:min(88vh,860px);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.hoja-cab{display:flex;align-items:center;gap:8px;padding:12px 10px 8px 18px;border-bottom:1px solid var(--borde);flex:none}
.hoja-cab h2{font-size:19px;flex:1}
.hoja-cuerpo{padding:16px 18px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:1}
.hoja-pie{display:flex;gap:10px;margin-top:16px;position:sticky;bottom:-18px;background:var(--hueso);padding:10px 0 4px;flex-wrap:wrap}
.hoja-pie .btn{flex:1 1 auto}
.hoja-error{width:100%;font-size:13px;color:var(--mal);background:var(--mal-claro);padding:8px 12px;border-radius:10px;margin-bottom:8px}
@media(max-width:820px){
  .hoja{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:92vh;max-height:92dvh;border-radius:18px 18px 0 0}
}
.aviso{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom));z-index:70;background:var(--tinta);color:#fff;padding:11px 16px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);max-width:calc(100vw - 32px);text-align:center}
.aviso.mal{background:var(--mal)}
@media(max-width:820px){.aviso{bottom:calc(84px + env(safe-area-inset-bottom))}}
.version-nueva{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:40;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:0;border-radius:14px;background:var(--marca);color:#fff;text-align:left;font:inherit;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer;max-width:520px;margin:0 auto}
.version-nueva span{font-size:13px;opacity:.85}
@media (min-width:821px){.version-nueva{bottom:20px}}
.codigo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--gris-claro);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}

/* ============================================================================================================
   VIDRIO CLARO (body.vidrio): fondo pastel con manchas de luz, tarjetas translúcidas y muy redondeadas,
   menú en píldoras. El difuminado va sólo en piezas grandes (en el teléfono muchos blur pesan).
   ============================================================================================================ */
body.vidrio{
  --blanco:rgba(255,255,255,.62);--gris-claro:rgba(74,40,62,.07);--borde:rgba(74,40,62,.12);
  --v-panel:rgba(255,255,255,.56);--v-linea:rgba(255,255,255,.82);--v-sombra:0 10px 32px rgba(74,40,62,.09);
  --radio:20px;
  background:var(--v-fondo)
}
body.vidrio::before{content:"";position:fixed;inset:-12%;z-index:-1;pointer-events:none;filter:blur(60px);
  background:
    radial-gradient(34% 30% at 8% 6%,var(--v-m1),transparent 70%),
    radial-gradient(30% 28% at 92% 10%,var(--v-m2),transparent 70%),
    radial-gradient(36% 32% at 86% 88%,var(--v-m3),transparent 70%),
    radial-gradient(34% 30% at 10% 90%,var(--v-m4),transparent 70%),
    radial-gradient(26% 22% at 52% 46%,var(--v-m5),transparent 70%)}
body.vidrio .tarjeta,body.vidrio .cifra,body.vidrio .cargando,body.vidrio .vacio{
  background:var(--v-panel);border:1px solid var(--v-linea);box-shadow:var(--v-sombra);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
body.vidrio .tarjeta{border-radius:24px}
body.vidrio .cifra{border-radius:20px;padding:14px}
body.vidrio .cifra .val{font-size:26px}
body.vidrio .vacio{border-style:dashed;border-color:rgba(74,40,62,.18)}
body.vidrio .cifra.destacada{background:linear-gradient(145deg,var(--acento),var(--marca-osc));border-color:rgba(255,255,255,.35);box-shadow:0 14px 34px color-mix(in srgb,var(--marca) 32%,transparent)}
body.vidrio .cifra .cmp b{padding:2px 8px;border-radius:20px}
body.vidrio .cifra .cmp b.bien{background:var(--ok-claro)}
body.vidrio .cifra .cmp b.mal{background:var(--mal-claro)}
body.vidrio .cifra.destacada .cmp b{background:rgba(255,255,255,.18)}
body.vidrio .fila{background:rgba(255,255,255,.66);border-color:var(--v-linea);border-radius:16px}
body.vidrio .tarjeta .fila{background:rgba(255,255,255,.55)}
body.vidrio a.fila:hover,body.vidrio button.fila:hover{border-color:var(--acento);background:rgba(255,255,255,.85)}
body.vidrio .filtro{background:rgba(255,255,255,.6);border-color:var(--v-linea)}
body.vidrio .filtro.activo{background:var(--marca);border-color:var(--marca);box-shadow:0 6px 16px color-mix(in srgb,var(--marca) 25%,transparent)}
body.vidrio .pestanas-sec{background:rgba(255,255,255,.45);border:1px solid var(--v-linea)}
body.vidrio .pestanas-sec .activa{background:#fff}
body.vidrio .btn:not(.prim):not(.peligro):not(.fantasma){background:rgba(255,255,255,.7);border-color:var(--v-linea)}
body.vidrio .btn.prim{background:linear-gradient(135deg,color-mix(in srgb,var(--marca) 85%,#fff),var(--marca-osc));box-shadow:0 6px 18px color-mix(in srgb,var(--marca) 28%,transparent)}
body.vidrio .icono-btn:hover{background:rgba(255,255,255,.7)}
body.vidrio .resultado{background:rgba(255,255,255,.7);border-color:var(--v-linea)}
body.vidrio .resultado:has(input:checked){border-color:var(--marca);background:var(--marca-suave)}
body.vidrio .chip{background:rgba(74,40,62,.07)}
body.vidrio .chip.ok{background:var(--ok-claro)}
body.vidrio .chip.alerta{background:var(--alerta-claro)}
body.vidrio .chip.mal{background:var(--mal-claro)}
body.vidrio .chip.info{background:var(--info-claro)}
body.vidrio .chip.marca{background:var(--marca-suave)}
body.vidrio .barra-h .pista,body.vidrio .avance{background:rgba(74,40,62,.07)}
body.vidrio input,body.vidrio select,body.vidrio textarea{background:rgba(255,255,255,.8);border-color:rgba(74,40,62,.16)}
body.vidrio .interruptor input[type=checkbox]{background:rgba(74,40,62,.25)}
body.vidrio .interruptor input[type=checkbox]:checked{background:var(--ok)}
body.vidrio .pie-fijo{background:linear-gradient(to top,var(--v-fondo) 55%,transparent)}
/* Marco: lateral, cabecera y barra del teléfono en vidrio claro, con la sección activa como píldora */
body.vidrio .lateral{background:rgba(255,255,255,.42);color:var(--tinta);border-right:1px solid var(--v-linea);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
body.vidrio .cab-movil{background:rgba(255,255,255,.55);color:var(--tinta);border-bottom:1px solid var(--v-linea);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
body.vidrio .barra-movil{background:rgba(255,255,255,.62);border-top-color:var(--v-linea);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
body.vidrio .barra-movil a.activa{background:var(--marca-suave)}
body.vidrio .hoja{background:rgba(250,247,250,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
body.vidrio .hoja input,body.vidrio .hoja select,body.vidrio .hoja textarea{background:#fff}
body.vidrio .hoja-pie{background:rgba(250,247,250,.94)}   /* el pie pegado abajo tapa lo que pasa por debajo al bajar */
body.vidrio .cargando{border-style:solid}

/* ---- Animaciones de entrada: sólo al abrir una sección (main.entrando, la pone la navegación y se quita sola),
   nunca al refrescar después de guardar. Nada si el sistema pide menos movimiento. ---- */
@media (prefers-reduced-motion:no-preference){
  @keyframes v-subir{from{opacity:0;transform:translateY(12px)}}
  @keyframes v-llenar{from{transform:scaleX(0)}}
  @keyframes v-medir{from{stroke-dashoffset:var(--p,1)}}
  @keyframes v-aparecer{from{opacity:0}}
  main.entrando .cifra,main.entrando .tarjeta,main.entrando .lista>.fila,main.entrando .lista>li{animation:v-subir .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
  main.entrando .barra-h .lleno,main.entrando .avance>span{transform-origin:left;animation:v-llenar .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0ms) + 150ms)}
  main.entrando .medidor .arco{animation:v-medir 1.2s cubic-bezier(.4,0,.2,1) both;animation-delay:250ms}
  .veredicto,.hoja{animation:v-subir .28s cubic-bezier(.2,.8,.2,1) both}
  .hoja-fondo{animation:v-aparecer .18s ease both}
  @media (hover:hover){
    body.vidrio .cifra,body.vidrio .tarjeta.toca{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
    body.vidrio a.cifra:hover,body.vidrio button.cifra:hover,body.vidrio .tarjeta.toca:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(74,40,62,.14)}
  }
}
/* Sin backdrop-filter: paneles casi opacos */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.vidrio{--v-panel:rgba(255,255,255,.9)}
  body.vidrio .lateral,body.vidrio .cab-movil,body.vidrio .barra-movil{background:rgba(255,255,255,.94)}
}

/* ============================================================================================================
   VIDRIO OSCURO: sólo si el sistema pide oscuro (igual que las apps que ya lo tenían). Mismos paneles de vidrio
   sobre un fondo oscuro con manchas tenues; los colores de la app vienen de las variables --o-*.
   ============================================================================================================ */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --marca:var(--o-marca);--marca-texto:var(--o-marca-texto);--acento:var(--o-acento);--marca-suave:var(--o-marca-suave);--barra:var(--o-marca);
    --hueso:#15110F;--tinta:#EDE9E1;--gris:#A9B3B0;--gris-suave:#7E8987;--gris-claro:rgba(255,255,255,.07);--borde:rgba(255,255,255,.12);--blanco:#1E1A19;
    --ok:#5FD39B;--ok-claro:#0F3326;--alerta:#E0A268;--alerta-claro:#3A2716;--mal:#FF8592;--mal-claro:#3A1620;--info:#9FD8D2;--info-claro:#1B3F3E;
    --sombra:0 6px 22px rgba(0,0,0,.35);
    color-scheme:dark;
  }
  :root:not([data-tema="claro"]) body.vidrio{
    --v-fondo:var(--o-fondo);--blanco:rgba(255,255,255,.07);--gris-claro:rgba(255,255,255,.07);--borde:rgba(255,255,255,.12);
    --v-panel:rgba(255,255,255,.07);--v-linea:rgba(255,255,255,.10);--v-sombra:0 12px 36px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.05);
    --v-m1:var(--o-m1);--v-m2:var(--o-m2);--v-m3:var(--o-m3);--v-m4:var(--o-m4);--v-m5:var(--o-m5);
  }
  :root:not([data-tema="claro"]) body.vidrio .fila{background:rgba(255,255,255,.06)}
  :root:not([data-tema="claro"]) body.vidrio .tarjeta .fila{background:rgba(255,255,255,.05)}
  :root:not([data-tema="claro"]) body.vidrio a.fila:hover,:root:not([data-tema="claro"]) body.vidrio button.fila:hover{background:rgba(255,255,255,.12)}
  :root:not([data-tema="claro"]) body.vidrio .filtro,:root:not([data-tema="claro"]) body.vidrio .resultado,:root:not([data-tema="claro"]) body.vidrio .btn:not(.prim):not(.peligro):not(.fantasma){background:rgba(255,255,255,.08);border-color:var(--v-linea);color:var(--tinta)}
  :root:not([data-tema="claro"]) body.vidrio .btn.peligro{background:rgba(255,255,255,.06);border-color:rgba(255,133,146,.4)}
  :root:not([data-tema="claro"]) body.vidrio .pestanas-sec{background:rgba(255,255,255,.06)}
  :root:not([data-tema="claro"]) body.vidrio .pestanas-sec .activa{background:rgba(255,255,255,.14);color:var(--tinta)}
  :root:not([data-tema="claro"]) body.vidrio input,:root:not([data-tema="claro"]) body.vidrio select,:root:not([data-tema="claro"]) body.vidrio textarea{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--tinta)}
  :root:not([data-tema="claro"]) body.vidrio .hoja{background:rgba(30,26,25,.96)}
  :root:not([data-tema="claro"]) body.vidrio .hoja-pie{background:rgba(30,26,25,.96)}
  :root:not([data-tema="claro"]) body.vidrio .hoja input,:root:not([data-tema="claro"]) body.vidrio .hoja select,:root:not([data-tema="claro"]) body.vidrio .hoja textarea{background:rgba(255,255,255,.08)}
  :root:not([data-tema="claro"]) body.vidrio .lateral{background:rgba(20,16,15,.6);border-right-color:var(--v-linea)}
  :root:not([data-tema="claro"]) body.vidrio .cab-movil{background:rgba(20,16,15,.65);border-bottom-color:var(--v-linea)}
  :root:not([data-tema="claro"]) body.vidrio .barra-movil{background:rgba(20,16,15,.72);border-top-color:var(--v-linea)}
  :root:not([data-tema="claro"]) body.vidrio #navLateral a:hover{background:rgba(255,255,255,.08)}
  :root:not([data-tema="claro"]) body.vidrio .chip{background:rgba(255,255,255,.08)}
  :root:not([data-tema="claro"]) body.vidrio .barra-h .pista,:root:not([data-tema="claro"]) body.vidrio .avance{background:rgba(255,255,255,.08)}
  :root:not([data-tema="claro"]) .medidor .pista-m{stroke:rgba(255,255,255,.1)}
  :root:not([data-tema="claro"]) .aviso{background:#EDE9E1;color:#15110F}
  :root:not([data-tema="claro"]) .hoja-fondo{background:rgba(0,0,0,.6)}
  :root:not([data-tema="claro"]) .cifra.destacada,:root:not([data-tema="claro"]) .btn.prim,:root:not([data-tema="claro"]) .filtro.activo,:root:not([data-tema="claro"]) #navLateral a.activa,:root:not([data-tema="claro"]) .avatar{color:#15110F}
  :root:not([data-tema="claro"]) body.vidrio .cifra.destacada{background:linear-gradient(145deg,var(--o-marca),color-mix(in srgb,var(--o-marca) 70%,#000));color:#15110F}
  :root:not([data-tema="claro"]) .cifra.destacada .et,:root:not([data-tema="claro"]) .cifra.destacada .cmp{color:rgba(21,17,15,.72)}
  :root:not([data-tema="claro"]) body.vidrio .pie-fijo{background:linear-gradient(to top,var(--o-fondo) 55%,transparent)}
  :root:not([data-tema="claro"]) .version-nueva{color:#15110F}
  :root:not([data-tema="claro"]) .marca-app .marca-logo,:root:not([data-tema="claro"]) .cab-movil .marca-logo{color:#15110F}
}

/* ---- Pantallas táctiles: nada tocable mide menos de 44 px. Va al final para ganarle al resto. ---- */
@media (pointer:coarse){
  .btn.chico{min-height:44px;padding:8px 13px}
  .filtro{min-height:44px;padding:9px 14px}
  .pestanas-sec a,.pestanas-sec button{min-height:44px}
  .volver{min-height:44px}
  .casilla{min-height:44px}
  input[type=checkbox]:not(.interruptor input){width:26px;height:26px;flex:none}
  main select{min-height:44px}
  .tarjeta h2 .der{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin:-12px -8px -12px auto}
  p.nota a,.sub a,.ayuda a{display:inline-block;padding:12px 4px;margin:-12px -4px}
}