/* Quesera don Wilmer — estilos */

:root{
  --ink:#1d1f1c; --muted:#6b6f68; --line:#e6e3db; --bg:#faf8f2; --paper:#fff;
  --cream:#f1e9d3; --butter:#e8d9a8;
  --forest-50:#eef3ef; --forest-100:#dfe9e3; --forest-700:#2d6a4f;
  --forest-800:#1f4d3a; --forest-900:#173324;
  --accent:#b4441f; --warn:#a36410; --danger:#8c2f1e;
}

html,body{background:var(--bg); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif;}
.font-display{font-family:'Newsreader',Georgia,serif; font-weight:500; letter-spacing:-0.01em;}
.num{font-family:'JetBrains Mono','SF Mono',Consolas,monospace; font-feature-settings:'tnum'; letter-spacing:-0.02em;}

body{
  background-image: radial-gradient(circle at 1px 1px, rgba(15,38,28,0.04) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Logo mark */
.brand-mark{
  width:32px; height:32px; background:var(--forest-800); border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--cream); font-family:'Newsreader',serif; font-style:italic;
  font-weight:500; font-size:20px; line-height:1;
}

/* Nav items */
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:8px; color:var(--muted);
  font-weight:500; font-size:14px; transition:all .15s ease;
  text-decoration:none;
}
.nav-item:hover{ background:var(--forest-50); color:var(--ink); }
.nav-item.active{ background:var(--forest-800); color:var(--cream); }

/* Tablas */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:left; font-weight:500; color:var(--muted); font-size:12px;
        text-transform:uppercase; letter-spacing:.04em; padding:12px 16px;
        border-bottom:1px solid var(--line); background:var(--bg); }
.tbl td{ padding:14px 16px; border-bottom:1px solid #f0ede4; font-size:14px; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tr.row:hover td{ background:var(--bg); }

/* Tabla responsive: en móvil, mostrar como tarjetas */
@media (max-width: 768px){
  .tbl-responsive thead{ display:none; }
  .tbl-responsive tr{ display:block; padding:14px; border:1px solid var(--line);
                       border-radius:12px; margin-bottom:10px; background:var(--paper); }
  .tbl-responsive td{ display:flex; justify-content:space-between; align-items:center;
                       padding:6px 0; border:none; font-size:14px; }
  .tbl-responsive td:before{ content: attr(data-label); font-size:11px;
                              text-transform:uppercase; letter-spacing:.04em;
                              color:var(--muted); font-weight:500; }
}

/* Cards */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:12px;
       box-shadow: 0 1px 0 rgba(15,38,28,0.04), 0 1px 2px rgba(15,38,28,0.06); }

/* Inputs */
.input{
  width:100%; background:var(--paper); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; font-size:14px; color:var(--ink);
  transition:all .15s ease;
}
.input:focus{ outline:none; border-color:var(--forest-700); box-shadow:0 0 0 3px rgba(45,106,79,.15); }

/* Botones */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:10px 16px; border-radius:8px; font-size:14px; font-weight:500;
      transition:all .15s ease; cursor:pointer; border:none; text-decoration:none; }
.btn-primary{ background:var(--forest-800); color:var(--cream); }
.btn-primary:hover{ background:var(--forest-900); }
.btn-outline{ background:var(--paper); border:1px solid var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--forest-700); color:var(--forest-800); }
.btn-accent{ background:var(--accent); color:var(--cream); }
.btn-accent:hover{ opacity:.9; }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--forest-50); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

/* Badges */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
        border-radius:999px; font-size:12px; font-weight:500; border:1px solid; }
.badge-ok{ background:var(--forest-50); color:var(--forest-800); border-color:var(--forest-100); }
.badge-warn{ background:#fff4e0; color:var(--warn); border-color:#f4e1b5; }
.badge-off{ background:#f3f0e7; color:var(--muted); border-color:var(--line); }
.badge-accent{ background:#fbe7df; color:var(--accent); border-color:#f1c7b8; }
.badge .dot{ width:6px; height:6px; border-radius:999px; background:currentColor; }

/* Sidebar móvil */
.sidebar{ width:240px; }
.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; }
@media (max-width: 768px){
  .sidebar{ position:fixed; top:0; left:0; bottom:0; z-index:50; transform:translateX(-100%);
            transition:transform .25s ease; }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-overlay.open{ display:block; }
}

/* Scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#d6d2c6; border-radius:8px; }

/* Modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(29,31,28,.4); z-index:60;
                  display:flex; align-items:center; justify-content:center; padding:16px; }
.modal{ background:var(--paper); border-radius:12px; max-width:520px; width:100%;
        box-shadow: 0 20px 40px -10px rgba(15,38,28,.3); max-height:90vh; overflow:auto; }