/* ============================================================
   Que las barras (cabecera de arriba y menú de abajo) no se confundan con la pantalla.
   · La PANTALLA pasa a un blanco cálido (--cream se redefine para toda la app).
   · Las BARRAS (cabecera y menú inferior) llevan un crema algo más oscuro y una línea que las separa.
   ============================================================ */
html:root {
  --cream: #fefcf8;
  --barras: #f3ecdd;
}
header.top {
  background: var(--barras);
  border-bottom: 1px solid var(--line, #e3d9c4);
}
.nav-inferior {
  background: var(--barras) !important;
  border-top: 1px solid var(--line, #e3d9c4) !important;
}
.nav-inferior .nav-badge {
  border-color: var(--barras) !important;
}
/* 21/10/2026: el aviso de mensaje nuevo, que se vea: punto rojo más grande con un latido suave y el nombre en rojo */
.nav-inferior .nav-icon-wrap { position: relative; }
.nav-inferior .nav-badge {
  position: absolute !important; top: -4px !important; right: -7px !important;
  width: 13px !important; height: 13px !important; border-radius: 50% !important;
  background: #c0392b !important; border: 2px solid var(--barras) !important;
  box-shadow: 0 0 0 0 rgba(192,57,43,.55); animation: aglowLatido 1.8s ease-out infinite;
}
.nav-inferior a:has(.nav-badge) { color: #a3301f !important; font-weight: 600; }
@keyframes aglowLatido { 0% { box-shadow: 0 0 0 0 rgba(192,57,43,.55); } 70% { box-shadow: 0 0 0 9px rgba(192,57,43,0); } 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); } }
@media (prefers-reduced-motion: reduce) { .nav-inferior .nav-badge { animation: none; } }

/* ---- Barra superior fija (junto con barra-fija.js) ---- */
header.top.barra-fija {
  position: sticky !important;
  top: 0;
  z-index: 45;
  padding-top: 16px;
  padding-bottom: 14px;
}
/* html/body con overflow-x:hidden impiden que "sticky" funcione; "clip" recorta igual sin ese problema. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip !important; }
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: visible !important; }
}

/* Al pasar de una pantalla a otra: fundido suave en vez de ver un instante la pantalla anterior (16/10/2026) */
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;}

/* ---- Ordenador (17/10/2026): las pantallas pensadas para el móvil se ven como una columna centrada,
   con el mismo formato que en el móvil, en vez de estirarse a todo el ancho. ---- */
@media (min-width: 760px) {
  html.marco-movil, html.marco-movil body { background: #ece4d6 !important; }
  html.marco-movil .app-shell {
    max-width: 560px !important; margin-left: auto !important; margin-right: auto !important;
    box-shadow: 0 0 0 1px #e3d9c4, 0 24px 70px rgba(40, 30, 20, .10);
    background: var(--cream);
  }
  html.marco-movil .nav-inferior {
    left: 0 !important; right: 0 !important; width: auto !important; max-width: 560px !important;
    margin-left: auto !important; margin-right: auto !important; transform: none !important;
  }
}

/* ---- Pantalla «aún no lo tienes» (17/10/2026): igual en toda la app, nunca un aviso rojo ---- */
.aglow-cerrado{max-width:460px;margin:28px auto;padding:28px 22px;text-align:center;background:#fffdf8;border:1px solid var(--line,#e5dccb);border-radius:22px;font-family:'Cormorant Garamond',Georgia,serif;}
.aglow-cerrado .ac-ico{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;background:#1a1614;color:#e6cf98;display:flex;align-items:center;justify-content:center;font-size:22px;}
.aglow-cerrado h2{font-weight:500;font-size:28px;margin:0 0 8px;line-height:1.15;color:#1a1614;}
.aglow-cerrado h2 i{color:#a07a3e;}
.aglow-cerrado p{font-size:17px;color:var(--ink-soft,#6b5c4a);margin:0 0 20px;line-height:1.45;}
.aglow-cerrado .ac-btn{display:block;background:#1a1614;color:#f6f1e7 !important;text-decoration:none !important;border-radius:30px;padding:13px;font-size:17px;margin-bottom:10px;font-family:inherit;letter-spacing:0;}
.aglow-cerrado .ac-sec{display:block;color:#1a1614;font-size:16px;text-decoration:underline;padding:6px;}
html.pg-cerrada .app-shell > .wrap > *:not(header):not(#msg):not(script):not(style){display:none !important;}