/* ===== Multi-tema ===== */
:root,[data-tema=oscuro] { --bg:#0d1423; --card:#16203a; --border:#27324e; --text:#dce4f3; --muted:#8b94ab; --accent:#38bdf8; --accent2:#818cf8; --bg2:#121c30; --bad:#f87171; --ok:#4ade80; --warn:#fbbf24; }
[data-tema=medianoche] { --bg:#0a0e1a; --card:#141830; --border:#1f2a42; --text:#d4dff0; --muted:#7a8aa8; --accent:#a78bfa; --accent2:#7c3aed; --bg2:#0f1328; --bad:#ef4444; --ok:#34d399; --warn:#f59e0b; }
[data-tema=bosque] { --bg:#0a140e; --card:#142418; --border:#1e3a2a; --text:#d4ecd4; --muted:#7a9a7a; --accent:#34d399; --accent2:#10b981; --bg2:#0e1c12; --bad:#f87171; --ok:#4ade80; --warn:#fbbf24; }
[data-tema=ambar] { --bg:#14100a; --card:#241e14; --border:#3a3220; --text:#ece0d0; --muted:#9a8a70; --accent:#f59e0b; --accent2:#f97316; --bg2:#1c1810; --bad:#ef4444; --ok:#34d399; --warn:#fbbf24; }
[data-tema=oceano] { --bg:#0a1418; --card:#142428; --border:#1e3a3a; --text:#d4ecec; --muted:#7a9a9a; --accent:#06b6d4; --accent2:#0891b2; --bg2:#0e1c20; --bad:#f87171; --ok:#4ade80; --warn:#fbbf24; }
[data-tema=claro] { --bg:#f2f4f8; --card:#ffffff; --border:#dde3ec; --text:#22303f; --muted:#7a8794; --accent:#2563eb; --accent2:#3b82f6; --bg2:#eef1f6; --bad:#ef4444; --ok:#22c55e; --warn:#eab308; }

* { margin:0;padding:0;box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh; }
a { color:var(--accent);text-decoration:none; }
a:hover { text-decoration:underline; }

/* ===== Topbar ===== */
.topbar { position:fixed;top:0;left:0;right:0;z-index:100;height:56px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem; }
.topbar-l { display:flex;align-items:center;gap:.75rem; }
.topbar-hamburger { display:none;background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;padding:.25rem;line-height:1; }
.topbar-brand { font-weight:700;font-size:1rem;color:var(--text);letter-spacing:-.01em; }
.topbar-r { display:flex;align-items:center;gap:.5rem; }
.topbar-r button { background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;padding:.3rem .6rem;border-radius:6px;transition:background .2s; }
.topbar-r button:hover { background:var(--bg2); }

/* ===== Sidebar ===== */
#sidebar { position:fixed;top:56px;left:0;bottom:0;width:220px;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1rem 0;z-index:50;overflow-y:auto;transition:transform .25s; }
#sidebar a { display:flex;align-items:center;gap:.6rem;padding:.65rem 1.1rem;color:var(--muted);font-size:.85rem;font-weight:500;text-decoration:none;border-left:3px solid transparent;transition:background .2s,color .2s,border-color .2s;cursor:pointer; }
#sidebar a:hover { background:var(--bg2);color:var(--text); }
#sidebar a.active { background:var(--bg2);color:var(--text);border-left-color:var(--accent);font-weight:600; }
#sidebar a .ico { font-size:1.1rem;width:1.4rem;text-align:center; }
#sidebar a .sec-label { font-size:.7rem;color:var(--muted);margin-top:1rem;padding:.25rem 1.1rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-left:none;cursor:default; }
#sidebar a.sec-label:hover { background:none; }

@media (max-width:768px) {
  #sidebar { transform:translateX(-100%);width:240px; }
  #sidebar.abierta { transform:translateX(0);box-shadow:4px 0 16px rgba(0,0,0,.25); }
  .topbar-hamburger { display:block; }
  .topbar-brand { font-size:.9rem; }
  #main { margin-left:0; }
}
@media (min-width:769px) {
  #main { margin-left:220px; }
}

/* ===== Main ===== */
#main { padding:5rem 1.5rem 2rem;min-height:calc(100vh - 56px); }
.seccion { display:none; }
.seccion.active { display:block; }

/* ===== Dashboard cards ===== */
.resumen-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem; }
.resumen-card { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.25rem;text-align:center; }
.resumen-card b { font-size:1.5rem;font-weight:700;display:block;color:var(--text);margin-bottom:.25rem; }
.resumen-card span { font-size:.78rem;color:var(--muted); }
.card { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1.25rem;transition:border-color .2s; }
.card:hover { border-color:var(--accent); }
.card h3 { font-size:1rem;font-weight:700;margin:0 0 .75rem;color:var(--text);letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem; }
.card h3::before { content:'';display:inline-block;width:3px;height:15px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:2px;flex-shrink:0; }

/* ===== Tablas ===== */
table { width:100%;border-collapse:collapse;font-size:.82rem; }
thead th { padding:.55rem .65rem;text-align:left;border-bottom:1px solid var(--border);color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em; }
thead th:last-child { text-align:right; }
tbody td { padding:.5rem .65rem;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--bg2); }

/* ===== Pills ===== */
.pill { display:inline-block;padding:.15rem .5rem;border-radius:100px;font-size:.7rem;font-weight:600;background:var(--bg2);color:var(--muted);letter-spacing:.02em; }
.pill.activo,.pill.pagada,.pill.ok { background:var(--ok);color:var(--bg); }
.pill.pendiente,.ill.en_proceso { background:var(--warn);color:var(--bg); }
.pill.cancelado,.pill.vencida { background:var(--bad);color:var(--bg); }
.pill.nuevo { background:var(--accent);color:var(--bg); }

/* ===== Formularios ===== */
.form-row { display:flex;gap:.75rem;margin-bottom:.85rem;flex-direction:column; }
.form-input { flex:1;padding:.75rem .9rem;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text);font-size:.9rem;font-family:inherit;outline:none;transition:border-color .25s,box-shadow .25s; }
.form-input::placeholder { color:var(--muted); }
.form-input:focus { border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,189,248,.15); }
textarea.form-input { resize:vertical;min-height:80px; }
select.form-input { cursor:pointer; }

.btn { display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.25rem;border-radius:8px;font-weight:600;font-size:.85rem;border:none;cursor:pointer;transition:opacity .2s,transform .15s; }
.btn:hover { opacity:.9;transform:translateY(-1px); }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff; }
.btn-submit { width:100%;margin-top:1rem;padding:.8rem; }
.btn-submit:disabled { opacity:.4;cursor:not-allowed;transform:none; }
.btn-ghost { background:transparent;color:var(--muted);border:1px solid var(--border); }
.btn-ghost:hover { background:var(--bg2);color:var(--text); }
.btn-danger { background:var(--bad);color:#fff; }

.form-status { margin-top:.75rem;font-size:.85rem;text-align:center;line-height:1.5; }
.form-status.ok { color:var(--ok); }
.form-status.error { color:var(--bad); }

/* ===== Login ===== */
.login-section { min-height:100vh;display:flex;align-items:center;justify-content:center;padding:6rem 1.5rem 2rem;position:relative;overflow:hidden;background:var(--bg); }
.login-card { max-width:400px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem 1.75rem;position:relative; }
.login-card h1 { font-size:1.4rem;font-weight:700;margin-bottom:.35rem;color:var(--text);text-align:center; }
.login-card p { text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:1.25rem; }

/* ===== Catalogo ===== */
.prod-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem; }
.prod-card { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.25rem;display:flex;flex-direction:column; }
.prod-card h4 { font-size:1rem;font-weight:700;margin-bottom:.35rem;color:var(--text); }
.prod-card p { font-size:.8rem;color:var(--muted);margin-bottom:.5rem; }
.prod-precio { font-size:1.2rem;font-weight:800;color:var(--accent);margin:.5rem 0; }
.prod-card .btn { margin-top:auto; }
.mejora-card { border-color:var(--accent2); }
.mejora-card h4::before { content:'🛠';margin-right:.35rem; }

/* ===== Utility ===== */
.hidden { display:none !important; }
.hint { color:var(--muted);font-size:.82rem; }
.empty-msg { color:var(--muted);font-size:.82rem;padding:.35rem .65rem;margin:0; }

/* ===== Overlay loading ===== */
.loading-overlay { position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;z-index:300; }
.loading-spinner { width:2rem;height:2rem;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== Modal ===== */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:400;padding:2rem; }
.modal-card { background:var(--card);border:1px solid var(--border);border-radius:16px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto; }
.modal-topbar { display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border); }
.modal-topbar span { font-weight:700;font-size:1rem; }
.modal-cerrar { background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;padding:.25rem .5rem;border-radius:6px; }
.modal-cerrar:hover { background:var(--bg2); }
#mf-cuerpo { padding:1.25rem; }
#mf-cuerpo table.detalles td:first-child { color:var(--muted);padding-right:1rem; }
.modal-body { padding:1.25rem;font-size:.9rem;line-height:1.6;color:var(--text);white-space:pre-wrap; }

/* ===== Botón pequeño ===== */
.btn-xs { padding:.35rem .65rem;font-size:.75rem; }