/* ============================================================================
 *  VENTA / NOTA DE CRÉDITO — formulario de nueva NC
 *
 *  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 {
    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 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ncv-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 {
    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 {
    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 { display: none; }
}