:root {
  --cyan:#06a3b6; --cyan-2:#0891a3; --cyan-deep:#066b78;
  --teal-dark:#0a3d4a; --teal-darker:#062a33;
  --navy:#021528; --navy-2:#032250; --deep:#0a5c8a;
  --gold:#f5b830; --gold-2:#ffd166;
  --emerald:#10b981; --rose:#f43f5e; --blue:#0065F3;
  --paper:#f0f4f8; --paper-2:#e8f4f6; --card:#ffffff;
  --text:#0a3d4a; --text-2:#1a4a5a; --muted:#5a7480;
  --border:rgba(10,61,74,.10); --border-2:rgba(10,61,74,.18);
  --shadow-sm:0 2px 8px rgba(6,107,120,.08);
  --shadow:0 8px 24px rgba(6,107,120,.10), 0 0 0 1px rgba(10,61,74,.04);
  --shadow-lg:0 20px 50px rgba(6,107,120,.16);
  --r:22px; --r-sm:14px;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
body[data-theme="dark"] {
  --paper:#06151a; --paper-2:#0a2026; --card:#0f2a33;
  --text:#e8f4f6; --text-2:#b8d4d8; --muted:#7a9aa5;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14);
  --shadow:0 8px 24px rgba(0,0,0,.5); --shadow-lg:0 20px 50px rgba(0,0,0,.7);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--paper); color:var(--text); -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(900px 600px at -10% -5%,rgba(6,163,182,.10),transparent 65%),radial-gradient(1200px 700px at 60% 35%,rgba(10,92,138,.08),transparent 65%),radial-gradient(800px 500px at 110% 80%,rgba(5,143,160,.10),transparent 65%); }
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.04; background-image:radial-gradient(circle,var(--cyan) 1px,transparent 1px); background-size:28px 28px; }
#login-screen,#dashboard,#admin-panel { position:relative; z-index:1; }

/* LOGIN */
.login-container { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { background:var(--card); border-radius:32px; box-shadow:var(--shadow-lg); padding:56px 44px; max-width:460px; text-align:center; border:1px solid var(--border); position:relative; overflow:hidden; }
.login-card::before { content:""; position:absolute; top:-100px; right:-100px; width:300px; height:300px; background:radial-gradient(circle,rgba(6,163,182,.18),transparent 70%); }
.login-mark { width:72px; height:72px; margin:0 auto 24px; color:var(--cyan); filter:drop-shadow(0 8px 16px rgba(6,163,182,.4)); position:relative; z-index:1; }
.kicker-mini { font-size:11px; letter-spacing:3px; color:var(--cyan); font-weight:700; margin-bottom:8px; position:relative; z-index:1; }
.login-card h1 { font-family:var(--display); font-style:italic; font-weight:800; font-size:56px; line-height:.95; color:var(--text); position:relative; z-index:1; }
.login-tagline { font-family:var(--display); font-style:italic; font-size:16px; color:var(--muted); margin-top:8px; position:relative; z-index:1; }
.login-card small { display:block; margin-top:24px; font-size:12px; color:var(--muted); position:relative; z-index:1; }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:linear-gradient(135deg,var(--cyan),var(--cyan-2)); color:#fff; border:none; padding:16px 32px; border-radius:999px; font-size:14px; font-weight:700; cursor:pointer; margin-top:16px; box-shadow:0 12px 30px rgba(6,163,182,.45); transition:all .2s; position:relative; z-index:1; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(6,163,182,.55); }
.btn-primary i { width:16px; height:16px; }
.btn-ghost-dark { background:transparent; border:1.5px solid var(--border-2); color:var(--text); padding:12px 24px; border-radius:999px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; }
.btn-ghost-dark:hover { background:var(--paper); }
.btn-small-danger { background:transparent; color:var(--rose); border:1px solid var(--rose); padding:6px 14px; border-radius:999px; cursor:pointer; font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.btn-small-danger:hover { background:var(--rose); color:#fff; }
.error-msg { color:var(--rose); min-height:18px; margin:14px 0 0; font-size:13px; }

/* HEADER */
.hero-topbar { background:rgba(255,255,255,.92); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; backdrop-filter:blur(20px); }
body[data-theme="dark"] .hero-topbar { background:rgba(15,42,51,.92); }
.topbar-inner { max-width:1320px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-block { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-mark { width:36px; height:36px; color:var(--cyan); }
.brand-name { font-family:var(--display); font-weight:800; font-style:italic; font-size:18px; color:var(--text); line-height:1; }
.brand-sub { font-size:10px; color:var(--muted); letter-spacing:1.5px; margin-top:2px; }
.topbar-greeting { flex:1; text-align:center; }
.greet-meta { display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--text); font-weight:500; padding:6px 16px; background:var(--paper); border-radius:999px; border:1px solid var(--border); }
.greet-meta .status-dot { width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 3px rgba(16,185,129,.25); animation:pulseDot 2s infinite; }
@keyframes pulseDot { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.dot-sep { color:var(--muted); opacity:.5; }
#greet-name { font-family:var(--display); font-style:italic; font-weight:700; color:var(--cyan); }
.topbar-meta { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.meta-chip { display:flex; align-items:center; gap:6px; padding:7px 12px; background:var(--paper); border-radius:10px; font-size:12px; color:var(--text); border:1px solid var(--border); font-weight:500; }
.meta-chip i { width:14px; height:14px; color:var(--cyan); }
.meta-chip.mono { font-family:var(--mono); font-weight:700; }
.topbar-actions { display:flex; align-items:center; gap:6px; margin-left:8px; }
.avatar { width:34px; height:34px; border-radius:50%; border:2px solid var(--border-2); }
.icon-btn { width:36px; height:36px; border-radius:10px; border:none; background:var(--paper); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all .15s; }
.icon-btn:hover { background:var(--cyan); color:#fff; }
.icon-btn i { width:16px; height:16px; }

/* PAGE */
.page { max-width:1320px; margin:0 auto; padding:24px; position:relative; z-index:1; }
.section-label { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:800; color:var(--cyan); letter-spacing:2.5px; text-transform:uppercase; padding:0 4px; margin-bottom:14px; }
.section-label::after { content:""; flex:1; height:1px; background:linear-gradient(to right,var(--cyan),transparent); max-width:300px; }
.kicker-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(6,163,182,.18); animation:pulseDot 2s infinite; }
.connector { width:2px; height:36px; margin:8px auto; position:relative; background:linear-gradient(to bottom,transparent,var(--cyan)); }
.connector::after { content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(6,163,182,.2),0 0 16px rgba(6,163,182,.5); }
.card-shell { padding:24px; border-radius:26px; border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow); }
.card-shell.narrow { max-width:780px; margin:0 auto; }
.fade-in { animation:fadeUp .55s cubic-bezier(.22,1,.36,1) backwards; }
.fade-in:nth-of-type(1) { animation-delay:.05s; } .fade-in:nth-of-type(2) { animation-delay:.12s; } .fade-in:nth-of-type(3) { animation-delay:.19s; } .fade-in:nth-of-type(4) { animation-delay:.26s; } .fade-in:nth-of-type(5) { animation-delay:.33s; }
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

/* ARSENAL */
.tools-header-row { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:0 4px 14px; border-bottom:1px solid var(--border); margin-bottom:18px; }
.tools-title { font-size:11px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase; color:var(--text); }
.tools-sub { font-size:12px; font-weight:600; color:var(--muted); }
.tools-group { margin-bottom:22px; } .tools-group:last-child { margin-bottom:0; }
.tools-group-label { display:flex; align-items:center; gap:8px; font-size:9.5px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; padding:0 2px; }
.tools-group-label::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tools-group-label.google { color:#4285F4; } .tools-group-label.ai { color:var(--cyan); } .tools-group-label.work { color:var(--deep); } .tools-group-label.crm { color:#e07000; }
.tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.tool-item { position:relative; text-decoration:none; color:var(--text); border-radius:18px; border:1px solid var(--border); background:var(--paper); padding:14px 8px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; min-height:108px; transition:all .18s; }
.tool-item:hover { transform:translateY(-6px); background:var(--card); border-color:var(--cyan); box-shadow:0 12px 28px rgba(6,163,182,.18); }
.tool-item .open-mark { position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:999px; background:var(--card); border:1px solid var(--border); display:grid; place-items:center; font-size:11px; color:var(--muted); }
.icon-tile { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.icon-tile img { width:30px; height:30px; object-fit:contain; }
.tool-name { font-size:12px; font-weight:700; text-align:center; color:var(--text); }
.tool-add-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border:2px dashed var(--border-2); border-radius:18px; background:transparent; cursor:pointer; color:var(--cyan); font-family:inherit; min-height:108px; justify-content:center; }
.tool-add-card:hover { border-color:var(--cyan); background:rgba(6,163,182,.05); }
.tool-add-card i { width:24px; height:24px; }
.tool-add-card span { font-size:11px; font-weight:700; }
.tool-delete-btn { position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%; background:var(--rose); color:#fff; border:none; font-size:13px; cursor:pointer; opacity:0; transition:opacity .2s; box-shadow:0 4px 12px rgba(244,63,94,.5); z-index:3; }
.tool-item-wrap { position:relative; }
.tool-item-wrap:hover .tool-delete-btn { opacity:1; }

/* ══════════════════════════════════════════
   ARSENAL — Grid 2×2 de tarjetas cuadradas grandes
   ══════════════════════════════════════════ */
.arsenal-grid-2x2 {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-auto-rows:1fr;
  gap:18px;
}
@media (max-width:900px) {
  .arsenal-grid-2x2 { grid-template-columns:1fr; grid-auto-rows:auto; }
}

.arsenal-square-card {
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-top:3px solid var(--asc-color, var(--cyan));
  border-radius:20px;
  padding:22px 22px 20px;
  box-shadow:0 6px 20px rgba(15,40,60,.05);
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.arsenal-square-card:hover {
  box-shadow:0 14px 32px rgba(15,40,60,.10);
  transform:translateY(-2px);
}

.arsenal-google { --asc-color:#4285F4; }
.arsenal-ai     { --asc-color:var(--cyan); }
.arsenal-work   { --asc-color:var(--deep); }
.arsenal-crm    { --asc-color:#e07000; }

.asc-header {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--asc-color, var(--cyan));
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.asc-dot {
  width:8px; height:8px;
  border-radius:50%;
  background:var(--asc-color, var(--cyan));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--asc-color, var(--cyan)) 18%, transparent);
}

.arsenal-square-card .tools-grid {
  grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
  gap:12px;
  align-content:start;
}

/* MISIONES */
.missions-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.mission-banner { position:relative; border-radius:22px; overflow:hidden; padding:22px 20px; display:flex; flex-direction:column; gap:14px; min-height:230px; text-decoration:none; color:#fff; transition:transform .18s; border:1px solid rgba(255,255,255,.08); }
.mission-banner:hover { transform:translateY(-5px); }
.mission-support { background:radial-gradient(600px 350px at 10% 20%,rgba(0,101,243,.55),transparent 65%),radial-gradient(400px 250px at 90% 90%,rgba(25,205,235,.28),transparent 65%),linear-gradient(135deg,#021528,#032250); box-shadow:0 10px 36px rgba(0,101,243,.28); }
.mission-db { background:radial-gradient(600px 350px at 10% 20%,rgba(0,151,204,.55),transparent 65%),radial-gradient(400px 250px at 90% 90%,rgba(0,101,243,.35),transparent 65%),linear-gradient(135deg,#011B38,#022650); box-shadow:0 10px 36px rgba(0,101,243,.26); }
.mission-alta { background:radial-gradient(600px 350px at 10% 20%,rgba(25,205,235,.42),transparent 65%),radial-gradient(400px 250px at 90% 90%,rgba(0,151,204,.32),transparent 65%),linear-gradient(135deg,#011628,#022038); box-shadow:0 10px 36px rgba(25,205,235,.20); }
.mission-training { background:radial-gradient(600px 350px at 10% 20%,rgba(16,185,129,.50),transparent 65%),radial-gradient(400px 250px at 90% 90%,rgba(5,150,105,.35),transparent 65%),linear-gradient(135deg,#011c18,#02302a); box-shadow:0 10px 36px rgba(16,185,129,.22); }
.mission-glow { position:absolute; top:-40px; right:-40px; width:180px; height:180px; border-radius:50%; opacity:.18; filter:blur(38px); background:#fff; pointer-events:none; }
.mission-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mission-icon { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#19CDEB; }
.mission-training .mission-icon { color:#10b981; }
.mission-icon i { width:24px; height:24px; }
.mission-status { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:9.5px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; background:rgba(255,255,255,.85); color:var(--text); }
.mission-status .status-dot { width:6px; height:6px; border-radius:50%; background:var(--emerald); animation:pulseDot 2s infinite; }
.mission-body { flex:1; display:flex; flex-direction:column; gap:6px; }
.mission-eyebrow { font-size:9.5px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.5); }
.mission-title { font-family:var(--display); font-size:22px; font-weight:900; font-style:italic; line-height:1.1; color:#fff; }
.mission-desc { font-size:12px; color:rgba(255,255,255,.6); line-height:1.5; }
.mission-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; flex-wrap:wrap; }
.mission-tags { display:flex; gap:5px; flex-wrap:wrap; }
.tag { display:inline-flex; padding:3px 8px; border-radius:999px; font-size:9.5px; font-weight:700; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.7); }
.mission-cta { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:12px; font-size:12.5px; font-weight:800; background:var(--deep); color:#fff; border:1px solid rgba(255,255,255,.14); transition:transform .12s; }
.mission-cta:hover { transform:translateY(-2px); }
.mission-cta i { width:14px; height:14px; }
.mission-cta.light { background:#fff; color:var(--deep); }
.mission-cta.cyan { background:var(--cyan); color:var(--navy); }
.mission-cta.emerald { background:var(--emerald); color:#011c18; }

/* ALARMAS */
.alarms-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:14px; }
.alarms-left { display:grid; gap:14px; align-content:start; }
.alarm-card { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:18px; background:var(--paper); border:1px solid var(--border); }
.alarm-card.gather { background:linear-gradient(135deg,rgba(6,163,182,.12),rgba(5,143,160,.06)); border-color:rgba(6,163,182,.20); }
.alarm-card.weather { background:linear-gradient(135deg,rgba(6,163,182,.10),rgba(10,92,138,.06)); border-color:rgba(6,163,182,.18); }
.alarm-icon-wrap { position:relative; flex-shrink:0; }
.alarm-icon { width:46px; height:46px; border-radius:13px; background:var(--cyan); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(6,163,182,.25); flex-shrink:0; }
.alarm-icon i { width:22px; height:22px; }
.pulse-dot { position:absolute; bottom:-2px; right:-2px; width:12px; height:12px; background:var(--emerald); border-radius:50%; border:2px solid var(--card); }
.pulse-dot::after { content:""; position:absolute; inset:0; background:var(--emerald); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0% { transform:scale(1); opacity:.8; } 100% { transform:scale(2.6); opacity:0; } }
.alarm-info { flex:1; min-width:0; }
.alarm-title { font-size:15px; font-weight:800; color:var(--text); }
.alarm-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.alarm-extra { font-size:11px; color:var(--muted); margin-top:2px; opacity:.75; font-style:italic; }
.alarm-extra.mono { font-family:var(--mono); letter-spacing:1px; font-style:normal; text-transform:uppercase; font-weight:700; }
.alarm-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.alarm-cta { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:11px; background:var(--cyan); color:#fff; text-decoration:none; font-size:12.5px; font-weight:800; }
.alarm-cta:hover { background:var(--cyan-2); }
.alarm-cta i { width:14px; height:14px; }
.countdown { font-weight:900; font-size:12px; background:var(--paper); border:1px solid var(--border); color:var(--text); padding:7px 10px; border-radius:11px; min-width:78px; text-align:center; }
.countdown.live { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.3); color:var(--emerald); }
.btn-mini { display:inline-flex; padding:7px 12px; border-radius:10px; background:var(--cyan); color:#fff; text-decoration:none; font-size:12px; font-weight:700; }
.weather-icon { font-size:38px; line-height:1; flex-shrink:0; }
.weather-temp { font-size:26px; font-weight:900; color:var(--text); letter-spacing:-1px; }
.weather-extras { display:flex; gap:14px; flex-shrink:0; }
.weather-extras > div { text-align:center; font-size:10px; color:var(--muted); }
.weather-extras strong { display:block; font-size:13px; font-weight:900; color:var(--text); }

/* CUMPLEAÑOS */
.bday-panel { border-radius:22px; border:1px solid rgba(6,163,182,.20); background:linear-gradient(160deg,rgba(6,163,182,.08),rgba(5,143,160,.05) 60%,rgba(10,92,138,.06)); position:relative; height:100%; min-height:280px; display:flex; align-items:center; justify-content:center; padding:24px 20px; overflow:hidden; }
.bday-shimmer { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cyan),var(--deep),rgba(255,255,255,.85),var(--cyan)); background-size:200% 100%; animation:shimmerBar 2.5s linear infinite; }
@keyframes shimmerBar { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.bday-content { text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.bday-avatar-wrap { position:relative; }
.bday-float { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:22px; animation:floatBalloon 2s ease-in-out infinite; z-index:2; }
@keyframes floatBalloon { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-6px); } }
.bday-ring { width:96px; height:96px; border-radius:50%; padding:3px; background:conic-gradient(from 0deg,var(--cyan),var(--deep),#fff,var(--cyan)); animation:spinRing 5s linear infinite; box-shadow:0 0 22px rgba(6,163,182,.35); }
@keyframes spinRing { to { transform:rotate(360deg); } }
.bday-avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:top; border:3px solid var(--card); }
.bday-badge { display:inline-flex; padding:4px 12px; border-radius:999px; background:rgba(6,163,182,.10); border:1px solid rgba(6,163,182,.25); font-size:9.5px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); margin-top:6px; }
.bday-name { font-family:var(--display); font-size:22px; font-weight:900; font-style:italic; color:var(--text); }
.bday-role { font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.bday-date-chip { display:inline-flex; gap:6px; padding:8px 18px; border-radius:999px; background:var(--card); border:1px solid rgba(6,163,182,.22); font-size:14px; font-weight:900; color:var(--text); margin-top:6px; }
.bday-countdown { font-size:12px; color:var(--muted); font-weight:700; }
.bday-countdown strong { color:#fff; background:var(--cyan); padding:2px 10px; border-radius:999px; font-weight:900; }
.bday-confetti { font-size:18px; letter-spacing:4px; opacity:.7; margin-top:4px; }

/* ═══ SPOTLIGHT NUEVO ═══ */
.spotlight-banner-v2 {
  position:relative; border-radius:22px; overflow:hidden;
  min-height:380px; aspect-ratio:16/7;
  background:linear-gradient(135deg,var(--teal-darker),var(--teal-dark),var(--navy-2));
  display:flex;
}
.spotlight-shimmer { position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold),#e6a817,#fff,var(--gold)); background-size:200% 100%;
  animation:shimmerBar 2.5s linear infinite; z-index:5; }
.spotlight-image {
  position:absolute; inset:0; z-index:1;
  background-size:cover; background-position:center 25%; background-repeat:no-repeat;
}
.spotlight-overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg, rgba(2,21,40,.95) 0%, rgba(2,21,40,.85) 30%, rgba(2,21,40,.4) 60%, rgba(2,21,40,.05) 100%);
}
.spotlight-banner-v2:not(.has-image) .spotlight-overlay {
  background:radial-gradient(circle at 20% 50%, rgba(245,184,48,.15), transparent 50%);
}
.spotlight-content-v2 {
  position:relative; z-index:3; padding:36px 40px;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  max-width:580px; color:#fff;
}
.spotlight-badge { display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px; background:rgba(245,184,48,.18); border:1px solid rgba(245,184,48,.4); font-size:10.5px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--gold); width:fit-content; backdrop-filter:blur(8px); }
.crown { font-size:14px; animation:floatCrown 2.5s ease-in-out infinite; display:inline-block; }
@keyframes floatCrown { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }

/* Honorees */
.spotlight-honorees { display:flex; flex-direction:column; gap:6px; }
.spotlight-honorees[data-count="2"], .spotlight-honorees[data-count="3"] { gap:4px; }
.honoree-item { display:flex; flex-direction:column; }
.honoree-name-display {
  font-family:var(--display); font-style:italic; font-weight:900; line-height:1.05;
  letter-spacing:-.03em; text-shadow:0 4px 20px rgba(0,0,0,.5);
  font-size:clamp(36px,4vw,52px);
}
.spotlight-honorees[data-count="2"] .honoree-name-display { font-size:clamp(28px,3vw,40px); }
.spotlight-honorees[data-count="3"] .honoree-name-display { font-size:clamp(22px,2.4vw,32px); }
.honoree-role-display {
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--gold-2);
  margin-top:2px;
}
.honoree-divider { display:none; }

.spotlight-stars { font-size:18px; letter-spacing:3px; margin-top:4px; }
.spotlight-msg {
  font-size:14px; line-height:1.6; color:rgba(255,255,255,.9); font-style:italic;
  padding:14px 18px; background:rgba(0,0,0,.4); border-radius:14px;
  border-left:3px solid var(--gold); max-width:480px; position:relative;
  backdrop-filter:blur(8px);
}
.spotlight-msg:empty { display:none; }
.spotlight-msg::before { content:'\201C'; font-size:42px; color:var(--gold); opacity:.4; position:absolute; top:-6px; left:10px; font-family:Georgia,serif; line-height:1; }

/* MENSAJE */
.msg-display { padding:8px 12px; }
.msg-kicker { font-size:9.5px; font-weight:900; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.msg-kicker::after { content:""; flex:1; height:1px; background:linear-gradient(to right,rgba(6,163,182,.25),transparent); }
.msg-body { min-height:80px; transition:opacity .25s,transform .25s; }
.msg-body.fading { opacity:0; transform:translateY(6px); }
.msg-quote { font-family:var(--display); font-size:clamp(20px,2.5vw,28px); font-weight:700; font-style:italic; line-height:1.35; color:var(--text); }
.msg-quote .q-mark { font-size:1.4em; color:var(--cyan); opacity:.6; font-style:normal; vertical-align:-.25em; margin-right:2px; }
.msg-controls { margin-top:14px; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.msg-counter { font-size:11px; font-weight:700; color:var(--muted); margin-right:8px; font-family:var(--mono); }
.ctrl-btn { width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--paper); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.ctrl-btn:hover { background:var(--cyan); color:#fff; transform:scale(1.08); }
.ctrl-btn i { width:14px; height:14px; }
.msg-progress { height:3px; background:rgba(6,163,182,.10); margin-top:14px; border-radius:999px; overflow:hidden; }
.msg-progress-fill { height:100%; width:0; background:linear-gradient(90deg,var(--cyan-deep),var(--cyan)); transition:width .03s linear; }
.ld-wrap { display:flex; align-items:center; justify-content:center; gap:6px; padding:14px; }
.ld { width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:ldPulse 1.2s ease-in-out infinite; }
.ld:nth-child(2) { animation-delay:.2s; } .ld:nth-child(3) { animation-delay:.4s; }
@keyframes ldPulse { 0%,100% { opacity:.2; transform:scale(.8); } 50% { opacity:1; transform:scale(1.2); } }

/* FOOTER */
.hero-footer { text-align:center; padding:32px 20px 28px; color:var(--muted); font-size:11px; letter-spacing:2px; font-weight:600; display:flex; justify-content:center; gap:12px; }
.sep { opacity:.5; }
.empty, .loading { color:var(--muted); text-align:center; padding:30px; font-style:italic; }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(6,42,51,.55); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal { background:var(--card); color:var(--text); border-radius:24px; padding:36px; max-width:460px; width:100%; box-shadow:var(--shadow-lg); max-height:90vh; overflow-y:auto; border:1px solid var(--border); }
.modal h3 { font-family:var(--display); font-style:italic; font-weight:800; margin:0 0 24px; color:var(--text); font-size:32px; }
.modal label { display:block; margin-bottom:16px; font-size:11px; color:var(--muted); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.modal input, .modal textarea { display:block; width:100%; margin-top:8px; padding:12px 14px; border:1.5px solid var(--border-2); border-radius:12px; font-family:inherit; font-size:14px; background:var(--paper); color:var(--text); }
.modal input:focus, .modal textarea:focus { outline:none; border-color:var(--cyan); }
.modal-buttons { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.modal-buttons .btn-primary { margin-top:0; }
.theme-toggle { display:flex; gap:8px; margin-top:8px; background:var(--paper); border-radius:14px; padding:4px; border:1px solid var(--border); }
.theme-btn { flex:1; padding:10px; border:none; background:transparent; color:var(--text); border-radius:10px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; }
.theme-btn.active { background:var(--cyan); color:#fff; }

/* ADMIN */
.admin-main { max-width:820px; margin:0 auto; padding:40px 28px; position:relative; z-index:1; }
.admin-section { background:var(--card); border-radius:24px; box-shadow:var(--shadow); padding:32px; margin-bottom:20px; border:1px solid var(--border); }
.admin-section h2 { font-family:var(--display); font-style:italic; font-weight:800; margin:0 0 8px; color:var(--text); font-size:32px; }
.admin-help { font-size:13px; color:var(--muted); margin-bottom:24px; }
.admin-section label { display:block; margin-bottom:16px; font-size:11px; color:var(--muted); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.admin-section input, .admin-section textarea { display:block; width:100%; margin-top:8px; padding:12px 14px; border:1.5px solid var(--border-2); border-radius:12px; font-family:inherit; font-size:14px; background:var(--paper); color:var(--text); }
.admin-section input:focus, .admin-section textarea:focus { outline:none; border-color:var(--cyan); }
.admin-item { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--paper); border-radius:12px; margin-bottom:8px; border:1px solid var(--border); font-size:14px; }
.add-row { display:flex; gap:10px; margin-top:16px; align-items:center; flex-wrap:wrap; }
.add-row input { flex:1; min-width:140px; margin-top:0; }
.add-row .btn-primary { margin-top:0; padding:14px 24px; }
.save-status { margin-left:14px; color:var(--cyan); font-size:13px; font-weight:600; }

/* Honorees admin */
.sp-preview { width:100%; height:200px; background-size:cover; background-position:center 25%; border-radius:14px; border:1px solid var(--border); margin-top:8px; margin-bottom:18px; }
.honoree-row { display:grid; grid-template-columns:32px 1fr 1fr auto; gap:10px; align-items:center; margin-bottom:10px; padding:12px; background:var(--paper); border-radius:12px; border:1px solid var(--border); }
.honoree-num { width:32px; height:32px; border-radius:50%; background:var(--cyan); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.honoree-row input { margin-top:0; padding:10px 12px; }
.honoree-row .btn-small-danger { margin:0; }

/* RESPONSIVE */
@media (max-width:1100px) { .missions-grid { grid-template-columns:1fr 1fr; } .alarms-grid { grid-template-columns:1fr; } }
@media (max-width:900px) {
  .topbar-greeting { display:none; }
  .topbar-meta { gap:4px; }
  .meta-chip { padding:6px 10px; font-size:11px; }
  .missions-grid { grid-template-columns:1fr; }
  .spotlight-banner-v2 { aspect-ratio:auto; min-height:340px; }
  .spotlight-content-v2 { padding:24px; max-width:100%; }
  .spotlight-overlay { background:linear-gradient(180deg, rgba(2,21,40,.4) 0%, rgba(2,21,40,.92) 60%); }
}
@media (max-width:600px) {
  .topbar-meta .meta-chip:not(.mono) { display:none; }
  .tools-grid { grid-template-columns:repeat(3,1fr); }
  .honoree-row { grid-template-columns:32px 1fr auto; }
  .honoree-row .honoree-role { grid-column:2/4; margin-top:8px; }
}
/* ═══════════════════════════════════════════
   AGREGAR ESTO AL FINAL DE tu css/styles.css
   (no reemplaza nada, solo agrega al final)
   ═══════════════════════════════════════════ */

/* MSG SHELL extendido */
.msg-shell { max-width:780px; margin:0 auto; padding:0; overflow:hidden; }
.msg-shell .msg-display { padding:24px 24px 14px; }
.msg-shell .msg-kicker { font-size:9.5px; font-weight:900; letter-spacing:3.5px; text-transform:uppercase; color:var(--cyan); display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.msg-shell .msg-kicker::after { content:""; flex:1; height:1px; background:linear-gradient(to right,rgba(6,163,182,.25),transparent); }
.msg-body { min-height:70px; transition:opacity .25s,transform .25s; padding:4px 0; }
.msg-body.fading { opacity:0; transform:translateY(6px); }
.msg-quote { font-family:var(--display); font-size:clamp(18px,2.4vw,26px); font-weight:700; font-style:italic; line-height:1.35; color:var(--text); }
.msg-quote .q-mark { font-size:1.4em; color:var(--cyan); opacity:.6; font-style:normal; vertical-align:-.25em; margin-right:2px; }

.msg-meta { margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.msg-author-wrap { display:inline-flex; align-items:center; gap:8px; }
.author-av { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--deep),var(--cyan)); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; color:#fff; border:2px solid var(--card); }
.author-nm { font-size:12px; font-weight:800; color:var(--cyan); }
.author-dt { font-size:10.5px; color:var(--muted); }
.msg-ctrl-row { display:flex; align-items:center; gap:6px; }
.ctrl-btn.del-btn:hover { background:var(--rose); color:#fff; }

.msg-progress { height:3px; background:rgba(6,163,182,.10); overflow:hidden; }
.msg-progress-fill { height:100%; width:0; background:linear-gradient(90deg,var(--cyan-deep),var(--cyan)); box-shadow:0 0 8px rgba(6,163,182,.5); transition:width .03s linear; }

.msg-divider { height:1px; margin:0 24px; background:linear-gradient(90deg,transparent,var(--border),transparent); }

.msg-add-wrap { padding:18px 24px; }
.msg-add-title { font-size:9.5px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.msg-field { width:100%; padding:10px 14px; background:var(--paper); border:1px solid var(--border-2); border-radius:10px; color:var(--text); font-family:inherit; font-size:13px; font-weight:500; outline:none; transition:border-color .2s,background .2s,box-shadow .2s; resize:none; margin-bottom:8px; }
.msg-field::placeholder { color:var(--muted); }
.msg-field:focus { border-color:var(--cyan); background:var(--card); box-shadow:0 0 0 3px rgba(6,163,182,.1); }
.msg-field-row { display:flex; gap:8px; align-items:flex-start; }
.msg-field-row .msg-field { flex:1; margin-bottom:0; }
.msg-char { font-size:10px; color:var(--muted); text-align:right; margin-top:4px; }
.msg-char.warn { color:var(--rose); font-weight:700; }
.msg-pub-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:10px; border:none; background:linear-gradient(135deg,var(--cyan),var(--cyan-2)); color:#fff; font-family:inherit; font-size:12.5px; font-weight:800; cursor:pointer; white-space:nowrap; transition:filter .15s,transform .12s; box-shadow:0 6px 16px rgba(6,163,182,.3); flex-shrink:0; }
.msg-pub-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.msg-pub-btn:disabled { opacity:.5; cursor:wait; }

.msg-playlist { padding:4px 24px 20px; }
.pl-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pl-hdr-title { font-size:9.5px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); }
.pl-hdr-count { font-size:11px; font-weight:700; color:var(--cyan); background:rgba(6,163,182,.08); border:1px solid rgba(6,163,182,.18); padding:3px 10px; border-radius:999px; }
.pl-list { display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto; padding-right:4px; }
.pl-list::-webkit-scrollbar { width:4px; }
.pl-list::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:2px; }
.pl-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--paper); cursor:pointer; transition:all .15s; }
.pl-item:hover { background:var(--card); border-color:rgba(6,163,182,.25); }
.pl-item.pl-active { background:rgba(6,163,182,.08); border-color:rgba(6,163,182,.3); }
.pl-num { width:20px; height:20px; border-radius:50%; background:rgba(6,163,182,.1); border:1px solid rgba(6,163,182,.2); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; color:var(--cyan); flex-shrink:0; margin-top:1px; }
.pl-item.pl-active .pl-num { background:var(--cyan); color:#fff; }
.pl-content { flex:1; min-width:0; }
.pl-text { font-size:13px; font-weight:600; color:var(--text); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pl-by { font-size:10.5px; color:var(--muted); margin-top:3px; }
.pl-item.pl-active .pl-by { color:var(--cyan); }
.pl-del { flex-shrink:0; width:24px; height:24px; border-radius:6px; border:1px solid rgba(244,63,94,.25); background:rgba(244,63,94,.06); color:var(--rose); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.pl-del:hover { background:var(--rose); color:#fff; border-color:var(--rose); }
.pl-empty { text-align:center; padding:28px 10px; font-size:13px; color:var(--muted); font-style:italic; }
/* ═══════════════════════════════════════════
   AGREGAR ESTO AL FINAL DE css/styles.css
   (nav del topbar + greet row)
   ═══════════════════════════════════════════ */

/* Ajustes al topbar para acomodar nav */
.hero-topbar { padding:0; }
.topbar-inner { padding:12px 24px 10px; }

.brand-link { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }

/* ═══ NAV LINKS ═══ */
.topbar-nav {
  display:flex; align-items:center; gap:4px; flex:1;
  justify-content:center; max-width:640px; margin:0 auto;
}
.nav-link {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:10px;
  font-size:13px; font-weight:600; color:var(--muted);
  text-decoration:none; transition:all .15s;
  white-space:nowrap;
}
.nav-link i { width:15px; height:15px; }
.nav-link:hover { background:var(--paper); color:var(--text); }
.nav-link.active {
  background:linear-gradient(135deg, rgba(6,163,182,.12), rgba(6,163,182,.06));
  color:var(--cyan); font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(6,163,182,.18);
}

/* ═══ NAV GROUPS (dropdowns: Operaciones, Recursos) ═══ */
.nav-group { position:relative; }

.nav-group-toggle {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:10px;
  font-size:13px; font-weight:600; color:var(--muted);
  font-family:inherit;
  background:none; border:none; cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.nav-group-toggle i { width:15px; height:15px; }
.nav-group-toggle .nav-group-arrow {
  width:13px; height:13px;
  transition:transform .2s ease;
  opacity:.7;
}
.nav-group-toggle:hover { background:var(--paper); color:var(--text); }
.nav-group-toggle.active {
  background:linear-gradient(135deg, rgba(6,163,182,.12), rgba(6,163,182,.06));
  color:var(--cyan); font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(6,163,182,.18);
}
.nav-group.open .nav-group-arrow { transform:rotate(180deg); }

.nav-dropdown {
  position:absolute; top:calc(100% + 6px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:200px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px;
  display:flex; flex-direction:column; gap:2px;
  box-shadow:0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:110;
}
.nav-group.open .nav-dropdown {
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown .nav-link {
  width:100%;
  justify-content:flex-start;
  padding:9px 12px;
  font-size:13px;
}
.nav-dropdown .nav-link i { width:16px; height:16px; }

/* Responsive overrides para los grupos */
@media (max-width:1100px) {
  .nav-group-toggle { padding:8px 10px; }
  .nav-group-toggle > span { display:none; }
  .nav-group-toggle > i:not(.nav-group-arrow) { width:18px; height:18px; }
  .nav-group-toggle .nav-group-arrow { width:11px; height:11px; }
  /* En el dropdown sí se ven los labels (el menú es ancho) */
  .nav-dropdown .nav-link span { display:inline; }
}
@media (max-width:900px) {
  /* Mobile: aplanar — el dropdown se vuelve sección visible dentro del menú */
  .nav-group { width:100%; }
  .nav-group-toggle {
    width:100%; padding:10px 14px 4px;
    justify-content:flex-start;
    color:var(--muted); font-size:11px;
    text-transform:uppercase; letter-spacing:.5px;
    cursor:default; pointer-events:none;
  }
  .nav-group-toggle > span { display:inline; }
  .nav-group-toggle > i:not(.nav-group-arrow) { width:14px; height:14px; }
  .nav-group-toggle .nav-group-arrow { display:none; }
  .nav-group-toggle:hover { background:none; color:var(--muted); }
  .nav-group-toggle.active { background:none; box-shadow:none; }
  .nav-dropdown {
    position:static; transform:none; opacity:1; pointer-events:auto;
    background:transparent; border:none; box-shadow:none;
    padding:0; min-width:0;
    margin-bottom:6px;
  }
  .nav-dropdown .nav-link { padding:12px 14px 12px 26px; }
}

/* ═══ GREET ROW (separada, delgada) ═══ */
.topbar-greet-row {
  max-width:1320px; margin:0 auto;
  padding:0 24px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  border-top:1px solid var(--border);
  padding-top:10px;
}
.topbar-greet-row .greet-meta { padding:5px 14px; font-size:12px; }
.topbar-greet-row .topbar-meta { gap:6px; }
.topbar-greet-row .meta-chip { padding:6px 10px; font-size:11px; }

/* Topbar greeting viejo (el del centro) ya no se usa — ocultar por si quedó */
.topbar-greeting { display:none; }

/* Botón hamburguesa solo mobile */
.menu-toggle { display:none; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:1100px) {
  .topbar-nav { max-width:520px; }
  .nav-link { padding:8px 10px; }
  .nav-link span { display:none; }
  .nav-link i { width:18px; height:18px; }
}
@media (max-width:900px) {
  .topbar-inner { padding:12px 16px 10px; flex-wrap:wrap; }
  .topbar-nav {
    position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--card); border-top:1px solid var(--border);
    padding:12px 16px; gap:4px; box-shadow:var(--shadow);
    max-width:none;
    display:none;
  }
  .topbar-nav.open { display:flex; }
  .nav-link { width:100%; padding:12px 14px; justify-content:flex-start; }
  .nav-link span { display:inline; }
  .menu-toggle { display:flex; }
  .topbar-greet-row { flex-wrap:wrap; padding:10px 16px; gap:8px; }
  .topbar-greet-row .greet-meta { order:1; }
  .topbar-greet-row .topbar-meta { order:2; width:100%; justify-content:center; }
}
@media (max-width:600px) {
  .topbar-greet-row .meta-chip:not(.mono) { display:none; }
}
/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Estilos página Hero Team + compartidos de subpáginas
   ═══════════════════════════════════════════ */

/* ═══ PAGE HEADER (común a todas las subpáginas) ═══ */
.page-header {
  text-align:center;
  padding:20px 0 28px;
  margin-bottom:8px;
}
.page-kicker {
  font-size:10.5px; font-weight:800; letter-spacing:4px;
  text-transform:uppercase; color:var(--cyan);
  margin-bottom:8px;
}
.page-title {
  font-family:var(--display); font-style:italic; font-weight:900;
  font-size:clamp(32px,5vw,48px); color:var(--text);
  letter-spacing:-.02em; line-height:1;
}
.page-sub {
  font-size:13px; color:var(--muted); margin-top:10px;
  font-weight:500;
}

/* ═══ TOOLBAR (buscador + contador + botón agregar) ═══ */
.team-toolbar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:24px; padding:0 4px;
}
.search-wrap {
  position:relative; flex:1; min-width:220px;
}
.search-wrap .search-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted); pointer-events:none;
}
.search-wrap input {
  width:100%; padding:12px 14px 12px 40px;
  background:var(--card); border:1.5px solid var(--border);
  border-radius:12px; font-family:inherit; font-size:14px;
  color:var(--text); outline:none; transition:all .15s;
  box-shadow:var(--shadow-sm);
}
.search-wrap input:focus {
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(6,163,182,.15);
}
.search-wrap input::placeholder { color:var(--muted); }
.team-count {
  font-size:12px; font-weight:700; color:var(--muted);
  padding:8px 14px; background:var(--paper);
  border:1px solid var(--border); border-radius:999px;
}
.team-count span { color:var(--cyan); font-weight:800; font-size:14px; }
.btn-add-member { padding:12px 20px !important; margin-top:0 !important; }
.btn-add-member i { width:16px; height:16px; }

/* ═══ GRID DEL EQUIPO ═══ */
.team-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:16px;
  padding:4px;
}

/* Card vertical (3:4) */
.card-outer {
  position:relative;
  aspect-ratio:3/4;
  cursor:pointer;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:var(--teal-darker);
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
  animation:cardIn .4s cubic-bezier(.22,1,.36,1) both;
}
.card-outer:hover {
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 20px 40px rgba(6,107,120,.22), 0 0 0 1px rgba(6,163,182,.3);
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(14px); }
  to { opacity:1; transform:translateY(0); }
}

.card-photo {
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  display:block;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.card-outer:hover .card-photo { transform:scale(1.05); }

.card-footer {
  position:absolute; bottom:0; left:0; right:0;
  padding:30px 14px 14px;
  background:linear-gradient(to top, rgba(6,42,51,.96) 0%, rgba(6,42,51,.65) 55%, transparent 100%);
  z-index:2;
  transition:opacity .25s;
}
.card-name {
  font-family:var(--display); font-size:16px; font-weight:900; font-style:italic;
  color:#fff; line-height:1.1; text-transform:capitalize;
}
.card-role {
  font-size:9.5px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--cyan);
  margin-top:4px; line-height:1.3;
}

.card-flag {
  position:absolute; top:10px; right:10px; z-index:3;
}
.card-flag img {
  width:26px; height:20px; object-fit:cover; border-radius:4px;
  display:block; box-shadow:0 2px 6px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.22);
}

/* Admin actions sobre card */
.card-admin-actions {
  position:absolute; top:10px; left:10px; z-index:4;
  display:flex; gap:4px; opacity:0; transition:opacity .2s;
}
.card-outer:hover .card-admin-actions { opacity:1; }
.card-adm-btn {
  width:28px; height:28px; border-radius:8px;
  background:rgba(255,255,255,.92); border:none;
  font-size:14px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text); box-shadow:0 4px 10px rgba(0,0,0,.25);
  transition:all .15s;
}
.card-adm-btn:hover { transform:scale(1.1); }
.card-adm-btn.del { color:var(--rose); }
.card-adm-btn.del:hover { background:var(--rose); color:#fff; }
.card-adm-btn.edit:hover { background:var(--cyan); color:#fff; }

/* Overlay al hacer click */
.card-overlay {
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:10px; padding:18px 14px;
  background:linear-gradient(145deg, rgba(2,21,40,.97) 0%, rgba(6,107,120,.95) 100%);
  border-radius:inherit;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
  text-align:center;
}
.card-outer.open .card-overlay { opacity:1; pointer-events:auto; }
.card-outer.open .card-footer { opacity:0; }

.overlay-photo {
  width:64px; height:64px; border-radius:50%;
  object-fit:cover; object-position:top center;
  border:2.5px solid var(--cyan);
  box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 0 3px rgba(6,163,182,.2);
  flex-shrink:0;
}
.overlay-name {
  font-family:var(--display); font-size:17px; font-weight:900; font-style:italic;
  color:#fff; line-height:1.1; text-transform:capitalize;
}
.overlay-role {
  font-size:9.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--cyan); margin-top:2px;
}
.overlay-divider {
  width:36px; height:1.5px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  border-radius:2px;
}
.overlay-contacts {
  display:flex; flex-direction:column; gap:7px;
  width:100%;
}
.overlay-item {
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; color:rgba(255,255,255,.92);
  font-weight:500; min-width:0;
}
.overlay-item svg { width:13px; height:13px; color:var(--cyan); flex-shrink:0; opacity:.9; }
.overlay-item a {
  color:inherit; text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:100%; transition:color .15s;
}
.overlay-item a:hover { color:var(--cyan); }
.overlay-flag {
  display:flex; align-items:center; gap:7px;
  margin-top:4px; font-size:11px; font-weight:600;
  color:rgba(255,255,255,.65); letter-spacing:.5px;
}
.overlay-flag img {
  width:22px; height:16px; object-fit:cover; border-radius:3px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.overlay-close {
  position:absolute; top:10px; right:10px;
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12); color:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; transition:background .15s;
  line-height:1; user-select:none;
}
.overlay-close:hover { background:rgba(255,255,255,.25); }

/* Modal ancho para editar miembro */
.modal-wide { max-width:560px !important; }
.modal select {
  width:100%; margin-top:8px; padding:12px 14px;
  border:1.5px solid var(--border-2); border-radius:12px;
  font-family:inherit; font-size:14px;
  background:var(--paper); color:var(--text);
}
.modal textarea { min-height:50px; }

/* Responsive equipo */
@media (max-width:700px) {
  .team-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
  .card-name { font-size:14px; }
  .team-toolbar { gap:10px; }
  .team-toolbar .btn-add-member span { display:none; }
}

/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Estilos página Directorio
   ═══════════════════════════════════════════ */

/* Toolbar */
.dir-toolbar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:16px; padding:0 4px;
}
.dir-toolbar .search-wrap { flex:1; min-width:220px; }
.dir-stats { display:flex; gap:8px; flex-wrap:wrap; }
.stat-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  background:var(--paper); border:1px solid var(--border);
  font-size:11.5px; font-weight:700; color:var(--muted);
}
.stat-pill strong { color:var(--cyan); font-weight:900; font-size:13px; }
.btn-add-contact { padding:11px 18px !important; margin-top:0 !important; }
.btn-add-contact i { width:16px; height:16px; }

/* Filter chips */
.filter-row {
  display:flex; gap:7px; flex-wrap:wrap;
  margin-bottom:24px; padding:0 4px;
}
.filter-chip {
  padding:6px 14px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.5px;
  cursor:pointer; user-select:none;
  border:1px solid var(--border); background:var(--card);
  color:var(--muted); transition:all .15s;
}
.filter-chip:hover { background:var(--paper); color:var(--text); }
.filter-chip.active {
  background:var(--cyan); border-color:var(--cyan);
  color:#fff; box-shadow:0 3px 10px rgba(6,163,182,.3);
}

/* Body */
.dir-body { display:flex; flex-direction:column; gap:22px; }

.dir-company-block {
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:18px; box-shadow:var(--shadow-sm);
}
.dir-company-name {
  font-size:10.5px; font-weight:900; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--cyan);
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.dir-company-name::after {
  content:""; flex:1; height:1px;
  background:linear-gradient(to right,rgba(6,163,182,.25),transparent);
}

.dir-cards-row {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
}

.dir-card {
  position:relative;
  background:var(--paper); border:1px solid var(--border);
  border-radius:14px; padding:14px 15px;
  display:flex; flex-direction:column; gap:5px;
  transition:all .15s;
}
.dir-card:hover {
  background:var(--card); border-color:rgba(6,163,182,.3);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(6,107,120,.12);
}

.dir-card-actions {
  position:absolute; top:8px; right:8px;
  display:flex; gap:3px; opacity:0; transition:opacity .15s;
}
.dir-card:hover .dir-card-actions { opacity:1; }
.dir-act {
  width:22px; height:22px; border-radius:6px;
  border:none; background:var(--card); cursor:pointer;
  font-size:11px; font-weight:700; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12); transition:all .12s;
}
.dir-act:hover { transform:scale(1.1); }
.dir-edit:hover { background:var(--cyan); color:#fff; }
.dir-del:hover { background:var(--rose); color:#fff; }

.dir-dept {
  display:inline-block; width:fit-content; margin-bottom:2px;
  font-size:9px; font-weight:900; letter-spacing:1.5px;
  text-transform:uppercase;
  padding:3px 9px; border-radius:999px; border:1px solid;
}
.dir-name {
  font-size:13.5px; font-weight:800; color:var(--text);
  line-height:1.2; padding-right:44px; /* espacio para botones */
}
.dir-phone {
  display:block; font-size:12.5px; font-weight:700;
  color:var(--cyan); text-decoration:none;
  letter-spacing:.2px; transition:color .15s;
}
.dir-phone::before { content:"📞 "; font-size:10px; }
.dir-phone:hover { color:var(--cyan-deep); }
.dir-email {
  display:block; font-size:11px; font-weight:600;
  color:var(--muted); text-decoration:none;
  word-break:break-all; transition:color .15s; margin-top:2px;
}
.dir-email:hover { color:var(--text); }
.dir-notes {
  font-size:10.5px; color:var(--muted); font-style:italic;
  border-top:1px solid var(--border); padding-top:6px;
  margin-top:3px; line-height:1.4;
}

/* Modal grid */
.modal-grid-2 {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-bottom:16px;
}
.modal-grid-2 label { margin-bottom:0 !important; }

/* Responsive */
@media (max-width:720px) {
  .dir-cards-row { grid-template-columns:1fr; }
  .modal-grid-2 { grid-template-columns:1fr; }
  .dir-toolbar .btn-add-contact span { display:none; }
}
/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Estilos página Guías
   ═══════════════════════════════════════════ */

.guias-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:14px;
}

.guia-card {
  position:relative;
  border-radius:18px;
  background:var(--card);
  border:1px solid var(--border);
  overflow:hidden;
  transition:all .15s;
  animation:fadeUpG .35s ease both;
  box-shadow:var(--shadow-sm);
}
@keyframes fadeUpG {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
.guia-card::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(6,163,182,.08), transparent 60%);
  opacity:0; transition:opacity .2s; border-radius:inherit;
  pointer-events:none;
}
.guia-card:hover {
  transform:translateY(-4px);
  border-color:rgba(6,163,182,.32);
  box-shadow:0 10px 26px rgba(6,107,120,.15), 0 0 0 1px rgba(6,163,182,.1);
}
.guia-card:hover::before { opacity:1; }

.guia-link {
  display:flex; flex-direction:column; gap:10px;
  padding:18px; text-decoration:none; color:var(--text);
  min-height:155px;
}

.guia-top {
  display:flex; align-items:center; justify-content:space-between;
}

.guia-emoji {
  width:42px; height:42px;
  border-radius:12px;
  background:var(--paper); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
  transition:transform .2s;
}
.guia-card:hover .guia-emoji {
  transform:scale(1.12) rotate(-4deg);
}

.guia-arrow {
  font-size:16px; color:var(--muted); opacity:.5;
  transition:all .2s;
}
.guia-card:hover .guia-arrow {
  opacity:1; color:var(--cyan);
  transform:translate(2px,-2px);
}

.guia-tag {
  display:inline-block;
  font-size:9.5px; font-weight:900; letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--cyan); opacity:.8;
  margin-bottom:4px;
}

.guia-title {
  font-size:13.5px; font-weight:800;
  line-height:1.35; color:var(--text);
}

.guia-cta {
  margin-top:auto;
  font-size:11px; font-weight:700;
  color:var(--muted);
  display:flex; align-items:center; gap:5px;
  transition:color .2s;
}
.guia-card:hover .guia-cta { color:var(--cyan); }

/* Admin actions sobre card */
.guia-actions {
  position:absolute; top:8px; right:8px;
  display:flex; gap:3px; opacity:0;
  transition:opacity .15s; z-index:2;
}
.guia-card:hover .guia-actions { opacity:1; }
.guia-act {
  width:22px; height:22px; border-radius:6px;
  border:none; background:var(--paper); cursor:pointer;
  font-size:11px; font-weight:700; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12); transition:all .12s;
}
.guia-act:hover { transform:scale(1.1); }
.guia-act.edit:hover { background:var(--cyan); color:#fff; }
.guia-act.del:hover { background:var(--rose); color:#fff; }

@media (max-width:700px) {
  .guias-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:420px) {
  .guias-grid { grid-template-columns:1fr; }
}
/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Estilos página Políticas
   ═══════════════════════════════════════════ */

.policies-wrap {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:32px clamp(20px, 4vw, 40px) 36px;
  box-shadow:var(--shadow);
}

/* Doc Header */
.doc-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; padding-bottom:20px;
  border-bottom:1px solid var(--border);
  margin-bottom:28px; flex-wrap:wrap;
}
.doc-header-left { display:flex; flex-direction:column; gap:6px; }

.doc-eyebrow {
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:10px; font-weight:500; letter-spacing:2px;
  text-transform:uppercase; color:var(--cyan);
}
.doc-eyebrow::before {
  content:""; width:20px; height:1.5px;
  background:var(--cyan); border-radius:2px;
}

.doc-title {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:clamp(24px, 3.4vw, 36px);
  color:var(--text); letter-spacing:-.02em; line-height:1.1;
}
.doc-title span { color:var(--cyan); }

.doc-meta { display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.doc-meta-item {
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
  display:flex; align-items:center; gap:6px;
}
.doc-meta-item::before {
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--muted); opacity:.5;
}
.doc-meta-item:first-child::before { display:none; }

.doc-version {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:8px;
  border:1px solid rgba(6,163,182,.3); background:rgba(6,163,182,.08);
  font-family:var(--mono); font-size:11px; font-weight:600;
  color:var(--cyan); letter-spacing:1px; white-space:nowrap;
}

/* TOC */
.toc {
  display:flex; gap:6px; flex-wrap:wrap;
  margin-bottom:28px; padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.toc-item {
  font-family:var(--mono);
  font-size:10px; font-weight:500; letter-spacing:.5px;
  color:var(--muted); padding:6px 11px;
  border-radius:6px; border:1px solid var(--border);
  background:transparent; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:all .15s;
}
.toc-item:hover {
  color:var(--cyan); border-color:rgba(6,163,182,.35);
  background:rgba(6,163,182,.06);
}

/* Sections */
.policy-section {
  border-bottom:1px solid var(--border);
}
.policy-section:last-child { border-bottom:none; }

.section-trigger {
  width:100%; background:transparent; border:none; cursor:pointer;
  padding:18px 0; display:flex; align-items:center; gap:16px;
  text-align:left; color:var(--text);
  font-family:var(--sans); transition:opacity .15s;
}
.section-trigger:hover { opacity:.8; }

.section-num {
  font-family:var(--mono); font-size:11px; font-weight:600;
  color:var(--cyan); opacity:.75;
  min-width:28px; flex-shrink:0;
}

.section-icon-wrap {
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--border); background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0;
  transition:all .2s;
}
.section-trigger:hover .section-icon-wrap,
.policy-section.open .section-icon-wrap {
  border-color:rgba(6,163,182,.35);
  background:rgba(6,163,182,.08);
}

.section-title-wrap { flex:1; min-width:0; }
.section-title {
  font-size:15.5px; font-weight:700; letter-spacing:-.1px;
  color:var(--text); line-height:1.2;
}
.section-desc {
  font-size:12px; color:var(--muted);
  margin-top:3px; font-weight:500;
}

.section-chevron {
  width:18px; height:18px; flex-shrink:0;
  opacity:.4; color:var(--muted);
  transition:transform .25s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.policy-section.open .section-chevron {
  transform:rotate(180deg); opacity:.85; color:var(--cyan);
}

.section-body {
  max-height:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.22,1,.36,1);
}
.policy-section.open .section-body { max-height:2000px; }

.section-content {
  padding:0 0 24px 80px;
  display:flex; flex-direction:column; gap:20px;
}

/* Subsection */
.subsection { display:flex; flex-direction:column; gap:8px; }
.subsection-title {
  font-family:var(--mono);
  font-size:10.5px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted);
  padding-bottom:6px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}
.subsection-title::before {
  content:""; width:12px; height:1.5px;
  background:var(--cyan); opacity:.6;
}
.subsection-body {
  font-size:13.5px; line-height:1.65;
  color:var(--text-2); font-weight:400;
}

/* Lista */
.policy-list {
  display:flex; flex-direction:column; gap:5px;
  list-style:none; padding:0;
}
.policy-list li {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:var(--text-2);
  line-height:1.55; padding:3px 0;
}
.policy-list li::before {
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); opacity:.6;
  flex-shrink:0; margin-top:7px;
}
.policy-list li strong { color:var(--text); font-weight:700; }

.mono-inline {
  font-family:var(--mono); font-size:.92em;
  background:var(--paper); padding:1px 6px;
  border-radius:4px; border:1px solid var(--border);
  color:var(--cyan-deep);
}

/* Tabla roles */
.roles-table {
  width:100%; border-collapse:collapse; font-size:12.5px;
}
.roles-table th {
  text-align:left;
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); padding:9px 12px;
  border-bottom:1px solid var(--border-2);
}
.roles-table td {
  padding:11px 12px; border-bottom:1px solid var(--border);
  color:var(--text-2); vertical-align:top; line-height:1.5;
}
.roles-table tr:last-child td { border-bottom:none; }
.roles-table tr:hover td { background:var(--paper); }
.role-name { font-weight:700; color:var(--text); white-space:nowrap; }

/* Niveles de datos */
.data-levels { display:flex; flex-direction:column; gap:10px; }
.data-level {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 16px; border-radius:10px;
  border:1px solid var(--border); background:var(--paper);
}
.level-badge {
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:1px; padding:4px 9px; border-radius:5px;
  white-space:nowrap; flex-shrink:0;
}
.level-1 { background:rgba(46,204,113,.12); border:1px solid rgba(46,204,113,.3); color:#10b981; }
.level-2 { background:rgba(241,196,15,.10); border:1px solid rgba(245,184,48,.3); color:#d97706; }
.level-3 { background:rgba(231,76,60,.10);  border:1px solid rgba(244,63,94,.3);  color:#dc2626; }

.level-content { flex:1; min-width:0; }
.level-title {
  font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px;
}
.level-desc {
  font-size:12.5px; color:var(--text-2);
  line-height:1.55;
}

/* Notas / alerts */
.policy-note {
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-radius:10px;
  border-left:3px solid var(--cyan);
  background:rgba(6,163,182,.06);
  font-size:12.5px; color:var(--text-2); line-height:1.55;
}
.policy-note-icon {
  font-size:15px; flex-shrink:0; margin-top:1px;
}
.policy-note strong { color:var(--text); }

/* Declaración final */
.policy-declaration {
  margin-top:32px; padding:22px 24px;
  border-radius:14px;
  border:1px solid rgba(6,163,182,.22);
  background:linear-gradient(135deg, rgba(6,163,182,.08), rgba(6,163,182,.02));
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.declaration-icon { font-size:28px; flex-shrink:0; }
.declaration-text { flex:1; min-width:200px; }
.declaration-title {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:16px; color:var(--text); margin-bottom:4px;
}
.declaration-body {
  font-size:12.5px; color:var(--text-2);
  line-height:1.55; font-style:italic;
}

/* Responsive */
@media (max-width:700px) {
  .section-content { padding-left:18px; }
  .doc-header { flex-direction:column; }
  .roles-table { font-size:11.5px; }
  .toc { display:none; }
  .data-level { flex-direction:column; }
}

@media (prefers-reduced-motion:reduce) {
  .section-body, .section-chevron { transition:none; }
}
/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Estilos página Carriers
   ═══════════════════════════════════════════ */

/* Tabs principales: Equipo / Personal */
.carrier-zone-tabs {
  display:flex; gap:8px; margin-bottom:20px; padding:0 4px;
}
.zone-tab {
  flex:1; max-width:240px;
  padding:12px 18px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--card);
  color:var(--muted); cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:all .15s;
}
.zone-tab i { width:16px; height:16px; }
.zone-tab:hover { color:var(--text); background:var(--paper); }
.zone-tab.active {
  background:linear-gradient(135deg, var(--cyan), var(--cyan-2));
  border-color:var(--cyan); color:#fff;
  box-shadow:0 6px 16px rgba(6,163,182,.3);
}

/* Info banner */
.zone-info {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 16px; margin-bottom:20px;
  border-radius:12px; border-left:3px solid var(--cyan);
  background:rgba(6,163,182,.06);
  font-size:12.5px; color:var(--text-2); line-height:1.55;
}
.zone-info i { width:16px; height:16px; color:var(--cyan); flex-shrink:0; margin-top:2px; }
.zone-info strong { color:var(--text); }

/* Tabs de cuenta (Jesús/Anny) */
.account-tabs {
  display:flex; gap:6px; margin-bottom:18px; padding:0 4px;
}
.account-tab {
  padding:8px 22px; border-radius:8px;
  border:1.5px solid var(--border); background:transparent;
  color:var(--muted); cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  transition:all .15s;
}
.account-tab:hover { color:var(--text); background:var(--paper); }
.account-tab.active {
  background:var(--cyan); border-color:var(--cyan); color:#fff;
  box-shadow:0 3px 10px rgba(6,163,182,.3);
}

/* Grid de carriers */
.carriers-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:10px;
}

.carrier-card {
  position:relative;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:14px 16px;
  cursor:pointer;
  display:flex; align-items:center; gap:14px;
  transition:all .15s;
  overflow:hidden;
}
.carrier-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cyan); opacity:.4;
  border-radius:3px 0 0 3px;
  transition:opacity .15s;
}
.carrier-card:hover {
  transform:translateY(-2px);
  border-color:rgba(6,163,182,.32);
  box-shadow:0 10px 24px rgba(6,107,120,.15);
}
.carrier-card:hover::before { opacity:1; }

.carrier-icon {
  width:42px; height:42px; border-radius:11px;
  background:linear-gradient(135deg, var(--cyan-deep), var(--cyan));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:13px; color:#fff; letter-spacing:-.5px;
  flex-shrink:0;
  box-shadow:0 4px 10px rgba(6,163,182,.25);
}

.carrier-info { flex:1; min-width:0; }
.carrier-name {
  font-size:13.5px; font-weight:800; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.carrier-user {
  font-size:11px; color:var(--muted); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--mono);
}

.carrier-arrow {
  color:var(--muted); font-size:22px; flex-shrink:0;
  font-weight:300; transition:all .15s;
}
.carrier-card:hover .carrier-arrow { color:var(--cyan); transform:translateX(4px); }

.carrier-card-actions {
  position:absolute; top:6px; right:34px;
  display:flex; gap:3px; opacity:0; transition:opacity .15s; z-index:2;
}
.carrier-card:hover .carrier-card-actions { opacity:1; }
.carrier-act {
  width:22px; height:22px; border-radius:6px;
  border:none; background:var(--paper); cursor:pointer;
  font-size:11px; font-weight:700; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12); transition:all .12s;
}
.carrier-act:hover { transform:scale(1.1); }
.carrier-act.edit:hover { background:var(--cyan); color:#fff; }
.carrier-act.del:hover { background:var(--rose); color:#fff; }

/* ═══ MODAL CARRIER (detalle) ═══ */
.carrier-modal {
  max-width:480px; padding:0 !important; overflow:hidden;
}
.carrier-modal-header {
  padding:22px 26px 18px;
  background:linear-gradient(135deg, rgba(6,163,182,.08), rgba(10,92,138,.04));
  border-bottom:1px solid var(--border);
  position:relative;
}
.cm-label {
  font-family:var(--mono);
  font-size:10px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:6px;
}
.cm-name {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:24px; color:var(--text); letter-spacing:-.3px;
}
.modal-close-x {
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:50%;
  background:var(--paper); border:1px solid var(--border);
  color:var(--muted); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.modal-close-x:hover { background:var(--rose); color:#fff; border-color:var(--rose); }

.carrier-modal-body {
  padding:20px 26px 16px;
  display:flex; flex-direction:column; gap:14px;
}

.cred-row { display:flex; flex-direction:column; gap:6px; }
.cred-label {
  font-family:var(--mono);
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted);
}
.cred-value-wrap {
  display:flex; align-items:center; gap:8px;
  background:var(--paper); border:1px solid var(--border);
  border-radius:10px; padding:11px 14px;
  transition:background .15s;
}
.cred-value-wrap:hover { background:var(--card); border-color:var(--border-2); }
.cred-value {
  flex:1; font-size:13.5px; font-weight:600;
  color:var(--text); word-break:break-all;
}
.cred-value.pwd {
  font-family:var(--mono); letter-spacing:1.5px; font-size:13px;
}

.copy-btn-c {
  background:transparent; border:none; color:var(--muted);
  cursor:pointer; font-size:15px; flex-shrink:0;
  padding:4px 6px; border-radius:6px;
  transition:all .15s;
}
.copy-btn-c:hover { color:var(--cyan); background:rgba(6,163,182,.08); }
.copy-btn-c.copied { color:var(--emerald); transform:scale(1.15); }

.cred-notes {
  background:rgba(245,184,48,.10);
  border:1px solid rgba(245,184,48,.3);
  border-radius:10px; padding:12px 14px;
  font-size:12.5px; color:var(--text-2); line-height:1.55;
}
.cred-notes strong {
  display:block; margin-bottom:4px;
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:2px; text-transform:uppercase;
  color:#d97706;
}

.carrier-modal-footer { padding:0 26px 22px; }
.btn-acceder-c {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px;
  border-radius:11px; border:none;
  font-family:inherit; font-size:13px; font-weight:800;
  letter-spacing:1px; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  background:linear-gradient(135deg, var(--cyan), var(--cyan-2));
  color:#fff;
  transition:all .15s;
  box-shadow:0 6px 16px rgba(6,163,182,.3);
}
.btn-acceder-c:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(6,163,182,.4);
}
.btn-acceder-c i { width:16px; height:16px; }
.btn-acceder-c.disabled {
  background:var(--paper); color:var(--muted);
  cursor:not-allowed; box-shadow:none;
}
.btn-acceder-c.disabled:hover { transform:none; }

/* Responsive */
@media (max-width:600px) {
  .carriers-grid { grid-template-columns:1fr; }
  .carrier-zone-tabs .zone-tab span { font-size:12px; }
}
/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Estilos Onboarding
   ═══════════════════════════════════════════ */

.ob-wrap {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:40px;
  align-items:start;
  max-width:1100px;
  margin:0 auto;
}

.ob-toc {
  position:sticky; top:80px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 16px;
  box-shadow:var(--shadow);
}
.ob-toc-title {
  font-family:var(--mono);
  font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.ob-toc-link {
  display:block;
  padding:7px 10px;
  margin-bottom:2px;
  font-size:12.5px; font-weight:500;
  color:var(--text-2);
  text-decoration:none;
  border-radius:8px;
  transition:all .15s;
}
.ob-toc-link:hover {
  color:var(--cyan);
  background:rgba(6,163,182,.06);
}
.ob-toc-link.active {
  color:var(--cyan);
  background:rgba(6,163,182,.12);
  font-weight:700;
  border-left:3px solid var(--cyan);
  padding-left:8px;
}

/* ── Buscador del glosario ── */
.ob-gloss-search {
  position:relative;
  display:flex; align-items:center;
  margin:18px 0 14px;
}
.ob-gloss-search i[data-lucide] {
  position:absolute; left:14px;
  width:16px; height:16px;
  color:var(--muted);
  pointer-events:none;
}
.ob-gloss-search input {
  width:100%;
  padding:11px 40px 11px 40px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--paper);
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}
.ob-gloss-search input:focus {
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(6,163,182,.15);
}
.ob-gloss-clear {
  position:absolute; right:8px;
  width:28px; height:28px;
  display:none; /* JS lo muestra cuando hay texto */
  align-items:center; justify-content:center;
  border:none; background:transparent;
  color:var(--muted);
  font-size:20px; line-height:1; cursor:pointer;
  border-radius:8px;
  transition:all .15s;
}
.ob-gloss-clear:hover { color:var(--text); background:rgba(0,0,0,.05); }
.ob-gloss-empty {
  text-align:center;
  color:var(--muted);
  font-style:italic;
  font-size:13.5px;
  padding:16px;
}

.ob-content {
  display:flex; flex-direction:column; gap:36px;
}

.ob-section {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:32px clamp(20px, 4vw, 40px);
  box-shadow:var(--shadow);
  position:relative;
  scroll-margin-top:90px;
}

.ob-num {
  position:absolute; top:-14px; left:28px;
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--cyan), var(--cyan-2));
  color:#fff;
  font-family:var(--mono);
  font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(6,163,182,.3);
}

.ob-h2 {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:clamp(22px, 3vw, 30px);
  color:var(--text);
  letter-spacing:-.02em;
  line-height:1.15;
  margin:4px 0 10px;
}

.ob-h3 {
  font-family:var(--sans);
  font-size:15px; font-weight:700;
  color:var(--text);
  margin-top:24px; margin-bottom:8px;
}

.ob-lead {
  font-size:15px; color:var(--text-2);
  line-height:1.6; margin-bottom:16px;
  font-weight:500;
}

.ob-section p {
  font-size:13.5px; color:var(--text-2);
  line-height:1.65; margin-bottom:12px;
}
.ob-section p:last-child { margin-bottom:0; }
.ob-section a {
  color:var(--cyan-deep);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(6,163,182,.3);
  transition:all .15s;
}
.ob-section a:hover {
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}

.ob-callout {
  display:flex; gap:14px; align-items:flex-start;
  padding:14px 18px;
  border-radius:12px;
  margin:16px 0;
  font-size:13.5px; line-height:1.55;
  color:var(--text-2);
}
.ob-callout i {
  width:20px; height:20px; flex-shrink:0; margin-top:2px;
}
.ob-callout strong { color:var(--text); }
.ob-callout em { color:var(--cyan-deep); font-style:italic; font-weight:600; }
.ob-callout-cyan {
  background:rgba(6,163,182,.06);
  border-left:3px solid var(--cyan);
}
.ob-callout-cyan i { color:var(--cyan); }
.ob-callout-gold {
  background:rgba(245,184,48,.1);
  border-left:3px solid var(--gold);
}
.ob-callout-gold i { color:#d97706; }

.ob-warn {
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 14px;
  border-radius:10px;
  background:rgba(244,63,94,.08);
  border-left:3px solid var(--rose);
  font-size:12.5px; line-height:1.55;
  color:var(--text-2);
  margin:10px 0 16px;
}
.ob-warn i { width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--rose); }
.ob-warn strong { color:var(--rose); }

.ob-inline-code {
  font-family:var(--mono); font-size:.92em;
  background:var(--paper);
  padding:2px 8px;
  border-radius:5px;
  border:1px solid var(--border);
  color:var(--cyan-deep);
}

.ob-list {
  list-style:none; padding:0;
  display:flex; flex-direction:column; gap:6px;
  margin:8px 0 8px;
}
.ob-list li {
  position:relative;
  padding-left:20px;
  font-size:13px; line-height:1.6;
  color:var(--text-2);
}
.ob-list li::before {
  content:"";
  position:absolute; left:0; top:10px;
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan); opacity:.6;
}
.ob-list li strong { color:var(--text); font-weight:700; }

.ob-checklist {
  display:flex; flex-direction:column; gap:12px;
  margin-top:16px;
}
.ob-check-item {
  display:flex; gap:14px;
  padding:14px 16px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:12px;
  transition:all .15s;
}
.ob-check-item:hover {
  border-color:rgba(6,163,182,.3);
  transform:translateX(2px);
}
.ob-check-num {
  width:32px; height:32px; border-radius:8px;
  background:var(--card); border:1.5px solid var(--cyan);
  color:var(--cyan-deep);
  font-family:var(--mono);
  font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ob-check-title {
  font-size:14px; font-weight:700;
  color:var(--text);
  margin-bottom:4px;
}
.ob-check-desc {
  font-size:13px; color:var(--text-2); line-height:1.55;
}

.ob-hub-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:12px;
  margin-top:16px;
}
.ob-hub-card {
  display:block;
  padding:18px 16px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:14px;
  text-decoration:none !important;
  border-bottom:1px solid var(--border) !important;
  transition:all .15s;
}
.ob-hub-card:hover {
  transform:translateY(-2px);
  border-color:rgba(6,163,182,.32) !important;
  box-shadow:0 10px 24px rgba(6,107,120,.12);
}
.ob-hub-icon {
  width:40px; height:40px; border-radius:10px;
  background:linear-gradient(135deg, var(--cyan-deep), var(--cyan));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
  box-shadow:0 4px 10px rgba(6,163,182,.25);
}
.ob-hub-icon i { width:20px; height:20px; }
.ob-hub-name {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:17px; color:var(--text);
  margin-bottom:6px;
}
.ob-hub-desc {
  font-size:12.5px; color:var(--text-2);
  line-height:1.55;
}

.ob-help-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
  margin-top:16px;
}
.ob-help-card {
  padding:18px 18px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:14px;
}
.ob-help-icon {
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
  color:#fff;
}
.ob-help-icon i { width:18px; height:18px; }
.ob-help-icon.tech { background:linear-gradient(135deg, #06a3b6, #066b78); }
.ob-help-icon.hr { background:linear-gradient(135deg, #f43f5e, #e11d48); }
.ob-help-icon.sales { background:linear-gradient(135deg, #f5b830, #d97706); }
.ob-help-icon.finance { background:linear-gradient(135deg, #10b981, #059669); }

.ob-help-title {
  font-size:13px; font-weight:700;
  color:var(--text); margin-bottom:4px;
}
.ob-help-person {
  font-size:13.5px; color:var(--cyan-deep);
  margin-bottom:2px;
}
.ob-help-email {
  font-family:var(--mono);
  font-size:11.5px; color:var(--muted);
  margin-bottom:8px;
}
.ob-help-desc {
  font-size:12px; color:var(--text-2);
  line-height:1.55;
}

.ob-rules {
  display:flex; flex-direction:column; gap:10px;
  margin-top:16px;
}
.ob-rule {
  display:flex; gap:16px; align-items:flex-start;
  padding:14px 18px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:12px;
  border-left:3px solid var(--cyan);
}
.ob-rule-num {
  font-size:24px; flex-shrink:0;
  line-height:1; margin-top:2px;
}
.ob-rule-title {
  font-size:14px; font-weight:700;
  color:var(--text); margin-bottom:4px;
}
.ob-rule-desc {
  font-size:13px; color:var(--text-2); line-height:1.55;
}

.ob-glossary {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:10px;
  margin-top:16px;
}
.ob-gloss-item {
  padding:12px 14px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:10px;
}
.ob-gloss-term {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:16px; color:var(--cyan-deep);
  margin-bottom:4px;
}
.ob-gloss-def {
  font-size:12.5px; color:var(--text-2);
  line-height:1.5;
}
.ob-gloss-letter {
  grid-column:1 / -1;
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:22px; color:var(--cyan);
  margin:14px 0 2px;
  padding-bottom:6px;
  border-bottom:2px solid var(--cyan);
}
.ob-gloss-letter:first-child { margin-top:0; }

.ob-leaders {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:12px;
  margin-top:16px;
}
.ob-leader {
  padding:18px 18px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:14px;
  border-left:3px solid var(--cyan);
}
.ob-leader-role {
  font-family:var(--mono);
  font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.ob-leader-name {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:18px; color:var(--text);
  margin-bottom:6px;
}
.ob-leader-desc {
  font-size:12.5px; color:var(--text-2);
  line-height:1.55;
}

.ob-final {
  background:linear-gradient(135deg, rgba(6,163,182,.06), rgba(10,92,138,.04));
  border:1px solid rgba(6,163,182,.2);
}

.ob-final-quote {
  margin:28px 0;
  padding:28px 24px;
  background:var(--card);
  border-radius:16px;
  border:1px solid var(--border);
  text-align:center;
}
.ob-final-quote-mark {
  font-family:var(--display); font-style:italic;
  font-size:60px; color:var(--cyan);
  line-height:1;
  margin-bottom:-20px;
}
.ob-final-quote-text {
  font-family:var(--display); font-style:italic; font-weight:700;
  font-size:clamp(22px, 3vw, 30px);
  color:var(--text);
  line-height:1.2;
  margin-bottom:12px;
}
.ob-final-quote-author {
  font-family:var(--mono);
  font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--cyan-deep);
}

.ob-final-cta {
  margin-top:24px;
  text-align:center;
  padding:20px 0 10px;
}
.ob-big-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 32px !important;
  font-size:14px !important;
  border-bottom:none !important;
}
.ob-big-btn i { width:18px; height:18px; }

/* ── Imagen del héroe (final del onboarding) ── */
.ob-hero-img-wrap {
  text-align:center;
  margin-bottom:28px;
}
.ob-hero-img {
  max-width:280px;
  width:100%;
  height:auto;
  filter:drop-shadow(0 12px 32px rgba(6,163,182,.25));
  animation:ob-hero-float 4s ease-in-out infinite;
}
@keyframes ob-hero-float {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-10px); }
}

/* ── Botón "Comenzar Misión" (CTA final del onboarding) ── */
.ob-section a.ob-mission-btn,
a.ob-mission-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:18px 40px;
  border-radius:16px;
  background:linear-gradient(135deg, #06a3b6, #058fa0);
  color:#fff !important;
  font-family:var(--display);
  font-weight:800;
  font-size:18px;
  text-decoration:none;
  letter-spacing:.5px;
  border:none;
  border-bottom:none !important;
  box-shadow:0 8px 28px rgba(6,163,182,.35), 0 0 0 3px rgba(6,163,182,.15);
  transition:all .3s cubic-bezier(.22,1,.36,1);
  position:relative;
  overflow:hidden;
}
.ob-section a.ob-mission-btn span,
a.ob-mission-btn span { color:#fff !important; }
.ob-mission-btn::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform .6s ease;
}
.ob-section a.ob-mission-btn:hover,
a.ob-mission-btn:hover {
  transform:translateY(-3px) scale(1.02);
  color:#fff !important;
  border-bottom-color:transparent !important;
  box-shadow:0 14px 40px rgba(6,163,182,.45), 0 0 0 4px rgba(6,163,182,.2);
  background:linear-gradient(135deg, #07b5ca, #06a3b6);
}
.ob-mission-btn:hover::before { transform:translateX(100%); }
.ob-mission-btn i { width:20px; height:20px; color:#fff; }
@media (max-width:700px) {
  .ob-mission-btn { padding:16px 28px; font-size:16px; }
  .ob-hero-img { max-width:200px; }
}

@media (max-width:900px) {
  .ob-wrap { grid-template-columns:1fr; gap:24px; }
  .ob-toc { position:static; }
  .ob-toc-link { display:inline-block; margin:3px; }
}
@media (max-width:600px) {
  .ob-section { padding:24px 18px; }
  .ob-num { left:16px; }
  .ob-check-item { flex-direction:column; }
  .ob-hub-grid, .ob-help-grid, .ob-glossary, .ob-leaders { grid-template-columns:1fr; }
}
/* ═══════════════════════════════════════════
   ADMIN SHELL (v4.5) — Sidebar layout
   Reemplaza el layout viejo de tabs horizontales.
   ═══════════════════════════════════════════ */

/* Shoelace · tema Hero Light (cyan) */
:root,
:host,
.sl-theme-light {
  --sl-color-primary-50:  #ecfeff;
  --sl-color-primary-100: #cffafe;
  --sl-color-primary-200: #a5f3fc;
  --sl-color-primary-300: #67e8f9;
  --sl-color-primary-400: #22d3ee;
  --sl-color-primary-500: #06a3b6;
  --sl-color-primary-600: #057b8c;
  --sl-color-primary-700: #066573;
  --sl-color-primary-800: #074d57;
  --sl-color-primary-900: #062a33;
  --sl-color-primary-950: #052028;
  --sl-input-height-medium: 42px;
  --sl-border-radius-medium: 10px;
  --sl-font-sans: "Inter", system-ui, -apple-system, sans-serif;
}

/* Shoelace en dark mode: invertimos la escala neutral y mapeamos
   superficies/inputs a nuestras variables para que sl-dialog, sl-input,
   sl-select, sl-menu, sl-card, sl-button, etc. respeten el tema. */
body[data-theme="dark"] {
  /* Escala neutral invertida (0 = oscuro, 1000 = claro) */
  --sl-color-neutral-0:    #06151a;
  --sl-color-neutral-50:   #0a2026;
  --sl-color-neutral-100:  #0f2a33;
  --sl-color-neutral-200:  #16363f;
  --sl-color-neutral-300:  #1f4651;
  --sl-color-neutral-400:  #2d5965;
  --sl-color-neutral-500:  #4b7a85;
  --sl-color-neutral-600:  #6a93a0;
  --sl-color-neutral-700:  #93b3bd;
  --sl-color-neutral-800:  #b8d4d8;
  --sl-color-neutral-900:  #d8e8eb;
  --sl-color-neutral-950:  #e8f4f6;
  --sl-color-neutral-1000: #ffffff;

  /* Superficies y overlays (sl-dialog, sl-card, sl-menu, sl-tooltip) */
  --sl-panel-background-color: var(--card);
  --sl-panel-border-color: var(--border);
  --sl-tooltip-background-color: #021419;
  --sl-overlay-background-color: rgba(0, 0, 0, .65);

  /* Inputs (sl-input, sl-select, sl-textarea) */
  --sl-input-background-color: var(--card);
  --sl-input-background-color-hover: var(--paper-2);
  --sl-input-background-color-focus: var(--card);
  --sl-input-background-color-disabled: var(--paper);
  --sl-input-border-color: var(--border);
  --sl-input-border-color-hover: var(--border-2);
  --sl-input-border-color-focus: var(--cyan);
  --sl-input-color: var(--text);
  --sl-input-color-hover: var(--text);
  --sl-input-color-focus: var(--text);
  --sl-input-placeholder-color: var(--muted);
  --sl-input-label-color: var(--text-2);
  --sl-input-help-text-color: var(--muted);
  --sl-input-required-content-color: var(--cyan);
}

/* Espaciado entre componentes Shoelace en las secciones admin */
.admin-section sl-input,
.admin-section sl-textarea,
.admin-section sl-select {
  display:block;
  margin-bottom:16px;
}
.admin-section sl-input::part(form-control-label),
.admin-section sl-textarea::part(form-control-label),
.admin-section sl-select::part(form-control-label) {
  font-size:11px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:6px;
}

/* Fila de acciones del Spotlight */
.sp-actions {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:8px;
}
.sp-actions .save-status {
  font-size:13px; font-weight:600; color:var(--cyan);
}

/* Header del admin (reemplaza el .hero-topbar en esta página) */
.admin-shell-header {
  position:sticky; top:0; z-index:20;
  background:var(--card);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 12px rgba(6,42,51,.04);
}
body[data-theme="dark"] .admin-shell-header {
  background:rgba(15,42,51,.92);
  backdrop-filter:blur(20px);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.admin-shell-header-inner {
  display:flex; align-items:center; gap:16px;
  padding:14px 22px;
  max-width:1480px; margin:0 auto;
}
.admin-shell-brand {
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--text);
  flex:1;
}
.admin-shell-logo {
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, var(--cyan), #057b8c);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(6,107,120,.18);
}
.admin-shell-logo img { width:24px; height:24px; }
.admin-shell-brand-name {
  font-family:var(--display);
  font-size:14.5px; font-weight:800; letter-spacing:.3px;
  color:#062a33;
}
.admin-shell-brand-sub {
  font-size:10.5px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted);
}
.admin-shell-header-actions {
  display:flex; align-items:center; gap:10px;
}

/* Botón hamburguesa (mobile) */
.admin-sidebar-toggle {
  display:none;
  background:transparent; border:1px solid var(--border);
  border-radius:10px; padding:8px;
  cursor:pointer; color:var(--text);
}
.admin-sidebar-toggle i { width:18px; height:18px; }

/* Shell: sidebar + main */
.admin-shell {
  display:grid;
  grid-template-columns:240px 1fr;
  max-width:1480px;
  margin:0 auto;
  position:relative;
  min-height:calc(100vh - 130px);
}

/* Sidebar */
.admin-sidebar {
  background:var(--card);
  border-right:1px solid var(--border);
  padding:24px 14px;
  position:sticky; top:67px;
  height:calc(100vh - 67px);
  overflow-y:auto;
}
.admin-sidebar-nav {
  display:flex; flex-direction:column; gap:22px;
}
.admin-sidebar-group {
  display:flex; flex-direction:column; gap:2px;
}
.admin-sidebar-kicker {
  font-size:10px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted);
  padding:0 12px 6px;
}
.admin-sidebar-link {
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  background:transparent; border:none;
  color:#062a33;
  font-family:inherit; font-size:13.5px; font-weight:600;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
  transition:background .15s, color .15s, transform .12s;
  width:100%;
}
.admin-sidebar-link i {
  width:17px; height:17px; flex-shrink:0;
  color:var(--muted);
  transition:color .15s;
}
.admin-sidebar-link:hover {
  background:rgba(6,163,182,.07);
  color:var(--cyan);
}
.admin-sidebar-link:hover i {
  color:var(--cyan);
}
.admin-sidebar-link.active {
  background:linear-gradient(135deg, var(--cyan), #057b8c);
  color:#fff;
  box-shadow:0 4px 14px rgba(6,163,182,.25);
}
.admin-sidebar-link.active i {
  color:#fff;
}
.admin-sidebar-link-external .admin-sidebar-ext-icon {
  margin-left:auto; opacity:.5;
  width:13px !important; height:13px !important;
}
.admin-sidebar-link-external:hover .admin-sidebar-ext-icon {
  opacity:1;
}

/* Backdrop (solo visible en mobile) */
.admin-sidebar-backdrop {
  display:none;
  position:fixed; inset:0;
  background:rgba(6,42,51,.4);
  z-index:18;
  opacity:0; transition:opacity .25s;
  pointer-events:none;
}
.admin-sidebar-backdrop.visible {
  opacity:1; pointer-events:auto;
}

/* Main */
.admin-shell-main {
  padding:28px 32px 60px;
  min-width:0;
}

/* Breadcrumb */
.admin-section-header {
  margin-bottom:20px;
}
.admin-breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--muted);
  font-weight:600;
}
.admin-breadcrumb i { width:14px; height:14px; }
.admin-breadcrumb-sep { opacity:.5; }
.admin-breadcrumb-current { color:var(--cyan); font-weight:800; }

/* Responsive: sidebar se vuelve drawer en mobile */
@media (max-width:900px) {
  .admin-shell { grid-template-columns:1fr; }
  .admin-sidebar-toggle { display:flex; }
  .admin-sidebar {
    position:fixed; top:67px; left:0;
    width:260px;
    height:calc(100vh - 67px);
    z-index:19;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:6px 0 24px rgba(6,42,51,.1);
  }
  .admin-sidebar.open { transform:translateX(0); }
  .admin-sidebar-backdrop { display:block; }
  .admin-shell-main { padding:20px 18px 60px; }
  .admin-shell-brand-sub { display:none; }
}

/* ═══ DARK MODE — admin: textos que estaban hardcodeados en navy
   y se perdían sobre las superficies oscuras del tema. ═══ */
body[data-theme="dark"] .admin-shell-brand-name { color:var(--text); }
body[data-theme="dark"] .admin-sidebar-link     { color:var(--text); }
body[data-theme="dark"] .admin-sidebar-link:hover { color:var(--cyan); }
body[data-theme="dark"] .ad-counter-value       { color:var(--text); }
body[data-theme="dark"] .ad-team-name           { color:var(--text); }
body[data-theme="dark"] .ad-team-row            { background:var(--paper-2); }
body[data-theme="dark"] .ad-power-name,
body[data-theme="dark"] .ad-absence-name        { color:var(--text); }
body[data-theme="dark"] .ad-absence-reason      { color:var(--text-2); }
body[data-theme="dark"] .ad-power-item.ongoing  {
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.40);
}

/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Panel Admin de Métricas
   ═══════════════════════════════════════════ */

/* Tabs del admin (legacy — no se usa con el shell nuevo) */
.admin-tabs {
  display:flex; gap:8px; margin-bottom:24px;
  border-bottom:1px solid var(--border); padding-bottom:12px;
}
.admin-tab {
  padding:10px 16px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--card);
  color:var(--muted); cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
  transition:all .15s;
}
.admin-tab i { width:15px; height:15px; }
.admin-tab:hover { color:var(--text); background:var(--paper); }
.admin-tab.active {
  background:linear-gradient(135deg, var(--cyan), var(--cyan-2));
  border-color:var(--cyan); color:#fff;
  box-shadow:0 4px 12px rgba(6,163,182,.25);
}

/* Header de métricas */
.metrics-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; margin-bottom:24px; flex-wrap:wrap;
}
.metrics-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Tarjetas de resumen */
.mt-cards {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px; margin-bottom:28px;
}
.mt-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px;
  border-left:3px solid var(--cyan);
  transition:all .15s;
}
.mt-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(6,107,120,.1); }
.mt-card-label {
  font-family:var(--mono);
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.mt-card-value {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:30px; color:var(--text);
  line-height:1.1; margin-bottom:4px;
  letter-spacing:-.02em;
}
.mt-card-value.mt-card-value-sm { font-size:19px; line-height:1.15; }
.mt-card-sub {
  font-size:11px; color:var(--muted); font-family:var(--mono);
}

/* Secciones de métricas */
.mt-section {
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:20px 22px;
  margin-bottom:16px;
}
.mt-section-title {
  font-family:var(--sans); font-size:14px; font-weight:700;
  color:var(--text); margin:0 0 14px 0;
}

.mt-grid-2 {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-bottom:16px;
}
@media (max-width:700px) { .mt-grid-2 { grid-template-columns:1fr; } }

/* Gráfico de barras */
.mt-chart-inner {
  display:flex; align-items:flex-end; gap:3px;
  height:160px; padding:8px 4px 0;
  border-bottom:1px solid var(--border);
  position:relative;
}
.mt-chart-col {
  flex:1;
  display:flex; flex-direction:column; align-items:center;
  gap:4px; cursor:pointer;
  min-width:0;
}
.mt-chart-bar {
  width:100%; max-width:22px;
  background:linear-gradient(180deg, var(--cyan), var(--cyan-deep));
  border-radius:4px 4px 0 0;
  min-height:2px;
  transition:all .2s;
}
.mt-chart-col:hover .mt-chart-bar {
  background:linear-gradient(180deg, var(--gold), #d97706);
  transform:scaleY(1.05);
}
.mt-chart-lbl {
  font-family:var(--mono);
  font-size:9px; color:var(--muted);
  height:12px; line-height:12px;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Lista de barras horizontales (top páginas/usuarios) */
.mt-list { display:flex; flex-direction:column; gap:8px; }
.mt-bar-row {
  display:grid; grid-template-columns:100px 1fr 40px;
  gap:10px; align-items:center;
}
.mt-bar-label {
  font-size:12px; font-weight:600;
  color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mt-bar-wrap {
  height:22px; background:var(--paper);
  border-radius:6px; overflow:hidden;
  border:1px solid var(--border);
}
.mt-bar-fill {
  height:100%;
  background:linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  border-radius:5px;
  min-width:2px;
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.mt-bar-val {
  font-family:var(--mono);
  font-size:12px; font-weight:700;
  color:var(--cyan-deep);
  text-align:right;
}

/* Últimos eventos */
.mt-events { display:flex; flex-direction:column; gap:4px; }
.mt-event-row {
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  gap:10px; align-items:center;
  padding:8px 12px;
  background:var(--paper);
  border-radius:8px;
  font-size:12px;
}
.mt-event-user {
  font-family:var(--mono); font-weight:700;
  color:var(--cyan-deep);
}
.mt-event-arrow { color:var(--muted); }
.mt-event-page {
  font-weight:600; color:var(--text);
}
.mt-event-time {
  font-family:var(--mono); font-size:11px;
  color:var(--muted);
}

/* Notas admin */
.admin-note { color:var(--muted); font-size:13px; margin-bottom:12px; }

/* Mensajes row */
.msg-row {
  display:flex; justify-content:space-between; gap:12px;
  align-items:flex-start;
  padding:12px 14px; margin-bottom:6px;
  background:var(--paper); border:1px solid var(--border);
  border-radius:10px;
}
.msg-row-text { color:var(--text); font-size:13.5px; margin-bottom:4px; }
.msg-row-meta { font-family:var(--mono); font-size:11px; color:var(--muted); }

/* Honoree row */
.honoree-row {
  display:grid; grid-template-columns:1fr 1fr auto;
  gap:8px; margin-bottom:6px;
}
.honoree-row input {
  padding:8px 12px; border:1px solid var(--border);
  border-radius:8px; font-family:inherit; font-size:13px;
  background:var(--card); color:var(--text);
}
/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Hero Hub v5.0 — Rediseño de Index
   ═══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   HERO COVER — Comic Cover grande
   ══════════════════════════════════════════ */
.hero-cover {
  position:relative;
  min-height:170px;
  padding:20px 28px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(135deg, #062a33 0%, #0a5c8a 40%, #066b78 100%);
  margin-bottom:0;
  box-shadow:0 20px 50px rgba(6,42,51,.35);
  isolation:isolate;
}

.hero-cover-bg { position:absolute; inset:0; overflow:hidden; z-index:0; }

.hero-rays {
  position:absolute; top:-50%; left:-20%; width:140%; height:200%;
  background:
    conic-gradient(from 0deg at 50% 100%,
      transparent 0deg, rgba(6,163,182,.15) 10deg, transparent 20deg,
      transparent 30deg, rgba(245,184,48,.08) 40deg, transparent 50deg,
      transparent 60deg, rgba(6,163,182,.12) 70deg, transparent 80deg,
      transparent 90deg, rgba(245,184,48,.06) 100deg, transparent 110deg,
      transparent 120deg, rgba(6,163,182,.10) 130deg, transparent 140deg,
      transparent 360deg);
  animation:hero-rays-spin 60s linear infinite;
  pointer-events:none;
}
@keyframes hero-rays-spin { to { transform:rotate(360deg); } }

.hero-waves { position:absolute; inset:0; pointer-events:none; }
.hero-waves .wave {
  position:absolute; border:2px solid rgba(6,163,182,.3);
  border-radius:50%; animation:hero-wave 4s ease-out infinite;
}
.hero-waves .w1 { width:200px; height:200px; top:-100px; right:-100px; animation-delay:0s; }
.hero-waves .w2 { width:300px; height:300px; top:-150px; right:-150px; animation-delay:1.3s; }
.hero-waves .w3 { width:400px; height:400px; top:-200px; right:-200px; animation-delay:2.6s; }
@keyframes hero-wave {
  0% { transform:scale(.5); opacity:.8; }
  100% { transform:scale(1.5); opacity:0; }
}

.hero-stars { position:absolute; inset:0; pointer-events:none; }
.hero-stars .star {
  position:absolute;
  color:rgba(245,184,48,.6);
  font-size:14px;
  animation:star-float 4s ease-in-out infinite;
}
.hero-stars .s1 { top:20%; left:5%; animation-delay:0s; font-size:12px; }
.hero-stars .s2 { top:60%; left:15%; animation-delay:.8s; font-size:16px; color:rgba(255,255,255,.5); }
.hero-stars .s3 { top:30%; left:88%; animation-delay:1.5s; font-size:10px; }
.hero-stars .s4 { top:75%; left:80%; animation-delay:2s; font-size:14px; }
.hero-stars .s5 { top:15%; left:50%; animation-delay:2.5s; font-size:11px; color:rgba(255,255,255,.4); }
.hero-stars .s6 { top:80%; left:40%; animation-delay:3s; font-size:13px; }
@keyframes star-float {
  0%, 100% { transform:translateY(0) scale(1); opacity:.7; }
  50% { transform:translateY(-8px) scale(1.15); opacity:1; }
}

.hero-cover-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:12px;
  height:100%;
}

.hero-cover-top {
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap;
}
.hero-status-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.4);
  color:#86efac;
  font-family:var(--mono);
  font-size:10px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
}
.hero-status-badge .live-dot {
  width:7px; height:7px; border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,.6);
  animation:live-pulse 2s infinite;
}
@keyframes live-pulse {
  0% { box-shadow:0 0 0 0 rgba(16,185,129,.6); }
  70% { box-shadow:0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow:0 0 0 0 rgba(16,185,129,0); }
}
.hero-issue {
  font-family:var(--mono);
  font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

.hero-cover-main {
  flex:1;
  display:flex; flex-direction:column; gap:4px;
  min-width:0;
}
.hero-cover-kicker {
  font-family:var(--mono);
  font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:rgba(245,184,48,.9);
  margin-bottom:4px;
}
.hero-cover-title {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:clamp(36px, 6vw, 56px);
  line-height:1;
  letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 4px 20px rgba(0,0,0,.25);
}
.hero-cover-title .greet-word {
  display:inline-block;
  color:rgba(255,255,255,.95);
}
.hero-cover-title .greet-name {
  display:inline-block;
  background:linear-gradient(135deg, #fff, #19CDEB);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding:0 4px;
}
.hero-cover-title .greet-punct {
  display:inline-block;
  color:rgba(245,184,48,.9);
  transform:translateY(-4px) rotate(-8deg);
  transition:transform .3s;
}
.hero-cover:hover .greet-punct {
  transform:translateY(-6px) rotate(8deg);
}
.hero-cover-sub {
  font-size:14.5px;
  color:rgba(255,255,255,.75);
  font-style:italic;
  margin-top:8px;
  max-width:600px;
}

.hero-cover-meta {
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:8px;
}
.hmeta-chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:rgba(255,255,255,.9);
  font-size:12.5px; font-weight:600;
}
.hmeta-chip.mono { font-family:var(--mono); font-size:12px; }
.hmeta-chip.weather-chip { background:rgba(245,184,48,.1); border-color:rgba(245,184,48,.25); }
.hmeta-chip i { width:14px; height:14px; }
.hmeta-chip span:first-child:not([id]) { font-size:14px; }

/* CTA Gather Town integrado en el banner de bienvenida */
.hmeta-gather {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px;
  border-radius:10px;
  background:linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  font-size:13px; font-weight:700;
  text-decoration:none;
  letter-spacing:.3px;
  box-shadow:0 4px 14px rgba(244,63,94,.35);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hmeta-gather:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(244,63,94,.5);
  background:linear-gradient(135deg, #fb5570 0%, #f43f5e 100%);
}
.hmeta-gather i { width:15px; height:15px; }
.hmeta-gather-arrow { transition:transform .2s ease; }
.hmeta-gather:hover .hmeta-gather-arrow { transform:translateX(3px); }

/* Hero cover center layout (avatar + text side by side) */
.hero-cover-center {
  display:flex;
  align-items:center;
  gap:28px;
  padding:6px 0;
}

/* ── Panel de acciones del banner (lado derecho): Entrada / Salida / Oficina Virtual ── */
.hero-cover-actions {
  margin-left:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:260px;
  max-width:320px;
  padding:14px 16px 14px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.32);
  border-radius:16px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.30);
}
.hero-action-title {
  font-size:12px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  margin-bottom:2px;
}
.hero-action-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.hero-action-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:.3px;
  text-decoration:none;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.hero-action-btn i { width:16px; height:16px; }
.hero-action-btn:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.25); }
.hero-action-btn:active { transform:translateY(0); }
.hero-action-btn:disabled,
.hero-action-btn.is-loading {
  opacity:.6; cursor:wait; transform:none;
}

.hero-action-btn.entry {
  background:linear-gradient(135deg, rgba(16,185,129,.92), rgba(5,150,105,.92));
  border-color:rgba(16,185,129,.55);
  box-shadow:0 8px 20px rgba(16,185,129,.30), inset 0 1px 0 rgba(255,255,255,.25);
}
.hero-action-btn.entry:hover {
  background:linear-gradient(135deg, #10b981, #059669);
  box-shadow:0 12px 26px rgba(16,185,129,.45);
}

.hero-action-btn.exit {
  background:linear-gradient(135deg, rgba(244,63,94,.92), rgba(220,38,55,.92));
  border-color:rgba(244,63,94,.55);
  box-shadow:0 8px 20px rgba(244,63,94,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.hero-action-btn.exit:hover {
  background:linear-gradient(135deg, #f43f5e, #dc2637);
  box-shadow:0 12px 26px rgba(244,63,94,.45);
}

.hero-action-btn.gather {
  background:linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  border-color:rgba(255,255,255,.20);
  box-shadow:0 4px 14px rgba(139,92,246,.40), inset 0 1px 0 rgba(255,255,255,.22);
  padding:13px 16px;
  font-size:13.5px;
}
.hero-action-btn.gather:hover {
  background:linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  box-shadow:0 8px 22px rgba(139,92,246,.55);
}
.hero-action-arrow { transition:transform .2s ease; margin-left:auto; width:14px !important; height:14px !important; }
.hero-action-btn.gather:hover .hero-action-arrow { transform:translateX(3px); }

.hero-action-status {
  min-height:18px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.4px;
  color:rgba(255,255,255,.85);
  text-align:center;
  transition:opacity .25s ease;
}
.hero-action-status.ok { color:#86efac; }
.hero-action-status.err { color:#fda4af; }

/* Hero avatar in cover banner */
.hero-avatar-zone {
  position:relative;
  width:120px; height:120px;
  flex-shrink:0;
}
.hero-av-energy {
  position:absolute; inset:-16px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(6,163,182,.25) 0%, transparent 70%);
  animation:hero-av-energy-pulse 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes hero-av-energy-pulse {
  0%, 100% { transform:scale(1); opacity:.4; }
  50% { transform:scale(1.15); opacity:.8; }
}
.hero-av-ring {
  position:absolute; inset:-5px;
  border-radius:50%;
  border:3px solid transparent;
  background:conic-gradient(from 0deg, #06a3b6, #f5b830, #19CDEB, #06a3b6) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:hero-av-ring-spin 8s linear infinite;
}
@keyframes hero-av-ring-spin { to { transform:rotate(360deg); } }

.hero-av-photo {
  position:relative; z-index:1;
  width:120px; height:120px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid rgba(255,255,255,.2);
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 40px rgba(6,163,182,.2);
  transition:all .3s;
}
.hero-cover:hover .hero-av-photo {
  box-shadow:0 12px 35px rgba(0,0,0,.4), 0 0 50px rgba(6,163,182,.35);
  border-color:rgba(255,255,255,.35);
}

.hero-av-rank {
  position:absolute; bottom:2px; right:2px;
  width:30px; height:30px;
  background:linear-gradient(135deg, #f5b830, #d97706);
  border:2px solid rgba(255,255,255,.3);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; z-index:2;
  box-shadow:0 4px 12px rgba(245,184,48,.5);
  animation:hero-av-rank-bounce 3s ease-in-out infinite;
}
@keyframes hero-av-rank-bounce {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.1) rotate(10deg); }
}

.hero-cover-main { flex:1; min-width:0; }

/* Energy bolts */
.hero-bolt {
  position:absolute;
  width:2px; height:60px;
  background:linear-gradient(180deg, transparent, rgba(6,163,182,.6), transparent);
  border-radius:2px;
  pointer-events:none;
  animation:hero-bolt-flash 4s ease-in-out infinite;
}
.hero-bolt.bolt1 { top:10%; right:18%; transform:rotate(25deg); }
.hero-bolt.bolt2 { bottom:15%; right:30%; transform:rotate(-15deg); animation-delay:2s; height:40px; }
@keyframes hero-bolt-flash {
  0%, 40%, 100% { opacity:0; }
  45%, 55% { opacity:1; }
  60% { opacity:0; }
}

@media (max-width:700px) {
  .hero-cover { padding:22px 20px; }
  .hero-cover-title { font-size:clamp(28px, 8vw, 38px); }
  .hero-cover-center { flex-direction:column; text-align:center; gap:16px; }
  .hero-avatar-zone { width:90px; height:90px; }
  .hero-av-photo { width:90px; height:90px; }
  .hero-cover-actions { margin-left:0; width:100%; max-width:none; min-width:0; }
}

/* CTA grande en admin.html que linkea al dashboard de asistencia */
.admin-dashboard-cta {
  display:flex; align-items:center; gap:18px;
  padding:18px 22px;
  background:linear-gradient(135deg, #06a3b6 0%, #057b8c 100%);
  border-radius:18px;
  color:#fff;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(6,107,120,.28);
  margin-bottom:22px;
  transition:transform .2s, box-shadow .2s;
}
.admin-dashboard-cta:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(6,107,120,.4);
}
.admin-dashboard-cta-icon {
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:14px;
  background:rgba(255,255,255,.18);
  flex-shrink:0;
}
.admin-dashboard-cta-icon i { width:26px; height:26px; }
.admin-dashboard-cta-body { flex:1; min-width:0; }
.admin-dashboard-cta-kicker {
  font-size:10.5px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; opacity:.85;
}
.admin-dashboard-cta-title {
  font-family:var(--display);
  font-size:18px; font-weight:800; margin:2px 0;
}
.admin-dashboard-cta-desc {
  font-size:12.5px; opacity:.92;
}
.admin-dashboard-cta-arrow {
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:transform .2s, background .2s;
  flex-shrink:0;
}
.admin-dashboard-cta-arrow i { width:18px; height:18px; }
.admin-dashboard-cta:hover .admin-dashboard-cta-arrow {
  background:rgba(255,255,255,.32);
  transform:translateX(3px);
}

/* ══════════════════════════════════════════
   DASHBOARD DE ASISTENCIA (admin)
   ══════════════════════════════════════════ */
.ad-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-bottom:18px; padding:0 4px;
}
.ad-toolbar-stats { display:flex; gap:8px; flex-wrap:wrap; }
.ad-toolbar-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ad-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  background:var(--paper); border:1px solid var(--border);
  font-size:12px; font-weight:700; color:var(--muted);
}
.ad-pill-mono { font-family:var(--mono); font-size:11px; letter-spacing:.4px; }
.ad-select {
  padding:10px 14px;
  border:1.5px solid var(--border-2); border-radius:12px;
  font-family:inherit; font-size:13px; font-weight:600;
  background:var(--paper); color:var(--text);
  cursor:pointer;
}
.ad-toolbar-actions .btn-primary { padding:10px 16px !important; margin-top:0 !important; }
.ad-toolbar-actions .btn-primary i { width:15px; height:15px; }

.ad-loading {
  padding:60px 20px; text-align:center; color:var(--muted); font-size:14px;
}
.ad-error {
  padding:32px 24px; text-align:center;
  background:#fef2f2; border:1.5px solid #fca5a5; border-radius:14px;
  color:#991b1b;
}
.ad-error-icon i { width:32px; height:32px; }
.ad-error-text { font-size:15px; font-weight:700; margin:10px 0; }
.ad-error-detail { font-size:12px; opacity:.85; line-height:1.5; font-family:var(--mono); }
.ad-error code {
  background:rgba(0,0,0,.06); padding:2px 6px; border-radius:4px;
  font-family:var(--mono); font-size:11.5px;
}

.ad-section { margin-bottom:32px; }

/* 4 contadores principales */
.ad-counters {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:14px;
}
.ad-counter {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 20px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.ad-counter::before {
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--cyan);
}
.ad-counter.ad-c-working::before { background:#10b981; }
.ad-counter.ad-c-break::before   { background:#06a3b6; }
.ad-counter.ad-c-power::before   { background:#f59e0b; }
.ad-counter.ad-c-out::before     { background:#94a3b8; }
.ad-counter-icon i { width:22px; height:22px; opacity:.7; }
.ad-counter.ad-c-working .ad-counter-icon i { color:#10b981; }
.ad-counter.ad-c-break .ad-counter-icon i   { color:#06a3b6; }
.ad-counter.ad-c-power .ad-counter-icon i   { color:#f59e0b; }
.ad-counter.ad-c-out .ad-counter-icon i     { color:#94a3b8; }
.ad-counter-value {
  font-family:var(--display);
  font-size:34px; font-weight:900; line-height:1;
  color:#062a33;
}
.ad-counter-label {
  font-size:10.5px; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--muted);
}

/* Split: lista equipo + donut */
.ad-split {
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr);
  gap:18px;
}
.ad-team-list-wrap, .ad-donut-wrap {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow);
}
.ad-team-list {
  display:flex; flex-direction:column; gap:8px;
  max-height:420px; overflow-y:auto;
}
.ad-team-row {
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px;
  border:1px solid var(--border); border-radius:10px;
  background:#f8fafc;
}
.ad-team-top {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.ad-team-detail {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px;
  color:var(--muted); font-weight:600;
}
.ad-team-detail .ad-d-lbl {
  text-transform:uppercase; font-size:9.5px; letter-spacing:1px;
  color:#94a3b8; margin-right:3px;
}
.ad-team-detail .ad-d-sep { opacity:.4; }
body[data-theme="dark"] .ad-team-detail { color:var(--text-2); }
.ad-team-name {
  font-weight:700; font-size:13.5px; color:#062a33;
  text-transform:capitalize;
}
.ad-team-status { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ad-status-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase;
  border:1px solid;
}
.ad-status-pill i { width:12px; height:12px; }
.ad-team-time {
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
  font-weight:600;
}
.ad-donut-box {
  position:relative; width:100%; height:260px;
}

.ad-hint {
  font-size:12px; color:var(--muted); margin:0 4px 12px;
}
.ad-bars-box {
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:18px; box-shadow:var(--shadow);
  position:relative; min-height:300px;
  /* La altura efectiva se ajusta abajo según la cantidad de barras */
}
.ad-bars-box canvas { max-height:600px; }

/* Listas: cortes y ausencias */
.ad-list {
  display:flex; flex-direction:column; gap:8px;
}
.ad-power-item, .ad-absence-item {
  display:grid; align-items:center; gap:12px;
  padding:12px 14px;
  background:var(--card);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow);
}
.ad-power-item {
  grid-template-columns:auto 1fr auto auto;
}
.ad-power-item.ongoing { border-color:#f59e0b; background:#fff7ed; }
.ad-power-icon i, .ad-absence-icon i { width:18px; height:18px; }
.ad-power-icon i { color:#f59e0b; }
.ad-absence-icon i { color:#64748b; }
.ad-power-name, .ad-absence-name {
  font-weight:700; font-size:13.5px; color:#062a33;
  text-transform:capitalize;
}
.ad-power-times {
  font-family:var(--mono); font-size:11.5px; color:var(--muted);
}
.ad-ongoing {
  color:#d97706; font-weight:800; margin-left:6px;
}
.ad-power-duration {
  font-family:var(--mono); font-size:12px; font-weight:800; color:#d97706;
  padding:4px 10px; border-radius:8px;
  background:#fef3c7; border:1px solid rgba(217,119,6,.25);
}

.ad-absence-item {
  grid-template-columns:auto 1fr auto 2fr;
}
.ad-absence-date {
  font-family:var(--mono); font-size:11.5px; color:var(--muted);
  padding:4px 10px; border-radius:8px;
  background:#f1f5f9; border:1px solid var(--border);
}
.ad-absence-reason {
  font-size:13px; color:#334155; font-style:italic;
  overflow:hidden; text-overflow:ellipsis;
}

.ad-empty {
  padding:24px; text-align:center;
  color:var(--muted); font-size:13px; font-style:italic;
  background:#f8fafc; border:1px dashed var(--border-2);
  border-radius:12px;
}

@media (max-width:900px) {
  .ad-split { grid-template-columns:1fr; }
  .ad-donut-box { height:240px; }
  .ad-counter-value { font-size:28px; }
  .ad-power-item, .ad-absence-item { grid-template-columns:auto 1fr; row-gap:6px; }
  .ad-power-item > *:nth-child(3),
  .ad-power-item > *:nth-child(4),
  .ad-absence-item > *:nth-child(3),
  .ad-absence-item > *:nth-child(4) { grid-column:2; }
}

/* ══════════════════════════════════════════
   MI ASISTENCIA — Registro de jornada, break,
   corte de luz y ausencias
   ══════════════════════════════════════════ */
.attendance-panel {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}

.att-group {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 16px 14px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px;
  position:relative;
  transition:box-shadow .2s, transform .2s;
}
.att-group:hover { box-shadow:0 12px 28px rgba(6,107,120,.14); }

.att-group-title {
  display:flex; align-items:center; gap:8px;
  font-family:var(--display);
  font-size:11.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:1.6px;
  color:var(--cyan);
}
.att-group-title i { width:15px; height:15px; }

/* Acentos por grupo */
.att-g-luz .att-group-title { color:#d97706; }
.att-g-ausencia .att-group-title { color:#64748b; }

.att-group-buttons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.att-g-ausencia .att-group-buttons {
  grid-template-columns:1fr;
}

.att-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px;
  padding:13px 12px;
  border-radius:12px;
  border:1.5px solid transparent;
  background:#f0f9fa;
  color:#062a33;
  font-family:inherit;
  font-size:13px; font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .15s, background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.att-btn i { width:16px; height:16px; flex-shrink:0; }
.att-btn:hover { transform:translateY(-2px); }
.att-btn:active { transform:translateY(0); }
.att-btn:disabled, .att-btn.is-loading {
  opacity:.6; cursor:wait; transform:none;
}

/* Variantes por acción */
.att-entrada {
  background:linear-gradient(135deg, #10b981, #059669);
  color:#fff;
  box-shadow:0 4px 12px rgba(16,185,129,.28);
}
.att-entrada:hover { box-shadow:0 8px 22px rgba(16,185,129,.42); }

.att-salida {
  background:linear-gradient(135deg, #f43f5e, #dc2637);
  color:#fff;
  box-shadow:0 4px 12px rgba(244,63,94,.26);
}
.att-salida:hover { box-shadow:0 8px 22px rgba(244,63,94,.42); }

.att-break-start, .att-break-end {
  background:#e9f6f8;
  border-color:rgba(6,163,182,.25);
  color:#055e6b;
}
.att-break-start:hover, .att-break-end:hover {
  background:var(--cyan); color:#fff;
  border-color:var(--cyan);
  box-shadow:0 6px 16px rgba(6,163,182,.32);
}

.att-luz-off {
  background:#fef3c7;
  border-color:rgba(217,119,6,.35);
  color:#92400e;
}
.att-luz-off:hover {
  background:#f59e0b; color:#fff;
  border-color:#f59e0b;
  box-shadow:0 6px 16px rgba(245,158,11,.4);
}
.att-luz-on {
  background:#fef9c3;
  border-color:rgba(250,204,21,.45);
  color:#854d0e;
}
.att-luz-on:hover {
  background:#facc15; color:#1a1a1a;
  border-color:#facc15;
  box-shadow:0 6px 16px rgba(250,204,21,.45);
}

.att-ausencia {
  background:#f1f5f9;
  border-color:rgba(100,116,139,.3);
  color:#334155;
}
.att-ausencia:hover {
  background:#475569; color:#fff;
  border-color:#475569;
  box-shadow:0 6px 16px rgba(71,85,105,.35);
}

/* ══ Dark mode: variantes neutras del panel de asistencia ══
   Las variantes en gradiente (entrada/salida) ya van bien sobre dark;
   estas son las "pastel sobre claro" que hay que reentintar. */
body[data-theme="dark"] .att-btn {
  background:rgba(255,255,255,.04);
  color:var(--text);
}
body[data-theme="dark"] .att-break-start,
body[data-theme="dark"] .att-break-end {
  background:rgba(6,163,182,.14);
  border-color:rgba(6,163,182,.40);
  color:#67e8f9;
}
body[data-theme="dark"] .att-break-start:hover,
body[data-theme="dark"] .att-break-end:hover {
  background:var(--cyan); color:#fff;
}
body[data-theme="dark"] .att-luz-off {
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.40);
  color:#fcd34d;
}
body[data-theme="dark"] .att-luz-on {
  background:rgba(250,204,21,.14);
  border-color:rgba(250,204,21,.40);
  color:#fde68a;
}
body[data-theme="dark"] .att-luz-on:hover {
  background:#facc15; color:#1a1a1a;
}
body[data-theme="dark"] .att-ausencia {
  background:rgba(148,163,184,.12);
  border-color:rgba(148,163,184,.35);
  color:#cbd5e1;
}
body[data-theme="dark"] .att-ausencia:hover {
  background:#94a3b8; color:#0a1a1f;
  border-color:#94a3b8;
}

/* Barra de estado al pie del panel */
.att-status-bar {
  grid-column:1 / -1;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 18px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow);
}
.att-status-row {
  display:flex; align-items:center; gap:10px;
  font-size:13px;
  flex-wrap:wrap;
}
.att-status-label {
  font-family:var(--display);
  font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:1.4px;
  color:var(--muted);
  flex-shrink:0;
}
.att-status-value {
  color:#062a33; font-weight:600;
}
.att-status-last .att-status-value {
  color:var(--muted); font-weight:500;
}
.att-feedback {
  min-height:14px;
  font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.3px;
  color:var(--muted);
  margin-top:2px;
  transition:opacity .25s;
}
.att-feedback.ok { color:#059669; }
.att-feedback.err { color:#dc2626; }

/* Modal de ausencia · sl-dialog */
.att-abs-dialog::part(panel) {
  border-radius:16px;
  max-width:480px;
}
.att-abs-dialog::part(header) {
  background:linear-gradient(135deg, var(--cyan), #057b8c);
  color:#fff;
}
.att-abs-dialog::part(title) {
  font-family:var(--display, "Bricolage Grotesque", "Inter"), sans-serif;
  font-weight:800; font-size:16px; letter-spacing:.3px;
}
.att-abs-dialog::part(close-button) { color:rgba(255,255,255,.85); }
.att-abs-dialog::part(close-button):hover { color:#fff; }

.att-abs-form {
  display:flex; flex-direction:column; gap:14px;
}
.att-abs-note {
  font-size:13px; color:var(--muted);
  margin:0;
  padding:10px 12px;
  background:rgba(6,163,182,.08);
  border-left:3px solid var(--cyan);
  border-radius:6px;
}
.att-abs-date-label {
  display:block;
  font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
.att-abs-date-label > span { display:block; margin-bottom:6px; }
.att-abs-date-label input[type="date"],
.att-abs-date-label input.flatpickr-input,
.att-abs-date-label .flatpickr-input.form-control.input {
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--border-2); border-radius:10px;
  font-family:inherit; font-size:14px; font-weight:500;
  background:var(--paper); color:var(--text);
  transition:border-color .15s;
}
.att-abs-date-label input:focus { outline:none; border-color:var(--cyan); }

/* ═══════════════════════════════════════════
   sl-dialog estándar Hero Light (.hh-dialog)
   Header gradiente cyan, body con .hh-form, footer separado.
   Cualquier dialog que use .hh-dialog hereda este look.
   ═══════════════════════════════════════════ */
.hh-dialog::part(panel) {
  border-radius:16px;
  max-width:520px;
}
.hh-dialog::part(header) {
  background:linear-gradient(135deg, var(--cyan), #057b8c);
  color:#fff;
}
.hh-dialog::part(title) {
  font-family:var(--display, "Bricolage Grotesque", "Inter"), sans-serif;
  font-weight:800; font-size:16px; letter-spacing:.3px;
}
.hh-dialog::part(close-button) { color:rgba(255,255,255,.85); }
.hh-dialog::part(close-button):hover { color:#fff; }

.hh-form {
  display:flex; flex-direction:column; gap:14px;
}

/* Modal de portales: un poco más amplio y con más respiración entre campos.
   - --width controla el ancho REAL del panel sl-dialog (max-width solo lo
     limita). max-width:calc(100vw - 32px) evita desbordar en pantallas chicas.
   - overflow-x:hidden en el body + min-width:0 en los sl-input evitan que
     el min-content de los inputs dentro del grid 1fr 1fr empuje un scroll
     horizontal dentro del modal. */
.carrier-edit-dialog              { --width:580px; }
.carrier-edit-dialog::part(panel) { max-width:calc(100vw - 32px); }
.carrier-edit-dialog::part(body)  { padding-top:20px; padding-bottom:10px; overflow-x:hidden; }
.carrier-edit-dialog .hh-form     { gap:18px; }
.carrier-edit-dialog .modal-grid-2 { gap:16px; margin-bottom:0; }
.carrier-edit-dialog sl-input,
.carrier-edit-dialog sl-textarea  { min-width:0; max-width:100%; }
.hh-field { display:flex; flex-direction:column; gap:6px; }
.hh-field-label {
  font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted);
}
.hh-note {
  margin:0;
  padding:10px 12px;
  background:rgba(6,163,182,.08);
  border-left:3px solid var(--cyan);
  border-radius:6px;
  font-size:12.5px; color:var(--muted);
}

/* ═══════════════════════════════════════════
   Modales de Equipo (sl-dialog)
   bio-edit-dialog · member-edit-dialog
   ═══════════════════════════════════════════ */
.bio-edit-dialog::part(panel),
.member-edit-dialog::part(panel) {
  border-radius:16px;
  max-width:540px;
}
.bio-edit-dialog::part(header),
.member-edit-dialog::part(header) {
  background:linear-gradient(135deg, var(--cyan), #057b8c);
  color:#fff;
}
.bio-edit-dialog::part(title),
.member-edit-dialog::part(title) {
  font-family:var(--display, "Bricolage Grotesque", "Inter"), sans-serif;
  font-weight:800; font-size:16px; letter-spacing:.3px;
}
.bio-edit-dialog::part(close-button),
.member-edit-dialog::part(close-button) {
  color:rgba(255,255,255,.85);
}
.bio-edit-dialog::part(close-button):hover,
.member-edit-dialog::part(close-button):hover { color:#fff; }

.bio-form, .member-form {
  display:flex; flex-direction:column; gap:14px;
}
.bio-note {
  margin:0;
  padding:10px 12px;
  background:rgba(6,163,182,.08);
  border-left:3px solid var(--cyan);
  border-radius:6px;
  font-size:12.5px; color:var(--muted);
}

/* Cumpleaños: dos selects en fila */
.member-bday-label {
  display:block;
  font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 6px;
}
.member-bday-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* ═══════════════════════════════════════════
   FLATPICKR — Tema Hero Light (cyan)
   ═══════════════════════════════════════════ */
.flatpickr-calendar {
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 18px 42px rgba(6,42,51,.18);
  font-family:var(--display), system-ui, sans-serif;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowBottom:before { border-bottom-color:var(--border); }
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:after { border-bottom-color:#fff; }

.flatpickr-months {
  background:linear-gradient(135deg, var(--cyan), #057b8c);
  border-radius:13px 13px 0 0;
  padding:10px 0 8px;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month {
  color:#fff !important;
}
.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color:#fff !important;
  font-weight:700;
  background:transparent !important;
}
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  color:#062a33;
  background:#fff;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color:#fff; }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color:#fff; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill:#fff; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill:#a5f3fc; }

.flatpickr-weekdays { background:transparent; }
.flatpickr-weekday {
  color:var(--muted) !important;
  font-weight:800 !important;
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.flatpickr-day {
  border-radius:8px;
  color:#062a33;
  font-weight:600;
  transition:background .15s, color .15s, border-color .15s;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background:rgba(6,163,182,.12);
  border-color:transparent;
  color:#057b8c;
}
.flatpickr-day.today {
  border-color:var(--cyan);
  color:var(--cyan);
}
.flatpickr-day.today:hover {
  background:rgba(6,163,182,.12);
  color:#057b8c;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange {
  background:linear-gradient(135deg, var(--cyan), #057b8c);
  border-color:#057b8c;
  color:#fff;
  font-weight:800;
  box-shadow:0 4px 10px rgba(6,163,182,.32);
}
.flatpickr-day.inRange {
  background:rgba(6,163,182,.14);
  border-color:transparent;
  box-shadow:none;
}
.flatpickr-day.disabled,
.flatpickr-day.flatpickr-disabled {
  color:rgba(6,42,51,.25);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color:rgba(6,42,51,.3);
}

@media (max-width:700px) {
  .attendance-panel { grid-template-columns:1fr; gap:12px; }
  .att-group { padding:14px; }
  .att-btn { font-size:12.5px; padding:12px 10px; }
}

/* ══════════════════════════════════════════
   MISIONES — Glassmorphism Premium
   ══════════════════════════════════════════ */
.missions-rack {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}

.mission-card {
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  gap:14px;
  padding:28px 20px 24px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.45) 100%),
    linear-gradient(135deg,
      var(--mc-color, var(--cyan)) 0%,
      transparent 60%);
  background-blend-mode:normal;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.6);
  border-bottom:2px solid var(--mc-color, var(--cyan));
  border-radius:18px;
  text-decoration:none;
  color:var(--text);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
  min-height:200px;
  box-shadow:
    0 4px 14px rgba(15,40,60,.06),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.mc-icon {
  position:relative;
  width:52px; height:52px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--mc-color, var(--cyan)), var(--mc-color-2, var(--cyan-deep)));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:
    0 6px 16px var(--mc-shadow, rgba(6,163,182,.35)),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .3s ease, box-shadow .3s ease;
  z-index:1;
}
.mc-icon i { width:22px; height:22px; }

/* Halo radial pulsante alrededor del ícono */
.mc-icon::before {
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, var(--mc-color, var(--cyan)) 0%, transparent 65%);
  opacity:.25;
  z-index:-1;
  animation:mc-halo-pulse 3s ease-in-out infinite;
}
@keyframes mc-halo-pulse {
  0%, 100% { transform:scale(1); opacity:.22; }
  50%      { transform:scale(1.18); opacity:.4; }
}

.mc-body {
  width:100%;
  display:flex; flex-direction:column;
  align-items:center;
  gap:4px;
}
.mc-title {
  font-size:14.5px; font-weight:800;
  color:var(--text);
  line-height:1.25;
  letter-spacing:-.1px;
}
.mc-desc {
  font-size:12px; color:var(--muted);
  line-height:1.4;
  max-width:200px;
}

.mc-arrow {
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--mc-color, var(--cyan));
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
  margin-top:auto;
}
.mc-arrow i { width:16px; height:16px; }

.mission-card:hover {
  transform:translateY(-4px) scale(1.012);
  border-bottom-color:var(--mc-color-2, var(--cyan-deep));
  box-shadow:
    0 18px 38px var(--mc-shadow, rgba(6,107,120,.22)),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.mission-card:hover .mc-icon {
  transform:scale(1.06);
  box-shadow:
    0 10px 24px var(--mc-shadow, rgba(6,163,182,.5)),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.mission-card:hover .mc-icon::before {
  animation-duration:1.5s;
  opacity:.5;
}
.mission-card:hover .mc-arrow {
  transform:translateY(2px) scale(1.08);
  background:var(--mc-color, var(--cyan));
  color:#fff;
  box-shadow:0 6px 14px var(--mc-shadow, rgba(6,163,182,.4));
}

/* Ícono ilustrativo de fondo (traslúcido, decorativo) */
.mc-bg-icon {
  position:absolute;
  right:-30px;
  bottom:-30px;
  width:200px;
  height:200px;
  color:var(--mc-color, var(--cyan));
  opacity:.10;
  pointer-events:none;
  z-index:0;
  transform:rotate(-12deg);
  transition:opacity .35s ease, transform .35s ease;
}
.mc-bg-icon svg { width:100%; height:100%; stroke-width:1.2; }
.mission-card:hover .mc-bg-icon {
  opacity:.18;
  transform:rotate(-6deg) scale(1.06);
}

/* Asegurar que el contenido viva encima del ícono decorativo */
.mission-card > .mc-icon,
.mission-card > .mc-body,
.mission-card > .mc-arrow { position:relative; z-index:1; }

/* Elementos heredados sin uso en el nuevo diseño (mantener compatibilidad si existen en HTML) */
.mc-seal, .mc-fill { display:none; }

/* Colores temáticos por misión (--mc-shadow es el tinte de sombra suave por color) */
.m-support { --mc-color:#f5b830; --mc-color-2:#d97706; --mc-shadow:rgba(217,119,6,.35); }
.m-db      { --mc-color:#06a3b6; --mc-color-2:#066b78; --mc-shadow:rgba(6,163,182,.35); }
.m-alta    { --mc-color:#10b981; --mc-color-2:#059669; --mc-shadow:rgba(16,185,129,.35); }
.m-training{ --mc-color:#a855f7; --mc-color-2:#7c3aed; --mc-shadow:rgba(168,85,247,.35); }
.m-onboard { --mc-color:#3b82f6; --mc-color-2:#2563eb; }
.m-gather { --mc-color:#f43f5e; --mc-color-2:#e11d48; }

/* ══ Dark mode: cambiar la capa blanca translúcida del fondo por una
   oscura, y ajustar bordes y flecha para que el color de la misión
   resalte sobre superficie oscura en vez de quedar tapado por blanco. */
body[data-theme="dark"] .mission-card {
  background:
    linear-gradient(135deg,
      rgba(15,42,51,.88) 0%,
      rgba(15,42,51,.55) 100%),
    linear-gradient(135deg,
      var(--mc-color, var(--cyan)) 0%,
      transparent 60%);
  border-color:rgba(255,255,255,.08);
  border-bottom-color:var(--mc-color, var(--cyan));
  box-shadow:
    0 4px 14px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.06);
}
body[data-theme="dark"] .mission-card:hover {
  box-shadow:
    0 18px 38px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
}
body[data-theme="dark"] .mc-arrow {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}

/* ══════════════════════════════════════════
   CUMPLEAÑOS GIGANTE
   ══════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   CELEBRACIONES DEL EQUIPO — grid de 2 banners (4:5 cada uno)
   Héroe del Mes + Próximo Cumpleaños, lado a lado.
   ══════════════════════════════════════════════════════════ */
.celebrations-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
  max-width:1100px;
  margin:0 auto;
}
@media (max-width:900px) {
  .celebrations-grid { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════
   PRÓXIMO CUMPLEAÑOS — Birthday Card (4:5 vertical festivo)
   Con borde animado festivo alrededor de toda la tarjeta.
   ══════════════════════════════════════════════════════════ */
.bday-mega.bday-card {
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:520px;
  margin:0 auto;
  aspect-ratio:4 / 5;
  background:
    radial-gradient(circle at 82% 14%, rgba(255,182,193,0.45), transparent 50%),
    radial-gradient(circle at 14% 88%, rgba(178,232,209,0.40), transparent 55%),
    radial-gradient(circle at 50% 55%, rgba(255,232,150,0.25), transparent 65%),
    linear-gradient(165deg, #fff8f0 0%, #fef0f5 50%, #f0f8ff 100%);
  border-radius:16px;
  border:none;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(244,63,94,0.15), 0 4px 12px rgba(0,0,0,0.06);
  min-height:auto;
  color:#3d2229;
}

/* Borde festivo animado alrededor de toda la tarjeta */
.bday-mega.bday-card::after {
  content:'';
  position:absolute;
  inset:0;
  padding:3px;
  border-radius:inherit;
  background:linear-gradient(90deg,
    #ffc83d, #ff7a59, #ff5d8f, #3dbccc, #4fd1b8, #ffc83d, #ff7a59, #ff5d8f);
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:shimmerBar 10s linear infinite;
  pointer-events:none;
  z-index:10;
}

/* Patrón de puntos festivo de fondo */
.bdc-bg-dots {
  position:absolute; inset:0;
  z-index:1;
  opacity:0.45;
  background-image:radial-gradient(rgba(244,63,94,0.14) 2px, transparent 2px);
  background-size:30px 30px;
  pointer-events:none;
}

/* Guirnalda de banderines superior */
.bdc-bunting {
  position:absolute;
  top:0; left:0; right:0;
  height:46px;
  z-index:4;
  display:flex;
  justify-content:space-around;
  pointer-events:none;
}
.bdc-flag {
  width:0; height:0;
  border-left:17px solid transparent;
  border-right:17px solid transparent;
  border-top:26px solid #ffc83d;
  transform-origin:top center;
  animation:bdc-sway 3s ease-in-out infinite;
}
.bdc-flag:nth-child(odd)  { border-top-color:#3dbccc; animation-delay:.3s; }
.bdc-flag:nth-child(3n)   { border-top-color:#ff7a59; }
.bdc-flag:nth-child(4n)   { border-top-color:#ff5d8f; animation-delay:.6s; }
.bdc-flag:nth-child(5n)   { border-top-color:#4fd1b8; }
@keyframes bdc-sway {
  0%,100% { transform:rotate(-5deg); }
  50%     { transform:rotate(5deg); }
}

/* Globos flotantes */
.bdc-balloon {
  position:absolute;
  width:54px; height:66px;
  border-radius:50% 50% 50% 50% / 55% 55% 45% 45%;
  z-index:2;
  opacity:.92;
  animation:bdc-float-up 7s ease-in-out infinite;
}
.bdc-balloon::after {
  content:"";
  position:absolute;
  bottom:-8px; left:50%;
  width:2px; height:26px;
  background:rgba(120,80,90,.35);
  transform:translateX(-50%);
}
.bdc-balloon::before {
  content:"";
  position:absolute;
  top:12px; left:14px;
  width:14px; height:18px;
  background:rgba(255,255,255,.55);
  border-radius:50%;
}
.bdc-b1 { left:6%;  top:24%; background:#ff7a59; animation-delay:0s; }
.bdc-b2 { left:84%; top:30%; background:#ffc83d; animation-delay:1.4s; }
.bdc-b3 { left:2%;  top:58%; background:#3dbccc; animation-delay:2.6s; width:44px; height:54px; }
.bdc-b4 { left:88%; top:62%; background:#ff5d8f; animation-delay:.8s; width:44px; height:54px; }
@keyframes bdc-float-up {
  0%,100% { transform:translateY(0) rotate(-4deg); }
  50%     { transform:translateY(-22px) rotate(4deg); }
}

/* Confeti (insertado dinámicamente por JS) */
.bdc-confetti {
  position:absolute;
  width:9px; height:14px;
  z-index:3;
  top:-20px;
  border-radius:2px;
  animation:bdc-fall linear infinite;
  pointer-events:none;
}
@keyframes bdc-fall {
  0%   { transform:translateY(-20px) rotate(0deg); opacity:1; }
  100% { transform:translateY(700px) rotate(540deg); opacity:.9; }
}

/* Marca Hero superior */
/* (Marca .bdc-brand eliminada — el eyebrow/title ocupa la posición superior) */

/* Contenido central */
.bdc-content {
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:96px 22px 26px;
  gap:6px;
}

/* Top slot — eyebrow (no-today) o título (today). Posicionados arriba, mutuamente excluyentes. */
/* Eyebrow como texto grande con estilo — sin pill */
.bdc-eyebrow {
  position:absolute;
  top:54px; left:50%;
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  font-family:var(--display);
  font-style:italic;
  font-weight:800;
  font-size:clamp(20px, 3.2vw, 28px);
  letter-spacing:-.015em;
  text-transform:none;
  color:#066b78;
  text-shadow:0 2px 8px rgba(255,255,255,.6);
  line-height:1.05;
  opacity:0;
  transform:translateX(-50%) translateY(-10px);
  animation:bdc-top-drop .6s ease forwards .3s;
  white-space:nowrap;
}
@keyframes bdc-top-drop {
  to { opacity:1; transform:translateX(-50%) translateY(0); }
}
/* Torta integrada al eyebrow */
.bdc-eyebrow::before {
  content:'🎂';
  font-size:1.05em;
  animation:bdc-cake-wiggle 3.5s ease-in-out infinite;
  display:inline-block;
  filter:drop-shadow(0 2px 4px rgba(244,63,94,.2));
}
@keyframes bdc-cake-wiggle {
  0%,100% { transform:rotate(-8deg); }
  50%     { transform:rotate(8deg); }
}

.bdc-title {
  position:absolute;
  top:48px; left:50%;
  z-index:6;
  margin:0;
  font-size:clamp(28px, 4.6vw, 38px);
  line-height:1;
  font-weight:bold;
  color:#e94e7b;
  text-shadow:0 2px 8px rgba(255,255,255,.6);
  opacity:0;
  white-space:nowrap;
  transform:translateX(-50%) scale(.85);
  animation:bdc-top-pop .7s cubic-bezier(.34,1.4,.64,1) forwards .45s;
  display:none; /* Solo visible cuando .today */
}
@keyframes bdc-top-pop {
  to { opacity:1; transform:translateX(-50%) scale(1); }
}
.bdc-accent { color:#ffc83d; }

/* Cuando es HOY: ocultar eyebrow, mostrar título */
.bday-mega.today .bdc-eyebrow { display:none; }
.bday-mega.today .bdc-title { display:inline-block; }

/* Confetti: solo visible cuando es HOY */
.bday-mega:not(.today) .bdc-confetti { display:none; }

/* Foto del cumpleañero (sin torta encima — la torta vive en el eyebrow) */
.bdc-photo-wrap {
  position:relative;
  width:150px; height:150px;
  margin:6px 0 6px;
  opacity:0;
  animation:bdc-pop .7s cubic-bezier(.34,1.4,.64,1) forwards .55s;
}
.bdc-photo {
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  border:4px solid #fff;
  box-shadow:
    0 0 0 5px rgba(61,188,204,.35),
    0 0 28px rgba(61,188,204,.55),
    0 10px 24px rgba(0,0,0,.35);
}
/* Torta flotante encima de la foto — ocultada (ahora va en el eyebrow) */
.bdc-photo-cake { display:none; }

.bdc-name {
  margin:0;
  font-size:clamp(20px, 3.4vw, 26px);
  font-weight:bold;
  color:#06a3b6;
  line-height:1.15;
  opacity:0;
  animation:bdc-pop .7s cubic-bezier(.34,1.4,.64,1) forwards .68s;
}

.bdc-role {
  font-size:12px;
  color:#8a6b75;
  font-weight:500;
  letter-spacing:.3px;
  opacity:0;
  animation:bdc-drop-in .6s ease forwards .76s;
}

/* FECHA — caja protagónica sobria (misma estructura en light y dark) */
.bdc-date {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(6,163,182,.30);
  color:#066b78;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.2px;
  line-height:1.15;
  padding:12px 22px;
  border-radius:16px;
  margin:6px auto 8px;
  opacity:0;
  animation:bdc-drop-in .6s ease forwards .82s;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(6,163,182,.15);
}
.bdc-cake { font-size:20px; }

/* Días restantes — pill chico subordinado */
.bdc-countdown {
  display:flex;
  justify-content:center;
  opacity:0;
  animation:bdc-drop-in .6s ease forwards .95s;
  margin:6px 0 4px;
}
.bdc-cd-box {
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(6,163,182,.30);
  color:#066b78;
  padding:6px 14px;
  border-radius:999px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.bdc-cd-num {
  font-size:14px;
  font-weight:800;
  color:#066b78;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.bdc-cd-label {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:#06a3b6;
}

/* Dark mode: misma estructura, solo se adaptan los colores */
body[data-theme="dark"] .bdc-date {
  background:rgba(15,42,51,.65);
  border-color:rgba(6,163,182,.40);
  color:#5eead4;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:0 4px 14px rgba(0,0,0,.40);
}
body[data-theme="dark"] .bdc-cd-box {
  background:#fff;
  border-color:rgba(6,163,182,.50);
  color:#066b78;
  box-shadow:0 2px 8px rgba(0,0,0,.30);
}
body[data-theme="dark"] .bdc-cd-num  { color:#066b78; }
body[data-theme="dark"] .bdc-cd-label{ color:#06a3b6; }

/* CTA inferior */
.bdc-cta {
  margin-top:14px;
  display:inline-flex; align-items:center; gap:8px;
  background:#06a3b6;
  color:#fff;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.3px;
  padding:10px 20px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(6,163,182,.4);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  opacity:0;
  animation:bdc-drop-in .6s ease forwards 1.15s;
}
.bdc-cta:hover {
  transform:translateY(-2px);
  background:#3dbccc;
  box-shadow:0 10px 22px rgba(6,163,182,.55);
}
.bdc-cta i { width:14px; height:14px; }

/* Animaciones */
@keyframes bdc-drop-in {
  from { opacity:0; transform:translateY(-14px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes bdc-pop {
  from { opacity:0; transform:scale(.7); }
  to   { opacity:1; transform:scale(1); }
}

/* Variante "HOY" */
.bday-mega.today .bdc-eyebrow {
  background:#ff5d8f;
  color:#fff;
  animation:bdc-drop-in .6s ease forwards .3s, bdc-pop-pulse 1.5s ease-in-out infinite 1.5s;
}
@keyframes bdc-pop-pulse {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.06); }
}

/* Responsive */
@media (max-width:460px) {
  .bday-mega.bday-card,
  .bday-mega.hero-card { max-width:100%; }
  .bdc-date { font-size:18px; padding:10px 16px; gap:8px; }
  .bdc-cake { font-size:16px; }
  .bdc-content { padding:88px 18px 22px; }
  .hc-content { padding:74px 18px 22px; }
  .hc-photo-item { width:84px; height:84px; }
}

/* ══════════════════════════════════════════════════════════
   HÉROE DEL MES (compacto) — variante 4:5 del spotlight original
   Badge en esquina sup. izq., resto del texto al fondo,
   borde dorado animado alrededor de toda la tarjeta.
   ══════════════════════════════════════════════════════════ */
.spotlight-banner-v2.spotlight-compact {
  aspect-ratio:4 / 5;
  min-height:auto;
  width:100%;
  max-width:520px;
  margin:0 auto;
  border-radius:16px;
  isolation:isolate;
}

/* Borde dorado animado alrededor de toda la tarjeta */
.spotlight-banner-v2.spotlight-compact::after {
  content:'';
  position:absolute;
  inset:0;
  padding:3px;
  border-radius:inherit;
  background:linear-gradient(90deg,
    #ffc83d, #e6a817, #ffffff, #e6a817, #ffc83d, #e6a817, #ffffff, #ffc83d);
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:shimmerBar 10s linear infinite;
  pointer-events:none;
  z-index:10;
}

/* Ocultar el shimmer original de 3px arriba (lo reemplaza el borde completo) */
.spotlight-banner-v2.spotlight-compact .spotlight-shimmer { display:none; }

/* Título "Héroe del mes" como texto grande con estilo — sin pill */
.spotlight-banner-v2.spotlight-compact .spotlight-badge {
  position:absolute;
  top:20px; left:24px;
  z-index:4;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  backdrop-filter:none;
  font-family:var(--display);
  font-style:italic;
  font-weight:800;
  font-size:clamp(22px, 3.4vw, 30px);
  letter-spacing:-.015em;
  text-transform:none;
  color:#ffd76b;
  text-shadow:
    0 2px 4px rgba(0,0,0,.7),
    0 6px 16px rgba(0,0,0,.5),
    0 0 24px rgba(255,200,61,.35);
  display:inline-flex;
  align-items:center;
  gap:10px;
  line-height:1.05;
}
.spotlight-banner-v2.spotlight-compact .spotlight-badge .crown {
  font-size:1.05em;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

/* Foto del background con menos opacidad de overlay (más visible) */
.spotlight-banner-v2.spotlight-compact .spotlight-overlay {
  background:linear-gradient(180deg,
    rgba(2,21,40,.08) 0%,
    rgba(2,21,40,.18) 40%,
    rgba(2,21,40,.80) 75%,
    rgba(2,21,40,.95) 100%);
}
.spotlight-banner-v2.spotlight-compact:not(.has-image) .spotlight-overlay {
  background:
    radial-gradient(circle at 50% 70%, rgba(245,184,48,.18), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(2,21,40,.4) 60%, rgba(2,21,40,.7) 100%);
}

/* Content alineado al fondo */
.spotlight-banner-v2.spotlight-compact .spotlight-content-v2 {
  padding:28px 24px 24px;
  gap:10px;
  max-width:100%;
  justify-content:flex-end;
  /* El badge ya no ocupa espacio en el flow porque está absolute */
}

/* Tipografía compacta para el formato vertical (soporta hasta 3 personas bien) */
.spotlight-banner-v2.spotlight-compact .honoree-name-display {
  font-size:clamp(28px, 4.4vw, 38px);
}
.spotlight-banner-v2.spotlight-compact .spotlight-honorees[data-count="2"] .honoree-name-display {
  font-size:clamp(22px, 3.4vw, 28px);
}
.spotlight-banner-v2.spotlight-compact .spotlight-honorees[data-count="3"] .honoree-name-display {
  font-size:clamp(18px, 2.6vw, 22px);
}
.spotlight-banner-v2.spotlight-compact .honoree-role-display {
  font-size:10px;
  letter-spacing:1.5px;
}
.spotlight-banner-v2.spotlight-compact .spotlight-stars {
  font-size:14px;
  letter-spacing:2px;
}
.spotlight-banner-v2.spotlight-compact .spotlight-msg {
  font-size:12.5px;
  padding:10px 14px;
  max-width:100%;
  line-height:1.5;
}

/* ══════════════════════════════════════════
   POP-UP MENSAJE DEL DÍA
   ══════════════════════════════════════════ */
.daily-popup-overlay {
  position:fixed; inset:0;
  background:rgba(6,42,51,.75);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:dp-fade .3s ease;
}
@keyframes dp-fade {
  from { opacity:0; }
  to { opacity:1; }
}

.daily-popup {
  position:relative;
  max-width:500px;
  width:100%;
  background:linear-gradient(135deg, #fff 0%, #f0f4f8 100%);
  border-radius:24px;
  padding:40px 36px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  animation:dp-pop .5s cubic-bezier(.18,.89,.32,1.28);
  overflow:hidden;
  isolation:isolate;
}
[data-theme="dark"] .daily-popup {
  background:linear-gradient(135deg, #1a2536 0%, #0f1a2a 100%);
}
@keyframes dp-pop {
  from { opacity:0; transform:scale(.85) translateY(20px); }
  to { opacity:1; transform:scale(1) translateY(0); }
}

.dp-glow {
  position:absolute; top:-100px; left:-100px;
  width:300px; height:300px;
  background:radial-gradient(circle, rgba(6,163,182,.2) 0%, transparent 70%);
  pointer-events:none;
  animation:dp-glow-spin 20s linear infinite;
  z-index:-1;
}
@keyframes dp-glow-spin {
  to { transform:rotate(360deg) translate(20px, 20px); }
}

.dp-close {
  position:absolute; top:16px; right:16px;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--border);
  color:var(--muted);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.dp-close:hover {
  background:var(--rose); color:#fff; border-color:var(--rose);
  transform:rotate(90deg);
}
.dp-close i { width:18px; height:18px; }

.dp-kicker {
  font-family:var(--mono);
  font-size:10px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--cyan);
  text-align:center;
  margin-bottom:18px;
}

.dp-frase {
  font-family:var(--display); font-style:italic; font-weight:700;
  font-size:clamp(22px, 3vw, 30px);
  line-height:1.25;
  color:var(--text);
  text-align:center;
  margin-bottom:24px;
  letter-spacing:-.01em;
  position:relative;
  padding:0 16px;
}
.dp-frase::before, .dp-frase::after {
  content:'"';
  position:absolute;
  font-family:var(--display);
  font-size:60px;
  color:var(--cyan);
  opacity:.3;
  line-height:1;
}
.dp-frase::before { top:-16px; left:-6px; }
.dp-frase::after { bottom:-44px; right:-6px; }

.dp-author {
  display:flex; align-items:center; gap:12px;
  justify-content:center;
  padding:16px;
  background:var(--paper);
  border-radius:12px;
  margin-bottom:20px;
}
.dp-author-av {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800;
  font-size:16px;
  flex-shrink:0;
}
.dp-author-name {
  font-size:14px; font-weight:700; color:var(--text);
}
.dp-author-date {
  font-family:var(--mono);
  font-size:11px; color:var(--muted);
  margin-top:2px;
}

.dp-divider {
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
  margin:20px 0;
}

.dp-reactions-label {
  text-align:center;
  font-size:12.5px; color:var(--text-2);
  margin-bottom:14px;
  font-weight:500;
}

.dp-reactions {
  display:flex; gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.dp-react-btn {
  width:52px; height:52px;
  border-radius:14px;
  border:2px solid var(--border);
  background:var(--paper);
  font-size:26px;
  cursor:pointer;
  transition:all .2s cubic-bezier(.18,.89,.32,1.28);
  display:flex; align-items:center; justify-content:center;
}
.dp-react-btn:hover {
  transform:translateY(-4px) scale(1.15);
  border-color:var(--cyan);
  background:rgba(6,163,182,.08);
}
.dp-react-btn.selected {
  background:linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  border-color:var(--cyan);
  transform:scale(1.1);
  box-shadow:0 6px 16px rgba(6,163,182,.35);
}

.dp-reactions-summary {
  display:flex; flex-wrap:wrap; gap:6px;
  justify-content:center;
  min-height:24px;
}
.dp-react-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  color:var(--text-2);
}
.dp-react-chip .react-emoji { font-size:14px; }
.dp-react-chip .react-names {
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--muted);
}
.dp-react-chip.mine {
  background:rgba(6,163,182,.1);
  border-color:var(--cyan);
  color:var(--cyan-deep);
}

@media (max-width:500px) {
  .daily-popup { padding:32px 24px 24px; }
  .dp-react-btn { width:46px; height:46px; font-size:22px; }
}
/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Fondo global + Logo favicon
   ═══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   FONDO GLOBAL — Cielo Hero
   ══════════════════════════════════════════ */
body {
  position:relative;
}

body::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:url('../images/background.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  opacity:.4;
  z-index:-2;
  pointer-events:none;
}

body::after {
  content:'';
  position:fixed;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(240,244,248,.65) 0%,
    rgba(240,244,248,.85) 70%,
    rgba(240,244,248,.95) 100%
  );
  z-index:-1;
  pointer-events:none;
}

/* Ocultar fondo en modo oscuro (el gradiente oscuro se ve mejor puro) */
body[data-theme="dark"]::before {
  opacity:.08;
}
body[data-theme="dark"]::after {
  background:linear-gradient(
    180deg,
    rgba(15,26,42,.85) 0%,
    rgba(15,26,42,.95) 70%,
    rgba(15,26,42,1) 100%
  );
}

/* Dar un poco más de "peso" a las cards para que destaquen sobre el fondo */
.card-shell,
.policies-wrap,
.ob-section,
.carrier-card,
.guia-card,
.contact-card,
.team-card,
.admin-section {
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* ══════════════════════════════════════════
   LOGO HERO (favicon) — reemplaza estrella SVG
   ══════════════════════════════════════════ */

/* Topbar logo */
.logo-mark {
  width:40px !important;
  height:40px !important;
  border-radius:10px;
  background:#fff;
  padding:4px;
  box-shadow:0 4px 12px rgba(6,163,182,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.logo-mark img,
.logo-mark svg {
  width:100%;
  height:100%;
  object-fit:contain;
}
.logo-mark svg path { fill:var(--cyan); }

[data-theme="dark"] .logo-mark {
  background:rgba(255,255,255,.95);
}

/* Login mark (grande) */
.login-mark {
  width:80px !important;
  height:80px !important;
  border-radius:20px;
  background:linear-gradient(135deg, #fff, #f0f4f8);
  padding:10px;
  box-shadow:
    0 10px 30px rgba(6,163,182,.3),
    0 0 0 1px rgba(6,163,182,.15);
  margin:0 auto 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.login-mark img,
.login-mark svg {
  width:100%;
  height:100%;
  object-fit:contain;
  position:relative;
  z-index:1;
}
.login-mark::before {
  content:'';
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle, rgba(6,163,182,.2), transparent 60%);
  animation:logo-pulse 3s ease-in-out infinite;
  z-index:0;
}
@keyframes logo-pulse {
  0%, 100% { opacity:.5; transform:scale(1); }
  50% { opacity:1; transform:scale(1.1); }
}
/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Pop-up Perfil Heroico — Página Equipo
   ═══════════════════════════════════════════ */

.hero-profile-overlay {
  position:fixed; inset:0;
  background:rgba(6,42,51,.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:10000;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  animation:hp-fade .3s ease;
}
.hero-profile-overlay.open { display:flex; }

@keyframes hp-fade {
  from { opacity:0; }
  to { opacity:1; }
}

.hero-profile {
  position:relative;
  width:100%;
  max-width:720px;
  max-height:90vh;
  background:#ffffff;
  border-radius:24px;
  overflow:hidden;
  overflow-y:auto;
  border:1px solid rgba(6,163,182,.18);
  box-shadow:0 30px 80px rgba(6,42,51,.30), 0 6px 16px rgba(6,42,51,.08);
  animation:hp-rise .6s cubic-bezier(.18,.89,.32,1.28);
  isolation:isolate;
}

@keyframes hp-rise {
  from { opacity:0; transform:scale(.88) translateY(28px); }
  to { opacity:1; transform:scale(1) translateY(0); }
}

/* Rayos sutiles de fondo (solo cyan, sin dorado) */
.hp-rays {
  position:absolute; inset:0;
  background:conic-gradient(
    from 45deg at 50% 30%,
    transparent 0deg, rgba(6,163,182,.10) 20deg, transparent 40deg,
    transparent 80deg, rgba(6,163,182,.06) 100deg, transparent 120deg,
    transparent 160deg, rgba(6,163,182,.08) 180deg, transparent 200deg,
    transparent 240deg, rgba(6,163,182,.05) 260deg, transparent 280deg,
    transparent 360deg
  );
  animation:hp-rays-spin 30s linear infinite;
  pointer-events:none;
  z-index:0;
  opacity:.6;
}
@keyframes hp-rays-spin { to { transform:rotate(360deg); } }

.hp-close {
  position:absolute; top:16px; right:16px;
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(6,42,51,.06);
  border:1px solid rgba(6,42,51,.12);
  color:var(--text);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:10;
  transition:all .2s;
}
.hp-close:hover {
  background:#f43f5e;
  border-color:#f43f5e;
  color:#fff;
  transform:rotate(90deg) scale(1.08);
}
.hp-close i { width:20px; height:20px; }

.hp-edit {
  position:absolute; top:16px; right:64px;
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(6,163,182,.10);
  border:1px solid rgba(6,163,182,.30);
  color:#06a3b6;
  cursor:pointer;
  display:none;
  align-items:center; justify-content:center;
  z-index:10;
  transition:all .2s;
}
.hp-edit.visible { display:flex; }
.hp-edit:hover {
  background:#06a3b6; color:#fff;
  border-color:#06a3b6;
  transform:rotate(15deg) scale(1.1);
}
.hp-edit i { width:18px; height:18px; }

/* Header con foto — banner cyan tenue */
.hp-header {
  position:relative;
  z-index:1;
  padding:40px 40px 24px;
  text-align:center;
  background:linear-gradient(180deg, rgba(6,163,182,.10) 0%, transparent 100%);
}

.hp-avatar-wrap {
  position:relative;
  width:160px; height:160px;
  margin:0 auto 20px;
}

.hp-avatar-rings {
  position:absolute; inset:-12px;
  border-radius:50%;
}
.hp-avatar-rings::before {
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid rgba(6,163,182,.45);
  animation:hp-ring 3s ease-in-out infinite;
}
.hp-avatar-rings::after {
  content:'';
  position:absolute; inset:-8px;
  border-radius:50%;
  border:1px solid rgba(6,163,182,.25);
  animation:hp-ring 3s ease-in-out infinite .8s;
}
@keyframes hp-ring {
  0%, 100% { transform:scale(1); opacity:.65; }
  50% { transform:scale(1.05); opacity:1; }
}

.hp-avatar {
  position:relative; z-index:1;
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  border:4px solid #fff;
  box-shadow:0 10px 30px rgba(6,42,51,.20), 0 0 0 1px rgba(6,163,182,.15);
}

.hp-flag {
  position:absolute; bottom:6px; right:6px;
  width:40px; height:30px;
  border-radius:6px;
  overflow:hidden;
  border:2px solid #fff;
  box-shadow:0 4px 10px rgba(6,42,51,.30);
  z-index:2;
  background:#fff;
}
.hp-flag img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.hp-flag:empty { display:none; }

.hp-name {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:clamp(28px, 4vw, 40px);
  color:var(--text);
  line-height:1.1;
  letter-spacing:-.02em;
  margin-bottom:6px;
}

.hp-role {
  font-family:var(--mono);
  font-size:11px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  color:#06a3b6;
  margin-bottom:4px;
}

.hp-identity-label {
  font-family:var(--mono);
  font-size:9px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--muted);
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(6,42,51,.08);
  width:60%;
  margin-left:auto; margin-right:auto;
}

/* Body con campos */
.hp-body {
  position:relative;
  z-index:1;
  padding:24px 40px 36px;
  background:#ffffff;
}

.hp-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:20px;
}

.hp-field {
  background:var(--paper);
  border:1px solid rgba(6,163,182,.15);
  border-radius:14px;
  padding:14px 16px;
  transition:all .2s;
}
.hp-field:hover {
  background:rgba(6,163,182,.05);
  border-color:rgba(6,163,182,.4);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(6,163,182,.10);
}

.hp-field-label {
  font-family:var(--mono);
  font-size:9.5px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:#06a3b6;
  margin-bottom:6px;
  display:flex; align-items:center; gap:6px;
}
.hp-field-label i { width:12px; height:12px; }

.hp-field-value {
  font-size:14px;
  color:var(--text);
  font-weight:500;
  line-height:1.45;
}

.hp-field.full {
  grid-column:1 / -1;
}

/* Frase icónica — destacada con cyan */
.hp-quote {
  position:relative;
  padding:22px 28px;
  margin-bottom:20px;
  background:linear-gradient(135deg, rgba(6,163,182,.08), rgba(6,163,182,.03));
  border:1px solid rgba(6,163,182,.25);
  border-radius:16px;
  text-align:center;
}
.hp-quote::before, .hp-quote::after {
  content:'"';
  position:absolute;
  font-family:var(--display);
  font-size:54px;
  color:rgba(6,163,182,.40);
  line-height:1;
}
.hp-quote::before { top:0; left:14px; }
.hp-quote::after { bottom:-14px; right:14px; }

.hp-quote-label {
  font-family:var(--mono);
  font-size:9.5px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:#06a3b6;
  margin-bottom:8px;
}
.hp-quote-text {
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(15px, 2vw, 18px);
  color:var(--text);
  line-height:1.45;
}

/* Contactos — discretos al final */
.hp-contacts {
  padding:18px 22px;
  background:rgba(6,163,182,.04);
  border-radius:14px;
  border:1px solid rgba(6,163,182,.12);
}

.hp-contacts-title {
  font-family:var(--mono);
  font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.hp-contacts-title::after {
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(6,163,182,.25), transparent);
}

.hp-contact-rows {
  display:flex; flex-direction:column; gap:8px;
}
.hp-contact-row {
  display:flex; align-items:center; gap:10px;
  font-size:13px;
  color:var(--text-2, var(--text));
}
.hp-contact-row svg {
  width:14px; height:14px;
  color:#06a3b6;
  flex-shrink:0;
}
.hp-contact-row a {
  color:var(--text);
  text-decoration:none;
  border-bottom:1px dashed rgba(6,163,182,.35);
  transition:all .15s;
}
.hp-contact-row a:hover {
  color:#06a3b6;
  border-bottom-color:#06a3b6;
}
.hp-contact-row .mono {
  font-family:var(--mono); font-size:12px;
}

/* Empty state del buscador del equipo */
.team-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 24px;
}
.team-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px dashed rgba(6,163,182,.35);
  margin: 0 auto 18px;
  color: #06a3b6;
}
.team-empty-icon i { width: 30px; height: 30px; }
.team-empty-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
  margin-bottom: 6px;
}
.team-empty-desc {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.5;
}
.team-empty-desc strong { color: #06a3b6; }

/* Hover en cards del equipo para sugerir que son clickeables */
.team-card {
  cursor:pointer;
  transition:all .2s;
  position:relative;
}
.team-card:hover {
  transform:translateY(-4px) scale(1.02);
}
.team-card::after {
  content:'Ver perfil →';
  position:absolute;
  bottom:12px; left:50%;
  transform:translateX(-50%) translateY(10px);
  background:linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  color:#fff;
  padding:6px 14px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:10px; font-weight:700;
  letter-spacing:1.5px;
  opacity:0;
  transition:all .25s;
  pointer-events:none;
  box-shadow:0 6px 14px rgba(6,163,182,.4);
  white-space:nowrap;
  z-index:5;
}
.team-card:hover::after {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Responsive */
@media (max-width:640px) {
  .hp-header { padding:30px 24px 16px; }
  .hp-body { padding:10px 24px 30px; }
  .hp-fields { grid-template-columns:1fr; }
  .hp-avatar-wrap { width:140px; height:140px; }
}
/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Scrollbar Custom — Hero Hub
   ═══════════════════════════════════════════ */

/* ══ Chrome, Edge, Safari, Opera ══ */
::-webkit-scrollbar {
  width:12px;
  height:12px;
}

::-webkit-scrollbar-track {
  background:rgba(6,163,182,.05);
  border-radius:10px;
  margin:4px;
}

::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg, var(--cyan), var(--cyan-deep));
  border-radius:10px;
  border:2px solid transparent;
  background-clip:padding-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  transition:all .2s;
}

::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg, #19CDEB, var(--cyan));
  background-clip:padding-box;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25),
    0 0 8px rgba(6,163,182,.4);
}

::-webkit-scrollbar-thumb:active {
  background:linear-gradient(180deg, var(--cyan-deep), #062a33);
  background-clip:padding-box;
}

::-webkit-scrollbar-corner {
  background:transparent;
}

/* ══ Firefox ══ */
* {
  scrollbar-width:thin;
  scrollbar-color:var(--cyan) rgba(6,163,182,.05);
}

/* ══ Modo oscuro ══ */
body[data-theme="dark"] ::-webkit-scrollbar-track {
  background:rgba(255,255,255,.03);
}

body[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg, var(--cyan), var(--cyan-deep));
  background-clip:padding-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg, #19CDEB, var(--cyan));
  background-clip:padding-box;
}

body[data-theme="dark"] * {
  scrollbar-color:var(--cyan) rgba(255,255,255,.05);
}

/* ══ Scrollbars internos (modales, popups) ══ */
.modal::-webkit-scrollbar,
.hero-profile::-webkit-scrollbar {
  width:8px;
}

.modal::-webkit-scrollbar-track,
.hero-profile::-webkit-scrollbar-track {
  background:rgba(255,255,255,.05);
}

.modal::-webkit-scrollbar-thumb,
.hero-profile::-webkit-scrollbar-thumb {
  background:rgba(6,163,182,.5);
  border:none;
  background-clip:border-box;
}

.modal::-webkit-scrollbar-thumb:hover,
.hero-profile::-webkit-scrollbar-thumb:hover {
  background:var(--cyan);
}
/* ═══════════════════════════════════════════
   AGREGAR AL FINAL DE css/styles.css
   Tarjeta colectiva de cumpleaños
   ═══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   MODAL "PREPARAR FELICITACIÓN"
   ══════════════════════════════════════════ */
.bday-card-overlay {
  position:fixed; inset:0;
  background:rgba(6,42,51,.8);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:hp-fade .3s ease;
}

.bday-card-modal {
  position:relative;
  width:100%;
  max-width:620px;
  max-height:90vh;
  background:linear-gradient(135deg, #fef3c7 0%, #fff 40%, #ffe4e6 100%);
  border-radius:24px;
  overflow:hidden;
  overflow-y:auto;
  box-shadow:0 30px 80px rgba(244,63,94,.25), 0 0 0 1px rgba(245,184,48,.3) inset;
  animation:hp-rise .5s cubic-bezier(.18,.89,.32,1.28);
  isolation:isolate;
}

[data-theme="dark"] .bday-card-modal {
  background:linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #2d1b3d 100%);
  color:#fff;
}

.bc-rays {
  position:absolute; top:-100px; right:-100px;
  width:300px; height:300px;
  background:radial-gradient(circle, rgba(245,184,48,.3), transparent 70%);
  animation:hp-rays-spin 20s linear infinite;
  z-index:0;
  pointer-events:none;
}

.bc-close {
  position:absolute; top:14px; right:14px;
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.1);
  color:#666;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:10;
  transition:all .2s;
}
.bc-close:hover { background:#f43f5e; color:#fff; transform:rotate(90deg); }
.bc-close i { width:18px; height:18px; }

[data-theme="dark"] .bc-close {
  background:rgba(255,255,255,.15);
  color:#fff;
  border-color:rgba(255,255,255,.2);
}

/* Header */
.bc-header {
  position:relative;
  z-index:1;
  display:flex; gap:18px;
  padding:30px 30px 20px;
  align-items:center;
}

.bc-avatar-wrap {
  position:relative;
  width:90px; height:90px;
  flex-shrink:0;
}

.bc-avatar-ring {
  position:absolute; inset:-6px;
  border-radius:50%;
  background:conic-gradient(from 0deg, #f43f5e, #f5b830, #10b981, #06a3b6, #f43f5e);
  animation:rainbow-spin 8s linear infinite;
  mask:radial-gradient(circle, transparent 65%, #000 67%);
  -webkit-mask:radial-gradient(circle, transparent 65%, #000 67%);
}

.bc-avatar {
  position:relative; z-index:1;
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

.bc-title-block { flex:1; min-width:0; }

.bc-kicker {
  font-family:var(--mono);
  font-size:9.5px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:#d97706;
  margin-bottom:6px;
}

.bc-title {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:clamp(22px, 3vw, 28px);
  color:var(--text);
  line-height:1.1;
  letter-spacing:-.02em;
  margin-bottom:4px;
}

[data-theme="dark"] .bc-title { color:#fff; }

.bc-subtitle {
  font-size:12.5px;
  color:var(--text-2);
  font-weight:500;
}

.bc-divider {
  position:relative;
  z-index:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,184,48,.4), transparent);
  margin:0 30px;
}

/* Formulario */
.bc-form {
  position:relative;
  z-index:1;
  padding:20px 30px;
}

.bc-form-title {
  font-size:13px; font-weight:700;
  color:var(--text);
  margin-bottom:10px;
}

[data-theme="dark"] .bc-form-title { color:#fff; }

.bc-form textarea {
  width:100%;
  padding:12px 14px;
  border:1.5px solid rgba(245,184,48,.3);
  border-radius:12px;
  background:rgba(255,255,255,.8);
  font-family:inherit;
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  resize:vertical;
  min-height:80px;
  transition:border-color .15s;
}
.bc-form textarea:focus {
  outline:none;
  border-color:#f5b830;
  background:#fff;
}

[data-theme="dark"] .bc-form textarea {
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(245,184,48,.3);
}

.bc-form-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px;
  gap:10px;
  flex-wrap:wrap;
}

.bc-char {
  font-family:var(--mono);
  font-size:11px; color:var(--muted);
}
.bc-char.warn { color:#f43f5e; font-weight:700; }

.bc-form-btns {
  display:flex; gap:8px; flex-wrap:wrap;
}

/* Lista de mensajes */
.bc-messages-section {
  position:relative;
  z-index:1;
  padding:20px 30px 30px;
}

.bc-messages-title {
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; font-weight:700;
  color:var(--text);
  margin-bottom:14px;
}

[data-theme="dark"] .bc-messages-title { color:#fff; }

.bc-messages-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:22px;
  padding:0 8px;
  background:linear-gradient(135deg, #f5b830, #d97706);
  color:#fff;
  border-radius:999px;
  font-family:var(--mono);
  font-size:11px; font-weight:700;
}

.bc-messages-list {
  display:flex; flex-direction:column; gap:10px;
  max-height:320px;
  overflow-y:auto;
  padding-right:4px;
}

.bc-empty {
  text-align:center;
  padding:24px;
  color:var(--muted);
  font-size:13px;
}

.bc-msg {
  display:flex; gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(245,184,48,.15);
  border-radius:12px;
  transition:all .15s;
}
.bc-msg:hover {
  border-color:rgba(245,184,48,.3);
  transform:translateX(2px);
}
.bc-msg.mine {
  background:linear-gradient(135deg, rgba(6,163,182,.08), rgba(6,163,182,.02));
  border-color:rgba(6,163,182,.25);
}

[data-theme="dark"] .bc-msg {
  background:rgba(255,255,255,.05);
  color:#fff;
}
[data-theme="dark"] .bc-msg.mine {
  background:rgba(6,163,182,.15);
}

.bc-msg-photo, .bc-msg-initials {
  width:38px; height:38px;
  border-radius:50%;
  flex-shrink:0;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.bc-msg-initials {
  background:linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800;
  font-size:14px;
}

.bc-msg-body { flex:1; min-width:0; }

.bc-msg-header {
  display:flex; align-items:center; gap:8px;
  margin-bottom:4px;
  flex-wrap:wrap;
}

.bc-msg-author {
  font-size:13px; font-weight:700;
  color:var(--text);
}

[data-theme="dark"] .bc-msg-author { color:#fff; }

.bc-msg-mine-tag {
  font-family:var(--mono);
  font-size:9px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  background:var(--cyan);
  color:#fff;
  padding:2px 6px;
  border-radius:4px;
}

.bc-msg-date {
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--muted);
}

.bc-msg-text {
  font-size:13px;
  color:var(--text-2);
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}

[data-theme="dark"] .bc-msg-text { color:rgba(255,255,255,.8); }

/* ══════════════════════════════════════════
   POP-UP CELEBRACIÓN DEL DÍA
   ══════════════════════════════════════════ */
.bday-celebration-overlay {
  position:fixed; inset:0;
  background:radial-gradient(circle at center, rgba(244,63,94,.4) 0%, rgba(6,42,51,.9) 70%);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  z-index:10001;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:hp-fade .4s ease;
}

.bday-celebration-modal {
  position:relative;
  width:100%;
  max-width:620px;
  max-height:90vh;
  background:linear-gradient(135deg, #fff 0%, #fef3c7 50%, #ffe4e6 100%);
  border-radius:28px;
  overflow:hidden;
  overflow-y:auto;
  box-shadow:
    0 40px 100px rgba(244,63,94,.4),
    0 0 0 1px rgba(245,184,48,.3) inset,
    0 0 100px rgba(245,184,48,.2);
  animation:bcel-burst .7s cubic-bezier(.18,.89,.32,1.4);
  isolation:isolate;
}

@keyframes bcel-burst {
  0% { opacity:0; transform:scale(.5) rotate(-5deg); }
  60% { transform:scale(1.05) rotate(2deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}

.bcel-confetti {
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.bcel-confetti .cf {
  position:absolute;
  font-size:22px;
  animation:cf-rain 5s linear infinite;
  opacity:.85;
}
.bcel-confetti .cf0 { left:3%; animation-delay:0s; }
.bcel-confetti .cf1 { left:8%; animation-delay:.3s; font-size:26px; }
.bcel-confetti .cf2 { left:15%; animation-delay:.7s; font-size:18px; }
.bcel-confetti .cf3 { left:22%; animation-delay:1s; }
.bcel-confetti .cf4 { left:28%; animation-delay:1.4s; font-size:24px; }
.bcel-confetti .cf5 { left:35%; animation-delay:.5s; }
.bcel-confetti .cf6 { left:42%; animation-delay:1.8s; font-size:20px; }
.bcel-confetti .cf7 { left:48%; animation-delay:.2s; font-size:28px; }
.bcel-confetti .cf8 { left:55%; animation-delay:1.2s; }
.bcel-confetti .cf9 { left:62%; animation-delay:.8s; font-size:22px; }
.bcel-confetti .cf10 { left:68%; animation-delay:1.6s; }
.bcel-confetti .cf11 { left:75%; animation-delay:.4s; font-size:24px; }
.bcel-confetti .cf12 { left:82%; animation-delay:2s; }
.bcel-confetti .cf13 { left:88%; animation-delay:.9s; font-size:20px; }
.bcel-confetti .cf14 { left:94%; animation-delay:1.3s; }
.bcel-confetti .cf15 { left:10%; animation-delay:2.5s; font-size:18px; }
.bcel-confetti .cf16 { left:25%; animation-delay:3s; }
.bcel-confetti .cf17 { left:40%; animation-delay:2.7s; font-size:26px; }
.bcel-confetti .cf18 { left:58%; animation-delay:2.2s; }
.bcel-confetti .cf19 { left:72%; animation-delay:3.2s; font-size:22px; }
.bcel-confetti .cf20 { left:85%; animation-delay:2.8s; }
.bcel-confetti .cf21 { left:12%; animation-delay:3.5s; }
.bcel-confetti .cf22 { left:45%; animation-delay:3.8s; font-size:24px; }
.bcel-confetti .cf23 { left:78%; animation-delay:3.3s; }
.bcel-confetti .cf24 { left:5%; animation-delay:4.2s; font-size:18px; }

@keyframes cf-rain {
  0% { top:-40px; transform:rotate(0deg); opacity:0; }
  10% { opacity:.85; }
  90% { opacity:.7; }
  100% { top:110%; transform:rotate(720deg); opacity:0; }
}

.bcel-close {
  position:absolute; top:14px; right:14px;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(0,0,0,.1);
  border:1px solid rgba(0,0,0,.15);
  color:#666;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:10;
  transition:all .2s;
}
.bcel-close:hover { background:#f43f5e; color:#fff; transform:rotate(90deg); }
.bcel-close i { width:18px; height:18px; }

.bcel-header {
  position:relative;
  z-index:1;
  text-align:center;
  padding:36px 30px 20px;
}

.bcel-cake {
  font-size:64px;
  line-height:1;
  margin-bottom:10px;
  animation:cake-bounce 2s ease-in-out infinite;
  filter:drop-shadow(0 6px 14px rgba(244,63,94,.3));
}
@keyframes cake-bounce {
  0%, 100% { transform:translateY(0) rotate(-3deg); }
  50% { transform:translateY(-8px) rotate(3deg); }
}

.bcel-title {
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:clamp(28px, 4.5vw, 40px);
  background:linear-gradient(135deg, #f43f5e, #f5b830);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.1;
  letter-spacing:-.02em;
  margin-bottom:8px;
  text-shadow:0 4px 20px rgba(244,63,94,.2);
}

.bcel-subtitle {
  font-size:14px;
  color:var(--text-2);
  font-weight:500;
}

.bcel-messages-count {
  position:relative;
  z-index:1;
  display:inline-block;
  margin:0 auto 16px;
  padding:6px 16px;
  background:linear-gradient(135deg, #f5b830, #d97706);
  color:#fff;
  border-radius:999px;
  font-family:var(--mono);
  font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  box-shadow:0 4px 12px rgba(245,184,48,.35);
  width:fit-content;
  margin-left:50%;
  transform:translateX(-50%);
}

.bcel-messages {
  position:relative;
  z-index:1;
  padding:10px 24px 20px;
  display:flex; flex-direction:column; gap:10px;
  max-height:360px;
  overflow-y:auto;
}

.bcel-msg {
  display:flex; gap:12px;
  padding:14px 16px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(245,184,48,.25);
  border-radius:14px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(244,63,94,.08);
  transition:all .2s;
}
.bcel-msg:hover {
  transform:translateX(3px);
  border-color:rgba(245,184,48,.5);
  box-shadow:0 6px 18px rgba(244,63,94,.15);
}

.bcel-msg-photo, .bcel-msg-initials {
  width:42px; height:42px;
  border-radius:50%;
  flex-shrink:0;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.bcel-msg-initials {
  background:linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800;
  font-size:15px;
}

.bcel-msg-body { flex:1; min-width:0; }

.bcel-msg-author {
  font-size:13px; font-weight:700;
  color:var(--text);
  margin-bottom:4px;
}

.bcel-msg-text {
  font-size:13.5px;
  color:var(--text-2);
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
}

.bcel-footer {
  position:relative;
  z-index:1;
  padding:0 30px 30px;
  text-align:center;
}

.bcel-big-btn {
  padding:14px 32px !important;
  font-size:14px !important;
  background:linear-gradient(135deg, #f43f5e, #f5b830) !important;
  border:none !important;
  box-shadow:0 10px 24px rgba(244,63,94,.4) !important;
  transition:all .2s;
}
.bcel-big-btn:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(244,63,94,.55) !important;
}

@media (max-width:600px) {
  .bc-header { flex-direction:column; text-align:center; }
  .bc-form, .bc-messages-section { padding:16px 20px; }
  .bcel-header { padding:28px 20px 16px; }
  .bcel-messages { padding:10px 18px 16px; }
}
/* ═══════════════════════════════════════════
   Banner Onboarding — Bienvenida épica
   ═══════════════════════════════════════════ */

.ob-welcome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 28px 32px 28px 28px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff8dc 0%, #fefce8 45%, #ffffff 100%);
  border: 2px solid #06a3b6;
  box-shadow:
    0 4px 12px rgba(6,163,182,.12),
    0 16px 40px rgba(6,42,51,.10),
    inset 0 1px 0 rgba(255,255,255,.7);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.ob-welcome:hover {
  transform: translateY(-3px);
  box-shadow:
    0 6px 16px rgba(6,163,182,.18),
    0 22px 50px rgba(6,42,51,.16),
    inset 0 1px 0 rgba(255,255,255,.8);
}

/* ── Capa 1: Bursts radiales (calor visual estilo cómic) ── */
.ob-w-rays {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(245,184,48,.18) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 50%, rgba(6,163,182,.20) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* ── Capa 2: Halftone dots (clásico de cómic) ── */
.ob-w-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(6,163,182,.22) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 1;
  opacity: .65;
  mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
}

/* ── Capa 3: Glow cyan animado ── */
.ob-w-glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 55%;
  height: 180%;
  background: radial-gradient(ellipse, rgba(6,163,182,.22) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
  animation: ob-w-glow-pulse 5s ease-in-out infinite;
}
@keyframes ob-w-glow-pulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

/* ── Capa 4: Sparks (partículas decorativas) ── */
.ob-w-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.ob-w-spark {
  position: absolute;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  color: rgba(6,163,182,.70);
  text-shadow: 0 0 12px rgba(6,163,182,.55);
  animation: ob-w-spark-float 4s ease-in-out infinite;
}
.ob-w-spark.s1 { top: 18%; left: 32%; animation-delay: 0s;   font-size: 12px; }
.ob-w-spark.s2 { top: 65%; left: 42%; animation-delay: 1.2s; font-size: 16px; color: rgba(245,184,48,.85); text-shadow: 0 0 12px rgba(245,184,48,.6); }
.ob-w-spark.s3 { top: 28%; left: 68%; animation-delay: 2.4s; font-size: 13px; }
.ob-w-spark.s4 { top: 72%; left: 78%; animation-delay: 3.1s; font-size: 11px; color: rgba(245,184,48,.75); text-shadow: 0 0 12px rgba(245,184,48,.5); }
@keyframes ob-w-spark-float {
  0%, 100% { transform: translateY(0) scale(1);    opacity: .55; }
  50%      { transform: translateY(-6px) scale(1.15); opacity: 1; }
}

/* ── Sello con logo Hero (insignia) ── */
.ob-w-seal {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  z-index: 3;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.ob-welcome:hover .ob-w-seal {
  transform: rotate(-6deg) scale(1.05);
}

/* Anillo cyan giratorio */
.ob-w-seal-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      #06a3b6 0deg, #4dd0e1 60deg, #06a3b6 120deg,
      #00838f 180deg, #06a3b6 240deg, #4dd0e1 300deg, #06a3b6 360deg
    );
  animation: ob-w-ring-spin 8s linear infinite;
  filter: drop-shadow(0 0 12px rgba(6,163,182,.55));
}
@keyframes ob-w-ring-spin {
  to { transform: rotate(360deg); }
}

.ob-w-seal-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff 0%, #e0f7fa 100%);
  border: 3px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow:
    inset 0 2px 6px rgba(6,163,182,.15),
    inset 0 -2px 4px rgba(255,255,255,.7);
}
.ob-w-seal-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(6,163,182,.25));
}

/* Estrella en la esquina superior del sello (acento dorado) */
.ob-w-seal-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #f5b830, #d4a017);
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: #062a33;
  z-index: 3;
  transform: rotate(15deg);
  box-shadow: 0 2px 6px rgba(6,42,51,.20);
  transition: transform .3s ease;
}
.ob-welcome:hover .ob-w-seal-badge {
  transform: rotate(-15deg) scale(1.15);
}

/* ── Contenido central ── */
.ob-w-content {
  position: relative;
  z-index: 3;
  flex: 1;
  min-width: 0;
  color: #062a33;
}

.ob-w-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #06a3b6, #0891a2);
  border: 1px solid #06a3b6;
  color: #ffffff;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(6,163,182,.25);
}
.ob-w-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255,255,255,.9);
  animation: ob-w-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes ob-w-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .5;  transform: scale(.85); }
}

.ob-w-title {
  font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 28px);
  color: #06a3b6;
  line-height: 1.1;
  letter-spacing: -.5px;
  margin-bottom: 8px;
  /* Outline blanco grueso (estilo cómic) + drop shadow cyan suave */
  text-shadow:
    -2px -2px 0 #fff,  2px -2px 0 #fff,
    -2px  2px 0 #fff,  2px  2px 0 #fff,
    -2px  0   0 #fff,  2px  0   0 #fff,
     0   -2px 0 #fff,  0    2px 0 #fff,
     0    4px 12px rgba(6,163,182,.30);
  paint-order: stroke fill;
}

.ob-w-sub {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px;
  color: rgba(6,42,51,.75);
  line-height: 1.45;
  max-width: 540px;
}

/* ── Botón CTA dorado ── */
.ob-w-cta {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f5b830 0%, #e8a920 100%);
  color: #062a33;
  font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .3px;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.20);
  box-shadow:
    0 4px 12px rgba(245,184,48,.35),
    0 10px 28px rgba(245,184,48,.25),
    inset 0 1px 0 rgba(255,255,255,.40);
  transition: all .3s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.ob-w-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.40) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.ob-w-cta i {
  width: 18px;
  height: 18px;
  transition: transform .25s ease;
}
.ob-welcome:hover .ob-w-cta {
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(245,184,48,.45),
    0 14px 36px rgba(245,184,48,.32),
    inset 0 1px 0 rgba(255,255,255,.50);
  background: linear-gradient(135deg, #fde68a 0%, #f5b830 100%);
}
.ob-welcome:hover .ob-w-cta::before {
  transform: translateX(100%);
}
.ob-welcome:hover .ob-w-cta i {
  transform: translateX(4px);
}

/* ── Dark mode (variante navy del estilo comic) ── */
[data-theme="dark"] .ob-welcome {
  background: linear-gradient(135deg, #0a1a2e 0%, #112744 50%, #0d2440 100%);
  border-color: #4dd0e1;
}
[data-theme="dark"] .ob-w-content { color: #e0f7fa; }
[data-theme="dark"] .ob-w-sub { color: rgba(224, 247, 250, .80); }
[data-theme="dark"] .ob-w-title {
  color: #4dd0e1;
  text-shadow:
    -2px -2px 0 #0a1a2e,  2px -2px 0 #0a1a2e,
    -2px  2px 0 #0a1a2e,  2px  2px 0 #0a1a2e,
    -2px  0   0 #0a1a2e,  2px  0   0 #0a1a2e,
     0   -2px 0 #0a1a2e,  0    2px 0 #0a1a2e,
     0    4px 12px rgba(77,208,225,.40);
}
[data-theme="dark"] .ob-w-grid {
  background-image: radial-gradient(circle, rgba(77,208,225,.20) 1.5px, transparent 1.6px);
  opacity: .55;
}

/* ── Responsive ── */
@media (max-width:820px) {
  .ob-welcome {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 24px 22px;
  }
  .ob-w-seal { width: 80px; height: 80px; }
  .ob-w-seal-logo { width: 50px; height: 50px; }
  .ob-w-sub { max-width: 100%; }
  .ob-w-cta {
    width: 100%;
    justify-content: center;
  }
  .ob-w-glow { display: none; }
}

@media (max-width:480px) {
  .ob-w-title { font-size: 20px; }
  .ob-w-sub { font-size: 13px; }
}


/* ═══════════════════════════════════════════
   ACTIVAR MISIÓN — Animación de activación
   Flash dorado + onda radial + shake + zoom
   ═══════════════════════════════════════════ */

/* Overlay del flash a pantalla completa */
.mission-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 9998;
  --flash-x: 50%;
  --flash-y: 50%;
}

/* Héroe que aparece al frente y vuela — se anima desde JS durante "Activar Misión".
   Anclado a (50%, 50%) del viewport; GSAP combina xPercent/yPercent -50 con x/y
   en píxeles para mover el centro visual a cualquier punto. */
.hero-flight {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 320px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  z-index: 10001;
  user-select: none;
  filter: drop-shadow(0 0 30px rgba(77, 208, 225, 0.9))
          drop-shadow(0 0 60px rgba(6, 163, 182, 0.55));
  will-change: transform, opacity, filter;
  transform-origin: center center;
}
@media (max-width: 700px) {
  .hero-flight { width: 220px; }
}


/* Capa 1: onda radial que sale del CTA */
.mission-flash-burst {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--flash-x) var(--flash-y),
    rgba(220, 248, 255, 0.95) 0%,
    rgba(150, 230, 245, 0.85) 18%,
    rgba(77, 208, 225, 0.55)  38%,
    rgba(6, 163, 182, 0.15)   60%,
    transparent 78%
  );
  transform: scale(0);
  transform-origin: var(--flash-x) var(--flash-y);
}

/* Capa 2: flash plano amarillo/blanco que satura toda la pantalla */
.mission-flash-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 45%, #ffffff 100%);
  opacity: 0;
  mix-blend-mode: screen;
}

/* Disparo de la animación */
body.mission-activating .mission-flash {
  opacity: 1;
}
body.mission-activating .mission-flash-burst {
  animation: missionBurst 880ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.mission-activating .mission-flash-layer {
  animation: missionLayer 880ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Shake sutil de toda la página */
body.mission-activating #dashboard {
  animation: missionShake 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 80ms both;
}

/* Banner: zoom + glow intenso */
body.mission-activating .ob-welcome {
  animation: missionBannerBurst 880ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}

/* Sello/logo: pulso heroico */
body.mission-activating .ob-w-seal {
  animation: missionSealPulse 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
body.mission-activating .ob-w-seal-ring {
  animation: missionRingExpand 700ms ease-out forwards;
}

/* CTA: press + expansión brillante */
body.mission-activating .ob-w-cta {
  animation: missionCtaPress 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  box-shadow:
    0 0 0 4px rgba(255, 215, 0, 0.4),
    0 0 40px 12px rgba(255, 200, 50, 0.7),
    0 0 80px 24px rgba(255, 180, 0, 0.5);
}

/* Sparks aceleradas */
body.mission-activating .ob-w-spark {
  animation-duration: 0.35s !important;
  filter: drop-shadow(0 0 8px #ffd700);
}

/* ── Keyframes ── */
@keyframes missionBurst {
  0%   { transform: scale(0);   opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: scale(2.5); opacity: 0.95; }
  100% { transform: scale(4);   opacity: 0; }
}

@keyframes missionLayer {
  0%   { opacity: 0; }
  25%  { opacity: 0.35; }
  55%  { opacity: 0.75; }
  80%  { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes missionShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%      { transform: translate3d(-4px, 2px, 0); }
  25%      { transform: translate3d(5px, -3px, 0); }
  40%      { transform: translate3d(-6px, 1px, 0); }
  55%      { transform: translate3d(4px, -2px, 0); }
  70%      { transform: translate3d(-3px, 3px, 0); }
  85%      { transform: translate3d(2px, -1px, 0); }
}

@keyframes missionBannerBurst {
  0%   { transform: scale(1);    filter: brightness(1); }
  25%  { transform: scale(1.015); filter: brightness(1.15) saturate(1.2); }
  60%  { transform: scale(1.035); filter: brightness(1.4)  saturate(1.4); }
  100% { transform: scale(1.05);  filter: brightness(1.8)  saturate(1.5); }
}

@keyframes missionSealPulse {
  0%   { transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
  40%  { transform: scale(1.18) rotate(-6deg); filter: drop-shadow(0 0 24px rgba(255,215,0,0.95)); }
  100% { transform: scale(1.12) rotate(0deg);  filter: drop-shadow(0 0 36px rgba(255,215,0,1)); }
}

@keyframes missionRingExpand {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes missionCtaPress {
  0%   { transform: scale(1); }
  15%  { transform: scale(0.94); }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1.06); }
}

/* Respeto a prefers-reduced-motion: animación abreviada */
@media (prefers-reduced-motion: reduce) {
  body.mission-activating #dashboard,
  body.mission-activating .ob-welcome,
  body.mission-activating .ob-w-seal,
  body.mission-activating .ob-w-seal-ring,
  body.mission-activating .ob-w-cta {
    animation: none !important;
  }
  body.mission-activating .mission-flash-burst,
  body.mission-activating .mission-flash-layer {
    animation-duration: 300ms !important;
  }
}


/* ═══════════════════════════════════════════
   HUB CARDS — Equipo / Directorio / Guías
   Estilo Comic / Superhero
   ═══════════════════════════════════════════ */

.hub-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.hub-card {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 2px solid var(--border, #e2e8f0);
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              box-shadow .35s cubic-bezier(.22,1,.36,1),
              border-color .25s;
  isolation: isolate;
}

.hub-card:hover {
  transform: translateY(-6px) rotate(-.4deg);
  box-shadow: 0 20px 40px rgba(0,0,0,.12),
              8px 8px 0 0 rgba(0,0,0,.08);
}

/* ── Halftone pattern (puntos cómic) ── */
.hc-halftone {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,.10) 1.4px, transparent 1.4px);
  background-size: 12px 12px;
  background-position: 0 0;
  opacity: .35;
  pointer-events: none;
  z-index: 1;
}

/* ── Stripe diagonal (banda de color por sección) ── */
.hc-stripe {
  position: absolute;
  top: -40px;
  right: -60px;
  width: 200px;
  height: 100px;
  transform: rotate(-12deg);
  z-index: 2;
  opacity: .85;
}

.hc-team .hc-stripe {
  background: linear-gradient(90deg, #06a3b6 0%, #058fa0 100%);
  box-shadow: 0 4px 14px rgba(6,163,182,.30);
}
.hc-directory .hc-stripe {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 14px rgba(245,158,11,.30);
}
.hc-guides .hc-stripe {
  background: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 4px 14px rgba(139,92,246,.30);
}
.hc-portales .hc-stripe {
  background: linear-gradient(90deg, #0e7490 0%, #155e75 100%);
  box-shadow: 0 4px 14px rgba(14,116,144,.30);
}
.hc-trainings .hc-stripe {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 14px rgba(16,185,129,.30);
}

.hub-card:hover .hc-stripe {
  transform: rotate(-12deg) translateY(-4px) scale(1.05);
  transition: transform .4s ease;
}

/* ── Contenido ── */
.hc-content {
  position: relative;
  z-index: 3;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
}

/* ── Ícono con burst ── */
.hc-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
}

.hc-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1a1a1a;
  background: #fff;
  position: relative;
  z-index: 2;
  transition: transform .25s ease;
}

.hub-card:hover .hc-icon {
  transform: rotate(-6deg) scale(1.05);
}

.hc-icon i {
  width: 28px;
  height: 28px;
}

.hc-team .hc-icon i { color: #06a3b6; }
.hc-directory .hc-icon i { color: #d97706; }
.hc-guides .hc-icon i { color: #7c3aed; }
.hc-portales .hc-icon i { color: #0e7490; }
.hc-trainings .hc-icon i { color: #059669; }

/* Burst (estrellita esquina del ícono) */
.hc-burst {
  position: absolute;
  top: -8px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: #fbbf24;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: #1a1a1a;
  z-index: 3;
  transform: rotate(15deg);
  box-shadow: 2px 2px 0 0 rgba(0,0,0,.20);
  transition: transform .3s ease;
}

.hub-card:hover .hc-burst {
  transform: rotate(-15deg) scale(1.15);
}

/* ── Textos ── */
.hc-label {
  font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--muted, #64748b);
  margin-top: 4px;
}

.hc-team .hc-label { color: #058fa0; }
.hc-directory .hc-label { color: #d97706; }
.hc-guides .hc-label { color: #7c3aed; }
.hc-portales .hc-label { color: #0e7490; }
.hc-trainings .hc-label { color: #059669; }

.hc-title {
  font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  color: #1a1a1a;
  letter-spacing: -.3px;
}

.hc-desc {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #64748b);
  flex: 1;
}

/* ── Stack de avatares (card Equipo) ── */
.hc-team-stack {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-height: 38px;
  flex-wrap: wrap;
}

.hc-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #1a1a1a, 0 2px 4px rgba(0,0,0,.10);
  margin-left: -10px;
  background: #f1f5f9;
  object-fit: cover;
  transition: transform .2s ease;
}

.hc-av:first-child { margin-left: 0; }

.hub-card:hover .hc-av {
  transform: translateY(-2px);
}

.hc-av-more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 11px;
  color: #1a1a1a;
  background: #fbbf24;
}

.hc-team-count {
  margin-left: 8px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  color: #058fa0;
}

.hc-loading {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 12px;
  color: var(--muted, #94a3b8);
  font-style: italic;
}

/* ── Tags (card Directorio) ── */
.hc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.hc-tag {
  display: inline-block;
  padding: 4px 10px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(245,158,11,.12);
  color: #92400e;
  border: 1px solid rgba(245,158,11,.30);
}

/* ── Feature pill (card Guías) ── */
.hc-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(139,92,246,.10);
  border: 1px solid rgba(139,92,246,.30);
  border-radius: 999px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #6d28d9;
  margin-top: 8px;
  align-self: flex-start;
}

.hc-feature i {
  width: 14px;
  height: 14px;
}

/* ── CTA ── */
.hc-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  margin-top: 10px;
  border-radius: 10px;
  font-family: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: #1a1a1a;
  align-self: flex-start;
  border: 2px solid #1a1a1a;
  transition: all .25s ease;
}

.hc-cta i {
  width: 16px;
  height: 16px;
  transition: transform .25s ease;
}

.hub-card:hover .hc-cta {
  transform: translateX(2px);
}

.hub-card:hover .hc-cta i {
  transform: translateX(4px);
}

/* Color del CTA por sección */
.hc-team:hover .hc-cta { background: #06a3b6; border-color: #06a3b6; }
.hc-directory:hover .hc-cta { background: #d97706; border-color: #d97706; }
.hc-guides:hover .hc-cta { background: #7c3aed; border-color: #7c3aed; }
.hc-portales:hover .hc-cta { background: #0e7490; border-color: #0e7490; }
.hc-trainings:hover .hc-cta { background: #059669; border-color: #059669; }

/* ── Dark mode ── */
[data-theme="dark"] .hub-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .hc-icon { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .hc-title { color: #f1f5f9; }
[data-theme="dark"] .hc-desc { color: #94a3b8; }
[data-theme="dark"] .hc-halftone {
  background-image: radial-gradient(circle, rgba(255,255,255,.10) 1.4px, transparent 1.4px);
}
/* CTA: en lugar del blanco invertido, lo dejamos translúcido sobre dark
   con texto y borde en el color acento de cada card. Los hovers ya
   definidos (background sólido del color) siguen funcionando y aquí
   forzamos texto blanco en hover para mantener contraste. */
[data-theme="dark"] .hc-cta {
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-color: var(--border-2);
}
[data-theme="dark"] .hc-team .hc-cta      { color: #5eead4; border-color: rgba(6,163,182,.50); }
[data-theme="dark"] .hc-directory .hc-cta { color: #fcd34d; border-color: rgba(245,158,11,.50); }
[data-theme="dark"] .hc-guides .hc-cta    { color: #c4b5fd; border-color: rgba(139,92,246,.50); }
[data-theme="dark"] .hc-portales .hc-cta  { color: #67e8f9; border-color: rgba(14,116,144,.55); }
[data-theme="dark"] .hc-trainings .hc-cta { color: #6ee7b7; border-color: rgba(16,185,129,.50); }
[data-theme="dark"] .hc-team:hover .hc-cta,
[data-theme="dark"] .hc-directory:hover .hc-cta,
[data-theme="dark"] .hc-guides:hover .hc-cta,
[data-theme="dark"] .hc-portales:hover .hc-cta,
[data-theme="dark"] .hc-trainings:hover .hc-cta { color: #fff; }

/* Pills (hc-tag, hc-feature): el texto en light era ámbar/violeta oscuro,
   ilegibles sobre card oscuro. Subimos a tonos claros del mismo matiz. */
[data-theme="dark"] .hc-tag {
  background: rgba(245,158,11,.16);
  color: #fcd34d;
  border-color: rgba(245,158,11,.40);
}
[data-theme="dark"] .hc-feature {
  background: rgba(139,92,246,.14);
  color: #c4b5fd;
  border-color: rgba(139,92,246,.40);
}

[data-theme="dark"] .hc-av { box-shadow: 0 0 0 2px #475569, 0 2px 4px rgba(0,0,0,.30); }

/* ── Responsive ── */
@media (max-width: 980px) {
  .hub-cards { grid-template-columns: 1fr 1fr; }
  .hc-guides { grid-column: span 2; }
  .hc-content { min-height: auto; }
}

@media (max-width: 640px) {
  .hub-cards { grid-template-columns: 1fr; }
  .hc-guides { grid-column: auto; }
  .hc-stripe { width: 140px; height: 70px; right: -40px; }
}


/* ═══════════════════════════════════════════
   VISIBILIDAD POR ROL — body.role-agente
   ═══════════════════════════════════════════
   El agente solo ve un subconjunto del dashboard:
   - Banner superior (sin botón Gather)
   - Tarjetas hub: Equipo + Entrenamientos (2 cards)
   - Arsenal del Héroe (accesos directos)
   Portales sigue accesible vía topbar, pero no como tarjeta del cuartel.
   Todo lo demás se oculta (asistencia, onboarding, misiones, celebraciones, mensajes). */

/* Tarjetas exclusivas del agente: ocultas por defecto, visibles solo para "agente" */
.hc-portales,
.hc-trainings { display: none; }
body.role-agente .hc-trainings { display: block; }

/* Ocultos para el agente */
body.role-agente .hero-cover-actions,
body.role-agente #sec-asistencia,
body.role-agente #ob-welcome,
body.role-agente .hub-card.hc-portales,
body.role-agente .hub-card.hc-directory,
body.role-agente .hub-card.hc-guides,
body.role-agente #sec-misiones,
body.role-agente #sec-celebraciones,
body.role-agente #sec-mensajes,
body.role-agente .connector:has(+ #sec-asistencia),
body.role-agente .connector:has(+ #ob-welcome),
body.role-agente .connector:has(+ #sec-misiones),
body.role-agente .connector:has(+ #sec-celebraciones),
body.role-agente .connector:has(+ #sec-mensajes) {
  display: none !important;
}

/* Hub-cards del agente: 2 columnas (Equipo + Entrenamientos) en una sola fila.
   Solo colapsa a 1 columna en móvil. */
body.role-agente .hub-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
/* Override del media query general (.hub-cards a 980px usa 2 cols con hc-guides
   span 2) — para el agente mantenemos 2 cols hasta más abajo */
@media (max-width: 980px) {
  body.role-agente .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.role-agente .hc-content { padding: 22px 16px 18px; min-height: auto; }
}
@media (max-width: 640px) {
  body.role-agente .hub-cards { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════
   FAB — Botón flotante de Soporte IT
   Siempre visible en la esquina inferior derecha.
   ══════════════════════════════════════════════════════════ */
.fab-support {
  position:fixed;
  bottom:24px; right:24px;
  z-index:900;
  display:inline-flex; align-items:center; gap:10px;
  height:56px;
  padding:0 18px 0 16px;
  border-radius:28px;
  background:linear-gradient(135deg, #06a3b6 0%, #066b78 100%);
  color:#fff;
  text-decoration:none;
  font-weight:700; font-size:14px;
  letter-spacing:.3px;
  box-shadow:0 8px 24px rgba(6,163,182,.4), 0 2px 6px rgba(0,0,0,.15);
  transition:transform .2s ease, box-shadow .2s ease, padding .2s ease;
}
.fab-support:hover {
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 12px 30px rgba(6,163,182,.55), 0 4px 8px rgba(0,0,0,.2);
}
.fab-support i {
  width:22px; height:22px;
  flex-shrink:0;
}
.fab-support-label {
  white-space:nowrap;
}

/* En móvil: colapsar a botón circular, mostrar solo el ícono */
@media (max-width: 640px) {
  .fab-support {
    padding:0;
    width:56px;
    justify-content:center;
    bottom:16px; right:16px;
  }
  .fab-support-label { display:none; }
}