:root{
  --navy:#0b2545;
  --navy-light:#13315c;
  --navy-deep:#071a33;
  --gold:#c9a227;
  --gold-light:#e3c45a;
  --gold-dim:#a8851a;
  --cream:#f6f2e8;
  --ink:#0b2545;
  --muted:#6b7a90;
  --border:#ece6d8;
  /* Gama de acento ampliada (uso en gráficos, categorías, estados) */
  --teal:#1f8a76;
  --teal-light:#4fb3a0;
  --coral:#c96a4e;
  --coral-light:#e08b6c;
  --blue-accent:#3f6fa8;
  --blue-accent-light:#6f97c9;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Manrope',sans-serif;background:var(--navy-deep);-webkit-font-smoothing:antialiased;}
.phone{
  width:340px;
  margin:24px auto;
  background:var(--cream);
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
/* En un móvil real (no en el "marco" de escritorio) la app debe ocupar
   toda la pantalla, sin margen, esquinas ni sombra: por eso el .phone de
   340px de ancho fijo se sustituye por 100% + alto completo por debajo
   de este ancho de viewport. */
@media (max-width:480px){
  .phone{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    margin:0;
    border-radius:0;
    box-shadow:none;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
}
/* Red de seguridad: si el navegador ignora el viewport declarado (por
   ejemplo, con "Sitio de escritorio" activado, algo habitual en
   navegadores Android tipo Xiaomi/Mi Browser) y renderiza la página como
   si fuera ancha, "max-width" de arriba no se activa porque para el
   navegador la pantalla "no es estrecha". "max-device-width" mira el
   ancho físico real del aparato en vez del viewport que el navegador dice
   estar usando, así que sirve de respaldo en ese caso. */
@media (max-device-width:480px){
  .phone{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    margin:0;
    border-radius:0;
    box-shadow:none;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
}
/* Área de impresión: se mantiene oculta en pantalla y solo se muestra al
   imprimir, ocultando el resto de la app. En iOS Safari, imprimir el
   contenido de un iframe no funciona de forma fiable (sale en blanco), así
   que se imprime directamente sobre el documento principal. */
#bv-print-area{
  display:none;
  background:#fff;
  color:#0b2545;
}
@media print{
  /* Sin esto, el fondo azul marino oscuro del body (que no está oculto,
     solo sus hijos) se imprime detrás/alrededor del listado, gastando
     tinta y saliendo negro en el resto de la hoja. */
  html, body{background:#fff !important;}
  /* Técnica estándar "imprimir solo este elemento": se oculta todo con
     visibility (no con display, que a veces da problemas de renderizado
     en el motor de impresión de iOS) y se vuelve a mostrar solo el área
     de impresión y su contenido, sacándola a la esquina de la página. */
  body *{visibility:hidden !important;}
  #bv-print-area, #bv-print-area *{visibility:visible !important;}
  #bv-print-area{
    display:block !important;
    position:absolute !important;
    left:0;
    top:0;
    width:100%;
  }
}
.header{
  background:var(--navy);
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.header .badge{
  width:34px;height:34px;border-radius:50%;
  background:var(--navy-light);
  box-shadow:0 0 0 1.5px var(--gold);
  overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.header .badge img{width:100%;height:100%;object-fit:cover;}
.header .title{font-size:16px;font-weight:600;color:var(--cream);font-family:'Spectral',serif;}
.header .subtitle{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);}

.session-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#eef1f5;padding:8px 16px;
  font-family:'Helvetica Neue', Arial, sans-serif;
  border-bottom:1px solid rgba(11,37,69,0.08);
}
.session-bar .session-info{
  font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.session-bar .session-info b{color:var(--navy);}
.session-bar button{
  font-size:11.5px;color:var(--navy);background:transparent;border:1px solid rgba(11,37,69,0.2);
  border-radius:12px;padding:5px 11px;cursor:pointer;flex:none;white-space:nowrap;
}
.session-bar button:hover{background:#fff;}
.content{padding:18px 18px 22px;}

/* Título principal de cada pantalla (arriba del todo, tras "Volver al
   panel"). Distinto de .section-label, que se sigue usando para los
   subtítulos internos de cada pantalla — así el refuerzo visual solo se
   aplica a "en qué pantalla estoy", sin sobrecargar el resto. */
.screen-title{
  font-size:22px;font-weight:800;text-decoration:underline;
  text-decoration-color:var(--gold);text-decoration-thickness:2px;
  text-underline-offset:4px;
  color:var(--navy);margin:0 0 14px;
  font-family:'Spectral',serif;
}

.section-label{
  font-size:18px;letter-spacing:.2px;text-transform:none;
  color:var(--navy);font-weight:700;margin:22px 0 12px;
  font-family:'Spectral',serif;
  display:flex;align-items:center;gap:8px;
}
.section-label::before{
  content:'';width:5px;height:16px;border-radius:3px;
  background:var(--gold);flex:none;
}
.section-label:first-child{margin-top:0;}
input[type=text], input[type=date], input[type=number], input[type=password], select{
  width:100%;background:#fff;border:1px solid var(--border);
  border-radius:10px;padding:11px 12px;font-size:14.5px;color:var(--ink);
  font-family:'Manrope',sans-serif;
}
button{
  font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:700;
  border-radius:10px;border:1px solid var(--border);background:#fff;
  color:var(--ink);padding:10px 14px;cursor:pointer;
}
button:active{transform:scale(.97);}
.footer-mail{
  border-top:1px solid var(--border);padding-top:14px;margin-top:18px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--muted);
}
.nav-dots{display:flex;justify-content:center;align-items:center;gap:7px;padding:10px 0 18px;flex-wrap:wrap;}
.nav-dots a{display:block;text-decoration:none;}
.nav-dots a span{
  width:25px;height:25px;border-radius:50%;
  background:#fff;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;color:var(--muted);
  font-family:'Helvetica Neue', Arial, sans-serif;
}
.nav-dots a span.active{
  background:var(--navy);border-color:var(--navy);color:var(--gold-light);
}

/* Barra de navegación superior: dos filas fijas de 5 botones rectangulares
   que ocupan todo el ancho disponible + etiqueta "NAVEGA POR LA APP" */
.nav-dots-top{
  display:flex;flex-direction:column;align-items:stretch;gap:7px;
  padding:12px 14px 8px;
  background:#eef1f5;border-bottom:1px solid rgba(11,37,69,0.08);
}
.nav-dots-row{display:flex;justify-content:center;align-items:stretch;gap:7px;}
.nav-dots-top a{display:block;text-decoration:none;flex:1;}
.nav-dots-top a span{
  width:100%;height:42px;border-radius:10px;
  background:#fff;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:var(--muted);
  font-family:'Helvetica Neue', Arial, sans-serif;
}
.nav-dots-top a span.active{
  background:var(--navy);border-color:var(--navy);color:var(--gold-light);
}
.nav-dots-top .nav-dots-label{
  text-align:center;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:2px;
}

.brand-footer{
  background:var(--navy);padding:20px 18px 16px;text-align:center;
}
/* Bloque superior: María (la app), protagonista */
.brand-footer .app-block img{width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 1.5px var(--gold);margin-bottom:8px;}
.brand-footer .app-block .app-name{font-size:16px;font-weight:700;color:var(--cream);font-family:'Spectral',serif;letter-spacing:.3px;}
.brand-footer .app-block .tagline{font-size:12px;color:var(--gold-light);font-family:'Spectral',serif;font-style:italic;margin:3px 0 0;}
/* Separador */
.brand-footer .footer-divider{width:44px;height:1px;background:rgba(246,242,232,.18);margin:16px auto;}
/* Bloque inferior: BotVal, desarrollador, discreto */
.brand-footer .dev-block{display:flex;flex-direction:column;align-items:center;gap:6px;}
.brand-footer .dev-block .dev-label{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:rgba(246,242,232,.55);}
.brand-footer .dev-block img{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 1px rgba(201,162,39,.6);}
.brand-footer .dev-block .dev-name{font-size:11px;color:rgba(246,242,232,.75);}
.brand-footer a.web-link{display:inline-block;font-size:11px;color:var(--cream);text-decoration:none;border:1px solid rgba(246,242,232,.3);border-radius:20px;padding:4px 13px;margin-top:2px;}

/* Botón flotante "Instalar María" */
#install-app-btn{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:7px;
  background:var(--navy);color:var(--gold-light);border:1px solid var(--gold);
  border-radius:24px;padding:10px 18px;font-size:13px;font-weight:700;
  box-shadow:0 4px 16px rgba(7,26,51,.35);
  animation:install-btn-in .3s ease;
}
#install-app-btn:active{transform:translateX(-50%) scale(.96);}
@keyframes install-btn-in{from{opacity:0;transform:translateX(-50%) translateY(12px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

/* Modal de instrucciones (iOS / fallback manual) */
#install-app-modal{
  display:none;position:fixed;inset:0;background:rgba(7,26,51,.6);
  z-index:70;align-items:center;justify-content:center;padding:20px;
}
#install-app-modal .install-modal-box{
  background:var(--navy);border:1px solid var(--gold);border-radius:16px;
  max-width:340px;width:100%;padding:22px 20px;text-align:center;color:var(--cream);
}
#install-app-modal .install-modal-box h3{
  font-family:'Spectral',serif;color:var(--gold-light);font-size:17px;margin:0 0 12px;
}
#install-app-modal .install-modal-box ol{
  text-align:left;font-size:13px;line-height:1.6;color:var(--cream);
  margin:0 0 16px;padding-left:20px;
}
#install-app-modal .install-modal-box .install-icon-hint{font-size:20px;}
#install-app-modal .install-modal-box button{
  background:var(--gold);border-color:var(--gold);color:var(--navy-deep);
  width:100%;padding:11px;font-size:13.5px;
}
.brand-footer a.web-link:hover{background:rgba(246,242,232,.08);}