/* =====================================================================
   POXTAL v41 · REDISEÑO COMPLETO
   Estilo: red social limpia (tipo Facebook) + calidez y color (tipo Bumble)
   Colores: violeta + amarillo y sus tonos hermanos.
   Esta hoja se carga la ÚLTIMA y manda sobre las demás.
   ===================================================================== */
:root{
  --px-font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Violetas */
  --violet:#7B2FFF;
  --violet-deep:#2B1D63;
  --violet-soft:#EFE6FF;
  --violet-faint:#F7F5FF;
  --px-violet-2:#9A66FF;
  --px-violet-3:#C9BEFF;
  /* Amarillos (miel / mantequilla) */
  --yellow:#FFC933;
  --yellow-soft:#FFF4CC;
  --px-yellow-deep:#F2A900;
  /* Fondos y tinta */
  --paper:#F4F1FC;
  --ink:#241A4A;
  --ink-soft:#6A6188;
  --ink-faint:#9A93B5;
  --line:#E6E0F7;
  --px-card:#FFFFFF;
  --px-radius:20px;
  --px-shadow:0 1px 2px rgba(43,29,99,.06),0 6px 18px rgba(43,29,99,.07);
  --px-shadow-lg:0 10px 30px rgba(43,29,99,.16);
  --card-grad:#fff;
  --card-grad-active:#F7F5FF;
  --radius-card:22px;
}

/* ---------- 1. Letra: una sola, redonda y amable, en toda la app ---------- */
body,button,input,select,textarea,
body *:not(svg):not(svg *):not(code):not(pre):not(.leaflet-container *){
  font-family:var(--px-font) !important;
}
body{color:var(--ink);letter-spacing:0;background:#F4F1FC;}
b,strong{font-weight:700;}

/* ---------- 2. Halos armónicos en todas las páginas ---------- */
.screen{
  background:
    #F4F1FC !important;
}

/* ---------- 3. Barra superior (estilo red social) ---------- */
.topbar,.sub-header{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.8),0 4px 14px rgba(43,29,99,.05) !important;
  padding:10px 14px !important;
  min-height:56px;box-sizing:border-box;
}
.topbar{justify-content:space-between;}
.toplogo,.logotype{
  font-size:25px !important;font-weight:800 !important;letter-spacing:-.5px !important;
  background:var(--violet);
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
  -webkit-text-fill-color:transparent;text-align:center;
}
.sub-header h2{font-size:18px !important;font-weight:700 !important;color:var(--violet-deep) !important;flex:1;}
.hamburger,.icon-btn,.back-arrow{
  width:40px !important;height:40px !important;border-radius:50% !important;
  background:var(--violet-soft) !important;border:none !important;box-shadow:none !important;
  display:flex !important;align-items:center;justify-content:center;
  color:var(--violet) !important;padding:0 !important;
}
.hamburger{gap:4px !important;flex-direction:column;}
.hamburger span{background:var(--violet) !important;height:2.4px !important;border-radius:3px !important;}
.hamburger span:nth-child(1),.hamburger span:nth-child(3){width:18px !important;}
.hamburger span:nth-child(2){width:12px !important;align-self:center;}
.back-arrow{font-size:20px !important;font-weight:700;}
.icon-btn:active,.back-arrow:active,.hamburger:active{transform:scale(.92) !important;background:#E3DCFF !important;}

/* ---------- 4. Barra inferior ---------- */
.bottomnav{
  position:relative;
  max-width:none !important;width:100% !important;margin:0 !important;
  border-radius:22px 22px 0 0 !important;
  background:rgba(255,255,255,.97) !important;
  border:none !important;
  border-top:1px solid var(--line) !important;
  box-shadow:0 -8px 28px rgba(43,29,99,.10) !important;
  padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px)) !important;
  align-items:center;justify-content:space-around;gap:0;
}
.navbtn{
  flex:1;min-width:0;padding:6px 0 2px !important;gap:2px !important;
  background:none !important;box-shadow:none !important;border-radius:14px !important;
  color:var(--ink-faint) !important;font-size:10.5px !important;font-weight:600 !important;
  letter-spacing:.1px;position:relative;
  justify-content:center;align-items:center;text-align:center;
}
.navbtn>span{
  width:48px !important;height:30px !important;border-radius:15px !important;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .25s,transform .25s;
}
.navbtn svg{width:23px !important;height:23px !important;stroke-width:1.9 !important;}
.navbtn.active{color:var(--violet) !important;background:none !important;box-shadow:none !important;font-weight:700 !important;}
.navbtn.active>span{background:var(--violet-soft) !important;}
.navbtn.active::after{
  content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:26px;height:4px;border-radius:0 0 4px 4px;background:var(--yellow);
}
.navbtn:hover{transform:none !important;filter:none !important;}
.navbtn-center{flex:0 0 76px !important;display:flex;align-items:center;justify-content:center;margin-top:-26px;}
.navbtn-center span{
  width:58px !important;height:58px !important;border-radius:50% !important;
  background:#FFD84D !important;color:var(--violet-deep) !important;
  font-size:32px !important;font-weight:600 !important;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px #fff,0 10px 22px rgba(242,169,0,.5) !important;
}
.navbtn-center:hover{transform:none !important;filter:none !important;}

/* ---------- 5. Botones: centrados, redondos, bonitos ---------- */
.btn-primary,.btn-secondary,.hero-banner-cta,.hero-banner-tag,.album-pill,.tab-btn,.tab-btn-icon,
.circle-approve-btn,.pill,.chip,[class*="-cta"],[class$="-btn"]:not(.icon-btn):not(.back-arrow):not(.hamburger):not(.tab-btn):not(.navbtn){
  display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;
}
.btn-primary{
  box-sizing:border-box;border-radius:999px !important;padding:15px 20px !important;
  font-size:15px !important;font-weight:700 !important;letter-spacing:.2px;
  background:#FFD84D !important;color:var(--violet-deep) !important;
  box-shadow:0 8px 20px rgba(242,169,0,.38) !important;border:none !important;
}
.btn-primary:active{transform:scale(.97);}
.btn-secondary{
  box-sizing:border-box;border-radius:999px !important;padding:13px 20px !important;
  font-size:14px !important;font-weight:600 !important;
  background:#fff !important;color:var(--violet) !important;border:2px solid var(--px-violet-3) !important;
}
.btn-text{color:var(--violet) !important;font-weight:600 !important;text-decoration:none !important;display:block;margin:6px auto;text-align:center;}
.tab-btn{border-radius:999px !important;font-weight:600 !important;}
.tab-btn.active,.tab-btn[aria-selected="true"]{background:var(--violet) !important;color:#fff !important;box-shadow:0 4px 12px rgba(123,47,255,.35);}
.album-pill{
  border-radius:16px !important;background:#fff !important;border:1px solid var(--line) !important;
  font-weight:600 !important;color:var(--violet-deep) !important;box-shadow:var(--px-shadow) !important;
}

/* ---------- 6. Tarjetas, listas y modales ---------- */
.modal-card,.sheet-card{
  background:#fff !important;border:none !important;border-radius:26px !important;
  box-shadow:var(--px-shadow-lg) !important;
}
.sheet-card{border-radius:26px 26px 0 0 !important;}
.modal-card h3,.sheet-card h3{color:var(--violet-deep);font-weight:700;}
.modal-card,.modal-card p{text-align:center;}
.modal-backdrop,.sheet-modal .backdrop{background:rgba(43,29,99,.5) !important;}

.field input,.field select,.field textarea,input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],textarea{
  border:1.5px solid var(--line) !important;border-radius:14px !important;background:#fff !important;
  font-size:14px !important;color:var(--ink);
}
.field input:focus,input:focus,textarea:focus{outline:none;border-color:var(--violet) !important;box-shadow:0 0 0 4px rgba(123,47,255,.15);}

.feedrow{padding:12px 4px !important;border-bottom:1px solid #EFEBFA !important;}
.feedrow b{font-weight:700;color:var(--violet-deep);}
.feedrow span{color:var(--ink-soft) !important;}
.menu-item{border-radius:14px;font-weight:500;}

/* Tarjeta "inicio" estilo publicación */
.hero-banner{
  border-radius:24px !important;
  background:
    #6A1FEA !important;
  box-shadow:0 14px 30px rgba(123,47,255,.35) !important;
}
.hero-banner-title b{color:#FFD84D !important;}
.hero-banner-cta{
  background:#FFD84D !important;color:var(--violet-deep) !important;border:none !important;
  font-weight:700 !important;border-radius:999px !important;padding:11px 20px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.hero-banner-tag{background:rgba(255,255,255,.2) !important;border:none !important;font-weight:600 !important;}
.stamps-strip-head span{font-weight:700 !important;color:var(--violet-deep) !important;text-transform:none !important;font-size:13px !important;letter-spacing:0 !important;}
.stamps-strip-head b{background:var(--yellow-soft);color:#9A6A00 !important;padding:2px 9px;border-radius:999px;font-size:11px !important;}
.stamps-strip-chip{border-radius:16px !important;background-color:#fff !important;border:1px solid var(--line) !important;box-shadow:var(--px-shadow);}
.col-label{font-weight:700 !important;color:var(--violet-deep) !important;}
.stamp-grid{gap:12px;}

/* ---------- 7. Refinos ---------- */
.navbtn-center{margin-top:-20px !important;}
.navbtn-center span{width:54px !important;height:54px !important;}

/* Pestañas (Kontakti / Albumi / Konektar y similares): la activa se pinta violeta */
.album-pill.active,.tab-btn-icon.active,.chip.active{
  background:var(--violet) !important;color:#fff !important;border-color:var(--violet) !important;
  box-shadow:0 6px 16px rgba(123,47,255,.35) !important;
}
.album-pill.active svg{stroke:#fff !important;}
.album-pill.active svg *{stroke:#fff;}
#btn-lazo-contactos,#btn-lazo-albumes,#btn-lazo-conecta{border-radius:999px !important;}

/* Pasaporte: tres losas grandes con color propio */
.passport-tile-icon{
  width:98px !important;height:128px !important;border-radius:22px !important;
  border:none !important;box-shadow:var(--px-shadow) !important;position:relative;overflow:hidden;
  background:#fff !important;
}
.passport-tile-icon svg{width:38px !important;height:38px !important;stroke-width:1.7 !important;}
#btn-pass-sellos .passport-tile-icon{background:#8C74FF !important;}
#btn-pass-sellos .passport-tile-icon svg,#btn-pass-sellos .passport-tile-icon svg *{stroke:#fff !important;}
[onclick="openEstampillas()"] .passport-tile-icon{background:#FFE27A !important;}
[onclick="openEstampillas()"] .passport-tile-icon svg,[onclick="openEstampillas()"] .passport-tile-icon svg *{stroke:var(--violet-deep) !important;}
[onclick="openPassportMemoraji()"] .passport-tile-icon{background:#fff !important;}
.passport-tile-icon:hover{transform:translateY(-2px) !important;}
#btn-pass-sellos ~ div,#btn-pass-sellos + div{margin:0;}

/* Foto principal del inicio: tarjeta tipo publicación */
.flip-wrap{margin-bottom:16px !important;}
.flip-face{
  border-radius:24px !important;
  box-shadow:0 14px 34px rgba(43,29,99,.22) !important;
}
.flip-btn{background:rgba(255,255,255,.95) !important;color:var(--violet) !important;box-shadow:0 4px 12px rgba(0,0,0,.18);}
.photo-footer .title{font-size:15px !important;font-weight:700 !important;}
.photo-footer .meta{font-size:11.5px !important;opacity:.92 !important;}
.stamp-onphoto{border-color:var(--yellow) !important;color:#FFE27A !important;border-radius:14px !important;background:rgba(43,29,99,.38) !important;backdrop-filter:blur(4px);}
.mox-add-btn{background:#FFD84D !important;color:var(--violet-deep) !important;box-shadow:0 6px 16px rgba(242,169,0,.45) !important;}

/* Miniaturas: más grandes, esquinas suaves, marco blanco */
.thumbs-row{gap:12px !important;}
.thumb{
  border-radius:18px !important;background-color:#fff !important;padding:6px 6px 8px !important;
  box-shadow:var(--px-shadow) !important;border:none !important;transition:transform .2s;
}
.thumb:active{transform:scale(.96);}
.thumb-photo{border-radius:13px !important;background-color:var(--violet-soft);box-shadow:none !important;}
.thumb-label{font-size:10.5px !important;font-weight:600 !important;color:var(--violet-deep) !important;}

/* Tarjetas de contactos, actividad, tarjetas de colección */
.contact-card,.activity-box,.card3,.choice-card{
  background-color:#fff !important;border:none !important;border-radius:20px !important;box-shadow:var(--px-shadow) !important;
}
.activity-box .timeline-thumb{border-radius:14px !important;background:var(--violet-soft) !important;}
.chip{border:none !important;box-shadow:var(--px-shadow) !important;}

/* Ajustes: filas centradas verticalmente, tipo lista de red social */
#screen-settings .menu-item,#screen-settings .feedrow{background:#fff;}
.sec-title,.section-title,.menu-section{color:var(--ink-faint);font-weight:700;letter-spacing:.8px;}

/* Menú lateral */
.menu-panel,.side-menu,#sideMenu,#menuPanel{background:#fff !important;}

/* Quitar el marco gris detrás de la foto principal */
.flip-card,.flip-card:hover{background:none !important;border:none !important;box-shadow:none !important;}
/* Losas del pasaporte: que quepan siempre */
.passport-tile-icon{width:min(92px,26vw) !important;height:min(122px,34vw) !important;}

/* Marco de la foto: blanco limpio, foto con esquinas suaves */
.flip-face.flip-front{background:#fff !important;}
.photo-zoom-layer{border-radius:18px !important;}
/* Losa de Memoraji con tinte lila */
[onclick="openPassportMemoraji()"] .passport-tile-icon,
.passport-tile-icon{background-color:#EEE8FF;}
/* Botones de acciones de la postal: rectángulos redondeados iguales */
#offlineChannelBtns .btn-secondary{border-radius:18px !important;min-height:62px;flex-direction:column;gap:4px;padding:10px 6px !important;line-height:1.25;}

/* Que ningún campo de texto empuje a otros botones fuera de la pantalla */
input,select,textarea{min-width:0;box-sizing:border-box;max-width:100%;}

/* Menú lateral: "Ekirar" legible sobre violeta */
.menu-item[onclick*="logoutReal"]{color:#FFE27A !important;font-weight:600;}

/* ---------- Símbolos: iconos de línea ultrafina (v44.3) ----------
   Son letras de la fuente propia fonts/poxtal-icons.woff: toman el color del texto.
   Apagados en gris; al tocarlos (o estar activos) se pintan de morado. */
.px-emo{display:inline-block;font-family:'Geist Mono','Poxtal Icons',system-ui,sans-serif !important;font-style:normal;font-weight:400;line-height:1;vertical-align:middle;color:inherit;transition:color .2s,transform .25s;}
.navbtn .px-emo{font-size:26px;color:#8b83a0;}
.navbtn.active .px-emo,.navbtn:active .px-emo{color:var(--violet);transform:scale(1.08);}
.passport-tile-icon .px-emo{font-size:46px;color:var(--violet);}
#btn-pass-sellos .passport-tile-icon .px-emo{color:#fff;}
[onclick="openEstampillas()"] .passport-tile-icon .px-emo{color:var(--violet-deep);}
.album-pill .px-emo{font-size:22px;}
.hero-banner-cta .px-emo,.album-pill .px-emo[style],.btn-primary .px-emo,.btn-secondary .px-emo{font-size:18px;}
.icon-btn .px-emo{font-size:22px;}
.menu-item .ico .px-emo,.menu-item .left .px-emo,.left .px-emo{font-size:21px;}
button.album-pill:not([id]) .px-emo{font-size:18px;}

/* =====================================================================
   Botones en reposo: translúcidos y solo con línea (menos color).
   Solo se rellenan de color cuando están activos o se están tocando.
   ===================================================================== */
/* Los dos botones del banner de inicio, mismo ancho */
.hero-banner-tag,.hero-banner-cta{
  display:flex !important;align-items:center;justify-content:center;gap:8px;
  width:210px;max-width:100%;box-sizing:border-box;margin-left:0;
  padding:11px 16px !important;font-size:14px !important;font-weight:600 !important;
  background:rgba(255,255,255,.10) !important;color:#fff !important;
  border:1.5px solid rgba(255,255,255,.75) !important;border-radius:999px !important;
  box-shadow:none !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hero-banner-tag{margin-bottom:10px;}
.hero-banner-tag:active,.hero-banner-cta:active{background:#FFD84D !important;color:var(--violet-deep) !important;border-color:#FFD84D !important;}

/* Pestañas, píldoras, chips y secundarios: transparentes con línea */
.album-pill,.tab-btn,.tab-btn-icon,.chip,.btn-secondary,.circle-approve-btn{
  background:rgba(255,255,255,.35) !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1.5px solid var(--px-violet-3) !important;box-shadow:none !important;
  color:var(--violet) !important;
}
.album-pill.active,.tab-btn.active,.tab-btn-icon.active,.chip.active{
  background:var(--violet) !important;border-color:var(--violet) !important;color:#fff !important;
  box-shadow:0 6px 16px rgba(123,47,255,.3) !important;
}
.album-pill:active,.btn-secondary:active,.chip:active{background:var(--violet-soft) !important;}

/* Losas del pasaporte: solo contorno, el emoji pone el color */
.passport-tile-icon,
#btn-pass-sellos .passport-tile-icon,
[onclick="openEstampillas()"] .passport-tile-icon,
[onclick="openRecuerdos()"] .passport-tile-icon{
  background:rgba(255,255,255,.35) !important;border:2px solid var(--px-violet-3) !important;box-shadow:none !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.passport-tile-icon:active{background:var(--violet-soft) !important;border-color:var(--violet) !important;}
.passport-tile-icon .px-emo{filter:none;}

/* =====================================================================
   Ronda de ajustes: amarillo en los botones, ancho según el texto,
   botón central sin círculo blanco y con cruz blanca.
   ===================================================================== */
:root{--px-btn-line:#F2B705;--px-btn-tint:rgba(255,201,51,.16);}

/* Botones en reposo: línea y tinte translúcido amarillo */
.album-pill,.tab-btn,.tab-btn-icon,.chip,.btn-secondary,.circle-approve-btn{
  background:var(--px-btn-tint) !important;
  border:1.5px solid var(--px-btn-line) !important;
  color:var(--violet-deep) !important;
}
/* Activos o tocados: amarillo lleno */
.album-pill.active,.tab-btn.active,.tab-btn-icon.active,.chip.active{
  background:#FFD84D !important;border-color:#F2A900 !important;
  color:var(--violet-deep) !important;box-shadow:0 6px 16px rgba(242,169,0,.35) !important;
}
.album-pill.active svg,.album-pill.active svg *{stroke:var(--violet-deep) !important;}
.album-pill:active,.btn-secondary:active,.chip:active{background:rgba(255,201,51,.38) !important;}
.passport-tile-icon,
#btn-pass-sellos .passport-tile-icon,
[onclick="openEstampillas()"] .passport-tile-icon,
[onclick="openRecuerdos()"] .passport-tile-icon{
  background:var(--px-btn-tint) !important;border:2px solid var(--px-btn-line) !important;
}
.passport-tile-icon:active{background:rgba(255,201,51,.38) !important;border-color:#F2A900 !important;}
.tab-btn.active[aria-selected],.tab-btn[aria-selected="true"]{background:#FFD84D !important;color:var(--violet-deep) !important;}
/* Banner de inicio: línea y tinte amarillos sobre el violeta */
.hero-banner-tag,.hero-banner-cta{
  background:rgba(255,201,51,.16) !important;border:1.5px solid #FFD84D !important;color:#fff !important;
}
.hero-banner-tag:active,.hero-banner-cta:active{background:#FFD84D !important;color:var(--violet-deep) !important;}

/* los dos del banner: mismo ancho entre sí, ajustado al texto más largo */
.hero-banner-tag,.hero-banner-cta{width:fit-content !important;min-width:176px;margin-left:0 !important;margin-right:auto !important;}

/* Botón central: sin círculo blanco, cruz blanca */
.navbtn-center span{
  box-shadow:0 8px 20px rgba(242,169,0,.45) !important;
  color:#fff !important;text-shadow:0 1px 3px rgba(43,29,99,.45);
}
/* Sin brillo amarillo: ni halo amarillo en el fondo ni resplandor bajo los botones */
.screen{
  background:
    #F4F1FC !important;
}
.navbtn-center span{box-shadow:0 4px 10px rgba(43,29,99,.18) !important;}
.btn-primary{box-shadow:0 3px 8px rgba(43,29,99,.14) !important;}
.album-pill.active,.tab-btn.active,.tab-btn-icon.active,.chip.active{box-shadow:none !important;}
.mox-add-btn{box-shadow:0 3px 8px rgba(43,29,99,.2) !important;}
.hero-banner{background:#6A1FEA !important;}
.hero-banner-cta,.hero-banner-tag{box-shadow:none !important;}
.stamp-onphoto,.hero-banner-title b{text-shadow:none;}

/* Pantalla de inicio (splash): violeta profundo, sin amarillo, texto blanco */
.screen.onb{
  background:
    #2B1D63 !important;
  color:#fff;
}
.onb-tagline{opacity:.9 !important;color:#fff;font-weight:500;}

/* Krear Postkarto: los tres botones de abajo, en una sola línea y del mismo tamaño */
#offlineChannelBtns{display:flex !important;flex-wrap:nowrap !important;justify-content:stretch;gap:8px !important;}
#offlineChannelBtns .btn-secondary,#offlineChannelBtns button{
  flex:1 1 0 !important;width:auto !important;min-width:0;height:64px;min-height:64px;box-sizing:border-box;
  display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:6px 4px !important;margin:0 !important;font-size:11px !important;line-height:1.2;
  white-space:normal !important;text-align:center;border-radius:18px !important;
}
#offlineChannelBtns .px-emo{font-size:20px !important;margin:0 !important;}

/* =====================================================================
   v42 · Estilo "Yahoo": menú, tarjetas blancas, barra de pasos, opciones,
   ventanas oscuras solo para avisos importantes
   ===================================================================== */
/* ---- Menú lateral ---- */
.sidemenu .panel{background:#fff !important;padding:18px 16px 24px !important;width:84% !important;border-radius:0 28px 28px 0;}
.sidemenu .backdrop{background:rgba(30,18,70,.45) !important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.menu-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;border:none;background:var(--violet-soft);color:var(--violet);font-size:15px;cursor:pointer;}
.sidemenu .panel{position:absolute;}
.menu-profile{flex-direction:column !important;text-align:center;gap:4px !important;margin:18px 0 16px !important;cursor:pointer;}
.menu-profile .avatar{width:76px !important;height:76px !important;font-size:30px !important;font-weight:700;background-color:var(--violet-soft) !important;color:var(--violet) !important;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-bottom:6px;}
.menu-profile b{font-size:21px !important;font-weight:700;color:var(--violet-deep);}
.menu-profile span{font-size:12.5px;color:var(--ink-soft);word-break:break-all;}
.menu-shortcuts{display:flex;gap:8px;margin-bottom:12px;padding-bottom:14px;border-bottom:1px solid #EEE9FA;}
.menu-shortcuts>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:16px;background:#F6F4FB;cursor:pointer;}
.menu-shortcuts .px-emo{font-size:24px;color:#8b83a0;}
.menu-shortcuts>div:active .px-emo{color:var(--violet);}
.menu-shortcuts small{font-size:11px;font-weight:600;color:var(--violet-deep);}
.menu-item{border-bottom:1px solid #F0ECFA !important;padding:13px 12px !important;color:var(--violet-deep);}
.menu-item.sel{background:var(--violet-soft) !important;color:var(--violet) !important;font-weight:700;border-radius:999px !important;border-bottom-color:transparent !important;}
.menu-item.sel span{color:var(--violet) !important;}
.menu-item[onclick*="logoutReal"]{color:var(--violet-deep) !important;}

/* ---- Tarjetas de bienvenida (onboarding) ---- */
.screen.onb-step{background:#EEEDF3 !important;padding:44px 14px 14px !important;align-items:stretch !important;}
.onb-step .onb-card{flex:1;background:#fff;border-radius:30px;padding:26px 22px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow-y:auto;box-shadow:0 6px 24px rgba(43,29,99,.08);}
.onb-step .onb-card h2{color:var(--violet-deep);}
.onb-step .onb-actions{margin-top:auto !important;width:100%;max-width:none !important;padding-top:14px;}
.onb-step .dots{position:absolute;top:18px;left:20px;right:20px;gap:6px !important;margin:0 !important;}
.onb-step .dot{flex:1;height:5px !important;width:auto !important;border-radius:999px !important;background:#D9D5E6 !important;}
.onb-step .dot.on{background:var(--violet) !important;width:auto !important;}
.onb-step .btn-primary{background:var(--violet) !important;color:#fff !important;border:none !important;box-shadow:none !important;width:100%;border-radius:999px !important;padding:15px !important;font-weight:700;}
.onb-step .btn-primary:disabled{background:#CFC4EE !important;}
.onb-step .btn-text{color:var(--violet) !important;margin-top:10px;}

/* ---- Opciones: borde violeta + ✓ al elegir, gris claro si no ---- */
.choice-card{background:#F6F5F9 !important;border:1.5px solid transparent !important;box-shadow:none !important;position:relative;}
.choice-card.selected{background:#fff !important;border-color:var(--violet) !important;}
.choice-card.selected::after{content:"✓";position:absolute;top:8px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--violet);color:#fff;font-size:12px;line-height:20px;text-align:center;}

/* ---- Ventanas oscuras SOLO para avisos importantes ---- */
.modal-dark{background:rgba(20,12,45,.55) !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.modal-dark .modal-card{background:#2A2832 !important;border:none !important;box-shadow:0 20px 50px rgba(0,0,0,.45) !important;}
.modal-dark .modal-card h3,.modal-dark .modal-card b{color:#fff !important;font-size:20px;}
.modal-dark .modal-card p,.modal-dark .modal-card div,.modal-dark .modal-card span{color:#D9D6E3 !important;}
.modal-dark .modal-card .btn-primary{background:var(--violet) !important;color:#fff !important;border-radius:999px !important;box-shadow:none !important;}
.modal-dark .modal-card .btn-secondary{background:transparent !important;color:#fff !important;border:1.5px solid #5A5668 !important;}

/* v42 · menú: anula estilos antiguos (texto blanco / tarjeta de vidrio) */
.sidemenu .menu-profile{background:none !important;border:none !important;box-shadow:none !important;padding:0 !important;overflow:visible !important;}
.sidemenu .menu-profile::after{display:none !important;}
.sidemenu .menu-profile .avatar{background-color:var(--violet-soft) !important;background-image:none;box-shadow:none !important;border:none !important;color:var(--violet) !important;}
.sidemenu .menu-profile b{color:var(--violet-deep) !important;font-size:21px !important;}
.sidemenu .menu-item{background:transparent !important;border:none !important;border-bottom:1px solid #F0ECFA !important;color:var(--violet-deep) !important;border-radius:0;margin-bottom:0 !important;box-shadow:none !important;}
.sidemenu .menu-item:hover{transform:none !important;background:var(--violet-faint) !important;box-shadow:none !important;}
.sidemenu .menu-item .ico{background:transparent !important;}
.sidemenu .menu-item.sel{background:var(--violet-soft) !important;color:var(--violet) !important;border-radius:999px !important;border-bottom-color:transparent !important;}
.sidemenu .menu-item span{color:inherit !important;}
.sidemenu .menu-item[onclick*="logoutReal"]{color:var(--violet-deep) !important;}

/* v44.3 — los dibujos de línea pequeños que ya existían (persona, reloj, sobre…) se afinan al mismo
   grosor ultrafino que los iconos nuevos, para que toda la app se vea igual. */
svg[viewBox="0 0 24 24"][fill="none"]{stroke-width:.9 !important;}
.navbtn svg,.passport-tile-icon svg{stroke-width:.9 !important;}

/* v44.3 — pantalla Cards: tarjetas más pequeñas, 4 por fila */
#screen-tarjetas .grid3{grid-template-columns:repeat(4,1fr);gap:8px;}
#screen-tarjetas .card3 small{font-size:8px;text-align:center;line-height:1.15;padding:0 2px;word-break:break-word;}