:root{
  --azul:#1C75BC; --azul-d:#134e8e; --cyan:#15B5C4; --cyan-bg:#e3f5f8;
  --verde:#2FAE4B; --verde-bg:#e7f7ec; --amar:#f3a712; --amar-bg:#fef6e3;
  --rojo:#e53935; --rojo-bg:#fdecea; --gris:#5b6b7b; --linea:#e3eaf1;
  --fondo:#f2f7fb; --tinta:#11212f; --blanco:#fff;
  /* etiquetas de color por local */
  --loc-eco:#1C75BC; --loc-asuncion:#2FAE4B; --loc-club:#15B5C4;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--fondo);color:var(--tinta);font-size:15px;line-height:1.45}
button{font-family:inherit;cursor:pointer;border:none}
input,select{font-family:inherit;font-size:16px}
.hidden{display:none!important}

/* ===== LOGIN ===== */
#login{position:fixed;inset:0;background:linear-gradient(155deg,#134e8e,#15B5C4 62%,#39B54A 125%);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
.login-card{background:#fff;border-radius:22px;padding:30px 24px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-card img{width:120px;height:120px;object-fit:contain;margin-bottom:6px}
.login-card h1{font-size:20px;color:var(--azul)}
.login-card p.sub{font-size:12.5px;color:var(--gris);margin-bottom:18px}
.field{text-align:left;margin-bottom:12px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--gris);margin-bottom:5px}
.field input{width:100%;padding:12px;border:1.5px solid var(--linea);border-radius:11px}
.field input:focus{outline:none;border-color:var(--cyan)}
.btn{background:var(--azul);color:#fff;padding:13px 16px;border-radius:12px;font-weight:700;font-size:15px;width:100%}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;border:1.5px solid var(--linea);color:var(--tinta)}
.demo-hint{margin-top:16px;background:var(--cyan-bg);border-radius:11px;padding:11px;font-size:12px;color:var(--azul);text-align:left}
.demo-hint b{display:block;margin-bottom:4px}
.err{color:var(--rojo);font-size:13px;margin-top:8px;min-height:18px}

/* ===== APP SHELL ===== */
#app{display:none;min-height:100vh}
.topbar{position:sticky;top:0;z-index:30;background:var(--azul);color:#fff;display:flex;align-items:center;gap:10px;padding:9px 14px}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:700}
.topbar .brand img{width:30px;height:30px;background:#fff;border-radius:8px;padding:3px;object-fit:contain}
.topbar .spacer{flex:1}
.sync{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);border-radius:20px;padding:5px 11px;font-size:12px;font-weight:600}
.sync .dot{width:8px;height:8px;border-radius:50%}
.sync.ok .dot{background:#8DF0B0} .sync.saving .dot{background:#ffd76b} .sync.off .dot{background:#ff9a9a}
.role-chip{background:rgba(255,255,255,.18);padding:5px 10px;border-radius:20px;font-size:12px;font-weight:600}
.logout{background:rgba(255,255,255,.12);color:#fff;border-radius:8px;padding:7px 10px;font-size:13px}

.layout{display:flex;max-width:1280px;margin:0 auto}
.nav{display:none}
@media(min-width:900px){
  .nav{display:flex;flex-direction:column;gap:3px;width:236px;padding:16px 12px;position:sticky;top:50px;height:calc(100vh - 50px);overflow:auto}
  .nav button{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:11px;background:transparent;color:var(--gris);font-weight:600;font-size:14px;text-align:left;width:100%}
  .nav button .ic{font-size:18px;width:22px;text-align:center}
  .nav button.active{background:var(--cyan-bg);color:var(--azul)}
  .main{flex:1;min-width:0}
}
.main{padding:16px 15px 92px}
@media(min-width:900px){.main{padding:22px 24px}}
.page-head h2{font-size:20px;color:var(--azul)}
.page-head p{color:var(--gris);font-size:13px;margin:2px 0 14px}

.bottomnav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--linea);display:flex;z-index:40;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.bottomnav::-webkit-scrollbar{height:3px}
.bottomnav::-webkit-scrollbar-thumb{background:var(--linea);border-radius:3px}
@media(min-width:900px){.bottomnav{display:none}}
.bottomnav button{flex:1 0 auto;min-width:64px;background:none;padding:8px 6px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--gris);font-size:10px;font-weight:600}
.bottomnav button .ic{font-size:19px}
.bottomnav button.active{color:var(--azul)}

.card{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:16px;margin-bottom:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:14px}
.kpi .lbl{font-size:11.5px;color:var(--gris);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.kpi .val{font-size:23px;font-weight:800;margin-top:4px;color:var(--azul)}
.wip{background:var(--amar-bg);border:1px dashed #e6c15a;border-radius:12px;padding:14px;color:#7a5b00;font-size:13.5px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--cyan-bg);color:var(--azul)}

.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--verde);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;opacity:0;transition:.3s;z-index:210;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--rojo)}
.foot{color:var(--gris);font-size:11.5px;text-align:center;margin-top:10px}

/* ===== Módulo 2: fichas, formularios, modal ===== */
.stu{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--linea);border-radius:13px;margin-bottom:10px;background:#fff}
.avatar{width:42px;height:42px;border-radius:12px;background:var(--cyan-bg);color:var(--azul);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0}
.stu .info{flex:1;min-width:0}
.stu .info b{font-size:14.5px}
.stu .info .meta{font-size:12px;color:var(--gris)}
.flag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--rojo-bg);color:var(--rojo);display:inline-block;margin-right:4px;margin-top:3px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-grid .field{margin-bottom:0}
.field.full{grid-column:1/-1}
.field select{padding:11px;border:1.5px solid var(--linea);border-radius:11px;width:100%;background:#fff}
.field select:focus{outline:none;border-color:var(--cyan)}
.sec-title{font-size:13px;font-weight:800;color:var(--azul);text-transform:uppercase;letter-spacing:.4px;margin:16px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--cyan-bg)}
.health-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--linea);font-size:13.5px}
.switch{display:inline-flex;gap:10px}
.switch label{font-size:12.5px;color:var(--gris);display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.legal{display:flex;gap:10px;align-items:flex-start;padding:11px;background:var(--cyan-bg);border-radius:11px;margin-bottom:10px;font-size:13px}
.legal input{margin-top:2px;width:18px;height:18px;flex-shrink:0}
.btn.sm{padding:8px 12px;font-size:13px}
.modal{position:fixed;inset:0;background:rgba(10,30,50,.5);display:none;align-items:flex-end;justify-content:center;z-index:200}
.modal.open{display:flex}
@media(min-width:640px){.modal{align-items:center}}
.modal .box{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:540px;max-height:90vh;overflow:auto;padding:20px}
@media(min-width:640px){.modal .box{border-radius:20px}}
.modal h3{color:var(--azul);margin-bottom:10px}
.modal .close{float:right;background:#f3f5f7;border-radius:9px;width:32px;height:32px;font-size:18px;color:var(--gris)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .btn{width:auto}

/* ===== Módulo 4: grilla de aforo ===== */
.grid-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:14px;background:#fff}
table.aforo{border-collapse:collapse;width:100%;min-width:520px}
table.aforo th,table.aforo td{border:1px solid var(--linea);padding:7px;text-align:center;vertical-align:top}
table.aforo th{background:#f7fafd;font-size:12px;color:var(--gris)}
table.aforo td.hora{background:#f7fafd;font-weight:700;color:var(--azul);font-size:13px;white-space:nowrap}
.cell{border-radius:10px;padding:7px 5px;cursor:pointer;transition:.12s}
.cell:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.cell .cnt{font-size:16px;font-weight:800}
.cell .tag{font-size:9px;font-weight:700;margin-top:2px;line-height:1.1}
.cell .util{font-size:9.5px;margin-top:2px;font-weight:600}
.c-rojo{background:var(--rojo-bg);color:var(--rojo)}
.c-amar{background:var(--amar-bg);color:#b4790a}
.c-verde{background:var(--verde-bg);color:var(--verde)}
.c-vacio{background:#f3f5f7;color:#9aa7b3}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--gris)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dotc{width:12px;height:12px;border-radius:4px;display:inline-block}

/* ===== Módulo 8: Bitácora DIGESA ===== */
.turno-tabs{display:flex;gap:8px;margin-bottom:14px}
.turno-tabs button{flex:1;padding:11px;border-radius:11px;background:#fff;border:1.5px solid var(--linea);font-weight:700;color:var(--gris)}
.turno-tabs button.active{background:var(--azul);color:#fff;border-color:var(--azul)}
.diag{padding:16px;border-radius:14px;text-align:center;font-weight:800;margin-top:14px}
.diag.ok{background:var(--verde-bg);color:var(--verde)}
.diag.alert{background:var(--rojo);color:#fff}
.pushsim{background:#11212f;color:#fff;border-radius:12px;padding:12px;margin-top:10px;font-size:13px}

/* ============================================================================
   v4.4 — INTRANET · FICHA EN CUADRO · DINAMISMO
   Bloque añadido al final. No modifica ninguna regla anterior.
   ============================================================================ */

/* ---------- 1. Animaciones base ---------- */
@keyframes acrFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes acrPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes acrSlideUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes acrBarGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes acrSpin{to{transform:rotate(360deg)}}

.main.acr-in{animation:acrFadeUp .26s cubic-bezier(.2,.7,.3,1) both}
.modal.open .box{animation:acrSlideUp .24s cubic-bezier(.2,.8,.3,1) both}
@media(min-width:640px){.modal.open .box{animation:acrPop .18s ease both}}

/* Filas que entran escalonadas */
.acr-stagger>*{animation:acrFadeUp .24s ease both}
.acr-stagger>*:nth-child(1){animation-delay:.02s}
.acr-stagger>*:nth-child(2){animation-delay:.04s}
.acr-stagger>*:nth-child(3){animation-delay:.06s}
.acr-stagger>*:nth-child(4){animation-delay:.08s}
.acr-stagger>*:nth-child(5){animation-delay:.10s}
.acr-stagger>*:nth-child(6){animation-delay:.12s}
.acr-stagger>*:nth-child(7){animation-delay:.14s}
.acr-stagger>*:nth-child(8){animation-delay:.16s}
.acr-stagger>*:nth-child(9){animation-delay:.18s}
.acr-stagger>*:nth-child(n+10){animation-delay:.20s}

/* ---------- 2. Respuesta al tacto / hover ---------- */
.btn{transition:transform .12s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}
.btn:active{transform:scale(.97)}
.btn:not(.ghost):hover{box-shadow:0 6px 16px rgba(28,117,188,.28)}
.btn.ghost:hover{border-color:var(--cyan);background:#f8fcfe}
.stu{transition:transform .14s ease,box-shadow .16s ease,border-color .16s ease}
.stu:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(17,33,47,.08);border-color:#cfe0ee}
.kpi{transition:transform .16s ease,box-shadow .18s ease}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(17,33,47,.09)}
.nav button,.bottomnav button{transition:background .16s ease,color .16s ease}
.nav button:hover{background:#eef5fb;color:var(--azul)}
.badge{transition:transform .14s ease}

/* Accesibilidad: si el sistema pide menos movimiento, se apaga todo */
@media(prefers-reduced-motion:reduce){
  .main.acr-in,.modal.open .box,.acr-stagger>*,.acr-bar span,.acr-seg{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* ---------- 3. Ficha: cuadro del bloque "I. Alumno" ---------- */
.ficha-box{border:1.5px solid var(--linea);border-radius:16px;overflow:hidden;margin:4px 0 6px;background:#fff}
.ficha-box-head{display:flex;align-items:center;gap:12px;padding:14px;background:linear-gradient(135deg,#f3f9fd,#e9f4fb);border-bottom:1.5px solid var(--linea)}
.ficha-box-head .avatar{width:46px;height:46px;font-size:17px;background:#fff;border:1.5px solid #cfe4f3}
.ficha-box-head .nm{flex:1;min-width:0}
.ficha-box-head .nm b{display:block;font-size:15px;line-height:1.25}
.ficha-box-head .nm .meta{font-size:12px;color:var(--gris);margin-top:3px}
.ficha-box-head .nm .meta.al{color:var(--rojo);font-weight:700;margin-top:2px}
.ficha-grid{display:grid;grid-template-columns:1fr 1fr}
.ficha-grid .cf{padding:10px 14px;border-top:1px solid var(--linea);border-right:1px solid var(--linea);min-width:0}
.ficha-grid .cf:nth-child(2n){border-right:none}
.ficha-grid .cf.full{grid-column:1/-1;border-right:none}
.ficha-grid .k{display:block;font-size:10.5px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.4px}
.ficha-grid .v{display:block;font-size:14px;font-weight:600;margin-top:2px;word-break:break-word;line-height:1.3}
.ficha-grid .v.on{color:var(--verde)} .ficha-grid .v.off{color:var(--rojo)}
@media(max-width:359px){.ficha-grid{grid-template-columns:1fr}.ficha-grid .cf{border-right:none}}

/* ---------- 4. Buscador, chips de filtro y orden ---------- */
.acr-filtros{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.acr-buscar{position:relative}
.acr-buscar input{width:100%;padding:11px 36px 11px 38px;border:1.5px solid var(--linea);border-radius:12px;background:#fff;font-size:15px}
.acr-buscar input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(21,181,196,.13)}
/* el navegador dibuja su propia "x" en los input[type=search]: la ocultamos para no duplicarla */
.acr-buscar input::-webkit-search-cancel-button,
.acr-buscar input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.acr-buscar .lupa{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--gris);pointer-events:none}
.acr-buscar .limpiar{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:#f0f3f6;border-radius:50%;width:23px;height:23px;font-size:14px;line-height:1;color:var(--gris);display:none}
.acr-buscar.tiene .limpiar{display:block}
.acr-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.acr-chip{background:#fff;border:1.5px solid var(--linea);border-radius:20px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--gris);transition:.15s;white-space:nowrap}
.acr-chip:hover{border-color:var(--cyan)}
.acr-chip.on{background:var(--azul);border-color:var(--azul);color:#fff}
.acr-orden{margin-left:auto;padding:6px 10px;border:1.5px solid var(--linea);border-radius:20px;background:#fff;font-size:12.5px;font-weight:600;color:var(--gris)}
.acr-orden:focus{outline:none;border-color:var(--cyan)}
.acr-conteo{font-size:12px;color:var(--gris);font-weight:600}
.acr-vacio{text-align:center;padding:26px 14px;color:var(--gris)}
.acr-vacio .em{font-size:30px;display:block;margin-bottom:8px}

/* ---------- 5. Gráficos del panel de inicio ---------- */
.acr-charts{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
@media(min-width:760px){.acr-charts{grid-template-columns:1fr 1fr}}
@media(min-width:1150px){.acr-charts{grid-template-columns:1fr 1fr 1fr}}
.acr-chart{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:15px}
.acr-chart h4{font-size:13px;font-weight:800;color:var(--azul);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.acr-chart .cap{font-size:11.5px;color:var(--gris);margin-bottom:13px}
.acr-row{display:grid;grid-template-columns:minmax(78px,40%) 1fr auto;align-items:center;gap:9px;margin-bottom:9px;font-size:12.5px}
.acr-row .lb{color:var(--gris);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr-row .vl{font-weight:800;color:var(--tinta);font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
.acr-bar{background:#eef2f6;border-radius:5px;height:11px;overflow:hidden}
.acr-bar span{display:block;height:100%;border-radius:5px;background:var(--azul);transform-origin:left center;animation:acrBarGrow .5s cubic-bezier(.2,.8,.3,1) both}
.acr-row:hover .acr-bar span{filter:brightness(1.12)}

/* Barra apilada de estado (siempre con icono + texto, nunca solo color) */
.acr-stack{display:flex;gap:2px;height:15px;border-radius:6px;overflow:hidden;background:#eef2f6;margin-bottom:11px}
.acr-seg{height:100%;transform-origin:left center;animation:acrBarGrow .5s cubic-bezier(.2,.8,.3,1) both}
.acr-seg.ok{background:var(--verde)} .acr-seg.mal{background:var(--rojo)}
.acr-leg{display:flex;flex-direction:column;gap:7px}
.acr-leg div{display:flex;align-items:center;gap:8px;font-size:12.5px}
.acr-leg .mk{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.acr-leg .mk.ok{background:var(--verde)} .acr-leg .mk.mal{background:var(--rojo)}
.acr-leg .tx{flex:1;color:var(--gris);font-weight:600}
.acr-leg .nu{font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- 6. Indicador de datos en vivo ---------- */
.acr-live{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--verde);background:var(--verde-bg);padding:3px 9px;border-radius:20px;margin-left:8px;vertical-align:middle}
.acr-live .pt{width:6px;height:6px;border-radius:50%;background:var(--verde);animation:acrPulse 1.9s ease-in-out infinite}
@keyframes acrPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.acr-flash{animation:acrFlash 1s ease}
@keyframes acrFlash{0%{background:var(--verde-bg)}100%{background:transparent}}

/* ---------- v4.5: apartado Acceso y contraseña en la ficha ---------- */
.acc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--linea);font-size:13px}
.acc-row .k{color:var(--gris);font-weight:600;flex-shrink:0}
.acc-row b{text-align:right;word-break:break-word}

/* ---------- v4.8: redes sociales ---------- */
.acr-redes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:520px){.acr-redes{grid-template-columns:repeat(4,1fr)}}
.acr-redes a{transition:transform .12s ease,box-shadow .15s ease}
.acr-redes a:active{transform:scale(.97)}
.acr-redes a:hover{box-shadow:0 6px 16px rgba(17,33,47,.16)}
.acr-redes-login .acr-redes{grid-template-columns:1fr 1fr}

/* ============================================================================
   v4.9 — LOGIN: SE PUEDE DESPLAZAR Y RESPIRA
   ============================================================================ */

/* --- EL ARREGLO IMPORTANTE ---------------------------------------------
   #login es position:fixed a pantalla completa y no tenía overflow: cuando la
   tarjeta era más alta que la ventana, lo de abajo quedaba inalcanzable.
   Con align-items:flex-start + margin:auto en la tarjeta, se centra cuando cabe
   y se desplaza cuando no. (align-items:center + overflow recorta la parte de
   arriba en todos los navegadores; por eso se hace así.) */
#login{
  align-items:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:18px 16px;
}
#login .login-card{ margin:auto; }

/* --- La tarjeta respira: menos alto, misma jerarquía --------------------- */
.login-card{ padding:24px 22px 20px; max-width:372px }
.login-card img{ width:88px;height:88px;margin-bottom:4px }
.login-card h1{ font-size:19px;letter-spacing:-.2px }
.login-card p.sub{ font-size:12px;margin-bottom:14px }
#accesoHint{ margin-bottom:14px !important }
.login-card .field{ margin-bottom:10px }
.login-card .field input{ padding:11px 12px }
.login-card .err{ min-height:0;margin-top:6px }
.login-card .err:empty{ display:none }

/* Acciones secundarias: agrupadas y más livianas que el botón de entrar */
.acr-sec{ margin-top:14px;padding-top:13px;border-top:1px solid var(--linea) }
.acr-sec .btn.ghost{ margin-top:0 !important;padding:11px 12px;font-size:13.5px }
.acr-sec .acr-link{
  display:block;width:100%;text-align:center;background:none;border:none;
  color:var(--gris);font-size:12.5px;font-weight:600;padding:9px 4px 2px;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-family:inherit;
}
.acr-sec .acr-link:hover{ color:var(--azul) }

/* Redes en el login: iconos compactos, no cuatro botones grandes */
.acr-redes-mini{ display:flex;gap:11px;justify-content:center;margin-top:9px }
.acr-redes-mini a{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;text-decoration:none;color:#fff;
  box-shadow:0 2px 9px rgba(17,33,47,.16);
  transition:transform .14s ease, box-shadow .16s ease;
}
.acr-redes-mini a:hover{ transform:translateY(-2px);box-shadow:0 6px 16px rgba(17,33,47,.22) }
.acr-redes-mini a:active{ transform:scale(.94) }
.acr-redes-mini .r-wa{ background:#25D366 }
.acr-redes-mini .r-fb{ background:#1877F2 }
.acr-redes-mini .r-ig{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF) }
.acr-redes-mini .r-ml{ background:#fff;color:var(--gris);border:1.5px solid var(--linea);box-shadow:none }
.acr-redes-mini .r-ml:hover{ color:var(--azul);border-color:var(--cyan) }
.acr-invita{ font-size:12.5px;color:var(--gris);text-align:center;margin-top:14px }

/* Pantallas bajas (portátiles de 13-14"): se encoge lo decorativo, no lo útil */
@media (max-height:760px){
  .login-card{ padding:18px 20px 16px }
  .login-card img{ width:62px;height:62px }
  .login-card h1{ font-size:17.5px }
  .login-card p.sub{ margin-bottom:11px }
  #accesoHint{ margin-bottom:11px !important }
  .acr-redes-mini a{ width:40px;height:40px;font-size:17px }
  .acr-sec{ margin-top:11px;padding-top:10px }
  .foot{ margin-top:8px }
}
@media (max-height:620px){
  .login-card img{ width:0;height:0;margin:0 }   /* el logo cede primero */
  .login-card{ padding:16px 18px 14px }
}

/* ---------- v5.0: apartado de mensajes ---------- */
.msg-prev{
  background:#f7fafd;border:1px solid var(--linea);border-radius:12px;
  padding:12px 13px;margin-top:11px;font-family:inherit;font-size:13px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;color:var(--tinta);
  max-height:270px;overflow:auto;
}
.msg-vars{display:grid;grid-template-columns:1fr;gap:5px}
@media(min-width:560px){.msg-vars{grid-template-columns:1fr 1fr}}
.msg-vars div{display:flex;align-items:baseline;gap:8px;font-size:12px}
.msg-vars code{
  background:var(--cyan-bg);color:var(--azul);border-radius:6px;
  padding:2px 7px;font-weight:700;font-size:11.5px;white-space:nowrap;flex-shrink:0;
}
.msg-vars span{color:var(--gris)}