:root{
  --fondo:#eef2f7;--sup:#fff;--borde:#dbe2ec;--texto:#15202e;--suave:#4f5f74;
  --prim:#0b5cad;--prim2:#084a8c;--prim-claro:#e8f1fc;--acento:#2f80d8;
  --rojo:#b42318;--rojo-f:#fdecea;--verde:#0f6b3f;--verde-f:#e5f5ec;--ambar:#9a6200;--ambar-f:#fff3d6;
  --rad:14px;--sombra:0 1px 2px rgba(18,36,58,.05),0 6px 18px rgba(18,36,58,.06);
  --sombra-alta:0 14px 34px rgba(18,36,58,.18);
}
*{box-sizing:border-box}
html{scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3{line-height:1.25;margin:0}
h2{font-size:1.35rem;margin-bottom:.9rem;letter-spacing:-.2px}
code{background:#e3e9f1;padding:.1rem .35rem;border-radius:5px;font-size:.88em}
:focus-visible{outline:3px solid #f5a300;outline-offset:2px}
.solo-lectores{position:absolute;left:-9999px}
.saltar{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:100;border-radius:0 0 8px 0}
.saltar:focus{left:0}

/* ===== Encabezado ===== */
.topbar{position:sticky;top:0;z-index:50;width:100%;color:#fff;background:linear-gradient(135deg,#0b1829,#12243a 55%,#163a63);border-bottom:3px solid var(--acento);box-shadow:0 4px 16px rgba(10,22,38,.25)}
.topbar__in{max-width:1200px;width:100%;margin:auto;padding:.85rem 1rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.marca{display:flex;flex-direction:column;line-height:1.1;font-size:1.35rem;font-weight:800;letter-spacing:.2px;margin-right:auto}
.marca span{font-size:.72rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:#8fbdf0;margin-top:.2rem}
.topbar nav{display:flex;gap:.2rem;background:rgba(255,255,255,.08);padding:.2rem;border-radius:12px}
.topbar nav a{color:#dce9f8;text-decoration:none;padding:.45rem 1rem;border-radius:9px;font-weight:500;transition:background .2s ease,color .2s ease}
.topbar nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.topbar nav a[aria-current="page"]{background:#fff;color:#0d2d52;font-weight:700}
.usuario{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.22rem .9rem .22rem .25rem;color:#fff;font-weight:600;font-size:.9rem}
.usuario__avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#5fb0ff,#0b5cad);color:#fff;font-weight:800;font-size:.85rem;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.contenedor{max-width:1200px;margin:auto;padding:1.5rem 1rem 3rem;display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
.contenedor>*{min-width:0}
.pie{color:var(--suave);font-size:.85rem;margin:0;text-align:center}

/* ===== Indicadores ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:.85rem}
.kpi{background:var(--sup);border:1px solid var(--borde);border-top:4px solid var(--prim);border-radius:var(--rad);padding:1rem 1.1rem;box-shadow:var(--sombra)}
.kpi span{display:block;color:var(--suave);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.kpi strong{display:block;font-size:2.1rem;line-height:1.2;margin-top:.2rem;font-variant-numeric:tabular-nums}
.kpi--bajo{border-top-color:#e0a100}
.kpi--bajo strong{color:var(--ambar)}
.kpi--cero{border-top-color:var(--rojo)}
.kpi--cero strong{color:var(--rojo)}

/* ===== Botones ===== */
.btn{font:inherit;font-weight:600;border:1px solid transparent;border-radius:11px;padding:.5rem 1.05rem;cursor:pointer;min-height:42px;transition:background .2s ease,transform .15s ease,box-shadow .2s ease,border-color .2s ease}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.97)}
.btn--prim{background:linear-gradient(180deg,#1672d4,var(--prim));color:#fff;box-shadow:0 2px 6px rgba(11,92,173,.3)}
.btn--prim:hover:not(:disabled){background:linear-gradient(180deg,#0f64bf,var(--prim2));box-shadow:0 6px 16px rgba(11,92,173,.4)}
.btn--sec{background:#fff;color:var(--texto);border-color:#b7c2d1}
.btn--sec:hover:not(:disabled){background:var(--prim-claro);border-color:var(--prim)}
.btn--peligro{background:var(--rojo);color:#fff}
.btn--peligro:hover:not(:disabled){background:#8f1c12;box-shadow:0 6px 16px rgba(180,35,24,.35)}
.btn--sm{padding:.25rem .75rem;min-height:36px;font-size:.88rem;border-radius:9px}
.btn--salir{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--salir:hover:not(:disabled){background:rgba(255,255,255,.16);border-color:#fff}

/* ===== Campos ===== */
.campo{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.campo label{font-size:.84rem;font-weight:600;color:#2b3a4e}
input,select,textarea{font:inherit;color:var(--texto);background:#fff;border:1px solid #b7c2d1;border-radius:11px;padding:.5rem .75rem;min-height:44px;width:100%;transition:border-color .2s ease,box-shadow .2s ease}
input:hover,select:hover,textarea:hover{border-color:#8d99a8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--prim);box-shadow:0 0 0 3px rgba(11,92,173,.2)}
textarea{resize:vertical}
input[aria-invalid="true"]{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(180,35,24,.15)}
.error{color:var(--rojo);font-size:.84rem;margin:0}
.nota{color:var(--suave);font-size:.875rem;margin:0 0 .75rem}

/* ===== Filtros ===== */
.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;align-items:end;background:var(--sup);border:1px solid var(--borde);border-radius:var(--rad);padding:1.1rem;margin-bottom:1rem;box-shadow:var(--sombra);position:relative;z-index:10;overflow:visible;animation:none!important}
.campo--q{grid-column:span 2}
.campo--btns{display:flex;flex-direction:row;grid-column:span 2;align-items:flex-end;justify-content:flex-start;gap:.5rem;flex-wrap:wrap;min-width:0;position:relative;z-index:20}
.campo--btns .btn,.campo--btns .menu-exp summary{height:44px;min-height:44px;padding:0 1rem;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1;font-size:.92rem}

/* ===== Exportar a Excel ===== */
.menu-exp{position:relative;display:inline-flex;z-index:30}
.menu-exp[open]{z-index:100}
.menu-exp summary{list-style:none;cursor:pointer}
.menu-exp summary::-webkit-details-marker{display:none}
.menu-exp__lista{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;padding:.35rem;background:#fff;border:1px solid var(--borde);border-radius:12px;box-shadow:var(--sombra-alta);z-index:9999}
.menu-exp__lista a{display:block;padding:.7rem .9rem;color:var(--texto);text-decoration:none;border-radius:9px;white-space:nowrap}
.menu-exp__lista a:hover,.menu-exp__lista a:focus-visible{background:var(--prim-claro);color:var(--prim2)}

/* ===== Tabla ===== */
.tabla-wrap{background:var(--sup);border:1px solid var(--borde);border-radius:var(--rad);box-shadow:var(--sombra);overflow-x:auto;max-width:100%;position:relative;z-index:1}
.tabla-wrap.cargando{opacity:.55}
.tabla{width:100%;border-collapse:collapse}
.tabla th,.tabla td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid #e6ebf2;vertical-align:middle}
.tabla thead th{background:#e8eef6;font-size:.78rem;text-transform:uppercase;letter-spacing:.45px;color:#33445a;white-space:nowrap;border-bottom:2px solid #c9d5e4}
.tabla tbody tr:nth-child(even){background:#f9fbfd}
.tabla tbody tr{transition:background .15s ease}
.tabla tbody tr:hover{background:var(--prim-claro)}
.tabla .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.tabla td.obs{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--suave)}
.tabla .acciones{white-space:nowrap}
.orden{all:unset;cursor:pointer;font-weight:700;padding:.1rem .2rem;border-radius:4px}
.orden:hover{color:var(--prim)}
.orden:focus-visible{outline:3px solid #f5a300}
th[aria-sort="ascending"] .orden::after{content:" ▲";color:var(--prim)}
th[aria-sort="descending"] .orden::after{content:" ▼";color:var(--prim)}
.insignia{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:.1rem .55rem;margin-left:.4rem}
.insignia--cero{background:var(--rojo-f);color:var(--rojo)}
.insignia--bajo{background:var(--ambar-f);color:var(--ambar)}
.paginacion{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.85rem 1rem;background:#f9fbfd;border-top:1px solid var(--borde);color:var(--suave);font-size:.9rem}

/* ===== Estados vacíos ===== */
.estado{background:var(--sup);border:2px dashed #b7c2d1;border-radius:var(--rad);padding:2.5rem 1rem;text-align:center}
.estado h3{margin:0 0 .3rem;font-size:1.15rem}
.estado p{margin:0 0 1rem;color:var(--suave)}

/* ===== Ventanas emergentes ===== */
dialog{border:0;border-radius:18px;padding:1.5rem;width:min(680px,94vw);max-height:92vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.35);color:var(--texto)}
dialog::backdrop{background:rgba(10,20,35,.6)}
dialog h2{padding-bottom:.6rem;border-bottom:1px solid var(--borde)}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:.85rem 1rem}
.campo--ancho{grid-column:1/-1}
.dlg-pie{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.dlg-pie--col{flex-direction:column}
.caja{background:var(--prim-claro);border-left:4px solid var(--prim);border-radius:10px;padding:.75rem .95rem;margin:.6rem 0}

/* ===== Avisos ===== */
.avisos{position:fixed;right:1rem;bottom:1rem;display:grid;gap:.5rem;z-index:1000;max-width:min(420px,calc(100vw - 2rem))}
.aviso{padding:.8rem 1rem;border-radius:12px;border:1px solid;border-left-width:5px;cursor:pointer;box-shadow:var(--sombra-alta);background:#fff}
.aviso--ok{border-color:var(--verde);background:var(--verde-f);color:#0a4a2b}
.aviso--error{border-color:var(--rojo);background:var(--rojo-f);color:#7a130b}

/* ===== Gráficas ===== */
.graficas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:.85rem;margin-top:.85rem}
.grafica{margin:0;background:var(--sup);border:1px solid var(--borde);border-radius:var(--rad);padding:1.05rem 1.15rem;min-width:0;box-shadow:var(--sombra)}
.grafica--ancha{grid-column:1/-1}
.grafica figcaption{font-weight:700;margin-bottom:.7rem}
.g-vacio{color:var(--suave);font-size:.9rem;margin:.5rem 0}
.g-fila{display:grid;grid-template-columns:minmax(70px,130px) 1fr auto;gap:.5rem;align-items:center;margin:.4rem 0;font-size:.9rem}
.g-etq{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-pista{background:#e6ecf4;border-radius:999px;height:14px;overflow:hidden}
.g-barra{height:100%;background:linear-gradient(90deg,#3b8fe6,var(--prim));border-radius:999px}
.g-val{font-variant-numeric:tabular-nums;font-weight:700}
.g-dona{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.g-dona svg{width:150px;height:150px;flex:none}
.g-leyenda{list-style:none;margin:0;padding:0;font-size:.9rem}
.g-leyenda li{display:flex;align-items:center;gap:.5rem;margin:.3rem 0}
.g-cuad{width:12px;height:12px;border-radius:3px;display:inline-block}
.g-meses{display:flex;align-items:flex-start;gap:.75rem;padding-top:.5rem;overflow-x:auto}
.g-mes{flex:1;min-width:48px;display:flex;flex-direction:column;align-items:center}
.g-par{display:flex;align-items:flex-end;gap:3px;width:100%;justify-content:center;height:150px;border-bottom:2px solid #d9e0ea}
.g-b{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;max-width:34px}
.g-col{width:100%;border-radius:4px 4px 0 0;min-height:0;transform-origin:bottom;transition:filter .2s ease}
.g-col--e{background:linear-gradient(180deg,#1b9a5f,var(--verde))}
.g-col--s{background:linear-gradient(180deg,#d9483a,var(--rojo))}
.g-b:hover .g-col{filter:brightness(1.15)}
.g-n{font-size:.7rem;line-height:1.2;height:1rem;color:var(--suave);font-weight:600}
.g-mes-etq{font-size:.8rem;color:var(--suave);margin-top:.3rem}
.g-meses--dias{gap:.2rem}
.g-meses--dias .g-mes{min-width:22px}
.g-meses--dias .g-b{max-width:14px}
.g-meses--dias .g-n{font-size:.6rem}
.g-leyenda-h{display:flex;gap:1rem;font-size:.85rem;margin-top:.6rem;flex-wrap:wrap}

/* ===== Login ===== */
.pagina-login{min-height:100vh;display:grid;place-items:center;padding:1rem;position:relative;overflow:hidden;background:radial-gradient(circle at 18% 22%,#1f5393 0,transparent 45%),radial-gradient(circle at 85% 82%,#0b5cad 0,transparent 42%),linear-gradient(135deg,#08111e,#12243a 55%,#0d2d52)}
.pagina-login::before{content:"";position:absolute;inset:0;background-image:linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.04) 75%,transparent 75%);background-size:60px 60px;animation:desliza 8s linear infinite}
.pagina-login::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;border:48px solid rgba(255,255,255,.05);right:-130px;bottom:-130px;animation:flota 7s ease-in-out infinite}
.login{position:relative;z-index:1;width:min(410px,100%);color:#fff;background:rgba(255,255,255,.09);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:2.25rem 1.75rem;box-shadow:0 20px 50px rgba(0,0,0,.4);animation:aparece .5s ease both}
.login::before{content:"";display:block;width:56px;height:56px;margin:0 auto 1rem;border-radius:50%;background:radial-gradient(circle,#12243a 0 18%,#2a3d57 19% 34%,#0b5cad 35% 100%);box-shadow:0 0 0 4px rgba(255,255,255,.28)}
.login .marca{align-items:center;text-align:center;font-size:1.65rem;margin:0 0 .35rem}
.login__sub{color:#d3e3f6;margin:0 0 1.4rem;text-align:center}
.login form{display:grid;gap:.95rem}
.login .campo label{color:#e2edf9}
.login input{background:rgba(255,255,255,.96);border-color:transparent}
.login .error{color:#ffb4ab;min-height:1.2rem}
.login .btn{width:100%}
.login .btn--prim{min-height:48px;font-size:1rem}

/* ===== Animaciones ===== */
@keyframes aparece{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sube{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes crece-h{from{width:0}}
@keyframes crece-v{from{height:0}}
@keyframes gira{from{stroke-dasharray:0 999}}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes desliza{from{background-position:0 0}to{background-position:60px 60px}}
.kpi,.grafica,.tabla-wrap,.estado{animation:aparece .5s ease backwards}
.kpi:nth-child(2){animation-delay:.05s}
.kpi:nth-child(3){animation-delay:.1s}
.kpi:nth-child(4){animation-delay:.15s}
.kpi:nth-child(5){animation-delay:.2s}
.kpi:nth-child(6){animation-delay:.25s}
.grafica:nth-child(2){animation-delay:.1s}
.grafica:nth-child(3){animation-delay:.2s}
.grafica:nth-child(4){animation-delay:.3s}
.g-barra{animation:crece-h .9s cubic-bezier(.2,.8,.2,1) both}
.g-col{animation:crece-v .8s cubic-bezier(.2,.8,.2,1) both}
.g-mes:nth-child(2) .g-col{animation-delay:.05s}
.g-mes:nth-child(3) .g-col{animation-delay:.1s}
.g-mes:nth-child(4) .g-col{animation-delay:.15s}
.g-mes:nth-child(5) .g-col{animation-delay:.2s}
.g-mes:nth-child(6) .g-col{animation-delay:.25s}
.g-dona circle{animation:gira 1s ease both}
.aviso{animation:aparece .3s ease both}
dialog[open]{animation:aparece .25s ease both}
.kpi,.grafica{transition:transform .2s ease,box-shadow .2s ease}
.kpi:hover,.grafica:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)}

/* ===== Tablet y celular grande: la tabla pasa a tarjetas ===== */
@media (max-width:1000px){
  .campo--q,.campo--btns{grid-column:span 2}
}
@media (max-width:820px){
  .campo--q,.campo--btns{grid-column:1/-1}
  .rejilla{grid-template-columns:1fr}
  .tabla-wrap{background:transparent;border:0;box-shadow:none;overflow:visible}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabla tbody tr{background:#fff!important;border:1px solid var(--borde);border-radius:var(--rad);box-shadow:var(--sombra);padding:.3rem .95rem;margin-bottom:.85rem}
  .tabla td{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:0;border-bottom:1px dashed #e3e9f1;padding:.55rem 0;text-align:right}
  .tabla td:last-child{border-bottom:0}
  .tabla td::before{content:attr(data-label);font-weight:600;color:var(--suave);font-size:.82rem;text-align:left;flex:none}
  .tabla td.obs{max-width:none;white-space:normal}
  .tabla td.acciones{padding:.75rem 0 .5rem;gap:.6rem}
  .tabla td.acciones::before{content:none}
  .tabla td.acciones .btn{flex:1;min-height:44px}
  .paginacion{background:#fff;border:1px solid var(--borde);border-radius:var(--rad);box-shadow:var(--sombra)}
}

/* ===== Celular: barra inferior, botón flotante, formularios desde abajo ===== */
@media (max-width:640px){
  .topbar__in{flex-wrap:nowrap;padding:.65rem .9rem;gap:.6rem}
  .marca{font-size:1.1rem}
  .marca span{font-size:.62rem;letter-spacing:2.2px}
  .usuario{padding:.2rem;border-radius:50%}
  #usuario-nombre{display:none}
  .btn--salir{min-height:38px;padding:.2rem .8rem;font-size:.85rem}

  .topbar nav{position:fixed;left:0;right:0;bottom:0;z-index:55;gap:0;border-radius:0;padding:0 0 env(safe-area-inset-bottom,0px);background:#fff;border-top:1px solid var(--borde);box-shadow:0 -6px 20px rgba(18,36,58,.12)}
  .topbar nav a{flex:1;text-align:center;border-radius:0;padding:.95rem .5rem;color:var(--suave);font-weight:600;border-top:3px solid transparent}
  .topbar nav a:hover{background:var(--prim-claro);color:var(--prim)}
  .topbar nav a[aria-current="page"]{background:var(--prim-claro);color:var(--prim);border-top-color:var(--prim)}

  #btn-nueva{position:fixed;right:1rem;bottom:calc(4.4rem + env(safe-area-inset-bottom,0px));z-index:56;min-height:52px;padding:0 1.3rem;border-radius:999px;box-shadow:0 8px 22px rgba(11,92,173,.45)}

  .contenedor{padding:1rem .9rem 9rem;gap:1.4rem}
  h2{font-size:1.2rem}
  .kpis{grid-template-columns:repeat(2,1fr);gap:.65rem}
  .kpi{padding:.8rem .9rem}
  .kpi strong{font-size:1.6rem}
  .kpi span{font-size:.7rem}

  .filtros{grid-template-columns:1fr 1fr;padding:.9rem;gap:.7rem}
  .campo--q{grid-column:1/-1}
  .campo--btns{flex-wrap:nowrap;gap:.45rem}
  .campo--btns .btn,.campo--btns .menu-exp{flex:1;min-width:0}
  .campo--btns .btn,.campo--btns .menu-exp summary{width:100%;padding:0 .5rem;font-size:.85rem}
  .menu-exp__lista{left:auto;right:0;min-width:200px}

  .avisos{left:.9rem;right:.9rem;bottom:calc(8.6rem + env(safe-area-inset-bottom,0px));max-width:none}

  dialog{width:100%;max-width:100%;max-height:92vh;max-height:92dvh;margin:auto 0 0;padding:1.1rem 1rem calc(1.1rem + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0}
  dialog[open]{animation:sube .28s ease both}
  .dlg-pie{flex-direction:column-reverse}
  .dlg-pie .btn{width:100%;min-height:48px}

  .grafica{padding:.9rem}
  .g-dona{justify-content:center}
}

/* ===== Pantallas táctiles: sin efectos de "pasar el mouse" pegados ===== */
@media (hover:none){
  .kpi:hover,.grafica:hover{transform:none;box-shadow:var(--sombra)}
  .btn:hover:not(:disabled){transform:none}
}

/* ===== Accesibilidad: menos movimiento ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ===== Botón flotante: instalar app (solo celulares) ===== */
.pwa-caja{position:fixed;left:.9rem;bottom:calc(4.6rem + env(safe-area-inset-bottom,0px));z-index:57;display:flex;align-items:center;gap:.35rem;animation:sube .35s ease both}
.pagina-login .pwa-caja{bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
.pwa-btn{font:inherit;font-weight:700;border:0;border-radius:999px;min-height:48px;padding:0 1.2rem;color:#fff;cursor:pointer;background:linear-gradient(135deg,#1a73d9,#0b5cad);box-shadow:0 8px 22px rgba(11,92,173,.45)}
.pwa-x{width:30px;height:30px;border-radius:50%;border:0;background:rgba(18,36,58,.75);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer}
.pwa-hoja{position:fixed;inset:0;z-index:2000;background:rgba(10,20,35,.6);display:flex;align-items:flex-end;justify-content:center}
.pwa-hoja[hidden]{display:none}
.pwa-hoja__in{width:100%;max-width:520px;background:#fff;color:var(--texto);border-radius:22px 22px 0 0;padding:1.3rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom,0px));display:grid;gap:.8rem;animation:sube .28s ease both}
.pwa-hoja__in h3{margin:0;font-size:1.15rem}
.pwa-hoja__in ol{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}
.pwa-apk{display:block;text-align:center;font-weight:700;color:var(--prim);border:1px solid var(--prim);border-radius:11px;padding:.75rem;text-decoration:none}
.pwa-apk[hidden]{display:none}
.pwa-hoja .btn{width:100%;min-height:48px}