/*
    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: 18px 20px;
    margin-bottom: 18px;
}

/* Campos mas compactos: menos aire entre filas y menos alto por campo */
.modern-form-card .row.padding-10 {
    padding: 6px 10px !important;
}

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

.modern-form-card label.label,
.modern-form-card label.control-label {
    margin-bottom: 3px !important;
}

.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: -18px -20px 16px;
    padding: 12px 14px;
    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;
}

/*
 * "CAJA PRUEBA" + botones "Ver Detalle"/"Cerrar Caja" (inyectados via
 * appButton.js dentro de #sp_caja): se compactan para que quepan junto
 * al titulo en una sola fila en vez de forzar el titulo a partirse en 2
 * lineas.
 */
.modern-form-card-header [id$="sp_caja"] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    float: none !important;
    margin-left: auto;
    white-space: nowrap;
    font-size: 11px;
}

/*
 * Botones "Ver Detalle"/"Cerrar Caja": solo icono (con tooltip via title,
 * agregado en Facturacion.VentaRsc.js). El texto no viene envuelto en su
 * propio <span>, asi que se usa el truco de font-size:0 en el boton +
 * font-size explicito en el <i> para ocultar el texto sin ocultar el icono.
 * Es lo unico que garantiza que quepan junto al titulo en una sola fila,
 * sin depender del ancho disponible de la tarjeta.
 */
.modern-form-card-header [id$="sp_caja"] .btn {
    font-size: 0 !important;
    width: 26px;
    height: 26px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}

.modern-form-card-header [id$="sp_caja"] .btn i {
    font-size: 12px !important;
    margin-right: 0 !important;
}

.modern-totals-card {
    background: #f7f9fc;
    border: 1px solid var(--mu-border);
    border-radius: var(--mu-radius);
    padding: 18px 20px;
}

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

.modern-total-highlight {
    background: var(--mu-primary);
    border-radius: var(--mu-radius-sm);
    padding: 14px 16px;
    margin-top: 6px;
}

.modern-total-highlight .control-label {
    color: rgba(255,255,255,0.85) !important;
}

.modern-total-highlight input {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 20px !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: 13px;
    padding: 8px 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;
    margin: -18px -20px 16px;
    padding: 14px 20px;
    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);
}

.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;
}

.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;
}

.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;
}