:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow: 0 10px 25px rgba(0,0,0,.06);
  --radius:14px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

a{ color:inherit; text-decoration:none; }

h1,h2,h3{ margin:0 0 10px 0; }

.muted{ color:var(--muted); }
.small{ font-size:12px; }

/* =========================
   Layout
========================= */
.container{
  max-width: 98vw;          /* ✅ casi toda la pantalla */
  margin: 0 auto;
  padding: 20px 24px;
}

.card{
  width: 100%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:16px;
}

/* =========================
   Topbar
========================= */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:50;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================
   Buttons
========================= */
.btn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  display:inline-block;
  line-height:1;
  transition:filter .15s ease, transform .05s ease;
}

.btn:hover{ filter:brightness(.98); }
.btn:active{ transform:translateY(1px); }

.btn.primary{
  border-color:#111827;
  background:#111827;
  color:#fff;
}

.btn.ok{
  border-color:#065f46;
  background:#10b981;
  color:#fff;
}

.btn.bad{
  border-color:#7f1d1d;
  background:#ef4444;
  color:#fff;
}

/* =========================
   Inputs
========================= */
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
  background:#fff;
}

textarea{ resize:vertical; }

label{
  display:block;
  margin:0 0 6px 0;
  font-size:12px;
  color:var(--muted);
}

/* =========================
   Alerts
========================= */
.alert{
  padding:10px;
  border-radius:12px;
  margin:10px 0;
}

.alert.error{
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#7f1d1d;
}

/* =========================
   Filters (index.php) - requiere .field wrapper
========================= */
.filters{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 2fr auto;
  gap:12px;
  align-items:end;
}

.filters .field{
  min-width:0;
}

.filters .field.actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
}

.filters .field.actions .btn{
  white-space:nowrap;
}

@media (max-width: 1100px){
  .container{
    max-width: 100vw;
    padding: 16px;
  }

  .filters{
    grid-template-columns: 1fr 1fr;
  }

  .filters .field.actions{
    grid-column: span 2;
    justify-content:flex-start;
  }
}

/* =========================
   Form grid (solicitud_nueva.php)
========================= */
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
}

.grid .col-2{ grid-column: span 2; }

@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
  .grid .col-2{ grid-column: span 1; }
}

/* =========================
   Table
========================= */
.table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  max-width:100%;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:1400px; /* ✅ evita que quede aplastada */
}

.table th, .table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
  font-size:13px;
}

.table thead th{
  font-size:11px;
  text-transform:uppercase;
  color:var(--muted);
  background:#fafafa;
  position:sticky;
  top:0;
  z-index:2;
}

.table tbody tr:hover{
  background:#fbfbff;
}

.td-actions{ white-space:nowrap; }
.inline{ display:inline; }

/* Motivo y Responsable: que no rompan la tabla */
.table td:nth-child(10),
.table td:nth-child(11){
  max-width: 280px;
  white-space: normal;
  word-break: break-word;
}

/* =========================
   Badges
========================= */
.badge{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  display:inline-block;
  white-space:nowrap;
}

.badge.warn{
  background:#fef3c7;
  border-color:#f59e0b;
  color:#92400e;
}

.badge.ok{
  background:#d1fae5;
  border-color:#10b981;
  color:#065f46;
}

.badge.bad{
  background:#fee2e2;
  border-color:#ef4444;
  color:#7f1d1d;
}

/* =========================
   Login layout (si lo usás)
========================= */
.bg{
  display:flex;
  min-height:100vh;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.bg .card{
  max-width:420px;
}

.pill{
  display:inline-block;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  margin-left:6px;
  background:#eef2ff;
  color:#3730a3;
  border:1px solid #c7d2fe;
}
.pill.warn{
  background:#fff7ed;
  color:#9a3412;
  border:1px solid #fed7aa;
}
.hs-diff{
  font-weight:700;
}

.pill.danger{
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca;
}
.hs-over{
  font-weight:800;
  color:#b91c1c;
}