/* Cristal Beta — ajustes sobre styles.css para la app real (pantalla completa, inicio de sesión) */
html, body { height: 100%; background: var(--bg-grouped); }
body { overscroll-behavior-y: none; }

.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--bg-grouped); font-size: var(--fs-lg); }
.boot .brand-mark { width: 64px; height: 64px; border-radius: 18px; animation: breathe-mark 1.4s ease-in-out infinite; }
@keyframes breathe-mark { 50% { transform: scale(.92); opacity: .8; } }

/* El teléfono ocupa toda la pantalla del celular */
.phone.real { width: 100%; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; margin: 0 auto; }
.phone.real .app-top { padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.phone.real.home .app-body { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.phone.real .app-body { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.phone.real .tabbar { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
.phone.real .home-top { padding-right: 2px; }
@media (min-width: 700px) { .phone.real { max-width: 480px; box-shadow: var(--shadow-card); } }
.phone.real .toast { position: fixed; }

/* Panel a pantalla completa */
.web.real { max-width: none; min-height: 100vh; border-radius: 0; box-shadow: none; }
.web.real .web-nav { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
@media (max-width: 860px) { .web.real .web-nav { padding-top: calc(12px + env(safe-area-inset-top, 0px)); } }
.web-nav .foot { margin-top: auto; display: grid; gap: 6px; padding-top: 12px; }
@media (max-width: 860px) { .web-nav .foot { display: none; } }

/* Inicio de sesión */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(60% 50% at 20% 0%, var(--halo-1), transparent 70%), radial-gradient(50% 50% at 90% 20%, var(--halo-3), transparent 70%), var(--bg-grouped); }
.login .box { width: min(420px, 100%); display: flex; flex-direction: column; gap: 16px; }
.login .logo { display: flex; align-items: center; gap: 12px; }
.login .logo .brand-mark { width: 52px; height: 52px; border-radius: 16px; }
.login .logo strong { font-size: var(--fs-xl); letter-spacing: -.03em; }
.login .code { font-family: var(--mono); font-size: 1.6rem; letter-spacing: .4em; text-align: center; }
.install { display: flex; gap: 12px; align-items: center; }

/* Fotos privadas mientras cargan */
img[data-path]:not([src]) { background: linear-gradient(135deg, var(--soft-slate), var(--soft-sky)); }
.thumb-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; display: block; }
.toast { position: fixed; }
/* En el celular el menú del panel no muestra el pie: botón para regresar a la app */
.web-nav .m-only { display: none; }
@media (max-width: 860px) { .web-nav .m-only { display: flex; } }