:root{
  --bg:#0b1020;
  --card:#0f1730;
  --muted:#9aa7c7;
  --text:#e7ecff;
  --border:rgba(255,255,255,.08);
  --ok:#1f9d55;
  --err:#e11d48;
  --warn:#f59e0b;
  --primary:#6d28d9;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:linear-gradient(180deg,#060a16,#0b1020);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px 16px 92px}

/* Topbar */
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.topbar h1{font-size:22px;margin:0}
.topbar p{margin:6px 0 0;color:var(--muted);font-size:13px}
.topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px;background:rgba(255,255,255,.03)}
.chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:12px;border:1px solid var(--border)}
.chip.draft{background:rgba(109,40,217,.12);color:#cdb5ff}
.chip.active{background:rgba(31,157,85,.12);color:#b7f7d3}
.chip.closed{background:rgba(245,158,11,.12);color:#ffe2b3}
.chip.used{background:rgba(255,255,255,.10);color:#d5ddff}
.chip.cancelled{background:rgba(225,29,72,.14);color:#ffd0db}

.row{display:flex;gap:12px;align-items:stretch}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;flex:1;box-shadow:var(--shadow)}
.kpi .n{font-size:34px;font-weight:800;margin:10px 0 6px}

hr{border:none;border-top:1px solid var(--border);margin:14px 0}

label{display:block;color:var(--muted);font-size:12px;margin:0 0 6px}
input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);outline:none}
textarea{min-height:86px;resize:vertical}

button{border:1px solid var(--border);background:var(--primary);color:#fff;padding:12px 14px;border-radius:12px;font-weight:700;cursor:pointer}
button.secondary{background:rgba(255,255,255,.06)}
button.danger{background:rgba(225,29,72,.18);border-color:rgba(225,29,72,.35)}
button:disabled{opacity:.55;cursor:not-allowed}

/* Tabs / botones de navegación internos (Dashboard) */
.tabbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.tabbar a{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:#fff;font-weight:800;font-size:13px}
.tabbar a .ico{font-size:16px;line-height:1}
.tabbar a:active{transform:translateY(1px)}

.notice{border:1px solid var(--border);padding:10px 12px;border-radius:12px;display:none;margin-top:10px}
.notice.ok{border-color:rgba(31,157,85,.35);background:rgba(31,157,85,.12)}
.notice.err{border-color:rgba(225,29,72,.35);background:rgba(225,29,72,.12)}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;font-size:13px}
.table th{color:var(--muted);font-weight:700}

/* Responsive cards list */
.list{display:flex;flex-direction:column;gap:10px}
.item{border:1px solid var(--border);border-radius:14px;padding:12px;background:rgba(255,255,255,.03)}
.item-title{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.item-title h3{margin:0;font-size:15px}
.item-meta{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.35}
.item-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* Bottom nav (mobile) */
.bottomnav{position:fixed;left:0;right:0;bottom:0;background:rgba(8,12,24,.92);backdrop-filter: blur(10px);border-top:1px solid var(--border);padding:8px 10px;display:flex;gap:8px;justify-content:space-around;z-index:50}
.bottomnav a{flex:1;text-align:center;padding:10px 8px;border-radius:14px;border:1px solid transparent;color:var(--muted);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.bottomnav .nav-ico{font-size:18px;line-height:1}
.bottomnav .nav-txt{font-size:12px;line-height:1}
.bottomnav a.active{border-color:var(--border);background:rgba(255,255,255,.04);color:#fff}

/* Toasts */
.toast-wrap{position:fixed;left:0;right:0;bottom:78px;display:flex;flex-direction:column;gap:8px;align-items:center;z-index:200;padding:0 12px;pointer-events:none}
.toast{max-width:520px;width:100%;border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:rgba(12,18,38,.95);box-shadow:var(--shadow);color:#fff;font-size:14px;pointer-events:auto}
.toast.ok{border-color:rgba(41, 201, 95, .35)}
.toast.err{border-color:rgba(255, 77, 77, .35)}
.toast.out{opacity:0;transform:translateY(6px);transition:opacity .2s ease, transform .2s ease}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;z-index:80}
.modal{width:100%;max-width:720px;background:var(--card);border:1px solid var(--border);border-radius:18px 18px 0 0;padding:14px;box-shadow:var(--shadow)}
.modal h2{margin:0 0 10px;font-size:16px}
.modal .footer{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

/* Modal (overlay) usado por openModal() en app.js */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter: blur(10px);display:flex;align-items:flex-end;justify-content:center;z-index:180;padding:14px}
.modal-overlay .modal{width:100%;max-width:560px;border-radius:18px 18px 0 0;padding:16px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.modal-head h2{margin:0;font-size:16px}
.modal-head .icon{width:42px;height:42px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:#fff;font-size:22px;line-height:1}
.modal-body{padding:6px 0}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.modal-actions .danger{background:#ff4d4d;border-color:transparent}

@media (min-width: 860px){
  .modal-overlay{align-items:center}
  .modal-overlay .modal{border-radius:18px}
}

@media (min-width: 860px){
  .container{padding-bottom:24px}
  .modal-backdrop{align-items:center}
  .modal{border-radius:18px}
  .bottomnav{display:none}
}

@media (max-width: 860px){
  .row{flex-direction:column}
  .topbar{flex-direction:column;align-items:stretch}
  .topbar-actions{justify-content:space-between}
}

/* ---------------- Dashboard v2 (shell + sidebar) ---------------- */

.shell{min-height:100vh;display:flex}

.sidebar{width:260px;flex:0 0 260px;background:rgba(255,255,255,.03);border-right:1px solid var(--border);padding:18px 14px;position:sticky;top:0;height:100vh}
.side-profile{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;border-bottom:1px solid var(--border)}
.avatar{width:54px;height:54px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));box-shadow:var(--shadow)}
.side-name{font-weight:800}
.side-sub{font-size:12px}

.side-nav{display:flex;flex-direction:column;gap:6px;padding:14px 8px}
.side-nav a{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:14px;color:#fff;border:1px solid transparent;background:transparent}
.side-nav a .ico{width:26px;text-align:center}
.side-nav a:hover{background:rgba(255,255,255,.04);border-color:var(--border)}
.side-nav a.active{background:rgba(255,255,255,.05);border-color:var(--border)}

.side-footer{padding:10px 8px;margin-top:auto}
.side-footer button{width:100%}

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

.topbar2{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);background:rgba(8,12,24,.55);backdrop-filter: blur(10px);position:sticky;top:0;z-index:40}
.top-left{display:flex;align-items:center;gap:12px;min-width:0}
.top-title{font-size:18px;font-weight:900;line-height:1.1}
.top-sub{font-size:13px}
.top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.iconbtn{width:42px;height:42px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:#fff;font-size:18px;display:inline-flex;align-items:center;justify-content:center}
.iconbtn:hover{background:rgba(255,255,255,.06)}

.select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.04);border:1px solid var(--border);color:#fff;border-radius:14px;padding:10px 12px;min-width:240px}

.dash-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:14px;margin-top:6px}
.kpi2 .kpi-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.kpi-label{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.2px}
.kpi-value{font-size:28px;font-weight:900;margin-top:6px}
.kpi-ico{width:44px;height:44px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:20px}

.ring{--p:0;width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:conic-gradient(rgba(41, 201, 95, .9) calc(var(--p) * 1%), rgba(255,255,255,.06) 0);position:relative}
.ring::after{content:"";position:absolute;inset:6px;border-radius:999px;background:rgba(8,12,24,.92);border:1px solid rgba(255,255,255,.04)}

.dash-split{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.h2{margin:0;font-size:16px}

.event-summary{padding:12px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.02);margin-top:12px}
.event-title{font-size:18px;font-weight:900}
.event-meta{margin-top:6px;line-height:1.35}

.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.quick-actions .btnlink, .quick-actions button{flex:1;min-width:160px}

.mini-bars{height:140px;display:flex;align-items:flex-end;gap:8px;padding:12px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.02);margin-top:12px}
.mini-bars .bar{flex:1;border-radius:10px;background:rgba(41, 201, 95, .35);border:1px solid rgba(41, 201, 95, .25)}

/* Responsive behavior */
@media (max-width: 980px){
  .dash-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .dash-split{grid-template-columns:1fr}
  .select{min-width:200px}
}

@media (max-width: 860px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-105%);transition:transform .2s ease;z-index:60;background:rgba(8,12,24,.98)}
  .shell.side-open .sidebar{transform:translateX(0)}
  .sidebar::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);left:260px;display:none}
  .shell.side-open .sidebar::after{display:block}
  .topbar2{padding:12px 12px}
  .top-right{gap:8px}
  .select{min-width:160px}
}

@media (min-width: 861px){
  #btnMenu{display:none}
}


/* === Iter3 fixes: selects + modal/drawer === */
.select{font-size:16px; line-height:1.2;}
select option{color:#111; background:#fff;}
/* prevent oversized select in tight areas */
.topbar2 .select{min-width:0; max-width:360px;}
@media (max-width: 640px){
  .topbar2 .top-right{flex-wrap:wrap; gap:8px;}
  .topbar2 .top-right .select{width:100%;}
}
/* modal selects should fit */
.modal .select{min-width:0; width:100%;}
/* contextual event bar */
.eventbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:14px 0 10px 0;flex-wrap:wrap}
.eventbar .eventbar-left{display:flex;gap:10px;align-items:center;flex:1;min-width:260px}
.eventbar label{color:var(--muted);font-size:12px}
.eventbar .select{width:100%}
.eventbar .eventbar-actions{display:flex;gap:10px;align-items:center}
@media (max-width: 640px){
  .eventbar{gap:8px}
  .eventbar .eventbar-left{min-width:100%}
  .eventbar .eventbar-actions{width:100%}
  .eventbar .eventbar-actions .secondary,
  .eventbar .eventbar-actions .primary{flex:1}
}


/* === Iter4: Próximos eventos === */
.upcoming-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.upcoming-item{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);padding:12px;border-radius:14px}
.upcoming-item .title{font-weight:800}
.upcoming-item .meta{font-size:12px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.badge.active{border-color:rgba(31,157,85,.35);background:rgba(31,157,85,.12)}
.badge.draft{border-color:rgba(99,102,241,.35);background:rgba(99,102,241,.12)}
.badge.final{border-color:rgba(225,29,72,.35);background:rgba(225,29,72,.12)}