/*
 * Capa propia sobre Tabler 1.5, adaptada de site.css (C#) para la versión PHP: sin tema claro/oscuro (el botón
 * dependía de JS, que aquí no se usa) y sin Tom Select/List.js (los desplegables y filtros son HTML puro).
 */

:root {
  --tblr-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { scroll-padding-top: 1rem; }

::selection { background: color-mix(in srgb, var(--tblr-primary) 28%, transparent); }
:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.form-control:focus-visible, .form-select:focus-visible { outline: none; }
#contenido:focus { outline: none; }

/* Iconos (sprite SVG): trazo con el color del texto. :where() deja la especificidad en cero para que icon-sm/icon-lg de Tabler puedan cambiar el tamaño. */
:where(.icon) {
  width: 1.25rem; height: 1.25rem; flex: none; vertical-align: text-bottom;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

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

/* Marca y barra lateral */
.marca { display: flex; align-items: center; gap: .6rem; min-width: 0; color: inherit; text-decoration: none; }
.marca-logo { height: 2rem; width: auto; max-width: 3rem; object-fit: contain; border-radius: .375rem; background: #fff; }
.marca-icono {
  display: grid; place-items: center; flex: none; width: 2rem; height: 2rem;
  border-radius: .5rem; background: var(--tblr-primary); color: #fff;
}
.marca-nombre { font-weight: 600; font-size: .95rem; line-height: 1.2; overflow-wrap: anywhere; }
.navbar-vertical .navbar-brand { display: flex; flex-wrap: wrap; align-items: center; row-gap: .25rem; white-space: normal; }

.navbar-vertical .nav-link.nav-emitir {
  margin: .25rem .75rem .75rem; border-radius: var(--tblr-border-radius);
  background: var(--tblr-primary); color: #fff; font-weight: 600;
}
.navbar-vertical .nav-link.nav-emitir:hover,
.navbar-vertical .nav-link.nav-emitir.active { background: color-mix(in srgb, var(--tblr-primary) 88%, #000); color: #fff; }
.navbar.navbar-vertical .navbar-nav .nav-item .nav-link .badge { position: static; transform: none; align-self: center; margin-left: auto; }
.nav-seccion {
  padding: 1rem 1.25rem .25rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tblr-secondary);
}

/* Sidebar sin JS: siempre expandida (no hay botón que la colapse en móvil; ver decisión en el layout). */
.navbar-vertical .navbar-collapse { display: block !important; height: auto !important; }
.navbar-vertical .navbar-toggler { display: none; }

/* Encabezado de página */
.volver { display: inline-flex; align-items: center; gap: .25rem; margin-bottom: .25rem; font-size: .875rem; text-decoration: none; }
.volver:hover { color: var(--tblr-primary) !important; }

/* Listas de error del servidor (sin validación de cliente) */
.validation-summary-errors {
  margin-bottom: 1rem; padding: .75rem 1rem; border: 1px solid color-mix(in srgb, var(--tblr-danger) 30%, transparent);
  border-radius: var(--tblr-border-radius); background: color-mix(in srgb, var(--tblr-danger) 10%, var(--tblr-bg-surface));
  color: var(--tblr-danger);
}
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* Documento: estados del recorrido */
.paso-error { color: var(--tblr-danger); }
/* Tabler pinta todo <pre> con texto claro (lo supone sobre fondo oscuro); con bg-body-secondary quedaba blanco sobre gris claro. */
pre.json { max-height: 26rem; overflow: auto; margin: 0; padding: 1rem; font-size: .8125rem; white-space: pre-wrap; word-break: break-all; color: var(--tblr-body-color); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .navbar-vertical, .page-header .btn-list, .footer, .btn { display: none !important; }
  .page-wrapper { margin: 0 !important; }
}

.table-responsive { position: relative; }
.acciones { white-space: nowrap; }
@media (max-width: 575.98px) { .acciones { white-space: normal; width: 1%; } }

/* Emisión */
.totales-panel { position: sticky; top: 1rem; }
.linea-item { border-top: 1px solid var(--tblr-border-color); }
.linea-item:first-child { border-top: 0; }
.tipo-doc { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: .5rem; }
.tipo-doc .form-selectgroup-item { margin: 0; }
.tipo-doc .form-selectgroup-label { height: 100%; align-items: flex-start; }
.saldo-nc .exceso { color: var(--tblr-danger); font-weight: 600; }

/* Tom Select: su tema bootstrap5 usa variables --bs-*, que Tabler no define (usa --tblr-*); sin esto el desplegable
   queda sin fondo (transparente) y se lee lo de atrás. Se mapean aquí, dentro del componente, y siguen el tema claro/oscuro. */
.ts-wrapper {
  --bs-body-bg: var(--tblr-bg-surface);
  --bs-body-color: var(--tblr-body-color);
  --bs-border-color: var(--tblr-border-color);
  --bs-border-color-translucent: var(--tblr-border-color-translucent);
  --bs-border-radius: var(--tblr-border-radius);
  --bs-border-radius-sm: var(--tblr-border-radius-sm);
  --bs-border-radius-lg: var(--tblr-border-radius-lg);
  --bs-border-width: var(--tblr-border-width);
  --bs-secondary-bg: var(--tblr-bg-surface-secondary);
  --bs-tertiary-bg: var(--tblr-bg-surface-tertiary);
  --bs-secondary-color: var(--tblr-secondary);
  --bs-form-invalid-color: var(--tblr-form-invalid-color);
  --bs-form-valid-color: var(--tblr-form-valid-color);
  --bs-box-shadow-inset: var(--tblr-box-shadow-inset);
}
.ts-dropdown { z-index: 1050; } /* por encima del panel de totales (sticky) y de las tarjetas siguientes */

/* Emitir documento: el Resumen va al lado del formulario según el ancho REAL del contenido (no el de la ventana). Con la barra
   lateral y media pantalla (~960 px) el contenido mide ~670 px y col-lg-* ya habría apilado todo; de 1000 px para arriba mandan col-lg-8/4. */
#form-emision { container-type: inline-size; }
@container (min-width: 600px) and (max-width: 1000px) {
  .emision-cols > .col-lg-8 { flex: 0 0 auto; width: 60%; }
  .emision-cols > .col-lg-4 { flex: 0 0 auto; width: 40%; }
}