:root {
  --color-fondo: #ffffff;
  --color-fondo-muted: #f5f7fa;
  --color-borde: #e7e9ec;
  --color-texto: #112337;
  --color-texto-muted: #686e77;
  --color-primario: #56c0e7;
  --color-acento: #204ce5;
  --color-acento-texto: #ffffff;
  --color-peligro: #d64545;
  --color-sidebar: #0b1826;
  --color-sidebar-texto: #c3ccd6;
  --color-sidebar-texto-activo: #ffffff;
  --gradiente-acento: var(--color-acento);
  --gradiente-sidebar: var(--color-sidebar);
  --sidebar-ancho: 208px;
  --radio: 11px;
  --sombra-sm: 0 1px 2px rgba(17, 35, 55, 0.06);
  --sombra-md: 0 4px 12px rgba(17, 35, 55, 0.08);
  --sombra-lg: 0 12px 32px rgba(17, 35, 55, 0.12);
  --fuente-marca: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente-marca);
  background: var(--color-fondo-muted);
  color: var(--color-texto);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--color-acento); }

h1 { font-size: 1.4rem; margin: 0 0 1.25rem; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }
h1, h2, h3 { color: var(--color-texto); font-weight: 700; }

button, input[type="submit"] {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-acento-texto);
  background: var(--gradiente-acento);
  border: none;
  border-radius: var(--radio);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  box-shadow: none;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
button:hover, input[type="submit"]:hover { opacity: 0.92; }
button:active, input[type="submit"]:active { transform: scale(0.98); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], select, textarea {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--color-texto);
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px rgba(86, 192, 231, 0.25);
}

/* Buscador: input[type=search] con forma de píldora, más "moderno" que el resto de inputs cuadrados */
input[type="search"] {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--color-texto);
  background: var(--color-fondo-muted);
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]:focus {
  outline: none;
  background: #fff;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px rgba(86, 192, 231, 0.25);
}
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Botón con apariencia de <a>: mismo lenguaje visual que <button>, para acciones primarias tipo "Nuevo X" */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radio);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.boton--primario {
  color: var(--color-acento-texto);
  background: var(--gradiente-acento);
}
.boton--primario:hover { opacity: 0.92; }
.boton--primario:active { transform: scale(0.98); }

/* Barra de herramientas (buscador + filtros) sobre una tabla */
.barra-herramientas { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.barra-herramientas input[type="search"] { min-width: 16rem; }

/* Switch de Activo/Inactivo, sustituye a las etiquetas de texto para ocupar menos espacio */
.switch { position: relative; display: inline-flex; width: 34px; height: 20px; vertical-align: middle; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track { position: absolute; inset: 0; background: #cdd3da; border-radius: 999px; transition: background 0.15s ease; pointer-events: none; }
.switch__track::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.switch input:checked + .switch__track { background: #1e7d32; }
.switch input:checked + .switch__track::before { transform: translateX(14px); }
.switch input:disabled { cursor: default; }
.switch--disabled { cursor: default; opacity: 0.6; }

/* Layout general: sidebar + área principal */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-ancho);
  flex: 0 0 var(--sidebar-ancho);
  background: var(--gradiente-sidebar);
  color: var(--color-sidebar-texto);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  padding: 1.1rem 0.75rem 0.85rem;
}
.sidebar__brand-logo {
  width: 100%;
  max-width: 110px;
  height: auto;
  display: block;
}

.sidebar__nav { flex: 1; padding: 0.5rem 0.75rem; overflow-y: auto; }
.sidebar__seccion {
  margin: 1rem 0.5rem 0.35rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7c8798;
  font-weight: 700;
}
.sidebar__nav .sidebar__seccion:first-child { margin-top: 0.25rem; }

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: 7px;
  color: var(--color-sidebar-texto);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar__link { border-radius: var(--radio); }
.sidebar__link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.sidebar__link--activo {
  background: var(--gradiente-acento);
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(32, 76, 229, 0.35);
}
.sidebar__icono { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; flex: 0 0 1.1rem; }
.sidebar__icono svg { width: 16px; height: 16px; }

.sidebar__usuario {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar__avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: var(--gradiente-acento);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(32, 76, 229, 0.35);
}
.sidebar__usuario-info { display: flex; flex-direction: column; min-width: 0; }
.sidebar__usuario-nombre {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__salir {
  background: none;
  border: none;
  box-shadow: none;
  color: #7c8798;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.sidebar__salir:hover { opacity: 1; color: var(--color-primario); }

/* Popover de confirmación de logout, anclado junto a "Salir" */
.popover-salir {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 1rem;
  right: 1rem;
  z-index: 30;
  background: #fff;
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  padding: 0.9rem;
}
.popover-salir::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 1.4rem;
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1px solid var(--color-borde);
  border-bottom: 1px solid var(--color-borde);
  transform: translateY(-50%) rotate(45deg);
}
.popover-salir__texto { margin: 0 0 0.75rem; font-size: 0.85rem; font-weight: 600; }
.popover-salir__acciones { display: flex; gap: 0.5rem; }
.popover-salir__acciones button { flex: 1; padding: 0.45rem 0.6rem; font-size: 0.8rem; }
.popover-salir__cancelar {
  background: var(--color-fondo-muted);
  color: var(--color-texto);
  box-shadow: none;
  border: 1px solid var(--color-borde);
}
.popover-salir__cancelar:hover { opacity: 1; border-color: var(--color-primario); }
.popover-salir__confirmar { background: var(--color-peligro); box-shadow: 0 2px 8px rgba(214, 69, 69, 0.25); }
.popover-salir__confirmar:hover { box-shadow: 0 4px 14px rgba(214, 69, 69, 0.32); }

.area-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar-movil {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid var(--color-borde);
}
.topbar-movil__toggle {
  background: none;
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  padding: 0.3rem 0.6rem;
  display: inline-flex;
  align-items: center;
}
.topbar-movil__toggle svg { width: 20px; height: 20px; }
.topbar-movil__logo { height: 22px; width: auto; display: block; }

.contenido { padding: 2rem 2.25rem; max-width: 1400px; width: 100%; margin: 0 auto; }
.contenido--ancho { max-width: 1800px; padding: 1.25rem 1.5rem; }

/* Mensajes */
.mensajes { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mensaje {
  padding: 0.6rem 0.9rem;
  border-radius: var(--radio);
  background: #eef7fc;
  border: 1px solid var(--color-primario);
  font-size: 0.85rem;
}
.mensaje--error { background: #fdecec; border-color: var(--color-peligro); color: #a02f2f; }
.mensaje--exito { background: #e6f7ec; border-color: #4caf50; color: #1e7d32; }
#notificaciones-js:empty { display: none; }
.mensajes--toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
  max-width: 320px;
  margin: 0;
}
.mensajes--toast .mensaje { background: #fff; box-shadow: var(--sombra-md); }
.mensajes--toast .mensaje--exito { background: #e6f7ec; }
.mensajes--toast .mensaje--error { background: #fdecec; }

/* Selector de vista (Kanban / Tabla) */
.selector-vista {
  display: inline-flex;
  background: var(--color-fondo-muted);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 3px;
  gap: 2px;
}
.selector-vista a {
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-texto-muted);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.selector-vista a:hover { color: var(--color-texto); }
.selector-vista a.activo { background: #fff; color: var(--color-texto); box-shadow: var(--sombra-sm); }

.encabezado-pagina {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.encabezado-pagina .boton { margin-left: auto; }
.encabezado-pagina h1 { margin: 0; }

/* Kanban */
.kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
.kanban__columna {
  flex: 0 0 280px;
  background: var(--color-fondo-muted);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
}
.kanban__columna h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-muted);
  margin: 0 0 0.75rem;
}
.kanban__lista { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 120px; display: flex; flex-direction: column; gap: 0.5rem; }

.tarjeta {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 0.65rem 0.75rem;
  cursor: grab;
  font-size: 0.82rem;
  box-shadow: var(--sombra-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.tarjeta:hover { box-shadow: var(--sombra-md); border-color: var(--color-primario); }

/* Clon de arrastre de Sortable (forceFallback): NUNCA transicionar el transform,
   o el clon "persigue" al puntero con retraso en vez de seguirlo. */
.sortable-fallback,
.sortable-drag {
  transition: none !important;
  opacity: 1 !important;
  cursor: grabbing;
  box-shadow: var(--sombra-lg);
}
.sortable-ghost { opacity: 0.4; }
.tarjeta strong { color: var(--color-texto); }
.tarjeta--bloqueada { cursor: not-allowed; opacity: 0.6; }
.tarjeta--vencida { border-color: var(--color-peligro); }
.tarjeta__vencida-tag {
  display: inline-block;
  margin-top: 0.25rem;
  color: #a02f2f;
  background: #fdecec;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

/* Filtros */
.filtros { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filtros button {
  background: #fff;
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  box-shadow: none;
}
.filtros button:hover { border-color: var(--color-primario); opacity: 1; box-shadow: none; }
.filtros button { display: inline-flex; align-items: center; gap: 0.4rem; }
.filtros button.is-activo { border-color: var(--color-primario); color: var(--color-primario); background: #f2f7fd; }
.filtros__limpiar { font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--color-texto-muted); margin-left: 0.25rem; }
.filtros__limpiar:hover { color: var(--color-acento); }
.filtros__vencidas { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.6rem; border: 1px solid var(--color-borde); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.filtros__vencidas.is-activo { border-color: var(--color-peligro); color: #a02f2f; background: #fdecec; }
.tabla-deuda th, .tabla-deuda td { text-align: left; vertical-align: middle; white-space: nowrap; }
.tabla-deuda tfoot td { border-top: 2px solid var(--color-borde); }
.deuda-prov strong { display: block; }
.deuda-cif { font-size: 0.7rem; color: var(--color-texto-muted); }
.deuda-num {
  display: inline-block;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  background: var(--color-fondo-muted);
}
.deuda-num--vencido { color: #a02f2f; border-color: #f1c9c9; background: #fdecec; }
.deuda-num--total { border-color: #cfd3da; background: #eceef1; }
.deuda-imp { margin-left: 0.4rem; font-variant-numeric: tabular-nums; }
.deuda-vacio { color: var(--color-texto-muted); }
.deuda-grupo { text-align: center !important; border-left: 1px solid var(--color-borde); }
.th-deuda { cursor: pointer; }
.th-deuda a { display: block; color: inherit; text-decoration: none; }
.th-deuda:hover { background: var(--color-borde); }
.th-deuda--activo { color: var(--color-texto); }
.th-deuda__flecha { opacity: 0.7; }

.filtro-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--color-acento);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.filtro-backdrop { position: fixed; inset: 0; z-index: 15; background: transparent; }

.filtro-dropdown { position: relative; z-index: 16; }
.filtro-dropdown__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 16;
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  padding: 0.6rem;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.filtro-dropdown__panel label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-texto);
  white-space: nowrap;
}
.filtro-dropdown__panel label:hover { background: #f4f6f8; }
.filtro-dropdown__panel--fecha { gap: 0.6rem; padding: 0.75rem; min-width: 220px; }
.filtro-dropdown__panel--fecha label { flex-direction: column; align-items: stretch; gap: 0.25rem; font-weight: 600; font-size: 0.78rem; color: var(--color-texto-muted); padding: 0; }
[x-cloak] { display: none !important; }

.filtros-barra { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }

/* Cabecera fija: Kanban/Tabla + título + filtros + limpiar, pegados al hacer
   scroll. Fondo igual al del body para que sea invisible, sin caja blanca. */
.cabecera-fija {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-fondo-muted);
  padding-top: 1.25rem;
  margin-top: -1.25rem;
}
.filtros { margin-bottom: 0; }

.filtro-grupo { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.filtro-grupo--scroll { max-height: 240px; overflow-y: auto; }

/* Checkbox estilizado (caja + check) */
.filtro-check { cursor: pointer; }
.filtro-check input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.filtro-check__caja {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-borde);
  border-radius: 5px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.filtro-check__caja::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
}
.filtro-check input[type="checkbox"]:checked + .filtro-check__caja {
  background: var(--color-primario);
  border-color: var(--color-primario);
}
.filtro-check input[type="checkbox"]:checked + .filtro-check__caja::after { opacity: 1; }
.filtro-check input[type="checkbox"]:focus-visible + .filtro-check__caja { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.filtro-check__texto { overflow: hidden; text-overflow: ellipsis; }

/* Buscador dentro del dropdown */
.filtro-dropdown__panel--buscable { padding-bottom: 0.4rem; }
.filtro-buscador { padding: 0.1rem 0.1rem 0.45rem; }
.filtro-buscador__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--color-texto);
}
.filtro-buscador__input:focus { outline: none; border-color: var(--color-primario); }
.filtro-sin-resultados { margin: 0.3rem 0.4rem; font-size: 0.78rem; color: var(--color-texto-muted); }

.filtro-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }
.filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--color-texto);
  background: #eef4fb;
  border: 1px solid #d7e6f5;
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  max-width: 320px;
}
.filtro-chip strong { font-weight: 700; flex-shrink: 0; }
.filtro-chip__texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-chip__cerrar {
  background: none;
  border: none;
  color: var(--color-texto-muted);
  font-size: 0.7rem;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.filtro-chip__cerrar:hover { color: var(--color-peligro); opacity: 1; }

@media (max-width: 640px) {
  .filtro-dropdown__panel { position: fixed; left: 0.75rem; right: 0.75rem; top: auto; bottom: 0.75rem; max-height: 60vh; width: auto; min-width: 0; overflow-y: auto; }
  .filtro-grupo--scroll { max-height: none; overflow-y: visible; }
}

/* Tabla */
.tabla-facturas-wrapper {
  overflow: auto;
  max-height: calc(100vh - 20rem);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}
.tabla-facturas {
  /* width: auto (por defecto en un <table> de bloque normal) se limita al ancho
     disponible del contenedor y comprime las columnas para caber, ignorando los
     anchos declarados abajo. max-content usa el ancho intrínseco real (suma de
     columnas) y permite que la tabla desborde de verdad, activando el scroll
     horizontal del wrapper. min-width:100% evita que quede más estrecha que el
     contenedor si la suma de columnas es pequeña. Verificado con Playwright. */
  width: max-content;
  min-width: 100%;
  table-layout: fixed; /* respeta el "width" de cada columna definido más abajo, de forma literal */
  border-collapse: separate; /* collapse rompe el render de la columna sticky */
  border-spacing: 0;
  background: #fff;
  font-size: 0.8rem;
}
.tabla-facturas th, .tabla-facturas td {
  border-bottom: 1px solid var(--color-borde);
  padding: 0.6rem 0.5rem;
  text-align: left;
  background: #fff;
  white-space: nowrap;
}
.tabla-facturas th {
  background: var(--color-fondo-muted);
  color: var(--color-texto-muted);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  z-index: 3;
}
/* Tabla de deuda: cabecera de dos filas, ambas fijas al hacer scroll. La 2ª
   fila se solapa unos px con la 1ª (top algo menor que su altura real) para que
   no quede una rendija por la que se vea pasar el contenido al hacer scroll. */
.tabla-deuda thead tr:first-child th { top: 0; z-index: 4; }
.tabla-deuda thead tr:nth-child(2) th { top: 1.9rem; z-index: 4; }

/* Columna Proveedor fija al hacer scroll horizontal. */
.tabla-deuda td.deuda-prov,
.tabla-deuda thead tr:first-child th:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  box-shadow: 2px 0 4px -2px rgba(17, 35, 55, 0.15);
}
.tabla-deuda td.deuda-prov { z-index: 2; }
.tabla-deuda tfoot td.deuda-prov { z-index: 3; }
.tabla-deuda thead tr:first-child th:first-child { z-index: 5; } /* esquina: fija en ambos ejes */
.tabla-deuda tbody tr:hover td.deuda-prov { background: #f9fbfd; }

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

/* Filas clicables: la fila entera abre el panel de edición, sin enlaces de texto azul/subrayado */
.tabla-facturas tbody tr.fila-clickable { cursor: pointer; }
.tabla-facturas a { color: inherit; text-decoration: none; }

/* Encabezados ordenables: mismo estilo mudo/mayúsculas que el resto de
   encabezados; el único indicador es el icono (tenue, se afirma al hover) y
   el peso de la tipografía cuando esa es la columna activa. Sin color ni
   subrayado para no romper la paleta neutra de la tabla. */
.tabla-facturas th.th-ordenable { padding: 0; }
.tabla-facturas th.th-ordenable a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 100%;
  padding: 0.6rem 0.5rem;
  color: var(--color-texto-muted) !important;
  text-decoration: none !important;
  text-transform: inherit;
  letter-spacing: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 0.12s ease;
}
.tabla-facturas th.th-ordenable a:hover { color: var(--color-texto) !important; }
.tabla-facturas .th-ordenable__icono { flex-shrink: 0; opacity: 0; color: currentColor; transition: opacity 0.12s ease; }
.tabla-facturas .th-ordenable__icono--doble { opacity: 0.35; }
.tabla-facturas th.th-ordenable a:hover .th-ordenable__icono { opacity: 0.7; }
.tabla-facturas th.th-ordenable--activo a { color: var(--color-texto) !important; font-weight: 800; }
.tabla-facturas th.th-ordenable--activo .th-ordenable__icono { opacity: 1; }
.tabla-facturas input[type="text"], .tabla-facturas select, .tabla-facturas textarea { width: 100%; }
.tabla-facturas textarea {
  resize: vertical;
  min-height: 2.4rem;
  font-family: inherit;
}

/* Ancho de cada columna de la tabla de facturas: edita el valor "width" de la
   columna que quieras ajustar. Con table-layout: fixed el valor se respeta
   siempre (si la suma supera el ancho visible, aparece scroll horizontal). */
.tabla-facturas .col-empresa { width: 10rem; }
.tabla-facturas .col-numero-factura { width: 8rem; }
.tabla-facturas .col-cif-nif { width: 6rem; }
.tabla-facturas .col-fecha-factura { width: 7rem; }
.tabla-facturas .col-fecha-vencimiento { width: 9rem; }
.tabla-facturas .col-fecha-remesa { width: 9rem; }
.tabla-facturas .col-fecha-recepcion { width: 9rem; }
.tabla-facturas .col-fecha-instalacion { width: 8rem; }
.tabla-facturas .col-base-imponible { width: 8rem; }
.tabla-facturas .col-importe-total { width: 8rem; }
.tabla-facturas .col-numero-proyecto { width: 8rem; }
.tabla-facturas .col-descripcion { width: 20rem; }
.tabla-facturas .descripcion-clamp {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  cursor: help;
}
.tabla-facturas .col-pm { width: 7rem; }
.tabla-facturas .col-ci { width: 7rem; }
.tabla-facturas .col-url { width: 5rem; }
.tabla-facturas .col-motivo { width: 11rem; }
.tabla-facturas .col-comentarios {
  width: 16rem;
  white-space: normal; /* permite que el texto del textarea haga wrap */
}

/* Columna fija (Estado) para que quede siempre visible al hacer scroll horizontal. */
.col-fija-estado {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff;
  min-width: 15rem;
  box-shadow: -2px 0 4px -2px rgba(17, 35, 55, 0.15);
}
.tabla-facturas tbody tr:hover td.col-fija-estado { background: #f9fbfd; }
th.col-fija-estado { z-index: 4; }

/* Columna de estado angosta (switch en vez de texto) para tablas donde no hace falta el ancho del selector de estado de facturas */
.col-fija-estado--switch { min-width: 4.5rem; text-align: center; }

/* Colores del selector de Estado (tabla y panel de detalle), según el valor elegido */
select.select-estado {
  font-weight: 600;
  border-width: 2px;
}
select.select-estado[data-estado="pendiente_validar_pm"] {
  background: #fff8db;
  border-color: #e9c46a;
  color: #8a6d1e;
}
select.select-estado[data-estado="descartada"] {
  background: #fdecec;
  border-color: #e57373;
  color: #a02f2f;
}
select.select-estado[data-estado="validada_pm"] {
  background: #e7f1fc;
  border-color: #56c0e7;
  color: #14527a;
}
select.select-estado[data-estado="subida_holded"] {
  background: #e6f7ec;
  border-color: #4caf50;
  color: #1e7d32;
}

/* Filas con alertas (vencida / sin movimiento) */
.fila--vencida td { background: #fdecec; }
.fila--vencida:hover td { background: #fbe0e0; }
.fila--sin-movimiento td { background: #fff8e1; }
.fila--sin-movimiento:hover td { background: #fdf0c4; }
.fila--vencida td.col-fija-estado { background: #fdecec; }
.fila--sin-movimiento td.col-fija-estado { background: #fff8e1; }

.tag {
  display: inline-block;
  margin-left: 0.35rem;
  font-weight: 700;
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  white-space: nowrap;
}
.tag--vencida { color: #a02f2f; background: #fdecec; }
.tag--sin-movimiento { color: #8a6100; background: #fff3cd; }

.tarjeta--sin-movimiento { border-color: #d3a400; }
.tarjeta__sin-movimiento-tag {
  display: inline-block;
  margin-top: 0.25rem;
  color: #8a6100;
  background: #fff3cd;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

/* Paginación */
.paginacion { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; font-size: 0.85rem; }
.paginacion__link { color: var(--color-primario); text-decoration: none; font-weight: 600; }
.paginacion__link:hover { text-decoration: underline; }
.paginacion__link.activo { text-decoration: underline; color: var(--color-texto); }
.paginacion__info { color: var(--color-texto-muted); }
.paginacion__tamano { margin-left: auto; color: var(--color-texto-muted); display: flex; align-items: center; gap: 0.4rem; }

/* Panel de detalle */
.panel-detalle {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 480px;
  background: #fff;
  border-left: 1px solid var(--color-borde);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  box-shadow: var(--sombra-lg);
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.panel-detalle.abierto { transform: translateX(0); }
.panel-detalle__form { display: flex; flex-direction: column; height: 100%; }
.panel-detalle__cuerpo { padding: 0 1.5rem; flex: 1; overflow-y: auto; }
.panel-detalle form p { margin: 0 0 0.65rem; }
.panel-detalle label { display: block; font-weight: 600; font-size: 0.76rem; color: var(--color-texto-muted); margin-bottom: 0.2rem; }
.panel-detalle__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.5rem 1.5rem 1rem; margin-bottom: 0; }
.panel-detalle__cabecera h2 { margin: 0; }
.panel-detalle__cerrar {
  background: none;
  color: var(--color-texto-muted);
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
}
.panel-detalle__cerrar:hover { opacity: 1; color: var(--color-texto); }

.panel-detalle__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.75rem;
}
.panel-detalle__campo--ancho { grid-column: 1 / -1; }
.panel-detalle__grid textarea { min-height: 2.6rem; }
.panel-detalle__grid input,
.panel-detalle__grid select,
.panel-detalle__grid textarea { width: 100%; min-width: 0; }
.campo-bloqueado {
  background: var(--color-fondo-muted);
  color: var(--color-texto-muted);
  cursor: not-allowed;
}
.campo-ayuda {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--color-texto-muted);
}
.panel-detalle__meta { color: var(--color-texto-muted); margin: 0 0 0.75rem; }

.panel-detalle__historial { margin-top: 1rem; border-top: 1px solid var(--color-borde); padding-top: 0.75rem; }
.panel-detalle__historial h3 { font-size: 0.85rem; margin: 0 0 0.5rem; color: var(--color-texto-muted); }
.panel-detalle__historial ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.panel-detalle__historial li { font-size: 0.85rem; }
.panel-detalle__historial small { color: var(--color-texto-muted); }

.panel-pdf {
  position: fixed;
  top: 0;
  right: 480px;
  height: 100%;
  width: 0;
  overflow: hidden;
  background: #0f2036;
  z-index: 20;
  transform: translateX(100%);
  transition: transform 0.2s ease, width 0.2s ease;
}
.panel-pdf.abierto {
  width: calc(100% - 480px);
  transform: translateX(0);
}
.panel-pdf #panel-pdf-contenido {
  height: 100%;
}
.panel-pdf__vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
}
.panel-pdf iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.panel-pdf__enlace {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.25rem 0.5rem;
  margin: 0;
  border-radius: 4px;
}

.panel-detalle__footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--color-borde);
  padding: 0.85rem 1.5rem;
}
.panel-detalle__footer button { width: 100%; }

body.sin-scroll { overflow: hidden; }

.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 32, 54, 0.35);
  z-index: 19;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.panel-overlay--visible { opacity: 1; visibility: visible; }
.panel-detalle .aviso {
  background: #fff8e6;
  border: 1px solid #e9c46a;
  color: #8a6a1c;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 40;
    box-shadow: 4px 0 16px rgba(17, 35, 55, 0.15);
  }
  .sidebar--abierto { transform: translateX(0); }
  .topbar-movil { display: flex; }
  .contenido { padding: 1.25rem; }
  .panel-detalle { width: 100%; }
  .panel-pdf { display: none; }
}

.modal-motivo {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  padding: 1.25rem;
  width: min(360px, 90vw);
}

.modal-motivo::backdrop {
  background: rgba(17, 35, 55, 0.35);
}

.modal-motivo__form { display: flex; flex-direction: column; gap: 0.75rem; }

.modal-motivo__select {
  padding: 0.5rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

.modal-motivo__acciones { display: flex; justify-content: flex-end; gap: 0.5rem; }

.modal-motivo__acciones button {
  border: none;
  border-radius: var(--radio);
  padding: 0.5rem 1rem;
  font: inherit;
  cursor: pointer;
  color: var(--color-acento-texto);
}

.modal-motivo__acciones button[data-accion="cancelar"] { background: #7c8aad; }
.modal-motivo__acciones button[data-accion="aceptar"] { background: var(--color-acento); }

/* --- Panel de auditoría --- */
.tabla-auditoria td { white-space: normal; vertical-align: top; }
.log-badge {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  border: 1px solid var(--color-borde); color: var(--color-texto-muted);
}
.log-badge--crear { background: #e9f7ef; border-color: #b6e2c6; color: #1c7a44; }
.log-badge--editar { background: #eef3fd; border-color: #c4d4f5; color: #204ce5; }
.log-badge--eliminar { background: #fdecec; border-color: #f0c4c4; color: #a02f2f; }
.log-recurso-id { color: var(--color-texto-muted); font-size: 0.8rem; margin-left: 0.25rem; }
.log-diff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.log-diff li { font-size: 0.82rem; line-height: 1.35; }
.log-diff__campo { font-weight: 700; margin-right: 0.4rem; }
.log-diff__viejo { color: #a02f2f; text-decoration: line-through; }
.log-diff__nuevo { color: #1c7a44; }
.log-diff__flecha { color: var(--color-texto-muted); margin: 0 0.3rem; }