:root{ --c:#2563eb; --bg:#f1f5f9; --card:#fff; --line:#e2e8f0; --txt:#0f172a; --mut:#64748b;
        --side:#14532d; --side-2:#166534; --side-active:#16a34a; --side-txt:#d1fae5; --side-line:#1f5b38; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--txt);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:14px;
      display:flex; min-height:100vh; }

/* ---------- Sidebar (verde) ---------- */
.mb-sidebar{ width:240px; flex-shrink:0; background:var(--side); color:var(--side-txt);
             display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.mb-brand{ padding:1.1rem 1.25rem; font-weight:700; color:#fff; font-size:1.05rem; border-bottom:1px solid var(--side-line); }
.mb-nav{ flex:1; padding:.6rem; overflow:auto; }
.mb-nav a{ display:flex; align-items:center; gap:.65rem; padding:.6rem .8rem; border-radius:8px;
           color:var(--side-txt); text-decoration:none; font-weight:500; margin-bottom:.15rem; }
.mb-nav a:hover{ background:var(--side-2); color:#fff; }
.mb-nav a.active{ background:var(--side-active); color:#fff; }
.mb-nav a .ic{ opacity:.95; }
.mb-nav .sep{ color:#7dd3a8; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; padding:.9rem .8rem .3rem; }
.mb-side-foot{ padding:.8rem 1rem; border-top:1px solid var(--side-line); font-size:.8rem; color:#a7d8bd; }

/* ---------- Main ---------- */
.mb-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mb-topbar{ background:var(--card); border-bottom:1px solid var(--line); padding:.8rem 1.25rem;
            display:flex; align-items:center; gap:.8rem; position:sticky; top:0; z-index:5; }
.mb-topbar h1{ font-size:1.1rem; margin:0; flex:1; }
.mb-burger{ display:none; background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--txt); }
.mb-user{ font-size:.85rem; color:var(--mut); display:flex; align-items:center; gap:.5rem; }
.mb-content{ padding:1.25rem; width:100%; max-width:1240px; margin:0 auto; }
.mb-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:8; }

@media (max-width:900px){
  .mb-sidebar{ position:fixed; z-index:9; transform:translateX(-100%); transition:transform .2s ease; }
  .mb-sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.4); }
  .mb-burger{ display:block; }
  .mb-overlay.open{ display:block; }
}

/* ---------- Componentes ---------- */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.chips{ display:flex; gap:.6rem; flex-wrap:wrap; }
.chip{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.5rem .9rem; font-weight:600; }
.chip small{ color:var(--mut); font-weight:400; display:block; font-size:.75rem; }
.chip{ border-left-width:4px; border-left-color:var(--accent,#e2e8f0); }
.chip .num{ font-size:1.25rem; font-weight:700; line-height:1.1; }
.chip.clk{ cursor:pointer; transition:box-shadow .12s ease, transform .05s ease; }
.chip.clk:hover{ box-shadow:0 4px 12px rgba(0,0,0,.10); transform:translateY(-1px); }
.chip.clk.sel{ box-shadow:0 0 0 2px var(--accent,#94a3b8) inset; background:#f8fafc; }
.chip.k-slate{ --accent:#64748b; } .chip.k-slate .num{ color:#475569; }
.chip.k-green{ --accent:#16a34a; } .chip.k-green .num{ color:#16a34a; }
.chip.k-blue{  --accent:#2563eb; } .chip.k-blue .num{ color:#2563eb; }
.chip.k-amber{ --accent:#d97706; } .chip.k-amber .num{ color:#b45309; }
.chip.k-red{   --accent:#f87171; } .chip.k-red .num{ color:#dc2626; }
.chip.k-yellow{ --accent:#eab308; } .chip.k-yellow .num{ color:#a16207; }
.chips-eq .chip{ flex:1 1 140px; min-width:140px; }
.filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.filters input, .filters select{ padding:.55rem .7rem; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:14px; }
.filters input{ flex:1; min-width:180px; }
.tablewrap{ background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:auto; }
table{ width:100%; border-collapse:collapse; min-width:900px; }
th, td{ text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; }
th{ background:#f8fafc; color:var(--mut); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:#f8fafc; }
.ev{ font-weight:600; }
.tag{ display:inline-block; background:#eef2ff; color:#3730a3; border-radius:6px; padding:.1rem .45rem; font-size:.75rem; margin:.1rem .15rem .1rem 0; white-space:nowrap; }
.tag.con{ background:#ecfeff; color:#155e75; }
.badge{ display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; white-space:nowrap; }
.b-pendiente{ background:#fee2e2; color:#b91c1c; } .b-en_proceso{ background:#fef9c3; color:#854d0e; } .b-completado{ background:#dcfce7; color:#166534; }
.b-aux{ background:#e2e8f0; color:#475569; }
.mut{ color:var(--mut); } .empty{ padding:2rem; text-align:center; color:var(--mut); }
.placeholder{ background:var(--card); border:1px dashed var(--line); border-radius:12px; padding:3rem; text-align:center; color:var(--mut); font-size:1rem; }
.btn{ border:0; border-radius:8px; padding:.5rem .9rem; font-weight:600; cursor:pointer; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.btn-p{ background:var(--c); color:#fff; } .btn-s{ background:#e2e8f0; color:#0f172a; }
.btn-d{ background:#fee2e2; color:#b91c1c; } .btn-link{ background:none; color:#2563eb; padding:.3rem; }
.iconbtn{ border:1px solid var(--line); background:#fff; border-radius:7px; padding:.35rem .5rem; cursor:pointer; display:inline-flex; align-items:center; color:#475569; }
.iconbtn:hover{ background:#f1f5f9; color:#0f172a; }
.act{ display:flex; gap:.35rem; }
.ic{ flex-shrink:0; }
/* modal */
.ov{ position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; place-items:center; padding:1rem; z-index:20; }
.ov.open{ display:grid; }
.modal{ background:#fff; border-radius:14px; width:640px; max-width:100%; max-height:90vh; overflow:auto; }
.modal h2{ margin:0; padding:1rem 1.25rem; border-bottom:1px solid var(--line); font-size:1.1rem; }
.modal .body{ padding:1.25rem; }
.modal .foot{ padding:1rem 1.25rem; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:.6rem; }
.field{ margin-bottom:1rem; } .field label{ display:block; font-size:.82rem; color:#475569; margin-bottom:.3rem; }
.field input, .field select, .field textarea{ width:100%; padding:.55rem .7rem; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.checks{ display:flex; flex-wrap:wrap; gap:.4rem; border:1px solid var(--line); border-radius:8px; padding:.6rem; }
.checks label{ display:inline-flex; align-items:center; gap:.3rem; background:#f8fafc; border:1px solid var(--line); border-radius:7px; padding:.25rem .55rem; font-size:.82rem; cursor:pointer; }
.switches{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.switches label{ display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; cursor:pointer; }
.ferr{ color:#dc2626; font-size:.85rem; margin-bottom:.5rem; min-height:1.1em; }
/* Pestañas dentro de modales */
.tabs{ display:flex; gap:.2rem; padding:0 1.25rem; border-bottom:1px solid var(--line); }
.tabs .tab{ background:none; border:0; padding:.7rem .9rem; cursor:pointer; font-weight:600; color:var(--mut); border-bottom:2px solid transparent; margin-bottom:-1px; font-size:.9rem; }
.tabs .tab.active{ color:var(--c); border-bottom-color:var(--c); }
/* Modo compacto (menos aire entre campos) */
.compact .field{ margin-bottom:.55rem; }
.compact .field label{ margin-bottom:.15rem; }
.compact .grid2{ gap:.7rem; }
/* Ordenación */
.sort-arrow{ font-size:.7em; opacity:.7; }
th[data-sort]:hover{ color:var(--c); }
@media(max-width:600px){ .grid2{ grid-template-columns:1fr; } }