/* Componentes — Fase 1 del rediseño visual.
   Mismos nombres de clase que ya usaba toda la app (para no tocar ningún
   HTML/JS existente): solo se actualizan sus valores a tokens y se quitan
   degradados/glow de color. Lo marcado "NUEVO" es infraestructura para
   fases siguientes — todavía no se usa en ninguna pantalla real. */

/* ---------- Botón: primario / secundario / fantasma (NUEVO) / peligro ---------- */
.btn-primario {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primario:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }

.btn-secundario {
  background: var(--navy4);
  color: var(--text);
  border: 1px solid var(--borde);
  box-shadow: none;
}
.btn-secundario:hover { background: var(--navy3); border-color: var(--text3); }

/* NUEVO — botón sin fondo, para acciones de bajo énfasis dentro de una fila/toolbar. */
.btn-fantasma {
  background: transparent;
  color: var(--text2);
  border: 1px solid transparent;
  box-shadow: none;
}
.btn-fantasma:hover { background: var(--navy4); color: var(--text); }

.btn-peligro {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.22);
  box-shadow: none;
}
.btn-peligro:hover { background: rgba(239, 68, 68, 0.18); }

.btn-chico { padding: 6px 12px; font-size: 12px; border-radius: var(--radius-sm); }

/* ---------- Pestañas de acceso / configuración ---------- */
.tabs-acceso {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--borde);
}
.panel-tabs { padding: 6px 10px 0; }
.panel-tabs .tabs-acceso { margin-bottom: 0; border-bottom: none; }

.tab-acceso {
  flex: 1;
  padding: 9px;
  text-align: center;
  cursor: pointer;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text2);
  border-radius: 0;
  box-shadow: none;
  border-bottom: 2px solid transparent;
}
.tab-acceso.activo {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

/* ---------- Card (Panel) ---------- */
.panel {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r2);
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.panel h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  margin: 0 0 16px;
  padding-bottom: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  border-bottom: 1px solid var(--borde);
}
.panel h3::before {
  content: '';
  width: 4px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--accent);
}

/* ---------- PageHeader (NUEVO) ---------- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.page-header .page-header-texto h2 { margin: 0 0 4px; }
.page-header .page-header-descripcion { color: var(--text3); font-size: 12.5px; margin: 0; max-width: 640px; }
.page-header .page-header-acciones { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* ---------- Input / Select / Textarea ---------- */
.formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  align-items: end;
}
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 12px; color: var(--text2); font-weight: 500; }

/* :not([type=checkbox]):not([type=radio]) a propósito: esta regla es para
   inputs de TEXTO — sin la exclusión, también le daba a los checkboxes
   padding:7px 11px + min-height:2.5rem + borde, convirtiéndolos en una
   caja de 40px de alto en vez de su cuadrito nativo (confirmado con
   Playwright: el checkbox medía rect.height=40 en vivo). */
.campo input:not([type="checkbox"]):not([type="radio"]), .campo select, .campo textarea {
  min-height: 2.5rem;
  padding: 7px 11px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, 0.03);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.campo input:not([type="checkbox"]):not([type="radio"]):focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft-strong);
  outline: none;
}

/* Checkbox/radio: tamaño nativo, etiqueta al lado con un poco de aire,
   nunca estirados por .campo { display:flex }. */
.campo label:has(input[type="checkbox"]), .campo label:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
}
.campo input[type="checkbox"], .campo input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
}
/* :focus-visible es más específico que la regla ":focus { outline: none }"
   de arriba (misma cantidad de clases/elementos, pero declarada después),
   así que el anillo sólido SÍ se ve al navegar con Tab aunque el clic con
   mouse no lo muestre. */
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- Checkbox / Switch ---------- */
/* El navegador ya dibuja el check nativo alineado junto al texto cuando el
   <label> envuelve a ambos (patrón que ya usa toda la app) — solo hacía
   falta que el color del check coincida con el acento, no con el azul
   nativo del sistema. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* NUEVO — interruptor (toggle), para cuando una fase futura lo necesite. */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-via {
  width: 36px; height: 20px; border-radius: 999px;
  background: var(--navy4); border: 1px solid var(--borde);
  transition: background-color 0.15s ease;
  position: relative; flex-shrink: 0;
}
.switch-via::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}
.switch input:checked + .switch-via { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-via::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-via { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- Table / Badge de estado ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); }
th { color: var(--text2); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(15, 23, 42, 0.02); }

/* Encabezado fijo: se activa SOLO dentro de .tabla-scroll (un contenedor
   con su propio scroll interno), nunca contra el scroll de la página —
   así no hay que coordinar su offset con la barra superior/pestañas. */
.tabla-scroll { max-height: 560px; overflow-y: auto; border-radius: var(--radius-sm); }
.tabla-scroll th { position: sticky; top: 0; background: #fff; z-index: 5; box-shadow: 0 1px 0 rgba(148, 163, 184, 0.16); }
.col-numero { text-align: right; }
.col-acciones { text-align: right; white-space: nowrap; }
td.col-numero { font-variant-numeric: tabular-nums; }

.th-ordenable { cursor: pointer; user-select: none; }
.th-ordenable:hover { color: var(--text); }
.th-ordenable::after { content: '↕'; margin-left: 4px; opacity: 0.35; font-size: 10px; }
.th-ordenable.orden-asc::after { content: '↑'; opacity: 1; color: var(--accent); }
.th-ordenable.orden-desc::after { content: '↓'; opacity: 1; color: var(--accent); }

.fila-oculta-paginacion { display: none; }

.tabla-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.tabla-paginacion:empty { display: none; margin-top: 0; }
.tabla-paginacion-info { font-size: 12px; color: var(--text2); white-space: nowrap; }
.tabla-paginacion button:disabled { opacity: 0.4; cursor: not-allowed; }

.estado-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.estado-activo, .estado-disponible, .estado-abierto, .estado-registrado, .estado-confirmado, .estado-activa { color: var(--green); background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.26); }
.estado-inactivo, .estado-bloqueada, .estado-cerrado, .estado-anulado, .estado-cancelada { color: var(--red); background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.25); }
.estado-en_mantenimiento, .estado-reservada, .estado-en_inspeccion, .estado-reservado, .estado-bloqueado { color: var(--amber); background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.28); }
.estado-borrador { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft-strong); }
.estado-reversado, .estado-liberada, .estado-consumida { color: var(--purple); background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.26); }

/* NUEVO — EmptyState: para retomar en las fases que reconstruyan cada tabla. */
.estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  color: var(--text3);
  text-align: center;
}
.estado-vacio .estado-vacio-icono { color: var(--text3); opacity: 0.7; }
.estado-vacio .estado-vacio-titulo { font-size: 13.5px; font-weight: 700; color: var(--text2); }
.estado-vacio .estado-vacio-descripcion { font-size: 12.5px; max-width: 320px; }

.mensaje {
  border-radius: var(--r);
  padding: 9px 13px;
  font-size: 13px;
  margin-bottom: 12px;
  border: 1px solid;
}
.mensaje-error { color: #b91c1c; background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.28); }
.mensaje-ok { color: #047857; background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.28); }

.ayuda { color: var(--text3); font-size: 12px; margin-top: 4px; }
.indent-nivel { color: var(--text3); }

.input-cantidad { text-align: right; }

.barra-tabla {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.barra-tabla input[type="search"] {
  flex: 1;
  min-width: 160px;
  min-height: 2.25rem;
  padding: 6px 11px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, 0.03);
  font-size: 13px;
}
.barra-tabla input[type="search"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-strong); outline: none; }
.barra-tabla input[type="search"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.barra-tabla .contador-seleccion { font-size: 12px; color: var(--text2); font-weight: 600; white-space: nowrap; }
.fila-oculta-busqueda { display: none; }
th.col-chk, td.col-chk { width: 34px; text-align: center; }

.select-con-boton { display: flex; gap: 6px; align-items: center; }
.select-con-boton select { flex: 1; min-width: 0; }
.select-con-boton .combo-select { flex: 1; min-width: 0; }
/* Selector de hijo DIRECTO a propósito: el botón "+ Nuevo" es hijo
   directo de .select-con-boton, pero el <select> que mejorarSelect()
   envuelve en tiempo de ejecución queda dos niveles más adentro
   (.select-con-boton > .combo-select > .combo-select-boton). Con el
   selector descendiente de antes ("button" sin ">"), esta regla también
   pisaba el padding del combo-select-boton (quitándole los 30px de la
   derecha que dejan espacio para la flecha) — el texto quedaba metido
   debajo del ícono. */
.select-con-boton > button { white-space: nowrap; flex-shrink: 0; padding: 6px 9px; }

/* ---------- Combo con buscador (envuelve cualquier <select> real) ---------- */
.combo-select { position: relative; }
.combo-select-nativo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: none;
  opacity: 0;
  pointer-events: none;
}
.combo-select-boton {
  /* display:block (no inline-flex) a propósito: el reset global de
     <button> en base.css pone display:inline-flex + justify-content:center,
     y en flexbox justify-content manda sobre text-align para posicionar
     el contenido — el texto se veía centrado aunque text-align:left
     estuviera presente. Confirmado visualmente con Playwright, no solo
     leyendo CSS: getComputedStyle reportaba text-align:left pero el
     render real mostraba el texto centrado y cortado por ambos lados. */
  display: block;
  width: 100%;
  min-height: 2.5rem;
  padding: 7px 30px 7px 11px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, 0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.combo-select-boton:focus, .combo-select-boton:hover { border-color: var(--accent); outline: none; }
.combo-select-boton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.combo-select-boton:active { transform: none; }
.combo-select-deshabilitado .combo-select-boton { cursor: not-allowed; opacity: 0.6; background-color: rgba(15, 23, 42, 0.05); }

.combo-select-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1.5px solid var(--borde);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px;
}
.combo-select-buscar {
  width: 100%;
  min-height: 2.1rem;
  padding: 6px 10px;
  margin-bottom: 6px;
  border: 1.5px solid var(--borde);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  background: rgba(15, 23, 42, 0.03);
}
.combo-select-buscar:focus { border-color: var(--accent); outline: none; }
.combo-select-buscar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.combo-select-opciones { max-height: 220px; overflow-y: auto; }
.combo-select-opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.combo-select-opcion:hover { background: var(--accent-soft); }
.combo-select-opcion.seleccionada { font-weight: 700; color: var(--accent); }
.combo-select-check { width: 14px; flex-shrink: 0; color: var(--accent); font-weight: 700; }
.combo-select-sin-resultados { padding: 7px 8px; font-size: 12.5px; color: var(--text3); }

/* ---------- Modal (centrado) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 13, 26, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  z-index: 1300;
  overflow-y: auto;
}
.modal-caja {
  background: #fff;
  border-radius: var(--r2);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--borde);
}
.modal-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.modal-cerrar {
  background: none;
  border: none;
  box-shadow: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text2);
  padding: 2px 8px;
}
.modal-cerrar:hover { color: var(--red); }
.modal-cuerpo { padding: 18px 20px; overflow-y: auto; }
.modal-cuerpo .panel { box-shadow: none; border: none; padding: 0; margin: 0; }

/* ---------- Drawer (panel lateral) — NUEVO, infraestructura para fases siguientes.
   Reutiliza el mismo patrón de modal.js: el contenido se REUBICA dentro
   (nunca se clona/recrea), así que conserva ids, listeners y validaciones. ---------- */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 13, 26, 0.45);
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
}
.drawer-panel {
  background: #fff;
  width: 100%;
  max-width: 480px;
  height: 100%;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--borde);
}
.drawer-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.drawer-cerrar {
  background: none;
  border: none;
  box-shadow: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text2);
  padding: 2px 8px;
}
.drawer-cerrar:hover { color: var(--red); }
.drawer-cuerpo { padding: 20px 22px; overflow-y: auto; flex: 1; }

/* ---------- Vista de material (fieldset agrupado) ---------- */
.vista-material {
  grid-column: 1 / -1;
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 12px 14px 14px;
  margin: 4px 0;
}
.vista-material legend {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 6px;
}
.subcampos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 10px;
}