:root{
  --bg:#f7f6f6;
  --panel:#ffffff;
  --muted:#5f5f5f;
  --text:#1f1f1f;
  --brand:#9c2b3f;
  --brand-2:#6b1e2c;
  --accent:#d0556c;
  --accent-2:#a03a4d;
  --card:#ffffff;
  --border:#d0d0d0;
  --danger:#e86b6b;
  --success:#4caf7a;
  --soft:#fafafa;
  --shadow-soft:0 8px 18px rgba(0,0,0,.08);
  --shadow-hover:0 12px 26px rgba(0,0,0,.12);
  --topbar-h:64px;
}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Inter,Roboto;
  background:
    radial-gradient(1000px 300px at 20% -200px, rgba(208,85,108,0.25) 30%, transparent 60%),
    radial-gradient(1000px 300px at 80% -200px, rgba(156,43,63,0.20) 30%, transparent 60%),
    linear-gradient(180deg,#fafafa, #f1f1f1);
  color:var(--text);
}
.app-locked body,
body.app-locked{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(156,43,63,0.35) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(208,85,108,0.32) 28%, transparent 60%),
    linear-gradient(180deg,#7a2d2d,#9c2b3f);
}
.topbar{
  display:grid;
  grid-template-columns:1fr minmax(0,1320px) 1fr;
  align-items:center;
  gap:12px;
  padding:20px 24px;
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(180deg,rgba(208,85,108,0.18),transparent 40%),
    linear-gradient(180deg,rgba(156,43,63,0.35),rgba(107,30,44,0.35));
  backdrop-filter:saturate(140%) blur(6px);
  position:sticky;top:0;z-index:10;
  animation: topbarShine 8s ease-in-out infinite;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-img{height:56px;width:auto;display:block}
.brand-badge{
  display:inline-block;margin:0 auto;border-radius:16px;overflow:hidden;
  background:transparent;
  box-shadow:0 16px 28px rgba(156,43,63,0.18)
}
.topbar .brand-badge .brand-img{height:60px}
.topbar .brand-badge{transform:translateY(48px)}
.logo{
  width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(160deg,var(--accent),var(--accent-2));
  color:#7a3a42;font-size:20px;font-weight:700;
  box-shadow:0 8px 16px rgba(163,92,105,0.20);
}
.brand-name{font-weight:800;letter-spacing:.3px;color:var(--brand)}
.emoji{opacity:.35}
.brand-tagline{font-size:12px;color:var(--muted)}
.topbar > .brand{grid-column:2;justify-self:start;display:flex;align-items:center}
.topbar > .user{grid-column:2;justify-self:end;display:flex;align-items:center}
.user{display:flex;align-items:center;gap:10px}
.greeting{color:var(--muted)}
.avatar{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;font-weight:600;
  background:linear-gradient(160deg,var(--brand),var(--brand-2));
  border:1px solid var(--border)
}
.container{padding:24px;max-width:1320px;margin:0 auto}
.dash-head{display:flex;align-items:center;justify-content:flex-start;margin-bottom:8px}
.dash-clock{display:flex;align-items:center;gap:14px}
.dash-date{
  color:var(--brand);font-weight:700;font-size:15px;
  background:linear-gradient(180deg,#ffffff,#faf7f8);
  border:1px solid var(--border);
  border-radius:12px;padding:6px 10px;
  box-shadow:0 6px 12px rgba(0,0,0,.06)
}
.kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;margin-bottom:20px
}
.kpi{
  background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(250,250,250,0.95));
  border:1px solid var(--border);
  border-radius:14px;padding:18px;box-shadow:var(--shadow-soft);
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.kpi-title{color:var(--muted);font-size:13px}
.kpi-value{font-size:26px;font-weight:800;margin-top:8px;color:var(--brand)}
.kpi-sub{font-size:12px;color:var(--success);margin-top:4px}
.progress{height:8px;background:#f0f0f0;border-radius:999px;margin-top:10px;border:1px solid var(--border)}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--brand),var(--accent))}
.modules{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;margin-bottom:20px
}
.module{
  background:linear-gradient(180deg,#ffffff,#f7f7f7);
  border:1px solid var(--border);
  border-radius:14px;padding:18px 16px;display:flex;align-items:center;gap:12px;
  color:var(--text);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow:var(--shadow-soft)
}
.module:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover), inset 0 1px 0 rgba(255,255,255,0.60);
  border-color:#c9c9c9
}
.module-icon{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  font-size:22px;
  color:var(--brand);
  background:none;
  filter:none;
  mix-blend-mode: normal;
  font-family:"Segoe UI Emoji","Segoe UI Symbol","Arial Unicode MS",system-ui;
  transition: color .12s ease;
}
.module-icon .icon-svg{width:24px;height:24px;display:block}
.module:hover .module-icon{color:var(--accent)}
.module-title{font-weight:600}
.grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:auto auto;
  gap:16px
}
.card{
  background:linear-gradient(180deg,#ffffff,#f7f7f7);
  border:1px solid var(--border);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft)
}
.card-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border)}
.card-title{font-weight:800;color:var(--brand)}
.card-subtitle{color:var(--muted);font-size:12px}
.chart{grid-column:1/2}
.tasks{grid-column:2/3}
.alerts{grid-column:1/2}
.calendar{grid-column:2/3}
.task-list{list-style:none;margin:0;padding:0}
.task-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.task-left{display:flex;align-items:center;gap:10px}
.task-checkbox{width:18px;height:18px;border-radius:6px;border:1px solid var(--border);display:grid;place-items:center;background:#f6f6f6}
.task-add{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}
.task-add input{
  flex:1;border-radius:10px;border:1px solid var(--border);background:#ffffff;color:var(--text);padding:10px
}
.task-add button{
  border-radius:10px;border:1px solid var(--border);
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#fff;padding:10px 14px;font-weight:600
}
.clock{grid-column:1/2}
.clock-wrap{display:grid;place-items:center;padding:20px}
.clock-face{
  width:180px;height:180px;border-radius:999px;position:relative;
  background:radial-gradient(120px 120px at 50% 50%, #fff 40%, #f9f0f3 70%);
  border:2px solid var(--brand-2);box-shadow:var(--shadow-soft)
}
.clock-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:999px;background:var(--brand)
}
.clock-hand{
  position:absolute;left:50%;bottom:50%;
  transform-origin:50% 100%;transform:rotate(0deg);
  border-radius:999px
}
.clock-hand.hour{width:6px;height:48px;background:var(--brand)}
.clock-hand.minute{width:4px;height:70px;background:var(--accent-2)}
.clock-hand.second{width:2px;height:80px;background:#d66}
.clock-tick{position:absolute;left:50%;top:50%;width:2px;height:10px;background:#bbb;border-radius:2px;transform-origin:0 70px}
.clock-tick.major{height:14px;background:#888}
.clock-face.sm{
  width:80px;height:80px;border-radius:999px;position:relative;
  background:radial-gradient(64px 64px at 50% 50%, #fff 40%, #f9f0f3 70%);
  border:1px solid var(--brand-2);box-shadow:0 8px 16px rgba(0,0,0,.10)
}
.clock-face.sm .clock-center{width:7px;height:7px}
.clock-face.sm .clock-hand.hour{width:3px;height:24px;background:var(--brand)}
.clock-face.sm .clock-hand.minute{width:2px;height:34px;background:var(--accent-2)}
.clock-face.sm .clock-hand.second{width:1px;height:38px;background:#d66}
.alert-list{list-style:none;margin:0;padding:0}
.alert-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.alert-left{display:flex;align-items:center;gap:10px}
.alert-badge{
  width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;
  background:linear-gradient(160deg,var(--brand),var(--accent));color:#fff;font-weight:700;font-size:12px
}
.calendar-controls{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:12px}
.cal-cell{
  aspect-ratio:1/1;border:1px solid var(--border);border-radius:14px;
  display:grid;place-items:center;background:#ffffff;color:var(--text)
}
.cal-cell.today{border-color:var(--accent)}
.cal-cell:hover{background:#f9f0f2}
.cal-cell.muted{color:var(--muted)}
.cal-cell.vac-selected{border-color:var(--brand);background:#f9f0f2}
.cal-cell.vac-reservado{background:rgba(156,43,63,0.12);border-color:var(--accent)}
.cal-cell.vac-aprobado{background:rgba(76,175,122,0.12);border-color:var(--success)}
.cal-cell.inc-incapacidad{background:rgba(222,45,65,0.15);border-color:#de2d41}
.cal-cell.inc-sin-goce{background:rgba(120,120,120,0.12);border-color:#888}
.cal-cell.inc-con-goce{background:rgba(65,105,225,0.12);border-color:#4169e1}
.cal-cell.inc-especial{background:rgba(138,43,226,0.12);border-color:#8a2be2}
.modal{
  position:fixed;inset:0;background:rgba(6,8,7,.6);display:none;align-items:stretch;justify-content:stretch;padding:0;z-index:20
}
.modal-content{
  width:100vw;height:100vh;background:linear-gradient(180deg,#ffffff,#f7f7f7);
  border:0;border-radius:0;overflow:hidden;display:flex;flex-direction:column
}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}
.modal-title{font-weight:700}
.modal-body{padding:16px;overflow:auto;flex:1}
#repartidoresMap{width:100%;height:420px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
@media (max-width:1024px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .modules{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr;grid-template-rows:auto}
  .chart,.alerts,.tasks,.calendar{grid-column:auto}
}
.btn{border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;padding:10px 14px;font-weight:600}
.btn.secondary{background:linear-gradient(180deg,#ececec,#dfdfdf);color:#333}
.btn:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.btn.danger{background:linear-gradient(180deg,#ff6b6b,#ff4d4d);border-color:#7a2d2d}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.search{flex:1;min-width:220px;border-radius:10px;border:1px solid var(--border);background:#ffffff;color:var(--text);padding:10px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px 12px;text-align:left}
.table th{color:var(--muted);font-weight:600}
.table tbody tr:nth-child(even){background:#fbfbfb}
.table tbody tr:hover{background:#f9f0f2}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#f7f7f7}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.badge-pendiente{background:rgba(156,43,63,0.12);color:var(--brand);border:1px solid rgba(156,43,63,0.28)}
.badge-aprobado{background:rgba(76,175,122,0.12);color:var(--success);border:1px solid rgba(76,175,122,0.28)}
.badge-rechazado{background:rgba(232,107,107,0.12);color:var(--danger);border:1px solid rgba(232,107,107,0.28)}
.badge-cancelado{background:#f0f0f0;color:var(--muted);border:1px solid var(--border)}
.badge-seleccionado{background:rgba(156,43,63,0.10);color:var(--brand);border:1px solid rgba(156,43,63,0.22)}
.layout-2col{display:grid;grid-template-columns:320px 1fr;gap:12px;align-items:start}
.side-panel{background:#ffffff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-soft);padding:12px;display:grid;gap:10px}
.panel-title{font-weight:700;color:var(--brand)}
.legend-list{display:grid;gap:8px}
.legend-item{display:flex;align-items:center;gap:8px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.form-grid input,.form-grid select,.form-grid textarea{border-radius:10px;border:1px solid var(--border);background:#ffffff;color:var(--text);padding:10px;width:100%}
.form-actions{display:flex;gap:8px;margin-top:12px}
.modal-tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);margin-bottom:12px}
.modal-tab{padding:8px 12px;border-radius:10px;background:#ffffff;border:1px solid var(--border);cursor:pointer}
.modal-tab.active{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff}
.section-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.section-card{background:linear-gradient(180deg,#ffffff,#f7f7f7);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-soft);padding:14px;display:grid;gap:8px}
.help{font-size:12px;color:var(--muted)}
@media (max-width:1024px){
  .section-grid{grid-template-columns:1fr}
}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:12px 12px 0}
.weekday{color:var(--muted);text-align:center;font-weight:600}
.calendar-compact{max-width:560px;margin:0 auto}
.calendar-compact.calendar-grid{gap:4px;padding:8px}
.calendar-compact.cal-weekdays{gap:4px;padding:8px 8px 0}
.calendar-compact .cal-cell{font-size:12px;border-radius:12px}
.calendar-grid#calendarGrid .cal-cell{aspect-ratio:auto;min-height:110px;display:flex;align-items:flex-start;justify-content:flex-start;padding:8px}
#calendarGrid .cal-day{font-weight:700;margin-bottom:4px}
#calendarGrid .cal-names{width:100%}
#calendarGrid .cal-name{font-size:11px;color:#475569;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend-inline{display:flex;align-items:center;gap:16px}
.legend-dot{width:12px;height:12px;border-radius:999px;border:1px solid var(--border);display:inline-block;margin-right:6px}
.login-panel{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:30;padding:24px;
  background:
    radial-gradient(1200px 420px at 18% 12%, rgba(156,43,63,0.16) 28%, transparent 60%),
    radial-gradient(1200px 420px at 82% 88%, rgba(208,85,108,0.14) 28%, transparent 60%),
    linear-gradient(180deg,#fff6f8,#ffe3ea),
    url("trans.png") center/cover no-repeat
  ;
  background-blend-mode: soft-light;
  filter: saturate(98%) brightness(102%);
}
.login-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120px 36px at 18% 22%, rgba(255,255,255,0.24) 30%, transparent 60%),
    radial-gradient(140px 40px at 32% 70%, rgba(255,255,255,0.18) 30%, transparent 60%),
    radial-gradient(130px 38px at 68% 28%, rgba(255,255,255,0.20) 30%, transparent 60%),
    radial-gradient(120px 36px at 82% 76%, rgba(255,255,255,0.16) 30%, transparent 60%);
  filter: blur(2px);
}
.login-card{
  width:min(520px,100%);
  background:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,247,249,0.78));
  border:1px solid #eac3cd;border-radius:18px;
  box-shadow:0 18px 40px rgba(156,43,63,0.18);
  backdrop-filter: blur(10px) saturate(110%) brightness(102%);
  padding:20px;display:grid;gap:12px
}
.login-brand{display:flex;align-items:center;justify-content:center;gap:12px}
.login-brand .brand-img{height:64px}
.login-brand .brand-badge{filter:saturate(100%) brightness(102%)}
.topbar .brand-badge .brand-img{height:60px}
.login-brand .brand-img{margin:0 auto;filter:saturate(92%) brightness(102%) drop-shadow(0 8px 16px rgba(0,0,0,0.12))}
.login-title{font-weight:800;color:var(--brand);font-size:22px;letter-spacing:.3px;text-align:center}
.login-subtitle{color:var(--muted);text-align:center;font-size:13px}
.login-body{display:grid;gap:10px}
.login-actions{display:flex;gap:8px;justify-content:flex-end}
.login-card .form-grid{grid-template-columns:1fr;gap:14px}
.form-item{display:grid;gap:6px}
.form-item label{font-size:12px;color:#7a3a42;font-weight:600;letter-spacing:.2px}
.input-wrap{position:relative}
.input-icon-left{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--brand);opacity:.35;font-size:18px;line-height:1;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Segoe UI Symbol",system-ui
}
.input-icon-right{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--brand);opacity:.35;font-size:18px;cursor:pointer;line-height:1;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Segoe UI Symbol",system-ui
}
.login-card .form-grid input,.login-card .form-grid select,.login-card .form-grid textarea{
  background:#ffffff;
  border-color:#eac3cd;color:#333;
  box-sizing:border-box;
  max-width:100%;
}
.login-card .form-grid input{
  padding-left:40px;padding-right:40px;border-radius:12px;
  box-shadow:0 8px 16px rgba(156,43,63,0.08)
}
.login-card .form-grid input::placeholder{color:#a03a4d}
.login-card .form-actions{justify-content:center}
.login-card .form-actions .btn{
  background:linear-gradient(180deg,rgba(156,43,63,0.92),rgba(107,30,44,0.92));
  color:#fff;border-color:#7a3a42
}
.login-card .form-actions .btn.secondary{
  background:linear-gradient(180deg,#ffe9ee,#ffd6df);
  color:#7a3a42;border-color:#e6b7c1
}
.login-forgot{margin-top:12px;text-align:center;color:#a03a4d;font-size:12px}
.legend-dot.selected{background:rgba(156,43,63,0.10);border-color:var(--accent)}
.legend-dot.reservado{background:rgba(156,43,63,0.12);border-color:var(--accent)}
.nav-stack{margin-left:auto;display:grid;gap:8px}
.nav-stack .btn{min-width:140px}

.toast-box{position:fixed;top:16px;right:16px;display:grid;gap:8px;z-index:50}
.toast{
  background:#ffffff;color:var(--text);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-soft);padding:10px 12px;min-width:220px
}
.toast.success{background:rgba(76,175,122,0.10);border-color:var(--success)}
.toast.danger{background:rgba(232,107,107,0.10);border-color:var(--danger)}
.toast.info{background:rgba(156,43,63,0.08);border-color:var(--accent)}
.notif{position:relative;display:flex;align-items:center;gap:6px;margin-right:8px}
.notif-btn{border:1px solid #eac3cd;border-radius:10px;background:#ffffff;color:var(--brand);padding:6px 10px;line-height:1;
  font-family:"Segoe UI Symbol","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",system-ui}
.notif-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand);color:#fff;font-size:12px;font-weight:700;border:1px solid var(--brand-2)}
.notif-dropdown{position:absolute;top:40px;right:0;background:#ffffff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-soft);min-width:260px;display:none;overflow:hidden}
.notif-dropdown.open{display:block}
.notif-item{display:flex;align-items:flex-start;gap:8px;padding:10px;border-bottom:1px solid var(--border)}
.notif-item:last-child{border-bottom:none}
.notif-type{font-weight:600;color:var(--brand)}
.notif-time{margin-left:auto;color:var(--muted);font-size:12px}
.notif-actions{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:#fbfbfb}
.notif-action{border:1px solid var(--border);border-radius:10px;background:#ffffff;color:var(--text);padding:6px 10px;font-size:12px}
.notif-action:hover{box-shadow:var(--shadow-hover)}
.app-locked .topbar{display:none}
.app-locked .container{display:none}
.welcome-overlay{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:40;
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(156,43,63,0.16) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(208,85,108,0.14) 28%, transparent 60%),
    linear-gradient(180deg,#fff,#ffe9ee),
    url("trans.png") center/cover no-repeat;
  background-blend-mode: soft-light;
  backdrop-filter: blur(2px) saturate(110%);
}
.welcome-card{
  background:linear-gradient(180deg,rgba(255,255,255,0.82),rgba(255,247,249,0.82));
  border:1px solid #eac3cd;border-radius:18px;box-shadow:0 24px 48px rgba(156,43,63,0.18);
  padding:56px 68px;display:grid;gap:12px;transform:translateY(12px) scale(.98);opacity:0;
  animation: welcomeIn .6s ease forwards
}
.welcome-title{font-weight:800;color:var(--brand);font-size:56px;letter-spacing:.3px;text-align:center}
.welcome-sub{color:var(--text);text-align:center;font-size:18px}
@keyframes welcomeIn{
  0%{opacity:0;transform:translateY(14px) scale(.98)}
  60%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.panel-enter{
  animation: panelFade .5s ease forwards
}
@keyframes panelFade{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:translateY(0)}
}
body.theme-yellow{
  --brand:#b38800;
  --brand-2:#8c6d00;
  --accent:#f4c542;
  --accent-2:#e3b02f;
  --bg:#fffaf0;
  --border:#e8d9a6;
  background:
    radial-gradient(1000px 320px at 20% 10%, rgba(244,197,66,0.18) 28%, transparent 60%),
    radial-gradient(1000px 320px at 80% 90%, rgba(179,136,0,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#fffaf0,#fff3d6);
}
body.theme-yellow .topbar{
  background:
    linear-gradient(180deg,rgba(244,197,66,0.22),transparent 40%),
    linear-gradient(180deg,rgba(179,136,0,0.35),rgba(140,109,0,0.35));
}

body.theme-sanvalentin{
  --brand:#b0233a;
  --brand-2:#7a1a2a;
  --accent:#ff6b8f;
  --accent-2:#e04a70;
  --bg:#fff1f5;
  --border:#f2c0cd;
  background:
    radial-gradient(1100px 360px at 18% 8%, rgba(224,74,112,0.18) 28%, transparent 60%),
    radial-gradient(1100px 360px at 82% 92%, rgba(176,35,58,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#fff6f8,#ffe3ea);
}
body.theme-sanvalentin .topbar{
  background:
    linear-gradient(180deg,rgba(224,74,112,0.20),transparent 40%),
    linear-gradient(180deg,rgba(176,35,58,0.35),rgba(122,26,42,0.35));
}

body.theme-halloween{
  --brand:#ff8c1a;
  --brand-2:#cc6f14;
  --accent:#ffd54f;
  --accent-2:#e6c24a;
  --bg:#1a1a1a;
  --panel:#212121;
  --text:#f2f2f2;
  --muted:#cfcfcf;
  --border:#3a3a3a;
  background:
    radial-gradient(1100px 360px at 20% 8%, rgba(255,140,26,0.16) 28%, transparent 60%),
    radial-gradient(1100px 360px at 80% 92%, rgba(17,17,17,0.40) 28%, transparent 60%),
    linear-gradient(180deg,#101010,#1a1a1a);
}
body.theme-halloween .topbar{
  background:
    linear-gradient(180deg,rgba(255,140,26,0.22),transparent 40%),
    linear-gradient(180deg,rgba(17,17,17,0.60),rgba(17,17,17,0.60));
}

body.theme-muertos{
  --brand:#5b1a7a;
  --brand-2:#43135c;
  --accent:#f4a300;
  --accent-2:#db9200;
  --bg:#f9f5ff;
  --border:#ddc7f2;
  background:
    radial-gradient(1100px 360px at 22% 8%, rgba(91,26,122,0.18) 28%, transparent 60%),
    radial-gradient(1100px 360px at 78% 92%, rgba(244,163,0,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#fbf7ff,#f3eaff);
}
body.theme-muertos .topbar{
  background:
    linear-gradient(180deg,rgba(244,163,0,0.20),transparent 40%),
    linear-gradient(180deg,rgba(91,26,122,0.35),rgba(67,19,92,0.35));
}
body.theme-muertos .card{
  box-shadow:0 16px 32px rgba(91,26,122,.20), inset 0 1px 0 rgba(255,255,255,.60)
}
body.theme-muertos .module{
  border-color:#e7d6f7
}

body.theme-navidad{
  --brand:#2e5e3b;
  --brand-2:#1f4129;
  --accent:#d33c3c;
  --accent-2:#a52a2a;
  --bg:#eef7ef;
  --border:#cfe3d6;
  background:
    radial-gradient(1100px 360px at 20% 8%, rgba(211,60,60,0.16) 28%, transparent 60%),
    radial-gradient(1100px 360px at 80% 92%, rgba(46,94,59,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#f3fbf4,#e9f5ea);
}
body.theme-navidad .topbar{
  background:
    linear-gradient(180deg,rgba(211,60,60,0.22),transparent 40%),
    linear-gradient(180deg,rgba(46,94,59,0.35),rgba(31,65,41,0.35));
}

body.theme-newyear{
  --brand:#b99300;
  --brand-2:#8a7300;
  --accent:#ffd54f;
  --accent-2:#e6c24a;
  --bg:#0f0f0f;
  --text:#f5f5f5;
  --muted:#d0d0d0;
  --panel:#141414;
  --border:#2a2a2a;
  background:
    radial-gradient(1100px 360px at 20% 8%, rgba(185,147,0,0.20) 28%, transparent 60%),
    radial-gradient(1100px 360px at 80% 92%, rgba(15,15,15,0.45) 28%, transparent 60%),
    linear-gradient(180deg,#0a0a0a,#121212);
}
body.theme-newyear .topbar{
  background:
    linear-gradient(180deg,rgba(185,147,0,0.24),transparent 40%),
    linear-gradient(180deg,rgba(15,15,15,0.65),rgba(15,15,15,0.65));
}
body.theme-halloween .card,
body.theme-newyear .card{
  background:linear-gradient(180deg,var(--panel),#1b1b1b);
  border-color:var(--border);
  box-shadow:0 12px 24px rgba(0,0,0,.30);
}
body.theme-halloween .module,
body.theme-newyear .module{
  background:linear-gradient(180deg,var(--panel),#1b1b1b);
  border-color:var(--border);
}
body.theme-halloween .btn.secondary,
body.theme-newyear .btn.secondary{
  background:linear-gradient(180deg,#2a2a2a,#1d1d1d);
  color:var(--text);
  border-color:var(--border);
}
body.theme-halloween .table tbody tr:nth-child(even),
body.theme-newyear .table tbody tr:nth-child(even){
  background:#1d1d1d;
}
body.theme-halloween .table tbody tr:hover,
body.theme-newyear .table tbody tr:hover{
  background:#242424;
}
body.theme-halloween .cal-cell,
body.theme-newyear .cal-cell{
  background:#1d1d1d;
  color:var(--text);
  border-color:var(--border)
}
body.theme-halloween .cal-cell:hover,
body.theme-newyear .cal-cell:hover{
  background:#242424
}

body.theme-spring{
  --brand:#2f7a4a;
  --brand-2:#215737;
  --accent:#ff8fb3;
  --accent-2:#e96c96;
  --bg:#f4fff5;
  --border:#cfe8d6;
  background:
    radial-gradient(1100px 360px at 20% 8%, rgba(233,108,150,0.16) 28%, transparent 60%),
    radial-gradient(1100px 360px at 80% 92%, rgba(47,122,74,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#f7fff8,#ecfff1);
}
body.theme-spring .topbar{
  background:
    linear-gradient(180deg,rgba(233,108,150,0.20),transparent 40%),
    linear-gradient(180deg,rgba(47,122,74,0.35),rgba(33,87,55,0.35));
}

body.theme-summer{
  --brand:#0b7a77;
  --brand-2:#095a58;
  --accent:#ffd54f;
  --accent-2:#f4c342;
  --bg:#f0fffb;
  --border:#c7ebe8;
  background:
    radial-gradient(1100px 360px at 20% 8%, rgba(255,213,79,0.18) 28%, transparent 60%),
    radial-gradient(1100px 360px at 80% 92%, rgba(11,122,119,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#f5fffb,#eafff7);
}
body.theme-summer .topbar{
  background:
    linear-gradient(180deg,rgba(255,213,79,0.22),transparent 40%),
    linear-gradient(180deg,rgba(11,122,119,0.35),rgba(9,90,88,0.35));
}

body.theme-autumn{
  --brand:#b45309;
  --brand-2:#8a3f07;
  --accent:#d97706;
  --accent-2:#a96205;
  --bg:#fff7f0;
  --border:#efd6ba;
  background:
    radial-gradient(1100px 360px at 20% 8%, rgba(217,119,6,0.18) 28%, transparent 60%),
    radial-gradient(1100px 360px at 80% 92%, rgba(180,83,9,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#fff7f0,#feefdf);
}
body.theme-autumn .topbar{
  background:
    linear-gradient(180deg,rgba(217,119,6,0.22),transparent 40%),
    linear-gradient(180deg,rgba(180,83,9,0.35),rgba(138,63,7,0.35));
}

body.theme-winter{
  --brand:#1f4a7a;
  --brand-2:#153357;
  --accent:#6bb8ff;
  --accent-2:#409cf1;
  --bg:#f0f7ff;
  --border:#c5d8ee;
  background:
    radial-gradient(1100px 360px at 20% 8%, rgba(64,156,241,0.18) 28%, transparent 60%),
    radial-gradient(1100px 360px at 80% 92%, rgba(31,74,122,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#f3f8ff,#e9f2ff);
}
body.theme-winter .topbar{
  background:
    linear-gradient(180deg,rgba(64,156,241,0.22),transparent 40%),
    linear-gradient(180deg,rgba(31,74,122,0.35),rgba(21,51,87,0.35));
}
body.theme-navidad .login-panel{
  background:
    radial-gradient(1200px 420px at 22% 12%, rgba(211,60,60,0.16) 28%, transparent 60%),
    radial-gradient(1200px 420px at 78% 88%, rgba(46,94,59,0.14) 28%, transparent 60%),
    linear-gradient(180deg,#f6fffa,#e9f5ea);
  background-blend-mode: soft-light;
}
body.theme-newyear .login-panel{
  background:
    radial-gradient(1200px 420px at 22% 12%, rgba(185,147,0,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 78% 88%, rgba(15,15,15,0.40) 28%, transparent 60%),
    linear-gradient(180deg,#0a0a0a,#121212);
  background-blend-mode: soft-light;
}
body.theme-halloween .login-panel{
  background:
    radial-gradient(1200px 420px at 22% 12%, rgba(255,140,26,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 78% 88%, rgba(17,17,17,0.45) 28%, transparent 60%),
    linear-gradient(180deg,#101010,#1a1a1a);
  background-blend-mode: soft-light;
}
body.theme-muertos .login-panel{
  background:
    radial-gradient(1200px 420px at 22% 12%, rgba(91,26,122,0.16) 28%, transparent 60%),
    radial-gradient(1200px 420px at 78% 88%, rgba(244,163,0,0.14) 28%, transparent 60%),
    linear-gradient(180deg,#fbf7ff,#f3eaff);
  background-blend-mode: soft-light;
}
body.theme-sanvalentin .login-panel{
  background:
    radial-gradient(1200px 420px at 22% 12%, rgba(224,74,112,0.16) 28%, transparent 60%),
    radial-gradient(1200px 420px at 78% 88%, rgba(176,35,58,0.14) 28%, transparent 60%),
    linear-gradient(180deg,#fff6f8,#ffe3ea);
  background-blend-mode: soft-light;
}
body.theme-spring .login-panel{
  background:
    radial-gradient(1200px 420px at 22% 12%, rgba(47,122,74,0.16) 28%, transparent 60%),
    radial-gradient(1200px 420px at 78% 88%, rgba(233,108,150,0.14) 28%, transparent 60%),
    linear-gradient(180deg,#f7fff8,#ecfff1);
  background-blend-mode: soft-light;
}
body.theme-summer .login-panel{
  background:
    radial-gradient(1200px 420px at 22% 12%, rgba(11,122,119,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 78% 88%, rgba(255,213,79,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#f5fffb,#eafff7);
  background-blend-mode: soft-light;
}
body.theme-autumn .login-panel{
  background:
    radial-gradient(1200px 420px at 22% 12%, rgba(217,119,6,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 78% 88%, rgba(180,83,9,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#fff7f0,#feefdf);
  background-blend-mode: soft-light;
}
body.theme-winter .login-panel{
  background:
    radial-gradient(1200px 420px at 22% 12%, rgba(31,74,122,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 78% 88%, rgba(64,156,241,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#f3f8ff,#e9f2ff);
  background-blend-mode: soft-light;
}
body.theme-navidad .welcome-overlay{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(211,60,60,0.16) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(46,94,59,0.14) 28%, transparent 60%),
    linear-gradient(180deg,#fff,#f3fbf4);
  background-blend-mode: soft-light;
}
body.theme-newyear .welcome-overlay{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(185,147,0,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(15,15,15,0.45) 28%, transparent 60%),
    linear-gradient(180deg,#0f0f0f,#141414);
  background-blend-mode: soft-light;
}
body.theme-halloween .welcome-overlay{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(255,140,26,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(17,17,17,0.45) 28%, transparent 60%),
    linear-gradient(180deg,#0f0f0f,#141414);
  background-blend-mode: soft-light;
}
body.theme-sanvalentin .welcome-overlay{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(224,74,112,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(176,35,58,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#fff,#ffe3ea);
  background-blend-mode: soft-light;
}
body.theme-muertos .welcome-overlay{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(91,26,122,0.16) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(244,163,0,0.14) 28%, transparent 60%),
    linear-gradient(180deg,#fbf7ff,#f3eaff);
  background-blend-mode: soft-light;
}
body.theme-spring .welcome-overlay{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(47,122,74,0.16) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(233,108,150,0.14) 28%, transparent 60%),
    linear-gradient(180deg,#f7fff8,#ecfff1);
  background-blend-mode: soft-light;
}
body.theme-summer .welcome-overlay{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(11,122,119,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(255,213,79,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#f5fffb,#eafff7);
  background-blend-mode: soft-light;
}
body.theme-autumn .welcome-overlay{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(217,119,6,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(180,83,9,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#fff7f0,#feefdf);
  background-blend-mode: soft-light;
}
body.theme-winter .welcome-overlay{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(31,74,122,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(64,156,241,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#f3f8ff,#e9f2ff);
  background-blend-mode: soft-light;
}
body.theme-yellow .welcome-overlay{
  background:
    radial-gradient(1200px 420px at 20% 10%, rgba(244,197,66,0.18) 28%, transparent 60%),
    radial-gradient(1200px 420px at 80% 90%, rgba(179,136,0,0.18) 28%, transparent 60%),
    linear-gradient(180deg,#fffaf0,#fff3d6);
  background-blend-mode: soft-light;
}
.bg-layer{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.18
}
body.theme-navidad .bg-layer{
  background:
    repeating-linear-gradient(45deg, rgba(211,60,60,0.14) 0 18px, rgba(46,94,59,0.14) 18px 36px),
    radial-gradient(600px 220px at 20% 12%, rgba(211,60,60,0.18) 28%, transparent 60%),
    radial-gradient(600px 220px at 80% 88%, rgba(46,94,59,0.18) 28%, transparent 60%);
  background-blend-mode: soft-light;
}
body.theme-newyear .bg-layer{
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,213,79,0.35) 50%, transparent 51%),
    radial-gradient(2px 2px at 42% 28%, rgba(255,213,79,0.30) 50%, transparent 51%),
    radial-gradient(2px 2px at 72% 62%, rgba(255,213,79,0.28) 50%, transparent 51%),
    radial-gradient(2px 2px at 28% 78%, rgba(255,213,79,0.30) 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 34%, rgba(255,213,79,0.28) 50%, transparent 51%);
  background-blend-mode: screen;
}
body.theme-halloween .bg-layer{
  background:
    repeating-conic-gradient(from 0deg, rgba(255,140,26,0.10) 0 10deg, transparent 10deg 20deg),
    radial-gradient(700px 240px at 20% 12%, rgba(17,17,17,0.45) 28%, transparent 60%),
    radial-gradient(700px 240px at 80% 88%, rgba(255,140,26,0.18) 28%, transparent 60%);
  background-blend-mode: soft-light;
}
body.theme-muertos .bg-layer{
  background:
    repeating-linear-gradient(90deg, rgba(244,163,0,0.10) 0 10px, transparent 10px 20px),
    radial-gradient(600px 220px at 24% 10%, rgba(91,26,122,0.18) 28%, transparent 60%),
    radial-gradient(600px 220px at 76% 90%, rgba(244,163,0,0.18) 28%, transparent 60%);
  background-blend-mode: soft-light;
}
body.theme-sanvalentin .bg-layer{
  background:
    repeating-linear-gradient(45deg, rgba(224,74,112,0.12) 0 14px, transparent 14px 28px),
    radial-gradient(600px 220px at 18% 12%, rgba(224,74,112,0.18) 28%, transparent 60%),
    radial-gradient(600px 220px at 82% 88%, rgba(176,35,58,0.18) 28%, transparent 60%);
  background-blend-mode: soft-light;
}
body.theme-spring .bg-layer{
  background:
    radial-gradient(2px 2px at 15% 28%, rgba(233,108,150,0.20) 50%, transparent 51%),
    radial-gradient(2px 2px at 65% 62%, rgba(47,122,74,0.20) 50%, transparent 51%),
    radial-gradient(2px 2px at 35% 78%, rgba(233,108,150,0.18) 50%, transparent 51%);
  background-blend-mode: soft-light;
}
body.theme-summer .bg-layer{
  background:
    conic-gradient(from 180deg at 50% 50%, rgba(255,213,79,0.12), transparent 25%),
    radial-gradient(600px 220px at 20% 12%, rgba(11,122,119,0.18) 28%, transparent 60%),
    radial-gradient(600px 220px at 80% 88%, rgba(255,213,79,0.18) 28%, transparent 60%);
  background-blend-mode: soft-light;
}
body.theme-autumn .bg-layer{
  background:
    repeating-linear-gradient(135deg, rgba(217,119,6,0.12) 0 16px, transparent 16px 32px),
    radial-gradient(600px 220px at 22% 12%, rgba(180,83,9,0.18) 28%, transparent 60%),
    radial-gradient(600px 220px at 78% 88%, rgba(217,119,6,0.18) 28%, transparent 60%);
  background-blend-mode: soft-light;
}
body.theme-winter .bg-layer{
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,0.60) 50%, transparent 51%),
    radial-gradient(2px 2px at 42% 28%, rgba(255,255,255,0.55) 50%, transparent 51%),
    radial-gradient(2px 2px at 72% 62%, rgba(255,255,255,0.55) 50%, transparent 51%),
    radial-gradient(2px 2px at 28% 78%, rgba(255,255,255,0.58) 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 34%, rgba(255,255,255,0.55) 50%, transparent 51%);
  background-blend-mode: screen;
}
.fx-layer{
  position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden
}
.fx{position:absolute;opacity:.85;will-change:transform}
.fx.snow{color:#ffffff;text-shadow:0 2px 6px rgba(0,0,0,.18)}
.fx.heart{color:var(--accent)}
.fx.bat{color:#111111;opacity:.75}
.fx.confetti{color:var(--accent)}
.fx.petal{color:var(--accent)}
.fx.leaf{color:#b45309}
.fx.sparkle{color:#ffd54f;text-shadow:0 2px 6px rgba(0,0,0,.12)}
.fx.skull{color:#4a1a62}
.fx.candle{color:#f4a300}
@keyframes fxFall{
  0%{transform:translateY(-10vh)}
  100%{transform:translateY(110vh)}
}
@keyframes fxRise{
  0%{transform:translateY(110vh)}
  100%{transform:translateY(-10vh)}
}
@keyframes fxDrift{
  0%{transform:translateX(-10vw)}
  100%{transform:translateX(110vw)}
}
@keyframes fxFallWide{
  0%{transform:translate(-10vw,-10vh) rotate(0deg)}
  50%{transform:translate(10vw,50vh) rotate(180deg)}
  100%{transform:translate(-10vw,110vh) rotate(360deg)}
}
@keyframes fxSpin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes topbarShine{
  0%{filter:saturate(140%) brightness(100%)}
  50%{filter:saturate(160%) brightness(105%)}
  100%{filter:saturate(140%) brightness(100%)}
}
.muertos-banner{
  position:fixed;top:0;left:0;right:0;display:flex;justify-content:center;gap:6px;padding:6px 0;z-index:45;pointer-events:none
}
.papel{
  width:52px;height:28px;border-radius:4px;opacity:.9;
  box-shadow:0 4px 8px rgba(0,0,0,.18);
  animation:papelWave 6s ease-in-out infinite
}
.papel.c1{background:#c81d77}
.papel.c2{background:#f4a300}
.papel.c3{background:#2f7a4a}
.papel.c4{background:#5b1a7a}
.papel.c5{background:#0b7a77}
@keyframes papelWave{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(4px) rotate(2deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
.festive-banner{
  position:fixed;top:calc(var(--topbar-h) + 16px);left:0;right:0;display:flex;justify-content:center;z-index:46;pointer-events:none
}
.festive-card{
  font-family:"Great Vibes",cursive;
  font-size:60px;line-height:1;color:var(--brand);
  padding:8px 18px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.45));
  backdrop-filter: blur(6px);
  text-shadow:0 4px 16px rgba(0,0,0,.18)
}
body.theme-navidad .festive-card{color:#d33c3c;text-shadow:0 4px 16px rgba(165,42,42,.28)}
body.theme-newyear .festive-card{color:#ffd54f;text-shadow:0 4px 16px rgba(185,147,0,.28)}
.voice-fab{
  position:fixed;
  right:24px;
  bottom:24px;
  width:64px;
  height:64px;
  border-radius:999px;
  border:2px solid var(--brand-2);
  background:#ffffff;
  color:var(--brand);
  display:grid;place-items:center;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  z-index:20;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.voice-fab:hover{transform:scale(1.06);box-shadow:var(--shadow-hover)}
.voice-fab:active{transform:scale(.98)}
.voice-fab svg{display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}