/*
    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, ya con forma de pildora via app_boton.css
 * = "btn btn-primary btn-pill"): sin esto queda mas bajo/angosto que la barra
 * de busqueda de al lado (que mide ~36px de alto), por lo que se ve chico y
 * desalineado. Se iguala su alto/padding al de la barra, sin tocar la
 * definicion global del boton (que podria reutilizarse en otro lugar).
 */
.modern-detalle-actions .btn {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 13px !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).
 */
.btn {
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 10px rgba(15, 23, 42, 0.06);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn.btn-xs,
.btn.btn-sm {
    border-radius: 8px !important;
}

.btn:hover,
.btn:focus {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

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

/*
 * Botones "primary" (Nuevo, Agregar Categoria, Grabar, etc. - css="btn
 * btn-primary" en app_boton) usan el azul por defecto de Bootstrap/SmartAdmin
 * (#007bff o #2196F3 segun el skin activo, ambos con !important en
 * smartadmin-skins.min.css). Se reemplaza por un azul mas "profesional"
 * (#214f75, mismo tono ya usado como acento en el resto del sistema) con
 * !important propio para ganarle a esas reglas del skin.
 */
.btn-primary {
    background-color: #214f75 !important;
    border-color: #214f75 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: #1a3f5e !important;
    border-color: #1a3f5e !important;
}

/*
 * clockpicker.css (plugin vendorizado, cargado ANTES de este archivo) define
 * ".btn:hover,.btn:focus{color:#333}" sin scopear al propio clockpicker -
 * misma especificidad que las reglas de Bootstrap ".btn-primary:hover{color:
 * #fff}" (e igual para success/danger/info/warning), asi que por orden de
 * carga esa regla del plugin ganaba en TODOS los botones de color solido del
 * sistema, dejando el texto casi invisible (gris oscuro #333 sobre el fondo
 * de color al pasar el mouse). Se fuerza blanco de nuevo aqui para los 5
 * variantes de color; btn-default no se toca porque su texto oscuro es el
 * comportamiento correcto (fondo claro).
 */
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
.btn-success:hover, .btn-success:focus, .btn-success.focus,
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus,
.btn-info:hover, .btn-info:focus, .btn-info.focus,
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus {
    color: #fff !important;
}

.btn-primary:not([disabled]):not(.disabled):active,
.btn-primary:not([disabled]):not(.disabled).active,
.open > .btn-primary.dropdown-toggle {
    background-color: #15334c !important;
    border-color: #15334c !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: #214f75 !important;
    border-color: #214f75 !important;
    opacity: 0.65;
}

/*
 * 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;
}