: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%;}
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('https://mimasajeadomicilio.com/wp-content/uploads/2026/05/masaje-relajante-en-el-Paraiso-del-Tietar-26.webp');
  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;}

.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;}
.form-photo{align-self:center; margin-bottom:6px;}
.field-row{display:grid; gap:12px;}
.field-row.two{grid-template-columns: 1fr 1fr;}
.field{display:flex; flex-direction:column; gap:6px;}
.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);
}
.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; border-radius:999px; background: var(--sand); padding:4px;}
.seg-btn{flex:1; 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;}