@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue-50:#EEEEF8;
  --blue-100:#C4C5E8;
  --blue-200:#9A9BD4;
  --blue-400:#6366B8;
  --blue-600:#393C80;
  --blue-700:#2D3069;
  --blue-800:#252858;
  --blue-900:#181A3D;
  --navy:#0E0F24;
  --navy2:#13153A;
  --navy3:#0A0B1E;
  --green:#5DCAA5;
  --green-bg:rgba(29,158,117,.12);
  --green-bd:rgba(29,158,117,.28);
  --red:#E24B4A;
  --red-bg:rgba(226,75,74,.12);
  --red-bd:rgba(226,75,74,.28);
  --amber:#efca27;
  --amber-bg:rgba(239,159,39,.12);
  --amber-bd:rgba(239,159,39,.28);
  --font-display:'smooth',sans-serif;
  --font-body:'DM Sans',sans-serif;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;
  --border:1px solid rgba(99,102,184,.2);
  --glass:rgba(255,255,255,.033);
  --glass-h:rgba(99,102,184,.1);
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--navy);color:var(--blue-50);min-height:100vh;line-height:1.6}
.hidden{display:none!important}

/* NAVBAR */
.navbar{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:14px 36px;background:rgba(10,22,40,.92);backdrop-filter:blur(14px);border-bottom:var(--border)}
.logo{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--blue-200);text-decoration:none;letter-spacing:-.5px}
.logo span{color:var(--blue-400)}
.nav-right{display:flex;gap:8px;align-items:center}

/* BUTTONS */
.btn{font-family:var(--font-body);font-size:13px;font-weight:500;padding:8px 16px;border-radius:20px;border:1px solid rgba(99,102,184,.3);background:transparent;color:var(--blue-200);cursor:pointer;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:rgba(99,102,184,.1);border-color:rgba(99,102,184,.5)}
.btn.primary{background:var(--blue-600);border-color:var(--blue-600);color:var(--blue-50)}
.btn.primary:hover{background:var(--blue-700)}
.btn.danger{background:var(--red-bg);border-color:var(--red-bd);color:var(--red)}
.btn.danger:hover{background:rgba(226,75,74,.22)}
.btn.success{background:var(--green-bg);border-color:var(--green-bd);color:var(--green)}
.btn.lg{font-size:14px;padding:11px 26px;border-radius:var(--r-md)}
.btn.full{width:100%;justify-content:center}
.btn:disabled{opacity:.38;cursor:not-allowed}

/* FORMS */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:11px;font-weight:500;color:var(--blue-200);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px}
.form-input,.form-select,.form-textarea{width:100%;background:rgba(255,255,255,.04);border:var(--border);border-radius:var(--r-sm);padding:10px 14px;font-family:var(--font-body);font-size:14px;color:var(--blue-50);outline:none;transition:border-color .2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue-400);background:rgba(99,102,184,.06)}
.form-input::placeholder,.form-textarea::placeholder{color:rgba(181,212,244,.32)}
.form-select option{background:var(--navy2);color:var(--blue-50)}
.form-textarea{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* BADGES */
.badge{display:inline-block;font-size:10px;font-weight:500;padding:3px 9px;border-radius:10px;background:rgba(99,102,184,.12);color:var(--blue-200);border:1px solid rgba(99,102,184,.22)}
.badge.green{background:var(--green-bg);color:var(--green);border-color:var(--green-bd)}
.badge.red,.badge.cancelled{background:var(--red-bg);color:var(--red);border-color:var(--red-bd)}
.badge.amber{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-bd)}
.badge.blue{background:rgba(99,102,184,.18);color:var(--blue-100);border-color:rgba(99,102,184,.35)}

/* ALERTS */
.alert{padding:11px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:14px;display:none}
.alert.error{background:var(--red-bg);border:1px solid var(--red-bd);color:var(--red);display:block}
.alert.success{background:var(--green-bg);border:1px solid var(--green-bd);color:var(--green);display:block}
.alert.warning{background:var(--amber-bg);border:1px solid var(--amber-bd);color:var(--amber);display:block}

/* TOAST */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:10px;background:var(--navy2);border:var(--border);border-radius:var(--r-md);padding:12px 18px;font-size:13px;color:var(--blue-50);animation:slideInR .3s ease;min-width:240px;max-width:340px;box-shadow:0 4px 24px rgba(0,0,0,.4)}
.toast.success{border-color:var(--green-bd)}.toast.error{border-color:var(--red-bd)}.toast.warning{border-color:var(--amber-bd)}
.toast-icon{font-size:15px;flex-shrink:0}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes slideInR{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* SECTION TITLES */
.section-ttl{font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--blue-400);text-transform:uppercase;letter-spacing:1.5px}

/* RESPONSIVE */
@media(max-width:700px){
  .navbar{padding:12px 16px}
  .form-row{grid-template-columns:1fr}
}

/* MOBILE TOUCH & USABILITY */
@media(max-width:700px){
  .btn { min-height: 42px; }
  .form-input, .form-select, .form-textarea { font-size: 16px !important; } /* prevent iOS auto-zoom */
  .toast-container { bottom: 80px; right: 12px; left: 12px; }
  .toast { min-width: 0; max-width: 100%; width: 100%; }
  .modal-overlay { padding: 16px; align-items: flex-end; }
  .modal-box { border-radius: var(--r-xl) var(--r-xl) var(--r-md) var(--r-md); }
  .badge { font-size: 9px; padding: 2px 7px; }

  /* NAVBAR MOBILE — más compacta y sin amontonamiento */
  .navbar { padding: 10px 14px; gap: 8px; }
  .logo img { height: 32px !important; }
  .nav-right { gap: 6px; }

  /* Ocultar texto del tema-toggle en mobile, solo ícono */
  .theme-toggle .theme-label { display: none; }
  .theme-toggle { padding: 6px 8px; font-size: 16px; border-radius: 50%; width: 36px; height: 36px; justify-content: center; }

  /* Mejoras generales mobile */
  body { line-height: 1.5; }
  .section-ttl { font-size: 10px; }
  .hidden-mobile { display: none !important; }

  /* Scroll horizontal suave */
  .dates-row, .agenda-hdr, .cats { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dates-row::-webkit-scrollbar, .agenda-hdr::-webkit-scrollbar, .cats::-webkit-scrollbar { display: none; }
}

@media(max-width:400px){
  .navbar { padding: 8px 10px; }
  .logo img { height: 28px !important; }
  .nav-right { gap: 4px; }
  body { font-size: 14px; }
}

/* ══════════════════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════════════════ */
.theme-toggle{
  background:transparent;border:1px solid rgba(99,102,184,.22);
  border-radius:20px;padding:5px 10px;font-size:14px;cursor:pointer;
  color:var(--blue-200);transition:all .2s;line-height:1;
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-body);font-size:12px;font-weight:500;
}
.theme-toggle:hover{background:rgba(99,102,184,.1);border-color:rgba(99,102,184,.4);}

/* ══════════════════════════════════════════
   LIGHT MODE — VARIABLE OVERRIDES
══════════════════════════════════════════ */
[data-theme="light"]{
  --blue-50:#1a1c3a;
  --blue-100:#252858;
  --blue-200:#393C80;
  --blue-400: #393C80;
  --blue-600:#4a4ea0;
  --blue-700:#393C80;
  --blue-800:#2D3069;
  --blue-900:#1a1c3a;
  --navy:#EEEEF8;
  --navy2:#E4E5F4;
  --navy3:#D8DAF0;
  --green:#1a8a6a;
  --green-bg:rgba(26,138,106,.1);
  --green-bd:rgba(26,138,106,.28);
  --red:#b83030;
  --red-bg:rgba(184,48,48,.09);
  --red-bd:rgba(184,48,48,.25);
  --amber:#8a6000;
  --amber-bg:rgba(200,150,50,.18);
  --amber-bd:rgba(138,96,0,.35);
  --border:1px solid rgba(99,102,184,.28);
  --glass:rgba(255,255,255,.65);
  --glass-h:rgba(99,102,184,.12);
}
[data-theme="light"] body{
  background:#d7d7ff;color:#1a1c3a;
}

/* Navbar */
[data-theme="light"] .navbar{
  background:rgba(238,238,248,.94);
  border-bottom:1px solid rgba(99,102,184,.22);
}
[data-theme="light"] .logo{color:var(--blue-200);}

/* Inputs & forms */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea{
  background:rgba(255,255,255,.8);
  border-color:rgba(99,102,184,.3);
  color:#1a1c3a;
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder{color:rgba(57,60,128,.45);}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus{
  background:rgba(255,255,255,.95);
  border-color:var(--blue-400);
}
[data-theme="light"] .form-select option{background:#E4E5F4;color:#1a1c3a;}

/* Toasts */
[data-theme="light"] .toast{
  background:#fff;color:#1a1c3a;
  border-color:rgba(99,102,184,.3);
}

/* Mobile menu */
[data-theme="light"] .mobile-menu{
  background:var(--navy2);
  border-color:rgba(99,102,184,.25);
}
[data-theme="light"] .mobile-menu-item{color:var(--blue-100);}

/* Auth page specifics */
[data-theme="light"] .auth-box{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(20px);
}
[data-theme="light"] .auth-left{
  background:linear-gradient(145deg,#dde0f4 0%,#e8eaf6 100%);
}
[data-theme="light"] .tabs{
  background:rgba(99,102,184,.08);
  border-color:rgba(99,102,184,.22);
}
[data-theme="light"] .tab-btn{color:var(--blue-200);}
[data-theme="light"] .role-card{border-color:rgba(99,102,184,.25);}
[data-theme="light"] .role-card:hover{background:rgba(99,102,184,.1);}
[data-theme="light"] .role-card.selected{background:rgba(99,102,184,.15);border-color:var(--blue-400);}

/* Search section */
[data-theme="light"] .search-section{
  background:rgba(255,255,255,.5);
  border-color:rgba(99,102,184,.2);
}
[data-theme="light"] .search-wrap{
  background:rgba(255,255,255,.8);
  border-color:rgba(99,102,184,.25);
}
[data-theme="light"] .search-wrap input{color:#1a1c3a;}
[data-theme="light"] .cat-btn{
  background:transparent;
  border-color:rgba(99,102,184,.25);
  color:var(--blue-200);
}
[data-theme="light"] .cat-btn:hover,
[data-theme="light"] .cat-btn.active{
  background:var(--blue-600);
  border-color:var(--blue-600);
  color:#fff;
}

/* Booking panel */
[data-theme="light"] .booking-panel{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
}
[data-theme="light"] .date-pill{
  border-color:rgba(99,102,184,.25);
  color:#1a1c3a;
}
[data-theme="light"] .slot{
  border-color:rgba(99,102,184,.2);
  color:var(--blue-200);
}
[data-theme="light"] .slot:hover:not(:disabled){background:rgba(99,102,184,.12);}

/* Modals */
[data-theme="light"] .cancelApptModal > div,
[data-theme="light"] [style*="background:var(--navy2)"]{
  background:var(--navy2) !important;
}

/* Sidebar (business) */
[data-theme="light"] .sidebar{
  background:rgba(228,229,244,.85);
  border-right-color:rgba(99,102,184,.22);
}
[data-theme="light"] .sidebar-btn{color:var(--blue-200);}
[data-theme="light"] .sidebar-btn:hover{background:rgba(99,102,184,.12);color:var(--blue-100);}
[data-theme="light"] .sidebar-btn.active{background:rgba(99,102,184,.2);color:var(--blue-100);}

/* Emoji panel */
[data-theme="light"] .emoji-panel{
  background:rgba(240,241,250,.98);
}
[data-theme="light"] .emoji-search{
  background:rgba(255,255,255,.8);color:#1a1c3a;
}

/* Setup card */
[data-theme="light"] .setup-card{
  background:rgba(255,255,255,.65);
}
[data-theme="light"] .icon-opt{background:transparent;}
[data-theme="light"] .icon-opt:hover{background:rgba(99,102,184,.1);}
[data-theme="light"] .icon-opt.selected{background:rgba(99,102,184,.18);}

/* Guest banner */
[data-theme="light"] .guest-info-banner{
  background:rgba(99,102,184,.1);
  border-color:rgba(99,102,184,.3);
}