/* Tipografía: Geist Mono es un mono real y con carácter (no un fallback
   genérico) — encaja directo con el mono ya elegido para la app y suma
   mucha personalidad sin tocar tamaños ni layout. */
html, body, .frame, .frame *{
  font-family:'Geist Mono',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif !important;
}

/* Mejoras aditivas — no redefinen nada de styles.css, solo lo complementan.
   Objetivo: que la app se vea "de ahora" (vidrio, degradados suaves,
   animaciones con propósito) sin tocar ninguna clase base ni estructura. */

/* Foco visible al navegar con teclado (no afecta el clic/touch normal) */
:focus-visible {
  outline: 2.5px solid var(--yellow, #FFC93C);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255,201,60,0.18);
  border-radius: 6px;
}

/* Scrollbar violeta/amarillo en vez del gris del sistema */
::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background: var(--violet);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{ background: var(--yellow); }

/* Selección de texto con los colores de la app */
::selection{ background: var(--yellow); color: var(--violet-deep); }
::-moz-selection{ background: var(--yellow); color: var(--violet-deep); }

/* ===== Vidrio: modales y hojas inferiores con blur real detrás ===== */
.modal-backdrop{ backdrop-filter: blur(6px) saturate(1.15); -webkit-backdrop-filter: blur(6px) saturate(1.15); }
.sheet-modal .backdrop{ backdrop-filter: blur(6px) saturate(1.15); -webkit-backdrop-filter: blur(6px) saturate(1.15); }
.modal-card, .sheet-card{
  box-shadow: 0 24px 64px rgba(30,16,51,0.22), 0 0 0 1px rgba(255,255,255,0.6) inset;
}

/* ===== Botones: degradado sutil + brillo al pasar el mouse/tocar ===== */
.btn-primary, .navbtn-center span{
  background: var(--yellow);
  box-shadow: 0 10px 24px rgba(255,212,0,0.38), inset 0 1px 0 rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.btn-primary:active{ transform: translateY(1px) scale(0.99); }
.btn-primary::after{
  content:'';
  position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background: none; display:none;
  transition: left .55s ease;
  pointer-events: none;
}
.btn-primary:hover::after{ left:130%; }

.btn-secondary{ transition: all .22s ease; }
.btn-secondary:hover{ border-color: var(--violet); background: var(--violet-soft); }

/* ===== Tarjetas: sombra más suave y elevación al interactuar ===== */
.stamp-rect, .stamp-rect-wrap, .contact-card, .modal-card, .choice-card, .card-option, .notif-body, .activity-box{
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
/* .card3 queda afuera de este "apachurrado" al tocar: cuando vive dentro de una fila
   que se desliza horizontalmente (el álbum), el dedo arrastrando activa :active sobre
   la foto que va tocando en el camino, y esa foto se encoge en pleno scroll — se veía
   como si las fotos "cambiaran de tamaño" al moverse. Sin este efecto en .card3, el
   scroll queda limpio; el resto de las tarjetas (que no viven en filas de scroll) lo
   conservan. */
.stamp-rect:active, .choice-card:active, .card-option:active{
  transform: scale(0.97);
}
.icon-btn{ transition: all .2s ease; }
.icon-btn:hover{ border-color: var(--violet); box-shadow: 0 4px 12px rgba(109,90,255,0.18); }

/* ===== Nav inferior: sombra más rica, ítem activo con más presencia ===== */
.bottomnav{ box-shadow: 0 12px 32px rgba(30,27,46,0.22), 0 0 0 1px rgba(255,255,255,0.5) inset; }
.navbtn{ transition: color .2s ease, background .2s ease; }
.navbtn.active{ box-shadow: inset 0 0 0 1.5px rgba(94,42,209,0.12); }
.navbtn-center span{ transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.navbtn-center:active span{ transform: scale(0.9); }

/* ===== Sello sobre la foto y sellos in situ: leve brillo, sensación "premium" ===== */
.flip-face{ transition: box-shadow .3s ease; }
.back-item{ transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.back-item:active{ transform: scale(0.92); }

/* ===== Chips y pills de estado (Recibidas/Enviadas, filtros de mapa) ===== */
.chip, .album-pill, .tab-btn, .tab-btn-icon{ transition: all .22s ease; }
.tab-btn-icon.active{ box-shadow: 0 6px 16px rgba(109,90,255,0.28); }

/* ===== Inputs: foco más marcado, coherente con el resto ===== */
.field input, .casilla-field{ transition: border-color .2s ease, box-shadow .2s ease; }
.field input:focus{ box-shadow: 0 0 0 4px rgba(94,42,209,0.12); }

/* ===== Toast y banner: vidrio + sombra profunda ===== */
.toast{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
#unlockBanner{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ===== Entrada suave para lo que aparece de golpe en pantalla (modales) ===== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes poxtalPopIn{
    from{ opacity:0; transform: translateY(10px) scale(0.98); }
    to{ opacity:1; transform: translateY(0) scale(1); }
  }
  .modal-backdrop.open .modal-card{ animation: poxtalPopIn .28s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes poxtalSlideUp{
    from{ transform: translateY(24px); opacity:0.6; }
    to{ transform: translateY(0); opacity:1; }
  }
  .sheet-modal.open .sheet-card{ animation: poxtalSlideUp .3s cubic-bezier(.2,.8,.2,1) both; }
}

/* ===== Banner de bienvenida real en Inicio (nombre, fecha, estado) ===== */
.hero-banner{
  border-radius:var(--radius-card);
  padding:20px 20px 22px;
  margin-bottom:14px;
  background:
    var(--violet-deep);
  color:#fff;
  box-shadow: 0 18px 40px rgba(109,90,255,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
  position:relative;
  overflow:hidden;
}
/* v36: es un <button> real (antes decorativo) — se resetean los estilos nativos del navegador,
   sin tocar el aspecto ya definido (fondo, borde, radio) */
.hero-banner-tag{
  display:inline-block;
  font: inherit; -webkit-appearance:none; appearance:none; cursor:pointer;
  color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:0.3px;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:999px;
  padding:4px 11px;
  margin-bottom:10px;
}
.hero-banner-tag:active{ background:rgba(255,255,255,0.28); }
.hero-banner-title{ font-size:22px; font-weight:800; letter-spacing:-0.02em; line-height:1.15; }
.hero-banner-title b{ color:var(--yellow-300,#fde047); font-weight:800; }
.hero-banner-sub{ font-size:12px; opacity:0.85; margin-top:6px; }
.hero-banner-cta{
  margin-top:14px;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.28);
  color:#fff;
  font-size:12px; font-weight:700;
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.hero-banner-cta:hover{ background:rgba(255,255,255,0.26); }
.hero-banner-cta:active{ transform:scale(0.96); }

/* ===== Franja horizontal de sellos reales en Inicio ===== */
.stamps-strip{ margin-bottom:16px; }
.stamps-strip-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.stamps-strip-head span{ font-size:11px; font-weight:700; color:#5c5470; letter-spacing:0.3px; }
.stamps-strip-head b{ font-size:11px; color:var(--violet); }
.stamps-strip-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.stamps-strip-row::-webkit-scrollbar{ display:none; }
.stamps-strip-chip{
  flex-shrink:0; width:60px; height:60px; border-radius:16px;
  background: var(--violet-soft);
  border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  box-shadow: 0 6px 14px rgba(109,90,255,0.12);
  cursor:pointer;
}

/* ===== Menú lateral: mismo tratamiento de vidrio/degradado que el resto ===== */
/* ===== Menú lateral: tarjeta de perfil viva + ítems tipo "pill" =====
   Antes era un panel blanco con una lista de texto. Ahora sigue el mismo
   lenguaje que el resto: degradado violeta, vidrio, y cada ítem como una
   pastilla que se ilumina al tocarla. */
.sidemenu .backdrop{ background:rgba(20,8,45,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.sidemenu .panel{
  background:
    var(--violet);
  color:#fff;
  border-right:1px solid rgba(255,255,255,0.14);
  box-shadow:12px 0 44px rgba(30,27,46,0.4);
}
.sidemenu .menu-profile{
  background:rgba(255,255,255,0.20);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:20px;
  padding:16px 16px 18px;
  margin-bottom:22px;
  box-shadow:0 10px 26px rgba(20,8,45,0.32), inset 0 1px 0 rgba(255,255,255,0.25);
  position:relative;
  overflow:hidden;
}
.sidemenu .menu-profile::after{
  content:'';
  position:absolute; right:-28px; top:-28px;
  width:90px; height:90px; border-radius:50%;
  background:none;
  pointer-events:none;
}
.sidemenu .menu-profile .avatar{
  background:var(--yellow);
  color:var(--violet-deep) !important;
  box-shadow:0 6px 16px rgba(255,212,0,0.42);
  border:2px solid rgba(255,255,255,0.4);
}
.sidemenu .menu-profile .avatar svg{ color:var(--violet-deep) !important; }
.sidemenu .menu-profile b{ color:#fff; font-size:16px; letter-spacing:-0.01em; }
.sidemenu .menu-item{
  border-bottom:none;
  color:#fff;
  border-radius:14px;
  padding:13px 14px;
  margin-bottom:6px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  transition: background .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.sidemenu .menu-item:hover{
  background:rgba(255,255,255,0.16);
  transform:translateX(4px);
  box-shadow:0 6px 18px rgba(20,8,45,0.3);
}
.sidemenu .menu-item:active{ transform:scale(0.98); }
.sidemenu .menu-item .ico{
  width:32px; height:32px; border-radius:10px;
  background:rgba(255,212,0,0.18);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sidemenu .menu-item .ico svg{ color:var(--yellow) !important; }

/* ===== Postales ilustradas (sello vintage) y tarjetas de contacto: más profundidad ===== */
.stamp-rect-wrap{ filter: drop-shadow(0 6px 14px rgba(109,90,255,0.16)); transition: filter .25s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
.stamp-rect-wrap:hover{ filter: drop-shadow(0 10px 22px rgba(109,90,255,0.24)); transform: translateY(-2px); }
.contact-card{ box-shadow: 0 6px 18px rgba(30,16,51,0.06); }
.contact-card:hover{ border-color: var(--violet); box-shadow: 0 10px 26px rgba(109,90,255,0.14); }

/* ===== Actividad y feeds: tarjeta con más presencia, menos "lista plana" ===== */
.activity-box{ box-shadow: 0 4px 14px rgba(30,16,51,0.05); border-color: var(--line); }
.activity-box:hover{ border-color: var(--violet); box-shadow: 0 8px 20px rgba(109,90,255,0.12); }
.activity-box .timeline-thumb{ box-shadow: inset 0 0 0 1px rgba(109,90,255,0.08); }

/* ===== Portada del pasaporte: los 5 accesos (Recuerdos/Mapa/Sellos/Postales/Estampillas) ===== */
.passport-tile-icon{
  background: var(--violet-soft);
  border: 1.5px solid var(--line);
  box-shadow: 0 6px 16px rgba(109,90,255,0.10);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.passport-tile-icon:active{ transform: scale(0.94); }
#passportCover > div:first-child{
  box-shadow: 0 20px 48px rgba(30,27,46,0.22);
}

/* ===== Sellos circulares del mapa/pasaporte, casillas de estampillas, chips de filtro ===== */

.estampilla-cell.filled{ box-shadow: 0 6px 14px rgba(109,90,255,0.22); }
.chip{ box-shadow: 0 4px 12px rgba(30,16,51,0.08); }
.chip.active{ background:var(--violet); color:#fff; border-color:var(--violet); }
.pin{ box-shadow: 0 6px 14px rgba(0,0,0,0.28); }

/* ===== Tarjetas (saludo/cumpleaños/etc.), fila de config, avatar de perfil ===== */
.card-option{ box-shadow: 0 4px 14px rgba(30,16,51,0.05); }
.card-option:hover{ border-color: var(--violet); box-shadow: 0 8px 20px rgba(109,90,255,0.12); }
.profile-photo{ box-shadow: 0 10px 24px rgba(109,90,255,0.18); }
.setting-row{ transition: background .18s ease; }
.setting-row:hover{ background: var(--violet-soft); }
.notif-body{ box-shadow: 0 4px 12px rgba(30,16,51,0.05); transition: box-shadow .2s ease, border-color .2s ease; }
.notif-body:hover{ border-color: var(--violet); box-shadow: 0 8px 18px rgba(109,90,255,0.1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   LIGEREZA EDITORIAL — más aire entre bloques, menos "todo grita a la
   vez". La idea: Poxtal es un rincón íntimo para guardar tu día, no un
   feed que compite por atención — la foto principal es la protagonista,
   todo lo demás acompaña en voz baja.
   ===================================================================== */
.home-content{ padding:10px 18px 26px; }
.home-content > *{ margin-bottom:0; }
#homeHeroBanner{ margin-bottom:16px; }
#homeStampsStrip{ margin-bottom:18px; }
.stamps-strip-chip{ width:52px; height:52px; border-radius:14px; font-size:18px; }
.stamps-strip-head span{ font-weight:500; letter-spacing:0.6px; text-transform:uppercase; font-size:10px; }

.flip-wrap{ margin-bottom:22px !important; }
.flip-face{ box-shadow:0 22px 48px rgba(30,27,46,0.24), 0 2px 10px rgba(30,27,46,0.12) !important; }

/* Bloques secundarios (actividad, notificaciones): menos borde, más
   silencio visual, para que no compitan con la foto de arriba. */
.activity-box, .notif-body{
  border-color:transparent !important;
  box-shadow:0 3px 12px rgba(30,16,51,0.05) !important;
}
.activity-box:hover{ box-shadow:0 6px 18px rgba(109,90,255,0.1) !important; }

/* Encabezados de sección como separadores discretos, no títulos que gritan */
#screen-home .home-content div[style*="font-weight:700"][style*="color:var(--violet)"]{
  font-weight:600 !important;
  letter-spacing:0.4px;
  text-transform:uppercase;
  font-size:10.5px !important;
  opacity:0.75;
}
.album-pill{ font-weight:500; letter-spacing:0.2px; }

/* ===== Entrada de pantalla más fluida (propuesta de mejora visual) =====
   Cada pantalla aparece con un fundido + leve acercamiento en vez de aparecer
   de golpe — la app se siente menos "clic y salto", más "deslizar y llegar". */
@media (prefers-reduced-motion: no-preference){
  .screen.active{ animation: pxScreenIn .38s cubic-bezier(.22,.8,.24,1) both; }
  @keyframes pxScreenIn{
    from{ opacity:0; transform:translateY(8px) scale(0.992); filter:blur(2px); }
    to{ opacity:1; transform:none; filter:none; }
  }
}

/* Cualquier botón o ítem de navegación reacciona igual: un poquito de
   elevación al pasar el dedo/mouse, un poquito de achique al tocar. */
.navbtn, .menu-item, button{
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.navbtn:hover, .menu-item:hover, button:hover{ transform: translateY(-1px); filter: saturate(1.05); }
button:active{ transform: translateY(0) scale(0.98); }

/* Sello de la pantalla de bienvenida: más presencia, con una pequeña
   animación al pasar de "cargando" a "Comenzar" en vez de un cambio brusco. */
#splashStamp.morphed{ animation: pxSplashMorph .7s cubic-bezier(.2,.85,.2,1) both; }
@keyframes pxSplashMorph{
  0%{ transform:scale(0.96); filter:brightness(0.85) saturate(0.9); }
  55%{ transform:scale(1.02); filter:brightness(1.05) saturate(1.12); }
  100%{ transform:scale(1); filter:none; }
}

/* El grupo de Notificaciones ahora incluye el botón real de activarlas
   adentro del panel (antes quedaba afuera, como si fuera otra cosa) — con
   el tope de alto genérico de 260px se recortaba. */
#set-notif.open .setting-panel{ max-height:340px; }

/* Idioma tenía el panel con un alto fijo pegado directo en el HTML (260px,
   con scroll propio) — eso le ganaba a la clase que abre/cierra el grupo,
   así que quedaba SIEMPRE abierto, tocaras donde tocaras. Con 17 idiomas en
   la lista, sigue necesitando su propio scroll interno cuando se abre, pero
   ahora si respeta el abrir/cerrar como el resto. */
#set-idioma.open .setting-panel{ max-height:230px; overflow-y:auto; }

/* ===== v29: cuenta real = sin contenido demo =====
   La clase la pone un script al inicio de <head> (si hay sesión) y app.js al entrar/salir. */
html.real-account [data-demo]{ display:none !important; }

/* ===== v31: notificaciones ===== */
.notif-row[onclick]:active{ background:var(--violet-soft); }