/* Sistema de diseño ligero (UX-0, Parte 1). Sin build: variables + sobreeescritura de Bootstrap. */

:root {
  --app-primary: #1d4ed8;
  --app-primary-dark: #1e3a8a;
  --app-bg: #f1f5f9;
  --app-surface: #ffffff;
  --app-border: #cbd5e1;
  --app-text: #0f172a;
  --app-muted: #475569;
  --app-success: #15803d;
  --app-warning: #92400e;
  --app-danger: #b91c1c;
  --app-info: #0e7490;
  --app-radius-sm: 8px;
  --app-radius-md: 12px;
  --app-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  --app-shadow-lg: 0 4px 14px rgba(15, 23, 42, 0.12);
  --app-space-1: 0.25rem;
  --app-space-2: 0.5rem;
  --app-space-3: 1rem;
  --app-space-4: 1.5rem;
  --app-space-5: 2.5rem;

  /* Navegación: acento por grupo, medida del riel y duraciones. */
  --app-acento-home: #1d4ed8;
  --app-acento-operacion: #0e7490;
  --app-acento-almacen: #15803d;
  --app-acento-gestion: #92400e;
  --app-acento-admin: #475569;
  --app-acento-neutral: #334155;
  --app-nav-ancho: 17.5rem;
  --app-nav-ancho-plegado: 4.5rem;
  --app-nav-alto: 2.75rem;
  --app-nav-duracion: 150ms;
  --app-nav-riel: 3px;
  --app-nav-hover: #e2e8f0;
  --app-nav-activo: #eff6ff;

  /* Coherencia Bootstrap: todo el proyecto sale del mismo primario. */
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 29, 78, 216;
  --bs-link-color: var(--app-primary);
  --bs-link-hover-color: var(--app-primary-dark);
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-border-color: var(--app-border);
  --bs-success: var(--app-success);
  --bs-warning: #b45309;
  --bs-danger: var(--app-danger);
  --bs-info: var(--app-info);
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--app-text);
  background: var(--app-bg);
}

/* Navegación lateral: grupos, secciones plegables, insignias y pie. */
.app-sidebar {
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
  width: var(--app-nav-ancho);
  transition: width var(--app-nav-duracion) ease;
}

@media (min-width: 992px) {
  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-3);
  flex: 1 1 auto;
}

.app-grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Separación clara entre grupos: línea y más aire (salvo en el primero). */
.app-grupo + .app-grupo {
  margin-top: var(--app-space-2);
  padding-top: var(--app-space-3);
  border-top: 1px solid var(--app-border);
}

.app-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 var(--app-space-1) var(--app-space-2);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--app-grupo-acento, var(--app-muted));
}

.app-seccion-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--app-space-2);
  width: 100%;
  min-height: var(--app-nav-alto);
  padding: var(--app-space-1) var(--app-space-2);
  border: 0;
  border-radius: var(--app-radius-sm);
  background: none;
  color: var(--app-text);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  transition: background var(--app-nav-duracion) ease, transform var(--app-nav-duracion) ease;
}

.app-seccion-toggle:hover {
  background: var(--app-nav-hover);
}

/* La sección que contiene la entrada activa, con el color de acento de su grupo. */
.app-seccion-toggle.seccion-activa {
  color: var(--app-grupo-acento, var(--app-primary));
}

/* Suma de las insignias de la sección: solo se ve plegada (desplegada, cada entrada lleva la suya). */
.app-insignia-seccion {
  margin-inline-start: auto;
  margin-inline-end: var(--app-space-1);
}

.app-seccion-toggle[aria-expanded="true"] .app-insignia-seccion {
  display: none;
}

.app-seccion-toggle:active {
  transform: scale(0.98);
}

.app-seccion-texto {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.app-seccion-chevron {
  transition: transform var(--app-nav-duracion) ease;
}

.app-seccion-toggle[aria-expanded="true"] .app-seccion-chevron {
  transform: rotate(180deg);
}

/* Entradas: altura uniforme, icono teñido y riel de acento en la activa. */
.app-entradas {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  gap: 2px;
}

/* Las entradas de una sección van sangradas bajo ella, con una guía vertical sutil; texto normal e icono menor. */
.app-seccion-panel {
  margin-left: 1.1rem;
  padding-left: var(--app-space-1);
  border-left: 1px solid var(--app-border);
}

.app-seccion-panel .app-enlace {
  font-size: 0.92rem;
}

.app-seccion-panel .app-enlace-icono {
  font-size: 0.9rem;
}

.app-enlace {
  display: flex;
  align-items: center;
  gap: var(--app-space-2);
  min-height: var(--app-nav-alto);
  padding: var(--app-space-1) var(--app-space-2);
  border-left: var(--app-nav-riel) solid transparent;
  border-radius: var(--app-radius-sm);
  color: var(--app-text);
  text-decoration: none;
  transition: background var(--app-nav-duracion) ease, border-color var(--app-nav-duracion) ease,
    transform var(--app-nav-duracion) ease;
}

.app-enlace {
  position: relative;
}

.app-enlace:hover {
  background: var(--app-nav-hover);
  color: var(--app-text);
}

.app-enlace:active {
  transform: scale(0.98);
}

.app-enlace-icono {
  color: var(--app-grupo-acento, var(--app-muted));
  transition: color var(--app-nav-duracion) ease, transform var(--app-nav-duracion) ease;
}

.app-enlace:hover .app-enlace-icono {
  transform: translateX(2px);
}

.app-enlace-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-enlace.active {
  background: color-mix(in srgb, var(--app-grupo-acento, var(--app-primary)) 12%, transparent);
  border-left-color: var(--app-grupo-acento, var(--app-primary));
  font-weight: 700;
}

.app-enlace.disabled {
  color: var(--app-muted);
}

/* Insignias de contador: discretas y con una pulsación única (JS). */
.app-insignia {
  margin-inline-start: auto;
  min-width: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--app-grupo-acento, var(--app-primary));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.app-insignia-na {
  background: var(--app-nav-hover);
  color: var(--app-muted);
}

.app-insignia.app-pulso {
  animation: app-pulso 600ms ease-out 1;
}

@keyframes app-pulso {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

/* Pie del menú: iniciales, usuario, rol y salida. */
.app-nav-pie {
  display: flex;
  align-items: center;
  gap: var(--app-space-2);
  margin-top: auto;
  padding-top: var(--app-space-3);
  border-top: 1px solid var(--app-border);
}

.app-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--app-primary);
  color: #fff;
  font-weight: 700;
  flex: 0 0 auto;
}

.app-nav-pie-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.app-nav-pie-usuario {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-nav-pie-rol {
  font-size: 0.8rem;
  color: var(--app-muted);
}

/* Modo «solo iconos» (plegado del riel): el título completo sale en title. */
.app-nav-plegado .app-sidebar {
  width: var(--app-nav-ancho-plegado);
}

.app-nav-plegado .app-enlace-texto,
.app-nav-plegado .app-grupo-titulo span,
.app-nav-plegado .app-nav-pie-texto,
.app-nav-plegado .app-nav-pie-salir,
.app-nav-plegado .app-nav-pie-clave,
.app-nav-plegado .app-seccion-texto span {
  display: none;
}

.app-nav-plegado .app-grupo-titulo,
.app-nav-plegado .app-enlace,
.app-nav-plegado .app-seccion-toggle {
  justify-content: center;
}

/* Plegado: las insignias pasan a un punto en la esquina del icono (el número queda en el title). */
.app-nav-plegado .app-insignia {
  position: absolute;
  top: 0.35rem;
  right: 0.6rem;
  min-width: 0;
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.app-nav-plegado .app-seccion-toggle {
  position: relative;
}

.app-nav-plegado .app-seccion-chevron {
  display: none;
}

.app-nav-plegado .app-seccion-panel {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.app-nav-plegado .app-nav-pie {
  flex-direction: column;
}

.app-nav-plegado .app-nav-pie .btn {
  padding-inline: 0.5rem;
}

.app-nav-plegar {
  align-self: flex-end;
  min-height: 44px;
}

/* Cabecera: sombra sutil al desplazar y buscador con foco de acento. */
.app-cabecera {
  transition: box-shadow var(--app-nav-duracion) ease;
}

.app-cabecera.app-con-sombra {
  box-shadow: var(--app-shadow);
}

.app-buscador {
  max-width: 30rem;
  transition: max-width var(--app-nav-duracion) ease;
}

.app-buscador:focus-within {
  max-width: 36rem;
}

.app-buscador-input:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
  position: relative;
  z-index: 2;
}

.app-buscador-atajo {
  font-weight: 700;
  color: var(--app-muted);
}

/* Modo oscuro del sistema si ya se admite: se mantiene el contraste AA. */

/* Tarjetas. */
.card {
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow);
}

.card-stat {
  border-left: 4px solid var(--app-border);
}

.card-stat .stat-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

/* Botones con iconos: el icono nunca sustituye al texto. */
.btn-primary {
  background: var(--app-primary);
  border-color: var(--app-primary);
}

.btn-primary:hover {
  background: var(--app-primary-dark);
  border-color: var(--app-primary-dark);
}

/* Tablas: hover, cabecera, números a la derecha. */
.table thead th {
  background: #f8fafc;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--app-muted);
  white-space: nowrap;
}

.table-hover tbody tr:hover {
  background: #eff6ff;
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Tablas largas (libros): región de desplazamiento propia para que la
   cabecera fija sirva sin pelear con la barra superior. */
.tabla-larga {
  max-height: 65vh;
  overflow: auto;
}

/* Nombres largos: truncado con el texto completo en title. */
.texto-truncado {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Etiquetas de estado: texto + icono + color, nunca solo color. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Alertas y mensajes. */
.alert {
  border-radius: var(--app-radius-sm);
}

/* Paginación centrada. */
.pagination {
  --bs-pagination-active-bg: var(--app-primary);
  --bs-pagination-active-border-color: var(--app-primary);
}

/* Barra de filtros compacta en tarjeta. */
.filter-bar {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow);
  padding: var(--app-space-3);
  margin-bottom: var(--app-space-3);
}

/* Estados vacíos. */
.empty-state {
  text-align: center;
  padding: var(--app-space-5) var(--app-space-3);
  background: var(--app-surface);
  border: 1px dashed var(--app-border);
  border-radius: var(--app-radius-md);
  color: var(--app-muted);
}

.empty-state .bi {
  font-size: 2.2rem;
  display: block;
  margin-bottom: var(--app-space-2);
}

/* Formularios estándar: tarjeta centrada, máx. 720 px. */
.form-card {
  max-width: 720px;
  margin-inline: auto;
}

.form-card .card {
  border-radius: var(--app-radius-md);
}

/* Acciones: Cancelar izquierda, primario derecha; en móvil fijas abajo. */
.form-actions {
  background: transparent;
}

@media (max-width: 767px) {
  .form-actions {
    position: sticky;
    bottom: 0;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: var(--app-space-2);
    box-shadow: var(--app-shadow-lg);
  }
}

@media (min-width: 768px) {
  .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
  }
}

.required-mark {
  color: var(--app-danger);
  font-weight: 700;
}

.field-error {
  color: var(--app-danger);
}

/* En táctil, paginación y botones pequeños a 48 px (UX-2 L4). */
@media (pointer: coarse) {
  .pagination .page-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }

  .btn-sm {
    min-height: 48px;
  }
}

/* Sin scroll horizontal accidental; clip conserva el sticky (UX-2 L4). */
main {
  min-width: 0;
  overflow-x: clip;
}

/* Primera columna fija en tablas de libros con desplazamiento propio. */
.tabla-larga td:first-child,
.tabla-larga th:first-child {
  position: sticky;
  left: 0;
  background: var(--app-surface);
  z-index: 1;
}

.tabla-larga thead th:first-child {
  z-index: 3;
}

/* Código grande en préstamo/devolución. */
.code-result {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Login: campos grandes ya en base; tarjeta centrada. */
.login-card {
  max-width: 420px;
  margin-inline: auto;
}

/* Etiquetas QR e impresión: sin menú ni barras. */
@media print {
  .no-print {
    display: none !important;
  }
}

/* Indicador de carga HTMX: oculto salvo durante la petición. */
.htmx-indicator {
  display: none;
  vertical-align: middle;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
}

/* Accesibilidad (UX-2 L5): skip link y foco visible. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--app-surface);
  padding: var(--app-space-2) var(--app-space-3);
  border-radius: 0 0 var(--app-radius-sm) 0;
}

.skip-link:focus-visible {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--app-primary);
  outline-offset: 2px;
}

/* Marca y área táctil. */
.navbar-brand {
  font-weight: 700;
}

#menuLateral .nav-link {
  font-size: 1.02rem;
}

/* Selector buscable: filas táctiles y lista con desplazamiento propio. */
.buscable-opcion {
  min-height: 44px;
  cursor: pointer;
}
.buscable-lista {
  max-height: 40vh;
  overflow-y: auto;
  background: var(--app-surface);
}
@media (max-width: 767px) {
  .buscable-lista {
    max-height: 60vh;
  }
}
.buscable-chip {
  min-height: 44px;
}

/* Opciones segmentadas: 2 columnas en móvil, envolviendo en escritorio. */
.opciones-botones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 992px) {
  .opciones-botones {
    display: flex;
    flex-wrap: wrap;
  }
}
.opciones-botones .opciones-etiqueta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Accesibilidad: sin animaciones ni pulsaciones si el sistema lo pide. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Lienzo de la firma del cliente: ancho completo, alto cómodo en móvil y sin desplazamiento al firmar. */
.firma-marco {
  width: 100%;
}

.firma-lienzo {
  display: block;
  width: 100%;
  height: 240px;
  touch-action: none;
  cursor: crosshair;
}

/* Fila nueva del pedido de material (ficha de la visita): rejilla fuera de la tabla. El buscador tiene un ancho
   mínimo, la cantidad y «quitar» quedan alineadas con su parte SUPERIOR y los resultados ocupan todo el ancho
   debajo, sin empujarlas. Táctil ≥ 48 px. */
.fila-nueva {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem 3rem;
  grid-template-areas: "entrada cantidad quitar" "aviso aviso aviso" "res res res";
  column-gap: 0.5rem;
  align-items: start;
}

.fila-nueva .selector-material {
  display: contents;
}

.fila-nueva .sm-entrada {
  grid-area: entrada;
  min-width: 0;
}

.fila-nueva .sm-entrada .form-control {
  min-width: 8rem;
}

.fila-nueva .sm-resultados {
  grid-area: res;
}

.fila-nueva .sm-resultados:empty {
  display: none;
}

.fila-nueva .fila-cantidad {
  grid-area: cantidad;
}

.fila-nueva .fila-quitar {
  grid-area: quitar;
}

.fila-nueva .fila-aviso {
  grid-area: aviso;
}

.fila-nueva .htmx-indicator {
  position: absolute;
}

.fila-nueva .form-control,
.fila-nueva .btn {
  min-height: 48px;
}

.fila-nueva .fila-quitar .btn {
  width: 100%;
}

@media (min-width: 576px) {
  .fila-nueva {
    grid-template-columns: minmax(18rem, 1fr) 7rem 3rem;
  }
}

/* Secciones plegables (seguimiento): el título y el chevrón en una línea; el chevrón gira al abrir. */
.seccion-plegable > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

.seccion-plegable > summary::-webkit-details-marker {
  display: none;
}

.seccion-plegable > summary .bi-chevron-down {
  transition: transform 0.15s;
}

.seccion-plegable[open] > summary .bi-chevron-down {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .seccion-plegable > summary .bi-chevron-down {
    transition: none;
  }
}