@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); *{box-sizing:border-box;margin:0;padding:0} a{text-decoration:none} /* ══════════════════════════════════════════════════════ VARIABLES DE SEDE — Playa = azul marino / Belén = azul cielo La clase de sede se inyecta en desde el sidebar. ══════════════════════════════════════════════════════ */ :root{ --s-500:#3b82f6; --s-600:#2563eb; --s-700:#1d4ed8; --s-light:#dbeafe; --s-text:#1d4ed8; --s-bg:#eff6ff; --s-topbg:#f5f8ff; --s-topborder:#2563eb; --s-rgb:37,99,235; --s-grad:linear-gradient(135deg,#3b82f6,#2563eb); --s-mark-bg:rgba(255,255,255,.18); --s-btn-active-bg:#fff; --s-btn-active-text:#1d4ed8; --s-btn-active-border:#fff; --s-btn-active-shadow:rgba(0,0,0,.25); } /* Belén = azul cielo */ html.belen{ --s-500:#38bdf8; --s-600:#0ea5e9; --s-700:#0284c7; --s-light:#e0f2fe; --s-text:#0369a1; --s-bg:#f0f9ff; --s-topbg:#f5fbff; --s-topborder:#0ea5e9; --s-rgb:14,165,233; --s-grad:linear-gradient(135deg,#38bdf8,#0ea5e9); --s-mark-bg:rgba(255,255,255,.25); --s-btn-active-bg:#fff; --s-btn-active-text:#0284c7; --s-btn-active-border:#fff; --s-btn-active-shadow:rgba(0,0,0,.2); } html.redes{ --s-500:#14b8a6; --s-600:#0d9488; --s-700:#0f766e; --s-light:#ccfbf1; --s-text:#0f766e; --s-bg:#f0fdfa; --s-topbg:#f3fdfb; --s-topborder:#0d9488; --s-rgb:13,148,136; --s-grad:linear-gradient(135deg,#14b8a6,#0d9488); --s-mark-bg:rgba(255,255,255,.25); --s-btn-active-bg:#fff; --s-btn-active-text:#0f766e; --s-btn-active-border:#fff; --s-btn-active-shadow:rgba(0,0,0,.2); } body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--s-bg); color:#1a1d23; display:flex; min-height:100vh; } /* ── Sidebar ─────────────────────────────────────────── */ .ol-side{width:248px;flex-shrink:0;height:100vh;position:sticky;top:0;z-index:60;display:flex;flex-direction:column;overflow:hidden;transition:background .3s} .ol-side.playa{background:#2563eb} .ol-side.belen{background:#0369a1} .ol-side.redes{background:#0d9488} .ol-side-brand{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.15);display:flex;align-items:center;gap:12px} .ol-side-mark{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;flex-shrink:0;background:var(--s-mark-bg)} .ol-side-name{color:#fff;font-size:15px;font-weight:700;letter-spacing:-.3px} .ol-side-tag{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1.2px;font-weight:600;margin-top:1px} .ol-side-sede{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.15)} .ol-sede-lbl{font-size:9px;font-weight:700;letter-spacing:1.5px;color:rgba(255,255,255,.45);text-transform:uppercase;margin-bottom:8px} .ol-sede-btns{display:flex;gap:6px} .ol-sede-btn{flex:1;padding:9px 4px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;color:rgba(255,255,255,.5);font-size:11px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:all .2s;line-height:1.3} .ol-sede-btn:hover:not(.active){background:rgba(255,255,255,.1);color:rgba(255,255,255,.85)} .ol-sede-btn.active{font-weight:800;background:var(--s-btn-active-bg);color:var(--s-btn-active-text);border-color:var(--s-btn-active-border);box-shadow:0 2px 10px var(--s-btn-active-shadow)} .ol-sede-btn.active::before{content:'● ';font-size:6px;vertical-align:middle;margin-right:1px;opacity:.75} .ol-side-section{padding:18px 20px 8px;font-size:9px;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:1.4px} .ol-side-menu{flex:1;padding:0 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto} .ol-side-menu::-webkit-scrollbar{width:0} .ol-side-link{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:10px;font-size:13px;font-weight:500;color:rgba(255,255,255,.6);transition:all .2s;border:1px solid transparent} .ol-side-link:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.95)} .ol-side-link.active{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.3);font-weight:600} .ol-link-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:inherit} .ol-link-icon svg{width:17px;height:17px;display:block} .ol-link-label{flex:1;line-height:1} .ol-side-bottom{padding:14px 12px;border-top:1px solid rgba(255,255,255,.15)} .ol-logout{color:rgba(255,255,255,.4)} .ol-logout:hover{background:rgba(127,29,29,.25);color:#fca5a5} .ol-logout:hover .ol-link-icon{color:#fca5a5} .ol-side-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55} .ol-side-overlay.open{display:block} /* ── Main content area ──────────────────────────────── */ .ol-main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh} /* ── Topbar ─────────────────────────────────────────── */ .ol-topbar{display:flex;align-items:center;gap:14px;padding:0 28px;height:60px;background:var(--s-topbg);border-bottom:1px solid rgba(var(--s-rgb),.15);border-top:5px solid var(--s-topborder);position:sticky;top:0;z-index:40;box-shadow:0 1px 10px rgba(var(--s-rgb),.08)} .ol-burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:#0f2141;padding:4px 8px} .ol-topbar-title{font-size:14px;font-weight:700;color:var(--s-700);flex:1} .ol-topbar-right{display:flex;align-items:center;gap:12px} /* Sede badges */ .ol-sede-badge{padding:4px 14px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.3px;background:var(--s-light);color:var(--s-text)} .ol-wa-pill{display:flex;align-items:center;gap:7px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:100px;padding:5px 12px} .ol-wa-pill span{font-size:11px;color:#6b7280} .ol-wa-pill strong{font-size:11px} .ol-clock{font-size:12px;color:#9ca3af;font-variant-numeric:tabular-nums} .ol-user-badge{width:34px;height:34px;border-radius:50%;background:var(--s-grad);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0} .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .dot-green{background:#22c55e;animation:glow 2s infinite} .dot-red{background:#ef4444} @keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)}50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}} /* ══════════════════════════════════════════════════════ OVERRIDE de clases de páginas — via html.belen / html.playa Más específico que los