/* Capa de terminación visual de la app: profundidad, estados interactivos,
   movimiento y transiciones entre pantallas. Se carga última (ver partials/head.php)
   y solo agrega sobre base.css / responsive.css / CSS de cada página, sin cambiar
   el layout. Todo el movimiento se apaga con prefers-reduced-motion. */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-xs:0 1px 2px oklch(30% 0.02 280 / .05);
  --shadow-sm:0 1px 2px oklch(30% 0.02 280 / .04),0 4px 14px -6px oklch(30% 0.02 280 / .10);
  --shadow-md:0 2px 4px oklch(30% 0.02 280 / .04),0 14px 30px -14px oklch(30% 0.03 280 / .22);
  --shadow-lg:0 4px 8px oklch(30% 0.02 280 / .04),0 26px 50px -22px oklch(30% 0.03 280 / .32);
  --ring:0 0 0 4px oklch(60% 0.135 152 / .18);
}

/* ---- Base ---- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
::selection{background:oklch(88% 0.08 152);color:var(--ink);}
.agenda-time,.stat-tile .num,.hz-day-summary,.slot-chip,.plan-price{font-variant-numeric:tabular-nums;}

/* Fondo de la app: papel con dos luces muy suaves de la marca */
body:has(.app-shell){
  background:
    radial-gradient(1000px 560px at 105% -10%,oklch(93% 0.045 152 / .7),transparent 62%),
    radial-gradient(800px 520px at -5% 110%,oklch(95% 0.03 292 / .55),transparent 62%),
    var(--mint);
  background-attachment:fixed;
}
/* Puntillado muy suave encima del degradé para darle textura */
body:has(.app-shell)::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(oklch(46% 0.12 152 / .07) 1px,transparent 1.2px);
  background-size:22px 22px;
}
.app-shell{background:transparent;}

/* Scrollbar discreta (escritorio) */
@media (hover:hover){
  *{scrollbar-width:thin;scrollbar-color:oklch(82% 0.01 280) transparent;}
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-thumb{background:oklch(84% 0.01 280);border-radius:10px;border:3px solid transparent;background-clip:padding-box;}
  ::-webkit-scrollbar-thumb:hover{background-color:oklch(74% 0.015 280);}
}

/* ---- Tipografía de encabezados ---- */
.app-title{letter-spacing:-.015em;line-height:1.15;}
.app-subtitle{line-height:1.55;max-width:68ch;}
.form-section-title,.section-label,.agenda-day-title{letter-spacing:-.005em;}

/* ---- Tarjetas: profundidad y respuesta al puntero ---- */
.card,.list-item-card,.agenda-session,.ses-option,.ses-context,.ubicacion-card,.stat-tile,.herr-info,.agenda-empty{box-shadow:var(--shadow-sm);}
.card-accent{box-shadow:0 18px 36px -18px oklch(46% 0.13 292 / .5);position:relative;overflow:hidden;}
.card-accent::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 180px at 90% 0%,oklch(100% 0 0 / .18),transparent 60%);pointer-events:none;}
.card,.list-item-card,.agenda-session,.ses-option,.ubicacion-card,.herr-info{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s ease,background-color .2s ease;}
@media (hover:hover){
  a.card:hover,a.list-item-card:hover,.ses-option:hover,.agenda-session:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
  .ses-option:hover .ses-option-arrow{transform:translateX(3px);color:var(--green-dark);}
  .stat-tile:hover{box-shadow:var(--shadow-md);}
}
.ses-option-arrow{transition:transform .2s var(--ease-out),color .2s ease;}
a.card:active,a.list-item-card:active,.ses-option:active{transform:scale(.985);box-shadow:var(--shadow-xs);}

/* ---- Botones ---- */
.btn,.btn-mini,.btn-locate,.slot-chip,.route-btn{position:relative;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;}
.btn{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),background-color .2s ease,border-color .2s ease,filter .2s ease;}
.btn:active{transform:translateY(0) scale(.98);}
.btn-primary{box-shadow:0 1px 0 oklch(100% 0 0 / .25) inset,0 12px 22px -10px oklch(55% 0.13 152 / .55);}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,oklch(100% 0 0 / .28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease-out);}
@media (hover:hover){
  .btn-primary:hover{filter:saturate(1.08) brightness(1.03);box-shadow:0 1px 0 oklch(100% 0 0 / .25) inset,0 18px 28px -12px oklch(55% 0.13 152 / .6);}
  .btn-primary:hover::before{transform:translateX(120%);}
  .btn-ghost:hover{border-color:var(--ink-faint);box-shadow:var(--shadow-sm);}
  .btn-danger:hover{background:var(--red-soft);}
}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;filter:none;}

/* Onda al tocar (la agrega ui.js) */
.ui-ripple{position:absolute;z-index:0;border-radius:50%;pointer-events:none;background:currentColor;opacity:.18;transform:scale(0);animation:uiRipple .6s var(--ease-out) forwards;}
.btn-primary .ui-ripple{background:white;opacity:.3;}
@keyframes uiRipple{to{transform:scale(1);opacity:0;}}

/* ---- Campos ---- */
.field input,.field select,.field textarea{transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;}
@media (hover:hover){.field input:hover:not(:focus):not(:disabled),.field select:hover:not(:focus):not(:disabled),.field textarea:hover:not(:focus):not(:disabled){border-color:oklch(84% 0.012 280);}}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-dark);box-shadow:var(--ring);}
.field input:disabled,.field select:disabled,.field textarea:disabled{background:var(--paper);color:var(--ink-faint);cursor:not-allowed;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8797' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;}
.field label{letter-spacing:.1px;}

/* Opciones (radio / checkbox en chip) */
.check-chip{transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .15s ease;}
@media (hover:hover){.check-chip:hover{border-color:oklch(80% 0.05 152);background:oklch(98% 0.015 152);}}
.check-chip:active{transform:scale(.985);}
.check-chip:has(input:checked){box-shadow:0 0 0 3px oklch(60% 0.135 152 / .12);font-weight:700;}
.check-chip:has(input:checked) input{animation:uiPop .3s var(--ease-spring);}
.check-chip:has(input:focus-visible){outline:2px solid var(--green-dark);outline-offset:2px;}
@keyframes uiPop{0%{transform:scale(.6);}100%{transform:scale(1);}}

/* ---- Topbar ---- */
.app-topbar{transition:box-shadow .25s ease,background-color .25s ease;}
body.is-scrolled .app-topbar{box-shadow:0 8px 24px -18px oklch(30% 0.03 280 / .35);}
.avatar-initials{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px oklch(88% 0.03 200);}
.app-topbar-brand img{transition:transform .5s var(--ease-spring);}
@media (hover:hover){.app-topbar-brand:hover img{transform:rotate(-12deg) scale(1.06);}}

/* ---- Navegación ---- */
/* Celular: barra inferior translúcida y con espacio para la zona segura del iPhone */
@media (max-width:899.98px){
  .bottom-nav{background:oklch(99.5% 0.002 95 / .86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);padding-bottom:max(14px,env(safe-area-inset-bottom));}
  .bottom-nav a{min-width:52px;}
  /* Menú del psicólogo (7 ítems): se reparten el ancho para entrar en 360px. */
  .bottom-nav.is-crowded{padding-left:4px;padding-right:4px;}
  .bottom-nav.is-crowded a{min-width:0;flex:1 1 0;padding:4px 1px;font-size:10px;letter-spacing:-.15px;}
  .bottom-nav.is-crowded a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
.bottom-nav .nav-label-short{display:none;}
@media (max-width:599.98px){
  .bottom-nav.is-crowded .nav-label-full{display:none;}
  .bottom-nav.is-crowded .nav-label-short{display:inline;}
}
/* Escritorio: menú lateral con indicador de sección */
@media (min-width:900px){
  .bottom-nav{background:oklch(99.5% 0.002 95 / .6);backdrop-filter:blur(8px);}
  .bottom-nav a{position:relative;transition:background-color .2s ease,color .2s ease,transform .2s var(--ease-out);}
  .bottom-nav a svg{transition:transform .25s var(--ease-spring);}
  .bottom-nav a:hover svg{transform:scale(1.1);}
  .bottom-nav a:hover{transform:translateX(2px);}
  .bottom-nav a.active{font-weight:800;box-shadow:inset 0 0 0 1px oklch(86% 0.06 152);}
  .bottom-nav a.active::after{content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--green-dark);animation:uiNavBar .4s var(--ease-out) both;}
  .bottom-nav a.active:hover{transform:none;}
}
@keyframes uiNavBar{from{transform:scaleY(0);}to{transform:scaleY(1);}}

/* ---- Tema verde del menú (mismo degradé que el panel del login) ---- */
:root{
  --nav-bg:linear-gradient(175deg,var(--brand-800) 0%,var(--brand-900) 55%,oklch(22% 0.045 160) 100%);
  --nav-ink:oklch(93% 0.03 150 / .78);
  --nav-gold:var(--gold);
}
.bottom-nav{background:var(--nav-bg);border-top:0;box-shadow:0 -10px 28px -14px oklch(20% 0.05 155 / .55);}
.bottom-nav a{color:var(--nav-ink);}
.bottom-nav a.active{color:var(--brand-900);}
.bottom-nav a.active::before{background:white;box-shadow:0 6px 14px -6px oklch(10% 0.03 160 / .6);}
.bottom-nav a.active span{color:white;}
.bottom-nav a.raised{color:var(--nav-ink);}
.bottom-nav a.raised .nav-circle{background:linear-gradient(145deg,var(--nav-gold),oklch(70% 0.13 75));box-shadow:0 10px 18px -6px oklch(10% 0.03 160 / .6),0 0 0 6px var(--brand-800);}
.bottom-nav a.raised svg{stroke:oklch(24% 0.06 155);}
/* El texto del botón central queda sobre el verde del menú: claro siempre, blanco si es la página actual. */
.bottom-nav a.raised span:not(.nav-circle){color:var(--nav-ink);}
.bottom-nav a.raised[aria-current="page"] span:not(.nav-circle){color:white;}
@media (max-width:899.98px){
  .bottom-nav{background:var(--nav-bg);backdrop-filter:none;-webkit-backdrop-filter:none;}
}
@media (min-width:900px){
  /* Topbar: la franja sobre el menú continúa el verde, así el menú y la marca forman una sola columna */
  .app-topbar{background:linear-gradient(90deg,var(--brand-800) 0 var(--sidebar-w),oklch(99.5% 0.002 95 / .92) var(--sidebar-w));}
  .app-topbar-brand .app-brand-name{color:white;}
  .app-topbar-brand .app-brand-name span{color:var(--nav-gold);}

  .bottom-nav{background:var(--nav-bg);backdrop-filter:none;border-right:0;box-shadow:8px 0 28px -20px oklch(20% 0.05 155 / .6);}
  .bottom-nav a{color:var(--nav-ink);font-weight:700;}
  .bottom-nav a:hover{background:oklch(100% 0 0 / .1);color:white;}
  .bottom-nav a.active,.bottom-nav a.active span{background:white;color:var(--brand-900);box-shadow:0 10px 22px -12px oklch(10% 0.03 160 / .7);}
  .bottom-nav a.active span{background:none;box-shadow:none;}
  .bottom-nav a.active svg{color:var(--green-dark);}
  .bottom-nav a.active::after{left:-14px;background:var(--nav-gold);}
  .bottom-nav a.raised:hover,.bottom-nav a.raised[aria-current="page"]{background:oklch(100% 0 0 / .12);color:white;}
  .bottom-nav a.raised .nav-circle{box-shadow:0 6px 12px -6px oklch(10% 0.03 160 / .6);}

  /* Pantallas sin menú (la configuración de avisos la primera vez): sin columna lateral vacía,
     contenido centrado y la barra superior clara de punta a punta. */
  .app-shell:not(:has(> .bottom-nav)){grid-template-columns:minmax(0,1fr);}
  .app-shell:not(:has(> .bottom-nav)) .app-content{grid-column:1;max-width:960px;}
  .app-shell:not(:has(> .bottom-nav)) .app-topbar{background:oklch(99.5% 0.002 95 / .92);}
  .app-shell:not(:has(> .bottom-nav)) .app-topbar::after{left:0;}
  .app-shell:not(:has(> .bottom-nav)) .app-topbar-brand .app-brand-name{color:var(--ink);}
  .app-shell:not(:has(> .bottom-nav)) .app-topbar-brand .app-brand-name span{color:var(--green-dark);}
}

/* ---- Avisos ---- */
.form-alert{display:flex;align-items:center;gap:10px;border:1px solid transparent;box-shadow:var(--shadow-xs);animation:uiAlertIn .45s var(--ease-out) both;}
.form-alert::before{content:"";width:20px;height:20px;flex-shrink:0;background:currentColor;-webkit-mask:var(--alert-icon) center / contain no-repeat;mask:var(--alert-icon) center / contain no-repeat;}
.form-alert.ok{border-color:oklch(86% 0.06 152);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.8'/%3E%3C/svg%3E");}
.form-alert.err{border-color:oklch(85% 0.06 25);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");}
.form-alert.warn{background:var(--orange-soft);color:oklch(42% 0.11 50);border-color:oklch(86% 0.07 70);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");}
/* Nube en la que se deshace un aviso al vencer (la arma ui.js) */
.ui-nube{position:fixed;z-index:90;pointer-events:none;overflow:visible;}
.ui-nube-puff{position:absolute;border-radius:50%;filter:blur(3px);will-change:transform,opacity;}
@keyframes uiAlertIn{0%{opacity:0;transform:translateY(-8px) scale(.98);}100%{opacity:1;transform:none;}}

/* ---- Desplegables (<details>) ---- */
details > summary{transition:background-color .2s ease;}
@media (hover:hover){details.card > summary:hover{background:oklch(98.5% 0.006 95);}}
details[open] > summary ~ *{animation:uiDetailsIn .35s var(--ease-out) both;}
@keyframes uiDetailsIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ---- Estados, chips y pastillas ---- */
.pill-status,.agenda-chip,.ses-chip,.tag-pill,.agenda-summary-chip{transition:transform .2s var(--ease-out);}
.date-badge{box-shadow:inset 0 0 0 1px oklch(88% 0.04 292);}
.date-badge.is-presencial{box-shadow:inset 0 0 0 1px oklch(86% 0.06 152);}
.slot-chip{transition:border-color .15s ease,background-color .15s ease,transform .15s var(--ease-out),box-shadow .15s ease;}
@media (hover:hover){.slot-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}}

/* ---- Entrada de cada pantalla ----
   El contenido entra escalonado (suave, 12px). .app-enter (inicio tras login)
   ya tiene su propia animación 3D y queda afuera. */
.app-content:not(.app-enter) > *{animation:uiEnter .55s var(--ease-out) both;}
.app-content:not(.app-enter) > *:nth-child(2){animation-delay:.05s;}
.app-content:not(.app-enter) > *:nth-child(3){animation-delay:.1s;}
.app-content:not(.app-enter) > *:nth-child(4){animation-delay:.15s;}
.app-content:not(.app-enter) > *:nth-child(5){animation-delay:.2s;}
.app-content:not(.app-enter) > *:nth-child(n+6){animation-delay:.25s;}
@keyframes uiEnter{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* Aparición al hacer scroll (ui.js marca con .ui-reveal lo que está fuera de pantalla) */
.ui-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:var(--reveal-delay,0s);}
.ui-reveal.is-in{opacity:1;transform:none;}
.app-content > .ui-reveal{animation:none;}

/* ---- Transición entre páginas ----
   Navegadores con View Transitions entre documentos (Chrome/Edge): la barra
   superior y el menú quedan fijos y solo el contenido cambia, sin parpadeo. */
@view-transition{navigation:auto;}
.app-topbar{view-transition-name:app-topbar;}
.bottom-nav{view-transition-name:app-nav;}
::view-transition-group(app-topbar),::view-transition-group(app-nav){animation:none;}
::view-transition-old(root){animation:uiVtOut .16s ease both;}
::view-transition-new(root){animation:uiVtIn .3s var(--ease-out) both;}
@keyframes uiVtOut{to{opacity:0;}}
@keyframes uiVtIn{from{opacity:0;}}

/* Barra de progreso al navegar (la maneja ui.js) */
.ui-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);opacity:0;background:linear-gradient(90deg,var(--green),var(--violet));box-shadow:0 0 10px oklch(60% 0.135 152 / .6);}
.ui-progress.is-active{opacity:1;animation:uiProgress 8s cubic-bezier(.1,.7,.2,1) forwards;}
.ui-progress.is-done{opacity:0;transform:scaleX(1);transition:opacity .3s ease .1s;}
@keyframes uiProgress{0%{transform:scaleX(0);}10%{transform:scaleX(.35);}100%{transform:scaleX(.92);}}

/* Botón de envío con spinner mientras el formulario viaja */
.btn.is-loading .btn-spinner{margin-right:2px;}
.btn-ghost.is-loading .btn-spinner,.btn-danger.is-loading .btn-spinner{border-color:oklch(50% 0.02 280 / .25);border-top-color:currentColor;}

/* ---- Celular ---- */
@media (max-width:899.98px){
  /* 16px en los campos evita el zoom automático de iOS al enfocar */
  .field input,.field select,.field textarea{font-size:16px;}
  .app-title{font-size:23px;}
  .app-topbar{position:sticky;top:0;z-index:25;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:10px;background:oklch(97% 0.008 95 / .82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  .card{border-radius:18px;}
  .btn{min-height:48px;}
  .check-chip{min-height:46px;}
}

/* ---- Movimiento reducido ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .ui-reveal{opacity:1;transform:none;}
  @view-transition{navigation:none;}
}

/* ---- Encabezado verde de cada módulo (mismo lenguaje que el inicio y el login) ---- */
.page-hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;gap:16px;
  padding:20px;border-radius:24px;color:white;
  background:linear-gradient(135deg,var(--brand-500) 0%,var(--brand-800) 62%,var(--brand-900) 100%);
  box-shadow:0 22px 44px -26px oklch(25% 0.07 155 / .75);
}
.page-hero::before,.page-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;}
.page-hero::before{width:280px;height:280px;right:-80px;top:-150px;background:radial-gradient(circle,oklch(100% 0 0 / .16),transparent 70%);}
.page-hero::after{width:220px;height:220px;left:40%;bottom:-160px;background:radial-gradient(circle,oklch(84% 0.1 88 / .22),transparent 70%);}
.page-hero-text{flex:1;min-width:0;}
.page-hero-icon{
  width:48px;height:48px;border-radius:15px;flex-shrink:0;display:grid;place-items:center;
  background:oklch(100% 0 0 / .12);border:1px solid oklch(100% 0 0 / .2);color:var(--gold);
}
.page-hero-icon svg{width:24px;height:24px;}
.page-hero-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.page-hero .app-title{color:white;}
.page-hero .app-subtitle{color:oklch(96% 0.02 150 / .85);margin-top:4px;}
.page-hero a:not(.btn){color:var(--gold);}
.page-hero .agenda-summary-chip{background:white;color:var(--brand-800);}
.page-hero .agenda-summary-chip.is-neutral{background:oklch(100% 0 0 / .12);border-color:oklch(100% 0 0 / .22);color:white;}
.page-hero.is-profile .avatar-initials{
  width:64px;height:64px;font-size:21px;flex-shrink:0;
  background:linear-gradient(145deg,var(--gold),oklch(70% 0.13 75));color:var(--brand-900);
  box-shadow:0 0 0 4px oklch(100% 0 0 / .14);
}
@media (min-width:900px){
  .page-hero{padding:28px 32px;border-radius:28px;gap:20px;}
  .page-hero-icon{width:58px;height:58px;border-radius:18px;}
  .page-hero-icon svg{width:28px;height:28px;}
  .page-hero .app-subtitle{margin-top:6px;}
  .page-hero.is-profile .avatar-initials{width:78px;height:78px;font-size:25px;}
}
@media (max-width:380px){.page-hero-icon{display:none;}}

/* Tarjeta de cabecera en pantallas de detalle (sesión, ficha del psicólogo): franja de marca arriba */
.card-hero-top{position:relative;overflow:hidden;padding-top:24px;}
.card-hero-top::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--brand-500),var(--brand-800),var(--gold));}

/* ---- Terminación compartida de los módulos ---- */
/* Títulos de sección con un acento verde */
.section-label{display:flex;align-items:center;gap:8px;}
.section-label::before{content:"";width:4px;height:1em;border-radius:4px;background:linear-gradient(180deg,var(--brand-500),var(--brand-800));flex-shrink:0;}
.dash-section-head .section-label{margin-bottom:0;}
/* Íconos de sección en verde de marca */
.form-section-icon{background:var(--green-soft);color:var(--brand-800);}
/* Días de la agenda: el de hoy se marca con la marca */
.agenda-day.is-today .agenda-day-title{color:var(--brand-700);}
/* Listas: acento a la izquierda al pasar el mouse */
@media (hover:hover){
  a.list-item-card:hover{border-color:var(--brand-500);box-shadow:inset 3px 0 0 var(--brand-500),var(--shadow-md);}
}
/* Pestañas: la activa en verde de marca */
.app-shell .tabs{background:oklch(93% 0.03 152);}
.app-shell .tab.active,.app-shell .tab[aria-selected="true"]{color:var(--brand-800);}

/* Encabezado con resumen a la derecha (.page-hero-aside): cifras cortas sobre el verde */
.page-hero.has-aside{flex-wrap:wrap;}
.page-hero-aside{flex-basis:100%;display:flex;flex-direction:column;gap:12px;}
.page-hero-stats{display:flex;flex-wrap:wrap;gap:8px;}
.page-hero-stats > div{
  flex:1 1 90px;display:flex;flex-direction:column;gap:1px;
  padding:10px 14px;border-radius:14px;
  background:oklch(100% 0 0 / .1);border:1px solid oklch(100% 0 0 / .16);
}
.page-hero-stats strong{font-family:'Quicksand',sans-serif;font-size:20px;font-weight:700;color:white;line-height:1.15;font-variant-numeric:tabular-nums;}
.page-hero-stats span{font-size:11.5px;font-weight:700;color:oklch(96% 0.02 150 / .72);}
@media (min-width:1100px){
  .page-hero.has-aside{flex-wrap:nowrap;}
  .page-hero-aside{flex-basis:auto;flex-shrink:0;align-items:flex-end;}
  .page-hero-stats{flex-wrap:nowrap;}
  .page-hero-stats > div{flex:0 0 auto;min-width:104px;}
}

/* ---- Accesibilidad: texto solo para lectores de pantalla ---- */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---- Fotos de perfil (avatar_html en includes/fotos.php) ---- */
img.avatar-initials.has-photo{object-fit:cover;background:var(--green-soft);padding:0;}

.profile-photo{position:relative;flex-shrink:0;}
.profile-photo .avatar-initials{transition:filter .25s ease,transform .25s var(--ease-out);}
.profile-photo-edit{
  position:absolute;right:-4px;bottom:-4px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:white;color:var(--brand-800);
  box-shadow:0 0 0 3px var(--brand-800),0 6px 12px -4px oklch(10% 0.03 160 / .6);
  transition:transform .2s var(--ease-spring),background-color .2s ease;
}
.profile-photo-edit svg{width:15px;height:15px;}
@media (hover:hover){
  .profile-photo:hover .profile-photo-edit{transform:scale(1.1);background:var(--gold);}
  .profile-photo:hover .avatar-initials{transform:scale(1.03);}
}
.profile-photo-spinner{position:absolute;inset:0;border-radius:50%;display:none;}
.profile-photo.is-uploading .avatar-initials{filter:brightness(.65) saturate(.8);}
.profile-photo.is-uploading .profile-photo-spinner{display:block;border:3px solid oklch(100% 0 0 / .3);border-top-color:white;animation:uiSpin .8s linear infinite;}
.profile-photo.is-uploading .profile-photo-edit{display:none;}
@keyframes uiSpin{to{transform:rotate(360deg);}}

.profile-photo-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.profile-photo-btn{text-decoration:none;
  display:inline-flex;align-items:center;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;
  padding:6px 12px;border-radius:10px;border:1px solid white;background:white;color:var(--brand-800);
  transition:background-color .2s ease,color .2s ease;
}
.profile-photo-btn:hover{background:var(--green-soft);}
.profile-photo-btn.is-ghost{background:oklch(100% 0 0 / .1);border-color:oklch(100% 0 0 / .25);color:white;}
.profile-photo-btn.is-ghost:hover{background:oklch(100% 0 0 / .2);}
.page-hero.is-profile .avatar-initials.has-photo{box-shadow:0 0 0 4px oklch(100% 0 0 / .18);}

/* ---- Confirmación "¡Listo!" con el logo (partials/flash.php + ui.js) ---- */
.ui-saved{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;cursor:pointer;
  background:oklch(22% 0.045 160 / 0);backdrop-filter:blur(0);
  transition:background-color .35s ease,backdrop-filter .35s ease;
}
.ui-saved.is-in{background:oklch(22% 0.045 160 / .28);backdrop-filter:blur(3px);}
.ui-saved.is-out{background:oklch(22% 0.045 160 / 0);backdrop-filter:blur(0);}
.ui-saved-card{
  width:min(340px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:30px 26px 26px;border-radius:26px;background:var(--card);
  box-shadow:0 30px 70px -24px oklch(20% 0.05 155 / .55);
  opacity:0;transform:translateY(14px) scale(.92);
  transition:opacity .35s var(--ease-out),transform .45s var(--ease-spring);
}
.ui-saved.is-in .ui-saved-card{opacity:1;transform:none;}
.ui-saved.is-out .ui-saved-card{opacity:0;transform:translateY(-8px) scale(.96);transition-duration:.3s;}

.ui-saved-badge{position:relative;width:112px;height:112px;display:grid;place-items:center;margin-bottom:10px;}
.ui-saved-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.ui-saved-ring circle{fill:none;stroke:var(--brand-700);stroke-width:6;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;}
.ui-saved.is-in .ui-saved-ring circle{animation:uiSavedRing .8s .15s cubic-bezier(.65,0,.35,1) forwards;}
.ui-saved-logo{width:64px;height:64px;object-fit:contain;transform:scale(.4) rotate(-20deg);opacity:0;}
.ui-saved.is-in .ui-saved-logo{animation:uiSavedLogo .6s .1s var(--ease-spring) forwards;}
.ui-saved-check{
  position:absolute;right:2px;bottom:4px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(145deg,var(--brand-500),var(--brand-800));
  box-shadow:0 0 0 4px var(--card),0 8px 16px -6px oklch(30% 0.08 155 / .7);
  transform:scale(0);
}
.ui-saved-check svg{width:18px;height:18px;fill:none;stroke:white;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;}
.ui-saved.is-in .ui-saved-check{animation:uiSavedPop .45s .75s var(--ease-spring) forwards;}
.ui-saved.is-in .ui-saved-check svg{animation:uiSavedDraw .35s 1s ease-out forwards;}
.ui-saved-title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:21px;color:var(--brand-900);opacity:0;}
.ui-saved-msg{font-size:13.5px;color:var(--ink-soft);line-height:1.45;opacity:0;}
.ui-saved.is-in .ui-saved-title{animation:uiSavedText .4s .5s ease-out forwards;}
.ui-saved.is-in .ui-saved-msg{animation:uiSavedText .4s .62s ease-out forwards;}

@keyframes uiSavedRing{to{stroke-dashoffset:0;}}
@keyframes uiSavedLogo{to{transform:none;opacity:1;}}
@keyframes uiSavedPop{to{transform:scale(1);}}
@keyframes uiSavedDraw{to{stroke-dashoffset:0;}}
@keyframes uiSavedText{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  .ui-saved,.ui-saved-card{transition:none;}
  .ui-saved.is-in .ui-saved-ring circle,.ui-saved.is-in .ui-saved-logo,.ui-saved.is-in .ui-saved-check,
  .ui-saved.is-in .ui-saved-check svg,.ui-saved.is-in .ui-saved-title,.ui-saved.is-in .ui-saved-msg{animation-duration:1ms;animation-delay:0s;}
  .profile-photo.is-uploading .profile-photo-spinner{animation:none;}
}

/* Botón con cuenta atrás (data-cooldown): deshabilitado se ve en espera, y al habilitarse hace un pulso */
.btn[data-cooldown]:disabled{opacity:.65;cursor:not-allowed;transform:none;font-variant-numeric:tabular-nums;}
.btn[data-cooldown].is-ready{animation:uiReadyPulse .6s var(--ease-spring);border-color:var(--brand-500);color:var(--brand-800);}
@keyframes uiReadyPulse{0%{transform:scale(1);}40%{transform:scale(1.04);}100%{transform:scale(1);}}

/* Ayuda para verificar la matrícula (perfil del psicólogo) */
.verif-help{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--orange-soft);border:1px solid oklch(88% 0.06 70);}
.verif-help-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:white;color:oklch(52% 0.13 55);}
.verif-help-icon svg{width:19px;height:19px;}
.verif-help-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.verif-help-body strong{font-size:14px;color:var(--ink);}
.verif-help-body > span{font-size:12.5px;color:var(--ink-soft);line-height:1.5;}
.verif-help-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.verif-help-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:11px;font-size:13px;font-weight:800;background:white;color:var(--ink);border:1.5px solid var(--border);transition:border-color .15s ease,background-color .15s ease,transform .15s ease;}
.verif-help-btn svg{width:16px;height:16px;}
.verif-help-btn:hover{border-color:var(--brand-500);transform:translateY(-1px);}
.verif-help-btn.is-wa{background:var(--brand-700);border-color:var(--brand-700);color:white;}
.verif-help-btn.is-wa:hover{background:var(--brand-800);}

/* Sello de matrícula en el encabezado del perfil */
.profile-name-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.profile-verified{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:20px;font-size:12.5px;font-weight:800;white-space:nowrap;background:var(--gold);color:var(--brand-900);box-shadow:0 6px 14px -8px oklch(10% 0.03 160 / .7);animation:uiVerifiedIn .5s var(--ease-spring) both;}
.profile-verified svg{width:14px;height:14px;flex-shrink:0;padding:2px;border-radius:50%;background:var(--brand-800);color:var(--gold);box-sizing:content-box;}
.profile-verified.is-pending{background:oklch(100% 0 0 / .1);color:white;border:1px dashed oklch(100% 0 0 / .35);box-shadow:none;padding-left:12px;animation:none;}
.profile-verified.is-pending:hover{background:oklch(100% 0 0 / .18);}
@keyframes uiVerifiedIn{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:none;}}
/* Tilde dorado sobre la foto cuando está verificado */
.page-hero.is-verified .profile-photo::after{content:"";position:absolute;top:-2px;right:-2px;width:24px;height:24px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306452D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;box-shadow:0 0 0 3px var(--brand-800);}
#matricula{scroll-margin-top:calc(var(--topbar-h, 0px) + 20px);}

/* Campo completado solo desde el mapa (assets/js/map-picker.js): destello verde suave */
.field input.is-autofilled{animation:uiAutofill 1.6s ease-out;border-color:var(--brand-500);}
@keyframes uiAutofill{0%{background:var(--green-soft);box-shadow:0 0 0 4px oklch(60% 0.135 152 / .25);}100%{box-shadow:0 0 0 0 oklch(60% 0.135 152 / 0);}}
@media (prefers-reduced-motion:reduce){.field input.is-autofilled{animation:none;}}

/* Escritorio: el borde inferior de la barra superior solo va sobre la parte clara; sobre el menú,
   la franja verde de la marca se une con el verde del menú sin una línea blanca en el medio. */
@media (min-width:900px){
  .app-topbar{border-bottom:0;}
  .app-topbar::after{content:"";position:absolute;left:var(--sidebar-w);right:0;bottom:0;height:1px;background:var(--border);pointer-events:none;}
  .bottom-nav{border-top:0;}
}

/* ---- Validación: cartel rojo debajo del campo (ui.js → initFieldValidation) ---- */
.field-error{
  display:flex;align-items:flex-start;gap:7px;margin-top:6px;padding:8px 11px;border-radius:10px;
  background:var(--red-soft);color:var(--red);font-size:12.5px;font-weight:700;line-height:1.4;
  border:1px solid oklch(85% 0.06 25);animation:uiErrorIn .25s var(--ease-out) both;
}
.field-error::before{
  content:"";width:15px;height:15px;flex-shrink:0;margin-top:1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.has-error > input,.has-error > select,.has-error > textarea,.has-error .input-affix,.has-error .field-icon input{
  border-color:var(--red) !important;background:oklch(98.5% 0.01 25);
}
.has-error > input:focus,.has-error > select:focus,.has-error > textarea:focus{box-shadow:0 0 0 4px oklch(56% 0.14 25 / .15) !important;}
.has-error > label{color:var(--red);}
/* Al aparecer el cartel, el campo hace un pequeño "no" */
.has-error > input,.has-error > select,.has-error .input-affix{animation:uiShake .35s ease;}
@keyframes uiErrorIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@keyframes uiShake{0%,100%{transform:none;}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
@media (prefers-reduced-motion:reduce){.field-error,.has-error > input,.has-error > select,.has-error .input-affix{animation:none;}}

/* Obligatorios: asterisco rojo en la etiqueta (se actualiza solo si el campo pasa a ser obligatorio) */
.app-shell .field:has(> input:required, > select:required, > textarea:required, > .input-affix input:required, > .field-icon input:required) > label::after,
.app-shell [data-min-checked] > label::after{
  content:" *";color:var(--red);font-weight:800;
}

/* ---- Tilde de verificado estilo redes sociales, pegado al nombre (verificado_tilde_html) ---- */
.nombre-con-tilde{display:inline-flex;align-items:center;gap:0;}
.verificado-tilde{display:inline-block;width:1.05em;height:1.05em;margin-left:.28em;flex-shrink:0;vertical-align:-.12em;align-self:flex-start;margin-top:-.05em;}
.verificado-tilde svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 1.5px oklch(30% 0.08 155 / .35));}
.verificado-tilde .vt-fondo{fill:var(--brand-700);}
.verificado-tilde .vt-tilde{fill:white;}
/* Sobre el encabezado verde, el tilde va en dorado para que se distinga */
.page-hero .verificado-tilde .vt-fondo{fill:var(--gold);}
.page-hero .verificado-tilde .vt-tilde{fill:var(--brand-900);}

/* Funciones fuera del plan del psicólogo (plan_candado_html en includes/planes.php). */
.plan-lock{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:var(--violet-soft);color:var(--violet);font-family:'Quicksand',sans-serif;font-weight:700;font-size:12px;text-decoration:none;white-space:nowrap;}
.plan-lock svg{width:13px;height:13px;flex:none;}
.plan-lock:hover{background:var(--violet);color:white;}
.plan-upsell{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--paper);border:1.5px dashed var(--border);font-size:13px;color:var(--ink-soft);}
.plan-upsell strong{color:var(--ink);}
.bottom-nav .nav-lock{position:absolute;top:6px;right:calc(50% - 20px);width:14px;height:14px;border-radius:50%;background:var(--violet);color:white;display:grid;place-items:center;}
.bottom-nav .nav-lock svg{width:9px;height:9px;}
@media (min-width:900px){.bottom-nav .nav-lock{top:50%;right:12px;transform:translateY(-50%);}}

/* Perfil: acceso a "Mi plan" desde el encabezado, con el nombre del plan y su estado. */
.profile-photo-actions{align-items:center;}
.profile-photo-btn svg{width:15px;height:15px;margin-right:6px;flex:none;}
.profile-photo-btn{min-height:34px;}
.profile-plan-btn{
  display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:4px 10px 4px 5px;border-radius:999px;text-decoration:none;
  background:oklch(100% 0 0 / .12);border:1px solid oklch(100% 0 0 / .28);color:white;
  backdrop-filter:blur(6px);transition:background-color .2s ease,transform .2s ease,border-color .2s ease;
}
.page-hero a.profile-plan-btn{color:white;}
.profile-plan-btn:hover{background:oklch(100% 0 0 / .2);border-color:oklch(100% 0 0 / .45);transform:translateY(-1px);}
.profile-plan-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#F7D774,#E0A82E);color:#6B4A06;box-shadow:0 2px 6px oklch(0% 0 0 / .2);}
.profile-plan-ico svg{width:15px;height:15px;}
.profile-plan-txt{display:flex;flex-direction:column;line-height:1.1;}
.profile-plan-label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.75;}
.profile-plan-txt strong{font-size:13.5px;font-weight:800;}
.profile-plan-btn.is-mejorable .profile-plan-label{color:#FCD34D;opacity:1;}
.profile-plan-estado{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:white;color:var(--brand-800);white-space:nowrap;}
.profile-plan-btn.is-gracia .profile-plan-estado{background:#FDE68A;color:#78350F;}
.profile-plan-btn.is-bloqueada .profile-plan-estado,.profile-plan-btn.is-cancelada .profile-plan-estado{background:#FECACA;color:#7F1D1D;}
.profile-plan-flecha{width:16px;height:16px;opacity:.8;transition:transform .2s ease;}
.profile-plan-btn:hover .profile-plan-flecha{transform:translateX(2px);}
@media (prefers-reduced-motion:reduce){.profile-plan-btn,.profile-plan-flecha{transition:none;}.profile-plan-btn:hover{transform:none;}}