/* ===== Base ===== */
*{ box-sizing:border-box; }
body{
  margin:0; padding:0;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  color:#222; background:#f6f7fb;
}
.container{ max-width: 1100px; margin: 18px auto; padding: 0 14px; }

h1,h2,h3{ margin:8px 0 10px; line-height:1.2; }
a{ color:#2563eb; text-decoration:none; }
a:hover{ text-decoration:underline; }
small{ color:#6b7280; }

/* ===== Header + Nav ===== */
.site-header{
  background:#fff; border-bottom:1px solid #e5e7eb;
}
.site-header .brand{
  font-weight:700; padding:10px 14px; display:inline-block;
}
.nav{
  display:flex; gap:12px; align-items:center;
  padding:10px 14px; border-top:1px solid #f1f5f9;
}
.nav a{
  color:#111827; text-decoration:none;
  padding:7px 10px; border-radius:8px;
}
.nav a:hover{ background:#eef2ff; }
.nav a.active{ background:#e0e7ff; color:#1d4ed8; font-weight:600; }

/* (opcional) botón logout si va en la nav */
.nav form{ margin-left:auto; }
.nav button{
  border:0; background:#e5e7eb; padding:7px 10px; border-radius:8px; cursor:pointer;
}
.nav button:hover{ background:#dbeafe; }

/* ===== Formularios ===== */
label{ display:block; margin:8px 0 4px; }
input[type="text"],input[type="number"],input[type="date"],
input[type="password"],select,textarea{
  width:100%; padding:9px 11px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:#bfdbfe; box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
button{
  background:#2563eb; color:#fff; border:0; padding:9px 13px; border-radius:10px; cursor:pointer;
}
button:hover{ background:#1d4ed8; }
button[disabled]{ opacity:.6; cursor:not-allowed; }

/* ===== Autocompletar ===== */
.ac-wrap{ position:relative; }
.ac-list{
  position:absolute; left:0; right:0; top:calc(100% + 4px);
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  max-height:220px; overflow:auto; display:none; z-index:1000;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.ac-item{ padding:9px 11px; cursor:pointer; border-bottom:1px solid #f3f4f6; }
.ac-item:last-child{ border-bottom:0; }
.ac-item:hover{ background:#f3f4f6; }

/* ===== Tablas ===== */
table{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}
thead th{
  background:#f8fafc; text-align:left; font-weight:600;
  padding:10px 12px; border-bottom:1px solid #e5e7eb;
}
tbody td{ padding:10px 12px; border-bottom:1px solid #f1f5f9; }
tbody tr:hover{ background:#fafafa; }
td.num, th.num{ text-align:right; }
td.actions{ white-space:nowrap; }

/* Badges simples para estado */
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; line-height:18px;
}
.badge-ok{ background:#dcfce7; color:#166534; }
.badge-warn{ background:#fef3c7; color:#92400e; }

/* ===== Cards ===== */
.card{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}

/* ===== Footer ===== */
.site-footer{ margin:32px 0 18px; text-align:center; color:#6b7280; }

/* ===== Print (recibos) ===== */
@media print{
  .site-header,.site-footer,.nav,.no-print{ display:none !important; }
  body{ background:#fff; }
  .container{ max-width:none; margin:0; padding:0; }
  table{ box-shadow:none; }
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  font: inherit;
}

input:not([type]):focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#bfdbfe;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.progress{
  height:8px; background:#e5e7eb; border-radius:999px; overflow:hidden;
}
.progress-fill{
  height:100%; background:#60a5fa; /* azulito */
}

.pager{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap}
.pager-jump input[type=number]{width:72px}
.pager .muted{opacity:.5}