/* =========================================================
   IA para todo el Mundo — hoja de estilos compartida
   Paleta y componentes tomados de los mockups aprobados
   ========================================================= */

:root{
  --bg:#F6FAF7; --surface:#FFFFFF; --surface-alt:#EAF4EC;
  --sidebar:#F8FCF9; --sidebar-line:#E6EFE8; --sidebar-ink:#2B362F; --sidebar-ink-dim:#8A968C;
  --ink:#182019; --ink-soft:#5B665C; --ink-faint:#93A092; --line:#DEEBE1;
  --accent:#4CB584; --accent-ink:#1F6B49; --accent-soft:#E3F6EC; --accent-hover:#379468;
  --live:#FF9B86; --live-soft:#FFEDE8; --gold:#F3C97A; --gold-soft:#FBF0DC;
  --violet:#8FC7F0; --violet-soft:#E8F3FC;
  --slate:#4F7568; --slate-soft:#E5F1EC;
  --red:#B84E3F; --red-glow:rgba(184,78,63,.18);
  --radius-s:8px; --radius-m:14px; --radius-l:20px; --radius-xl:22px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  background:var(--bg); color:var(--ink);
}
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; margin:0; }
a{ color:var(--accent-ink); text-decoration:none; }
a:hover{ color:var(--accent-hover); }
button{ font-family:inherit; cursor:pointer; }
img,svg{ display:block; max-width:100%; }
.hidden{ display:none !important; }

/* ---------- layout shell ---------- */
.app-shell{ display:flex; min-height:100vh; width:100%; }
.app-col{ flex:1; display:flex; flex-direction:column; min-width:0; }
.app-content{ display:flex; gap:20px; padding:20px 24px 44px; align-items:flex-start; flex-wrap:wrap; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); }

/* ---------- sidebar ---------- */
.rail{
  position:relative; width:264px; flex:none; background:var(--sidebar);
  border-right:1px solid var(--sidebar-line); border-top:5px solid var(--red); border-left:4px solid var(--red);
  display:flex; flex-direction:column; padding:22px 14px 90px; box-sizing:border-box;
}
.rail .logo{ display:flex; align-items:center; gap:10px; padding:4px 10px 22px; }
.logo-word{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; line-height:1.18; color:var(--ink); }
.logo-word b{ color:var(--accent-ink); font-weight:700; }
.group-label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sidebar-ink-dim); padding:14px 12px 6px; font-weight:600; }
.nav-item{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; font-size:13.5px; color:var(--sidebar-ink); font-weight:500; cursor:pointer; border:none; background:none; width:100%; text-align:left; }
.nav-item svg{ width:18px; height:18px; flex:none; stroke:var(--sidebar-ink-dim); }
.nav-item.active{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
.nav-item.active svg{ stroke:var(--accent-ink); }
.nav-item .badge-new{ margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.03em; color:#33400C; background-color:#D7F28C; padding:2px 6px; border-radius:5px; }
.nav-item .dot-new{ margin-left:auto; width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; box-shadow:0 0 0 3px var(--red-glow); }
.nav-sub{ padding-left:30px; }
.nav-sub .nav-item{ font-size:13px; padding:7px 12px; }
.rail-divider{ height:1px; background:var(--sidebar-line); margin:10px 4px; }
.help-fab{ position:absolute; left:20px; bottom:20px; width:46px; height:46px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px -8px rgba(76,181,132,.5); border:none; }
.help-fab svg{ width:22px; height:22px; stroke:var(--accent-ink); }
.help-fab-dot{ position:absolute; top:-2px; right:-2px; width:13px; height:13px; border-radius:50%; background:var(--red); border:2px solid var(--sidebar); }

/* ---------- topbar ---------- */
.topbar{ height:72px; width:100%; background:var(--surface); border-top:5px solid var(--red); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:20px; padding:0 28px; box-sizing:border-box; }
.tb-search{ flex:1; max-width:460px; display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 14px; color:var(--ink-faint); font-size:13.5px; }
.tb-search input{ border:none; background:none; outline:none; font-size:13.5px; color:var(--ink); width:100%; font-family:inherit; }
.tb-search input::placeholder{ color:var(--ink-faint); }
.tb-search svg{ width:16px; height:16px; stroke:var(--ink-faint); flex:none; }
.tb-spacer{ flex:1; }
.tb-pts{ display:flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent-ink); padding:7px 12px; border-radius:20px; font-size:13px; font-weight:600; white-space:nowrap; }
.tb-pts svg{ width:15px; height:15px; }
.tb-bell{ position:relative; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:none; background:none; }
.tb-bell svg{ width:19px; height:19px; stroke:var(--ink-soft); }
.tb-dot{ position:absolute; top:5px; right:6px; width:17px; height:17px; border-radius:50%; background:var(--red); color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); box-shadow:0 0 0 4px var(--red-glow); }
.tb-profile{ display:flex; align-items:center; gap:10px; padding:5px 6px; border-radius:12px; border:none; background:none; cursor:pointer; }
.tb-avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#8FE0B8,#3FA377); color:#fff; font-family:'Space Grotesk',sans-serif; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.tb-name{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.2; text-align:left; }
.tb-level{ font-size:11px; color:var(--ink-faint); line-height:1.2; }
.tb-chev{ width:14px; height:14px; stroke:var(--ink-faint); }
.tb-guest-btn{ background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:9px; border:none; }
.tb-guest-btn.ghost{ background:none; color:var(--ink); border:1px solid var(--line); margin-right:2px; }

/* profile dropdown */
.tb-dropdown{ position:relative; }
.tb-menu{ position:absolute; right:0; top:calc(100% + 8px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:0 14px 30px -10px rgba(20,30,25,.18); min-width:190px; padding:6px; z-index:40; }
.tb-menu button{ display:block; width:100%; text-align:left; background:none; border:none; padding:9px 10px; border-radius:8px; font-size:13px; color:var(--ink); }
.tb-menu button:hover{ background:var(--surface-alt); }

/* ---------- kicker / headers ---------- */
.kicker{ display:block; width:52px; height:5px; background:var(--red); margin-bottom:12px; border-radius:2px; }

/* ---------- toast ---------- */
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 20px; border-radius:12px; font-size:13px; font-weight:600; box-shadow:0 14px 30px -8px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:100; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

/* ---------- auth modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,25,20,.45); display:flex; align-items:center; justify-content:center; z-index:80; }
.modal-box{ background:var(--surface); border-radius:var(--radius-l); padding:28px; width:380px; max-width:92vw; box-shadow:0 30px 60px -15px rgba(0,0,0,.35); }
.modal-box h2{ font-size:19px; margin-bottom:6px; }
.modal-box .modal-sub{ font-size:12.5px; color:var(--ink-soft); margin-bottom:18px; }
.modal-field{ margin-bottom:12px; }
.modal-field label{ display:block; font-size:12px; color:var(--ink-soft); margin-bottom:5px; }
.modal-field input{ width:100%; border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:13.5px; font-family:inherit; color:var(--ink); }
.modal-field input:focus{ outline:2px solid var(--accent-soft); border-color:var(--accent); }
.modal-error{ font-size:12px; color:#C23B24; margin:-4px 0 10px; display:none; }
.modal-error.show{ display:block; }
.modal-submit{ display:block; width:100%; text-align:center; background:var(--ink); color:#fff; font-weight:700; font-size:13.5px; padding:12px; border-radius:10px; border:none; margin-top:4px; }
.modal-switch{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:14px; }
.modal-switch button{ background:none; border:none; color:var(--accent-ink); font-weight:600; font-size:12.5px; padding:0; }
.modal-close{ position:absolute; top:16px; right:16px; background:none; border:none; color:var(--ink-faint); font-size:18px; line-height:1; }
.modal-box{ position:relative; }

.google-btn-slot{ display:flex; justify-content:center; min-height:20px; margin-bottom:14px; }
.google-note{ font-size:11.5px; color:var(--ink-faint); text-align:center; line-height:1.4; padding:8px 4px; }
.modal-divider{ display:flex; align-items:center; gap:10px; margin:2px 0 16px; font-size:11.5px; color:var(--ink-faint); }
.modal-divider::before, .modal-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---------- generic empty state ---------- */
.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
.empty-state h3{ font-size:16px; margin-bottom:6px; color:var(--ink); }
.empty-state p{ font-size:13px; }

@media (max-width: 980px){
  .rail{ display:none; }
  .app-content{ padding:16px; }
}