/* =====================================================================
   componentes.css — Librería de componentes reutilizables.
   Botones, tarjetas, KPI cards, badges, tablas, formularios, alertas,
   modal, panel lateral, pestañas, estados vacíos, rejillas.
   Cada bloque tiene un nombre claro (.boton, .tarjeta, .badge...) y sus
   variantes con doble guion (.boton--primario). Sin clases utilitarias.
   ===================================================================== */

/* ── Botones ───────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  padding: 9px 14px; border-radius: var(--radio-chico); border: 1px solid transparent;
  font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap;
  background: var(--superficie); color: var(--gris-700); border-color: var(--borde);
  transition: background .15s, box-shadow .15s, transform .05s;
}
.boton:hover { background: var(--gris-50); text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton--primario { background: var(--color-secundario); color: #fff; border-color: var(--color-secundario); }
.boton--primario:hover { background: var(--color-primario); }
.boton--exito { background: var(--verde); color: #fff; border-color: var(--verde); }
.boton--peligro { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.boton--naranja { background: var(--naranja); color: #fff; border-color: var(--naranja); }
.boton--oscuro { background: var(--gris-900); color: #fff; border-color: var(--gris-900); }
.boton--fantasma { background: transparent; border-color: transparent; color: var(--gris-600); }
.boton--fantasma:hover { background: var(--gris-100); }
.boton--bloque { width: 100%; }
.boton--chico { padding: 6px 10px; font-size: 13px; }
.boton--icono { padding: 8px; }

/* ── Tarjetas ──────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: var(--esp-5); margin-bottom: var(--esp-4);
}
.tarjeta__titulo { font-size: 22px; margin-bottom: var(--esp-1); }
.tarjeta__subtitulo { font-size: 14px; font-weight: 700; color: var(--gris-700); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--esp-3); }
.tarjeta__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-4); }

/* KPI card (como las del dashboard de soporte) */
.kpi-card { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4); margin: 0; }
.kpi-card__etiqueta { font-size: 12px; font-weight: 600; color: var(--texto-suave); margin-bottom: 4px; }
.kpi-card__valor { font-size: 26px; font-weight: 800; color: var(--color-secundario); line-height: 1; }
.kpi-card__valor--texto { font-size: 16px; }
.kpi-card__icono { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--color-secundario); }
.kpi-card--clic { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.kpi-card--clic:hover { box-shadow: var(--sombra-fuerte); transform: translateY(-1px); }

/* ── Rejillas ──────────────────────────────────────────────────────── */
.rejilla { display: grid; gap: var(--esp-4); margin-bottom: var(--esp-4); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .rejilla--5, .rejilla--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .rejilla--2, .rejilla--3, .rejilla--4, .rejilla--5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .rejilla--2, .rejilla--3, .rejilla--4, .rejilla--5 { grid-template-columns: 1fr; } }

/* ── Badges (estatus, prioridad) ──────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4;
  background: var(--gris-100); color: var(--gris-700); border: 1px solid var(--borde);
}
.badge--azul { background: var(--azul-suave); color: #1d4ed8; border-color: #bfdbfe; }
.badge--verde { background: var(--verde-suave); color: #15803d; border-color: #bbf7d0; }
.badge--rojo { background: var(--rojo-suave); color: #b91c1c; border-color: #fecaca; }
.badge--ambar { background: var(--ambar-suave); color: #b45309; border-color: #fde68a; }
.badge--naranja { background: var(--naranja-suave); color: #c2410c; border-color: #fed7aa; }
.badge--morado { background: var(--morado-suave); color: #6d28d9; border-color: #ddd6fe; }
.badge--solido { color: #fff; border-color: transparent; } /* usar con style="background:#hex" para estatus */
.badge__punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ── Tablas ────────────────────────────────────────────────────────── */
.tabla-contenedor { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--gris-100); vertical-align: middle; }
.tabla thead th { background: var(--gris-50); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); white-space: nowrap; }
.tabla tbody tr:hover { background: var(--gris-50); }
.tabla th[data-ordenable] { cursor: pointer; user-select: none; }
.tabla th[data-ordenable]:hover { background: var(--gris-100); }
.tabla td.numero, .tabla th.numero { text-align: center; }
.tabla--clicable tbody td { cursor: pointer; }
.tabla__pie { padding: var(--esp-2) var(--esp-3); font-size: 12px; color: var(--texto-suave); text-align: right; border-top: 1px solid var(--gris-100); }

/* ── Formularios ───────────────────────────────────────────────────── */
.formulario { display: flex; flex-direction: column; gap: var(--esp-4); }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); }
@media (max-width: 640px) { .formulario__fila { grid-template-columns: 1fr; } }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__etiqueta { font-size: 13px; font-weight: 600; color: var(--gris-700); }
.campo__etiqueta .obligatorio { color: var(--rojo); }
.campo__entrada, .campo select, .campo textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--gris-300); border-radius: var(--radio-chico);
  background: var(--superficie); outline: none; transition: border-color .15s, box-shadow .15s;
}
.campo__entrada:focus, .campo select:focus, .campo textarea:focus { border-color: var(--color-secundario); box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); }
.campo__entrada:disabled { background: var(--gris-50); color: var(--texto-suave); cursor: not-allowed; }
.campo__ayuda { font-size: 12px; color: var(--texto-suave); }
.campo__mensaje { font-size: 12px; color: var(--rojo); }
.campo--error .campo__entrada { border-color: var(--rojo); }
.casilla { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: 13px; cursor: pointer; }
.enlace { font-size: 13px; }

/* ── Alertas / avisos ──────────────────────────────────────────────── */
.alerta { padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-chico); border: 1px solid; margin-bottom: var(--esp-4); font-size: 14px; }
.alerta--exito { background: var(--verde-suave); border-color: #bbf7d0; color: #166534; }
.alerta--error { background: var(--rojo-suave); border-color: #fecaca; color: #991b1b; }
.alerta--aviso { background: var(--ambar-suave); border-color: #fde68a; color: #92400e; }
.alerta--info { background: var(--azul-suave); border-color: #bfdbfe; color: #1e40af; }
.nota { font-size: 12px; color: var(--texto-suave); background: var(--azul-suave); border: 1px solid #bfdbfe; border-radius: var(--radio-chico); padding: var(--esp-3); }

/* ── Modal ─────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: var(--esp-4); }
.modal--abierto { display: flex; }
.modal__fondo { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.modal__caja {
  position: relative; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra-fuerte);
  width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; padding: var(--esp-5);
}
.modal__caja--ancha { max-width: 960px; }
.modal__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--esp-4); }
.modal__titulo { font-size: 18px; font-weight: 700; }
.modal__cerrar { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--texto-suave); padding: 4px; }
.modal__pie { display: flex; justify-content: flex-end; gap: var(--esp-2); margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 1px solid var(--borde); }

/* ── Panel lateral (sheet) ─────────────────────────────────────────── */
.panel-lateral { position: fixed; inset: 0; z-index: 40; display: none; }
.panel-lateral--abierto { display: block; }
.panel-lateral__fondo { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.panel-lateral__caja {
  position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 560px;
  background: var(--superficie); box-shadow: var(--sombra-fuerte); display: flex; flex-direction: column;
}
.panel-lateral__cabecera { padding: var(--esp-5) var(--esp-5) var(--esp-4); border-bottom: 1px solid var(--borde); }
.panel-lateral__cuerpo { flex: 1; overflow-y: auto; padding: var(--esp-4) var(--esp-5); }

/* ── Pestañas ──────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; background: var(--gris-100); padding: 4px; border-radius: var(--radio-chico); margin-bottom: var(--esp-4); overflow-x: auto; }
.tabs__boton { flex: 1; padding: 8px 12px; border: 0; background: transparent; border-radius: 6px; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.tabs__boton--activo { background: var(--superficie); color: var(--color-secundario); box-shadow: var(--sombra); }
.tabs__panel { display: none; }
.tabs__panel--activo { display: block; }

/* ── Estados vacíos ────────────────────────────────────────────────── */
.estado-vacio { text-align: center; padding: var(--esp-6) var(--esp-4); max-width: 480px; margin: 0 auto; }
.estado-vacio__icono { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto var(--esp-4); display: flex; align-items: center; justify-content: center; background: var(--gris-100); color: var(--gris-400); }
.estado-vacio__icono .icono { width: 34px; height: 34px; }
.estado-vacio__icono--rojo { background: var(--rojo-suave); color: var(--rojo); }
.estado-vacio__titulo { font-size: 22px; }
.estado-vacio__texto { color: var(--texto-suave); margin-bottom: var(--esp-5); }

/* ── Utilidades mínimas de disposición ────────────────────────────── */
.fila { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.fila--separar { justify-content: space-between; }
.separador { border: 0; border-top: 1px solid var(--borde); margin: var(--esp-4) 0; }