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

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

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