/*
    modern-ui.css
    Capa visual moderna para el formulario Ventas > Emitir Comprobante > Nuevo,
    mas una seccion de botones (.btn) global que aplica a TODO el sistema
    (Nuevo/Excel/Filtrar/Acciones, etc., generados por public/js/appButton.js
    y fullgrid con las clases Bootstrap .btn/.btn-*). No modifica el shell
    general (cabecera/menu/pestañas) ni ningún id/name/clase funcional usada
    por el JS existente. El dashboard ya tiene su propio sistema de estilos
    (dash-modern/dash-card, embebido en formDashBoardAdministrador.js) y no
    se toca aqui salvo por la seccion de botones, que tambien lo alcanza.
*/

:root {
    /* mapeado a theme-tokens.css (public/css/theme-tokens.css) para unificar
       la paleta con el resto del sistema sin reescribir las reglas de abajo */
    --mu-radius: var(--t-radius-lg, 14px);
    --mu-radius-sm: var(--t-radius-sm, 10px);
    --mu-shadow: var(--t-shadow, 0 2px 10px rgba(30, 41, 59, 0.08));
    --mu-border: var(--t-border, #e8ebf1);
    --mu-text: var(--t-text, #2b2f38);
    --mu-text-muted: var(--t-text-muted, #7a8399);
    --mu-primary: var(--t-primary, #3b82f6);
    --mu-bg-card: var(--t-card, #ffffff);
}

.modern-form-card {
    background: var(--mu-bg-card);
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    box-shadow: var(--mu-shadow);
    padding: 14px 16px;
    margin-bottom: 12px;
}

/*
 * Entre una fila de tarjetas y la siguiente se apilaban DOS margenes: el de la
 * tarjeta (12px) y el de la <section class="col"> del tema que la envuelve
 * (15px), o sea 27px de aire muerto. Manda el de la seccion.
 */
.smart-form section.col > .modern-form-card {
    margin-bottom: 0;
}

/* Campos mas compactos: menos aire entre filas y menos alto por campo.
   El selector es ".padding-10" a secas y no ".row.padding-10" porque el tema
   usa esa clase sobre todo en <section>, que era justo lo que se quedaba con
   los 10px por lado. */
.modern-form-card .padding-10 {
    padding: 4px 8px !important;
}

.modern-form-card section {
    margin-bottom: 3px !important;
}

/*
 * Rotulos de campo. El tema les pone "padding: 4px 10px": con 11px de letra y
 * 19px de interlineado, cada rotulo ocupaba una caja de 27px -- mas alta que
 * media fila -- y ademas el texto quedaba 10px a la derecha del borde de su
 * propio campo. Sin ese relleno son 15px y empiezan donde empieza el campo.
 * Las pastillas de estado (label-success, label-danger...) tambien son
 * <label class="label"> en muchas grillas: se excluyen para que conserven su
 * relleno cuando la grilla vive dentro de una tarjeta.
 */
.modern-form-card label.label:not([class*="label-"]),
.modern-form-card label.control-label {
    margin-bottom: 2px !important;
    padding: 0 !important;
    line-height: 1.4;
}

.modern-form-card .smart-form .form-control,
.modern-form-card input.form-control,
.modern-form-card select,
.modern-form-card .chosen-container-single .chosen-single {
    padding: 6px 10px !important;
    height: 32px !important;
}

.modern-form-card .chosen-container-single .chosen-single {
    line-height: 20px;
}

.modern-form-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mu-text);
    margin: -14px -16px 12px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--mu-border);
    border-radius: var(--mu-radius) var(--mu-radius) 0 0;
    background: #f7f9fc;
}

.modern-form-card-header i {
    color: var(--mu-primary);
    font-size: 16px;
}

/* Titulo de la tarjeta ("Datos del Comprobante"): nunca se corta a la
   mitad de una palabra, aunque el espacio se achique. */
.modern-form-card-header > span[data-tr] {
    white-space: nowrap;
}

/*
 * Nombre de la caja abierta ("CAJA PRUEBA") a la derecha del titulo. Ya no
 * lleva botones: aperturar, ver detalle y cerrar viven en el Panel (ver
 * addBtnsCaja en app/system/init/views/js/System.InitRsc.js). Aqui queda solo
 * el dato, en una linea, sin empujar al titulo a partirse en dos.
 */
.modern-form-card-header [id$="sp_caja"] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    float: none !important;
    white-space: nowrap;
    font-size: 11px;
}

/* sin caja abierta el span queda vacio y no debe ocupar ni el hueco */
.modern-form-card-header [id$="sp_caja"]:empty {
    display: none !important;
}

/*
 * La rejilla de .smart-form del tema llega hasta .col-10 (83.33%): .col-11 y
 * .col-12 no existen. Una seccion marcada "col col-12" no ocupa el ancho
 * entero, se encoge al tamanio de su contenido -- por eso un campo solo en su
 * fila salia corto y el boton de al lado parecia pegarsele.
 *
 * No se ve venir porque en Bootstrap col-12 SI es el ancho completo, y porque
 * fuera de .smart-form la seccion es un bloque normal y ocupa todo igual.
 */
.smart-form .col-11 {
    width: 91.66%;
}

.smart-form .col-12 {
    width: 100%;
}

/* Campos que el formulario conserva pero no muestra (el <select> de tipo de
   comprobante y el de cliente, que ahora se manejan con botones y busqueda) */
.modern-oculto {
    display: none !important;
}

/*
 * Fila de botones excluyentes: tipo de comprobante en el formulario y origen
 * en el popup "Cargar desde". Sustituye a la lista desplegable cuando las
 * opciones son pocas y conviene verlas todas de un vistazo.
 */
.modern-toggle-row {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius-sm);
    background: #f7f9fc;
    margin-bottom: 4px;
}

/*
 * El rotulo se lee entero, aunque no entre en una linea: "BOLETA DE VENTA"
 * necesita 123 px y la columna da 97, asi que antes se cortaba con puntos
 * suspensivos. Ahora baja de 12 a 11 px y, lo que siga sin entrar, pasa a una
 * segunda linea. Los tres botones igualan altura solos (es una fila flex), asi
 * que la fila no se descuadra.
 */
.modern-toggle-row .modern-toggle {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 4px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--mu-text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    transition: background .15s ease, color .15s ease;
}

.modern-toggle-row .modern-toggle:hover {
    background: rgba(59, 130, 246, .10);
    color: var(--mu-primary);
}

.modern-toggle-row .modern-toggle.active {
    background: var(--mu-primary);
    color: #fff;
}

/*
 * Modo oscuro. El #f7f9fc de la fila es un gris de papel: sobre una tarjeta
 * oscura quedaba como una banda blanca, y el rotulo del boton sin elegir caia
 * a 2.4:1 de contraste. Se oscurece igual que la cabecera de tarjeta.
 *
 * El boton elegido tambien baja un tono: blanco sobre el azul claro del tema
 * da 3.7:1, por debajo de lo legible para un texto de 11 px; con este azul
 * sube a 5.2:1.
 */
html.dark-mode .modern-toggle-row {
    background: #0f172a;
}

html.dark-mode .modern-toggle-row .modern-toggle.active {
    background: #2563EB;
}

/*
 * Buscador de cliente + boton "+". El "+" es el boton "Agregar Cliente" del
 * sistema (con sus permisos), reducido a su icono: el texto queda en el
 * tooltip, que es lo que permite tenerlo dentro de la misma fila.
 */
.modern-campo-buscar {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* el campo se queda con todo el ancho sobrante; el boton, con lo suyo. El
   min-width: 0 es lo que permite que el campo se encoja en vez de empujar al
   boton fuera de la fila o montarsele encima. */
.modern-campo-buscar > label.input,
.modern-campo-buscar > label.select {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.modern-campo-buscar > label.select .chosen-container {
    width: 100% !important;
}

.modern-campo-buscar [id$="btn_nw_cliente"] .btn {
    position: relative;
    font-size: 0 !important;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
    border-radius: var(--mu-radius-sm);
}

/*
 * El "+" se centra por posicion y no por flex: el boton conserva su texto
 * ("Agregar Cliente", reducido a font-size 0 para que quede solo el icono) y
 * ese nodo de texto seguia contando como contenido, corriendo el icono unos
 * pixeles a la izquierda.
 */
.modern-campo-buscar [id$="btn_nw_cliente"] .btn i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px !important;
    margin: 0 !important;
}

/*
 * "Cargar desde", en la cabecera de "Datos del Comprobante". Compacto y
 * pegado a la derecha: la tarjeta mide unos 300 px y con el tamanio normal
 * el boton se caia a una segunda linea, dejando la cabecera al doble de alto.
 */
.modern-form-card-header .modern-btn-cargar {
    margin-left: auto;
    border-radius: 8px;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 9px;
    white-space: nowrap;
}

.modern-form-card-header .modern-btn-cargar i {
    margin-right: 3px;
}

/* ===================== AVISOS DE SECCION =====================
   El "alert" verde del tema es lo que usan como cabecera o como aviso de
   contexto casi todas las pantallas que todavia no se rehicieron una por una
   (Productos, Series, Servicios, los modales de Usuario, Vehiculos del
   transportista, y los avisos de envio a SUNAT de Venta, Baja y las Notas).

   En vez de reescribir esas vistas de a una, se les da aqui el mismo aire que
   a las tarjetas: fondo claro, borde suave y una franja del color de la marca
   a la izquierda. El verde saturado de SmartAdmin era lo que las delataba como
   "de otra epoca". */
.alert-success,
.alert-info {
    background: #f7f9fc;
    border: 1px solid var(--mu-border);
    border-left: 3px solid var(--mu-primary);
    border-radius: var(--mu-radius-sm);
    color: var(--mu-text);
    padding: 12px 16px;
    font-size: 13px;
    box-shadow: var(--mu-shadow);
}

.alert-success > i,
.alert-info > i,
.alert-success > .fa,
.alert-info > .fa {
    color: var(--mu-primary);
}

html.dark-mode .alert-success,
html.dark-mode .alert-info {
    background: var(--mu-bg-card);
    color: var(--mu-text);
}

/* Cabecera de detalle sin barra de busqueda (Nota de Pedido): el titulo ocupa
   el lugar del buscador y las acciones se van a la derecha, con el mismo aire
   que la cabecera de una tarjeta normal. */
.modern-detalle-header .modern-detalle-titulo {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--mu-text);
}

.modern-detalle-header .modern-detalle-titulo i {
    color: var(--mu-primary);
    font-size: 16px;
    margin-right: 6px;
}

/* Lista de Precios: la tarjeta ocupa el popup entero y no arrastra el margen
   inferior que lleva por ser tarjeta de formulario. */
.modern-precios-card {
    margin-bottom: 0 !important;
}

.modern-precios-card .table > thead > tr > th {
    white-space: nowrap;
}

/* ===================== ACCIONES EN LINEA CON UN CAMPO =====================
   Notas de Credito y Debito: "Ver Documento" y "Continuar" van en la misma
   fila que la serie y el numero del comprobante afectado, alineados con los
   campos y no con la etiqueta. La etiqueta vacia de su columna reserva el
   alto del rotulo; estos botones se apoyan debajo. */
.modern-form-card .modern-acciones-doc-btns {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.modern-form-card .modern-acciones-doc-btns .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--mu-radius-sm);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ===================== BOTON DE AYUDA (TOUR) =====================
   El "?" flotante de cada pestania. Va del color de la marca, el mismo que
   Tools.colorTour() le pone al rotulo de su pestania: eso es lo que empareja
   el tour con la pestania a la que pertenece.

   El color va aqui y no en el atributo style del boton porque la seccion de
   botones de esta misma hoja usa !important y le ganaba al estilo en linea:
   el boton terminaba blanco sobre fondo blanco. */
button.modern-btn-tour {
    background: var(--mu-primary) !important;
    border-color: var(--mu-primary) !important;
    color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
}

button.modern-btn-tour:hover,
button.modern-btn-tour:focus {
    background: var(--mu-primary) !important;
    color: #fff !important;
    filter: brightness(1.08);
}

button.modern-btn-tour i {
    color: #fff !important;
    font-size: 18px;
}

/* ===================== BOTON DE BORRAR FILA =====================
   El de los detalles de Venta, Compra, Cotizacion, Nota de Pedido y Guia de
   Remision. Los cinco modulos lo pintan con la etiqueta <btn>, que no existe
   en HTML -- y eso es justo lo que permite alcanzarlos a todos con un solo
   selector, sin rozar ningun <button> de verdad.

   Redondo y centrado en su celda: con el ancho que traia (44,5 px dentro de
   una columna de 36) se salia del hueco, quedaba pegado al borde derecho de
   la tabla y la barra de desplazamiento le comia la mitad.

   El centrado se hace con margin auto y no con text-align en la celda porque
   la celda es de cada modulo; asi el arreglo entra sin tocar cinco vistas. */
btn.btn-danger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 0;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 50% !important;
    line-height: 1 !important;
}

btn.btn-danger i {
    margin: 0 !important;
    font-size: 13px;
}

/* ===================== CUOTAS DEL CREDITO =====================
   "N° de Cuotas" y el boton "Generar Cuotas" comparten linea. El alto lo
   iguala el propio flex (align-items: stretch), no un numero fijo: asi el
   boton mide lo que mida el campo, aunque el tema lo cambie. Antes el boton
   vivia en otra columna, empujado con un padding-top a ojo, y quedaba mas
   arriba y mas bajo que el campo. */
.modern-cuotas-fila {
    margin-bottom: 10px;
}

.modern-cuotas-controles {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.modern-cuotas-controles > label.input {
    flex: 0 0 150px;
    margin-bottom: 0 !important;
}

.modern-cuotas-controles > .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--mu-radius-sm);
    padding: 0 14px;
    font-weight: 600;
    white-space: nowrap;
}

/*
 * Tabla de cuotas. Los campos de fecha e importe venian en content-box: el
 * 100% de ancho se sumaba al relleno y al borde, asi que cada uno se salia
 * unos 25 px de su celda y pisaba la de al lado. Ademas la fecha y el importe
 * no median lo mismo (38 y 36 px), que es lo que hacia ver la fila rota.
 */
[id$="d_tabla_cuotas"] td,
[id$="d_tabla_cuotas"] th {
    vertical-align: middle !important;
}

/* El selector es largo a proposito: modern-components.css fuerza
   "height: auto !important" a los campos de .smart-form -- y a los input de
   texto con un selector todavia mas especifico --, asi que hay que superarlo
   para que la fecha y el importe midan lo mismo. */
.modern-form-card [id$="d_tabla_cuotas"] td input.form-control {
    box-sizing: border-box;
    width: 100%;
    height: 32px !important;
    padding: 5px 10px !important;
    border-radius: 8px;
}

/* la fecha se lee centrada, como su encabezado */
.modern-form-card [id$="d_tabla_cuotas"] td input._cuota_fecha {
    text-align: center;
}

/* ===================== TOTALES (el "Resumen" del comprobante) =====================
   Tarjeta blanca, un importe por linea (rotulo a la izquierda, cifra a la
   derecha) y campos bajos sobre fondo gris.

   Antes los importes iban de dos en dos con el rotulo ENCIMA del campo: cada
   pareja media 56 px de alto y la tarjeta se leia como seis bloques sueltos,
   con mas aire que dato. En linea miden 26 px, que es lo que se pidio.
*/
.modern-totals-card {
    background: var(--mu-bg-card);
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    padding: 14px 16px;
}

.modern-totals-card .control-label {
    font-weight: 500;
    color: var(--mu-text-muted);
}

/*
 * Un importe por fila. Las clases de columna de Bootstrap (col-md-4 y
 * col-md-8) que trae el HTML se neutralizan aqui: no colocan nada y sus
 * anchos en porcentaje descuadrarian la fila.
 */
.modern-totals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 2px 0 10px;
    /* .form-horizontal .form-group trae margenes laterales negativos, pensados
       para el grid de Bootstrap; aqui solo sacarian la rejilla de la tarjeta */
    margin: 0 !important;
}

/*
 * El clearfix de Bootstrap (.form-horizontal .form-group:before/:after) pone
 * dos pseudoelementos que, en una rejilla, cuentan como celdas: se llevaban la
 * primera y la ultima, y los importes salian corridos una posicion. En grid no
 * hacen falta, asi que se apagan.
 */
.modern-totals-grid::before,
.modern-totals-grid::after {
    content: none !important;
    display: none !important;
}

/* rotulo a la izquierda, cifra a la derecha, alineados entre si */
.modern-total-item,
.modern-total-highlight {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.modern-total-item > label,
.modern-total-highlight > label {
    flex: 1 1 auto;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.2;
}

.modern-total-item > div,
.modern-total-highlight > div {
    flex: 0 0 132px;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

/* En la barra del Total el rotulo ocupa lo justo y la cifra se lleva el resto:
   es la unica que puede crecer de verdad (suma de todo el comprobante) y va en
   cuerpo grande, asi que no cabe en el ancho fijo de los demas importes. */
.modern-total-highlight > label {
    flex: 0 0 auto;
}

.modern-total-highlight > div {
    flex: 1 1 auto;
}

/* el clearfix suelto del HTML seria una celda vacia dentro del flex */
.modern-total-highlight > .clearfix {
    display: none;
}

/*
 * La cifra: baja y sobre fondo gris, sin borde. El selector nombra la tarjeta
 * porque .modern-form-card fija "height: 32px !important" a todos sus campos
 * y esta tarjeta tambien es .modern-form-card.
 *
 * box-sizing: estos campos vienen en content-box, asi que el relleno y el
 * borde se SUMABAN al 100% y cada importe sobresalia de su celda; por eso el
 * HTML original traia un "width: 90%" escrito a mano en cada campo.
 */
.modern-totals-card .modern-total-item > div > input.form-control {
    width: 100% !important;
    box-sizing: border-box;
    height: 26px !important;
    padding: 0 9px !important;
    font-size: 12.5px !important;
    color: var(--mu-text);
    background: #eef1f6 !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

/* El unico importe que se escribe es "% Descuento": va en blanco y con borde,
   como cualquier otro campo del formulario, para que se note que se puede
   escribir. Los demas son de solo lectura y se quedan en gris. */
.modern-totals-card .modern-total-item > div > input.form-control:not([readonly]) {
    background: var(--mu-bg-card) !important;
    border-color: var(--mu-border) !important;
}

.modern-totals-card .modern-total-item > div > input.form-control:not([readonly]):focus {
    border-color: var(--mu-primary) !important;
}

/*
 * Total: la misma fila, dentro de la barra navy de la marca (el mismo tono de
 * la pestania activa). El azul vivo de --mu-primary competia con los botones
 * de accion; el navy cierra la tarjeta sin pelearse con ellos.
 */
.modern-total-highlight {
    background: #1E3A6E;
    border-radius: var(--mu-radius-sm);
    padding: 10px 14px;
    margin-top: 2px;
}

.modern-total-highlight .control-label {
    color: rgba(255,255,255,0.88) !important;
    font-size: 13px;
    font-weight: 600;
}

.modern-totals-card .modern-total-highlight > div > input.form-control {
    width: 100% !important;
    box-sizing: border-box;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

.modern-btn-tax {
    background: #fff;
    border: 1px solid var(--mu-primary);
    color: var(--mu-primary);
    border-radius: var(--mu-radius-sm);
    font-weight: 600;
    font-size: 12.5px;
    padding: 6px 10px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    transition: background .15s ease, color .15s ease;
}

.modern-btn-tax i {
    margin-right: 4px;
}

.modern-btn-tax:hover,
.modern-btn-tax:focus {
    background: #eaf1fe;
    color: var(--mu-primary);
}

.modern-btn-tax.active {
    background: var(--mu-primary);
    color: #fff;
}

/*
 * ===================== DETALLE (Emitir Comprobante): barra de busqueda =====================
 * Cabecera de la tarjeta Detalle: barra de busqueda de productos siempre
 * visible (reemplaza al boton "Agregar Item") + boton "Agregar Item Manual"
 * a la derecha. Usa las mismas variables --mu-* que el resto de la hoja,
 * por lo que se adapta solo a modo oscuro (redefinidas en modern-shell.css).
 */
.modern-detalle-header {
    display: flex;
    align-items: center;
    gap: 10px;
    /* los negativos igualan el relleno de .modern-form-card: la cabecera va de
       borde a borde de la tarjeta */
    margin: -14px -16px 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--mu-border);
    border-radius: var(--mu-radius) var(--mu-radius) 0 0;
    background: #f7f9fc;
    flex-wrap: wrap;
}

html.dark-mode .modern-detalle-header {
    background: var(--mu-bg-card);
}

.modern-search-wrap {
    flex: 1 1 260px;
    position: relative;
    background: var(--mu-primary);
    border-radius: var(--mu-radius-sm);
    display: flex;
    align-items: center;
    padding: 0 14px;
}

.modern-search-wrap i {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    margin-right: 8px;
}

.modern-search-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    padding: 10px 0 !important;
    width: 100%;
    font-size: 13px;
}

.modern-search-input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

/* En oscuro el azul del tema aclara, y el texto blanco sobre el se queda en
   3.7:1. Un tono mas abajo lo devuelve a 5.2:1, igual que los botones de tipo
   de comprobante. */
html.dark-mode .modern-search-wrap {
    background: #2563EB;
}

/*
 * El "flash blanco" de la barra azul al escribir: mientras busca, jQuery UI le
 * pone al campo la clase ui-autocomplete-loading, y el tema le pinta encima un
 * GIF de spinner claro (select2-spinner.gif, con !important). Sobre un fondo
 * blanco pasa desapercibido; sobre el azul es un parpadeo.
 *
 * Se quita el GIF y el aviso de "estoy buscando" lo da la lupa, que gira
 * mientras dura la consulta. Si el navegador no soporta :has(), simplemente no
 * gira: se pierde el detalle, no la busqueda.
 */
/* el selector del tema es input[type="text"].ui-autocomplete-loading, asi que
   hace falta ganarle en especificidad y no solo con !important */
.modern-search-wrap input.modern-search-input.ui-autocomplete-loading {
    background-image: none !important;
}

.modern-search-wrap:has(.ui-autocomplete-loading) i {
    animation: mu-buscando .8s linear infinite;
}

@keyframes mu-buscando {
    to { transform: rotate(360deg); }
}

.modern-detalle-actions {
    flex: 0 0 auto;
}

/*
 * "Agregar Item Manual" (ITADDMAN): en app_boton viene con "btn-pill", que
 * lo dejaba con una forma distinta a la de todos los demas botones del
 * sistema. Se le devuelve el radio estandar para que sea igual al resto, y
 * se le iguala el alto al de la barra de busqueda de al lado (~36px) para
 * que no quede mas bajo y desalineado.
 */
.modern-detalle-actions .btn,
.modern-detalle-actions .btn.btn-pill {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center;
}

/*
 * ===================== "Generar Cuotas" (Cobrar > Credito) =====================
 * Mismo tratamiento "outline" que ya usa "Agregar impuesto +18%"
 * (.modern-btn-tax) en la tarjeta de Totales, para que combine con el resto
 * del formulario en vez del boton gris plano por defecto.
 */
[id$="btn_generar_cuotas"] {
    background: #fff;
    border: 1px solid var(--mu-primary);
    color: var(--mu-primary);
    border-radius: var(--mu-radius-sm);
    font-weight: 600;
    font-size: 12.5px;
    padding: 7px 14px;
    transition: background .15s ease, color .15s ease;
}

[id$="btn_generar_cuotas"]:hover,
[id$="btn_generar_cuotas"]:focus {
    background: #eaf1fe;
    color: var(--mu-primary);
}

/*
 * El tema base (smartadmin-production.min.css) solo define ancho para
 * .smart-form .col-4 .. .col-10 -- .col-12 nunca se definio (100% ancho),
 * asi que sin esta regla una seccion col-12 se encoge al ancho de su
 * contenido en vez de ocupar toda la fila. Se ve en campos simples (el
 * input igual queda razonable por su propio ancho) pero deja MUY angosto
 * cualquier <select> chosen (ver nota de abajo), que es lo que expone el
 * problema. Alcance acotado a .modern-form-card para no tocar el resto
 * del sistema.
 */
.modern-form-card .col-12 {
    width: 100% !important;
    float: none !important;
    clear: both;
}

/*
 * chosen (plugin de los <select> bonitos) fija su propio ancho en px al
 * inicializarse, tomando el ancho que el <select>/su contenedor tenia en
 * ese momento. Eso deja los select angostos aunque su columna sea mas
 * ancha. Se fuerza a llenar la columna completa dentro de la tarjeta
 * Datos del Comprobante.
 */
.modern-venta-responsive-row .chosen-container {
    width: 100% !important;
}

/*
 * La tarjeta "Detalle" (col-8, buscador + tabla de items) se veia muy baja
 * junto a "Datos del Comprobante" (col-4) cuando el pedido todavia no tiene
 * items -- la fila usaba float, asi que cada columna tomaba solo el alto de
 * su propio contenido. Se pasa la fila a flex con stretch para que ambas
 * columnas siempre igualen el alto de la mas alta, sin necesidad de fijar
 * un numero de pixeles a mano (que se rompería si cambia la cantidad de
 * campos del formulario).
 */
.modern-venta-responsive-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

/*
 * ...pero eso vale solo para la primera fila, la de la tabla de items. En la
 * segunda (Cobrar + Totales) no hay nada que estirar: Cobrar tiene cuatro
 * campos contados y, al igualar el alto de Totales, le quedaban 133px en
 * blanco al pie. Ahi cada tarjeta mide lo que mide, alineadas por arriba.
 */
.modern-venta-responsive-row.modern-row-natural {
    align-items: flex-start;
}

.modern-venta-responsive-row > .col-8 {
    display: flex;
    flex-direction: column;
}

.modern-venta-responsive-row > .col-8 > .modern-form-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.modern-venta-responsive-row > .col-8 > .modern-form-card [id$="d_responsive"] {
    flex: 1 1 auto;
    overflow-y: auto;
}

/*
 * Adaptable: por debajo de 991px las columnas Datos del Comprobante/Detalle
 * (y Observaciones/Totales) se apilan a 100% en vez de mantener el 33%/66%
 * fijo, que a ese ancho queda demasiado angosto para los campos/tabla.
 */
@media (max-width: 991px) {
    .modern-venta-responsive-row {
        flex-direction: column;
    }

    .modern-venta-responsive-row > .col-4,
    .modern-venta-responsive-row > .col-8 {
        width: 100% !important;
        float: none !important;
    }
}

/*
 * Tablas de detalle (Venta, Compra, Nota de Credito/Debito, Cotizacion,
 * Nota de Pedido): todas comparten el mismo patron `<div id="d_responsive"
 * style="overflow-x:auto"><table style="table-layout:fixed">`, con columnas
 * en porcentaje ("U. Medida"/"Cantidad" en 6-9%). En pantallas angostas esas
 * columnas se comprimen a unos pocos px y el texto de los <th> se solapa,
 * en vez de activar el scroll horizontal que el contenedor ya soporta. Se le
 * da un min-width a la tabla para forzar que sea el scroll el que se active.
 */
@media (max-width: 768px) {
    [id$="d_responsive"] table {
        min-width: 820px;
    }
}

/*
 * ===================== FOTO DE PRODUCTO (Soft UI) =====================
 * Bloque de subida de foto en Productos > Nuevo/Editar (formNew.js /
 * formEdit.js): miniatura con vista previa + boton "Seleccionar imagen".
 */
.modern-photo-upload {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.modern-photo-preview {
    width: 90px;
    height: 90px;
    border-radius: 14px;
    background: #f1f5f9;
    border: 1px solid var(--mu-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
    color: #b8bcc4;
    font-size: 28px;
}

.modern-photo-actions {
    flex: 1 1 auto;
    padding-top: 2px;
}

.modern-photo-actions .help-block {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--mu-text-muted);
}

.modern-photo-actions .lv-progress {
    margin-top: 10px;
    max-width: 220px;
}

.modern-photo-actions .lv-progress progress {
    width: 100%;
}

/*
 * ===================== BOTONES GLOBALES (.btn) =====================
 * Todos los botones de accion sobre las tablas (Nuevo, Excel, Filtrar,
 * Cancelar, Acciones, etc.) se generan con la misma plantilla en
 * public/js/appButton.js / fullgrid.jquery.js: <button class="btn btn-*">.
 * Esta seccion moderniza esa plantilla en todo el sistema sin tocar
 * ningun id/clase funcional (solo forma/sombra/transicion).
 */
/*
 * FORMA: contorno del color del boton sobre fondo del panel, y al pasar el
 * mouse se invierte (se rellena con ese color y el texto pasa a blanco).
 * Es el mismo criterio del sistema de colegios (INTRANET), unificado aqui
 * para TODOS los botones del ERP.
 *
 * El padding va con !important porque SmartAdmin declara
 * ".smart-form *, .smart-form ::after, .smart-form ::before { padding: 0 }",
 * que por especificidad le gana a ".btn" de Bootstrap: cualquier boton
 * dentro de un formulario quedaba sin aire, con el texto pegado al borde.
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    border-radius: 10px !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn > i {
    font-size: 12px;
}

/*
 * Red de seguridad: app_boton guarda la clase de cada boton, y un registro
 * puede haberse cargado solo como "btn-primary", sin la clase base "btn".
 * Sin esto ese boton se queda con el borde negro por defecto del navegador
 * y las esquinas cuadradas, porque las reglas de color de mas abajo solo
 * definen el color del borde, no su grosor ni el radio.
 */
.btn-primary:not(.btn),
.btn-success:not(.btn),
.btn-danger:not(.btn),
.btn-warning:not(.btn),
.btn-info:not(.btn),
.btn-default:not(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    border-radius: 10px !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary:not(.btn) > i,
.btn-success:not(.btn) > i,
.btn-danger:not(.btn) > i,
.btn-warning:not(.btn) > i,
.btn-info:not(.btn) > i,
.btn-default:not(.btn) > i {
    font-size: 12px;
}

/*
 * Compactos: siguen siendo mas chicos que el resto, pero con aire
 * suficiente para que el texto no toque el borde.
 */
.btn.btn-xs {
    padding: 5px 11px !important;
    font-size: 12px;
    border-radius: 8px !important;
}

.btn.btn-sm {
    padding: 6px 13px !important;
    font-size: 12.5px;
    border-radius: 8px !important;
}

/*
 * SmartAdmin le clava a todo boton del pie de un .smart-form un alto fijo:
 * ".smart-form footer .btn { height: 31px; padding: 0 22px; line-height: 29px }".
 * Con box-sizing: border-box ese alto se come el relleno, asi que los botones
 * del pie quedaban 3px mas bajos que los del resto del sistema y .btn-lg no
 * se veia grande en absoluto. Se les devuelve el alto automatico.
 */
.smart-form footer .btn {
    height: auto;
    line-height: 1.25;
    font-size: 13px;
}

.smart-form footer .btn.btn-lg {
    font-size: 14px;
}

/* Grande: lo usa la accion principal de una pantalla (Generar Comprobante).
   Bootstrap solo le subia la letra a 18px; el relleno y el radio se los fija
   .btn de arriba con !important, asi que quedaba una letra enorme en un boton
   normal. */
.btn.btn-lg {
    padding: 11px 22px !important;
    font-size: 14px;
    border-radius: 12px !important;
}

/*
 * Accion principal de la pantalla: el unico boton RELLENO del sistema.
 *
 * Todos los demas son de contorno -- color en el borde y en el texto, relleno
 * al pasar el mouse -- y eso esta bien para una barra de acciones, pero deja
 * sin jerarquia a la accion que cierra el trabajo. Este se queda en el estado
 * relleno de forma permanente: no es un verde nuevo, es exactamente el mismo
 * #047857 con el que .btn-success se rellena al pasar el mouse.
 *
 * Antes venia con .bg-color-green de SmartAdmin (#356E35), un verde oliva que
 * no sale de la paleta ni aparece en ningun otro sitio del sistema.
 */
.btn.modern-btn-emitir,
.modern-btn-emitir {
    background-color: #047857 !important;
    background-image: none !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}

.btn.modern-btn-emitir:hover,
.btn.modern-btn-emitir:focus,
.btn.modern-btn-emitir:active,
.modern-btn-emitir:hover,
.modern-btn-emitir:focus {
    background-color: #035f45 !important;
    border-color: #035f45 !important;
    color: #ffffff !important;
}

.btn:active {
    transform: translateY(1px);
}

/*
 * COLOR: cada variante se dibuja con su color como borde y texto sobre el
 * fondo del panel; al pasar el mouse se rellena con ese mismo color. Los
 * !important son para ganarle a smartadmin-skins.min.css, que declara los
 * fondos solidos de Bootstrap con !important propio.
 */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-default {
    background-color: var(--t-card, #ffffff) !important;
    background-image: none !important;
}

.btn-primary {
    border-color: #214f75 !important;
    color: #214f75 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary.active,
.btn-primary:not([disabled]):not(.disabled):active,
.open > .btn-primary.dropdown-toggle {
    background-color: #214f75 !important;
    border-color: #214f75 !important;
    color: #ffffff !important;
}

.btn-success {
    border-color: #047857 !important;
    color: #047857 !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success.active,
.btn-success:not([disabled]):not(.disabled):active,
.open > .btn-success.dropdown-toggle {
    background-color: #047857 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}

.btn-danger {
    border-color: #C81E1E !important;
    color: #C81E1E !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger.active,
.btn-danger:not([disabled]):not(.disabled):active,
.open > .btn-danger.dropdown-toggle {
    background-color: #C81E1E !important;
    border-color: #C81E1E !important;
    color: #ffffff !important;
}

/*
 * Verde, rojo y ambar de la paleta (#10B981, #EF4444, #F59E0B) estan
 * pensados como FONDO con texto blanco. Aqui pasan a ser el color del
 * TEXTO sobre blanco, donde quedan por debajo del minimo legible, asi
 * que cada uno usa un tono mas oscuro de su misma familia -- y el
 * relleno del hover usa ese mismo tono, para que la inversion sea
 * exacta.
 */
.btn-warning {
    border-color: #B45309 !important;
    color: #B45309 !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning.active,
.btn-warning:not([disabled]):not(.disabled):active,
.open > .btn-warning.dropdown-toggle {
    background-color: #B45309 !important;
    border-color: #B45309 !important;
    color: #ffffff !important;
}

.btn-info {
    border-color: #0E7490 !important;
    color: #0E7490 !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info.active,
.btn-info:not([disabled]):not(.disabled):active,
.open > .btn-info.dropdown-toggle {
    background-color: #0E7490 !important;
    border-color: #0E7490 !important;
    color: #ffffff !important;
}

/*
 * El neutro no tiene color propio que invertir: mantiene el texto del tema
 * y al pasar el mouse se rellena con un gris suave, como en INTRANET.
 */
.btn-default {
    border-color: #cbd5e1 !important;
    color: var(--t-text, #1F2937) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default.active,
.btn-default:not([disabled]):not(.disabled):active,
.open > .btn-default.dropdown-toggle {
    background-color: #eef2f5 !important;
    border-color: #cbd5e1 !important;
    color: var(--t-text, #1F2937) !important;
}

.btn.disabled,
.btn:disabled {
    opacity: 0.55;
}

/*
 * Excepciones: elementos que llevan la clase .btn pero no son "botones de
 * accion" y no deben convertirse en una caja con contorno.
 */
.btn-link,
button.close {
    display: inline-block;
    padding: initial !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/*
 * La rueda de acciones de cada fila de la grilla es un boton de icono, no
 * uno de texto: conserva el tamaño compacto de siempre. Sin esto, el
 * relleno general (pensado para botones con texto) la ensancha y la
 * deforma.
 */
table.fullgrid .btn-group > .dropdown-toggle,
table.fullgrid .btn-group > .btn.btn-xs {
    display: inline-block !important;
    padding: 1px 5px !important;
    font-size: 12px;
    line-height: 1.5;
}

/*
 * La "x" que cierra una pestaña (vendor/core/Tools.js la arma como
 * <button class="btn btn-xs font-xs btn-default hover-transparent">) es un
 * icono suelto sobre la pestaña, no un boton de accion: se queda del
 * tamaño de siempre, sin recuadro ni relleno.
 */
.delete-tab .btn {
    padding: 1px 4px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 11px;
    line-height: 1;
    color: var(--t-text-muted, #64748B) !important;
}

.delete-tab .btn > i {
    font-size: 11px;
}

.delete-tab .btn:hover,
.delete-tab .btn:focus {
    background: transparent !important;
    color: var(--t-danger, #EF4444) !important;
}

/* Botones tipo pildora (acciones compactas, ej. el toggle de rango del Dashboard) */
.btn.btn-pill {
    border-radius: 999px !important;
}

/*
 * El color y el relleno de cada variante estan definidos mas arriba, en
 * "BOTONES GLOBALES (.btn)". Aqui solo queda lo que resuelve un conflicto
 * con un plugin:
 *
 * clockpicker.css (vendorizado, cargado ANTES de este archivo) define
 * ".btn:hover,.btn:focus{color:#333}" sin scopear al propio clockpicker.
 * Tiene la misma especificidad que las reglas de Bootstrap, asi que por
 * orden de carga le ganaba a todos los botones del sistema al pasar el
 * mouse. Las reglas de hover de arriba llevan !important justamente para
 * eso; esta linea deja constancia de por que.
 */

/*
 * Boton icono redondo compacto (ej. "+Agregar Vehiculo/Conductor" al
 * costado de un <select>, GuiaRemision::formNewGuiaRemision.js) - version
 * mas prolija que el boton con texto completo "Agregar Categoria", que no
 * entraba bien en columnas angostas junto al select.
 */
.btn-circle-icon {
    width: 30px;
    height: 30px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ===================== SUCURSALES: cajas y sus series =====================
   En el modal de cajas asignadas, cada caja lleva a la derecha cuantas series
   tiene y el boton para gestionarlas. La serie cuelga de la caja, asi que es
   aqui donde se ve si una caja todavia no puede facturar. */
.modern-caja-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.modern-caja-fila > label.checkbox {
    flex: 1 1 auto;
    margin: 0 !important;
    /* el nombre de la caja en una linea: con la chapita y la ruedita al lado,
       el hueco que queda es justo y "CAJA 01" se partia en dos */
    white-space: nowrap;
}

/* la ruedita de acciones, al final de la fila. Las medidas son las mismas
   que usa la ruedita de las grillas (40x22): el modal esta dentro de un
   .smart-form, donde ".smart-form *" pone "padding: 0" y el boton quedaba
   aplastado a 16px de alto. */
.modern-caja-fila > .btn-group {
    flex: 0 0 auto;
}

.modern-caja-fila > .btn-group > .dropdown-toggle {
    padding: 1px 5px !important;
    line-height: 18px;
    height: 22px;
}

/* el numero de series asignadas, como una chapita discreta */
.modern-caja-nserie {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #eef1f6;
    color: var(--mu-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

/* sin series esa caja no emite nada: se avisa aqui y no en el momento de
   facturar, que es cuando ya es tarde */
.modern-caja-sinserie {
    flex: 0 0 auto;
    color: #C81E1E;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* una serie es de una sola caja: las que ya tienen duenio se ven, pero
   apagadas y diciendo de quien son */
.modern-serie-ocupada {
    opacity: .55;
}

.modern-serie-duenio {
    font-size: 11px;
    color: var(--mu-text-muted);
    font-style: italic;
}

html.dark-mode .modern-caja-nserie {
    background: rgba(148, 163, 184, 0.18);
}

html.dark-mode .modern-caja-sinserie {
    color: #F87171;
}