/* Ajustes sobre Bootstrap */

body {
  background-color: #f5f7fa;
}

.navbar-brand {
  letter-spacing: 0.2px;
}

/* ---------- Barra del listado (título, buscador y botones) ---------- */

.barra-listado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.buscador {
  position: relative;
  flex: 1 1 16rem;
  max-width: 26rem;
}

.buscador .icono-buscar {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  opacity: 0.55;
  pointer-events: none;
}

.buscador input {
  padding-left: 1.9rem;
}

/* ---------- Tabla de facturas ---------- */

/* En pantallas pequeñas la tabla se puede desplazar; en un ordenador entra
   entera, porque las columnas se reparten el ancho disponible. */
.tabla-caja {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
}

.tabla-facturas {
  width: 100%;
  /* Por debajo de este ancho, con catorce columnas, algún título no cabría
     entero: la tabla se desplaza en vez de recortarlos. De ahí para arriba,
     títulos completos y sin barra de desplazamiento. */
  min-width: 69rem;
  table-layout: fixed;
  font-size: 0.82rem;
  margin-bottom: 0;
}

.tabla-facturas th,
.tabla-facturas td {
  padding: 0.25rem 0.25rem;
  vertical-align: middle;
}

/* Los títulos de las columnas van en una sola línea, siempre, y centrados */
.tabla-facturas thead th {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.74rem;
  text-transform: uppercase;
  color: #5b6470;
  border-bottom: 2px solid #dee2e6;
}

.tabla-facturas tbody tr:hover {
  background: #f1f5fb;
}

/* Reparto de las columnas: la de proveedor se queda con lo que sobra, así la
   tabla entra entera en la pantalla sin barra de desplazamiento y los títulos
   caben en una sola línea */
/* Lo que mide cada columna con los datos de verdad (y el título, que va en una
   sola línea) para el ancho de los importes habituales */
.tabla-facturas .col-fecha {
  width: 7.2%;
}

.tabla-facturas .col-numero {
  width: 7.4%;
}

.tabla-facturas .col-cif {
  width: 7.6%;
}

.tabla-facturas .col-importe {
  width: 5.2%;
}

/* Cada columna de IVA necesita sitio para la cuota y para el aspa de quitarla */
.tabla-facturas .col-iva {
  width: 5.4%;
}

/* «Importe IVA» es el título más largo: se lleva algo más de ancho */
.tabla-facturas .col-iva-total {
  width: 7.9%;
}

.tabla-facturas .col-total {
  width: 6.8%;
}

/* El estado es una sola palabra («Procesada» o «Revisar»), pero la insignia va
   al tamaño de siempre: el ancho es el justo para que quepa entera incluso con
   la tabla en su ancho mínimo (69rem), que es el peor caso */
.tabla-facturas .col-estado {
  width: 7.6%;
}

/* La columna de acciones es solo el botón de tres puntos */
.tabla-facturas .col-acciones {
  width: 3.6%;
}

/* Lo que no cabe en una celda se corta y se ve entero en el tooltip */
.celda-importe {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* El estado va centrado en su columna, en horizontal y en vertical (line-height 1
   para que la línea no le deje hueco de sobra por debajo) */
.celda-estado {
  text-align: center;
  vertical-align: middle;
  line-height: 1;
}

/* La insignia conserva el tamaño de siempre (el de Bootstrap, el de antes de
   compactar la tabla): es lo único de la fila que se lee de un vistazo. Si
   algún día el texto no cupiera, se recorta en vez de desbordar la celda. */
.celda-estado .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.35em 0.65em;
  font-size: 0.75rem;
  vertical-align: middle;
}

.celda-acciones {
  text-align: center;
}

/* Los campos de la tabla ocupan el ancho de su columna y no parecen cajas
   hasta que se usan */
.tabla-facturas input.form-control {
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 0.12rem 0.3rem;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.campo-editable,
.campo-proveedor {
  border-color: transparent;
  background-color: transparent;
}

.campo-editable:hover,
.campo-proveedor:hover,
.campo-editable:focus,
.campo-proveedor:focus {
  border-color: var(--bs-border-color);
  background-color: var(--bs-body-bg);
}

/* Mientras se guarda una fila, se atenúa un poco */
tr.guardando {
  opacity: 0.55;
}

/* ---------- Tabla de proveedores ---------- */

.tabla-proveedores {
  min-width: 48rem;
  font-size: 0.9rem;
  margin-bottom: 0;
}

.tabla-proveedores thead th {
  white-space: nowrap;
}

/* ---------- Columnas de IVA ---------- */

.iva-caja {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
}

.iva-caja input {
  flex: 1 1 auto;
}

/* Cada tipo de IVA tiene dos botones: el aspa (quitar el tipo de la factura) y
   el tanto por ciento (ponerlo). Solo se ve el que toca según el estado. */
.iva-caja[data-asignado="0"] input,
.iva-caja[data-asignado="0"] .boton-iva.quitar {
  display: none;
}

.iva-caja[data-asignado="1"] .boton-iva.poner {
  display: none;
}

.boton-iva {
  border: 0;
  background: transparent;
  color: #8a94a0;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.18rem 0.2rem;
  border-radius: 0.25rem;
}

.boton-iva:hover {
  background: #e7ecf3;
  color: var(--bs-primary);
}

.boton-iva.quitar:hover {
  color: var(--bs-danger);
}

.iva-caja[data-asignado="0"] .boton-iva.poner {
  border: 1px dashed #c3ccd8;
  width: 1.7rem;
}

.iva-caja[data-asignado="0"] .boton-iva.poner:hover {
  border-style: solid;
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

/* Tipo de IVA apuntado al que todavía le falta la cuota (no había bruto) */
.iva-caja input:placeholder-shown {
  background: #fff8e1;
  border: 1px dashed #d9b400 !important;
}

/* ---------- Ficha del archivo que se está subiendo ---------- */

.archivo-elegido {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: #f8fafc;
  font-size: 0.86rem;
}

.archivo-nombre {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.archivo-peso {
  margin-left: auto;
  white-space: nowrap;
  font-size: 0.8rem;
  color: #6c757d;
}

/* ---------- Avisos flotantes (toasts) ---------- */

.zona-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast-facturas {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.5rem 0.6rem 0.5rem 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 4px solid var(--bs-secondary);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--bs-body-color);
  box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.18);
  font-size: 0.86rem;
  line-height: 1.3;
  /* Entra deslizándose desde la derecha y se va por donde vino */
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-facturas.visible {
  opacity: 1;
  transform: translateX(0);
}

.toast-facturas.saliendo {
  opacity: 0;
  transform: translateX(0.75rem) scale(0.97);
}

.toast-facturas.exito {
  border-left-color: var(--bs-success);
}

.toast-facturas.error {
  border-left-color: var(--bs-danger);
}

.toast-facturas.info {
  border-left-color: var(--bs-info);
}

.toast-icono {
  line-height: 1.3;
}

.toast-texto {
  flex: 1 1 auto;
}

.toast-cerrar {
  border: 0;
  background: transparent;
  color: #8a94a0;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0 0.15rem;
}

.toast-cerrar:hover {
  color: var(--bs-body-color);
}

@media (prefers-reduced-motion: reduce) {
  .toast-facturas {
    transition: none;
  }
}

/* ---------- Botón de acciones de cada fila ---------- */

.boton-menu {
  border: 0;
  background: transparent;
  color: #55606d;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 0.3rem;
  border-radius: 0.25rem;
}

.boton-menu:hover,
.boton-menu:focus-visible {
  background: #e7ecf3;
  color: var(--bs-primary);
}

/* ---------- Capas flotantes (menú de acciones y sugerencias) ---------- */

/* Se colocan con position:fixed para que no las recorte la tabla, que en las
   pantallas pequeñas se desplaza. */
.capa-flotante {
  position: fixed;
  z-index: 1080;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  padding: 0.25rem;
  min-width: 12rem;
  max-height: 60vh;
  overflow-y: auto;
}

.menu-acciones {
  display: flex;
  flex-direction: column;
}

.menu-opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.menu-opcion:hover {
  background: #f1f5fb;
}

.menu-opcion.peligro {
  color: var(--bs-danger);
}

.menu-opcion.peligro:hover {
  background: #fdecee;
}

.menu-icono {
  width: 1.1rem;
  text-align: center;
}

.lista-sugerencias {
  display: flex;
  flex-direction: column;
  min-width: 16rem;
}

.sugerencia {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border: 0;
  background: transparent;
  padding: 0.35rem 0.55rem;
  border-radius: 0.375rem;
  text-align: left;
  font-size: 0.85rem;
}

.sugerencia:hover,
.sugerencia.resaltada {
  background: #eaf1ff;
}

.sugerencia-cif {
  color: #6c757d;
  font-size: 0.78rem;
  white-space: nowrap;
}