:root{
  --mint: #A8E6CF;
  --sand: #F2E9D8;
  --white-warm: #FAF9F6;
  --green-deep: #2E6F5E;
  --gold-sand: #D9C7A3;
  --stone: #6F6F6F;
  --navy: #16233a;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-s: 0 10px 26px rgba(46,111,94,.10);
  --shadow-m: 0 18px 46px rgba(46,111,94,.14);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-label: 'Montserrat', -apple-system, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{margin:0; padding:0; height:100%; overflow-x:hidden;}
body{
  font-family: var(--font-body);
  background: linear-gradient(180deg, var(--mint) 0%, var(--sand) 100%);
  color: var(--stone);
  overscroll-behavior: none;
}
h1,h2,h3{font-family: var(--font-display); color: var(--green-deep); margin:0;}
button{font-family: var(--font-label); cursor:pointer; border:none; background:none;}
input, select, textarea{font-family: var(--font-body);}

.hidden{display:none !important;}
.view{min-height:100vh; padding-bottom: 90px;}

/* ---------- BANNERS ---------- */
.banner{
  position:sticky; top:0; z-index:50; background:var(--green-deep); color:#fff;
  font-size:13px; padding:10px 16px; text-align:center; font-family:var(--font-body);
}
.banner-warn{background:#a97c2f;}

/* ---------- HOME ---------- */
#view-home{position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.home-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(160deg, rgba(168,230,207,.35), rgba(242,233,216,.35)),
    url('../images/portada.jpg?v=2');
  background-size: cover;
  background-position: center;
  filter: saturate(0.95);
}
.home-content{
  position:relative; z-index:1; max-width: 420px; width:92%; margin: 0 auto;
  background: rgba(250,249,246,.88); backdrop-filter: blur(6px);
  border-radius: var(--radius-lg); padding: 34px 26px 30px; text-align:center;
  box-shadow: var(--shadow-m); border: 1px solid rgba(255,255,255,.6);
}
.logo-lockup{
  background: var(--navy); border-radius: var(--radius-md); padding: 20px 18px 16px;
  display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom: 18px;
}
.logo-badge{
  width:104px; height:104px; border-radius:50%; overflow:hidden;
  border: 2px solid var(--gold-sand); box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 0 24px rgba(0,0,0,.25);
  background: radial-gradient(circle at 50% 42%, #22314f 0%, var(--navy) 72%);
  display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box;
}
.logo-badge-img{width:100%; height:100%; object-fit:contain; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));}
.logo-text{display:flex; flex-direction:column; align-items:center; gap:2px;}
.logo-line1{
  font-family: var(--font-display); font-weight:800; color: var(--gold-sand);
  letter-spacing: 2px; font-size: 15px;
}
.logo-line2{font-family: var(--font-label); color: rgba(217,199,163,.75); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;}
.logo-ornament{margin-top:2px;}
.home-tagline{font-family: var(--font-display); font-style: italic; color: var(--green-deep); font-size: 17px; margin: 0 0 20px;}

.therapist-frames{display:flex; gap:14px; justify-content:center; margin-bottom: 22px;}
.photo-frame{display:flex; flex-direction:column; align-items:center; gap:4px; font-family: var(--font-label); font-size:11px; color: var(--stone);}
.photo-frame small{font-size:9px; opacity:.65;}
.photo-placeholder{
  width:72px; height:72px; border-radius:50%; background: var(--sand);
  border: 2px dashed var(--gold-sand); display:flex; align-items:center; justify-content:center;
  color: var(--green-deep); opacity:.75; cursor:pointer; background-size:cover; background-position:center;
}
.photo-placeholder.has-photo{
  border-style: solid; opacity:1;
}
.photo-placeholder.has-photo svg{display:none;}
.photo-placeholder.small{width:44px; height:44px;}

/* ---------- BUTTONS ---------- */
.btn{
  border-radius: 999px; padding: 15px 28px; font-weight:700; font-size:15px;
  transition: transform .15s ease, box-shadow .15s ease; letter-spacing:.02em;
}
.btn:active{transform: scale(.97);}
.btn-gel{
  background: linear-gradient(180deg, var(--mint), var(--green-deep));
  color:#fff; box-shadow: 0 14px 30px rgba(46,111,94,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary{width:100%;}
.btn-full{width:100%; margin-top:10px;}
.btn-outline{
  background:#fff; color: var(--green-deep); border:1.5px solid var(--gold-sand);
  padding:9px 18px; border-radius:999px; font-size:13px; font-weight:700;
}

/* ---------- TOPBAR ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding: 18px 18px 14px;
  position:sticky; top:0; background: rgba(250,249,246,.92); backdrop-filter: blur(8px); z-index:20;
}
.topbar h1{font-size:18px;}
.icon-btn{
  width:38px; height:38px; border-radius:50%; background:#fff; box-shadow: var(--shadow-s);
  display:flex; align-items:center; justify-content:center; font-size:16px; color: var(--green-deep);
}

/* ---------- SELECTOR ---------- */
.selector-grid{display:flex; flex-direction:column; gap:16px; padding: 10px 18px;}
.agenda-card{
  background:#fff; border-radius: var(--radius-lg); padding: 24px 20px; box-shadow: var(--shadow-m);
  display:flex; align-items:center; gap:16px; text-align:left; border: 1px solid rgba(217,199,163,.25);
}
.agenda-name{font-family: var(--font-display); font-weight:700; font-size:19px; color: var(--green-deep); display:block;}
.agenda-count{font-family: var(--font-label); font-size:12px; color: var(--stone); display:block; margin-top:2px;}

/* ---------- LIST ---------- */
.search-row{padding: 4px 18px 12px;}
.search-row input{
  width:100%; padding: 13px 16px; border-radius: 999px; border: 1px solid rgba(111,111,111,.2);
  background:#fff; font-size:14px; box-shadow: var(--shadow-s);
}
.filter-chips{display:flex; gap:8px; padding: 0 18px 16px; overflow-x:auto;}
.chip{
  background:#fff; border:1px solid rgba(217,199,163,.4); border-radius:999px; padding:8px 16px;
  font-size:12.5px; font-weight:700; color: var(--stone); white-space:nowrap;
}
.chip.active{background: var(--green-deep); color:#fff; border-color: var(--green-deep);}

.appointments-list{display:flex; flex-direction:column; gap:12px; padding: 0 18px;}
.appt-card{
  background:#fff; border-radius: var(--radius-md); padding:18px; box-shadow: var(--shadow-s);
  border: 1px solid rgba(217,199,163,.2); display:flex; gap:14px;
}
.appt-thumb{
  width:46px; height:46px; border-radius:50%; background: var(--sand); flex-shrink:0;
  border: 2px dashed var(--gold-sand); display:flex; align-items:center; justify-content:center; color: var(--green-deep);
}
.appt-body{flex:1; min-width:0;}
.appt-service{font-family: var(--font-display); font-weight:700; color: var(--green-deep); font-size:16px; margin-bottom:2px;}
.appt-patient{font-size:13.5px; font-weight:600; color: var(--stone); margin-bottom:6px;}
.appt-meta{display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; color: var(--stone);}
.appt-meta span{display:flex; align-items:center; gap:4px;}
.appt-actions{display:flex; gap:8px; margin-top:10px;}
.appt-actions a, .appt-actions button{
  font-size:11.5px; font-weight:700; padding:7px 12px; border-radius:999px; text-decoration:none;
}
.wa-btn{background:#e9f7ee; color:#1f7a45;}
.mail-btn{background:#e8f0fb; color:#2a5da8;}
.edit-btn{background: var(--sand); color: var(--green-deep);}
.del-btn{background:#fbe9e9; color:#b23a3a;}
.origin-tag{
  display:inline-block; font-size:10px; font-weight:700; color:#8b6030; background:rgba(217,199,163,.3);
  padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle;
}

/* ---------- LOGIN / BOOTSTRAP ---------- */
.login-error{
  background:#fbe9e9; color:#b23a3a; font-size:13px; padding:10px 14px; border-radius: var(--radius-sm);
  text-align:center;
}

/* ---------- GESTIÓN DE EQUIPO ---------- */
.team-list{padding: 6px 18px 10px; display:flex; flex-direction:column; gap:10px;}
.team-item{
  display:flex; align-items:center; gap:12px; background:#fff; border-radius: var(--radius-md);
  padding:12px 14px; box-shadow: var(--shadow-s);
}
.team-item-body{flex:1; min-width:0;}
.team-item-name{font-family: var(--font-display); font-weight:700; color: var(--green-deep); font-size:15px;}
.team-item-email{font-size:12px; color: var(--stone);}
.team-toggle{font-size:12px; padding:8px 14px; white-space:nowrap;}
.sede-item-actions{display:flex; flex-direction:column; gap:6px;}

.empty-state{text-align:center; padding: 60px 30px; color: var(--stone);}
.empty-state svg{color: var(--gold-sand); margin-bottom:14px;}

.fab{
  position:fixed; right:20px; bottom:26px; width:58px; height:58px; border-radius:50%;
  background: linear-gradient(180deg, var(--mint), var(--green-deep)); color:#fff; font-size:28px;
  box-shadow: 0 16px 34px rgba(46,111,94,.4); z-index:30;
}

/* ---------- FORM ---------- */
.form{padding: 6px 18px 40px; display:flex; flex-direction:column; gap:14px; max-width:100%; box-sizing:border-box;}
.form-photo{align-self:center; margin-bottom:6px;}
.field-row{display:grid; gap:12px; min-width:0;}
.field-row.two{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
.field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.field label{font-family: var(--font-label); font-size:11.5px; font-weight:700; color: var(--green-deep); letter-spacing:.02em;}
.field input, .field select, .field textarea{
  padding:12px 14px; border-radius: var(--radius-sm); border:1px solid rgba(111,111,111,.2);
  background:#fff; font-size:14.5px; color: var(--stone); box-shadow: var(--shadow-s);
  width:100%; min-width:0; box-sizing:border-box;
}
.field input[readonly]{background: var(--sand); color: var(--green-deep); font-weight:600;}
.field-with-mic{display:flex; gap:8px; align-items:center;}
.field-with-mic input, .field-with-mic textarea{flex:1;}
.mic-btn{
  width:42px; height:42px; border-radius:50%; background: var(--sand); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px; box-shadow: var(--shadow-s);
}
.mic-btn.recording{background:#f4c2c2; animation: pulse 1s infinite;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

.segmented{display:flex; flex-wrap:wrap; border-radius:20px; background: var(--sand); padding:4px; gap:4px;}
.seg-btn{flex:1 1 auto; min-width:70px; padding:10px; border-radius:999px; font-size:13px; font-weight:700; color: var(--stone);}
.seg-btn.active{background: var(--green-deep); color:#fff;}

/* ---------- SETTINGS ---------- */
.settings-list{padding: 10px 18px; display:flex; flex-direction:column; gap:2px;}
.settings-row{
  display:flex; align-items:center; justify-content:space-between; background:#fff;
  padding:16px; border-radius: var(--radius-md); margin-bottom:10px; box-shadow: var(--shadow-s); font-size:14px;
}
.settings-row.column{flex-direction:column; align-items:flex-start; gap:8px;}
.settings-note{font-size:12.5px; color: var(--stone); line-height:1.6; margin:0;}
.status-pill{font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; background: var(--sand); color: var(--green-deep);}
.switch{position:relative; width:44px; height:26px;}
.switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; inset:0; background:#ddd; border-radius:999px; transition:.2s;}
.slider::before{content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;}
.switch input:checked + .slider{background: var(--green-deep);}
.switch input:checked + .slider::before{transform: translateX(18px);}

/* ---------- TOAST ---------- */
.toast{
  position:fixed; left:50%; bottom:30px; transform: translateX(-50%); background: var(--navy); color:#fff;
  padding:12px 22px; border-radius:999px; font-size:13.5px; z-index:100; box-shadow: 0 14px 30px rgba(0,0,0,.3);
}

/* ---------- DARK MODE ---------- */
body.dark{background: linear-gradient(180deg, #10241d, #0c1a15); color:#d8e3de;}
body.dark .home-content, body.dark .agenda-card, body.dark .appt-card,
body.dark .settings-row, body.dark .search-row input, body.dark .field input,
body.dark .field select, body.dark .field textarea, body.dark .topbar{
  background:#16302a; color:#d8e3de; border-color: rgba(217,199,163,.15);
}
body.dark h1, body.dark h2, body.dark h3, body.dark .agenda-name, body.dark .appt-service{color: var(--mint);}
body.dark .chip{background:#16302a; color:#d8e3de;}

@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* ---------- V2: BIZUM BOX (home) ---------- */
.bizum-box{
  margin-top:18px; padding:16px; border-radius: var(--radius-md); background: rgba(217,199,163,.15);
  border:1px dashed var(--gold, #D9C7A3); text-align:center;
}
.bizum-box p{margin:0 0 10px; font-weight:600; font-size:14px;}
.btn-bizum{width:100%; display:block; box-sizing:border-box;}
.bizum-box small{display:block; margin-top:8px; font-size:11.5px; color: var(--stone); line-height:1.5;}

/* ---------- V2: campo de día solo lectura ---------- */
.field-readonly{background:#f3f0e9; color:#7a7267; cursor:not-allowed;}
body.dark .field-readonly{background:#0f221c; color:#8aa39a;}

/* ---------- V2: avatares de inicio ya no son botones ---------- */
.photo-placeholder.no-upload{cursor:default;}

/* ---------- V2: fotos dentro de Ajustes ---------- */
.settings-photo-row{display:flex; gap:20px; margin-top:4px;}
.settings-photo-item{display:flex; flex-direction:column; align-items:center; gap:6px;}
.settings-photo-item small{font-size:11.5px; color: var(--stone);}
.photo-placeholder.settings-upload{width:56px; height:56px; cursor:pointer;}

/* ---------- V2: subida de imagen comprobante ---------- */
.field-image-upload{position:relative;}
.field-image-upload input[type="file"]{
  width:100%; box-sizing:border-box; padding:10px; border-radius: var(--radius-sm, 10px);
  border:1px solid rgba(0,0,0,.12); background:#fff; font-size:13px;
}
.field-image-preview{position:relative; margin-top:10px; display:inline-block;}
.field-image-preview img{max-width:140px; max-height:140px; border-radius:10px; display:block; box-shadow: var(--shadow-s);}
.field-image-preview button{
  position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%;
  background: var(--navy, #1c2b3a); color:#fff; border:none; cursor:pointer; font-size:13px; line-height:1;
}

/* ---------- V2: horarios de reserva pública (rojo=ocupado, verde=libre) ---------- */
.slots-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.slot-btn{
  padding:9px 14px; border-radius:999px; font-size:13.5px; font-weight:600; border:1.5px solid transparent; cursor:pointer;
}
.slot-btn.slot-free{background: rgba(46,111,94,.12); color: var(--green-deep, #2E6F5E); border-color: rgba(46,111,94,.3);}
.slot-btn.slot-free:hover{background: rgba(46,111,94,.22);}
.slot-btn.slot-busy{background: rgba(192,57,43,.1); color:#c0392b; border-color: rgba(192,57,43,.25); cursor:not-allowed; text-decoration: line-through;}
.slot-btn.slot-selected{background: var(--green-deep, #2E6F5E); color:#fff; border-color: var(--green-deep, #2E6F5E);}

/* ---------- V2: icono de administrador en el selector ---------- */
.photo-placeholder.admin-icon{display:flex; align-items:center; justify-content:center; font-size:22px; background: rgba(217,199,163,.25);}

/* ---------- V2: espera con barra de progreso al reservar (WhatsApp) ---------- */
.wa-wait-overlay{
  position:fixed; inset:0; background: rgba(22,35,58,.55); display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:20px; box-sizing:border-box;
}
.wa-wait-card{
  background:#fff; border-radius: var(--radius-lg, 18px); padding:28px 24px; text-align:center; max-width:320px; width:100%;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.wa-wait-spinner{font-size:34px; margin-bottom:10px; animation: wa-pulse 1s ease-in-out infinite;}
@keyframes wa-pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.15);}}
#wa-wait-label{margin:0 0 14px; font-weight:600; font-size:14px; color: var(--navy, #16233a);}
.wa-wait-track{width:100%; height:8px; border-radius:999px; background:#eee; overflow:hidden;}
.wa-wait-fill{height:100%; width:0%; background: var(--green-deep, #2E6F5E); transition: width .2s linear;}
.wa-wait-skip{
  margin-top:14px; background:none; border:none; color: var(--stone); font-size:12px;
  text-decoration:underline; cursor:pointer; padding:4px;
}

/* ---------- V3: botón flotante "Volver a la web" (visible en toda la app) ---------- */
.back-to-site{
  position:relative; display:flex; align-items:center; justify-content:center; gap:8px;
  width:fit-content; margin: 22px auto 4px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(217,199,163,.5); border-radius:999px;
  padding:7px 16px 7px 7px; box-shadow: var(--shadow-s);
  text-decoration:none; color: var(--green-deep); font-size:12.5px; font-weight:700;
  transition: transform .15s ease, box-shadow .15s ease;
  overflow:hidden; max-width:100%; box-sizing:border-box;
}
.back-to-site:active{transform:scale(.96);}
.back-to-site-img{
  width:26px; height:26px; min-width:26px; min-height:26px; max-width:26px; max-height:26px;
  border-radius:50%; object-fit:cover; object-position:center; flex-shrink:0; display:block;
  border:1px solid rgba(217,199,163,.6); background:#fff;
}
.back-to-site-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@media (max-width:380px){ .back-to-site-label{display:none;} .back-to-site{padding:6px;} }
body.dark .back-to-site{background:rgba(15,34,28,.88); color:#e7dcc4; border-color:rgba(217,199,163,.25);}

/* ---------- V3: casilla de consentimiento de privacidad (reserva de cliente) ---------- */
.field-consent{background: rgba(46,111,94,.06); border-radius:12px; padding:12px 14px;}
.consent-label{display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-weight:400;}
.consent-label input[type="checkbox"]{
  width:19px; height:19px; flex-shrink:0; margin-top:2px; accent-color: var(--green-deep, #2E6F5E);
}
.consent-label span{font-size:12.5px; line-height:1.5; color: var(--stone);}
.consent-label a{color: var(--green-deep); font-weight:700; text-decoration:underline;}
body.dark .field-consent{background:rgba(255,255,255,.05);}

/* ---------- V3: campo de duración (bloque de horas) en el formulario ---------- */
#duracion-help{font-size:11.5px; color: var(--stone); line-height:1.5;}
.duracion-disabled select{opacity:.55; cursor:not-allowed;}
.duracion-disabled #duracion-help{color:#a97c2f;}

/* ---------- V3: insignia de bloque + botón borrar bloque ---------- */
.bloque-tag{
  display:inline-block; font-size:9.5px; font-weight:700; color:#2a5da8; background:rgba(42,93,168,.12);
  padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle;
}
.del-btn-bloque{background:#fdeee0; color:#a2591a;}

/* ---------- V3: interruptor Lista / Calendario ---------- */
.view-mode-toggle{
  display:flex; gap:8px; padding: 4px 18px 14px; max-width:320px; margin:0 auto;
}
.view-mode-toggle .seg-btn{
  flex:1; background:#fff; border:1px solid rgba(217,199,163,.4); border-radius:999px;
  padding:9px 12px; font-size:12.5px; font-weight:700; color: var(--stone); box-shadow: var(--shadow-s);
}
.view-mode-toggle .seg-btn.active{background: var(--green-deep); color:#fff; border-color: var(--green-deep);}

/* ---------- V3: contenedor general del calendario ---------- */
.calendar-view{padding: 4px 18px 30px;}
.calendar-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.calendar-scope{max-width:220px;}
.calendar-nav{display:flex; align-items:center; gap:8px;}
.cal-today-btn{font-size:12px; padding:8px 14px;}
.calendar-label{
  font-family: var(--font-display); font-weight:700; color: var(--green-deep); font-size:17px;
  text-align:center; margin: 10px 0 14px; text-transform:capitalize;
}

/* ---------- V3: vista MES ---------- */
.cal-month-grid{display:grid; grid-template-columns: repeat(7, 1fr); gap:6px;}
.cal-month-dow{
  text-align:center; font-size:11px; font-weight:700; color: var(--stone); padding-bottom:4px;
  font-family: var(--font-label);
}
.cal-month-cell{
  aspect-ratio: 1 / 1; background:#fff; border-radius: 10px; border:1px solid rgba(217,199,163,.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  box-shadow: var(--shadow-s); position:relative;
}
.cal-month-cell.cal-out{opacity:.35;}
.cal-month-cell.cal-today{border:2px solid var(--green-deep);}
.cal-month-daynum{font-size:13px; font-weight:700; color: var(--stone);}
.cal-month-count{
  font-size:10px; font-weight:700; color:#fff; background: var(--green-deep);
  border-radius:999px; padding:1px 7px; min-width:16px;
}

/* ---------- V3: vista SEMANA ---------- */
.cal-week-grid{
  display:grid; grid-template-columns: 52px repeat(7, minmax(72px, 1fr));
  gap:1px; background: rgba(111,111,111,.15); border-radius:12px; overflow:auto;
  max-width:100%;
}
.cal-week-hourcol-head{background: var(--sand);}
.cal-week-dayhead{
  background: var(--sand); text-align:center; font-size:10.5px; font-weight:700; color: var(--green-deep);
  padding:6px 2px; line-height:1.3;
}
.cal-week-dayhead.cal-today{background: var(--green-deep); color:#fff;}
.cal-week-hourcol{
  background:#fff; font-size:10px; color: var(--stone); padding:4px; text-align:right; white-space:nowrap;
}
.cal-week-cell{background:#fff; min-height:40px; padding:2px; display:flex; flex-direction:column; gap:2px;}
.cal-chip{
  background: rgba(46,111,94,.14); color: var(--green-deep); border-radius:6px; padding:3px 5px;
  font-size:10px; font-weight:700; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  width:100%;
}

/* ---------- V3: vista DÍA ---------- */
.cal-day-list{display:flex; flex-direction:column; gap:4px;}
.cal-day-row{display:grid; grid-template-columns: 62px 1fr; gap:10px; align-items:start; padding:8px 6px; border-bottom:1px solid rgba(111,111,111,.1);}
.cal-day-row-filled{background: rgba(46,111,94,.05); border-radius:10px;}
.cal-day-hour{font-size:12px; font-weight:700; color: var(--stone); padding-top:6px;}
.cal-day-slots{display:flex; flex-direction:column; gap:6px;}
.cal-day-free{font-size:12px; color: rgba(111,111,111,.5); padding-top:6px;}
.cal-chip-wide{
  display:block; width:100%; background:#fff; border:1px solid rgba(217,199,163,.3); border-radius:10px;
  padding:9px 12px; font-size:12.5px; color: var(--stone); text-align:left; box-shadow: var(--shadow-s);
}
.cal-chip-wide strong{color: var(--green-deep);}

/* ---------- V3: ventana emergente de detalle de cita ---------- */
.appt-popup-overlay{
  position:fixed; inset:0; background: rgba(22,35,58,.45); z-index:9998;
  display:flex; align-items:center; justify-content:center; padding:20px; box-sizing:border-box;
}
.appt-popup-card{
  background:#fff; border-radius: var(--radius-lg); padding:26px 22px 22px; max-width:380px; width:100%;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); position:relative; max-height:85vh; overflow-y:auto;
}
.appt-popup-close{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  background: var(--sand); color: var(--green-deep); font-size:14px;
}
.appt-popup-card h3{font-size:18px; margin-bottom:8px; padding-right:30px;}
.appt-popup-row{font-size:13.5px; color: var(--stone); margin-bottom:8px; line-height:1.5;}
.appt-popup-card .btn{margin-top:14px;}

/* ---------- V3: modo oscuro para elementos nuevos ---------- */
body.dark .cal-month-cell, body.dark .cal-week-cell, body.dark .cal-week-hourcol,
body.dark .cal-chip-wide, body.dark .appt-popup-card, body.dark .view-mode-toggle .seg-btn{
  background:#16302a; color:#d8e3de; border-color: rgba(217,199,163,.15);
}
body.dark .cal-week-dayhead, body.dark .cal-week-hourcol-head{background:#0f221c;}

/* ---------- V4: verificación real de correo (código OTP) ---------- */
.field-email-verify{background: rgba(46,111,94,.06); border-radius:12px; padding:12px 14px;}
body.dark .field-email-verify{background:rgba(255,255,255,.05);}
.email-verify-row{display:flex; gap:8px; align-items:stretch;}
.email-verify-row input{flex:1; min-width:0;}
.btn-verify-mail{
  flex-shrink:0; white-space:nowrap; padding:0 16px; font-size:12.5px; border-radius: var(--radius-sm);
}
.otp-box{margin-top:12px; padding-top:12px; border-top:1px dashed rgba(111,111,111,.25);}
.otp-box label{display:block; font-size:12.5px; font-weight:700; color: var(--green-deep); margin-bottom:6px;}
#otp-help{display:block; margin-top:6px; font-size:11px; color: var(--stone);}
.email-status{display:block; margin-top:8px; font-size:11.5px; color: var(--stone); line-height:1.5;}
.email-status.status-ok{color: var(--green-deep); font-weight:700;}
.email-status.status-error{color:#c0392b; font-weight:700;}
.email-status.status-pending{color:#a97c2f; font-weight:700;}
#client-correo[data-verified="1"]{border-color: var(--green-deep); background: rgba(46,111,94,.06);}

/* ---------- V4: consentimiento informado (cuestionario de salud) ---------- */
.field-informed-consent{background: rgba(46,111,94,.06); border-radius:12px; padding:14px;}
body.dark .field-informed-consent{background:rgba(255,255,255,.05);}
.informed-consent-title{font-family: var(--font-display); font-weight:700; color: var(--green-deep); font-size:15px; margin:0 0 4px;}
.health-checks{display:flex; flex-direction:column; gap:8px; margin:10px 0 4px;}
.health-check{
  display:flex; align-items:center; gap:10px; background:#fff; border-radius:10px; padding:9px 12px;
  cursor:pointer; box-shadow: var(--shadow-s);
}
body.dark .health-check{background:#16302a;}
.health-check input[type="checkbox"]{width:18px; height:18px; flex-shrink:0; accent-color: var(--green-deep, #2E6F5E);}
.health-check span{font-size:12.5px; color: var(--stone);}
.field-informed-consent .field{margin-top:10px;}
.field-informed-consent .consent-label{margin-top:12px;}

/* ---------- V10: acordeón del cuestionario de salud ---------- */
.health-accordion{margin-top:10px; background:#fff; border-radius:10px; overflow:hidden;}
body.dark .health-accordion{background:#16302a;}
.health-accordion-summary{
  list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; font-size:13px; font-weight:700; color: var(--green-deep);
}
.health-accordion-summary::-webkit-details-marker{display:none;}
.health-accordion-summary::after{content:'▾'; font-weight:900; transition: transform .15s ease;}
.health-accordion[open] .health-accordion-summary::after{transform: rotate(180deg);}
.health-accordion-badge{
  font-size:10.5px; background: rgba(46,111,94,.12); color: var(--green-deep);
  padding:3px 9px; border-radius:20px; font-weight:700; white-space:nowrap;
}
.health-accordion-body{padding:0 14px 14px;}

/* ---------- V12: firma digital + fichas por categoría ---------- */
.firma-canvas{
  width:100%; max-width:600px; height:160px; background:#fff; border:2px dashed rgba(46,111,94,.35);
  border-radius:10px; touch-action:none; cursor:crosshair; display:block; margin-bottom:8px;
}
body.dark .firma-canvas{background:#eee;}

/* ---------- V4: menú de exportar / imprimir / imagen / compartir ---------- */
.export-menu-card{max-width:360px; text-align:center;}
.export-menu-options{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.export-opt{justify-content:center; display:flex; align-items:center; gap:8px; text-decoration:none;}
.export-share-fallback{margin-top:18px; padding-top:14px; border-top:1px dashed rgba(111,111,111,.25);}
.export-render-container{
  position:fixed; left:-9999px; top:0; width:900px; background:#fff; padding:24px; box-sizing:border-box;
}
.export-render-container table{width:100%; border-collapse:collapse; font-family: Arial, sans-serif;}
.export-render-container th, .export-render-container td{border:1px solid #ddd; padding:8px; font-size:12px; text-align:left;}
.export-render-container th{background:#F2E9D8; color:#2E6F5E;}
.export-render-container h1{color:#2E6F5E; font-family: Arial, sans-serif; font-size:20px;}

/* ---------- V4: tarjeta flotante de vista rápida (hover / mantener pulsado) ---------- */
.quickview-card{
  position:fixed; z-index:9999; max-width:300px; min-width:220px;
  background:#fff; border-radius:14px; padding:14px 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
  border:1px solid rgba(46,111,94,.18);
  pointer-events:none; /* no roba el hover/click de lo que hay debajo */
  opacity:0; transform: translateY(4px) scale(.98);
  transition: opacity .12s ease, transform .12s ease;
}
.quickview-card.visible{opacity:1; transform: translateY(0) scale(1);}
body.dark .quickview-card{background:#16302a; border-color: rgba(255,255,255,.12);}
.quickview-card .qv-title{
  font-family: var(--font-display); font-weight:700; font-size:14.5px; color: var(--green-deep);
  margin-bottom:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.quickview-card .qv-tag{
  font-size:10px; background: rgba(46,111,94,.12); color: var(--green-deep);
  padding:2px 6px; border-radius:20px; font-weight:700;
}
.quickview-card .qv-row{font-size:12px; color: var(--stone); margin-top:3px; line-height:1.45; display:flex; gap:6px;}
.quickview-card .qv-health{
  margin-top:8px; padding-top:8px; border-top:1px dashed rgba(111,111,111,.25);
  font-size:11.5px; color:#a0522d;
}
.quickview-card .qv-hint{margin-top:8px; font-size:10px; color: var(--stone); opacity:.7; text-align:center;}

/* ---------- V6: tarjetas de clientes (agrupados por teléfono) con conteo de plan ---------- */
.client-card{
  background:#fff; border-radius:14px; padding:14px 16px; box-shadow: var(--shadow-s);
}
body.dark .client-card{background:#16302a;}
.client-card-head{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.client-name{font-family: var(--font-display); font-weight:700; font-size:15px; color: var(--green-deep);}
.client-meta{font-size:12px; color: var(--stone); margin-top:2px;}
.client-plans{margin-top:8px; padding-top:8px; border-top:1px dashed rgba(111,111,111,.25);}
.client-plan-row{font-size:12.5px; color: var(--green-deep); margin-top:4px;}
.client-plan-agotado{color:#c0392b; font-weight:700;}
.client-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.client-actions a, .client-actions button{
  font-size:12px; padding:7px 12px; border-radius: var(--radius-sm); text-decoration:none;
}

/* ---------- V7: sugerencias de plan existente según el teléfono ---------- */
.plan-suggestions{margin-top:2px; background: rgba(46,111,94,.08); border-radius:10px; padding:10px 12px;}
body.dark .plan-suggestions{background:rgba(255,255,255,.06);}
.plan-suggestions-label{display:block; font-size:11.5px; font-weight:700; color: var(--green-deep);}
.plan-suggestions-list{display:flex; flex-direction:column; gap:6px; margin-top:6px;}
.plan-suggestion-btn{
  text-align:left; background:#fff; border:1px solid rgba(46,111,94,.25); border-radius:8px;
  padding:8px 10px; font-size:12px; color: var(--stone); cursor:pointer;
}
body.dark .plan-suggestion-btn{background:#16302a; color:#eee;}
.plan-suggestion-btn:hover{background: rgba(46,111,94,.12);}

/* ---------- V8: código de cliente + consultar historial ---------- */
.codigo-cliente-box{
  text-align:center; background: rgba(46,111,94,.08); border-radius:14px; padding:16px; margin-top:6px;
}
body.dark .codigo-cliente-box{background:rgba(255,255,255,.06);}
.codigo-cliente-box p{margin:0; font-size:13px; color: var(--stone);}
.codigo-cliente-valor{
  font-family: var(--font-display); font-size:28px !important; font-weight:800; letter-spacing:4px;
  color: var(--green-deep); margin:6px 0 !important;
}
.client-historial-resultado{padding: 6px 18px 24px; display:flex; flex-direction:column; gap:12px;}
.hist-card{background:#fff; border-radius:14px; padding:14px 16px; box-shadow: var(--shadow-s);}
body.dark .hist-card{background:#16302a;}
.hist-card h3{font-family: var(--font-display); color: var(--green-deep); font-size:15px; margin:0 0 6px;}

/* Peso Consciente */
.pc-result{margin-top:14px; display:flex; flex-direction:column; gap:10px;}
.pc-block{background:var(--sand,#F2E9D8); border-radius:12px; padding:12px 14px;}
body.dark .pc-block{background:#123a30;}
.pc-block-title{font-family:var(--font-display); font-weight:700; color:var(--green-deep); font-size:14px; margin:0 0 4px;}
.pc-num{font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--green-deep);}
.pc-hint{font-size:12px; color:var(--stone); margin-top:4px; line-height:1.4;}
.pc-tag{display:inline-block; font-family:var(--font-label); font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; background:#fff; color:var(--green-deep); margin-top:4px;}
.pc-tag.warn{background:#FBE7C6; color:#8a5a00;}
.pc-tag.alert{background:#F8D7DA; color:#842029;}
.pc-table{width:100%; border-collapse:collapse; margin-top:6px; font-size:12.5px;}
.pc-table td{padding:4px 2px; border-bottom:1px solid rgba(0,0,0,.06);}
.pc-table td:last-child{text-align:right; font-weight:700; color:var(--green-deep);}
.pc-evolucion-card{border:1.5px dashed var(--gold-sand); border-radius:14px; padding:14px 16px; margin-bottom:10px;}
.pc-evolucion-row{font-size:13px; margin-bottom:4px;}
.pc-evolucion-row b{color:var(--green-deep);}
.hist-plan-row{font-size:13px; color: var(--green-deep); margin-top:4px;}
.hist-session-row{font-size:12.5px; color: var(--stone); padding:8px 0; border-top:1px dashed rgba(111,111,111,.25);}
.hist-session-row:first-child{border-top:none;}