/* ============================================================
   SCTD — Hoja de estilos unificada
   Capa 1: BASE (estructura, componentes, layout)
   Capa 2: TEMA VISUAL (paleta institucional, overrides)
   El orden importa: el tema pisa a la base, igual que antes.
   ============================================================ */

/* ==================== CAPA 1: BASE ==================== */
/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#F5F7FB;--bg2:#EEF1F8;--bg3:#E5EAF3;
  --text:#151B2E;--text2:#525C70;--text3:#98A1B4;
  --blue:#2F54EB;--blue-lt:#5B7BFF;--blue-dim:rgba(47,84,235,0.07);
  --green:#0FB57F;--green-bg:rgba(15,181,127,0.10);
  --yellow:#F5A524;--yellow-bg:rgba(245,165,36,0.12);
  --red:#F0453E;--red-bg:rgba(240,69,62,0.10);
  --border:#E7EAF2;--border2:#D3D9E6;
  --shadow:0 1px 2px rgba(21,27,46,0.04),0 3px 10px rgba(21,27,46,0.05);
  --shadow-md:0 10px 34px rgba(21,27,46,0.11),0 3px 10px rgba(21,27,46,0.05);
  --radius:14px;--radius-sm:9px;
  --font:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --grad-brand:linear-gradient(135deg,#2F54EB 0%,#5B7BFF 100%);
  --grad-dark:linear-gradient(150deg,#131A38 0%,#202E76 55%,#2F54EB 130%);
}
body{
  font-family:var(--font);
  background:var(--bg);
  background-image:
    radial-gradient(1100px 460px at 100% -8%,rgba(91,123,255,0.07),transparent 60%),
    radial-gradient(820px 460px at -8% 0%,rgba(47,84,235,0.05),transparent 55%);
  background-attachment:fixed;
  color:var(--text);min-height:100vh;font-size:14px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ===== NAV ===== */
.nav{background:rgba(255,255,255,0.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border);padding:0 1.5rem;display:flex;align-items:center;gap:0;position:sticky;top:0;z-index:100;height:62px;box-shadow:0 1px 0 rgba(21,27,46,0.03)}
.nav-logo{display:flex;align-items:center;gap:10px;padding-right:1.25rem;border-right:1px solid var(--border);margin-right:0.75rem;text-decoration:none}
.nav-logo-text{font-family:'Georgia',serif;font-style:italic;font-size:21px;font-weight:700;background:linear-gradient(135deg,#131A38 0%,#2F54EB 60%,#5B7BFF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:0}
.nav-tab{padding:0 1rem;height:62px;display:flex;align-items:center;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;letter-spacing:.2px}
.nav-tab:hover{color:var(--blue)}
.nav-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ===== PAGES ===== */
.page{display:none;padding:1.5rem;max-width:1200px;margin:0 auto}
.page.active{display:block}

/* ===== CARDS ===== */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.35rem;box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s,border-color .2s}
.card-title{font-size:11.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.7px;margin-bottom:1rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}

/* ===== VELOCIМЕТР ===== */
.velocimetro-wrap{position:relative;width:180px;height:100px;margin:0 auto}
.velocimetro-wrap canvas{display:block}
.vel-value{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:28px;font-weight:800;font-family:var(--font);font-variant-numeric:tabular-nums}
.vel-label{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--text3);white-space:nowrap}

/* ===== SEMAFORO BADGE ===== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.1px}
.badge-critica{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.badge-alta{background:#fff7ed;color:#ea580c;border:1px solid #fed7aa}
.badge-media{background:#fefce8;color:#ca8a04;border:1px solid #fef08a}
.badge-baja{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
.badge-trabajo{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}
.badge-familia{background:#fdf4ff;color:#9333ea;border:1px solid #e9d5ff}
.badge-wellness{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
.badge-hobbie{background:#fff7ed;color:#ea580c;border:1px solid #fed7aa}

/* ===== TAREAS ===== */
.tarea-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.05rem 1.15rem;margin-bottom:10px;transition:box-shadow .18s,transform .18s,border-color .18s;cursor:pointer;border-left:4px solid transparent}
.tarea-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--border2)}
.tarea-card.p1{border-left-color:#dc2626}
.tarea-card.p2{border-left-color:#ea580c}
.tarea-card.p3{border-left-color:#ca8a04}
.tarea-card.p4{border-left-color:#16a34a}
.tarea-card.completada{opacity:0.5;border-left-color:#cbd5e1}
.tarea-header{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.tarea-titulo{font-size:14px;font-weight:500;color:var(--text);flex:1}
.tarea-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tarea-delegada-chip{font-size:11px;padding:2px 8px;border-radius:4px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.tarea-followup{font-size:11px;color:var(--text3);margin-top:4px}

/* ===== FORMULARIOS ===== */
.form-group{margin-bottom:12px}
label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px;letter-spacing:.1px}
input,select,textarea{width:100%;padding:10px 13px;border:1px solid var(--border2);border-radius:var(--radius-sm);font-size:13px;color:var(--text);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit}
input:hover,select:hover,textarea:hover{border-color:#bcc5d6}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3.5px var(--blue-dim)}
input::placeholder,textarea::placeholder{color:#aab2c2}
textarea{resize:vertical;min-height:70px}

/* ===== BOTONES ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 17px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .16s;font-family:inherit;letter-spacing:.1px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:0 2px 9px rgba(47,84,235,0.28)}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 5px 16px rgba(47,84,235,0.34);transform:translateY(-1px)}
.btn-outline{background:#fff;color:var(--text2);border-color:var(--border2)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-dim)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-danger{background:var(--red-bg);color:var(--red);border-color:#fecaca}
.btn-green{background:var(--green-bg);color:var(--green);border-color:#a7f3d0}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:1rem}

/* ===== MODAL ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(16,20,34,0.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9999;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex;animation:fadeIn .16s ease}
.modal{background:#fff;border-radius:18px;padding:1.6rem;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 70px rgba(16,20,34,0.30),0 4px 14px rgba(16,20,34,0.10);border:1px solid rgba(255,255,255,0.6);animation:popIn .18s cubic-bezier(.2,.8,.25,1)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.modal-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:1.25rem;display:flex;justify-content:space-between;align-items:center}
.modal-close{cursor:pointer;color:var(--text3);font-size:18px;line-height:1}
.modal-close:hover{color:var(--text)}

/* ===== WELLNESS ===== */
.wellness-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;background:#fff}
.wellness-icono{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--blue-dim);border-radius:50%}
.wellness-check{width:24px;height:24px;border-radius:6px;border:2px solid var(--border2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;margin-left:auto}
.wellness-check.done{background:var(--green);border-color:var(--green);color:#fff}

/* ===== ALIMENTACION ===== */
.alimento-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:12px;background:var(--blue-dim);color:var(--blue);border:1px solid rgba(37,99,235,0.2);margin:2px}

/* ===== MODO FOCO ===== */
.modo-foco{background:var(--grad-dark);color:#fff;border-radius:16px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 12px 34px rgba(19,26,56,0.34);position:relative;overflow:hidden}
.modo-foco::after{content:"";position:absolute;top:-40%;right:-10%;width:280px;height:280px;background:radial-gradient(circle,rgba(91,123,255,0.35),transparent 70%);pointer-events:none}
.foco-titulo{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#a9c2ff;margin-bottom:1rem}
.foco-tarea{padding:12px 16px;background:rgba(255,255,255,0.09);border-radius:11px;margin-bottom:8px;border-left:3px solid #6d8dff;transition:background .15s}
.foco-tarea:hover{background:rgba(255,255,255,0.14)}
.foco-tarea.p1{border-left-color:#ef4444}
.foco-tarea.p2{border-left-color:#f97316}

/* ===== PRODUCTIVIDAD ===== */
.prod-numero{font-size:48px;font-weight:800;font-family:var(--font);font-variant-numeric:tabular-nums;letter-spacing:0;line-height:1}

/* ===== TABS INTERNOS ===== */
.inner-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:1.25rem}
.inner-tab{padding:9px 16px;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s,background .15s;border-radius:8px 8px 0 0}
.inner-tab:hover{color:var(--blue);background:var(--blue-dim)}
.inner-tab.active{color:var(--blue);border-bottom-color:var(--blue)}

/* ===== GOOGLE AUTH ===== */
.google-btn{display:flex;align-items:center;gap:10px;padding:10px 20px;background:#fff;border:1px solid var(--border2);border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.15s}
.google-btn:hover{box-shadow:var(--shadow-md)}
.google-btn svg{width:18px;height:18px}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .nav{overflow-x:auto}
  .page{padding:1rem}
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c7cedd;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#aab3c7;background-clip:content-box}

/* ===== FAB ===== */
.fab{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--grad-brand);color:#fff;border:none;border-radius:50px;padding:13px 22px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(47,84,235,0.42);z-index:99;display:flex;align-items:center;gap:6px;transition:transform .2s,box-shadow .2s,filter .2s;letter-spacing:.2px}
.fab:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(47,84,235,0.5);filter:brightness(1.05)}

/* ===== SEMAFORO NÚMERO ===== */
.semaforo-num{font-size:38px;font-weight:800;font-family:var(--font);font-variant-numeric:tabular-nums;letter-spacing:0}

/* ==================== CAPA 2: TEMA VISUAL ==================== */
/* SCTD Visual Layer
   Presentation-only overrides for the static app. Business logic stays in index.html. */

:root{
  --sctd-bg:#DDE7F1;
  --sctd-bg-soft:#E7EEF7;
  --sctd-paper:#EEF4FA;
  --sctd-paper-2:#E5EDF6;
  --sctd-ink:#0F172A;
  --sctd-ink-2:#334155;
  --sctd-muted:#64748B;
  --sctd-muted-2:#94A3B8;
  --sctd-line:#C8D5E5;
  --sctd-line-2:#AEBED2;
  --sctd-blue:#2454E6;
  --sctd-blue-2:#143A91;
  --sctd-teal:#087D8F;
  --sctd-violet:#7346D9;
  --sctd-green:#0F9F6E;
  --sctd-amber:#D97706;
  --sctd-red:#DC2626;
  --sctd-radius:8px;
  --sctd-shadow:0 1px 2px rgba(15,23,42,.06),0 12px 30px rgba(15,23,42,.11);
  --sctd-shadow-strong:0 18px 48px rgba(15,23,42,.18);
  --sctd-gradient:linear-gradient(135deg,#12245C 0%,#2454E6 58%,#087D8F 100%);
  --sctd-gradient-dark:linear-gradient(135deg,#0A1024 0%,#14245A 58%,#0B6072 100%);
}

*{letter-spacing:0}
html{background:var(--sctd-bg)}
body{
  color:var(--sctd-ink) !important;
  background:
    linear-gradient(180deg,#EAF0F7 0%,#DDE7F1 46%,#D5E0EC 100%) !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,58,145,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(8,125,143,.045) 1px,transparent 1px),
    linear-gradient(135deg,rgba(15,23,42,.08),transparent 28%,rgba(8,125,143,.08) 100%);
  background-size:48px 48px;
  opacity:.72;
}

::selection{background:rgba(36,84,230,.18)}
:focus-visible{
  outline:3px solid rgba(36,84,230,.24);
  outline-offset:2px;
}

/* App chrome */
.nav{
  height:60px !important;
  padding:0 1.35rem !important;
  background:rgba(241,246,252,.94) !important;
  border-bottom:1px solid rgba(174,190,210,.9) !important;
  box-shadow:0 10px 32px rgba(15,23,42,.08) !important;
}
.nav-logo{
  height:60px !important;
  padding-right:1.15rem !important;
  margin-right:.55rem !important;
  border-right:1px solid var(--sctd-line) !important;
}
.nav-logo-text{
  font-size:23px !important;
  letter-spacing:0 !important;
  background:linear-gradient(135deg,#0F172A 0%,var(--sctd-blue) 54%,var(--sctd-teal) 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
.nav-tab{
  height:60px !important;
  padding:0 1rem !important;
  color:var(--sctd-ink-2) !important;
  border-bottom:3px solid transparent !important;
  font-size:13px !important;
}
.nav-tab:hover{
  color:var(--sctd-blue) !important;
  background:#EAF2FF !important;
}
.nav-tab.active{
  color:var(--sctd-blue) !important;
  border-bottom-color:var(--sctd-blue) !important;
  background:linear-gradient(180deg,rgba(36,84,230,.11),transparent) !important;
}
.nav-right{gap:10px !important}
#usuario-rol-badge{
  border:1px solid #BCD0FF !important;
  background:#EEF4FF !important;
  color:var(--sctd-blue) !important;
  border-radius:999px !important;
  font-weight:800 !important;
}

/* Page frame */
.page{
  max-width:1240px !important;
  padding:1.5rem 1.4rem 5rem !important;
}
.page h2{
  color:var(--sctd-ink) !important;
  font-weight:800 !important;
}
.card,
.tarea-card,
.modal{
  border-radius:var(--sctd-radius) !important;
  border-color:var(--sctd-line) !important;
  box-shadow:var(--sctd-shadow) !important;
}
.card{
  background:linear-gradient(180deg,#EEF5FB 0%,#DFEAF5 100%) !important;
}
.card:hover{
  border-color:var(--sctd-line-2) !important;
}
.card-title{
  color:var(--sctd-muted) !important;
  font-size:11px !important;
  letter-spacing:.08em !important;
}

/* Dashboard command header */
.command-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 1.15rem !important;
  padding:1.2rem 1.3rem !important;
  border:1px solid rgba(216,225,238,.72) !important;
  border-radius:var(--sctd-radius) !important;
  background:var(--sctd-gradient-dark) !important;
  color:#fff !important;
  box-shadow:var(--sctd-shadow-strong) !important;
  overflow:hidden;
}
.command-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:40px 40px;
  opacity:.35;
}
.command-hero h1{
  margin:0 0 .35rem !important;
  color:#fff !important;
  font-size:22px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
}
.command-hero p{
  margin:0 !important;
  color:#CBD8FF !important;
  font-size:13px !important;
}
.command-hero-kpis{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  gap:.55rem !important;
}
.command-pill{
  min-height:32px !important;
  padding:.42rem .72rem !important;
  color:#EEF4FF !important;
  background:rgba(255,255,255,.1) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:800 !important;
}

/* Dashboard cards */
#page-dashboard > .grid-4{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.9rem !important;
}
#page-dashboard > .grid-4 .card{
  position:relative;
  min-height:120px !important;
  padding:1.05rem 1rem .95rem !important;
  text-align:left !important;
  overflow:hidden;
  border-left-width:1px !important;
  background:linear-gradient(145deg,#F1F6FC 0%,#DFEAF6 100%) !important;
}
#page-dashboard > .grid-4 .card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--sctd-blue),var(--sctd-teal));
}
#page-dashboard > .grid-4 .card:nth-child(2)::before{background:linear-gradient(90deg,var(--sctd-violet),var(--sctd-teal))}
#page-dashboard > .grid-4 .card:nth-child(3)::before{background:linear-gradient(90deg,var(--sctd-red),#F97316)}
#page-dashboard > .grid-4 .card:nth-child(4)::before{background:linear-gradient(90deg,var(--sctd-amber),#F59E0B)}
#page-dashboard > .grid-4 .card:nth-child(1){background:linear-gradient(145deg,#EEF6FF 0%,#DCEBF7 100%) !important}
#page-dashboard > .grid-4 .card:nth-child(2){background:linear-gradient(145deg,#F1EEFF 0%,#E0ECF6 100%) !important}
#page-dashboard > .grid-4 .card:nth-child(3){background:linear-gradient(145deg,#FFF1F0 0%,#E8EEF6 100%) !important}
#page-dashboard > .grid-4 .card:nth-child(4){background:linear-gradient(145deg,#FFF7E6 0%,#E5EEF7 100%) !important}
#page-dashboard > .card{
  background:linear-gradient(180deg,#EAF2FA 0%,#DCE8F3 100%) !important;
}
#page-dashboard > div[style*="align-items:flex-start"] .card{
  background:linear-gradient(180deg,#EAF2FA 0%,#D9E6F2 100%) !important;
}
#page-dashboard > div[style*="align-items:flex-start"] > div[style*="width:270px"] .card{
  background:linear-gradient(180deg,#E6EFF8 0%,#D7E4F0 100%) !important;
}
#page-dashboard > .grid-4 .card > div:first-child{
  margin-bottom:.25rem !important;
  font-size:18px !important;
}
#page-dashboard > .grid-4 .card > div:nth-child(2){
  font-size:31px !important;
  line-height:1 !important;
  font-weight:850 !important;
}
#page-dashboard > .grid-4 .card > div:last-child{
  margin-top:.5rem !important;
  color:var(--sctd-muted) !important;
  font-size:12px !important;
  font-weight:800 !important;
}
.modo-foco{
  background:var(--sctd-gradient-dark) !important;
  border-radius:var(--sctd-radius) !important;
  box-shadow:var(--sctd-shadow-strong) !important;
}
.modo-foco::after{display:none !important}
.foco-tarea{
  border-radius:8px !important;
  background:rgba(255,255,255,.1) !important;
}

/* Tasks */
.tarea-card{
  margin-bottom:.75rem !important;
  padding:1rem 1.05rem !important;
  background:linear-gradient(180deg,#F7FAFD 0%,#EAF1F8 100%) !important;
}
.tarea-card:hover{
  transform:translateY(-1px) !important;
  box-shadow:var(--sctd-shadow-strong) !important;
}
.tarea-titulo{
  color:var(--sctd-ink) !important;
  font-weight:750 !important;
}
.badge,
.tarea-delegada-chip{
  border-radius:999px !important;
  padding:4px 9px !important;
  font-weight:800 !important;
}

/* Forms and buttons */
label{
  color:var(--sctd-ink-2) !important;
  font-weight:750 !important;
}
input,
select,
textarea{
  min-height:38px !important;
  border-radius:7px !important;
  border-color:#CBD5E1 !important;
  background:#F6F9FD !important;
  color:var(--sctd-ink) !important;
}
input:hover,
select:hover,
textarea:hover{
  border-color:#AEBBD0 !important;
}
input:focus,
select:focus,
textarea:focus{
  border-color:var(--sctd-blue) !important;
  box-shadow:0 0 0 3px rgba(36,84,230,.13) !important;
}
input::placeholder,
textarea::placeholder{
  color:#98A6BC !important;
}
.btn{
  min-height:36px !important;
  border-radius:7px !important;
  font-weight:800 !important;
}
.btn-primary{
  background:var(--sctd-gradient) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(36,84,230,.24) !important;
}
.btn-primary:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}
.btn-outline{
  background:#F2F6FB !important;
  border-color:#CBD5E1 !important;
  color:var(--sctd-ink-2) !important;
}
.btn-outline:hover{
  background:#EAF2FF !important;
  border-color:#AFC2FF !important;
  color:var(--sctd-blue) !important;
}
.btn-danger{
  background:#FEF2F2 !important;
  color:var(--sctd-red) !important;
  border-color:#FECACA !important;
}
.btn-green{
  background:#ECFDF5 !important;
  color:var(--sctd-green) !important;
  border-color:#A7F3D0 !important;
}
.fab{
  right:1rem !important;
  bottom:1rem !important;
  min-height:40px !important;
  padding:0 1rem !important;
  border-radius:999px !important;
  font-size:13px !important;
  background:var(--sctd-gradient) !important;
  box-shadow:0 14px 28px rgba(36,84,230,.28) !important;
}

/* Admin, tabs and tables */
.inner-tabs{
  gap:.25rem !important;
  border-bottom:1px solid var(--sctd-line) !important;
}
.inner-tab{
  color:var(--sctd-ink-2) !important;
  border-radius:7px 7px 0 0 !important;
}
.inner-tab:hover{
  background:#F8FAFF !important;
}
.inner-tab.active{
  color:var(--sctd-blue) !important;
  background:#F8FAFF !important;
  border-bottom-color:var(--sctd-blue) !important;
}
table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;
}
table th{
  color:var(--sctd-muted) !important;
  font-size:11px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
}
table td,
table th{
  border-bottom:1px solid var(--sctd-line) !important;
}

/* Feedback */
#page-feedback .card{
  border-color:var(--sctd-line) !important;
}
#feedback-lista{
  background:
    linear-gradient(180deg,#F2F7FC 0%,#E5EEF7 100%) !important;
}
#feedback-input{
  background:#F7FAFD !important;
}

/* Modals and auth */
.modal-overlay{
  background:rgba(15,23,42,.56) !important;
}
.modal{
  border:1px solid rgba(255,255,255,.72) !important;
}
.modal-title{
  color:var(--sctd-ink) !important;
  font-weight:850 !important;
}
#login-screen,
#set-password-screen{
  background:var(--sctd-gradient-dark) !important;
}
#login-screen > div[style*="radial-gradient"],
#set-password-screen > div[style*="radial-gradient"]{
  display:none !important;
}
#login-screen > div[style*="background:#fff"],
#set-password-screen > div[style*="background:#fff"]{
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.65) !important;
  box-shadow:0 34px 82px rgba(0,0,0,.34) !important;
}

/* Scrollbars */
::-webkit-scrollbar-thumb{
  background:#AAB7CC !important;
  border-radius:8px;
}

/* Responsive */
@media(max-width:900px){
  .command-hero{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  .command-hero-kpis{
    justify-content:flex-start !important;
  }
  #page-dashboard > .grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #page-dashboard > div[style*="align-items:flex-start"]{
    display:block !important;
  }
  #page-dashboard > div[style*="align-items:flex-start"] > div[style*="width:270px"]{
    width:100% !important;
    margin-top:1rem !important;
  }
  .nav{
    overflow-x:auto;
  }
}

@media(min-width:641px) and (max-width:1500px){
  .fab{
    position:static !important;
    width:max-content !important;
    margin:1rem 1.4rem 1.5rem auto !important;
  }
}

@media(max-width:640px){
  .nav{
    padding:0 .85rem !important;
  }
  .nav-right{
    display:none !important;
  }
  .page{
    padding:1rem .85rem 2rem !important;
  }
  .command-hero{
    padding:1rem !important;
  }
  .command-hero h1{
    font-size:20px !important;
  }
  .command-pill{
    min-height:30px !important;
    font-size:11px !important;
  }
  #page-dashboard > .grid-4{
    grid-template-columns:1fr !important;
  }
  .grid-2,
  .grid-3,
  .grid-4{
    grid-template-columns:1fr !important;
  }
  .fab{
    position:static !important;
    width:calc(100% - 1.7rem) !important;
    justify-content:center !important;
    margin:1rem .85rem 1.25rem !important;
    min-height:40px !important;
    font-size:13px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* ===== SCTD MINERAL MODE: removes the generic white-card look ===== */
:root{
  --sctd-bg:#151A20;
  --sctd-bg-soft:#1B242C;
  --sctd-paper:#1F2B36;
  --sctd-paper-2:#243442;
  --sctd-ink:#EEF6FF;
  --sctd-ink-2:#D8E5F2;
  --sctd-muted:#9FB0C2;
  --sctd-muted-2:#788B9F;
  --sctd-line:#35485C;
  --sctd-line-2:#4A6177;
  --sctd-blue:#5B8CFF;
  --sctd-blue-2:#284A9F;
  --sctd-teal:#2DD4BF;
  --sctd-violet:#A78BFA;
  --sctd-green:#34D399;
  --sctd-amber:#FBBF24;
  --sctd-red:#FB7185;
  --sctd-shadow:0 1px 2px rgba(0,0,0,.22),0 18px 44px rgba(0,0,0,.28);
  --sctd-shadow-strong:0 24px 62px rgba(0,0,0,.38);
  --sctd-gradient:linear-gradient(135deg,#243B86 0%,#2467E8 55%,#008C8C 100%);
  --sctd-gradient-dark:linear-gradient(135deg,#0A1020 0%,#16245C 54%,#0B626B 100%);

  /* CLAVE DE LEGIBILIDAD: la app genera miles de textos inline con
     color:var(--text) / var(--text2) / var(--text3) y fondos var(--bg2),
     definidos para el tema claro. En modo oscuro hay que redefinir esas
     variables base acá, o los títulos quedan oscuro-sobre-oscuro. */
  --text:#EEF6FF;
  --text2:#C9D7E4;
  --text3:#93A6B9;
  --bg:#151A20;
  --bg2:#243140;
  --bg3:#2B3B4C;
  --border:#3B5064;
  --border2:#4A6177;
  --blue:#7DA2FF;
  --blue-lt:#5B8CFF;
  --blue-dim:rgba(91,140,255,.16);
  --green:#34D399;
  --green-bg:rgba(52,211,153,.14);
  --yellow:#FBBF24;
  --yellow-bg:rgba(251,191,36,.14);
  --red:#FB7185;
  --red-bg:rgba(251,113,133,.14);
}

html{background:#151A20 !important}
body{
  color:var(--sctd-ink) !important;
  background:
    linear-gradient(135deg,rgba(91,140,255,.16) 0%,transparent 28%),
    linear-gradient(225deg,rgba(45,212,191,.13) 0%,transparent 34%),
    linear-gradient(180deg,#171D24 0%,#121820 54%,#10161D 100%) !important;
}
body::before{
  background:
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.035) 1px,transparent 1px) !important;
  background-size:46px 46px !important;
  opacity:.45 !important;
}

.nav{
  background:rgba(18,24,32,.92) !important;
  border-bottom:1px solid rgba(74,97,119,.88) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.22) !important;
}
.nav-logo{border-right-color:rgba(74,97,119,.8) !important}
.nav-logo-text{
  background:linear-gradient(135deg,#FFFFFF 0%,#7DA2FF 45%,#2DD4BF 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
.nav-tab{color:#C5D3E1 !important}
.nav-tab:hover{background:rgba(91,140,255,.12) !important;color:#FFFFFF !important}
.nav-tab.active{
  color:#FFFFFF !important;
  background:linear-gradient(180deg,rgba(91,140,255,.2),rgba(45,212,191,.06)) !important;
  border-bottom-color:var(--sctd-teal) !important;
}
.nav-right{color:#B7C6D6 !important}
#usuario-rol-badge{
  background:rgba(91,140,255,.14) !important;
  border-color:rgba(91,140,255,.45) !important;
  color:#CFE0FF !important;
}

.page h2,
.tarea-titulo,
table td{
  color:var(--sctd-ink) !important;
}
.page [style*="color:var(--text3)"],
.page [style*="color: var(--text3)"]{
  color:var(--sctd-muted) !important;
}

.card,
.tarea-card,
.wellness-item,
.modal,
#page-dashboard > .grid-4 .card,
#page-dashboard > .card,
#page-dashboard > div[style*="align-items:flex-start"] .card,
#page-dashboard > div[style*="align-items:flex-start"] > div[style*="width:270px"] .card{
  background:
    linear-gradient(180deg,rgba(40,55,70,.96) 0%,rgba(27,39,51,.98) 100%) !important;
  border-color:rgba(74,97,119,.88) !important;
  box-shadow:var(--sctd-shadow) !important;
  color:var(--sctd-ink) !important;
}
.card:hover,
.tarea-card:hover{
  border-color:rgba(91,140,255,.58) !important;
  box-shadow:var(--sctd-shadow-strong) !important;
}
.card-title,
table th{
  color:#AFC0D1 !important;
}

#page-dashboard > .grid-4 .card:nth-child(1){
  background:linear-gradient(145deg,rgba(32,57,83,.98),rgba(23,42,56,.98)) !important;
}
#page-dashboard > .grid-4 .card:nth-child(2){
  background:linear-gradient(145deg,rgba(50,43,83,.98),rgba(25,42,56,.98)) !important;
}
#page-dashboard > .grid-4 .card:nth-child(3){
  background:linear-gradient(145deg,rgba(74,38,44,.98),rgba(31,42,52,.98)) !important;
}
#page-dashboard > .grid-4 .card:nth-child(4){
  background:linear-gradient(145deg,rgba(77,57,26,.98),rgba(30,43,48,.98)) !important;
}
#page-dashboard > .grid-4 .card > div:last-child{
  color:#C4D1DE !important;
}

.command-hero,
.modo-foco{
  background:var(--sctd-gradient-dark) !important;
  border-color:rgba(91,140,255,.34) !important;
}
.foco-tarea{
  background:rgba(255,255,255,.08) !important;
  color:#F0F6FF !important;
}

input,
select,
textarea,
.btn-outline,
.google-btn{
  background:#16222D !important;
  border-color:#41566B !important;
  color:#EDF6FF !important;
}
input::placeholder,
textarea::placeholder{
  color:#8296AA !important;
}
input:focus,
select:focus,
textarea:focus{
  border-color:#68B7FF !important;
  box-shadow:0 0 0 3px rgba(91,140,255,.22) !important;
}
.btn-outline:hover{
  background:#1B2D3C !important;
  color:#FFFFFF !important;
}

.inner-tabs{border-bottom-color:#35485C !important}
.inner-tab{color:#B9C7D6 !important}
.inner-tab:hover{background:rgba(91,140,255,.12) !important;color:#FFFFFF !important}
.inner-tab.active{
  background:rgba(91,140,255,.16) !important;
  color:#FFFFFF !important;
  border-bottom-color:var(--sctd-teal) !important;
}

#feedback-lista{
  background:linear-gradient(180deg,#1B2733 0%,#16212B 100%) !important;
}
#page-feedback .card{background:#1B2733 !important}
#feedback-input{background:#14202A !important}

.modal-overlay{background:rgba(4,8,13,.72) !important}
.modal-title{color:#F4F8FF !important}

/* Inline-generated task/calendar surfaces */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#FFFFFF"],
[style*="background:rgba(255,255,255"],
[style*="background: rgba(255,255,255"]{
  background:#1E2A36 !important;
  color:var(--sctd-ink) !important;
}
[style*="border:1px solid var(--border)"],
[style*="border: 1px solid var(--border)"]{
  border-color:#3B5064 !important;
}

@media(max-width:640px){
  .nav{background:rgba(18,24,32,.96) !important}
  .command-pill{color:#F4F8FF !important}
}

/* Always-visible quick action */
@media(min-width:641px) and (max-width:1500px){
  .fab{
    position:fixed !important;
  }
}

.fab{
  position:fixed !important;
  right:1rem !important;
  bottom:1rem !important;
  display:flex !important;
  width:auto !important;
  margin:0 !important;
  z-index:120 !important;
}

body[data-page="feedback"] .fab{
  bottom:9rem !important;
}

@media(max-width:640px){
  .fab{
    left:.85rem !important;
    right:.85rem !important;
    bottom:.85rem !important;
    width:auto !important;
    justify-content:center !important;
  }
  body[data-page="feedback"] .fab{
    bottom:8rem !important;
  }
}

/* Executive operating layer */
.exec-brief{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(420px,.95fr);
  gap:1rem;
  margin:1rem 0 1.15rem;
  padding:1rem;
  border:1px solid rgba(91,140,255,.28);
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(18,28,45,.96) 0%,rgba(16,44,55,.92) 100%),
    radial-gradient(circle at top right,rgba(45,212,191,.2),transparent 32%);
  box-shadow:0 24px 58px rgba(0,0,0,.28);
}
.exec-brief-main{
  min-height:128px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1rem 1.1rem;
  border-radius:11px;
  background:linear-gradient(135deg,rgba(91,140,255,.16),rgba(45,212,191,.08));
  border:1px solid rgba(255,255,255,.08);
}
.exec-eyebrow{
  font-size:11px;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#91D9FF;
  font-weight:850;
  margin-bottom:.55rem;
}
.exec-brief-main strong{
  color:#FFFFFF;
  font-size:24px;
  line-height:1.16;
  letter-spacing:0;
}
.exec-brief-main p{
  color:#BFD0E2;
  margin:.55rem 0 0;
  max-width:62ch;
  font-size:13px;
  line-height:1.55;
}
.exec-brief-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;
}
.exec-metric{
  min-height:92px;
  padding:.85rem;
  border-radius:10px;
  background:rgba(14,23,34,.72);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.exec-metric span{
  color:#9FB0C2;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:800;
}
.exec-metric strong{
  color:#FFFFFF;
  font-size:28px;
  line-height:1;
}
.exec-metric small{
  color:#91A8BF;
  font-size:11px;
  line-height:1.25;
}

/* Persistent action launcher */
.quick-action-wrap{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:140;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.7rem;
}
.quick-action-wrap .fab{
  position:static !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
  z-index:auto !important;
}
.quick-action-menu{
  position:absolute;
  right:0;
  bottom:calc(100% + .7rem);
  width:min(330px,calc(100vw - 2rem));
  padding:.55rem;
  border-radius:14px;
  background:rgba(15,24,35,.98);
  border:1px solid rgba(91,140,255,.34);
  box-shadow:0 24px 70px rgba(0,0,0,.44);
  transform:translateY(8px) scale(.98);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
.quick-action-menu.open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.quick-action-menu button{
  width:100%;
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#EEF6FF;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
}
.quick-action-menu button:hover{
  background:rgba(91,140,255,.14);
}
.quick-action-menu button > span{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(135deg,rgba(91,140,255,.28),rgba(45,212,191,.16));
  border:1px solid rgba(255,255,255,.08);
  color:#FFFFFF;
  font-weight:900;
}
.quick-action-menu strong{
  display:block;
  color:#FFFFFF;
  font-size:13px;
  line-height:1.2;
}
.quick-action-menu small{
  display:block;
  margin-top:.2rem;
  color:#93A7BA;
  font-size:11px;
  line-height:1.25;
}
body[data-page="feedback"] .quick-action-wrap{
  bottom:9rem;
}
body[data-page="dashboard"][data-calendar="open"] .quick-action-wrap{
  top:4.8rem;
  bottom:auto;
}
body[data-page="dashboard"][data-calendar="open"] .quick-action-menu{
  top:calc(100% + .7rem);
  bottom:auto;
}
.feedback-actions .btn{
  min-height:28px !important;
  padding:.25rem .55rem !important;
  border-radius:999px !important;
  font-size:11px !important;
}

/* Operational calendar */
.calendar-panel{
  margin-top:1rem !important;
  position:relative;
}
.calendar-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
  margin-bottom:.95rem;
}
.calendar-segment,
.calendar-nav{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.calendar-nav #cal-mes-label{
  min-width:180px;
  color:#F3F8FF;
  text-align:center;
  font-size:13px;
  font-weight:850;
  text-transform:capitalize;
  letter-spacing:.01em;
}
.calendar-month-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:1rem;
  align-items:start;
}
.calendar-grid{
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:.45rem !important;
}
.cal-weekday{
  padding:.2rem .3rem .35rem;
  color:#9FB0C2;
  font-size:10px;
  font-weight:850;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.cal-empty{
  min-height:82px;
  border-radius:11px;
}
.cal-day{
  min-height:82px;
  padding:.55rem;
  border-radius:12px;
  border:1px solid rgba(91,140,255,.18);
  background:linear-gradient(180deg,rgba(15,27,38,.86),rgba(19,32,43,.72));
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.cal-day:hover{
  transform:translateY(-1px);
  border-color:rgba(91,140,255,.58);
  background:linear-gradient(180deg,rgba(26,42,56,.95),rgba(20,36,49,.86));
}
.cal-day.today{
  border-color:rgba(45,212,191,.6);
  box-shadow:inset 0 0 0 1px rgba(45,212,191,.16);
}
.cal-day.selected{
  border-color:#5B8CFF;
  background:linear-gradient(145deg,rgba(36,74,159,.96),rgba(15,83,92,.88));
  box-shadow:0 16px 36px rgba(18,38,92,.34),inset 0 0 0 1px rgba(255,255,255,.08);
}
.cal-day-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.35rem;
}
.cal-day-num{
  color:#DCEBFA;
  font-size:13px;
  font-weight:850;
}
.cal-day.selected .cal-day-num{
  color:#FFFFFF;
}
.cal-day-count{
  min-width:20px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 .35rem;
  border-radius:999px;
  background:rgba(91,140,255,.18);
  color:#BFD5FF;
  border:1px solid rgba(91,140,255,.28);
  font-size:10px;
  font-weight:900;
}
.cal-day.selected .cal-day-count{
  background:rgba(255,255,255,.16);
  color:#FFFFFF;
  border-color:rgba(255,255,255,.18);
}
.cal-day-events{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  margin-top:.45rem;
  min-height:34px;
}
.cal-event-pill{
  display:block;
  max-width:100%;
  padding:.18rem .42rem;
  border-radius:7px;
  color:#DFEAFA;
  background:rgba(91,140,255,.14);
  border:1px solid rgba(91,140,255,.2);
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cal-event-pill b{
  margin-right:.25rem;
  color:#FFFFFF;
}
.cal-event-pill.insistencia{
  background:rgba(251,191,36,.14);
  border-color:rgba(251,191,36,.25);
  color:#FFE6A3;
}
.cal-event-more{
  color:#91D9FF;
  font-size:10px;
  font-weight:800;
}
.cal-bell{
  position:absolute;
  top:.42rem;
  right:.48rem;
  font-size:10px;
  opacity:.9;
}
.calendar-day-panel{
  min-height:100%;
  padding:.85rem;
  padding-bottom:5.8rem;
  border-radius:14px;
  border:1px solid rgba(91,140,255,.26);
  background:linear-gradient(180deg,rgba(13,23,34,.92),rgba(19,33,44,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.cal-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.8rem;
}
.cal-detail-head span{
  display:block;
  color:#91D9FF;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:.25rem;
}
.cal-detail-head strong{
  display:block;
  color:#FFFFFF;
  font-size:15px;
  line-height:1.25;
  text-transform:capitalize;
}
.cal-detail-close{
  width:30px;
  height:30px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  color:#C8D6E6;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.cal-detail-list{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.cal-detail-event{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.18rem;
  padding:.7rem .75rem;
  border-radius:11px;
  border:1px solid rgba(91,140,255,.18);
  border-left:3px solid #5B8CFF;
  background:rgba(91,140,255,.1);
  color:#F2F7FF;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
}
.cal-detail-event.insistencia{
  border-left-color:#FBBF24;
  background:rgba(251,191,36,.1);
}
.cal-detail-event:hover{
  background:rgba(91,140,255,.16);
}
.cal-detail-time{
  color:#91D9FF;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.cal-detail-event strong{
  color:#FFFFFF;
  font-size:12px;
  line-height:1.35;
}
.cal-detail-event small{
  color:#93A7BA;
  font-size:10px;
}
.cal-empty-state{
  min-height:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  text-align:center;
  color:#91A8BF;
  border:1px dashed rgba(145,168,191,.28);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  padding:1rem;
}
.cal-empty-state strong{
  color:#DCEBFA;
  font-size:13px;
}
.cal-empty-state span{
  font-size:12px;
  line-height:1.4;
}
.calendar-day-agenda{
  padding:.85rem;
  border-radius:14px;
  border:1px solid rgba(91,140,255,.22);
  background:linear-gradient(180deg,rgba(13,23,34,.76),rgba(18,31,42,.74));
}
.cal-agenda-summary{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.8rem;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(91,140,255,.18),rgba(45,212,191,.08));
  border:1px solid rgba(255,255,255,.07);
  margin-bottom:.85rem;
}
.cal-agenda-summary > span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(91,140,255,.18);
  color:#FFFFFF;
  font-size:20px;
  font-weight:900;
}
.cal-agenda-summary strong{
  display:block;
  color:#FFFFFF;
  font-size:14px;
}
.cal-agenda-summary small{
  display:block;
  color:#9FB0C2;
  font-size:11px;
  margin-top:.1rem;
}
.cal-agenda-section{
  margin-top:.85rem;
}
.cal-agenda-section > span{
  display:block;
  color:#91D9FF;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:.45rem;
}

@media(max-width:900px){
  .exec-brief{
    grid-template-columns:1fr;
  }
  .exec-brief-main{
    min-height:auto;
  }
  .calendar-month-layout{
    grid-template-columns:1fr;
  }
  .calendar-day-panel{
    min-height:auto;
  }
}
@media(max-width:640px){
  .exec-brief{
    padding:.75rem;
    border-radius:12px;
  }
  .exec-brief-grid{
    grid-template-columns:1fr 1fr;
  }
  .exec-brief-main strong{
    font-size:20px;
  }
  .quick-action-wrap{
    left:.85rem;
    right:.85rem;
    bottom:.85rem;
    top:auto;
    align-items:stretch;
  }
  body[data-page="dashboard"][data-calendar="open"] .quick-action-wrap{
    top:auto;
    bottom:.85rem;
  }
  body[data-page="feedback"] .quick-action-wrap{
    bottom:8rem;
  }
  .quick-action-wrap .fab{
    width:100% !important;
    justify-content:center !important;
  }
  .quick-action-menu{
    width:100%;
  }
  .calendar-toolbar{
    align-items:stretch;
  }
  .calendar-segment,
  .calendar-nav{
    width:100%;
  }
  .calendar-segment .btn{
    flex:1;
    justify-content:center;
  }
  .calendar-nav{
    justify-content:space-between;
  }
  .calendar-nav #cal-mes-label{
    min-width:0;
    flex:1;
  }
  .calendar-grid{
    gap:.28rem !important;
  }
  .cal-weekday{
    font-size:9px;
    padding:.15rem 0 .25rem;
  }
  .cal-empty{
    min-height:54px;
  }
  .cal-day{
    min-height:54px;
    padding:.38rem;
    border-radius:9px;
  }
  .cal-day-events{
    margin-top:.25rem;
    min-height:0;
  }
  .cal-event-pill{
    display:none;
  }
  .cal-event-more{
    display:none;
  }
}

/* ============================================================
   NOTIFICACIONES (campanita) · KANBAN · ARREGLOS MOBILE
   ============================================================ */

/* --- Campanita --- */
.nav-tabs{display:flex;align-items:center;min-width:0}
.nav-bell{position:relative;margin-left:auto;display:flex;align-items:center}
.nav-right{margin-left:12px !important}
.nav-bell-btn{position:relative;background:transparent;border:1px solid var(--border);border-radius:10px;width:38px;height:38px;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.nav-bell-btn:hover{background:var(--blue-dim);border-color:rgba(37,99,235,0.25)}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#F0453E;color:#fff;font-size:10.5px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg,#fff)}
.notif-panel{position:absolute;top:48px;right:0;width:360px;max-width:calc(100vw - 24px);max-height:70vh;background:var(--card,#fff);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 50px rgba(8,12,30,0.22);z-index:200;overflow:hidden;display:flex;flex-direction:column}
.notif-panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700;color:var(--text)}
.notif-panel-head button{background:transparent;border:none;color:var(--blue);font-size:11.5px;font-weight:600;cursor:pointer}
.notif-panel-head button:hover{text-decoration:underline}
.notif-lista{overflow-y:auto;overscroll-behavior:contain}
.notif-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.notif-item:hover{background:var(--bg2,#f5f7fb)}
.notif-item.no-leida{background:rgba(47,84,235,0.06)}
.notif-item.no-leida:hover{background:rgba(47,84,235,0.1)}
.notif-ico{font-size:16px;flex-shrink:0;margin-top:1px}
.notif-cuerpo{flex:1;min-width:0}
.notif-titulo{font-size:12.5px;font-weight:600;color:var(--text)}
.notif-texto{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.35;overflow-wrap:anywhere}
.notif-fecha{font-size:10.5px;color:var(--text3);margin-top:3px}
.notif-punto{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:5px}
.notif-vacio{padding:2.5rem 1rem;text-align:center;color:var(--text3);font-size:12.5px}

/* --- Kanban --- */
.vista-toggle{display:inline-flex;border:1px solid var(--border2,var(--border));border-radius:9px;overflow:hidden}
.vista-toggle button{background:transparent;border:none;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer}
.vista-toggle button.on{background:var(--blue);color:#fff}
.kanban-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.kanban-col{background:var(--bg2,#f5f7fb);border:1px solid var(--border);border-radius:12px;padding:10px;min-height:120px;transition:background .15s,border-color .15s}
.kanban-col.drop-activo{background:var(--blue-dim);border-color:rgba(37,99,235,0.4)}
.kanban-col-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:9px;padding:0 2px}
.kanban-col-count{background:var(--bg3,#e7eaf2);color:var(--text2);border-radius:9px;padding:1px 8px;font-size:11px}
.kanban-cards{display:flex;flex-direction:column;gap:8px;min-height:40px}
.kanban-card{background:var(--card,#fff);border:1px solid var(--border);border-left:3px solid var(--text3);border-radius:10px;padding:9px 11px;cursor:grab;box-shadow:0 1px 2px rgba(8,12,30,0.04)}
.kanban-card:active{cursor:grabbing}
.kanban-card.dragging{opacity:.45}
.kanban-card.p1{border-left-color:#dc2626}
.kanban-card.p2{border-left-color:#ea9a13}
.kanban-card.p3{border-left-color:#eab308}
.kanban-card.p4{border-left-color:#16a34a}
.kanban-card-tit{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;overflow-wrap:anywhere}
.kanban-card-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px;font-size:10.5px;color:var(--text3)}
.kanban-hint{font-size:11px;color:var(--text3);margin:-4px 0 12px}

@media(max-width:900px){
  .kanban-board{grid-template-columns:repeat(4,minmax(240px,1fr));overflow-x:auto;padding-bottom:8px}
}

/* --- Arreglos mobile (≤640px) ---
   Antes .nav-right se ocultaba entero: en el celular no se podía ver quién
   sos, conectar Google ni CERRAR SESIÓN. Ahora dejamos visibles la campanita
   y el botón Salir; sólo se ocultan el nombre/rol y "Conectar Google". */
@media(max-width:640px){
  /* La barra completa NO scrollea: sólo las pestañas. Así la campanita y
     "Salir" quedan siempre fijas a la vista. */
  .nav{overflow:visible !important}
  .nav-logo{display:none !important}        /* la 1ª pestaña ya dice SCTD */
  .nav-tabs{flex:1;min-width:0;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
  .nav-tabs::-webkit-scrollbar{display:none}
  .nav-right{display:flex !important;margin-left:8px !important;gap:6px !important}
  #usuario-info{display:none !important}
  #btn-google-cal{display:none !important}
  .nav-bell{margin-left:6px}
  .notif-panel{position:fixed;top:60px;right:12px;left:12px;width:auto;max-width:none}
  .kanban-board{grid-template-columns:repeat(4,minmax(200px,80vw))}
}