/* =========================================================
   INFOP v2 — Componentes reutilizables
   Reemplaza el CSS que antes se copiaba dentro de cada .php
   ========================================================= */

/* ---------------- Tarjetas ---------------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  padding:var(--s-5);
}
.card__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); flex-wrap:wrap;
  margin-bottom:var(--s-4);
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line);
}
.card__title{ font-size:var(--fs-md); font-weight:800; }
.card__sub{ color:var(--muted); font-size:var(--fs-xs); margin-top:2px; }

/* Tarjeta de estadística */
.stat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:4px solid var(--infop-600);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  padding:var(--s-5);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.stat-card:hover{ transform:translateY(-2px); box-shadow:var(--sh-3); }
.stat-card__label{
  font-size:var(--fs-xs); font-weight:800;
  text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted);
}
.stat-card__value{
  font-size:var(--fs-2xl); font-weight:800;
  color:var(--infop-800);
  margin:var(--s-2) 0 var(--s-1);
  line-height:1;
}
.stat-card__foot{ font-size:var(--fs-xs); color:var(--faint); }
.stat-card--ok{ border-left-color:var(--ok); }
.stat-card--ok .stat-card__value{ color:var(--ok-ink); }
.stat-card--warn{ border-left-color:var(--warn); }
.stat-card--warn .stat-card__value{ color:var(--warn-ink); }
.stat-card--danger{ border-left-color:var(--danger); }
.stat-card--danger .stat-card__value{ color:var(--danger-ink); }

/* ---------------- Botones ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--ink);
  font-family:inherit; font-size:var(--fs-sm); font-weight:800;
  cursor:pointer;
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  text-decoration:none;
  white-space:nowrap;
}
.btn:hover{ background:var(--infop-50); text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn:disabled, .btn.is-disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.btn--primary{
  background:linear-gradient(135deg, var(--infop-800), var(--infop-600));
  border-color:transparent; color:#fff;
  box-shadow:0 8px 20px rgba(35,79,159,.28);
}
.btn--primary:hover{ background:linear-gradient(135deg, var(--infop-900), var(--infop-700)); }

.btn--ok{ background:var(--ok); border-color:transparent; color:#fff; }
.btn--ok:hover{ background:#15803d; }
.btn--danger{ background:var(--danger); border-color:transparent; color:#fff; }
.btn--danger:hover{ background:#b91c1c; }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--infop-700); }
.btn--ghost:hover{ background:var(--infop-50); }

.btn--sm{ padding:var(--s-2) var(--s-3); font-size:var(--fs-xs); border-radius:var(--r-sm); }
.btn--block{ width:100%; }

/* ---------------- Formularios ---------------- */
.form-grid{ display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }
.field{ display:flex; flex-direction:column; gap:var(--s-2); }
.field--full{ grid-column:1 / -1; }
.field > label{ font-size:var(--fs-sm); font-weight:800; color:var(--ink-2); }
.field .hint{ font-size:var(--fs-xs); color:var(--muted); }

.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field input[type="date"], .field input[type="tel"],
.field input[type="search"], .field select, .field textarea,
.input, .select, .textarea{
  width:100%;
  padding:var(--s-3);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  background:var(--surface);
  font-family:inherit; font-size:var(--fs-base); color:var(--ink);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea, .textarea{ resize:vertical; min-height:88px; }

.field input:focus, .field select:focus, .field textarea:focus,
.input:focus, .select:focus, .textarea:focus{
  outline:none;
  border-color:var(--infop-600);
  box-shadow:0 0 0 4px rgba(43,98,185,.14);
}

.field input:disabled, .field select:disabled, .field textarea:disabled{
  background:var(--surface-2); color:var(--muted); cursor:not-allowed;
}

/* Estado inválido */
.is-invalid{ border-color:var(--danger) !important; background:#fff7f7 !important; }
.is-invalid:focus{ box-shadow:0 0 0 4px rgba(220,38,38,.14) !important; }
.field-error{
  display:flex; align-items:center; gap:var(--s-1);
  font-size:var(--fs-xs); font-weight:700; color:var(--danger-ink);
}

/* Casillas y radios */
.check{
  display:flex; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  cursor:pointer;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.check:hover{ border-color:var(--infop-500); background:var(--infop-50); }
.check input{ width:18px; height:18px; margin-top:2px; accent-color:var(--infop-700); flex-shrink:0; }
.check span{ font-weight:700; font-size:var(--fs-sm); }

/* Barra de filtros */
.filters{
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  align-items:end;
}

/* ---------------- Tablas ---------------- */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
.table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.table th{
  text-align:left;
  padding:var(--s-3) var(--s-4);
  background:var(--surface-2);
  color:var(--muted);
  font-size:var(--fs-xs); font-weight:800;
  text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.table td{
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr:hover{ background:var(--infop-50); }
.table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.table .actions{ display:flex; gap:var(--s-2); white-space:nowrap; }

/* ---------------- Insignias ---------------- */
.badge{
  display:inline-flex; align-items:center; gap:var(--s-1);
  padding:var(--s-1) var(--s-3);
  border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:800;
  white-space:nowrap;
}
.badge--ok{ background:var(--ok-bg); color:var(--ok-ink); }
.badge--warn{ background:var(--warn-bg); color:var(--warn-ink); }
.badge--danger{ background:var(--danger-bg); color:var(--danger-ink); }
.badge--info{ background:var(--info-bg); color:var(--info-ink); }
.badge--neutral{ background:var(--surface-2); color:var(--muted); }

/* ---------------- Alertas ---------------- */
.alert{
  display:flex; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-4);
  border-radius:var(--r-md);
  border-left:4px solid;
  font-size:var(--fs-sm); font-weight:600;
  margin-bottom:var(--s-4);
}
.alert i{ font-size:16px; margin-top:2px; flex-shrink:0; }
.alert--exito{ background:var(--ok-bg); border-color:var(--ok); color:var(--ok-ink); }
.alert--error{ background:var(--danger-bg); border-color:var(--danger); color:var(--danger-ink); }
.alert--aviso{ background:var(--warn-bg); border-color:var(--warn); color:var(--warn-ink); }
.alert--info{ background:var(--info-bg); border-color:var(--info); color:var(--info-ink); }

/* ---------------- Estado vacío ---------------- */
.empty{
  text-align:center;
  padding:var(--s-12) var(--s-5);
  color:var(--muted);
}
.empty i{ font-size:40px; color:var(--line-strong); margin-bottom:var(--s-3); display:block; }
.empty h3{ font-size:var(--fs-md); color:var(--ink-2); margin-bottom:var(--s-1); }
.empty p{ margin:0; font-size:var(--fs-sm); }

/* ---------------- Modal ---------------- */
.modal{
  position:fixed; inset:0; z-index:60;
  display:none;
  align-items:center; justify-content:center;
  padding:var(--s-4);
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(3px);
}
.modal.is-open{ display:flex; }
.modal__box{
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-4);
  width:100%; max-width:620px;
  max-height:90vh; overflow-y:auto;
  padding:var(--s-6);
}
.modal__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3);
  margin-bottom:var(--s-4); padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line);
}
.modal__title{ font-size:var(--fs-md); font-weight:800; }
.modal__close{
  background:none; border:none; cursor:pointer;
  font-size:20px; color:var(--muted); line-height:1;
  padding:var(--s-1);
}
.modal__foot{
  display:flex; justify-content:flex-end; gap:var(--s-2);
  margin-top:var(--s-5); padding-top:var(--s-4);
  border-top:1px solid var(--line);
}

/* ---------------- Gráficas ---------------- */
.chart-wrap{ position:relative; width:100%; height:280px; }
.chart-wrap--tall{ height:340px; }

/* ---------------- Utilidades ---------------- */
.u-muted{ color:var(--muted); }
.u-right{ text-align:right; }
.u-center{ text-align:center; }
.u-nowrap{ white-space:nowrap; }
.u-mt-0{ margin-top:0; }  .u-mt-4{ margin-top:var(--s-4); }
.u-mb-0{ margin-bottom:0; } .u-mb-4{ margin-bottom:var(--s-4); }
.u-row{ display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap; }
.u-hide{ display:none !important; }
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (max-width:768px){
  .modal__box{ padding:var(--s-4); border-radius:var(--r-lg); }
  .chart-wrap{ height:240px; }
  .chart-wrap--tall{ height:280px; }
  .table th, .table td{ padding:var(--s-3); }
}