/* ============================================================================
 *  NOTA DE CRÉDITO — formulario de nueva NC
 *
 *  Sirve a los DOS módulos de nota de crédito, con el MISMO markup y las mismas clases:
 *    · `venta/notaCredito`  -> raíz `.ncv-form`  (nació acá, 2026)
 *    · `compra/notaKredito` -> raíz `.ncc-form`  (2026-08-28)
 *  El prefijo `ncv-` de las clases internas es HISTÓRICO, no significa "solo venta": se dejó
 *  así para no tocar el markup ni el JS del módulo que ya funcionaba. Lo que separa a los dos
 *  es únicamente la clase de la RAÍZ.
 *  ⚠️ Cada regla lista las dos raíces en vez de compartir una sola clase a propósito: la
 *  especificidad de estos selectores está calculada al milímetro contra `app-override.css`
 *  (ver el comentario del cartel más abajo), y cualquier atajo que la baje rompe el tema.
 *  Si se agrega una regla, agregarla PARA LAS DOS.
 *
 *  Solo aporta lo que el patrón `form-horizontal` + `fieldset/legend` no da: que la
 *  barra de acciones quede fija abajo y el cartelito del atajo de teclado.
 *
 *  ⚠️ NO pinta fondo ni borde DE LA BARRA a propósito. La barra va envuelta en
 *  `smart-form` + `footer`, y esos ya están tematizados para los 4 contextos en
 *  `app-override.css` (con `!important`, así que pelearlos es perder).
 *
 *  El cartel de campos obligatorios SÍ se toca acá, y hace falta: ver el comentario de
 *  más abajo, que explica por qué el ícono se apaga solo y cómo se lo recupera.
 *
 *  Base Firefox 80: nada de `:has()`, `color-mix()` ni `@container`.
 * ==========================================================================*/

/* ---- barra de acciones: SIEMPRE visible al pie del formulario ----
   `sticky` y no `fixed`: se queda pegada abajo mientras se hace scroll pero sigue
   dentro del flujo, así no tapa contenido ni se escapa de la pestaña. */
.ncv-form .ncv-actionbar,
.ncc-form .ncv-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 12px;
}

/* una sola fila: el cartel de obligatorios a la izquierda, el botón a la derecha.
   El cartel trae `float:left`, que dentro de un flex se ignora solo. */
.ncv-form .ncv-actionbar > footer,
.ncc-form .ncv-actionbar > footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ncv-form .ncv-actionbar .ncv-actions,
.ncc-form .ncv-actionbar .ncv-actions { margin-left: auto; }

/* ---- cartel de campos obligatorios ----
   Se usa `.lv-modalrequired`, la MISMA clase del CRUD de sucursales (el chip rosa con ícono).
   La otra, `.lv-requided-require`, se ve plana y NO sirve acá.

   ⚠️ EL ÍCONO ES EL FONDO (`background: #F4C6C2 url(required.png)` en `generic.css`), así que
   cualquier `background: transparent` lo apaga junto con el rosa. Y `app-override.css` hace
   justamente eso dentro de `.smart-form footer`. La diferencia entre las dos clases está en
   CUÁNTAS reglas hay que ganar:
     - `.lv-requided-require` → la pisan DOS, y una es `body.theme-dark .smart-form footer …`
       (3 clases + 2 elementos). Un selector de 3 clases empata y pierde por elementos: se
       repone en claro y se queda plano en oscuro. Inservible.
     - `.lv-modalrequired`    → la pisa UNA sola, `body .smart-form footer …` (2 clases + 2
       elementos), sin variante de oscuro. El selector de abajo tiene 3 clases → gana por
       cantidad de clases, y gana en LOS DOS temas.
   `min-width` conserva el ancho de sucursales; `width/height: auto` evita que el texto se
   desborde como pasaba con los 153×30px fijos (acá la tipografía base es más grande). */
.ncv-form .ncv-actionbar > footer .lv-modalrequired,
.ncc-form .ncv-actionbar > footer .lv-modalrequired {
    background: #F4C6C2 url(../../public/img/required.png) 4px 50% no-repeat !important;
    color: #990000 !important;
    border: 1px solid #E7ABA5 !important;
    border-radius: 5px;
    min-width: 153px;
    width: auto !important;
    height: auto !important;
    padding: 6px 10px 6px 24px !important;
    margin: 0;
    float: none;
    line-height: 16px;
    text-align: left;
    white-space: nowrap;
    font-weight: bold;
    font-style: italic;
}

/* ---- atajo de teclado dentro del botón ----
   hereda el color del botón, así que no hay que pintarlo por contexto */
.ncv-form .ncv-kbd,
.ncc-form .ncv-kbd {
    margin-left: 6px;
    padding: 1px 5px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 400;
    opacity: .75;
}

/* en pantallas chicas el atajo no aporta (no hay teclado) y aprieta el botón */
@media (max-width: 768px) {
    .ncv-form .ncv-kbd,
    .ncc-form .ncv-kbd { display: none; }
}

/* ============================================================================
 *  COMPRA / NOTA DE CRÉDITO — barra FLOTANTE estilo "registro de compras"
 *  (pedido del dueño 2026-08-28: "el grabar debe ser flotante como registro de compras")
 *
 *  Diferencia con la barra de VENTA, y es la que se veía: la de venta es PLANA a propósito
 *  —hereda el `footer` que `app-override.css` tematiza— mientras que `compra/kompra` pinta su
 *  `.k-actionbar` como TARJETA (fondo + borde + radio + sombra), y eso es lo que la hace leerse
 *  como flotante aun sin scroll. Acá se replica el criterio de kompra.
 *
 *  ⚠️ SOLO `.ncc-form`. La barra de venta se deja como estaba: su autor decidió no pintarla y
 *  no es lo que se pidió cambiar.
 *
 *  ⚠️ EL FONDO VA EN EL CONTENEDOR (`.ncv-actionbar`, que es el `.smart-form`), NO en el `footer`.
 *  `app-override.css` tematiza `footer` con `!important` y pelear eso desde un selector flojo es
 *  perder — es exactamente lo que hace kompra con su `.k-actionbar`. Al contenedor no lo toca
 *  nadie, así que acá no hace falta ni `!important`.
 * ==========================================================================*/
/* ⚠️ `fixed`, NO `sticky` — y el cambio es a propósito, tras probarlo (2026-08-28).
   `sticky` es lo que usa la barra de venta y la de kompra, pero DEPENDE del contenedor: se
   pega al scrollport más cercano y muere en silencio si cualquier ancestro trae `overflow`,
   o si el padre no le deja recorrido. Acá el formulario vive dentro de un `.tab-pane` de la
   SPA y el botón quedaba cortado abajo, fuera de la vista — que es justo lo que se quería
   evitar. `fixed` no depende de ningún ancestro: flota siempre.
   ✅ Es seguro en la SPA porque `.tab-content > .tab-pane { display: none }` (bootstrap): un
   elemento `fixed` dentro de una pestaña OCULTA no se pinta, así que no se filtra a las otras
   pestañas ni al panel.
   `z-index` por DEBAJO del modal de bootstrap (1040) a propósito: con un modal abierto la barra
   tiene que quedar detrás del backdrop, no flotando encima. */
.ncc-form .ncv-actionbar {
    position: fixed;
    bottom: 16px;
    right: 22px;
    left: auto;
    width: auto;
    z-index: 900;
    margin-top: 0;
    background: var(--g-bg2);
    border: 1px solid var(--g-border2);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(18, 38, 63, .10), 0 6px 20px rgba(18, 38, 63, .14);
    padding: 8px 12px;
}

/* el formulario reserva el alto de la barra: si no, la última fila queda debajo de algo que
   flota y no se puede leer ni clickear */
.ncc-form { padding-bottom: 86px; }

/* en pantallas chicas la barra pasa a ocupar el ancho: un botón suelto en la esquina queda
   incómodo de alcanzar con el pulgar y el cartel no entra al lado */
@media (max-width: 768px) {
    .ncc-form .ncv-actionbar { left: 12px; right: 12px; bottom: 12px; }
}

/* El `footer` de adentro se APAGA: si conserva su propio fondo y su borde superior se ven DOS
   barras encimadas (la tarjeta y la franja del tema).
   ⚠️ Hacen falta 3 CLASES, y no es capricho: el reset compite contra dos reglas con `!important`
     · claro  -> `body .smart-form footer`            = 1 clase + 2 elementos
     · oscuro -> `body.theme-dark .smart-form footer` = 2 clases + 2 elementos
   Con `!important` en los dos lados manda la especificidad, y las clases se cuentan ANTES que los
   elementos: `.ncc-form .ncv-actionbar.smart-form > footer` son 3 clases -> gana en los DOS temas.
   Con 2 clases empataba en oscuro y perdía por elementos (la misma trampa que ya documentó el
   cartel de campos obligatorios más arriba). */
.ncc-form .ncv-actionbar.smart-form > footer {
    background: transparent !important;
    border-top: 0 !important;
    padding: 0 !important;
}