/* ============================================================
   Mi Asistente Personal — Full Design System
   Dark / Light Theme System
   ============================================================ */
:root {
  /* ── Dark Theme (default) ─────────────────────────────── */
  --bg:          #07090f;
  --bg2:         #0a0e1a;
  --bg3:         #111827;
  --card:        #161d2e;
  --card-h:      #1e2640;
  --glass:       rgba(22,29,46,0.88);
  --border-h:    rgba(255,255,255,0.14);

  --indigo:    #6366f1;
  --indigo-d:  #4f52d0;
  --violet:    #8b5cf6;
  --emerald:   #10b981;
  --amber:     #f59e0b;
  --rose:      #f43f5e;
  --sky:       #0ea5e9;

  --t1: #f1f5f9;
  --t2: #94a3b8;
  --t3: #475569;

  --border:  rgba(255,255,255,0.07);
  --bfocus:  rgba(99,102,241,0.55);
  --bactive: rgba(99,102,241,0.35);

  --r1: 8px;  --r2: 14px;  --r3: 20px;  --r4: 28px;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --t:   0.22s var(--ease);
  --sh:  0 4px 32px rgba(0,0,0,0.45);
  --sg:  0 0 40px rgba(99,102,241,0.18);
  --sb:  0 8px 24px rgba(99,102,241,0.35);
}

/* ── Light Theme ─────────────────────────────────────────── */
:root.theme-light, html.theme-light, body.theme-light {
  --bg:    #f0f4ff;
  --bg2:   #e8eef8;
  --bg3:   #dde6f5;
  --card:  #ffffff;
  --card-h:#f3f7ff;
  --glass: rgba(255,255,255,0.88);
  --border-h: rgba(99,102,241,0.3);

  --t1: #0f172a;
  --t2: #475569;
  --t3: #94a3b8;

  --border:  rgba(0,0,0,0.09);
  --bfocus:  rgba(99,102,241,0.45);
  --bactive: rgba(99,102,241,0.25);

  --sh: 0 4px 24px rgba(0,0,0,0.10);
  --sg: 0 0 40px rgba(99,102,241,0.12);
  --sb: 0 8px 24px rgba(99,102,241,0.28);
}
body.theme-light #screen-menu {
  background:radial-gradient(ellipse 70% 45% at 50% -5%, rgba(99,102,241,.07) 0%, transparent 60%), var(--bg2);
}
body.theme-light .mh {
  background:rgba(240,244,255,.9);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
body.theme-light .mod-topbar {
  background:rgba(240,244,255,.92);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
body.theme-light .login-card {
  background:rgba(255,255,255,.95);
  border-color:rgba(99,102,241,.18);
  box-shadow: 0 24px 60px rgba(99,102,241,.12), 0 4px 16px rgba(0,0,0,.08);
}
body.theme-light .form-input {
  background:rgba(240,244,255,.7);
  color: var(--t1);
}
body.theme-light .search-input,
body.theme-light .filter-sel {
  color: var(--t1);
}
body.theme-light .filter-sel {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23475569' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.theme-light #screen-login {
  background:radial-gradient(ellipse 80% 55% at 50% 0%, rgba(99,102,241,.10) 0%, transparent 65%), #f0f4ff;
}
body.theme-light .orb-1 { opacity:.12; }
body.theme-light .orb-2 { opacity:.10; }
body.theme-light .orb-3 { opacity:.09; }
body.theme-light .task-item { box-shadow: 0 2px 10px rgba(0,0,0,.06); background:#ffffff; }
body.theme-light .task-item:hover { background:#f8faff; }
body.theme-light .mc { box-shadow: 0 4px 16px rgba(0,0,0,.07); background:#ffffff; }
body.theme-light .mc:hover { background:#f8faff; }
body.theme-light .modal-box { background:#ffffff; border-color:rgba(99,102,241,.25); box-shadow:0 24px 70px rgba(15,23,42,.18); }
body.theme-light .modal-header { border-bottom-color:rgba(0,0,0,.08); }
body.theme-light .modal-footer { border-top-color:rgba(0,0,0,.08); background:rgba(240,244,255,.6); }
body.theme-light .mf-input,
body.theme-light .mf-textarea,
body.theme-light .mf-select { background:#f8fafc; color:#0f172a; border-color:rgba(0,0,0,.15); }
body.theme-light .mf-input:focus,
body.theme-light .mf-textarea:focus,
body.theme-light .mf-select:focus { background:#ffffff; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(99,102,241,.18); }
body.theme-light .mf-select option,
body.theme-light .filter-sel option { background:#ffffff; color:#0f172a; }
body.theme-light .task-metric-card { background:#ffffff; border-color:rgba(0,0,0,.08); box-shadow:0 2px 8px rgba(0,0,0,.04); }
body.theme-light .task-metric-card:hover { background:#f8faff; }
body.theme-light .ag-day-card { background:#ffffff; box-shadow:0 2px 8px rgba(0,0,0,.05); }
body.theme-light .ag-mini-day { background:#ffffff; }
body.theme-light .ag-calendar-cell { background:#e8eef8; }
body.theme-light .ag-calendar-cell:hover { background:#dde6f5; }
body.theme-light .ag-calendar-cell.is-weekend { background:#e4e8f5; }
body.theme-light .ag-calendar-cell.empty-cell { background:rgba(0,0,0,.05); }
body.theme-light .cg-weekdays-row { background:#dde6f5; }
body.theme-light .cg-month-cells { background-color:rgba(0,0,0,.06); }
body.theme-light .calendar-grid-wrapper { box-shadow:0 4px 20px rgba(0,0,0,.08); }
body.theme-light .ag-cal-sheet { background:#e8eef8; border-color:rgba(0,0,0,.12); box-shadow:0 4px 12px rgba(0,0,0,.08); }
body.theme-light .cal-sheet-rings { background:#dde6f5; }
body.theme-light .cal-sheet-num { color:#1e293b; }
body.theme-light .cal-sheet-day { color:#475569; }
body.theme-light .ag-cal-sheet.today .cal-sheet-num { color:#4f46e5; }
body.theme-light .agenda-mini-calendar { background:#ffffff; box-shadow:0 2px 10px rgba(0,0,0,.06); }
body.theme-light .amc-day-btn { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.08); }
body.theme-light .amc-day-btn:hover { background:#f1f5f9; }
body.theme-light .amc-day-btn.is-weekend { background:rgba(244,63,94,.05); }
body.theme-light .acc-card { background:#ffffff; box-shadow:0 2px 10px rgba(0,0,0,.05); }
body.theme-light .monthly-summary-card { background:#ffffff; box-shadow:0 2px 10px rgba(0,0,0,.05); }
body.theme-light .msc-stat-box { background:#f8fafc; border-color:rgba(0,0,0,.08); }
body.theme-light .bstat { background:#ffffff; box-shadow:0 2px 8px rgba(0,0,0,.06); }
body.theme-light .bd-vert-card { background:#ffffff; box-shadow:0 2px 8px rgba(0,0,0,.06); }
body.theme-light .bd-vert-card:hover { background:#f8faff; }
body.theme-light .bd-card,
body.theme-light .ct-card { background:#ffffff; box-shadow:0 2px 10px rgba(0,0,0,.05); }
body.theme-light .ct-card:hover { background:#f8faff; }
body.theme-light .tx-table th { background:#f1f5f9; color:#475569; }
body.theme-light .tx-table td { border-bottom-color:rgba(0,0,0,.06); }
body.theme-light .tx-table tr:hover td { background:#f8fafc; }
body.theme-light .btn-back,
body.theme-light .btn-out,
body.theme-light .btn-out-sm { background:#ffffff; border-color:rgba(0,0,0,.12); color:#334155; }
body.theme-light .btn-back:hover,
body.theme-light .btn-out:hover,
body.theme-light .btn-out-sm:hover { background:#f1f5f9; color:#0f172a; }
body.theme-light .user-chip { background:#ffffff; border-color:rgba(0,0,0,.1); }
body.theme-light .task-pills-filter { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); }
body.theme-light .t-pill-btn { color:#475569; }
body.theme-light .t-pill-btn.active { background:#ffffff; color:#0f172a; box-shadow:0 1px 4px rgba(0,0,0,.1); }
body.theme-light .ttab { color:#64748b; }
body.theme-light .ttab.active { color:var(--indigo); border-bottom-color:var(--indigo); }
body.theme-light .confirm-task-text { background:rgba(99,102,241,.08); color:var(--indigo-d); }
body.theme-light .tasks-archived-header { background:rgba(16,185,129,.06); }
body.theme-light .task-archived-item { background:#f8fff9; border-color:rgba(16,185,129,.2); }
body.theme-light .ag-item { background:#f8fafc; border-color:rgba(0,0,0,.06); }
body.theme-light .ag-item:hover { background:#f1f5f9; }
body.theme-light .ag-note { color:#1e293b; }
body.theme-light .ag-direct-write-box { background:#f8fafc; border-color:rgba(0,0,0,.12); }
body.theme-light .ag-direct-write-box:focus-within { background:#fff; }
body.theme-light .btn-sec-alt { color:#334155; border-color:rgba(0,0,0,.12); }
body.theme-light .btn-sec-alt:hover { background:#f1f5f9; color:#0f172a; }
body.theme-light .menu-widget { background:#ffffff; }
body.theme-light .mw-item { background:#f8fafc; border-color:rgba(0,0,0,.08); }
body.theme-light .modal-overlay { background:rgba(0,0,0,.5); }

/* ── Theme Toggle Button ─────────────────────────────────── */
.btn-theme-toggle {
  width:44px; height:44px;
  background:var(--card); border:2px solid var(--border);
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; cursor:pointer; transition:all 0.25s var(--ease); flex-shrink:0;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  user-select:none; -webkit-user-select:none;
}
.btn-theme-toggle:hover {
  border-color:var(--indigo); background:var(--card-h);
  transform:scale(1.14) rotate(16deg);
  box-shadow:0 0 20px rgba(99,102,241,.5);
}
.btn-theme-toggle:active {
  transform:scale(0.92);
}
.btn-theme-toggle.spin {
  animation:themeBtnSpin .4s cubic-bezier(0.4,0,0.2,1);
}
@keyframes themeBtnSpin {
  0%   { transform:scale(0.85) rotate(0deg); }
  50%  { transform:scale(1.2) rotate(180deg); }
  100% { transform:scale(1) rotate(360deg); }
}

.login-top-actions {
  position:fixed; top:18px; right:22px; z-index:100;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,sans-serif; background:var(--bg2); color:var(--t1); min-height:100vh; overflow-x:hidden;
  transition:background-color 0.35s ease, color 0.3s ease;
}
#screen-login, #screen-menu, #screen-module, .login-card, .mh, .mod-topbar {
  transition:background 0.35s ease, background-color 0.35s ease, border-color 0.3s ease, color 0.3s ease;
}
button { font-family:inherit; cursor:pointer; }

/* ── Screens ─────────────────────────────────────────────── */
.screen { display:none; min-height:100vh; animation:fadeUp .35s var(--ease) both; }
.screen.active { display:flex; flex-direction:column; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════════════════════ */
#screen-login {
  align-items:center; justify-content:center; position:relative;
  background:radial-gradient(ellipse 80% 55% at 50% 0%, rgba(99,102,241,.13) 0%, transparent 65%), var(--bg);
}
.login-bg { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.login-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.22; animation:orbF 10s ease-in-out infinite alternate; }
.orb-1 { width:500px;height:500px; background:var(--indigo); top:-150px;  left:-100px;  animation-delay:0s; }
.orb-2 { width:400px;height:400px; background:var(--violet); bottom:-80px; right:-80px;  animation-delay:-4s; }
.orb-3 { width:280px;height:280px; background:var(--sky);    top:40%;      left:60%;     animation-delay:-7s; }
@keyframes orbF { from{transform:translate(0,0) scale(1)} to{transform:translate(28px,-28px) scale(1.08)} }

.login-card {
  position:relative; z-index:1;
  background:var(--glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r4);
  padding:44px 40px 36px; width:100%; max-width:420px;
  box-shadow:0 32px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
}
.login-logo { text-align:center; margin-bottom:34px; }
.login-logo-icon {
  display:block; font-size:42px; margin-bottom:10px;
  background:linear-gradient(135deg,var(--indigo),var(--violet),var(--sky));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:glow 3s ease-in-out infinite alternate;
}
@keyframes glow { from{filter:drop-shadow(0 0 10px rgba(99,102,241,.4))} to{filter:drop-shadow(0 0 28px rgba(99,102,241,.8))} }
.login-title { font-size:26px; font-weight:800; }
.login-sub   { font-size:13px; color:var(--t2); margin-top:4px; }

.login-form { display:flex; flex-direction:column; gap:18px; }
.form-group  { display:flex; flex-direction:column; gap:7px; }
.form-label  { font-size:12px; font-weight:600; color:var(--t2); text-transform:uppercase; letter-spacing:.5px; }

.input-wrap { position:relative; display:flex; align-items:center; }
.inp-icon   { position:absolute; left:13px; font-size:15px; pointer-events:none; }
.form-input {
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--border);
  border-radius:var(--r1); padding:12px 42px 12px 40px;
  color:var(--t1); font-size:14px; font-family:inherit; outline:none; transition:var(--t);
}
.form-input:focus { border-color:var(--bfocus); background:rgba(99,102,241,.06); box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.form-input::placeholder { color:var(--t3); }
.toggle-pw { position:absolute; right:10px; background:none; border:none; color:var(--t3); padding:4px; font-size:15px; transition:var(--t); }
.toggle-pw:hover { color:var(--t2); }

.login-error {
  display:none; background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.3);
  border-radius:var(--r1); padding:10px 14px; font-size:13px; color:var(--rose);
  animation:shake .4s var(--ease);
}
.login-error.show { display:block; }
.remember-session { display:flex; align-items:center; gap:8px; margin-top:-4px; color:var(--t2); font-size:12px; cursor:pointer; user-select:none; }
.remember-session input { width:15px; height:15px; accent-color:var(--indigo); cursor:pointer; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.btn-login {
  margin-top:6px; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px; background:linear-gradient(135deg,var(--indigo),var(--violet));
  border:none; border-radius:var(--r1); color:#fff; font-size:15px; font-weight:700;
  transition:var(--t); box-shadow:var(--sb); overflow:hidden; position:relative;
}
.btn-login::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.15),transparent); opacity:0; transition:var(--t); }
.btn-login:hover  { transform:translateY(-2px); box-shadow:0 12px 32px rgba(99,102,241,.5); }
.btn-login:hover::after { opacity:1; }
.btn-login:hover .btn-arrow { transform:translateX(4px); }
.btn-login.loading { pointer-events:none; opacity:.7; }
.btn-arrow { transition:transform var(--t); font-size:18px; }

.login-footer { margin-top:26px; padding-top:18px; border-top:1px solid var(--border); text-align:center; }
.l-clock { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:2px; }
.l-date  { font-size:12px; color:var(--t3); margin-top:3px; text-transform:uppercase; letter-spacing:.8px; }

/* ════════════════════════════════════════════════════════════
   MAIN MENU
   ════════════════════════════════════════════════════════════ */
#screen-menu {
  background:radial-gradient(ellipse 70% 45% at 50% -5%, rgba(99,102,241,.09) 0%, transparent 60%), var(--bg2);
}
/* Header */
.mh {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:12px 28px; border-bottom:1px solid var(--border);
  background:rgba(10,14,26,.9); backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:50; gap:12px;
}
.mh-left  { display:flex; align-items:center; gap:9px; }
.mh-right { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.mh-center { text-align:center; }
.brand-icon { font-size:20px; background:linear-gradient(135deg,var(--indigo),var(--violet)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.brand-txt  { font-size:15px; font-weight:700; }
.mh-greeting { font-size:15px; font-weight:600; }
.mh-datetime { font-size:12px; color:var(--t2); margin-top:2px; font-variant-numeric:tabular-nums; }
.user-chip { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:24px; padding:5px 13px 5px 7px; }
.uc-av    { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--indigo),var(--violet)); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.uc-name  { font-size:13px; font-weight:500; }
.btn-out  { background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.25); border-radius:var(--r1); color:var(--rose); font-size:12.5px; font-weight:600; padding:7px 13px; transition:var(--t); white-space:nowrap; }
.btn-out:hover { background:rgba(244,63,94,.18); transform:translateY(-1px); }
.mh-actions { display:flex; align-items:center; gap:8px; }

/* Menu body */
.menu-main { flex:1; padding:40px 32px 48px; max-width:1100px; margin:0 auto; width:100%; }
.menu-intro { text-align:center; margin-bottom:34px; }
.menu-title { font-size:30px; font-weight:800; background:linear-gradient(135deg,#fff 40%,var(--t2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:-.5px; }
.menu-sub   { font-size:15px; color:var(--t2); margin-top:8px; }

/* Menu cards */
.menu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

.mc {
  position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--r3);
  padding:26px 22px; display:flex; align-items:center; gap:18px; text-align:left;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
  overflow:hidden; box-shadow:var(--sh);
  animation:cardIn .45s var(--ease) both;
}
.mc:nth-child(1){animation-delay:.05s} .mc:nth-child(2){animation-delay:.10s}
.mc:nth-child(3){animation-delay:.15s} .mc:nth-child(4){animation-delay:.20s}
.mc:nth-child(5){animation-delay:.25s}
@keyframes cardIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.mc:hover { transform:translateY(-5px) scale(1.01); box-shadow:var(--sg),var(--sh); }

.mc-glow { position:absolute; inset:0; opacity:0; transition:opacity var(--t); pointer-events:none; }
.mc:hover .mc-glow { opacity:1; }
.glow-indigo  { background:radial-gradient(circle at 20% 50%, rgba(99,102,241,.13) 0%, transparent 60%); }
.glow-emerald { background:radial-gradient(circle at 20% 50%, rgba(16,185,129,.12) 0%, transparent 60%); }
.glow-rose    { background:radial-gradient(circle at 20% 50%, rgba(244,63,94,.1)  0%, transparent 60%); }
.glow-amber   { background:radial-gradient(circle at 20% 50%, rgba(245,158,11,.1) 0%, transparent 60%); }
.glow-sky     { background:radial-gradient(circle at 20% 50%, rgba(14,165,233,.1) 0%, transparent 60%); }

#mc-agenda:hover    { border-color:rgba(99,102,241,.4); }
#mc-banks:hover     { border-color:rgba(16,185,129,.4); }
#mc-birthdays:hover { border-color:rgba(244,63,94,.35); }
#mc-tasks:hover     { border-color:rgba(245,158,11,.35); }
#mc-contacts:hover  { border-color:rgba(14,165,233,.35); }

.mc-icon { font-size:38px; min-width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:var(--r2); position:relative; z-index:1; transition:transform var(--t); }
.mc:hover .mc-icon { transform:scale(1.1) rotate(-5deg); }
.mc-body { flex:1; min-width:0; position:relative; z-index:1; }
.mc-title { font-size:16px; font-weight:700; color:var(--t1); }
.mc-desc  { font-size:13px; color:var(--t2); margin-top:4px; line-height:1.4; }
.mc-stat  { margin-top:9px; display:inline-block; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; background:rgba(255,255,255,.07); color:var(--t2); border:1px solid var(--border); }
.mc-arr   { font-size:18px; color:var(--t3); position:relative; z-index:1; transition:transform var(--t), color var(--t); }
.mc:hover .mc-arr { transform:translateX(5px); color:var(--t1); }

/* Birthday widget on menu */
.menu-widget { margin-top:26px; background:var(--card); border:1px solid var(--border); border-radius:var(--r3); padding:18px 22px; }
.mw-title { font-size:13px; font-weight:600; color:var(--t2); margin-bottom:11px; }
.mw-items { display:flex; gap:10px; flex-wrap:wrap; }
.mw-item  { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--r1); padding:8px 13px; flex:1; min-width:190px; transition:var(--t); }
.mw-item:hover { background:rgba(255,255,255,.06); }
.mw-av   { width:33px; height:33px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.mw-name { font-size:13px; font-weight:500; }
.mw-days { font-size:11px; color:var(--t2); margin-top:2px; }
.mw-badge { margin-left:auto; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.mw-today  { background:rgba(244,63,94,.15);  color:var(--rose); }
.mw-soon   { background:rgba(245,158,11,.15); color:var(--amber); }
.mw-normal { background:rgba(99,102,241,.12); color:var(--indigo); }

/* ════════════════════════════════════════════════════════════
   MODULE SCREEN
   ════════════════════════════════════════════════════════════ */
#screen-module { background:var(--bg2); }

.mod-topbar {
  display:flex; align-items:center; justify-content:space-between; padding:11px 28px;
  background:rgba(10,14,26,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; gap:14px;
}
.btn-back { background:var(--card); border:1px solid var(--border); border-radius:var(--r1); color:var(--t2); font-size:13px; font-weight:500; padding:8px 15px; transition:var(--t); white-space:nowrap; flex-shrink:0; }
.btn-back:hover { background:var(--card-h); color:var(--t1); border-color:var(--bactive); transform:translateX(-2px); }
.mod-topbar-title { font-size:15px; font-weight:700; flex:1; text-align:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mod-topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tb-clock { font-size:13px; color:var(--t2); font-variant-numeric:tabular-nums; letter-spacing:1px; white-space:nowrap; }
.btn-out-sm { background:rgba(244,63,94,.08); border:1px solid rgba(244,63,94,.2); border-radius:var(--r1); color:var(--rose); font-size:14px; padding:7px 10px; transition:var(--t); }
.btn-out-sm:hover { background:rgba(244,63,94,.16); }

.mod-body { flex:1; padding:28px 32px; max-width:1200px; margin:0 auto; width:100%; }

.mod-sec { display:none; animation:fadeUp .28s var(--ease) both; }
.mod-sec.active { display:block; }

.sec-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:14px; }
.sec-header h1 { font-size:24px; font-weight:800; background:linear-gradient(135deg,#fff 40%,var(--t2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sec-sub { font-size:13px; color:var(--t2); margin-top:4px; }

.btn-add {
  background:linear-gradient(135deg,var(--indigo),var(--violet)); border:none; border-radius:var(--r1);
  color:#fff; font-size:13.5px; font-weight:600; padding:10px 18px; white-space:nowrap;
  transition:var(--t); box-shadow:var(--sb); flex-shrink:0;
}
.btn-add:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(99,102,241,.45); }

/* Search + Filter Common */
.search-bar { display:flex; gap:10px; margin-bottom:18px; align-items:center; flex-wrap:wrap; }
.search-input {
  flex:1; min-width:200px; background:var(--card); border:1px solid var(--border); border-radius:var(--r1);
  padding:11px 15px; color:var(--t1); font-family:inherit; font-size:14px; outline:none; transition:var(--t);
}
.search-input:focus { border-color:var(--bfocus); box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.search-input::placeholder { color:var(--t3); }
.filter-sel {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r1);
  padding:11px 36px 11px 13px; color:var(--t1); font-family:inherit; font-size:13px;
  outline:none; transition:var(--t); cursor:pointer;
  /* Custom arrow */
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.filter-sel:focus { border-color:var(--bfocus); box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.filter-sel:hover { border-color:rgba(255,255,255,.2); background-color:var(--card-h); }
.filter-sel option {
  background:#1e2640;
  color:#f1f5f9;
  padding:8px 12px;
}

.sec-header-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn-sec-alt {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r1);
  color:var(--t2); font-size:13px; font-weight:600; padding:10px 16px; white-space:nowrap;
  transition:var(--t); display:inline-flex; align-items:center; gap:6px;
}
.btn-sec-alt:hover { background:var(--card-h); border-color:var(--bactive); color:var(--t1); transform:translateY(-1px); }

/* ════════════════════════════════════════════════════════════
   1. AGENDA 2026 (CALENDARIO VERTICAL)
   ════════════════════════════════════════════════════════════ */
.agenda-controls { margin-bottom:24px; display:flex; flex-direction:column; gap:14px; }
.month-nav-bar { display:flex; align-items:center; gap:8px; }
.btn-month-nav {
  background:var(--card); border:1px solid var(--border); border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  color:var(--t2); font-size:12px; transition:var(--t); flex-shrink:0;
}
.btn-month-nav:hover { background:var(--card-h); color:var(--t1); border-color:var(--indigo); }
.month-tabs { display:flex; gap:6px; overflow-x:auto; padding:4px 0; scrollbar-width:none; flex:1; }
.month-tabs::-webkit-scrollbar { display:none; }
.mtab {
  padding:7px 16px; border:1px solid var(--border); border-radius:22px;
  background:var(--card); color:var(--t2); font-size:13px; font-family:inherit; font-weight:500;
  white-space:nowrap; transition:var(--t); flex-shrink:0;
}
.mtab:hover { border-color:var(--indigo); color:var(--t1); }
.mtab.active {
  background:linear-gradient(135deg,var(--indigo),var(--violet));
  border-color:transparent; color:#fff; box-shadow:0 4px 15px rgba(99,102,241,.3);
}

.agenda-filters-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ag-filter-chips { display:flex; gap:8px; flex-wrap:wrap; }
.ag-chip {
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:20px;
  padding:6px 14px; color:var(--t2); font-size:12.5px; font-weight:500; transition:var(--t);
}
.ag-chip:hover { color:var(--t1); border-color:rgba(255,255,255,.2); }
.ag-chip.active { background:rgba(99,102,241,.18); border-color:var(--indigo); color:#fff; }

/* Selector de vista: Cuadrícula Calendario vs Lista Vertical */
.ag-view-toggle {
  display: flex;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px;
  gap: 3px;
}
.ag-vbtn {
  background: none;
  border: none;
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: var(--t);
}
.ag-vbtn:hover { color: var(--t1); }
.ag-vbtn.active {
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, .35);
}

.ag-search-wrap { flex:1; min-width:220px; max-width:320px; }
.ag-search-inp { padding:8px 14px; font-size:13px; width:100%; }

/* Barra del Sistema de Realizado y Progreso del Mes */
.ag-progress-bar-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  flex-wrap: wrap;
}
.ag-progress-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 260px;
}
.ag-progress-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ag-progress-track {
  flex: 1;
  max-width: 320px;
  height: 9px;
  background: rgba(255, 255, 255, .08);
  border-radius: 6px;
  overflow: hidden;
}
.ag-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 6px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.ag-progress-stats {
  font-size: 13px;
  font-weight: 800;
  color: var(--emerald);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ag-progress-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ag-pbadge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}
.ag-pbadge.p-done { background: rgba(16, 185, 129, .15); color: var(--emerald); border: 1px solid rgba(16, 185, 129, .3); }
.ag-pbadge.p-pending { background: rgba(99, 102, 241, .15); color: var(--indigo); border: 1px solid rgba(99, 102, 241, .3); }

/* Drag and Drop Feedback */
.cell-item[draggable="true"], .ag-item[draggable="true"] {
  cursor: grab;
  user-select: none;
}
.cell-item.is-dragging, .ag-item.is-dragging {
  opacity: 0.35;
  transform: scale(0.97) rotate(-1.5deg);
  cursor: grabbing;
  box-shadow: 0 10px 25px rgba(0,0,0,.6);
  border: 1.5px dashed var(--indigo) !important;
}
.ag-calendar-cell.drag-target-hover, .ag-day-card.drag-target-hover {
  background: rgba(99, 102, 241, .2) !important;
  border: 1.5px dashed var(--indigo) !important;
  box-shadow: 0 0 28px rgba(99, 102, 241, .45) !important;
  transform: scale(1.025);
  transition: all .16s ease-out;
}

/* Indicador de Realizado con hora y botón de día */
.done-time-tag {
  font-size: 9.5px;
  color: var(--emerald);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}
.btn-mark-day-all {
  background: rgba(16, 185, 129, .1);
  border: 1px solid rgba(16, 185, 129, .25);
  border-radius: 4px;
  color: var(--emerald);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  cursor: pointer;
  transition: var(--t);
  line-height: 1;
}
.btn-mark-day-all:hover {
  background: var(--emerald);
  color: #fff;
  border-color: var(--emerald);
}

/* Mini-Calendario Navegador Rápido de Días */
.agenda-mini-calendar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 12px 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.amc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--t2);
}
.amc-header-hint { font-size: 11px; font-weight: 500; color: var(--t3); text-transform: none; }
.amc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
}
.amc-day-btn {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: 6px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t);
  position: relative;
}
.amc-day-btn:hover {
  background: var(--card-h);
  border-color: var(--indigo);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99,102,241,.25);
}
.amc-day-btn.is-weekend {
  background: rgba(244, 63, 94, .04);
  border-color: rgba(244, 63, 94, .15);
}
.amc-day-btn.is-today {
  border-color: var(--indigo);
  background: rgba(99, 102, 241, .18);
  box-shadow: 0 0 12px rgba(99, 102, 241, .35);
}
.amc-day-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.amc-day-name {
  font-size: 9px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  margin-top: 2px;
}
.amc-day-dots {
  display: flex;
  gap: 2.5px;
  margin-top: 3px;
  height: 4px;
}
.amc-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--indigo);
}
.amc-dot.dot-service { background: var(--amber); }
.amc-dot.dot-done { background: var(--emerald); }

/* ════════════════════════════════════════════════════════════
   VISTA CUADRÍCULA DE CALENDARIO (7 COLUMNAS - "CUADRITOS")
   ════════════════════════════════════════════════════════════ */
.calendar-grid-wrapper {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  margin-bottom: 24px;
}
.cg-weekdays-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg3);
  border-bottom: 1.5px solid var(--border);
  text-align: center;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .9px;
  color: var(--t2);
  text-transform: uppercase;
}
.cg-day-head-cell {
  padding: 12px 6px;
  border-right: 1px solid rgba(255, 255, 255, .05);
}
.cg-day-head-cell:last-child { border-right: none; }
.cg-day-head-cell.is-weekend { color: var(--rose); background: rgba(244, 63, 94, .04); }

.cg-month-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: rgba(255, 255, 255, .08);
}

/* Cuadrito Individual de Calendario */
.ag-calendar-cell {
  background: var(--bg3);
  min-height: 190px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: background var(--t);
}
.ag-calendar-cell:hover {
  background: var(--card);
}
.ag-calendar-cell.is-today {
  background: rgba(99, 102, 241, .09);
  box-shadow: inset 0 0 0 1.5px var(--indigo);
}
.ag-calendar-cell.is-weekend {
  background: var(--bg);
}
.ag-calendar-cell.empty-cell {
  background: rgba(0, 0, 0, .2);
  min-height: 140px;
  opacity: .4;
}

/* Cabecera del Cuadrito */
.cell-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.cell-day-num-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cell-day-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ag-calendar-cell.is-today .cell-day-num {
  color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(99, 102, 241, .5);
}
.cell-today-pill {
  font-size: 9px;
  font-weight: 800;
  background: var(--indigo);
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
}
.cell-actions-quick {
  display: flex;
  align-items: center;
  gap: 3px;
}
.btn-cell-serv, .btn-cell-add {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--t2);
  cursor: pointer;
  transition: var(--t);
}
.btn-cell-serv:hover { background: var(--amber); color: #000; border-color: var(--amber); }
.btn-cell-add:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* Campo de escritura directa dentro de cada cuadrito */
.cell-write-wrap {
  margin-bottom: 3px;
}
.cell-direct-input {
  width: 100%;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .15);
  border-radius: 5px;
  padding: 5px 8px;
  color: var(--t1);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: all var(--t);
}
.cell-direct-input:focus {
  border-color: var(--indigo);
  background: rgba(99, 102, 241, .09);
  box-shadow: 0 0 8px rgba(99, 102, 241, .3);
}
.cell-direct-input::placeholder {
  color: var(--t3);
  font-size: 11.5px;
}

/* Lista de notas dentro del cuadrito */
.cell-notes-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  overflow-y: auto;
  max-height: 240px;
  scrollbar-width: thin;
}
.cell-item {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 2.5px solid var(--indigo);
  border-radius: 5px;
  padding: 5px 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  transition: all var(--t);
  position: relative;
}
.cell-item:hover {
  background: var(--card-h);
  border-color: rgba(255, 255, 255, .18);
}
.cell-item.is-service {
  border-left-color: var(--amber);
  background: rgba(245, 158, 11, .05);
}
.cell-item.is-done {
  opacity: .48;
  border-left-color: var(--emerald);
  background: rgba(10, 14, 26, .5);
}
.cell-item.is-done .cell-item-text {
  text-decoration: line-through;
  color: var(--t2);
}
.cell-chk-btn {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--t);
  flex-shrink: 0;
  margin-top: 1px;
}
.cell-chk-btn:hover { border-color: var(--emerald); color: var(--emerald); background: rgba(16,185,129,.15); }
.cell-item.is-done .cell-chk-btn { border-color: var(--emerald); background: var(--emerald); color: #fff; }

.cell-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cell-item-text {
  color: var(--t1);
  line-height: 1.35;
  word-break: break-word;
  cursor: text;
}
.cell-item-text:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
}
.cell-service-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
  background: rgba(245, 158, 11, .15);
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 2px;
  white-space: nowrap;
}
.cell-item-acts {
  display: none;
  gap: 2px;
  flex-shrink: 0;
}
.cell-item:hover .cell-item-acts {
  display: flex;
}
.cell-btn-act {
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 3px;
  color: var(--t2);
  font-size: 10px;
  padding: 2px 4px;
  cursor: pointer;
  line-height: 1;
}
.cell-btn-act:hover { color: #fff; border-color: var(--indigo); background: var(--indigo); }

/* Sección de Realizados dentro del cuadrito */
.cell-done-wrap {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, .08);
}
.cell-done-head {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--emerald);
  text-transform: uppercase;
  margin-bottom: 3px;
}

/* En dispositivos o pantallas medianas/pequeñas */
@media (max-width: 1024px) {
  .calendar-grid-wrapper { overflow-x: auto; }
  .cg-weekdays-row, .cg-month-cells { min-width: 840px; }
}

/* Vista Calendario Vertical */
.agenda-vertical-calendar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

/* Tarjeta del Día (Diseño Calendario Ejecutivo) */
.ag-day-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: 16px 20px;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  position: relative;
  overflow: hidden;
}
.ag-day-card:hover {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.ag-day-card.is-today {
  border-color: rgba(99, 102, 241, .6);
  background: linear-gradient(180deg, rgba(99, 102, 241, .08) 0%, var(--card) 45%);
  box-shadow: 0 0 28px rgba(99, 102, 241, .2);
}
.ag-day-card.is-weekend {
  border-left: 3.5px solid rgba(244, 63, 94, .5);
}

/* Flash highlight animation al saltar a un día */
.ag-day-card.flash-highlight {
  animation: dayHighlightPulse 1.8s ease-out;
}
@keyframes dayHighlightPulse {
  0% { box-shadow: 0 0 0 4px var(--indigo), 0 0 35px var(--indigo); transform: scale(1.01); }
  50% { box-shadow: 0 0 0 2px var(--indigo), 0 0 20px var(--indigo); }
  100% { box-shadow: none; transform: scale(1); }
}

/* Estructura en Grid: Hoja de Calendario a la izquierda + Contenido a la derecha */
.ag-day-grid-layout {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 680px) {
  .ag-day-grid-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Hoja de Calendario Física Visual (Desk / Wall Sheet) */
.ag-cal-sheet {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  position: relative;
  overflow: hidden;
  user-select: none;
  transition: transform var(--t);
}
.ag-day-card:hover .ag-cal-sheet {
  transform: translateY(-2px);
}
.cal-sheet-rings {
  display: flex;
  justify-content: space-around;
  padding: 4px 10px 0;
  background: var(--bg3);
}
.cal-ring {
  width: 6px;
  height: 8px;
  border-radius: 3px;
  background: #64748b;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.cal-sheet-top {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 0;
}
.ag-cal-sheet.weekend .cal-sheet-top {
  background: linear-gradient(135deg, #e11d48, #f43f5e);
}
.cal-sheet-num {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  padding: 8px 0 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.ag-cal-sheet.today .cal-sheet-num {
  color: #818cf8;
}
.cal-sheet-day {
  font-size: 10px;
  font-weight: 700;
  color: var(--t2);
  letter-spacing: .8px;
  padding-bottom: 6px;
  text-transform: uppercase;
}
.cal-sheet-today-tag {
  background: #6366f1;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  padding: 2px 0;
  display: block;
}

/* Columna de contenido del día */
.ag-day-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ag-day-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.ag-day-full-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
}
.badge-weekend {
  font-size: 10px;
  font-weight: 700;
  background: rgba(244, 63, 94, .14);
  color: var(--rose);
  border: 1px solid rgba(244, 63, 94, .3);
  padding: 2px 7px;
  border-radius: 10px;
}
.ag-day-stats {
  display: flex;
  gap: 6px;
  font-size: 11.5px;
}
.ag-stat-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}
.ag-stat-badge.pending {
  background: rgba(99, 102, 241, .12);
  color: var(--indigo);
  border: 1px solid rgba(99, 102, 241, .25);
}
.ag-stat-badge.done {
  background: rgba(16, 185, 129, .12);
  color: var(--emerald);
  border: 1px solid rgba(16, 185, 129, .25);
}

/* Entrada Dinámica Directa Tipo Libreta / Cuaderno de Notas */
.ag-direct-write-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .03);
  border: 1.5px dashed rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: 7px 12px;
  transition: all var(--t);
}
.ag-direct-write-box:focus-within {
  border-color: var(--indigo);
  background: rgba(99, 102, 241, .06);
  box-shadow: 0 0 16px rgba(99, 102, 241, .15);
}
.direct-write-icon {
  font-size: 15px;
  flex-shrink: 0;
  opacity: .8;
}
.ag-direct-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--t1);
  font-size: 13.5px;
  font-family: inherit;
}
.ag-direct-input::placeholder {
  color: var(--t3);
  font-size: 12.5px;
}
.btn-direct-add {
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.btn-direct-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, .4);
}
.btn-direct-serv {
  background: rgba(245, 158, 11, .15);
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 6px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.btn-direct-serv:hover {
  background: var(--amber);
  color: #000;
}

/* Lista de eventos del día */
.ag-items-list { display: flex; flex-direction: column; gap: 8px; }
.ag-item {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-left: 3.5px solid var(--indigo);
  border-radius: var(--r1);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all .28s var(--ease);
}
.ag-item:hover {
  background: var(--card-h);
  border-color: rgba(255, 255, 255, .14);
  transform: translateX(2px);
}

/* Item de Pago de Servicio */
.ag-item.is-service {
  border-left-color: var(--amber);
  background: rgba(245, 158, 11, .03);
}
.service-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(245, 158, 11, .15);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, .25);
  white-space: nowrap;
}
.service-pill.paid {
  background: rgba(16, 185, 129, .15);
  color: var(--emerald);
  border-color: rgba(16, 185, 129, .25);
}
.service-amount {
  font-weight: 800;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

/* Efecto cuando se realiza: pasa a sección realizada, se opaca y tacha */
.ag-item.is-done {
  opacity: 0.52;
  background: rgba(10, 14, 26, .4);
  border-left-color: var(--emerald);
  transition: all .35s var(--ease);
}
.ag-item.is-done .ag-note {
  text-decoration: line-through;
  color: var(--t2);
}
.ag-item.is-done:hover {
  opacity: 0.85;
}

.ag-chk-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: none;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--t);
  flex-shrink: 0;
}
.ag-chk-btn:hover {
  border-color: var(--emerald);
  background: rgba(16, 185, 129, .15);
  color: var(--emerald);
  transform: scale(1.1);
}
.ag-item.is-done .ag-chk-btn {
  border-color: var(--emerald);
  background: var(--emerald);
  color: #fff;
}

.ag-note-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ag-note {
  font-size: 13.8px;
  color: var(--t1);
  line-height: 1.45;
  word-break: break-word;
  cursor: text;
  padding: 3px 6px;
  border-radius: 5px;
  transition: background var(--t);
}
.ag-note:hover {
  background: rgba(255, 255, 255, .06);
}
.ag-note-inline-inp {
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--indigo);
  border-radius: 6px;
  color: var(--t1);
  font-size: 13.8px;
  font-family: inherit;
  padding: 5px 8px;
  outline: none;
  box-shadow: 0 0 10px rgba(99, 102, 241, .35);
}
.ag-meta-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Sección de Realizados */
.ag-done-section {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, .08);
}
.ag-done-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--emerald);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Botones de acción enriquecidos */
.ag-acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.btn-act-chip {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--t2);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 8px;
  transition: var(--t);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-act-chip:hover {
  background: var(--card-h);
  color: var(--t1);
  border-color: var(--bactive);
  transform: translateY(-1px);
}
.btn-act-chip.to-task:hover { border-color: var(--amber); color: var(--amber); background: rgba(245, 158, 11, .1); }
.btn-act-chip.move-btn:hover { border-color: var(--sky); color: var(--sky); background: rgba(14, 165, 233, .1); }
.btn-act-chip.archive-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(139, 92, 246, .1); }

.ag-day-empty {
  font-size: 12.5px;
  color: var(--t3);
  font-style: italic;
  padding: 4px 2px;
}

/* ════════════════════════════════════════════════════════════
   2. CUENTAS BANCARIAS (SOLES, DÓLARES, YAPE, RESUMEN)
   ════════════════════════════════════════════════════════════ */
.banks-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.bstat {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r3);
  padding:18px 20px; text-align:center; position:relative; overflow:hidden;
}
.bstat::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:var(--indigo); opacity:.7; }
.bstat.stat-soles::before { background:var(--emerald); }
.bstat.stat-dolares::before { background:var(--sky); }
.bstat.stat-yape::before { background:#9c27b0; }
.bstat-lbl { font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--t2); margin-bottom:8px; font-weight:600; }
.bstat-val { font-size:23px; font-weight:800; font-variant-numeric:tabular-nums; }
.bstat-sub { font-size:11px; color:var(--t3); margin-top:4px; }

/* Grid de Cuentas y Yape */
.accounts-section { margin-bottom:24px; }
.accounts-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.acc-sec-title { font-size:14px; font-weight:700; color:var(--t1); }
.acc-sec-sub { font-size:12px; color:var(--t3); }
.accounts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }

.acc-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r2);
  padding:15px 18px; display:flex; flex-direction:column; gap:8px; cursor:pointer;
  transition:all var(--t); position:relative; overflow:hidden;
}
.acc-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.2); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.acc-card.active { border-color:var(--indigo); box-shadow:0 0 0 2px rgba(99,102,241,.3); }
.acc-card.is-yape { border-color:rgba(156,39,176,.3); background:linear-gradient(135deg, rgba(116,34,132,.15) 0%, var(--card) 60%); }
.acc-card.is-yape:hover { border-color:#ba68c8; box-shadow:0 8px 24px rgba(116,34,132,.25); }

.acc-top { display:flex; align-items:center; justify-content:space-between; }
.acc-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:12px; background:rgba(255,255,255,.08); color:var(--t2); text-transform:uppercase; }
.acc-card.is-yape .acc-badge { background:#742284; color:#fff; }
.acc-name { font-size:15px; font-weight:700; color:var(--t1); display:flex; align-items:center; gap:6px; }
.acc-number { font-size:11.5px; color:var(--t2); font-family:monospace; word-break:break-all; }
.acc-balance { font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:4px; }
.acc-balance.pos { color:var(--emerald); }
.acc-balance.neg { color:var(--rose); }

/* Resumen Mensual Financiero */
.monthly-summary-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r3);
  padding:20px 24px; margin-bottom:24px; box-shadow:var(--sh);
}
.msc-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
.msc-title-wrap { display:flex; align-items:center; gap:12px; }
.msc-icon { font-size:28px; background:rgba(99,102,241,.12); padding:8px; border-radius:10px; }
.msc-title { font-size:16px; font-weight:700; }
.msc-sub { font-size:12px; color:var(--t2); }
.msc-controls { display:flex; align-items:center; gap:8px; }
.msc-lbl { font-size:12px; color:var(--t2); font-weight:600; text-transform:uppercase; }

.msc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
.msc-stat-box { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--r1); padding:14px; text-align:center; }
.msc-sb-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--t3); margin-bottom:5px; font-weight:600; }
.msc-sb-val { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.btn-sync-filter:hover { background:rgba(99,102,241,.3) !important; color:#fff !important; transform:translateY(-1px); }

/* Barras de Desglose por Categoría */
.cat-breakdown { display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.cat-bar-item { display:flex; flex-direction:column; gap:4px; }
.cat-bar-header { display:flex; justify-content:space-between; font-size:12px; }
.cat-bar-name { font-weight:600; color:var(--t1); }
.cat-bar-val { color:var(--t2); font-variant-numeric:tabular-nums; }
.cat-track { height:7px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.cat-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--indigo),var(--violet)); transition:width .4s var(--ease); }

/* Filtros de Bancos */
.banks-filter-bar { gap:8px; }
.banks-filter-bar .search-input { min-width:180px; }

/* Categorías y Badges en Tabla de Bancos */
.cat-badge {
  display:inline-block; padding:3px 9px; border-radius:6px; font-size:11.5px; font-weight:600;
  background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--t2); white-space:nowrap;
}
.bank-tag {
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--t1);
}

/* ════════════════════════════════════════════════════════════
   3. CUMPLEAÑOS (ORDEN VERTICAL COMPUTADORA)
   ════════════════════════════════════════════════════════════ */
.bd-vertical-list { display:flex; flex-direction:column; gap:11px; }
.bd-vert-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r2);
  padding:14px 20px; display:flex; align-items:center; gap:18px; transition:var(--t);
  position:relative; overflow:hidden;
}
.bd-vert-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--indigo); opacity:0; transition:var(--t); }
.bd-vert-card:hover { background:var(--card-h); transform:translateX(3px); border-color:rgba(255,255,255,.15); }
.bd-vert-card:hover::before { opacity:1; }
.bd-vert-card.bd-today { border-color:var(--amber); background:rgba(245,158,11,.06); }
.bd-vert-card.bd-today::before { opacity:1; background:var(--amber); }
.bd-vert-card.bd-soon { border-color:rgba(99,102,241,.4); }
.bd-vert-card.bd-soon::before { opacity:1; background:var(--indigo); }

.bd-av-lg { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; flex-shrink:0; }
.bd-vert-info { flex:1; min-width:0; }
.bd-vert-name { font-size:15px; font-weight:700; color:var(--t1); text-transform:capitalize; }
.bd-vert-sub { display:flex; align-items:center; gap:12px; font-size:12.5px; color:var(--t2); margin-top:4px; flex-wrap:wrap; }
.bd-year-badge {
  background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:6px;
  padding:2px 8px; font-size:11.5px; font-weight:600; color:var(--sky);
}
.bd-age-badge {
  background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25); border-radius:6px;
  padding:2px 8px; font-size:11.5px; font-weight:700; color:var(--indigo);
}
.bd-vert-cd { text-align:right; flex-shrink:0; min-width:85px; }
.bd-cd-val { font-size:22px; font-weight:800; color:var(--indigo); line-height:1; font-variant-numeric:tabular-nums; }
.bd-vert-card.bd-today .bd-cd-val { color:var(--amber); }
.bd-cd-lbl { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }

/* ════════════════════════════════════════════════════════════
   4. TAREAS Y PENDIENTES (PRIORIDADES Y DÍAS FALTANTES)
   ════════════════════════════════════════════════════════════ */
/* ── Tasks Metrics & Quick Overview ────────────────────────── */
.tasks-metrics-bar {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:18px;
}
.task-metric-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r1);
  padding:10px 14px; display:flex; align-items:center; gap:11px; transition:var(--t);
  cursor:pointer; user-select:none;
}
.task-metric-card:hover { background:var(--card-h); border-color:var(--bactive); transform:translateY(-1px); }
.task-metric-card.active { border-color:var(--indigo); background:rgba(99,102,241,.08); }
.tmc-icon { font-size:20px; flex-shrink:0; }
.tmc-num { font-size:18px; font-weight:800; color:var(--t1); line-height:1; }
.tmc-label { font-size:11.5px; color:var(--t3); margin-top:3px; text-transform:uppercase; letter-spacing:.3px; }

/* ── Toolbar & Tabs ───────────────────────────────────────── */
.task-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
.task-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:0; }
.ttab { background:none; border:none; border-bottom:2px solid transparent; padding:10px 18px; color:var(--t2); font-size:14px; font-weight:600; transition:var(--t); display:flex; align-items:center; gap:7px; cursor:pointer; }
.ttab:hover { color:var(--t1); }
.ttab.active { color:var(--indigo); border-bottom-color:var(--indigo); }
.task-filters { display:flex; align-items:center; gap:8px; flex:1; justify-content:flex-end; min-width:280px; flex-wrap:wrap; }

/* Chips de prioridad rápida */
.task-pills-filter { display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:20px; padding:3px; }
.t-pill-btn {
  background:none; border:none; color:var(--t3); font-size:12px; font-weight:600; padding:4px 10px;
  border-radius:16px; cursor:pointer; transition:var(--t); display:inline-flex; align-items:center; gap:4px;
}
.t-pill-btn:hover { color:var(--t1); background:rgba(255,255,255,.06); }
.t-pill-btn.active { color:#fff; background:var(--indigo); box-shadow:0 2px 8px rgba(99,102,241,.3); }
.t-pill-btn.p-high.active { background:var(--rose); box-shadow:0 2px 8px rgba(244,63,94,.35); }
.t-pill-btn.p-medium.active { background:var(--amber); color:#1a1a1a; box-shadow:0 2px 8px rgba(245,158,11,.35); }
.t-pill-btn.p-low.active { background:var(--emerald); box-shadow:0 2px 8px rgba(16,185,129,.35); }

.filter-sel-sm { font-size:12.5px; padding:7px 11px; }
.task-search-inp { max-width:220px; padding:7px 12px; font-size:13px; }

/* ── Task Items & Prioridades con Colores Vivos ──────────── */
.tasks-list { display:flex; flex-direction:column; gap:10px; }
.task-item {
  background:var(--card); border:1px solid var(--border); border-left:5px solid var(--border);
  border-radius:var(--r2); padding:14px 16px; display:flex; align-items:center; gap:14px;
  transition:all var(--t); animation:fadeUp .2s var(--ease) both; position:relative;
}
.task-item:hover { background:var(--card-h); transform:translateX(3px); }
.task-acts { display:flex; align-items:center; gap:5px; flex-shrink:0; margin-left:auto; }

/* Prioridad ALTA (Rojo / Carmesí vibrante) */
.task-item.priority-high {
  border-left-color:var(--rose);
  background:linear-gradient(90deg, rgba(244,63,94,.12) 0%, rgba(244,63,94,.02) 100%);
  border-color:rgba(244,63,94,.22);
}
.task-item.priority-high:hover {
  background:linear-gradient(90deg, rgba(244,63,94,.16) 0%, rgba(244,63,94,.04) 100%);
  border-color:rgba(244,63,94,.38);
  box-shadow:0 4px 18px rgba(244,63,94,.12);
}

/* Prioridad MEDIA (Ámbar / Dorado vibrante) */
.task-item.priority-medium {
  border-left-color:var(--amber);
  background:linear-gradient(90deg, rgba(245,158,11,.11) 0%, rgba(245,158,11,.02) 100%);
  border-color:rgba(245,158,11,.22);
}
.task-item.priority-medium:hover {
  background:linear-gradient(90deg, rgba(245,158,11,.15) 0%, rgba(245,158,11,.04) 100%);
  border-color:rgba(245,158,11,.38);
  box-shadow:0 4px 18px rgba(245,158,11,.12);
}

/* Prioridad BAJA (Verde Esmeralda) */
.task-item.priority-low {
  border-left-color:var(--emerald);
  background:linear-gradient(90deg, rgba(16,185,129,.10) 0%, rgba(16,185,129,.015) 100%);
  border-color:rgba(16,185,129,.2);
}
.task-item.priority-low:hover {
  background:linear-gradient(90deg, rgba(16,185,129,.14) 0%, rgba(16,185,129,.035) 100%);
  border-color:rgba(16,185,129,.35);
  box-shadow:0 4px 18px rgba(16,185,129,.12);
}

/* Checkbox Interactivo de Realización — Botón Notable y Atractivo */
.task-chk-wrap {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  flex-shrink:0; align-self:center; user-select:none;
}
.task-chk {
  /* ─── Ultra Notable Completion Button ─── */
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  border:2.5px solid var(--emerald);
  background:rgba(16,185,129,.14);
  color:var(--emerald);
  font-size:22px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.22s var(--ease);
  position:relative;
  /* Pulsing ring to draw immediate attention */
  box-shadow:0 0 0 4px rgba(16,185,129,.16), 0 4px 14px rgba(16,185,129,.25);
  animation:checkPulse 2.6s ease-in-out infinite;
}
.task-chk-icon {
  line-height:1; display:inline-block; transition:transform 0.2s var(--ease);
}
@keyframes checkPulse {
  0%,100% { box-shadow:0 0 0 3px rgba(16,185,129,.16), 0 3px 12px rgba(16,185,129,.22); }
  50%      { box-shadow:0 0 0 7px rgba(16,185,129,.28), 0 6px 20px rgba(16,185,129,.42); }
}
.task-chk:hover {
  border-color:#059669;
  color:#ffffff;
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
  transform:scale(1.14);
  box-shadow:0 0 0 6px rgba(16,185,129,.35), 0 8px 24px rgba(16,185,129,.55);
  animation:none;
}
.task-chk:hover .task-chk-icon {
  transform:scale(1.15);
}
.task-chk:active {
  transform:scale(0.92);
  background:#047857;
  box-shadow:0 0 0 8px rgba(16,185,129,.45), 0 2px 10px rgba(16,185,129,.6);
}
.task-chk-label {
  font-size:10px; font-weight:800; color:var(--emerald); text-transform:uppercase;
  letter-spacing:.6px; opacity:.9; white-space:nowrap; transition:all .2s;
}
.task-chk-wrap:hover .task-chk-label {
  opacity:1; text-shadow:0 0 8px rgba(16,185,129,.4); transform:translateY(1px);
}
body.theme-light .task-chk {
  background:rgba(16,185,129,.12);
  border-color:#059669;
  color:#059669;
  box-shadow:0 0 0 3px rgba(16,185,129,.18), 0 3px 12px rgba(16,185,129,.2);
}
body.theme-light .task-chk:hover {
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
  color:#ffffff;
  box-shadow:0 0 0 6px rgba(16,185,129,.32), 0 8px 22px rgba(16,185,129,.45);
}
body.theme-light .task-chk-label {
  color:#047857;
}

/* Badges de Prioridad (con clic para cambiar rápido) */
.priority-pill {
  font-size:11px; font-weight:800; padding:3px 9px; border-radius:12px;
  text-transform:uppercase; letter-spacing:.4px; display:inline-flex; align-items:center; gap:4px;
  cursor:pointer; user-select:none; transition:var(--t);
}
.priority-pill:hover { transform:scale(1.05); }
.priority-pill.high   { background:var(--rose); color:#fff; box-shadow:0 2px 8px rgba(244,63,94,.35); }
.priority-pill.medium { background:var(--amber); color:#1a1a1a; box-shadow:0 2px 8px rgba(245,158,11,.32); }
.priority-pill.low    { background:var(--emerald); color:#fff; box-shadow:0 2px 8px rgba(16,185,129,.3); }

/* Badges de Días Faltantes */
.due-badge {
  font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:6px;
  display:inline-flex; align-items:center; gap:5px; line-height:1.2;
}
.due-overdue {
  background:rgba(244,63,94,.18); color:var(--rose); border:1px solid rgba(244,63,94,.4);
  animation:pulseWarn 2.2s infinite; font-weight:800;
}
@keyframes pulseWarn { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.8; transform:scale(1.02)} }
.due-today {
  background:rgba(245,158,11,.22); color:#fbbf24; border:1px solid rgba(245,158,11,.45);
  font-weight:900; box-shadow:0 0 10px rgba(245,158,11,.2);
}
.due-tomorrow {
  background:rgba(14,165,233,.18); color:var(--sky); border:1px solid rgba(14,165,233,.35); font-weight:800;
}
.due-soon {
  background:rgba(234,179,8,.14); color:#facc15; border:1px solid rgba(234,179,8,.3); font-weight:700;
}
.due-upcoming {
  background:rgba(255,255,255,.06); color:var(--t2); border:1px solid var(--border); font-weight:600;
}
.due-none {
  background:none; border:1px dashed var(--border); color:var(--t3); font-size:11px; padding:2px 7px;
  border-radius:6px; cursor:pointer; transition:var(--t);
}
.due-none:hover { color:var(--indigo); border-color:var(--indigo); background:rgba(99,102,241,.08); }

.from-agenda-badge {
  font-size:11px; color:var(--indigo); background:rgba(99,102,241,.12);
  padding:2px 8px; border-radius:6px; border:1px solid rgba(99,102,241,.25); font-weight:600;
}

.task-cnt { flex:1; min-width:0; }
.task-txt { font-size:14.5px; line-height:1.45; color:var(--t1); word-break:break-word; font-weight:500; }
.task-meta-bar { display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }

/* ── Historial de Realizadas y Archivadas ────────────────── */
.tasks-archived-header {
  background:rgba(16,185,129,.05); border:1px solid rgba(16,185,129,.2); border-radius:var(--r1);
  padding:12px 18px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.tah-title { font-size:14px; font-weight:700; color:var(--emerald); display:block; }
.tah-sub { font-size:12px; color:var(--t3); display:block; margin-top:2px; }
.btn-clear-archived {
  background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.25); color:var(--rose);
  padding:6px 12px; border-radius:6px; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:var(--t);
}
.btn-clear-archived:hover { background:var(--rose); color:#fff; border-color:var(--rose); }

.task-archived-item {
  background:rgba(255,255,255,.02); border:1px solid var(--border); border-left:5px solid var(--emerald);
  border-radius:var(--r1); padding:13px 16px; display:flex; align-items:flex-start; gap:13px;
  transition:var(--t);
}
.task-archived-item:hover { background:rgba(255,255,255,.04); border-color:rgba(16,185,129,.3); }
.task-archived-chk {
  width:24px; height:24px; border-radius:50%; background:rgba(16,185,129,.15);
  border:1px solid var(--emerald); color:var(--emerald); font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.task-archived-txt {
  font-size:14px; color:var(--t2); text-decoration:line-through; text-decoration-color:rgba(16,185,129,.5);
}
.archived-note-callout {
  margin-top:6px; padding:6px 10px; background:rgba(0,0,0,.25); border-left:3px solid var(--border);
  border-radius:4px; font-size:12px; color:var(--t2); font-style:italic;
}
.btn-restore-task {
  border:1px solid rgba(14,165,233,.3); border-radius:6px; background:rgba(14,165,233,.08);
  color:var(--sky); font-size:12px; font-weight:600; padding:5px 9px; cursor:pointer;
  transition:var(--t); display:inline-flex; align-items:center; gap:4px;
}
.btn-restore-task:hover { background:var(--sky); color:#fff; border-color:var(--sky); }

/* Preview Card en Modal de Confirmación */
.confirm-task-preview-card {
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r1);
  padding:12px 14px; margin-top:12px; text-align:left;
}
.confirm-task-meta-preview {
  display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap;
}
.btn-save-indigo { background:var(--indigo); color:#fff; }
.btn-save-indigo:hover { background:var(--indigo-d); box-shadow:0 4px 14px rgba(99,102,241,.4); }

/* ── Apuntes Archivados en Módulo Apuntes ─────────────────── */
.ag-archived-box {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r2); padding:20px;
  display:flex; flex-direction:column; gap:12px; margin-top:16px;
}
.ag-archived-head {
  display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border);
  padding-bottom:12px; margin-bottom:4px; flex-wrap:wrap; gap:10px;
}
.ag-archived-item {
  background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:var(--r1);
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:var(--t);
}
.ag-archived-item:hover { background:rgba(255,255,255,.04); border-color:var(--border-h); }
.ag-archived-date { font-size:12px; font-weight:700; color:var(--indigo); margin-bottom:3px; }
.ag-archived-txt { font-size:13.5px; color:var(--t2); }
.btn-restore-agenda {
  border:1px solid var(--border); border-radius:6px; background:none; color:var(--sky);
  padding:5px 9px; font-size:12px; font-weight:600; cursor:pointer; transition:var(--t);
}
.btn-restore-agenda:hover { background:rgba(14,165,233,.12); border-color:var(--sky); }

/* ── Contacts ────────────────────────────────────────────── */
.ct-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.ct-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r2); padding:13px 15px; display:flex; align-items:flex-start; gap:12px; transition:var(--t); }
.ct-card:hover { background:var(--card-h); border-color:var(--bactive); transform:translateY(-1px); }
.ct-av   { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0; margin-top:2px; }
.ct-inf  { flex:1; min-width:0; }
.ct-name { font-size:13px; font-weight:600; line-height:1.35; color:var(--t1); word-break:break-word; }
.ct-ph   { font-size:12.5px; color:var(--sky); margin-top:4px; font-variant-numeric:tabular-nums; letter-spacing:.5px; }
.ct-acts { display:flex; gap:4px; flex-shrink:0; margin-top:2px; }

/* ── Action Buttons (row level) ─────────────────────────── */
.btn-edit, .btn-del, .btn-copy {
  border:1px solid var(--border); border-radius:6px; background:none;
  font-size:13px; padding:5px 8px; transition:var(--t); line-height:1;
}
.btn-edit { color:var(--t2); }
.btn-edit:hover { color:var(--indigo); border-color:var(--indigo); background:rgba(99,102,241,.1); }
.btn-del  { color:var(--t3); }
.btn-del:hover  { color:var(--rose); border-color:var(--rose); background:rgba(244,63,94,.1); }
.btn-copy { color:var(--t3); }
.btn-copy:hover { color:var(--sky); border-color:var(--sky); background:rgba(14,165,233,.1); }

/* ════════════════════════════════════════════════════════════
   5. MODALES Y DIÁLOGOS ESPECIALES
   ════════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; z-index:200;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box {
  background:var(--bg3); border:1px solid rgba(255,255,255,.12); border-radius:var(--r3);
  width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
  box-shadow:0 32px 80px rgba(0,0,0,.7);
  transform:scale(.94) translateY(16px); transition:transform .25s var(--ease);
}
.modal-box-sm { max-width:420px; }
.modal-overlay.open .modal-box { transform:scale(1) translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 0; }
.modal-title  { font-size:17px; font-weight:700; }
.modal-close  { background:none; border:none; color:var(--t3); font-size:18px; padding:4px 6px; border-radius:6px; transition:var(--t); }
.modal-close:hover { color:var(--rose); background:rgba(244,63,94,.1); }
.modal-body   { padding:20px 24px; display:flex; flex-direction:column; gap:16px; }
.modal-footer { padding:0 24px 22px; display:flex; gap:10px; justify-content:flex-end; }

/* Modal form fields */
.mf-group { display:flex; flex-direction:column; gap:7px; }
.mf-label { font-size:12px; font-weight:600; color:var(--t2); text-transform:uppercase; letter-spacing:.5px; }
.mf-input, .mf-select, .mf-textarea {
  background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:var(--r1);
  padding:11px 14px; color:var(--t1); font-family:inherit; font-size:14px; outline:none; transition:var(--t); width:100%;
}
.mf-select {
  padding-right:36px; cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.mf-select option {
  background:#1e2640;
  color:#f1f5f9;
  padding:8px 12px;
}
.mf-input:focus, .mf-select:focus, .mf-textarea:focus { border-color:var(--bfocus); background:rgba(99,102,241,.06); box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.mf-input::placeholder, .mf-textarea::placeholder { color:var(--t3); }
.mf-textarea { resize:vertical; min-height:80px; }
.mf-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Modal Mover Fecha */
.move-modal-text { font-size:13.5px; color:var(--t1); line-height:1.5; margin-bottom:8px; }
.quick-move-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn-quick-move {
  background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:var(--r1);
  padding:10px; font-size:12.5px; font-weight:600; color:var(--t1); transition:var(--t); text-align:center;
}
.btn-quick-move:hover { background:var(--indigo); color:#fff; border-color:var(--indigo); transform:translateY(-1px); }

/* Modal Confirmación de Tarea */
.confirm-box-content { text-align:center; padding:10px 0 6px; }
.confirm-icon { font-size:48px; margin-bottom:8px; }
.confirm-title { font-size:18px; font-weight:800; color:var(--t1); margin-bottom:6px; }
.confirm-task-text { font-size:14px; color:var(--indigo); background:rgba(99,102,241,.1); padding:10px 14px; border-radius:var(--r1); margin:10px 0; border:1px solid rgba(99,102,241,.25); }
.confirm-sub { font-size:12px; color:var(--t3); }
.btn-save-emerald { background:linear-gradient(135deg,var(--emerald),#059669) !important; box-shadow:0 4px 14px rgba(16,185,129,.35) !important; }
.btn-save-emerald:hover { box-shadow:0 8px 22px rgba(16,185,129,.45) !important; }

/* Modal Eliminación — variante danger */
.confirm-icon-danger { animation:shakeWarn .5s var(--ease); }
@keyframes shakeWarn {
  0%,100% { transform:rotate(0); }
  20%      { transform:rotate(-8deg); }
  60%      { transform:rotate(8deg); }
}
.confirm-title-danger { color:var(--rose); }
.confirm-sub-danger   { color:var(--rose); opacity:.75; }
.btn-delete-confirm {
  background:linear-gradient(135deg,var(--rose),#dc2626);
  border:none; border-radius:var(--r1); color:#fff;
  font-size:14px; font-weight:700; padding:10px 24px;
  transition:var(--t); box-shadow:0 4px 14px rgba(244,63,94,.35);
  letter-spacing:.2px;
}
.btn-delete-confirm:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(244,63,94,.55);
}

.btn-cancel { background:rgba(255,255,255,.07); border:1px solid var(--border); border-radius:var(--r1); color:var(--t2); font-size:14px; font-weight:500; padding:10px 20px; transition:var(--t); }
.btn-cancel:hover { background:rgba(255,255,255,.12); color:var(--t1); }
.btn-save { background:linear-gradient(135deg,var(--indigo),var(--violet)); border:none; border-radius:var(--r1); color:#fff; font-size:14px; font-weight:600; padding:10px 24px; transition:var(--t); box-shadow:0 4px 14px rgba(99,102,241,.35); }
.btn-save:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(99,102,241,.45); }

/* ── Empty State ──────────────────────────────────────────── */
.empty { text-align:center; padding:56px 20px; color:var(--t3); grid-column:1/-1; }
.empty-icon { font-size:42px; display:block; margin-bottom:11px; }
.empty p { font-size:14px; }

/* ── Toast ────────────────────────────────────────────────── */
.toast-msg {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(70px);
  background:var(--card); border:1px solid var(--bactive);
  border-radius:var(--r1); padding:12px 22px; color:var(--t1);
  font-size:13.5px; font-weight:500; z-index:300;
  box-shadow:var(--sg),var(--sh); transition:transform .3s var(--ease), opacity .3s;
  opacity:0; pointer-events:none;
}
.toast-msg.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--t3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--t2); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:960px) {
  .menu-grid { grid-template-columns:repeat(2,1fr); }
  .mc:nth-child(5) { grid-column:1/-1; }
  .banks-summary { grid-template-columns:1fr; }
  .msc-grid { grid-template-columns:1fr; }
}
@media (max-width:660px) {
  .mh { grid-template-columns:1fr 1fr; }
  .mh-center { display:none; }
  .menu-grid { grid-template-columns:1fr; }
  .mc:nth-child(5) { grid-column:1; }
  .mod-body { padding:16px; }
  .menu-main { padding:22px 14px; }
  .login-card { padding:30px 20px; margin:14px; }
  .mf-row { grid-template-columns:1fr; }
  .quick-move-btns { grid-template-columns:1fr; }
}