/* ============================================================
   EucaSys — Tema "LIQUID GLASS"
   Inspirado en Apple iOS/macOS 26–27: materiales translúcidos,
   brillo especular, esquinas concéntricas, tipografía SF Pro y
   un fondo-ambiente por el que el vidrio refracta. Legible.
   Se carga DESPUÉS de app.css / mobile-pro.css.
   ============================================================ */

:root{
  --ink:#1d1d1f; --muted:#6e6e73; --faint:#86868b;
  --accent:#0071e3; --accent2:#0a84ff; --accent-ink:#0a5bce;
  --hair:rgba(0,0,0,.07);
  --glass:rgba(255,255,255,.60); --glass-strong:rgba(255,255,255,.74); --glass-thin:rgba(255,255,255,.42);
  --stroke:rgba(255,255,255,.65);
  --line:rgba(0,0,0,.08);
  --radius:24px;
  --shadow:0 12px 34px rgba(20,32,66,.13), 0 2px 8px rgba(20,32,66,.06);
  --soft-shadow:0 8px 24px rgba(20,32,66,.09), 0 1px 4px rgba(20,32,66,.05);
  --hi:inset 0 1px 0 rgba(255,255,255,.75);
  --brand:#0071e3; --brand2:#0a84ff; --brand3:#0a5bce;
  --green:#1fa855; --green-bg:rgba(52,199,89,.16);
  --blue:#0071e3; --blue-bg:rgba(0,113,227,.12);
  --red:#e0342a; --red-bg:rgba(255,59,48,.13);
  --warning:#b7791f; --warning-bg:rgba(255,159,10,.16);
  --coffee:#8a6d4b; --coffee-bg:rgba(160,120,70,.14);
}

*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html,body{ font-family:-apple-system,"SF Pro Display","SF Pro Text",BlinkMacSystemFont,"Inter",system-ui,"Segoe UI",sans-serif !important; }

/* — Ambiente: luz suave y difusa que el vidrio refracta — */
body{
  color:var(--ink) !important;
  font-size:16px;
  background:
    radial-gradient(1200px 820px at 8% -12%, rgba(120,170,255,.40), transparent 60%),
    radial-gradient(1000px 720px at 104% -4%, rgba(184,142,255,.32), transparent 56%),
    radial-gradient(1000px 900px at 50% 118%, rgba(110,220,205,.26), transparent 58%),
    linear-gradient(180deg,#eef1f7 0%,#e8ecf3 60%,#eceef4 100%) !important;
  background-attachment:fixed !important;
  min-height:100vh;
}
body:before{ display:none !important; }

/* — Material de vidrio (paneles/tarjetas/superficies) — */
.glass-panel,.card,.hero,.notice,table,.sidebar,.calendar-app-head,
.quick-action,.metric,.today-item,.queue-item,.user-card,.user-chip,.phone-day,
.agenda-card,.mass-row,.mini-day,.calendar-day,.note-line,.read-box,.payer-box,
.toggle-box label,.switch-line,.edit-details summary,.phone-toast,.payment-head,
.approve-strip,.calendar-phone-grid,.mass-card,.date-chip,.topbar,.topbar-actions{
  background:var(--glass) !important;
  -webkit-backdrop-filter:blur(30px) saturate(180%) !important;
  backdrop-filter:blur(30px) saturate(180%) !important;
  border:1px solid var(--stroke) !important;
  box-shadow:var(--hi),var(--soft-shadow) !important;
}
.card,.glass-panel,.dashboard-hero,.calendar-app-head{ border-radius:var(--radius) !important; }
.card.soft,.create-panel,.filter-card{ background:var(--glass-thin) !important; }

/* Brillo especular sutil en las tarjetas grandes */
.card,.dashboard-hero,.calendar-app-head,.payment-card,.mass-card{ position:relative; overflow:hidden; }
.card:after,.dashboard-hero:after,.calendar-app-head:after{
  content:""; position:absolute; inset:0 0 auto 0; height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));
  pointer-events:none; border-radius:inherit;
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass-panel,.card,.sidebar,.topbar,.dashboard-hero,.quick-action,.metric{ background:rgba(255,255,255,.92) !important; }
}

/* — Barra lateral: riel de vidrio flotante — */
.sidebar{ border-radius:28px !important; }
.brand-block strong{ color:var(--ink); letter-spacing:-.01em; }
.brand-block span,.user-chip small{ color:var(--muted) !important; }
.side-nav a{
  background:transparent !important; color:#33343a !important; font-weight:600; font-size:15.5px;
  border:1px solid transparent !important; border-radius:14px !important;
}
.side-nav a span{ background:rgba(0,0,0,.05) !important; color:#3a3b40 !important; box-shadow:none !important; border-radius:11px; }
.side-nav a:hover{ background:rgba(0,0,0,.045) !important; transform:none; }
.side-nav a.active{
  background:linear-gradient(180deg,var(--accent2),var(--accent)) !important; color:#fff !important;
  border-color:transparent !important; box-shadow:var(--hi),0 8px 20px rgba(0,113,227,.32) !important; transform:none;
}
.side-nav a.active span{ background:rgba(255,255,255,.24) !important; color:#fff !important; }
.nav-group-title{ color:var(--faint) !important; letter-spacing:.06em; }
.brand-orb{ box-shadow:none !important; }
.user-chip>span,.user-avatar{ background:linear-gradient(180deg,var(--accent2),var(--accent)) !important; box-shadow:var(--hi) !important; }
.public-link{ background:var(--blue-bg) !important; color:var(--accent-ink) !important; border:1px solid transparent !important; }
.logout-link{ background:rgba(0,0,0,.05) !important; color:#48484a !important; border:1px solid transparent !important; }

/* — Botones estilo Apple (píldora, material) — */
.btn{
  background:linear-gradient(180deg,var(--accent2),var(--accent)) !important; color:#fff !important;
  border:0 !important; border-radius:980px !important; font-weight:600; font-size:15px; min-height:44px;
  padding:11px 20px !important; box-shadow:var(--hi),0 6px 16px rgba(0,113,227,.26) !important;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.btn:hover{ filter:brightness(1.05) saturate(1.05); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn.alt{ background:linear-gradient(180deg,#3ad06a,#1fa855) !important; box-shadow:var(--hi),0 6px 16px rgba(52,199,89,.28) !important; }
.btn.warn{ background:linear-gradient(180deg,#ffb340,#f59e0b) !important; box-shadow:var(--hi),0 6px 16px rgba(255,159,10,.3) !important; }
.btn.gray{ background:rgba(120,120,128,.16) !important; color:#1d1d1f !important; box-shadow:var(--hi) !important; }
.btn.gray:hover{ background:rgba(120,120,128,.24) !important; filter:none; }
.small-btn{ min-height:36px !important; padding:8px 14px !important; }

/* — Campos de formulario translúcidos — */
input,select,textarea{
  font-size:16px; min-height:44px; border-radius:12px !important;
  border:1px solid rgba(0,0,0,.10) !important; background:rgba(255,255,255,.6) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04) !important;
}
input:focus,select:focus,textarea:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 4px rgba(10,132,255,.18) !important; background:rgba(255,255,255,.85) !important; }
textarea{ min-height:92px; }
label{ font-weight:600; font-size:14px; color:#3a3b40; }

/* — Encabezados / texto — */
.topbar h1,.dashboard-hero h2,.metric h2,.section-title h2,.calendar-app-head h2,h1,h2,h3{ letter-spacing:-.022em; color:var(--ink); }
.eyebrow,.pwa-kicker,.nav-group-title{ color:var(--faint) !important; }
.muted,.today-item em,.queue-item small,.quick-action small{ color:var(--muted) !important; }
.intent-text{ border-left:3px solid var(--accent) !important; font-size:20px; }

/* — Hero: material vibrante azul con texto blanco — */
.dashboard-hero,.calendar-app-head{
  background:
    radial-gradient(600px 300px at 88% -30%, rgba(255,255,255,.34), transparent 60%),
    linear-gradient(150deg, rgba(10,132,255,.92), rgba(0,113,227,.86) 60%, rgba(88,86,214,.86)) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:var(--hi),0 18px 44px rgba(0,90,206,.28) !important;
  -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
}
.dashboard-hero h2,.dashboard-hero p,.calendar-app-head h2,.calendar-app-head p{ color:#fff !important; }
.dashboard-hero .eyebrow,.calendar-app-head .eyebrow{ color:rgba(255,255,255,.82) !important; }
.dashboard-hero:after,.calendar-app-head:after{ height:60%; background:linear-gradient(180deg,rgba(255,255,255,.16),transparent); }

/* Quick actions (dentro y fuera del hero) */
.quick-action{ border-radius:20px !important; color:#22242a !important; transition:transform .16s ease, box-shadow .16s ease; }
.quick-action:hover{ transform:translateY(-2px); box-shadow:var(--hi),var(--shadow) !important; }
.quick-action span{ background:var(--blue-bg) !important; color:var(--accent) !important; box-shadow:none !important; }
.quick-action strong{ color:var(--ink); }
.dashboard-hero .quick-action{ background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.3) !important; color:#fff !important; }
.dashboard-hero .quick-action strong{ color:#fff; }
.dashboard-hero .quick-action small{ color:rgba(255,255,255,.82) !important; }
.dashboard-hero .quick-action span{ background:rgba(255,255,255,.22) !important; color:#fff !important; }
.dashboard-hero .quick-action.primary,.quick-action.primary{ background:#fff !important; color:var(--accent-ink) !important; }
.dashboard-hero .quick-action.primary span{ background:var(--blue-bg) !important; color:var(--accent) !important; }
.dashboard-hero .quick-action.primary small{ color:var(--muted) !important; }

.metric-icon,.queue-icon,.payment-icon{ background:var(--blue-bg) !important; color:var(--accent) !important; box-shadow:none !important; }
.metric h2{ color:var(--ink) !important; letter-spacing:-.03em; }

/* — Estados (colores del sistema Apple) — */
.badge{ border-radius:980px; font-weight:600; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ok{ background:var(--green-bg) !important; color:#1a7a3a !important; }
.pend{ background:var(--warning-bg) !important; color:#9a6a10 !important; }
.bad{ background:var(--red-bg) !important; color:#c4291f !important; }
.info{ background:var(--blue-bg) !important; color:var(--accent-ink) !important; }
.coffee{ background:var(--coffee-bg) !important; color:#7a5c38 !important; }
.status-dot{ background:#34c759 !important; box-shadow:0 0 0 5px rgba(52,199,89,.16) !important; }
.role-pill{ background:var(--blue-bg) !important; color:var(--accent-ink) !important; border-radius:980px; padding:6px 12px; font-weight:600; }

/* — Tablas — */
table{ border-radius:20px !important; overflow:hidden; }
th{ background:rgba(255,255,255,.34) !important; color:var(--faint) !important; font-weight:600; letter-spacing:.02em; }
td{ color:#2a2b30; border-bottom:1px solid var(--line) !important; }

/* — Pastillas de misa (mantener semántica de color, con brillo) — */
.mass-free,.dot-free{ background:linear-gradient(180deg,#3ad06a,#1fa855) !important; }
.mass-partial,.dot-partial{ background:linear-gradient(180deg,#0a84ff,#0071e3) !important; }
.mass-full,.dot-full{ background:linear-gradient(180deg,#ff5c52,#e0342a) !important; }
.mass-community,.mass-muted,.dot-community{ background:linear-gradient(180deg,#a7855e,#8a6d4b) !important; }
.mass-pill{ border-radius:14px !important; box-shadow:var(--hi),0 8px 18px rgba(20,32,66,.12) !important; }

/* — Calendario tipo app — */
.phone-day{ border-radius:20px !important; transition:transform .16s ease, box-shadow .16s ease; }
.phone-day:hover{ transform:translateY(-2px); }
.phone-day.today{ outline:2px solid rgba(0,113,227,.35) !important; }
.phone-day.selected{ background:linear-gradient(180deg,var(--accent2),var(--accent)) !important; color:#fff !important; border-color:transparent !important; box-shadow:var(--hi),0 14px 30px rgba(0,113,227,.3) !important; }
.phone-day.selected .day-name,.phone-day.selected .day-count{ color:rgba(255,255,255,.85) !important; }
.day-number{ letter-spacing:-.03em; }

/* — Modal de confirmación (mobile-pro.js) — */
.ec-modal-backdrop{ background:rgba(30,35,55,.28) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.ec-modal{ background:var(--glass-strong) !important; -webkit-backdrop-filter:blur(40px) saturate(180%); backdrop-filter:blur(40px) saturate(180%); border:1px solid var(--stroke) !important; border-radius:26px !important; box-shadow:var(--hi),0 30px 70px rgba(20,32,66,.28) !important; }
.ec-modal .ok{ background:linear-gradient(180deg,var(--accent2),var(--accent)) !important; color:#fff !important; border-radius:980px !important; }
.ec-modal .cancel{ background:rgba(120,120,128,.16) !important; color:#1d1d1f !important; border-radius:980px !important; }

/* — Topbar / móvil — */
.mobile-menu{ background:var(--glass-strong) !important; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border:1px solid var(--stroke) !important; border-radius:14px !important; box-shadow:var(--soft-shadow) !important; }
.mobile-menu span{ background:#3a3b40 !important; }

/* — Pantalla de ingreso (login-pro) — */
.login-pro-body{
  background:
    radial-gradient(900px 640px at 10% -10%, rgba(120,170,255,.45), transparent 60%),
    radial-gradient(820px 620px at 100% 0%, rgba(184,142,255,.34), transparent 55%),
    linear-gradient(180deg,#eef1f7,#e7ebf2) !important;
  background-attachment:fixed !important;
}
.login-pro{ background:var(--glass-strong) !important; -webkit-backdrop-filter:blur(40px) saturate(180%) !important; backdrop-filter:blur(40px) saturate(180%) !important; border:1px solid var(--stroke) !important; border-radius:28px !important; box-shadow:var(--hi),0 24px 60px rgba(20,32,66,.22) !important; }
.login-pro h1{ color:var(--ink) !important; letter-spacing:-.02em; }
.login-pro .subtitle{ color:var(--muted) !important; }
.login-pro input{ min-height:48px; }
.login-pro button{ background:linear-gradient(180deg,var(--accent2),var(--accent)) !important; color:#fff !important; border-radius:980px !important; min-height:50px; font-size:16px; box-shadow:var(--hi),0 8px 20px rgba(0,113,227,.28) !important; }
.login-pro button:hover{ filter:brightness(1.05); }
.login-notice{ background:var(--blue-bg) !important; color:var(--accent-ink) !important; border-radius:14px; }
.login-error{ background:var(--red-bg) !important; color:#c4291f !important; border-radius:14px; }
.login-logo img{ max-height:92px; width:auto; }

/* — Escudo en el sidebar — */
.brand-orb{ background:transparent !important; border-radius:0 !important; width:auto !important; height:54px !important; padding:0 !important; }
.brand-orb img{ height:54px; width:auto; display:block; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* ===== MODO OSCURO (auto o manual) — activado por data-theme="dark" en <html> ===== */
:root[data-theme="dark"]{
  --ink:#f5f5f7; --muted:#a1a1a6; --faint:#8e8e93;
  --accent:#0a84ff; --accent2:#409cff; --accent-ink:#7cbcff;
  --hair:rgba(255,255,255,.1); --line:rgba(255,255,255,.1);
  --glass:rgba(30,30,38,.55); --glass-strong:rgba(36,36,44,.72); --glass-thin:rgba(30,30,38,.4);
  --stroke:rgba(255,255,255,.12);
  --shadow:0 16px 42px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  --soft-shadow:0 10px 28px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4);
  --hi:inset 0 1px 0 rgba(255,255,255,.12);
  --green-bg:rgba(52,199,89,.22); --blue-bg:rgba(10,132,255,.24);
  --red-bg:rgba(255,69,58,.24); --warning-bg:rgba(255,159,10,.24); --coffee-bg:rgba(180,140,90,.2);
}
:root[data-theme="dark"] body{
  background:
    radial-gradient(1200px 820px at 8% -12%, rgba(38,86,190,.40), transparent 60%),
    radial-gradient(1000px 720px at 104% -4%, rgba(110,70,190,.34), transparent 56%),
    radial-gradient(1000px 900px at 50% 120%, rgba(20,120,118,.30), transparent 58%),
    linear-gradient(180deg,#0b0c11 0%,#101219 62%,#0c0e13 100%) !important;
}
:root[data-theme="dark"] .card:after,:root[data-theme="dark"] .dashboard-hero:after,:root[data-theme="dark"] .calendar-app-head:after{ background:linear-gradient(180deg,rgba(255,255,255,.08),transparent) !important; }
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root[data-theme="dark"] .glass-panel,:root[data-theme="dark"] .card,:root[data-theme="dark"] .sidebar,:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .dashboard-hero,:root[data-theme="dark"] .quick-action,:root[data-theme="dark"] .metric{ background:rgba(22,22,28,.94) !important; }
}
:root[data-theme="dark"] .side-nav a{ color:#e7e7ea !important; }
:root[data-theme="dark"] .side-nav a span{ background:rgba(255,255,255,.08) !important; color:#dcdce0 !important; }
:root[data-theme="dark"] .side-nav a:hover{ background:rgba(255,255,255,.06) !important; }
:root[data-theme="dark"] .logout-link{ background:rgba(255,255,255,.07) !important; color:#c7c7cc !important; }
:root[data-theme="dark"] .btn.gray{ background:rgba(120,120,128,.28) !important; color:#f5f5f7 !important; }
:root[data-theme="dark"] .btn.gray:hover{ background:rgba(120,120,128,.36) !important; }
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; color:var(--ink) !important; box-shadow:inset 0 1px 2px rgba(0,0,0,.25) !important; }
:root[data-theme="dark"] input:focus,:root[data-theme="dark"] select:focus,:root[data-theme="dark"] textarea:focus{ background:rgba(255,255,255,.10) !important; border-color:var(--accent) !important; box-shadow:0 0 0 4px rgba(10,132,255,.28) !important; }
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{ color:#8e8e93; }
:root[data-theme="dark"] label{ color:#c7c7cc; }
:root[data-theme="dark"] td{ color:#d6d6db; }
:root[data-theme="dark"] th{ background:rgba(255,255,255,.06) !important; }
:root[data-theme="dark"] .quick-action{ color:#e7e7ea !important; }
:root[data-theme="dark"] .quick-action strong{ color:#f5f5f7; }
:root[data-theme="dark"] .mobile-menu span{ background:#d6d6db !important; }
:root[data-theme="dark"] .topbar-actions{ color:#c7c7cc !important; }
:root[data-theme="dark"] .ec-modal-backdrop{ background:rgba(0,0,0,.5) !important; }
:root[data-theme="dark"] .ec-modal .cancel{ background:rgba(120,120,128,.28) !important; color:#f5f5f7 !important; }
:root[data-theme="dark"] .ok{ color:#5fd98a !important; } :root[data-theme="dark"] .pend{ color:#ffc24d !important; } :root[data-theme="dark"] .bad{ color:#ff8078 !important; }
:root[data-theme="dark"] .info{ color:#7cbcff !important; } :root[data-theme="dark"] .coffee{ color:#d0aa7c !important; }
:root[data-theme="dark"] .agenda-info p,:root[data-theme="dark"] .agenda-time span,:root[data-theme="dark"] .day-name,:root[data-theme="dark"] .day-count,:root[data-theme="dark"] .phone-weekday,:root[data-theme="dark"] .note-line,:root[data-theme="dark"] .mass-meta span,:root[data-theme="dark"] .today-item em{ color:#b8b8bf !important; }
:root[data-theme="dark"] .empty-state{ color:#a1a1a6 !important; background:rgba(255,255,255,.04) !important; }
:root[data-theme="dark"] .dashboard-hero,:root[data-theme="dark"] .calendar-app-head{ box-shadow:var(--hi),0 20px 50px rgba(0,0,0,.5) !important; }
:root[data-theme="dark"] .login-pro-body{
  background:
    radial-gradient(900px 640px at 10% -10%, rgba(38,86,190,.42), transparent 60%),
    radial-gradient(820px 620px at 100% 0%, rgba(110,70,190,.34), transparent 55%),
    linear-gradient(180deg,#0b0c11,#0d0f14) !important;
}
:root[data-theme="dark"] .login-notice{ background:var(--blue-bg) !important; color:var(--accent-ink) !important; }

/* ===== Botón de tema (Auto / Claro / Oscuro) ===== */
.theme-toggle{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid var(--stroke); background:var(--glass); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); color:var(--ink); font-family:inherit; font-size:13px; font-weight:600; padding:8px 13px; border-radius:980px; box-shadow:var(--hi),var(--soft-shadow); line-height:1; white-space:nowrap; }
.theme-toggle:hover{ filter:brightness(1.04); }
.theme-toggle .tt-ico{ font-size:15px; }
:root[data-theme="dark"] .theme-toggle{ color:#f5f5f7; }