/* luminous.css — refresco visual "luminoso",
   separado para poder activarlo/desactivarlo quitando su <link> en index.html.
   Al final: 3 correcciones de la auditoría. */

/* ==========================================================================
   POXTAL VISUAL REFRESH — LIGHT / LUMINOUS
   Solo CSS: no cambia la lógica, HTML ni JS de la aplicación.
   ========================================================================== */

/* Paleta de superficie más luminosa: conserva el violeta/amarillo de Poxtal
   pero evita que el violeta profundo domine toda la interfaz. */
/* v40.1: se quitaron de aquí --violet, --yellow, --ink, --paper, --line, etc.: pisaban la paleta
   oficial de styles.css (#6D5AFF) y dejaban dos violetas conviviendo. Solo queda la sombra. */
:root{
  --shadow-card:0 10px 28px rgba(73,42,126,.10),0 2px 8px rgba(30,20,45,.035);
}

/* Fondo general: aire + luz ambiental, no "pantalla violeta". */
body{
  background:
    #F8F7FB;
}
.frame{
  background:
    #FFFEFC;
}

/* Topbars más limpias y luminosas. */
.topbar,.sub-header{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid rgba(230,221,245,.72);
  box-shadow:0 4px 18px rgba(50,35,75,.045);
}
.toplogo,.sub-header h2{ color:var(--violet-deep); }

/* Botones de icono: blancos por defecto, con halo luminoso al tocar. */
.icon-btn,
.hamburger,
.back-arrow{
  color:var(--violet-deep) !important;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(230,221,245,.9);
  box-shadow:0 3px 12px rgba(72,43,120,.07);
  -webkit-tap-highlight-color:transparent;
}
.icon-btn svg,
.hamburger svg,
.back-arrow svg{
  color:currentColor !important;
  stroke:currentColor !important;
}
.icon-btn:active,
.hamburger:active,
.back-arrow:active{
  color:#fff !important;
  background:var(--violet);
  border-color:var(--violet);
  box-shadow:0 0 0 5px rgba(104,64,216,.14),0 0 22px rgba(104,64,216,.28);
  transform:scale(.95);
}

/* Hamburger: las tres líneas también se iluminan. */
.hamburger span{
  background:currentColor !important;
  transition:background .18s ease, box-shadow .18s ease;
}
.hamburger:active span{
  background:#fff !important;
  box-shadow:0 0 8px rgba(255,255,255,.75);
}

/* Navegación inferior: blanca, ligera y con estados claramente luminosos. */
.bottomnav{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(230,221,245,.82);
  box-shadow:0 -8px 28px rgba(54,35,88,.075),0 0 0 1px rgba(255,255,255,.7) inset;
  -webkit-backdrop-filter:blur(20px) saturate(1.18);
  backdrop-filter:blur(20px) saturate(1.18);
}
.navbtn{
  color:#8B8398 !important;
  -webkit-tap-highlight-color:transparent;
}
.navbtn span{
  transition:transform .2s cubic-bezier(.2,.8,.2,1),color .18s ease,filter .18s ease;
}
.navbtn svg{
  color:currentColor !important;
  stroke:currentColor !important;
}
.navbtn.active{
  color:var(--violet) !important;
  background:rgba(104,64,216,.075);
  box-shadow:0 0 0 1px rgba(104,64,216,.08) inset;
}
.navbtn.active svg{
  filter:drop-shadow(0 0 5px rgba(104,64,216,.30));
}
.navbtn:active{
  color:#fff !important;
}
.navbtn:active span{
  transform:scale(.9);
}
.navbtn:active svg{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.9));
}
.navbtn-center span{
  background:#FFE66A;
  color:var(--violet-deep);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 22px rgba(255,205,36,.28),0 0 0 5px rgba(255,216,61,.10);
}
.navbtn-center:active span{
  background:var(--violet);
  color:#fff;
  box-shadow:0 0 0 6px rgba(104,64,216,.16),0 0 24px rgba(104,64,216,.32);
}

/* Botones principales: amarillo luminoso sin exceso de contraste. */
.btn-primary{
  background:#FFD83D;
  color:var(--violet-deep);
  box-shadow:0 9px 22px rgba(255,210,40,.22),inset 0 1px 0 rgba(255,255,255,.75);
}
.btn-secondary{
  background:#fff;
  color:var(--violet);
  border-color:var(--line);
}

/* Tarjetas: más "papel premium", menos bloque morado. */
.card3,.choice-card,.card-option,.contact-card,.activity-box,
.stamp-rect-wrap,.passport-tile-icon,.modal-card,.sheet-card{
  border-color:rgba(230,221,245,.9);
  box-shadow:0 8px 24px rgba(62,39,98,.07),0 1px 3px rgba(30,20,45,.035);
}
.card3:hover,.choice-card:hover,.card-option:hover,.contact-card:hover,
.activity-box:hover,.passport-tile-icon:hover{
  border-color:rgba(104,64,216,.35);
  box-shadow:0 12px 30px rgba(76,47,130,.11);
}

/* Inputs: blancos y muy legibles. */
.field input,.casilla-field{
  background:#fff;
  border-color:#E5DDF1;
}
.field input:focus{
  border-color:var(--violet);
  box-shadow:0 0 0 4px rgba(104,64,216,.10),0 6px 18px rgba(73,42,126,.06);
}

/* Modales: overlay suave; el contenido permanece claro. */
.modal-backdrop,
.sheet-modal .backdrop{
  background:rgba(43,27,64,.30);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  backdrop-filter:blur(10px) saturate(1.08);
}
.modal-card,.sheet-card{
  background:rgba(255,255,255,.97);
}

/* Side menu: sigue siendo especial, pero deja de sentirse como una pantalla
   oscura. El amarillo funciona como luz y no como bloque. */
.sidemenu .panel{
  background:
    #7049DD;
  box-shadow:10px 0 40px rgba(48,27,83,.22);
}
.sidemenu .menu-profile{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.22);
}
.sidemenu .menu-item{
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.12);
}
.sidemenu .menu-item:hover,
.sidemenu .menu-item:active{
  background:rgba(255,255,255,.19);
}
.sidemenu .menu-item .ico{
  background:rgba(255,255,255,.12);
}
.sidemenu .menu-item .ico svg{
  color:#fff !important;
  stroke:#fff !important;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.28));
}

/* Todos los SVG interactivos ganan una micro-respuesta luminosa sin
   modificar sus dibujos ni la estructura. */
button svg,
[role="button"] svg,
.icon-btn svg,
.navbtn svg{
  transition:filter .18s ease,transform .18s ease;
}
button:active svg,
[role="button"]:active svg{
  filter:drop-shadow(0 0 7px rgba(255,255,255,.78));
}

/* Chips / estados seleccionados. */
.chip,.tab-btn-icon,.tab-btn,.album-pill{
  border-color:var(--line);
}
.tab-btn-icon.active,.tab-btn.active{
  background:var(--violet);
  color:#fff;
  border-color:var(--violet);
  box-shadow:0 7px 18px rgba(104,64,216,.20);
}

/* Sellos: sensación de objeto coleccionable luminoso. */
.stamps-strip-chip{
  background:#fff;
  border-color:#E2D7F5;
  box-shadow:0 7px 18px rgba(91,55,155,.09);
}
.estampilla-cell.filled{
  background:#7450E0;
  box-shadow:0 7px 16px rgba(104,64,216,.20);
}

/* Estados activos/available: glow suave en vez de parpadeo agresivo. */
.estampilla-cell.available{
  background:#FFF8D9;
  border-color:#F5C92D;
  box-shadow:0 0 0 3px rgba(255,216,61,.12),0 7px 18px rgba(238,190,28,.13);
}

/* Scrollbars más discretas. */
::-webkit-scrollbar-thumb{
  background:#B49BEA;
}
::-webkit-scrollbar-thumb:hover{background:var(--violet);}

/* Touch ergonomics + safe areas para iPhone/iPad. */
button,.icon-btn,.navbtn,.navbtn-center,.menu-item{
  touch-action:manipulation;
}
.bottomnav{
  padding-bottom:max(8px,env(safe-area-inset-bottom));
}
@supports(padding:max(0px)){
  .sheet-card{padding-bottom:max(26px,calc(18px + env(safe-area-inset-bottom)));}
}

/* No sacrificar accesibilidad por estética. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* Pantallas muy pequeñas: evita que los efectos aumenten el scroll horizontal. */
@media (max-width:360px){
  .bottomnav{gap:0;}
  .navbtn{font-size:9.5px;}
  .navbtn span{transform:scale(.94);}
  .hero-banner{padding:17px 16px 19px;}
}

/* ===== Correcciones de la auditoría =====
   1) .navbtn:active ponía texto blanco sobre fondo claro → el icono desaparecía al tocar.
   2) Gris del nav con contraste insuficiente (≈3.6:1) → ≥4.5:1.
   3) El hamburguesa, ahora con borde, quedaba cuadrado y con las líneas pegadas a la izquierda. */
.navbtn{ color:#6F6680 !important; }
.navbtn:active{ color:var(--violet) !important; background:rgba(104,64,216,.14); }
.navbtn:active svg{ filter:drop-shadow(0 0 6px rgba(104,64,216,.35)); }
.hamburger{ border-radius:50%; align-items:center; }