:root{
  --bg:#0f1116; 
  --fg:#e6e6e6; 
  --muted:#a3a3a3; 
  --card:#171923; 
  --accent:#f5c518; 
  --danger:#ff5577;

  /* derivados */
  --border:#262938;
  --border-soft:#30344b;
  --ink:#000;
}

*{ box-sizing:border-box; }
body.dark{
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  margin:0;
}
a{ color: var(--fg); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===== Topbar ===== */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid #222;
  position:sticky; top:0;
  background:#0f1116d9; backdrop-filter: blur(6px);
}
.brand{ font-weight:700; }
.brand .dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:middle; }
nav a{ margin:0 6px; }

/* ===== Layout ===== */
.container{ max-width:1100px; margin:20px auto; padding:0 16px; }
.page-header{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.page-title{ font-size:26px; font-weight:700; margin:0 0 12px; }

/* ===== Grid ===== */
.grid{ display:grid; gap:16px; }
.grid.three{ grid-template-columns: repeat(3, 1fr); }
.grid--2col{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px){
  .grid--2col{ grid-template-columns: 1fr; }
}

/* ===== Cards ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
}
.card-head{ padding:12px 14px; border-bottom:1px solid #202336; font-weight:600; }
.card-body{ padding:14px; }
.card-foot{ padding:10px 14px; border-top:1px solid #202336; color:var(--muted); }

/* ===== Inputs ===== */
.input,
.form-row input, .form-row select,
.row input, .row select {
  padding:10px;
  background:#0f1116;
  border:1px solid var(--border-soft);
  border-radius:10px;
  color:#fff;
}
.input{ min-width:220px; }
.input--select{ appearance:none; }
.input:focus{ outline:none; border-color: #5a6bcf; }

.label{ color:#c9cdd1; font-size:13px; margin-bottom:6px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field--actions{ display:flex; gap:8px; align-items:center; padding-top:8px; flex-wrap:wrap; }

/* ===== Botones ===== */
.btn{
  background:#2a2f45; border:1px solid #39405c; color:#fff;
  padding:9px 14px; border-radius:10px; cursor:pointer; transition:.15s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{ filter:brightness(1.07); }
.btn-sm{ padding:6px 10px; font-size:12px; border-radius:8px; }
.btn-out{ border:1px solid #444; padding:6px 10px; border-radius:8px; }

.btn-accent,
.btn-primary{ background:var(--accent); color:var(--ink); border-color:#caa300; }
.btn-accent:hover,
.btn-primary:hover{ filter:brightness(1.06); }

.btn-quiet{ background:transparent; border:1px solid #3a3a3a; color:#cfd3d7; }
.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }

/* ===== Toolbar (selector cliente + acciones) ===== */
.toolbar{
  display:flex; gap:12px; align-items:end; flex-wrap:wrap;
  padding:12px; border:1px solid var(--border); border-radius:12px; background:#0f1116;
}
.toolbar .label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.toolbar-left{ display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.toolbar-right{ margin-left:auto; display:flex; gap:8px; }
@media (max-width:720px){
  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar-right{ margin-left:0; }
}

/* ===== Tablas ===== */
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th,.table td{ padding:10px; border-bottom:1px solid var(--border); }
.table thead th{ color:#cfcfcf; background:#131522; font-weight:600; }
.table--hover tbody tr:hover{ background:#141724; }
.table--compact th,.table--compact td{ padding:9px 8px; }
.table-striped tbody tr:nth-child(even){ background:#141724; }
.table-responsive{ overflow:auto; }
.ta-right{ text-align:right; } .ta-center{ text-align:center; } .nowrap{ white-space:nowrap; }

@media (max-width:720px){
  /* en celular ocultamos la viñeta de la primer col */
  .table th:nth-child(1), .table td:nth-child(1){ display:none; }
}

/* ===== Chips / estados ===== */
.chip{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; }
.chip--ok{ background:#166534; color:#dcfce7; }
.chip--warning{ background:#78350f; color:#fde68a; }

/* ===== Utilidades ===== */
.muted{ color:var(--muted); }
.inline{ display:inline; }
.hidden{ display:none !important; }

/* ===== Formularios existentes ===== */
.auth{ max-width:360px; margin:60px auto; }
.auth input{ width:100%; padding:10px; margin:6px 0 12px; background:#0f1116; border:1px solid var(--border-soft); border-radius:8px; color:#fff; }
.form-row{ display:flex; gap:8px; }

/* ===== Modales (SOLO modal, acotado y sin romper nada) ===== */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.68);
  display:flex; align-items:center; justify-content:center;
  z-index:2000;
}
.modal[hidden]{ display:none !important; }

.modal-dialog{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  width:min(1040px, 92vw);
  padding:20px 22px 18px;
  color:var(--fg);
}
.modal-header,.modal-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.modal-header{ margin-bottom:12px; }
.modal-body{ margin-top:6px; }
.modal-header h2{ margin:0; font-weight:800; letter-spacing:.2px; line-height:1.25; }

/* Grilla interna del modal (opcional) */
.modal-grid{ display:grid; gap:14px; grid-template-columns:repeat(12,minmax(0,1fr)); }
.modal-grid .col-12{ grid-column:span 12; }
.modal-grid .col-6 { grid-column:span 6; }
.modal-grid .col-4 { grid-column:span 4; }
.modal-grid .col-3 { grid-column:span 3; }
.modal-grid .col-2 { grid-column:span 2; }
@media (max-width:860px){
  .modal-grid .col-12,
  .modal-grid .col-6,
  .modal-grid .col-4,
  .modal-grid .col-3,
  .modal-grid .col-2{ grid-column:span 12; }
}

/* Campos solo dentro del modal */
.modal-dialog .label{ color:#c9cdd1; font-size:13px; margin:0 0 6px; font-weight:600; }
.modal-dialog input,
.modal-dialog select,
.modal-dialog textarea{
  width:100%;
  background:#121522;
  border:1px solid var(--border-soft);
  border-radius:10px;
  height:44px;
  color:#fff;
  padding:10px 12px;
  font-size:16px;
  line-height:1.2;
  box-sizing:border-box;
  outline:none;
  transition:border .15s ease, box-shadow .15s ease;
}
.modal-dialog select{ padding-right:34px; }
.modal-dialog textarea{ height:auto; min-height:44px; resize:vertical; }
.modal-dialog input:focus,
.modal-dialog select:focus,
.modal-dialog textarea:focus{
  border-color:#5a6bcf;
  box-shadow:0 0 0 3px rgba(90,107,207,.18);
}
.modal-dialog input.money{ text-align:right; font-variant-numeric:tabular-nums; }
.modal-dialog input.readonly{
  background:#151a23;
  color:#dbe6f8;
  border-color:#2a3449;
}

/* ===== Footer ===== */
.footer{
  padding:24px 16px; color:var(--muted); text-align:center;
  border-top:1px solid #222; margin-top:40px;
}
.footer-brand{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.footer-logo{ height:120px; width:auto; display:block; }
.footer-text{ font-size:14px; }

/* ===== Menú responsive ===== */
.menu-toggle { display:none; }
.menu-icon { display:none; font-size:22px; cursor:pointer; }
@media (max-width:768px){
  .menu { display:none; flex-direction:column; gap:8px; background:#171923; padding:12px; border-radius:8px; }
  .menu-toggle:checked + .menu-icon + .menu { display:flex; }
  .menu-icon { display:block; }
}

/* === PATCH MODAL (solo afecta al modal) =============================== */
.modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.68); z-index:2000;
}
.modal[hidden]{ display:none !important; }

.modal-dialog{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  width:min(1120px, 94vw);
  padding:22px;
  color:var(--fg);
}

/* Cabecera / pie */
.modal-header,.modal-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.modal-header h2{ margin:0; font-size:28px; letter-spacing:.2px; font-weight:800; }
.modal-footer{ margin-top:10px; }

/* Grilla interna */
.modal-grid{ display:grid; gap:16px; grid-template-columns:repeat(12,minmax(0,1fr)); }
.modal-grid .col-12{ grid-column:span 12; }
.modal-grid .col-8 { grid-column:span 8; }
.modal-grid .col-6 { grid-column:span 6; }
.modal-grid .col-4 { grid-column:span 4; }
.modal-grid .col-3 { grid-column:span 3; }
.modal-grid .col-2 { grid-column:span 2; }

@media (max-width: 980px){
  .modal-grid .col-12,.modal-grid .col-8,.modal-grid .col-6,
  .modal-grid .col-4,.modal-grid .col-3,.modal-grid .col-2{ grid-column:span 12; }
}

/* Campos del modal */
.modal-dialog .label{ color:#c9cdd1; font-size:13px; margin:0 0 6px; font-weight:600; }
.modal-dialog input,
.modal-dialog select,
.modal-dialog textarea{
  width:100%;
  height:46px;
  background:#0f1116;
  border:1px solid var(--border-soft);
  border-radius:10px;
  color:#fff;
  padding:10px 12px;
  font-size:16px;
  outline:none;
  transition:border .15s ease, box-shadow .15s ease;
}
.modal-dialog textarea{ min-height:46px; height:auto; resize:vertical; }
.modal-dialog input:focus,
.modal-dialog select:focus,
.modal-dialog textarea:focus{
  border-color:#5a6bcf;
  box-shadow:0 0 0 3px rgba(90,107,207,.18);
}

/* Apariencias específicas */
.modal-dialog input.money   { text-align:right; font-variant-numeric:tabular-nums; }
.modal-dialog input.readonly{
  background:#141a24; border-color:#2a3449; color:#d5dfef;
  pointer-events:none; user-select:none;
}

/* Botón cerrar en header que combine con tema */
.btn-header-quiet{
  background:#262b3b; border:1px solid #2f3550; color:#e7eaf2;
  padding:8px 14px; border-radius:10px; cursor:pointer;
}
.btn-header-quiet:hover{ filter:brightness(1.07); }

.btn-accent,
.btn.btn-primary,
button.btn-import {
  background: #f5c518 !important;
  color: #000 !important;
  font-weight: 600;
  border: none;
  box-shadow: 0 0 4px rgba(245, 197, 24, 0.7);
  transition: all .2s ease;
}
.btn-accent:hover,
.btn.btn-primary:hover,
button.btn-import:hover {
  background: #ffd84d !important;
  box-shadow: 0 0 8px rgba(255, 210, 0, 0.9);
}