/* Portal de Paciente — dentro de la plataforma (Fase BI). Mismo diseño estilo Duolingo
   de la portada (rosa Insight, Nunito, botones gruesos, tarjetas con borde inferior)
   y los personajes. Solo presentación: portal.js no se toca, los ids siguen intactos. */
:root{
  --bg:#fff; --panel:#fff; --panel-2:#f7f7f7; --border:#e5e5e5;
  --ink:#3c3c3c; --ink-soft:#6b6b6b; --ink-faint:#9a9a9a;
  --accent:#d12f6e; --accent-2:#ff6fa3; --ok:#46a302; --warn:#e69500; --danger:#ea2b2b;
  --radius:16px; --radius-sm:12px;
  --shadow:none; --shadow-lg:0 14px 40px -14px rgba(60,60,60,.35);
  --pa-rose:#d12f6e; --pa-rose-d:#a3204f; --pa-rose-l:#ffe3ee; --pa-edge:#e5e5e5;
}
body{font-family:"Nunito","Inter",system-ui,sans-serif; background:#fff; color:var(--ink); -webkit-font-smoothing:antialiased;}
button,input,select,textarea{font-family:inherit;}
b,strong{font-weight:800;}

/* ---------- Barra superior ---------- */
.topbar{height:68px; padding:0 18px; background:#fff; border-bottom:2px solid var(--pa-edge);}
.topbar-user{gap:12px; min-width:0;}
.topbar-user b{font-size:15px; font-weight:900; color:var(--ink); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46vw;}
.topbar-user span{font-size:12.5px; font-weight:700; color:var(--ink-faint); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46vw;}
.avatar{width:42px; height:42px; background:var(--pa-rose); border:0; box-shadow:0 3px 0 var(--pa-rose-d); font-weight:900; font-size:17px;}
.avatar img{border-radius:50%;}
.icon-btn{width:42px; height:42px; background:#fff; border:2px solid var(--pa-edge); border-bottom-width:4px; border-radius:12px; color:var(--ink-soft); transition:transform .08s,background .12s,color .12s,border-color .12s;}
.icon-btn:hover{background:var(--pa-rose-l); border-color:#f6b5cd; color:var(--pa-rose);}
.icon-btn:active{transform:translateY(2px); border-bottom-width:2px;}
#notif-badge-p{background:var(--pa-rose)!important; font-weight:900;}

/* ---------- Pestañas ---------- */
.tabbar{top:68px; gap:8px; padding:10px 16px; background:#fff; border-bottom:2px solid var(--pa-edge); scrollbar-width:none;}
.tabbar::-webkit-scrollbar{display:none;}
.tabbar-btn{padding:9px 15px; border-radius:12px; border:2px solid transparent; border-bottom-width:4px; background:transparent; color:var(--ink-faint); font-weight:900; font-size:13px; letter-spacing:.6px; text-transform:uppercase; transition:transform .08s,background .12s,color .12s;}
.tabbar-btn i{font-size:15px;}
.tabbar-btn:hover{background:var(--panel-2); color:var(--ink-soft);}
.tabbar-btn.active{background:var(--pa-rose-l); border-color:#f6b5cd; color:var(--pa-rose);}
.tabbar-btn:active{transform:translateY(2px);}
.tab-badge{width:9px; height:9px; background:var(--pa-rose); box-shadow:0 0 0 2px #fff; margin-left:2px;}

.subtabs button{border:2px solid var(--pa-edge); border-bottom-width:4px; border-radius:12px; background:#fff; color:var(--ink-faint); font-weight:900; font-size:12.5px; letter-spacing:.5px; text-transform:uppercase; padding:9px 14px;}
.subtabs button.active{background:var(--pa-rose-l); border-color:#f6b5cd; color:var(--pa-rose);}

/* ---------- Contenido ---------- */
.content{padding:22px 16px 80px;}
.section-title{font-size:21px; font-weight:900; text-transform:lowercase; letter-spacing:0; color:var(--pa-rose); margin:30px 0 12px;}
.section-title::first-letter{text-transform:lowercase;}
.widget,.prueba-card,.chat-wrap{background:#fff; border:2px solid var(--pa-edge); border-bottom-width:5px; border-radius:18px; box-shadow:none; padding:20px;}
.chat-wrap.widget{padding:0;}
.sesion-row{border-bottom:2px solid #f0f0f0;}
.sesion-row b,.prueba-card .prueba-nombre{font-weight:900;}
.proxima-fecha{font-size:22px; font-weight:900; color:var(--ink);}
.proxima-sub{font-weight:700;}
.chip{font-weight:900; font-size:11px; letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; border-radius:9px;}
.chip-ok{background:#e4f7d0; color:var(--ok);}
.chip-warn{background:#fff1d1; color:var(--warn);}
.chip-danger{background:#fde0e0; color:var(--danger);}
.chip-info,.chip-muted{background:#f0f0f0; color:var(--ink-faint); border:0;}

.pendiente-item{border-bottom:2px solid #f0f0f0;}
.pendiente-item i.pendiente-icono{background:var(--pa-rose-l); color:var(--pa-rose); border-radius:12px;}
.pendiente-item.riesgo i.pendiente-icono{background:#fff1d1; color:var(--warn);}
.pendiente-item .pendiente-texto{font-weight:800;}
.pendiente-item .pendiente-texto span{font-weight:700;}

/* ---------- Botones ---------- */
.btn{min-height:50px; padding:0 20px; border-radius:12px; background:var(--pa-rose); color:#fff; font-weight:900; font-size:14.5px; letter-spacing:.8px; text-transform:uppercase; box-shadow:0 4px 0 var(--pa-rose-d); transition:transform .08s,box-shadow .08s,filter .12s;}
.btn:hover{filter:brightness(1.05);}
.btn:active:not(:disabled){transform:translateY(4px); box-shadow:0 0 0 var(--pa-rose-d);}
.btn:disabled{background:#e5e5e5; color:#afafaf; box-shadow:0 4px 0 #cfcfcf; opacity:1;}
.btn-secondary{background:#fff; color:var(--pa-rose); border:2px solid var(--pa-edge); box-shadow:0 4px 0 var(--pa-edge);}
.btn-secondary:hover{background:var(--pa-rose-l); filter:none;}
.btn-danger{background:var(--danger); box-shadow:0 4px 0 #b81f1f;}
.btn-row .btn,.pendiente-item .btn{min-height:42px; padding:0 16px; font-size:12.5px; box-shadow:0 3px 0 var(--pa-rose-d);}
.btn-row .btn-secondary,.pendiente-item .btn-secondary{box-shadow:0 3px 0 var(--pa-edge);}
.chat-send{background:var(--pa-rose)!important; box-shadow:0 4px 0 var(--pa-rose-d); border-radius:12px!important; border:0!important;}
.chat-send:active{transform:translateY(3px); box-shadow:0 1px 0 var(--pa-rose-d);}

/* ---------- Formularios ---------- */
label{font-weight:800; font-size:13px; color:var(--ink-soft);}
input[type=email],input[type=password],input[type=text],input[type=number],input[type=date],select,textarea{border:2px solid var(--pa-edge); background:#f7f7f7; border-radius:12px; font-weight:700; font-size:15px; padding:13px 14px;}
input:focus,select:focus,textarea:focus{border-color:#f06c9c; background:#fff; box-shadow:none;}
.form-error{border-radius:12px; font-weight:800; background:#fde0e0; border:2px solid #f8baba;}
.reactivo-opciones label{border:2px solid var(--pa-edge); border-bottom-width:4px; border-radius:12px; font-weight:800;}
.progress-bar{height:14px; border-radius:99px; background:#e5e5e5;}
.progress-fill{background:var(--pa-rose); border-radius:99px;}

/* ---------- Agenda ---------- */
.slot-btn{border:2px solid var(--pa-edge); border-bottom-width:4px; border-radius:12px; background:#fff; font-weight:900; color:var(--ink-soft); padding:9px 14px;}
.slot-btn:hover{border-color:#f6b5cd; background:var(--pa-rose-l);}
.slot-btn.preferente{border-color:#a6dc6e; background:#e4f7d0; color:var(--ok);}
.slot-btn.selected{background:var(--pa-rose); border-color:var(--pa-rose-d); color:#fff;}

/* ---------- Chat ---------- */
.chat-msgs{padding:18px; background:#fff;}
.msg{border-radius:16px; font-weight:700; font-size:14px;}
.msg.mine{background:var(--pa-rose); color:#fff; border-bottom-right-radius:5px; box-shadow:0 3px 0 var(--pa-rose-d);}
.msg.otro{background:#fff; border:2px solid var(--pa-edge); border-bottom-left-radius:5px; color:var(--ink);}
.chat-input-row{border-top:2px solid var(--pa-edge);}
.chat-input-row input{border-radius:12px;}

/* ---------- Notificaciones, toast ---------- */
.toast{font-weight:900; border-radius:14px; padding:13px 20px; font-size:14px; box-shadow:0 4px 0 rgba(0,0,0,.25),0 14px 30px -12px rgba(0,0,0,.4);}
.notif-item-titulo,.notif-toast-titulo,.notif-panel-head{font-weight:900;}
#notif-panel-p{border:2px solid var(--pa-edge); border-radius:16px;}
.notif-toast i{color:var(--pa-rose);}

/* ---------- Pantalla de consentimiento ---------- */
#consent-screen{background:#fff;}
#consent-screen .card{border:2px solid var(--pa-edge); border-bottom-width:5px; border-radius:20px; box-shadow:none; max-width:660px;}
.brand .mark{background:var(--pa-rose); box-shadow:0 3px 0 var(--pa-rose-d); border-radius:14px;}
.brand h1{font-size:21px; font-weight:900; color:var(--pa-rose); text-transform:lowercase;}
.brand span{font-weight:700;}
.consent-box{border:2px solid var(--pa-edge); border-radius:14px; background:#fafafa;}
#firma-canvas{border:2px dashed #cfcfcf!important; border-radius:14px!important; background:#fff;}

/* ---------- Ventanas (modales) ---------- */
.modal-overlay{background:rgba(60,60,60,.55);}
.modal-card{border:2px solid var(--pa-edge); border-bottom-width:6px; border-radius:22px; box-shadow:var(--shadow-lg);}
.modal-card h2{font-size:21px; font-weight:900; color:var(--pa-rose); text-transform:lowercase;}
.modal-card .modal-sub{font-weight:700;}
.modal-close{border:2px solid var(--pa-edge); border-bottom-width:3px; border-radius:10px; background:#fff;}
.modal-close:hover{background:var(--pa-rose-l); color:var(--pa-rose);}
.firma-vista{border:2px solid var(--pa-edge); border-radius:14px;}

/* =====================  PERSONAJES  ===================== */
@keyframes pa-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}
@keyframes pa-pop{0%{opacity:0;transform:translateY(24px) scale(.7) rotate(-8deg)}60%{opacity:1;transform:translateY(-6px) scale(1.06) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes pa-say{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.04)}100%{opacity:1;transform:none}}
@keyframes pa-jump{0%,100%{transform:none}30%{transform:translateY(-22px) scale(1.05,.96)}55%{transform:translateY(0) scale(.97,1.04)}75%{transform:translateY(-6px)}}

/* Portada de la pestaña: personaje + globo */
.pa-hero{display:flex; align-items:flex-end; gap:6px; margin:0 0 14px;}
.pa-hero .pa-pj{flex:none; height:150px; width:auto; display:block; transform-origin:50% 100%; animation:pa-pop .7s cubic-bezier(.3,1.4,.5,1) both,pa-bob 4.2s ease-in-out .8s infinite; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none;}
.pa-hero .pa-pj.pa-jump{animation:pa-jump .7s ease-out;}
.pa-bubble{position:relative; margin:0 0 26px; background:#fff; border:2px solid var(--pa-edge); border-bottom-width:5px; border-radius:18px; padding:13px 18px; animation:pa-say .5s .35s both; min-width:0;}
.pa-bubble::before,.pa-bubble::after{content:""; position:absolute; left:-10px; bottom:18px; border:9px solid transparent; border-right-color:var(--pa-edge); border-left:0;}
.pa-bubble::after{left:-7px; border-right-color:#fff;}
.pa-bubble h2{margin:0; font-size:21px; line-height:1.15; font-weight:900; color:var(--pa-rose); text-transform:lowercase;}
.pa-bubble p{margin:3px 0 0; font-size:14px; line-height:1.35; font-weight:700; color:var(--ink-soft);}
.pa-hero.pa-chico .pa-pj{height:112px;}
.pa-hero.pa-chico .pa-bubble{margin-bottom:18px; padding:10px 15px;}
.pa-hero.pa-chico .pa-bubble h2{font-size:19px;}
.pa-hero.pa-chico .pa-bubble p{font-size:13px;}
.pa-hero-ocultar + .section-title,.pa-ocultar{display:none;}

/* Estados vacíos / "estás al día" */
.empty-row,.todo-al-dia,.chat-empty{font-weight:800; color:var(--ink-soft);}
.pa-estado{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:6px 4px;}
.pa-estado img{height:104px; width:auto; max-width:60vw; object-fit:contain; display:block; transform-origin:50% 100%; animation:pa-pop .6s cubic-bezier(.3,1.4,.5,1) both; cursor:pointer;}
.pa-estado img.pa-jump{animation:pa-jump .7s ease-out;}
.pa-estado .pa-txt{font-size:15px; font-weight:800; color:var(--ink-soft); line-height:1.35;}
.pa-estado .pa-txt i{color:var(--ok); margin-right:5px;}
.todo-al-dia .fa-circle-check,.todo-al-dia i{color:var(--ok);}
.chat-empty.pa-vacio-chat{display:flex; flex-direction:column; align-items:center;}

/* Personaje al pie de una ventana / consentimiento */
.pa-cabeza{display:flex; align-items:flex-end; gap:12px; margin:-6px 0 10px;}
.pa-cabeza img{height:84px; width:auto; flex:none; transform-origin:50% 100%;}
.pa-cabeza .pa-dice{font-size:13.5px; font-weight:800; color:var(--ink-soft); background:var(--pa-rose-l); border-radius:14px 14px 14px 4px; padding:9px 13px; margin-bottom:8px; line-height:1.3;}
.modal-card > .pa-cabeza{padding-right:36px;}

@media (max-width:640px){
  .topbar{padding:0 12px;}
  .topbar-user b{max-width:34vw;}
  .topbar-user span{max-width:34vw;}
  .icon-btn{width:38px; height:38px;}
  .tabbar{padding:8px 10px;}
  .tabbar-btn{padding:8px 11px;}
  .content{padding:16px 12px 80px;}
  .pa-hero .pa-pj{height:118px;}
  .pa-hero.pa-chico .pa-pj{height:92px;}
  .pa-bubble{padding:11px 14px; margin-bottom:20px;}
  .pa-bubble h2{font-size:19px;}
  .widget,.prueba-card{padding:16px;}
}
@media (prefers-reduced-motion:reduce){
  .pa-pj,.pa-bubble,.pa-estado img,.pa-cabeza img{animation:none!important;}
}

/* =====================  RESPONSIVO + RENDIMIENTO  ===================== */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
html,body{height:auto; min-height:100%;}
body{overflow-y:auto; -webkit-overflow-scrolling:touch;}
#app-screen{overflow-x:clip;}
button,.btn,.tabbar-btn,.icon-btn,.slot-btn,.subtabs button,label{touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
img{max-width:100%;}
.widget,.prueba-card{contain:layout style;}
.pa-pj,.pa-estado img,.pa-cabeza img{will-change:auto; backface-visibility:hidden;}
input,select,textarea{font-size:16px;} /* evita el zoom automático en iOS */
.topbar{padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right));}
.topbar{height:calc(68px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top);}
.tabbar{top:calc(68px + env(safe-area-inset-top));}
#notif-panel-p,#notif-toast-host-p{top:calc(74px + env(safe-area-inset-top));}
.modal-card{max-height:88vh; max-height:88dvh;}
.screen-center{min-height:100vh; min-height:100dvh;}
.chat-wrap.widget{height:min(560px,70vh)!important; height:min(560px,70dvh)!important;}
@media (hover:none){
  .icon-btn:hover{background:#fff; border-color:var(--pa-edge); color:var(--ink-soft);}
  .tabbar-btn:hover{background:transparent; color:var(--ink-faint);}
  .tabbar-btn.active:hover{background:var(--pa-rose-l); color:var(--pa-rose);}
  .slot-btn:hover{border-color:var(--pa-edge); background:#fff;}
  .btn-secondary:hover{background:#fff;}
}

/* ---- Menú inferior (celulares y tablets en vertical) ---- */
@media (max-width:820px), (max-height:480px) and (max-width:1000px){
  #app-screen{padding-bottom:calc(84px + env(safe-area-inset-bottom));}
  .tabbar{position:fixed; top:auto; bottom:0; left:0; right:0; z-index:40; height:auto; padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right)); gap:4px; justify-content:space-between; overflow:visible; background:#fff; border-top:2px solid var(--pa-edge); border-bottom:0;}
  .tabbar-btn{position:relative; flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; gap:3px; padding:7px 2px 6px; border-radius:12px; border-bottom-width:2px; font-size:10px; letter-spacing:.2px; line-height:1.1; white-space:nowrap;}
  .tabbar-btn i{font-size:20px; line-height:1;}
  .tabbar-btn.active{border-color:#f6b5cd; border-bottom-width:4px;}
  .tabbar-btn .tab-badge{position:absolute; top:5px; left:50%; margin:0 0 0 7px;}
  .content{padding-bottom:24px;}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom));}
  .pa-estado img{height:92px;}
}
/* Pantallas angostas: solo la pestaña activa muestra su nombre */
@media (max-width:560px){
  .tabbar-btn{font-size:0; padding:10px 0 9px;}
  .tabbar-btn i{font-size:21px;}
  .tabbar-btn.active{flex:2.4 1 0; font-size:10.5px; padding:7px 2px 6px;}
  .tabbar-btn.active i{font-size:19px;}
  .tabbar-btn .tab-badge{font-size:0;}
}
@media (max-width:340px){ .topbar-user span{display:none;} .icon-btn{width:34px; height:34px;} }
/* Celular en horizontal: menú compacto */
@media (max-height:480px) and (max-width:900px){
  #app-screen{padding-bottom:calc(58px + env(safe-area-inset-bottom));}
  .tabbar{padding-top:5px; padding-bottom:calc(5px + env(safe-area-inset-bottom));}
  .tabbar-btn,.tabbar-btn.active{flex-direction:row; justify-content:center; font-size:0; padding:7px 0;}
  .tabbar-btn.active{font-size:11px; gap:6px; flex:2 1 0;}
  .tabbar-btn .tab-badge{left:auto; right:10px; top:6px; margin:0;}
  .topbar{height:calc(54px + env(safe-area-inset-top));}
  .pa-hero .pa-pj{height:90px;}
  .toast{bottom:calc(66px + env(safe-area-inset-bottom));}
}
/* Pantallas grandes */
@media (min-width:1200px){ .content{max-width:820px;} .pa-hero .pa-pj{height:170px;} }
/* Ahorro de datos / batería */
@media (prefers-reduced-data:reduce){ .pa-pj{animation:none!important;} }