/* SysCfe - estilos propios sobre Bootstrap 5 */
:root {
  /* Color de marca. Estos son los de ForeStart; assets/js/tema.js los reemplaza con el que el Super elige en la pantalla Apariencia. */
  --sc-brand: #546E7A; --sc-brand-rgb: 84, 110, 122;
  --sc-brand-dark: #455a64; --sc-brand-dark-rgb: 69, 90, 100;
  --sc-brand-light: #78909c;
  --sc-barra: #49656D;
  --sc-on-brand: #fff;                       /* color del texto sobre el de marca (tema.js lo pone oscuro si la marca es muy clara) */
  --sc-navy: var(--sc-barra);
  --sc-navy-2: var(--sc-brand);
  --sc-accent: var(--sc-brand);
  --sc-accent-dark: var(--sc-brand-dark);
  --sc-bg: #f4f4f9;
  --sc-text: #1b2a3a;
  --sc-muted: #5d6b7c;
  --bs-primary: var(--sc-brand);
  --bs-primary-rgb: var(--sc-brand-rgb);
  --bs-link-color: var(--sc-brand);
  --bs-link-color-rgb: var(--sc-brand-rgb);
  --bs-link-hover-color: var(--sc-brand-dark);
  --bs-link-hover-color-rgb: var(--sc-brand-dark-rgb);
  /* Colores de los avisos y de los estados de Bootstrap (éxito, advertencia, error). Estos son los de fábrica; assets/js/tema.js los reemplaza con los que el Super elige en Apariencia.
     Bootstrap los toma de acá: los avisos que salen arriba, los mensajes de color, las etiquetas y los textos. Los fondos suaves se calculan a partir de cada color. */
  --sc-ok: #198754; --sc-ok-rgb: 25, 135, 84;
  --sc-warn: #ffc107; --sc-warn-rgb: 255, 193, 7;
  --sc-error: #dc3545; --sc-error-rgb: 220, 53, 69;
  --bs-success: var(--sc-ok); --bs-success-rgb: var(--sc-ok-rgb);
  --bs-warning: var(--sc-warn); --bs-warning-rgb: var(--sc-warn-rgb);
  --bs-danger: var(--sc-error); --bs-danger-rgb: var(--sc-error-rgb);
  --bs-success-bg-subtle: color-mix(in srgb, var(--sc-ok) 14%, white); --bs-success-border-subtle: color-mix(in srgb, var(--sc-ok) 35%, white); --bs-success-text-emphasis: color-mix(in srgb, var(--sc-ok) 55%, black);
  --bs-warning-bg-subtle: color-mix(in srgb, var(--sc-warn) 14%, white); --bs-warning-border-subtle: color-mix(in srgb, var(--sc-warn) 40%, white); --bs-warning-text-emphasis: color-mix(in srgb, var(--sc-warn) 45%, black);
  --bs-danger-bg-subtle: color-mix(in srgb, var(--sc-error) 14%, white); --bs-danger-border-subtle: color-mix(in srgb, var(--sc-error) 35%, white); --bs-danger-text-emphasis: color-mix(in srgb, var(--sc-error) 55%, black);
  /* Colores de estado de los comprobantes (etiquetas y filas de las tablas) y de la vía de envío. Fijos para todos los usuarios: solo el Super los cambia en Apariencia (tema.js). */
  --sc-est-firmado: #f3d65a; --sc-est-enviado: #b4dcb9; --sc-est-aceptado: #86c993; --sc-est-rechazado: #f2c4c4; --sc-est-anulado: #d3d6da;
  --sc-via-ws: #c5dcf0; --sc-via-correo: #dcdfe3; --sc-via-manual: #dccff0;
  /* el fondo de cada fila es el mismo color, más suave */
  --sc-fila-firmado: color-mix(in srgb, var(--sc-est-firmado) 30%, white); --sc-fila-enviado: color-mix(in srgb, var(--sc-est-enviado) 30%, white);
  --sc-fila-aceptado: color-mix(in srgb, var(--sc-est-aceptado) 50%, white); --sc-fila-rechazado: color-mix(in srgb, var(--sc-est-rechazado) 50%, white);
  --sc-barra-fija: #3d637c;                  /* la barra de arriba (PC y celular): el azul de SysCfe; tema.js lo reemplaza con el que el Super elige en Apariencia */
  /* neutros de la interfaz (bordes y fondos suaves): tonos del color de marca, para que acompañen si el Super lo cambia */
  --sc-linea: color-mix(in srgb, var(--sc-brand) 14%, white); --sc-linea-fuerte: color-mix(in srgb, var(--sc-brand) 32%, white);
  --sc-fondo-claro: color-mix(in srgb, var(--sc-brand) 4%, white); --sc-fondo-suave: color-mix(in srgb, var(--sc-brand) 9%, white);
  --bs-body-color: var(--sc-text);
  --bs-body-bg: var(--sc-bg);
  --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
body { background: var(--sc-bg); color: var(--sc-text); }
.btn-primary { --bs-btn-color: var(--sc-on-brand); --bs-btn-hover-color: var(--sc-on-brand); --bs-btn-active-color: var(--sc-on-brand); --bs-btn-disabled-color: var(--sc-on-brand);
  --bs-btn-bg: var(--sc-brand); --bs-btn-border-color: var(--sc-brand); --bs-btn-hover-bg: var(--sc-brand-dark); --bs-btn-hover-border-color: var(--sc-brand-dark);
  --bs-btn-active-bg: var(--sc-brand-dark); --bs-btn-active-border-color: var(--sc-brand-dark); --bs-btn-disabled-bg: var(--sc-brand); --bs-btn-disabled-border-color: var(--sc-brand); }
.btn-outline-primary { --bs-btn-color: var(--sc-brand); --bs-btn-border-color: var(--sc-brand); --bs-btn-hover-bg: var(--sc-brand); --bs-btn-hover-border-color: var(--sc-brand); --bs-btn-hover-color: var(--sc-on-brand);
  --bs-btn-active-bg: var(--sc-brand-dark); --bs-btn-active-border-color: var(--sc-brand-dark); --bs-btn-active-color: var(--sc-on-brand); --bs-btn-disabled-color: var(--sc-brand); --bs-btn-disabled-border-color: var(--sc-brand); }
.btn-accent { --bs-btn-color: var(--sc-on-brand); --bs-btn-bg: var(--sc-accent); --bs-btn-border-color: var(--sc-accent); --bs-btn-hover-color: var(--sc-on-brand); --bs-btn-hover-bg: var(--sc-accent-dark);
  --bs-btn-hover-border-color: var(--sc-accent-dark); --bs-btn-active-bg: var(--sc-accent-dark); --bs-btn-active-border-color: var(--sc-accent-dark); --bs-btn-active-color: var(--sc-on-brand); }
.btn-outline-light-sc { --bs-btn-color: var(--bs-white); --bs-btn-border-color: rgba(255,255,255,.55); --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-border-color: var(--bs-white); }
:focus-visible { outline: 3px solid rgba(var(--sc-brand-rgb), .55); outline-offset: 2px; }
/* Componentes de Bootstrap con el azul fijo en su CSS: se pasan al color de marca */
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--sc-brand); border-color: var(--sc-brand); }
.form-check-input:focus { border-color: var(--sc-brand); box-shadow: 0 0 0 .2rem rgba(var(--sc-brand-rgb), .25); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--sc-brand); --bs-dropdown-link-active-color: var(--sc-on-brand); }
.page-link { --bs-pagination-color: var(--sc-brand); --bs-pagination-hover-color: var(--sc-brand-dark); --bs-pagination-active-bg: var(--sc-brand); --bs-pagination-active-border-color: var(--sc-brand); --bs-pagination-active-color: var(--sc-on-brand); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--sc-brand); --bs-nav-pills-link-active-color: var(--sc-on-brand); }
.progress { --bs-progress-bar-bg: var(--sc-brand); }
/* Pestañas: las que no están elegidas llevan un fondo suave del color de marca, para que se note que hay otras */
.nav-tabs .nav-link:not(.active), .nav-pills .nav-link:not(.active) { background: rgba(var(--sc-brand-rgb), .10); color: var(--sc-brand-dark); }
.nav-tabs .nav-link:not(.active):hover, .nav-pills .nav-link:not(.active):hover { background: rgba(var(--sc-brand-rgb), .20); }
/* los avisos informativos (el celeste de Bootstrap) toman el color de marca; verde, rojo y amarillo siguen siendo los de siempre porque dicen éxito, error y atención */
.alert-info { --bs-alert-color: var(--sc-brand-dark); --bs-alert-bg: rgba(var(--sc-brand-rgb), .10); --bs-alert-border-color: rgba(var(--sc-brand-rgb), .30); --bs-alert-link-color: var(--sc-brand-dark); }
.nav-tabs .nav-item + .nav-item { margin-left: .2rem; }
.nav-pills .nav-item + .nav-item { margin-left: .1rem; }

/* ---------- Marca ---------- */
.marca { font-weight: 800; letter-spacing: -.02em; color: var(--bs-white); text-decoration: none; font-size: 1.35rem; display: inline-flex; align-items: center; gap: .5rem; }
.marca .sello { width: 2rem; height: 2rem; border-radius: .55rem; background: rgba(255,255,255,.18); display: inline-grid; place-items: center; color: var(--bs-white); font-size: 1.05rem; }
/* El logo está pensado para fondo blanco: en la barra oscura va dentro de una pastilla blanca */
.marca .sello-logo { background: var(--bs-white); border-radius: .55rem; height: 2.1rem; padding: 0 .4rem; display: inline-grid; place-items: center; }
.marca .sello-logo img { height: 1.55rem; width: auto; display: block; }
.logo-completo { display: block; height: 5.5rem; width: auto; margin: 0 auto .5rem; }
.marca b { color: var(--bs-white); font-weight: 800; opacity: .78; }
.marca-oscura .sello { background: var(--sc-brand); }
.marca-oscura b { color: var(--sc-brand); opacity: 1; }
.marca-oscura { color: var(--sc-navy); }

/* ---------- Barra de las pantallas internas ---------- */
.barra { background: var(--sc-navy); }
.barra .nav-link { color: rgba(255,255,255,.78); font-weight: 500; padding: .65rem .85rem; border-radius: .5rem; }
.barra .nav-link:hover { color: var(--bs-white); background: rgba(255,255,255,.08); }
.barra .nav-link.active { color: var(--bs-white); background: rgba(255,255,255,.14); }
.barra .nav-link.disabled { color: rgba(255,255,255,.4); }
.barra .navbar-toggler { border-color: rgba(255,255,255,.4); }
.barra .navbar-toggler-icon { filter: invert(1); }
.barra .dropdown-menu { border: 0; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
/* En la portada (fondo oscuro) la marca va en una pastilla blanca, con el mismo azul del logo */
.portada .marca { background: var(--bs-white); border-radius: .7rem; padding: .15rem .75rem .15rem .4rem; color: var(--sc-brand); }
.portada .marca b { color: var(--sc-brand); opacity: 1; }
.portada .marca .sello-logo { background: transparent; padding: 0; height: 2.2rem; }
.portada .marca .sello-logo img { height: 1.9rem; }
/* Barra con el fondo de la marca (trama azul); el logo va en una pastilla blanca con el azul del logo */
.barra { background: var(--sc-barra-fija) url("fondo-barra.png") repeat; }   /* --sc-barra-fija: el color de la barra que elige el Super en Apariencia (tema.js); sin elegir, el azul de SysCfe */
/* En la barra de trabajo la marca casi no se nota (se ve todo el día): puzzle y nombre en una sola tinta blanca, chicos y atenuados; se aviva al pasar el mouse */
.barra .marca, .barra .marca b { color: var(--bs-white); font-size: 1rem; font-weight: 700; }
.barra .marca b { opacity: 1; }
.barra .marca { gap: .4rem; }
.barra .marca .marca-nombre { opacity: .32; transition: opacity .2s; }   /* tono sobre tono: casi del color de la barra */
.barra .marca:hover .marca-nombre { opacity: .9; }
/* el logo: en blanco apagado, y al pasar el mouse el mismo logo en colores (se cruzan los dos) */
.barra .marca .sello-logo { background: transparent; padding: 0; height: 1.7rem; width: 2.5rem; position: relative; display: block; }
.barra .marca .sello-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.barra .marca .logo-base { opacity: .32; }
.barra .marca .logo-color { opacity: 0; }
.barra .marca:hover .logo-base { opacity: 0; }
.barra .marca:hover .logo-color { opacity: 1; }
/* en el celular, como en las apps: el botón del menú a la izquierda y la marca a su lado (en PC no cambia) */
@media (max-width: 991.98px) {
  .barra .navbar-toggler { order: -1; margin-right: .75rem; }
  .barra .marca { margin-right: auto; }
}
/* Icono en la pantalla de inicio del celular: SysCfe se abre como aplicación («Abrir como app web») y el contenido llega hasta el borde, con la hora y la señal encima
   (viewport-fit=cover y barra de estado translúcida). Se deja el margen de la «zona segura» arriba y abajo; en un navegador común vale 0 y no cambia nada. */
.barra.navbar { padding-top: calc(var(--bs-navbar-padding-y, .5rem) + env(safe-area-inset-top, 0px)); }
/* Portada en el celular: la barra queda fija arriba con fondo sólido (como en las demás pantallas): así el iPhone pinta la franja de la hora con su color y el texto de la portada
   no se ve pasar por debajo; el menú se abre por encima del contenido. El espacio de la barra (64 px más la zona segura) se reserva arriba. */
.portada-marca { display: inline-flex; align-items: center; gap: .4rem; color: var(--bs-white); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.portada-marca img { height: 1.7rem; width: auto; }
@media (max-width: 767.98px) {
  .portada { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
  .portada > nav.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background-color: var(--sc-barra-fija); padding-top: env(safe-area-inset-top, 0px); }
  .portada > nav.navbar .navbar-collapse { max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; }
}
/* las pantallas sin barra (por ejemplo las de ayuda pública): una franja del color de la barra detrás de la hora, para que se lea */
body:not(:has(#barra)):not(:has(.portada)) { padding-top: env(safe-area-inset-top, 0px); background-image: linear-gradient(var(--sc-barra-fija), var(--sc-barra-fija)); background-size: 100% env(safe-area-inset-top, 0px); background-repeat: no-repeat; }
.ayuda-boton { bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
.ayuda-panel { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
#toasts { padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important; }
/* Celular: los campos llevan letra de 16 px. Con menos, el iPhone agranda la pantalla solo al tocar un campo y hay que volver a achicarla a mano.
   La ayuda deja de flotar sobre el contenido (tapaba botones): se abre desde el menú del usuario. */
@media (max-width: 767.98px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), select, textarea { font-size: 16px !important; }
  .ayuda-boton { display: none !important; }
}
/* Fechas dd/mm/aaaa en el celular (facturacion.js): se ve un texto con el formato y, encima, el campo de fecha transparente que abre el calendario */
.fecha-es-ctrl { position: relative; }
.fecha-es-ctrl > input[type="text"] { pointer-events: none; }
.fecha-es-ctrl > input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
/* Celular: el menú de la persona va arriba a la derecha y el nombre se corta con «…» si es largo, para que el cabezal no se desarme */
.boton-usuario { display: inline-flex; align-items: center; max-width: 100%; }
.boton-usuario .nombre-usuario { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 991.98px) {
  .usuario-movil { min-width: 0; margin-left: .5rem; }
  .usuario-movil .boton-usuario { max-width: min(9.5rem, 38vw); }
  .usuario-movil .boton-usuario .bi { flex: none; }
}
/* Bandeja de entrada: la campana junto al menú de la persona, con el número de avisos nuevos */
.bandeja { margin-left: .5rem; }
.boton-bandeja { position: relative; padding-left: .55rem; padding-right: .55rem; }
.boton-bandeja .bandeja-n { position: absolute; top: -.4rem; right: -.45rem; font-size: .65rem; min-width: 1.15rem; line-height: 1.1; }
.bandeja-menu { width: min(24rem, 92vw); }
.bandeja-lista { max-height: 60vh; overflow-y: auto; }
.bandeja-item { display: flex; gap: .6rem; padding: .55rem .9rem; border-top: 1px solid rgba(0,0,0,.08); cursor: pointer; text-decoration: none; color: inherit; }
.bandeja-item:hover { background: rgba(var(--sc-brand-rgb), .08); }
.bandeja-item.nueva { background: rgba(var(--sc-brand-rgb), .06); }
.bandeja-item .punto { flex: none; width: .55rem; height: .55rem; border-radius: 50%; margin-top: .35rem; background: transparent; }
.bandeja-item.nueva .punto { background: var(--bs-primary); }
.bandeja-item.urgente .icono { color: var(--bs-danger); } .bandeja-item.aviso .icono { color: color-mix(in srgb, var(--sc-warn) 85%, black); } .bandeja-item.info .icono { color: var(--sc-brand); }
.bandeja-item .titulo { font-weight: 600; font-size: .88rem; } .bandeja-item .cuando { font-size: .72rem; color: var(--bs-secondary-color); }
.bandeja-pie { border-top: 1px solid rgba(0,0,0,.1); }
@media (max-width: 991.98px) { .bandeja { margin-left: auto; margin-right: 0; } .usuario-movil { margin-left: .5rem; } .bandeja-menu { position: fixed !important; left: .5rem !important; right: .5rem !important; top: 3.6rem !important; width: auto; transform: none !important; } }
/* Celular: la barra queda fija arriba. Safari pinta la franja de la hora y la señal con el color de lo que está fijo en el borde de arriba; si la barra
   se desplaza con la página, toma el fondo claro y queda un degradado difuso. El espacio que ocupaba (--alto-barra, lo mide shell.js) se reserva en #barra. */
@media (max-width: 991.98px) {
  .barra.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; }
  #barra { min-height: var(--alto-barra, 56px); }
  .barra .navbar-collapse { max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; }
}
/* en el celular no hay "pasar el mouse": la marca se ve clara, no apagada */
@media (hover: none) { .barra .marca .marca-nombre, .barra .marca .logo-base { opacity: .9; } }

/* ---------- Contenido ---------- */
/* Encabezado de pantalla igual en todas: título, subtítulo chico y poco aire (las páginas no llevan tamaños propios; si hace falta cambiarlo, es acá) */
.pagina { padding-top: 1.1rem; padding-bottom: 2.5rem; }
.titulo-pagina, .titulo-pagina.h3 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .15rem; }
.sub-pagina { color: var(--sc-muted); font-size: .88rem; margin-bottom: .75rem; }
main.pagina > .d-flex.justify-content-between:first-child { margin-bottom: .6rem !important; }
/* filtros, pestañas y la barra del buscador pegados a su tabla: mismo ritmo en todas las listas */
form#filtros { margin-bottom: .5rem !important; }
/* mismo tamaño (el «sm» de Bootstrap) para los botones del encabezado y para los campos y botones de los filtros, lo hayan marcado así o no */
main.pagina > .d-flex.justify-content-between:first-child .btn, form#filtros .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .875rem; --bs-btn-border-radius: var(--bs-border-radius-sm); }
form#filtros .form-control, form#filtros .form-select { padding-top: .25rem; padding-bottom: .25rem; font-size: .875rem; min-height: calc(1.5em + .5rem + 2px); border-radius: var(--bs-border-radius-sm); }
form#filtros .form-control { padding-left: .5rem; padding-right: .5rem; }
form#filtros .form-select { padding-left: .5rem; }
.nav-tabs.mb-3, .nav-pills.mb-3 { margin-bottom: .5rem !important; }
.tarjeta { background: var(--bs-white); border: 1px solid var(--sc-linea); border-radius: .9rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.tarjeta-cuerpo { padding: 1rem 1.15rem; }
.tarjeta h2, .tarjeta h3 { font-size: 1.05rem; font-weight: 700; }
.tabla thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sc-muted); font-weight: 600; border-bottom-width: 1px; white-space: nowrap; }
.tabla td { vertical-align: middle; }
.vacio { text-align: center; color: var(--sc-muted); padding: 2.25rem 1rem; }
.vacio i { font-size: 2rem; display: block; margin-bottom: .35rem; opacity: .55; }
.etiqueta-campo { font-size: .8rem; font-weight: 600; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .03em; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* alertas de CAE */
.alerta-cae { display: flex; gap: .55rem; align-items: flex-start; padding: .55rem .75rem; border-radius: .6rem; font-size: .9rem; margin-bottom: .4rem; }
.alerta-cae.critico { background: color-mix(in srgb, var(--sc-error) 12%, white); color: color-mix(in srgb, var(--sc-error) 60%, black); }
.alerta-cae.aviso { background: color-mix(in srgb, var(--sc-warn) 14%, white); color: color-mix(in srgb, var(--sc-warn) 45%, black); }
.alerta-cae.ok { background: color-mix(in srgb, var(--sc-ok) 12%, white); color: color-mix(in srgb, var(--sc-ok) 60%, black); }
.alerta-cae i { margin-top: .1rem; }
.insignia-etapa { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .25rem .55rem; border-radius: 99px; }
.insignia-etapa.produccion { background: color-mix(in srgb, var(--sc-ok) 12%, white); color: color-mix(in srgb, var(--sc-ok) 60%, black); }
.insignia-etapa.testing { background: color-mix(in srgb, var(--sc-warn) 14%, white); color: color-mix(in srgb, var(--sc-warn) 45%, black); }
.barra-uso { height: .5rem; border-radius: 99px; background: var(--sc-fondo-suave); overflow: hidden; min-width: 7rem; }
@media (max-width: 575.98px) { .barra-uso { min-width: 4rem; } }
.barra-uso > span { display: block; height: 100%; background: var(--sc-accent); }
.barra-uso.poco > span { background: color-mix(in srgb, var(--sc-warn) 85%, black); }
.barra-uso.critico > span { background: var(--sc-error); }

/* pasos de configuración */
.paso { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--sc-linea); }
.paso:last-child { border-bottom: 0; }
.paso .num { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; background: var(--sc-fondo-suave); color: var(--sc-navy-2); }
.paso.hecho .num { background: var(--sc-accent); color: var(--bs-white); }

.zona-archivo { border: 2px dashed var(--sc-linea-fuerte); border-radius: .8rem; padding: 1.4rem; text-align: center; background: var(--sc-fondo-claro); cursor: pointer; transition: .15s; }
.zona-archivo:hover, .zona-archivo.sobre { border-color: var(--sc-accent); background: color-mix(in srgb, var(--sc-ok) 12%, white); }
.zona-archivo i { font-size: 1.8rem; color: var(--sc-accent-dark); }

.clave-temporal { font-family: ui-monospace, Consolas, monospace; font-size: 1.5rem; letter-spacing: .06em; background: var(--sc-fondo-claro); border: 1px dashed var(--sc-linea-fuerte); border-radius: .6rem; padding: .7rem 1rem; text-align: center; user-select: all; }

/* ---------- Pantalla inicial ---------- */
.portada { background: radial-gradient(1200px 500px at 85% -10%, rgba(var(--sc-brand-light-rgb, 120,144,156),.35), transparent 60%), linear-gradient(160deg, var(--sc-barra) 0%, var(--sc-brand-dark) 100%); color: var(--bs-white); }
.portada { position: relative; overflow: hidden; background-size: 100% 100%, 160% 160%; animation: portada-fondo 24s ease-in-out infinite alternate; }
@keyframes portada-fondo { from { background-position: 0 0, 0% 0%; } to { background-position: 0 0, 100% 100%; } }
.portada-red { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.5s ease; pointer-events: none; }
.portada-red.listo { opacity: 1; }
.portada-video.listo ~ .portada-red { opacity: 0; }
.portada-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; z-index: 0; }
.portada-video.listo { opacity: 1; }
/* velo con el color de la marca: el texto se lee bien sobre cualquier video */
.portada-video.listo + .portada-velo { opacity: 1; }
.portada-velo { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.2s ease; background: linear-gradient(160deg, rgba(var(--sc-brand-dark-rgb), .86) 0%, rgba(var(--sc-brand-rgb), .62) 100%); }
.portada > nav, .portada > div:not(.portada-velo) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .portada { animation: none; } }
.portada .navbar a.nav-link { color: rgba(255,255,255,.85); }
.portada h1 { font-weight: 800; letter-spacing: -.025em; line-height: 1.1; font-size: clamp(2rem, 4.4vw, 3.15rem); }
.portada h1 em { font-style: normal; color: color-mix(in srgb, var(--sc-ok) 45%, white); }
.portada .lead { color: rgba(255,255,255,.82); max-width: 34rem; }
.portada .puntos li { margin-bottom: .45rem; color: rgba(255,255,255,.9); }
.portada .puntos i { color: color-mix(in srgb, var(--sc-ok) 45%, white); margin-right: .5rem; }
.portada .puntos a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: .22rem; }
.portada .puntos a:hover { color: var(--bs-white); text-decoration-color: color-mix(in srgb, var(--sc-ok) 45%, white); }
.portada .puntos a i { color: inherit; margin-right: 0; font-size: .75em; }
.caja-ingreso { background: var(--bs-white); color: var(--sc-text); border-radius: 1.1rem; padding: 1.75rem; box-shadow: 0 22px 60px rgba(0,0,0,.28); }
.caja-ingreso h2 { font-size: 1.25rem; font-weight: 700; }
.seccion { padding: 4.25rem 0; }
.seccion.clara { background: var(--bs-white); }
.seccion h2.grande { font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.beneficio { height: 100%; padding: 1.5rem; border-radius: 1rem; background: var(--bs-white); border: 1px solid var(--sc-linea); }
.seccion.clara .beneficio { background: var(--sc-bg); border-color: transparent; }
.beneficio .icono { width: 2.8rem; height: 2.8rem; border-radius: .8rem; display: grid; place-items: center; background: color-mix(in srgb, var(--sc-ok) 12%, white); color: var(--sc-accent-dark); font-size: 1.35rem; margin-bottom: .9rem; }
.beneficio h3 { font-size: 1.05rem; font-weight: 700; }
.beneficio p { color: var(--sc-muted); margin: 0; font-size: .95rem; }
.paso-grande { text-align: center; padding: 0 .75rem; }
.paso-grande .circulo { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--sc-navy-2); color: var(--bs-white); display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; margin: 0 auto .8rem; }
.pie { background: var(--sc-navy); color: rgba(255,255,255,.7); padding: 2rem 0; font-size: .9rem; }
.pie a { color: rgba(255,255,255,.85); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Celular/tablet: el cuadro de ingreso ocupa la primera pantalla y el texto de la portada queda recién al deslizar. */
@media (max-width: 991.98px) { .portada #ingreso { min-height: calc(100vh - 6rem); min-height: calc(100svh - 6rem); display: flex; align-items: center; } .portada #ingreso .caja-ingreso { width: 100%; } }
@media (max-width: 575.98px) { .caja-ingreso { padding: 1.35rem; } .seccion { padding: 3rem 0; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Facturación ---------- */
.grilla thead th { background: rgba(var(--sc-brand-rgb), .08); color: var(--sc-brand-dark); border-color: rgba(var(--sc-brand-rgb), .22); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.grilla td { padding: .25rem; }
.grilla input.form-control-sm, .grilla select.form-select-sm { border-color: var(--sc-linea); }
.grilla input:focus, .grilla select:focus, .form-control:focus, .form-select:focus { border-color: var(--sc-accent); box-shadow: 0 0 0 .2rem rgba(var(--sc-brand-rgb), .22); }
.grilla .fila-importe { font-variant-numeric: tabular-nums; font-weight: 600; }
.grilla tr.fila-gratuita .fila-importe { color: var(--sc-muted); font-weight: 400; }
.caja-sugerencias { position: absolute; z-index: 2000; max-height: 260px; overflow-y: auto; font-size: .85rem; background: var(--bs-white); border: 1px solid rgba(0,0,0,.15); border-radius: .5rem; }
.caja-sugerencias .list-group-item.active { background: rgba(var(--sc-brand-rgb), .14); border-color: rgba(var(--sc-brand-rgb), .3); color: var(--sc-brand-dark); }
.resumen-totales { background: var(--sc-fondo-claro); border: 1px solid var(--sc-linea); border-radius: .8rem; padding: .85rem 1rem; }
.resumen-totales .fila { display: flex; justify-content: space-between; font-size: .92rem; padding: .12rem 0; font-variant-numeric: tabular-nums; }
.resumen-totales .fila.total { border-top: 1px solid var(--sc-linea-fuerte); margin-top: .45rem; padding-top: .5rem; font-size: 1.5rem; font-weight: 800; color: var(--sc-navy); }
.chip-sel { display: inline-flex; align-items: center; gap: .5rem; background: color-mix(in srgb, var(--sc-ok) 12%, white); color: color-mix(in srgb, var(--sc-ok) 60%, black); border-radius: 99px; padding: .25rem .4rem .25rem .8rem; font-size: .88rem; }
.chip-sel button { border: 0; background: color-mix(in srgb, var(--sc-ok) 15%, transparent); border-radius: 50%; width: 1.5rem; height: 1.5rem; line-height: 1; color: color-mix(in srgb, var(--sc-ok) 60%, black); }
#chevron { transition: transform .2s; } #chevron.girado { transform: rotate(90deg); }

/* Postulación: pasos de la corrida */
.pasos { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; }
.pasos li { font-size: .78rem; font-weight: 600; padding: .3rem .7rem; border-radius: 99px; background: var(--sc-fondo-suave); color: var(--sc-muted); }
.pasos li.hecho { background: color-mix(in srgb, var(--sc-ok) 12%, white); color: color-mix(in srgb, var(--sc-ok) 60%, black); }
.pasos li.hecho::before { content: "\2713\00a0"; }
.pasos li.actual { background: color-mix(in srgb, var(--sc-brand) 16%, white); color: var(--sc-brand-dark); }

/* ---------- Modales con formulario: el <form> envuelve cabecera, cuerpo y pie, así que tiene que repartir el alto para que el cuerpo se desplace ---------- */
.modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow: hidden; }

/* ---------- Tablas (DataTables) ---------- */
div.dt-container .dt-search input, div.dt-container .dt-length select { border-radius: .5rem; }
div.dt-container .dt-length select { width: auto; display: inline-block; }
table.dataTable > thead > tr > th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sc-muted); font-weight: 700; }
table.dataTable td.dtr-control { cursor: pointer; }
/* Estilo de la tabla de Remitos de ForeStart: encabezado de color con letra blanca normal, datos chicos en una sola línea, filas compactas */
table.dataTable.tabla-remito > thead > tr > th { background-color: var(--sc-brand); color: var(--bs-white); font-size: .92rem; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
table.dataTable.tabla-remito { font-size: .85rem; }
table.dataTable.tabla-remito > tbody > tr > td { white-space: nowrap; padding-top: .35rem; padding-bottom: .35rem; }
/* El oscurecido al pasar el mouse NO usa "filter": un filtro en la fila vuelve su "contenedor" a los menús fijos (el ⋮) y los deja fuera de pantalla */
table.dataTable.tabla-remito > tbody > tr:hover > td { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .03); }
table.dataTable.tabla-remito > thead .dt-column-order { color: var(--bs-white); opacity: .6; }
div.dt-container .dt-search input { width: 220px; }
div.dt-container .dt-paging .page-link { border-radius: .4rem; margin: 0 .1rem; }

/* Situación de un comprobante ante DGI, en toda la fila:
   amarillo claro = generado y firmado pero todavía no enviado · verde claro = enviado, esperando respuesta · verde intenso = DGI ya respondió (aceptado) */
.table > tbody > tr.cfe-firmado > *, tr.cfe-firmado > * { --bs-table-bg: var(--sc-fila-firmado); background-color: var(--sc-fila-firmado); --bs-table-accent-bg: transparent; }
.table > tbody > tr.cfe-enviado > *, tr.cfe-enviado > * { --bs-table-bg: var(--sc-fila-enviado); background-color: var(--sc-fila-enviado); --bs-table-accent-bg: transparent; }
.table > tbody > tr.cfe-aceptado > *, tr.cfe-aceptado > * { --bs-table-bg: var(--sc-fila-aceptado); background-color: var(--sc-fila-aceptado); --bs-table-accent-bg: transparent; }
.table > tbody > tr.cfe-rechazado > *, tr.cfe-rechazado > * { --bs-table-bg: var(--sc-fila-rechazado); background-color: var(--sc-fila-rechazado); --bs-table-accent-bg: transparent; }
[data-bs-theme="dark"] .table > tbody > tr.cfe-firmado > * { --bs-table-bg: color-mix(in srgb, var(--sc-est-firmado) 25%, black); background-color: color-mix(in srgb, var(--sc-est-firmado) 25%, black); }
[data-bs-theme="dark"] .table > tbody > tr.cfe-enviado > * { --bs-table-bg: color-mix(in srgb, var(--sc-est-enviado) 25%, black); background-color: color-mix(in srgb, var(--sc-est-enviado) 25%, black); }
[data-bs-theme="dark"] .table > tbody > tr.cfe-aceptado > * { --bs-table-bg: color-mix(in srgb, var(--sc-est-aceptado) 35%, black); background-color: color-mix(in srgb, var(--sc-est-aceptado) 35%, black); }
[data-bs-theme="dark"] .table > tbody > tr.cfe-rechazado > * { --bs-table-bg: color-mix(in srgb, var(--sc-est-rechazado) 30%, black); background-color: color-mix(in srgb, var(--sc-est-rechazado) 30%, black); }
/* etiqueta de estado del comprobante: un tono más oscuro que el de su fila */
.estado-badge { font-size: .85rem; padding: .4em .7em; font-weight: 600; }
/* El color de cada etiqueta es el de su estado (--sc-est-* y --sc-via-*, que el Super elige en Apariencia); el texto es un tono oscuro del mismo color (en modo oscuro, al revés) */
.estado-pendiente { background-color: var(--sc-est-firmado); color: color-mix(in srgb, var(--sc-est-firmado) 25%, black); }
.estado-enviado { background-color: var(--sc-est-enviado); color: color-mix(in srgb, var(--sc-est-enviado) 25%, black); }
.estado-aceptado { background-color: var(--sc-est-aceptado); color: color-mix(in srgb, var(--sc-est-aceptado) 25%, black); }
.estado-rechazado { background-color: var(--sc-est-rechazado); color: color-mix(in srgb, var(--sc-est-rechazado) 25%, black); }
.estado-anulado { background-color: var(--sc-est-anulado); color: color-mix(in srgb, var(--sc-est-anulado) 25%, black); }
.estado-via-ws { background-color: var(--sc-via-ws); color: color-mix(in srgb, var(--sc-via-ws) 25%, black); }
.estado-via-correo { background-color: var(--sc-via-correo); color: color-mix(in srgb, var(--sc-via-correo) 25%, black); }
.estado-via-manual { background-color: var(--sc-via-manual); color: color-mix(in srgb, var(--sc-via-manual) 25%, black); }
[data-bs-theme="dark"] .estado-pendiente { background-color: color-mix(in srgb, var(--sc-est-firmado) 45%, black); color: color-mix(in srgb, var(--sc-est-firmado) 20%, white); }
[data-bs-theme="dark"] .estado-enviado { background-color: color-mix(in srgb, var(--sc-est-enviado) 45%, black); color: color-mix(in srgb, var(--sc-est-enviado) 20%, white); }
[data-bs-theme="dark"] .estado-aceptado { background-color: color-mix(in srgb, var(--sc-est-aceptado) 55%, black); color: color-mix(in srgb, var(--sc-est-aceptado) 15%, white); }
[data-bs-theme="dark"] .estado-rechazado { background-color: color-mix(in srgb, var(--sc-est-rechazado) 45%, black); color: color-mix(in srgb, var(--sc-est-rechazado) 20%, white); }
[data-bs-theme="dark"] .estado-anulado { background-color: color-mix(in srgb, var(--sc-est-anulado) 45%, black); color: color-mix(in srgb, var(--sc-est-anulado) 20%, white); }
[data-bs-theme="dark"] .estado-via-ws { background-color: color-mix(in srgb, var(--sc-via-ws) 45%, black); color: color-mix(in srgb, var(--sc-via-ws) 20%, white); }
[data-bs-theme="dark"] .estado-via-correo { background-color: color-mix(in srgb, var(--sc-via-correo) 45%, black); color: color-mix(in srgb, var(--sc-via-correo) 20%, white); }
[data-bs-theme="dark"] .estado-via-manual { background-color: color-mix(in srgb, var(--sc-via-manual) 45%, black); color: color-mix(in srgb, var(--sc-via-manual) 20%, white); }
/* Cabezal y detalle "como en Facturación": el cabezal toma el color de la moneda y el detalle el suyo (colores de la empresa). Los usan el detalle de CFE recibidos y la ventana de ingreso a stock */
.rec-zona { background: var(--zona, var(--sc-fondo-claro)); border: 1px solid rgba(0,0,0,.12); border-radius: .6rem; padding: .6rem .8rem .35rem; margin-bottom: .5rem; }
.rec-zona-detalle { background: var(--fc-detalle, var(--sc-fondo-suave)); border: 1px solid rgba(0,0,0,.12); border-radius: .6rem; padding: .35rem .45rem; }
[data-bs-theme="dark"] .rec-zona, [data-bs-theme="dark"] .rec-zona-detalle { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.rec-zona-detalle table { --bs-table-bg: transparent; --bs-table-striped-bg: transparent; }
.rec-zona-detalle thead th { background-color: var(--fc-detalle, var(--sc-fondo-suave)); background-image: linear-gradient(rgba(var(--sc-brand-rgb), .10), rgba(var(--sc-brand-rgb), .10)); }
[data-bs-theme="dark"] .rec-zona-detalle thead th { background-color: transparent; }
/* Ventana de ingreso a stock: las líneas con un artículo que ya existe en el catálogo van en blanco; las que todavía no tienen artículo (o se van a crear) quedan en el celeste del detalle */
.tabla-ingreso > tbody > tr.fila-con-articulo > * { --bs-table-bg: var(--bs-white); background-color: var(--bs-white); --bs-table-accent-bg: transparent; }
[data-bs-theme="dark"] .tabla-ingreso > tbody > tr.fila-con-articulo > * { --bs-table-bg: rgba(255,255,255,.09); background-color: rgba(255,255,255,.09); }
/* Ventana ancha para grillas con muchas columnas (la de ingreso a stock): casi todo el ancho de la pantalla, hasta 1480 px, para no tener barra horizontal */
@media (min-width: 992px) { .modal-xxl { --bs-modal-width: min(1480px, 97vw); } }
.tabla-ingreso { font-size: .92rem; }
/* Ventana de ingreso: los bloques de precios (Costo · Margen · Precio de venta) se distinguen con una barra a la izquierda de cada uno y una fila de títulos arriba */
.tabla-ingreso th.grp-ini, .tabla-ingreso td.grp-ini { border-left: 2px solid rgba(var(--sc-brand-rgb), .45); }
.tabla-ingreso thead tr.fila-grupos th { text-align: center; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); font-weight: 600; padding-bottom: .1rem; border-bottom: 0; }
.tabla-ingreso thead tr.fila-grupos th.grp-ini { border-bottom: 2px solid rgba(var(--sc-brand-rgb), .45); }
.leyenda-estados { display: inline-flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; color: var(--bs-secondary-color); }
.leyenda-estados i { display: inline-block; width: .9rem; height: .9rem; border-radius: .2rem; border: 1px solid rgba(0,0,0,.25); vertical-align: -.15rem; margin-right: .3rem; }

/* ficha del articulo: el precio que sale en Facturacion, bien a la vista */
.bloque-fact { background: color-mix(in srgb, var(--sc-ok) 12%, white); border: 2px solid color-mix(in srgb, var(--sc-ok) 50%, white); }
[data-bs-theme="dark"] .bloque-fact { background: rgba(80,160,110,.14); border-color: rgba(120,200,150,.5); }

/* un menu desplegable abierto (los tres puntos de una fila) no se recorta dentro de la tabla con scroll */
.table-responsive:has(.dropdown-menu.show) { overflow: visible; }

/* en el detalle de un comprobante recibido los chips van mas chicos, acordes a la letra de los datos */
.rec-zona .estado-badge { font-size: .72rem; padding: .25em .55em; }
.rec-zona .btn-sm { font-size: .72rem; padding: .1rem .45rem; }
/* todo el texto del cabezal (etiquetas, datos, títulos de grupo, fecha) con la misma letra que el detalle de líneas */
.rec-zona, .rec-zona .small, .rec-zona small, .rec-zona .rec-etq, .rec-zona .rec-grupo { font-size: 1em !important; }
.rec-zona .rec-grupo { font-weight: 600; }
.rec-zona .rec-etq { color: var(--bs-secondary-color); }

/* detalle de un comprobante recibido con muchas lineas: la tabla tiene alto maximo y scroll propio, con el encabezado fijo; los totales quedan siempre a la vista */
.rec-zona-detalle .table-responsive { max-height: var(--rec-detalle-alto, 16.25rem); overflow-y: auto; }   /* el alto lo fija recibidos.js según «Detalle: N líneas» */
.rec-zona-detalle thead th { position: sticky; top: 0; z-index: 1; background: var(--fc-detalle, var(--sc-fondo-suave)); box-shadow: 0 1px 0 rgba(0,0,0,.12); }

/* ingreso a stock: Venta (margen, sin IVA y público) es un bloque de fondo un poco más oscuro; el costo no se modifica y va sin recuadro */
.tabla-ingreso td.col-venta { background-color: var(--sc-fondo-suave) !important; }
.tabla-ingreso thead th, .tabla-ingreso thead tr.fila-grupos th { font-weight: 400; }   /* cabezales sin negrita */
[data-bs-theme="dark"] .tabla-ingreso td.col-venta { background-color: rgba(255,255,255,.12) !important; }
/* el bloque Venta lleva un borde fino alrededor (con el cabezal del bloque un tono más fuerte) para que se distinga del resto */
.tabla-ingreso thead th.col-venta { background-color: color-mix(in srgb, var(--sc-brand) 16%, white) !important; }
[data-bs-theme="dark"] .tabla-ingreso thead th.col-venta { background-color: rgba(255,255,255,.2) !important; }
.tabla-ingreso .col-venta-ini { border-left: 1px solid rgba(var(--sc-brand-rgb), .55) !important; }
.tabla-ingreso .col-venta-fin { border-right: 1px solid rgba(var(--sc-brand-rgb), .55) !important; }
.tabla-ingreso thead tr.fila-grupos th.col-venta { border-top: 1px solid rgba(var(--sc-brand-rgb), .55); border-bottom: 0; }
.tabla-ingreso tbody tr:last-child td.col-venta { border-bottom: 1px solid rgba(var(--sc-brand-rgb), .55); }
.pv-flecha { position: absolute; left: .3rem; top: 50%; transform: translateY(-50%); line-height: 1; font-size: 1.05rem; pointer-events: none; }
.pv-flecha span { font-size: .8rem; font-weight: 600; pointer-events: auto; }
.pv-flecha i { pointer-events: auto; }

/* ingreso a stock: los campos editables del bloque Venta van en blanco sobre el fondo del bloque */
.tabla-ingreso td.col-venta .form-control { background-color: var(--bs-white); }
[data-bs-theme="dark"] .tabla-ingreso td.col-venta .form-control { background-color: var(--bs-body-bg); }

/* portada: sello «Proveedor habilitado por DGI» debajo del logo del recuadro de ingreso */
.caja-ingreso .sello-dgi { display: flex; align-items: center; gap: .3rem; margin-top: .15rem; font-size: .78rem; font-weight: 600; color: color-mix(in srgb, var(--sc-ok) 85%, black); text-decoration: none; }
.caja-ingreso .sello-dgi i { font-size: .9rem; }
.caja-ingreso .sello-dgi:hover { text-decoration: underline; text-underline-offset: .2rem; }

/* burbuja de ayuda (assets/js/ayuda.js) */
.ayuda-boton { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1040; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 0; background: var(--sc-brand); color: var(--sc-on-brand); font-size: 1.4rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.ayuda-boton:hover { background: var(--sc-brand-dark); }
.ayuda-panel { position: fixed; right: 1.2rem; bottom: 5rem; z-index: 1040; width: min(380px, calc(100vw - 1.5rem)); height: min(560px, calc(100vh - 7rem)); display: flex; flex-direction: column; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .9rem; box-shadow: 0 8px 30px rgba(0,0,0,.28); overflow: hidden; }
.ayuda-panel[hidden] { display: none; }
.ayuda-cabecera { background: var(--sc-brand); color: var(--sc-on-brand); padding: .75rem 1rem; display: flex; justify-content: space-between; align-items: flex-start; }
.ayuda-cabecera .small { opacity: .85; }
.ayuda-cuerpo { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .55rem; font-size: .88rem; }
.ayuda-msg { background: var(--bs-white); border: 1px solid var(--bs-border-color); border-radius: .7rem; padding: .6rem .75rem; max-width: 96%; align-self: flex-start; }
[data-bs-theme="dark"] .ayuda-msg { background: var(--bs-tertiary-bg); }
.ayuda-msg.mia { align-self: flex-end; background: var(--sc-brand); color: var(--sc-on-brand); border-color: var(--sc-brand); }
.ayuda-msg p { margin: 0 0 .4rem; } .ayuda-msg ol, .ayuda-msg ul { padding-left: 1.2rem; margin: 0 0 .4rem; } .ayuda-msg li { margin-bottom: .25rem; }
.ayuda-titulo { font-weight: 700; margin-bottom: .35rem; }
.ayuda-nota { font-size: .82rem; color: var(--bs-secondary-color); }
.ayuda-botones { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.ayuda-fuentes { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .4rem; }
.ayuda-rapidas-t { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .4rem; }
.ayuda-chip { display: block; width: 100%; text-align: left; margin-bottom: .35rem; padding: .4rem .65rem; border: 1px solid var(--sc-brand); border-radius: 1rem; background: transparent; color: var(--sc-brand); font-size: .84rem; }
.ayuda-chip:hover { background: var(--sc-brand); color: var(--sc-on-brand); }
.ayuda-doc { border-left: 3px solid var(--sc-brand-light); padding: .15rem 0 .15rem .6rem; margin-top: .5rem; font-size: .82rem; white-space: pre-line; }
.ayuda-doc-origen { font-weight: 600; font-size: .75rem; color: var(--bs-secondary-color); margin-bottom: .15rem; }
.ayuda-doc mark { background: color-mix(in srgb, var(--sc-warn) 35%, white); padding: 0 .1rem; }
.ayuda-valorar { display: flex; align-items: center; gap: .4rem; }
.ayuda-entrada { display: flex; gap: .4rem; padding: .6rem .8rem 0; border-top: 1px solid var(--bs-border-color); }
.ayuda-entrada input { flex: 1; border: 1px solid var(--bs-border-color); border-radius: 1.2rem; padding: .4rem .8rem; background: var(--bs-body-bg); color: var(--bs-body-color); }
.ayuda-entrada button { border: 0; border-radius: 50%; width: 2.2rem; height: 2.2rem; background: var(--sc-brand); color: var(--sc-on-brand); }
.ayuda-pie { font-size: .7rem; color: var(--bs-secondary-color); padding: .4rem .9rem .6rem; text-align: center; }
@media print { .ayuda-boton, .ayuda-panel { display: none !important; } }
.ayuda-mas { margin-top: .5rem; border-top: 1px dashed var(--bs-border-color); padding-top: .4rem; }
.ayuda-mas > summary, .ayuda-titulo { cursor: pointer; }
.ayuda-mas > summary { font-size: .82rem; font-weight: 600; color: var(--sc-brand); }
.ayuda-valoracion { margin-top: .5rem; border-top: 1px solid var(--bs-border-color); padding-top: .4rem; }

/* Celular: el buscador de las tablas ocupa el ancho y el «Ver N» queda con su rótulo separado del número */
@media (max-width: 767.98px) {
  .dt-search, .dt-length { display: flex; align-items: center; gap: .5rem; }
  .dt-search { flex: 1 1 100%; }
  .dt-search input { flex: 1 1 auto; min-width: 0; }
}

/* Celular, Consulta de emitidos y Comprobantes recientes: la lista muestra también el Total (celdas más justas, sin las flechas de orden) y las herramientas ocupan una sola fila */
@media (max-width: 767.98px) {
  .dt-container:has(#tabla, #tabla-recientes) table.dataTable > :is(thead, tbody) > tr > :is(th, td) { padding-left: .3rem; padding-right: .3rem; }
  .dt-container:has(#tabla, #tabla-recientes) table.dataTable > thead .dt-column-order { display: none; }
  .dt-container:has(#tabla, #tabla-recientes) > .row { flex-wrap: nowrap; gap: .5rem; }
  .dt-container:has(#tabla, #tabla-recientes) > .row > div { width: auto; flex: 0 0 auto; margin-top: 0 !important; padding: 0 calc(var(--bs-gutter-x) * .5); }
  .dt-container:has(#tabla, #tabla-recientes) > .row > div:first-child { flex: 1 1 auto; min-width: 0; gap: .5rem !important; flex-wrap: nowrap !important; }
  .dt-container:has(#tabla, #tabla-recientes) .dt-search { flex: 1 1 auto; min-width: 0; }
  .dt-container:has(#tabla, #tabla-recientes) .dt-search label, .dt-container:has(#tabla, #tabla-recientes) .dt-length label { display: none; }
  .dt-container:has(#tabla, #tabla-recientes) .buttons-excel { font-size: 0; }
  .dt-container:has(#tabla, #tabla-recientes) .buttons-excel i { font-size: 1rem; margin: 0 !important; }
  #modo-envio { display: none; }
  #acciones-vista .btn { font-size: .8rem; padding: .2rem .5rem; }
}

/* ---- Decoración de temporada, solo en la portada (la prende el Super en Apariencia → Temporada; tema.js pone los data-* en <html>). Solo adorna: no recibe clics ni mueve nada.
   Navidad: nieve y gorro de Papá Noel en el logo. Fin de año: confeti. Los colores salen de la marca y de los de éxito, advertencia y error. */
/* cuatro capas de copos de distinto tamaño; cada una se corre un múltiplo de su mosaico, así el bucle no se corta */
@keyframes sc-caer { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: -160px 320px, 110px 220px, -200px 400px, 90px 180px; } }
:root[data-temporada="navidad"] { --sc-adorno: radial-gradient(circle at 30px 25px, var(--bs-white) 0 2.2px, transparent 3.6px), radial-gradient(circle at 70px 60px, var(--bs-white) 0 3px, transparent 4.8px),
  radial-gradient(circle at 120px 90px, color-mix(in srgb, var(--bs-white) 85%, transparent) 0 4.5px, transparent 7px), radial-gradient(circle at 20px 50px, var(--bs-white) 0 1.3px, transparent 2.4px); }
:root[data-temporada="navidad"][data-temp-portada="1"] .portada::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--sc-adorno); background-size: 160px 160px, 110px 110px, 200px 200px, 90px 90px; opacity: .85; animation: sc-caer 36s linear infinite; }
/* gorro de Papá Noel sobre el logo (solo Navidad): el cuerpo rojo con la punta doblada (la forma es una máscara; el color es el de «Error») y, encima, el ribete y el pompón blancos */
:root[data-temporada="navidad"][data-temp-portada="1"] .portada .marca .sello-logo, :root[data-temporada="navidad"][data-temp-portada="1"] .portada .portada-marca { position: relative; }
:root[data-temporada="navidad"][data-temp-portada="1"] .portada .marca .sello-logo::before, :root[data-temporada="navidad"][data-temp-portada="1"] .portada .portada-marca::before { content: ''; position: absolute; left: -.4rem; top: -1rem; width: 2.2rem; height: 1.5rem; background: var(--sc-error); pointer-events: none; z-index: 2; transform: rotate(-9deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cpath d='M3 30 Q8 8 28 4 Q38 3 38 11 Q30 8 27 16 Q25 23 27 30 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cpath d='M3 30 Q8 8 28 4 Q38 3 38 11 Q30 8 27 16 Q25 23 27 30 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
:root[data-temporada="navidad"][data-temp-portada="1"] .portada .marca .sello-logo::after, :root[data-temporada="navidad"][data-temp-portada="1"] .portada .portada-marca::after { content: ''; position: absolute; left: -.4rem; top: -1rem; width: 2.2rem; height: 1.5rem; pointer-events: none; z-index: 3; transform: rotate(-9deg);
  background: radial-gradient(circle at 84% 34%, var(--bs-white) 0 .34rem, transparent .36rem), linear-gradient(var(--bs-white), var(--bs-white)) 0 100% / 74% .4rem no-repeat; }
/* Fin de año: dos fuegos artificiales grandes, bien separados en el tiempo (uno cada ~17 s y otro cada ~23 s, cada uno dura un par de segundos) y en lugares distintos.
   Cada uno es un estallido de rayos (--fuego) que crece y se apaga; la forma es CSS puro. */
@keyframes sc-fuego { 0%, 100% { transform: scale(.12); opacity: 0; } 1.5% { opacity: .75; } 11% { transform: scale(1); opacity: .6; } 15% { transform: scale(1.08); opacity: 0; } }
:root[data-temporada="fin"][data-temp-portada="1"] .portada::before, :root[data-temporada="fin"][data-temp-portada="1"] .portada::after, :root[data-temporada="fin"][data-temp-portada="1"] .portada > .container::before { content: ''; position: absolute; z-index: 0; pointer-events: none; width: 20rem; height: 20rem; opacity: 0; transform: scale(.12);
  background: radial-gradient(circle, color-mix(in srgb, var(--fuego) 80%, transparent) 0 5%, transparent 6%), repeating-conic-gradient(var(--fuego) 0 2.2deg, transparent 2.2deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 0 14%, black 16% 58%, transparent 66%); mask: radial-gradient(circle, transparent 0 14%, black 16% 58%, transparent 66%); }
:root[data-temporada="fin"][data-temp-portada="1"] .portada::before { --fuego: var(--sc-warn); left: 50%; top: -17%; animation: sc-fuego 21s ease-out 3s infinite; }
:root[data-temporada="fin"][data-temp-portada="1"] .portada::after { --fuego: color-mix(in srgb, var(--sc-error) 70%, white); left: 4%; top: -24%; animation: sc-fuego 27s ease-out 12s infinite; }
:root[data-temporada="fin"][data-temp-portada="1"] .portada > .container::before { --fuego: color-mix(in srgb, var(--sc-brand) 35%, white); z-index: -1; left: 74%; top: -34%; animation: sc-fuego 33s ease-out 21s infinite; }
@media (prefers-reduced-motion: reduce) { :root[data-temporada][data-temp-portada="1"] .portada::before, :root[data-temporada][data-temp-portada="1"] .portada::after { animation: none; } :root[data-temporada="fin"][data-temp-portada="1"] .portada::before, :root[data-temporada="fin"][data-temp-portada="1"] .portada::after, :root[data-temporada="fin"][data-temp-portada="1"] .portada > .container::before { display: none; } }