/*
 * Capa propia sobre Tabler 1.5, adaptada de site.css (C#) para la versión PHP: sin List.js. Colores, tipografía y estados de la
 * marca (Identidad v2) viven en net4trust-tabler.css, que se carga antes que este archivo; aquí solo va lo propio de la aplicación.
 */

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

#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(--n4t-accion); 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(--n4t-accion); color: #fff; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .28); /* el verde acción sobre el petróleo del menú no se separa solo */
}
.navbar-vertical .nav-link.nav-emitir:hover,
.navbar-vertical .nav-link.nav-emitir.active { background: var(--n4t-accion-hover); 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: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tblr-secondary);
}

/* Móvil (< 768 px): el menú se colapsa tras el botón; marca y botón en una sola fila (nombre largo cortado con «…»). */
@media (max-width: 767.98px) {
  .navbar-vertical > .container-fluid { flex-wrap: wrap; }
  .navbar-vertical .navbar-brand { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; margin: 0; padding: .5rem 0; }
  .navbar-vertical .navbar-brand .marca { flex: 0 1 auto; }
  .navbar-vertical .marca-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .navbar-vertical .navbar-brand .badge { flex: none; }
  .navbar-vertical .navbar-toggler { order: 2; margin-left: .5rem; }
  .navbar-vertical .navbar-collapse { order: 3; flex-basis: 100%; }
}

/* Tablas en móvil (.tabla-movil): las columnas secundarias llevan d-none d-sm-table-cell y su dato va bajo el principal (d-sm-none);
   el estado puede partirse en vez de sacar la tabla de la pantalla (en la bandeja, el número de control se ve en el detalle). */
@media (max-width: 575.98px) {
  .tabla-movil .badge { white-space: normal; text-align: start; line-height: 1.3; }
}

/* Tablas de auditoría en móvil (.tabla-tarjetas: Bitácora, Kardex): cada fila es una tarjeta y cada celda muestra su etiqueta
   (data-label) a la izquierda y el valor a la derecha, en vez de desplazar la tabla de lado. */
@media (max-width: 575.98px) {
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas td { display: block; width: 100%; }
  .tabla-tarjetas tr { padding: .5rem 0; border-bottom: 1px solid var(--tblr-border-color); }
  .tabla-tarjetas tr:last-child { border-bottom: 0; }
  .tabla-tarjetas td { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 1rem; border: 0; text-align: end; white-space: normal; overflow-wrap: anywhere; }
  .tabla-tarjetas tr td:first-child { padding-left: 1rem; } /* Tabler le da más margen a la primera celda de .card-table */
  .tabla-tarjetas td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--tblr-secondary); text-align: start; }
}

/* Bitácora: el usuario se parte en cualquier punto (lo teclea cualquiera en el login, hasta 256 caracteres), pero sin
   ancho mínimo la columna se encogía hasta cortar nombres normales («wwwpixe / l»). */
.celda-usuario { min-width: 8rem; }

/* Ícono de las alertas (<div class="d-flex">ícono + texto): Tabler 1.5 no le da margen y quedaba pegado al texto. */
.alert .alert-icon { flex: none; margin-right: .5rem; }

/* Aviso que debe leerse (el crédito fiscal que no cuadra al importar): el texto amarillo estándar de Tabler en .alert-warning da ~2:1 sobre su fondo.
   Aquí el texto y el ícono llevan el color normal del tema y solo el borde y el fondo llevan el amarillo. */
.alert-warning.alert-aviso { color: var(--tblr-body-color); border-color: var(--tblr-warning); }

/* Una insignia dentro de un contenedor flex no se encoge: Tabler le pone overflow hidden y quedaba cortada («Enviadc» en Correos). */
.d-flex > .badge { flex-shrink: 0; }

/* Scroll del menú lateral discreto sobre el navy (en Windows la barra por defecto es gris y gruesa). */
.navbar-vertical .navbar-collapse { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }

/* 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%; }
}

/* Acceso (login y primer administrador): panel de marca a la izquierda, formulario a la derecha; en móvil se apilan. */
.acceso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); background: var(--tblr-bg-surface); }
.acceso-marca {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3.5rem); background: var(--n4t-petroleo); color: #fff;
}
/* El escudo del isotipo, grande y casi transparente: textura de marca sin agregar un elemento decorativo nuevo. */
.acceso-marca::after {
  content: ""; position: absolute; right: -6rem; bottom: -5rem; width: 26rem; aspect-ratio: 1;
  background: url("../img/marca/net4trust-simbolo-blanco.svg") no-repeat center / contain; opacity: .05; pointer-events: none;
}
html[data-bs-theme="dark"] .acceso-marca { background: var(--tblr-body-bg); } /* en oscuro la superficie ya es petróleo: el panel pasa al fondo para no confundirse con el formulario */
.acceso-logo { width: min(100%, 22rem); height: auto; margin-left: -1rem; } /* el SVG trae margen técnico propio */
.acceso-producto { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9AC8B9; }
.acceso-titulo { margin: 0 0 1.5rem; max-width: 30rem; font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 700; line-height: 1.2; color: #fff; }
.acceso-puntos { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; color: #DCEAE5; }
.acceso-puntos li { display: flex; gap: .75rem; align-items: flex-start; }
.acceso-puntos .icon { color: #9AC8B9; margin-top: .1rem; }
.acceso-pie { position: relative; z-index: 1; margin: 0; font-size: .8125rem; color: #B8CBC5; }
.acceso-form { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3.5rem) 1rem; }
.acceso-caja { width: 100%; max-width: 24rem; }
.acceso-caja h1 { margin: 0 0 .25rem; font-size: 1.75rem; font-weight: 700; }
.acceso-caja .btn-primary { padding-block: .6rem; }
@media (max-width: 767.98px) {
  .acceso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acceso-marca { gap: 0; }
  .acceso-marca::after, .acceso-titulo, .acceso-puntos, .acceso-pie { display: none; }
  .acceso-producto { margin: .75rem 0 0; }
  .acceso-form { place-items: start center; }
}

/* Firma del producto al pie del menú lateral (el logo del emisor queda arriba). */
.navbar-vertical .producto {
  display: flex; align-items: center; gap: .6rem; margin: 1.5rem 1.25rem 1rem; padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .1); font-size: .75rem; line-height: 1.3; color: rgba(255, 255, 255, .6);
}

/* Dashboard de ventas: barras en CSS (sin librería de gráficas). La altura la pone la vista en %. */
.barras { display: flex; align-items: flex-end; gap: 2px; height: 11rem; }
.barras .barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; color: inherit; text-decoration: none; }
.barras .barra span { display: block; width: 100%; min-height: 1px; border-radius: 3px 3px 0 0; background: var(--tblr-primary); }
.barras .barra small { margin-top: .25rem; font-size: .75rem; color: var(--tblr-secondary); font-variant-numeric: tabular-nums; }
.barras-meses { gap: .4rem; }
.barras-meses .barra span { background: color-mix(in srgb, var(--tblr-primary) 45%, transparent); }
.barras-meses .barra.actual span, .barras-meses .barra:hover span { background: var(--tblr-primary); }
@media (max-width: 575.98px) { .barras .barra small { display: none; } }

/* Utilidades de ancho y similares: reemplazan los style="" de las vistas (la CSP ya no permite estilos en línea). */
.u-maxw-7 { max-width: 7rem; }
.u-maxw-16 { max-width: 16rem; }
.u-maxw-26 { max-width: 26rem; }
.u-maxw-28 { max-width: 28rem; }
.u-maxw-30 { max-width: 30rem; }
.u-maxw-32 { max-width: 32rem; }
.u-maxw-40 { max-width: 40rem; }
.u-maxw-48 { max-width: 48rem; }
.u-maxw-52 { max-width: 52rem; }
.u-maxw-60 { max-width: 60rem; }
.u-minw-11 { min-width: 11rem; }
.u-minw-14 { min-width: 14rem; }
.u-minw-18 { min-width: 18rem; }
.u-w-9 { width: 9rem; }
.u-wrap-any { overflow-wrap: anywhere; }
.u-rot-180 { transform: rotate(180deg); }