/* Piezas propias de la app: pantalla de entrada, botón Actualizar y barra del celular. */
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body)}
.pantalla{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 16px;box-sizing:border-box;background:#111e33;color:#f2f5fa;text-align:center}
.pantalla img{border-radius:20px}
.pantalla h1{font:700 30px var(--f-display);letter-spacing:.18em;margin:6px 0 0}
.pantalla p{margin:0;color:#b4bfd0;font-size:16px;max-width:30em}
.pantalla .nota{font-size:13px;margin-top:4px}
.entrar{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font:600 16px var(--f-body);color:#111e33;background:#fff;border:0;border-radius:6px;padding:12px 20px;min-height:48px;cursor:pointer}
.entrar svg{width:20px;height:20px}
.entrar:focus-visible{outline:3px solid #C4D82E;outline-offset:3px}
.mdl-acc{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.mdl-acc > a{margin-left:0!important}
button.mdl-upd{display:inline-flex;align-items:center;gap:7px;font:600 14px var(--f-body);color:#f2f5fa;background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:4px;padding:6px 12px;cursor:pointer;white-space:nowrap;line-height:1.3}
button.mdl-upd:hover{border-color:#C4D82E}
button.mdl-upd:focus-visible{outline:2px solid #C4D82E;outline-offset:2px}
.mdl-upd svg{width:15px;height:15px;color:#C4D82E;flex:none}
.mdl-upd small{font:500 11.5px var(--f-mono);color:#b4bfd0}
.mdl-upd.girando svg{animation:mdl-gira .8s linear infinite}
@keyframes mdl-gira{to{transform:rotate(360deg)}}
@media (max-width:520px){.mdl-upd small{display:none}}
@media (prefers-reduced-motion:reduce){.mdl-upd.girando svg{animation:none}}
.mdl-salir{font:600 13px var(--f-body);color:#b4bfd0;background:none;border:0;padding:6px 4px;cursor:pointer;text-decoration:underline}
.mdl-nav{display:none}
@media (max-width:720px){
.mdl-nav:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#111e33;border-top:1px solid rgba(255,255,255,.12);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-around}
.mdl-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;min-height:44px;color:#b4bfd0;text-decoration:none;font:600 11px var(--f-body);border-radius:6px}
.mdl-nav a svg{width:22px;height:22px}
.mdl-nav a[aria-current=page]{color:#fff}
.mdl-nav a[aria-current=page] svg{color:#C4D82E}
#app{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
/* Arriba en el iPhone instalado (barra de estado translúcida) */
@supports (padding:env(safe-area-inset-top)){ #app .band{padding-top:env(safe-area-inset-top)} }
.mdl-drive{display:inline-flex;align-items:center;margin:8px 0 0;font:600 14px var(--f-body,sans-serif);color:#fff;background:#2E6DB4;border:0;border-radius:4px;padding:8px 14px;min-height:40px;cursor:pointer}
.mdl-drive:focus-visible{outline:2px solid #C4D82E;outline-offset:2px}