/* =====================================================================
   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; }
/* Botón de un formulario que ya se está enviando (app.js → "Doble envío"): no admite otro clic */
.boton--procesando, .boton--procesando:disabled { cursor: progress; }
.boton--procesando[data-texto-original]::before {
  content: ""; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; display: inline-block; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; animation: boton-girar .7s linear infinite;
}
@keyframes boton-girar { to { transform: rotate(360deg); } }
.boton--primario { background: var(--color-secundario); color: var(--sobre-marca); 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: var(--sobre-marca); 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: var(--azul-texto); border-color: var(--azul-borde); }
.badge--verde { background: var(--verde-suave); color: var(--verde-texto); border-color: var(--verde-borde); }
.badge--rojo { background: var(--rojo-suave); color: var(--rojo-texto); border-color: var(--rojo-borde); }
.badge--ambar { background: var(--ambar-suave); color: var(--ambar-texto); border-color: var(--ambar-borde); }
.badge--naranja { background: var(--naranja-suave); color: var(--naranja-texto); border-color: var(--naranja-borde); }
.badge--morado { background: var(--morado-suave); color: var(--morado-texto); border-color: var(--morado-borde); }
.badge--solido { color: #fff; border-color: transparent; } /* fondo pleno con texto blanco: solo con colores de la paleta */
.badge--chico { padding: 1px 7px; font-size: 11px; }   /* etiqueta discreta bajo un folio (Entregas › Por entregar, 27/10/2026) */
/* Etiqueta de ESTATUS (tickets, requisiciones, órdenes de compra, estaciones). El color llega en la variable --tono
   (style="--tono: #hex") y de él salen el fondo suave, el borde y un texto oscurecido, igual que las demás etiquetas.
   Así cualquier color que se elija en un catálogo se lee bien y combina con el resto. */
.badge--estatus {
  --tono: var(--gris-500);
  background: color-mix(in srgb, var(--tono) 13%, #fff);
  border-color: color-mix(in srgb, var(--tono) 32%, #fff);
  color: color-mix(in srgb, var(--tono) 72%, #000);
}
.badge--estatus::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tono); flex-shrink: 0; }
.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); }
/* Rejilla de dos columnas para los campos de un formulario (una sola en pantallas chicas). .campo--completo ocupa el renglón entero.
   Vive aquí, y no en catalogos.css, porque la usan los diálogos de todo el sistema. */
.formulario__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); align-items: start; }
.formulario__rejilla .campo--completo, .formulario__rejilla > .subida-fotos, .formulario__rejilla > .formulario__seccion { grid-column: 1 / -1; }
@media (max-width: 640px) { .formulario__rejilla { grid-template-columns: 1fr; } }
/* Encabezado de un grupo de campos dentro de un formulario ("Pieza solicitada") */
.formulario__seccion { display: flex; flex-direction: column; gap: 2px; padding-top: var(--esp-3); border-top: 1px solid var(--borde); }
.formulario__seccion-titulo { font-size: 13px; font-weight: 700; color: var(--gris-700); display: flex; align-items: center; gap: 6px; }
.formulario__seccion-ayuda { font-size: 12px; color: var(--texto-suave); }
.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 color-mix(in srgb, var(--color-secundario) 18%, transparent); }
.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: var(--verde-borde); color: var(--verde-texto); }
.alerta--error { background: var(--rojo-suave); border-color: var(--rojo-borde); color: var(--rojo-texto); }
.alerta--aviso { background: var(--ambar-suave); border-color: var(--ambar-borde); color: var(--ambar-texto); }
.alerta--info { background: var(--azul-suave); border-color: var(--azul-borde); color: var(--azul-texto); }
.nota { font-size: 12px; color: var(--texto-suave); background: var(--azul-suave); border: 1px solid var(--azul-borde); border-radius: var(--radio-chico); padding: var(--esp-3); }

/* ── Modal ─────────────────────────────────────────────────────────── */
/* Botón "?" junto a un estatus: abre el diálogo con todos los estatus y qué significa cada uno (<x-ayuda-estatus>) */
.ayuda-estatus { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-suave); font: 700 12px/1 inherit; cursor: pointer; vertical-align: middle; text-transform: none; letter-spacing: 0; padding: 0; }
.ayuda-estatus:hover { color: var(--azul-texto); border-color: var(--azul-borde); background: var(--azul-suave); }
.ayuda-estatus__caja { max-width: 680px; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--texto); text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; }
.ayuda-estatus__nota { margin: 12px 0 0; font-size: 12px; color: var(--texto-suave); }
.ayuda-estatus__lista { margin: 0; display: grid; gap: 10px; }
.ayuda-estatus__fila { display: grid; grid-template-columns: 210px 1fr; gap: 10px; align-items: start; }
.ayuda-estatus__fila dt, .ayuda-estatus__fila dd { margin: 0; }
.ayuda-estatus__fila dd { font-size: 14px; }
.ayuda-estatus__final { margin-left: 6px; font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 640px) { .ayuda-estatus__fila { grid-template-columns: 1fr; } }

.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; }


/* Select con buscador (data-select-buscador, app.js): un input y, debajo, la lista de opciones que coinciden; el <select> real queda oculto */
.selbus { position: relative; }
.selbus__lista { max-height: 240px; overflow-y: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico); box-shadow: var(--sombra); margin-top: 4px; }
.selbus__opcion { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--texto); cursor: pointer; }
.selbus__opcion:hover, .selbus__opcion--activa { background: var(--azul-suave); color: var(--azul-texto); }
.selbus__nada { padding: 8px 10px; font-size: 12px; color: var(--texto-suave); }