/* ============================================================
   Loop — sistema de diseño.
   Marca: naranja sobre carbón (logo infinito). Shell oscuro
   (sidebar), contenido claro data-dense. Dinero SIEMPRE en
   mono tabular. El naranja de marca va en SÓLIDOS (botones,
   activo, hero); el semáforo de margen va en pastillas PASTEL
   — nunca se mezclan.
   ============================================================ */
:root{
  /* contenido claro */
  --bg:#f6f7f9; --surface:#fff; --surface-2:#f9fafb;
  --border:#e5e7eb; --border-strong:#d1d5db;
  --text:#111827; --text-2:#4b5563; --text-3:#6b7280; --text-muted:#9ca3af;
  /* shell oscuro (carbón de marca) */
  --ink:#16181D; --ink-2:#1F232B; --ink-line:#2A2F38;
  --ink-text:#E7E9EC; --ink-text-2:#9AA1AB;
  /* marca */
  --acc:#F97316; --acc-hover:#EA6A0C; --acc-suave:#FFF1E6;
  --plata:#C8CDD4;
  /* semáforo de margen (5 pasos, siempre pastel + texto oscuro del tono) */
  --red-bg:#FEE2E2; --red:#DC2626;
  --orange-bg:#FFEDD5; --orange:#EA580C;
  --yellow-bg:#FEF3C7; --yellow:#EAB308;
  --lime-bg:#ECFCCB; --lime:#65A30D;
  --green-bg:#DCFCE7; --green:#16A34A;
  /* forma */
  --radius:10px; --radius-lg:14px; --radius-sm:6px;
  --shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --topbar-h:52px; --sidebar-w:216px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); font-size:14px; color:var(--text);
  background:var(--bg); -webkit-font-smoothing:antialiased;
}
a{color:var(--acc-hover);text-decoration:none}
a:hover{text-decoration:underline}

.dinero{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- layout app: sidebar oscura full-height + topbar clara ---------- */
.app{min-height:100vh}
.main{min-width:0;padding:20px 24px;margin-left:var(--sidebar-w);margin-top:var(--topbar-h)}

/* ---------- sidebar (carbón) ---------- */
.sidebar{
  position:fixed;top:0;bottom:0;left:0;width:var(--sidebar-w);z-index:50;
  background:var(--ink);display:flex;flex-direction:column;gap:2px;
  padding:14px 10px;
}
.sidebar .marca{
  display:flex;align-items:center;gap:9px;color:#fff;
  font-weight:800;font-size:19px;letter-spacing:2px;
  padding:2px 8px 16px;border-bottom:1px solid var(--ink-line);margin-bottom:12px;
}
.sidebar .marca img{height:24px;width:auto;display:block}
.sidebar .item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);
  color:var(--ink-text-2);font-size:13.5px;cursor:pointer;user-select:none;
}
.sidebar .item:hover{background:var(--ink-2);color:var(--ink-text);text-decoration:none}
.sidebar .item.activo{background:var(--acc);color:#fff;font-weight:600}
.sidebar .item.deshabilitado{color:#565D68;cursor:default;pointer-events:none}
.sidebar .item .ico{width:18px;text-align:center;font-size:15px}
.sidebar .pronto{font-size:10px;color:#565D68;margin-left:auto;border:1px solid var(--ink-line);border-radius:99px;padding:1px 6px}
.sidebar .pie{margin-top:auto;padding:10px 8px 2px;border-top:1px solid var(--ink-line);color:var(--ink-text-2);font-size:12px}

/* ---------- topbar (clara, dentro del área de contenido) ---------- */
.topbar{
  position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--topbar-h);z-index:40;
  background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;padding:0 20px;
}
.topbar .titulo{font-weight:700;font-size:15px}
.topbar .negocio{color:var(--text-3);font-size:13px;border-left:1px solid var(--border);padding-left:14px}
.topbar .sp{flex:1}
.topbar .usuario{color:var(--text-2);font-size:13px}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 18px;
}
.card h2{font-size:14px;font-weight:600;color:var(--text-2);margin-bottom:10px}
.card.hero{background:linear-gradient(135deg,#EA6A0C,#F97316);color:#fff}
.card.hero .kpi-num,.card.hero h2,.card.hero .kpi-det{color:#fff}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.kpi-num{font-size:26px;font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums}
.kpi-det{font-size:12px;color:var(--text-3);margin-top:2px}

/* ---------- badges semáforo (siempre pastel, nunca sólido) ---------- */
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:600}
.badge.rojo{background:var(--red-bg);color:var(--red)}
.badge.naranja{background:var(--orange-bg);color:var(--orange)}
.badge.amarillo{background:var(--yellow-bg);color:#a16207}
.badge.lima{background:var(--lime-bg);color:var(--lime)}
.badge.verde{background:var(--green-bg);color:var(--green)}
.badge.gris{background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-size:13.5px;font-family:var(--font);
  padding:8px 14px;cursor:pointer;
}
.btn:hover{background:var(--surface-2)}
.btn.primario{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.btn.primario:hover{background:var(--acc-hover);border-color:var(--acc-hover)}
.btn.peligro{color:var(--red);border-color:var(--red)}
.btn:disabled{opacity:.5;cursor:default}

/* ---------- inputs ---------- */
.campo{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.campo label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.campo input,.campo select{
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:8px 10px;font-size:14px;font-family:var(--font);background:var(--surface);color:var(--text);
}
.campo input:focus,.campo select:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:var(--acc)}
.campo .ayuda{font-size:11.5px;color:var(--text-muted)}

/* ---------- tabla ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--text-3);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border);
}
.tabla td{padding:9px 10px;border-bottom:1px solid var(--border)}
.tabla tr:hover td{background:var(--surface-2)}
.tabla td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- toast ---------- */
#toasts{position:fixed;bottom:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--ink);color:#fff;border-radius:var(--radius-sm);
  padding:10px 16px;font-size:13.5px;box-shadow:var(--shadow-md);
  animation:toast-in .18s ease-out;
}
.toast.error{background:var(--red)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- login / landing (marca: carbón + naranja) ---------- */
.centro{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--ink)}
.panel-login{width:100%;max-width:370px}
.panel-login .card{background:var(--ink-2);box-shadow:none;border:1px solid var(--ink-line);padding:26px}
.panel-login .marca-grande{
  display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px;
  color:#fff;font-size:30px;font-weight:800;letter-spacing:4px;
}
.panel-login .marca-grande img{height:34px}
.panel-login .lema{color:var(--ink-text-2);text-align:center;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:22px}
.panel-login .lema b{color:var(--acc);font-weight:600}
.panel-login .campo label{color:var(--ink-text-2)}
.panel-login .campo input{background:var(--ink);border-color:var(--ink-line);color:var(--ink-text)}
.error-login{background:rgba(220,38,38,.15);color:#F87171;border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;margin-bottom:12px;display:none}

/* ---------- modales (los de trabajo NO cierran por backdrop) ---------- */
.modal-back{
  position:fixed;inset:0;z-index:150;background:rgba(15,23,42,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal{
  background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:22px;width:100%;max-width:420px;font-size:14px;
}
.modal h2{font-size:15px;font-weight:700}
.modal-botones{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px}
.tabs .tab{
  padding:8px 16px;border:none;background:none;font:inherit;font-size:13.5px;
  color:var(--text-3);cursor:pointer;border-bottom:2px solid transparent;
}
.tabs .tab.activa{color:var(--acc-hover);border-bottom-color:var(--acc);font-weight:600}

/* ---------- panel lateral (editor) ---------- */
.panel-lateral{
  position:fixed;top:var(--topbar-h);right:0;bottom:0;width:520px;max-width:92vw;z-index:60;
  background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-md);
  padding:18px 20px;overflow-y:auto;display:none;
}
.panel-lateral.abierto{display:block}

/* punto ámbar: override de merma en la línea (clic = volver al default) */
.punto-override{
  display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--yellow);
  margin-left:4px;cursor:pointer;vertical-align:middle;
}

/* ---------- estado vacío ---------- */
.vacio{color:var(--text-muted);text-align:center;padding:32px 16px;font-size:13.5px}