/*
 * ESTILO NUEVO (tipo programa de Windows: azul, cuadros con titulo, todo ordenado y compacto).
 *
 * Se activa cuando <html> tiene la clase "upos-esc" (en computadora y en celular). Se apaga con la opcion "Estilo clasico" del menu
 * de la izquierda (en el celular, en "Mas"); queda guardado en ese navegador.
 * Solo cambia colores, bordes y tamanos: no cambia el funcionamiento de ninguna pantalla.
 */
@media all {
    html.upos-esc {
        --ue-azul: #2a62a8;
        --ue-azul-osc: #14457f;
        --ue-azul-claro: #dbe8f7;
        --ue-fondo: #e6eff9;
        --ue-cuadro: #f4f8fd;
        --ue-borde: #8eaacd;
        --ue-texto: #1b2f4f;
        --ue-naranja: #f0a830;
    }

    /* ---------- Fondo general ---------- */
    html.upos-esc body,
    html.upos-esc main,
    html.upos-esc .content-wrapper {
        background: linear-gradient(180deg, #e9f1fb 0%, #d6e4f5 100%) fixed !important;
    }
    html.upos-esc main.tw-bg-gray-100 { background: linear-gradient(180deg, #e9f1fb 0%, #d6e4f5 100%) !important; }
    html.upos-esc .content-header h1,
    html.upos-esc main h1 { color: var(--ue-texto); font-weight: 700; }

    /* ---------- Menu de la izquierda ---------- */
    html.upos-esc aside.side-bar { background: #e1ebf8 !important; border-right: 1px solid var(--ue-borde); }
    html.upos-esc aside.side-bar a { color: var(--ue-texto); }

    /* ---------- Cuadros (los grupos con titulo) ---------- */
    html.upos-esc .box,
    html.upos-esc .box-primary,
    html.upos-esc .box-solid {
        background: var(--ue-cuadro) !important;
        border: 1px solid var(--ue-borde) !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        --tw-ring-shadow: 0 0 #0000 !important;
        --tw-shadow: 0 0 #0000 !important;
        margin-bottom: 10px !important;
    }
    html.upos-esc .box:hover { box-shadow: none !important; }
    html.upos-esc .box > div[class*="tw-p-"] { padding: 8px 10px !important; }
    html.upos-esc .box .box-header { padding: 0 0 6px !important; border: 0 !important; }
    html.upos-esc .box .box-title { color: var(--ue-azul-osc) !important; font-weight: 700; font-size: 15px; }
    html.upos-esc .box .tw-py-2.tw-align-middle { padding-top: 0 !important; padding-bottom: 0 !important; }
    html.upos-esc .box .sm\:tw-px-5 { padding-left: 4px !important; padding-right: 4px !important; }

    /* ---------- Letras y campos ---------- */
    html.upos-esc label { color: var(--ue-texto); font-weight: 600; font-size: 12.5px; margin-bottom: 2px; }
    html.upos-esc .form-group { margin-bottom: 8px; }
    /* Colores y bordes (en todos los anchos). Las ALTURAS de los campos solo se cambian en computadora: en el celular cada pantalla
       (POS, ventas...) tiene las suyas, y campos y botones vecinos tienen que seguir midiendo lo mismo. */
    html.upos-esc .form-control,
    html.upos-esc input[type="text"].form-control,
    html.upos-esc select.form-control,
    html.upos-esc .select2-container--default .select2-selection--single,
    html.upos-esc .select2-container--default .select2-selection--multiple,
    html.upos-esc .input-group-addon {
        border: 1px solid #8ea7c7 !important;
        border-radius: 2px !important;
        background-color: #fff !important;
        box-shadow: none !important;
        color: #10243f;
    }
    html.upos-esc textarea.form-control { height: auto !important; }
    html.upos-esc .select2-container--default .select2-selection--multiple { height: auto !important; }
    @media (min-width: 992px) {
        html.upos-esc .form-control,
        html.upos-esc input[type="text"].form-control,
        html.upos-esc select.form-control,
        html.upos-esc .select2-container--default .select2-selection--single,
        html.upos-esc .select2-container--default .select2-selection--multiple,
        html.upos-esc .input-group-addon {
            height: 30px !important;
            min-height: 30px;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
            font-size: 13px !important;
        }
        html.upos-esc textarea.form-control { height: auto !important; }
        html.upos-esc .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 22px !important; }
        html.upos-esc .select2-container--default .select2-selection--single .select2-selection__arrow { height: 28px !important; }
        html.upos-esc .select2-container--default .select2-selection--multiple { height: auto !important; min-height: 30px; }
        html.upos-esc .input-group .btn,
        html.upos-esc .input-group-btn > .btn,
        html.upos-esc .input-group > .btn { height: 30px !important; min-height: 30px !important; padding-top: 3px !important; padding-bottom: 3px !important; }
    }
    html.upos-esc .form-control:focus,
    html.upos-esc .select2-container--default.select2-container--focus .select2-selection--single,
    html.upos-esc .select2-container--default.select2-container--open .select2-selection--single {
        border-color: var(--ue-naranja) !important;
        box-shadow: 0 0 0 2px rgba(240, 168, 48, .25) !important;
    }
    html.upos-esc .input-group-addon { background: #e3ecf8 !important; color: var(--ue-azul-osc); }

    /* ---------- Botones ---------- */
    html.upos-esc .content .btn-default,
    html.upos-esc .modal .btn-default,
    html.upos-esc .content .tw-dw-btn-outline,
    html.upos-esc .modal .tw-dw-btn-outline,
    html.upos-esc .content .btn-info,
    html.upos-esc .modal .btn-info,
    html.upos-esc .content .btn-warning,
    html.upos-esc .modal .btn-warning {
        background: linear-gradient(#fafcff, #d9e5f4) !important;
        border: 1px solid #98b0cf !important;
        color: var(--ue-texto) !important;
        border-radius: 4px !important;
        box-shadow: none !important;
    }
    html.upos-esc .content .btn-primary,
    html.upos-esc .modal .btn-primary,
    html.upos-esc .content .btn-success,
    html.upos-esc .modal .btn-success,
    html.upos-esc .content .tw-dw-btn-primary:not(.tw-dw-btn-outline),
    html.upos-esc .modal .tw-dw-btn-primary:not(.tw-dw-btn-outline) {
        background: linear-gradient(#5b98dc, #2a62a8) !important;
        border: 1px solid #1d4f8f !important;
        color: #fff !important;
        border-radius: 4px !important;
        box-shadow: none !important;
    }
    html.upos-esc .content .btn-default:hover,
    html.upos-esc .modal .btn-default:hover,
    html.upos-esc .content .tw-dw-btn-outline:hover,
    html.upos-esc .modal .tw-dw-btn-outline:hover,
    html.upos-esc .content .btn-info:hover,
    html.upos-esc .modal .btn-info:hover,
    html.upos-esc .content .btn-warning:hover,
    html.upos-esc .modal .btn-warning:hover {
        background: linear-gradient(#fff6d9, #ffd98a) !important;
        border-color: #e0a63a !important;
        color: #3a2a00 !important;
    }
    html.upos-esc .content .btn-primary:hover,
    html.upos-esc .modal .btn-primary:hover,
    html.upos-esc .content .btn-success:hover,
    html.upos-esc .modal .btn-success:hover { background: linear-gradient(#6aa6ea, #1f5499) !important; }

    /* ---------- Tablas ---------- */
    html.upos-esc table.dataTable thead th,
    html.upos-esc .table > thead > tr > th {
        background: linear-gradient(#e8f1fb, #c4d8ef) !important;
        color: var(--ue-azul-osc) !important;
        border-bottom: 1px solid #8eaacd !important;
        font-size: 12.5px;
    }
    html.upos-esc .bg-green,
    html.upos-esc th.bg-green,
    html.upos-esc .table > thead > tr > th.bg-green {
        background: linear-gradient(#5b98dc, #2a62a8) !important;
        color: #fff !important;
    }
    html.upos-esc table.dataTable tbody tr:nth-child(even) { background-color: #f1f6fc; }
    html.upos-esc table.dataTable tbody tr:hover { background-color: #fff1c9 !important; }
    html.upos-esc .table-bordered > thead > tr > th,
    html.upos-esc .table-bordered > tbody > tr > td { border-color: #b7c9e0 !important; }

    /* ---------- Fichas / pestanas ---------- */
    html.upos-esc .nav-tabs > li.active > a,
    html.upos-esc .nav-tabs > li.active > a:hover {
        background: var(--ue-cuadro) !important;
        border: 1px solid var(--ue-borde) !important;
        border-bottom-color: var(--ue-cuadro) !important;
        color: var(--ue-azul-osc) !important;
        font-weight: 700;
    }
}

/* Opcion "Estilo clasico": en el menu de la izquierda (computadora) y en "Mas" (celular) */
html.upos-esc a.ue-opcion-estilo i, a.ue-opcion-estilo i { width: 18px; text-align: center; }
a.ue-opcion-estilo { cursor: pointer; }
.appmovil-ficha.ue-ficha-estilo .appmovil-ficha-icono { background: #e1ebf8; color: #14457f; }

/* En el celular y en pantallas medianas: no se tocan las alturas (cada pantalla trae las suyas, pensadas para el dedo) */
@media (max-width: 991px) {
    html.upos-esc label { font-size: 13px; }
}

/* ==========================================================================
   AGREGAR PRODUCTO en cuadros (con el estilo nuevo; en computadora, tablet y celular)
   Los cuadros los arma estilo-escritorio.js (mueve los campos, sin quitar ninguno).
   Pantalla ancha (1280 o mas): Datos y Organizacion lado a lado. Mas angosta (zoom, tablet, celular): uno debajo del otro.
   ========================================================================== */
@media all {
    html.upos-esc form#product_add_form.ue-listo > .ue-oculto { display: none !important; }

    /* titulo de cada cuadro: DENTRO del cuadro, arriba, con una linea fina debajo (no se encima con el borde) */
    html.upos-esc form#product_add_form.ue-listo .ue-grupo { position: relative; margin-top: 0 !important; padding-top: 0; }
    html.upos-esc form#product_add_form.ue-listo .ue-grupo::before {
        content: attr(data-ue-titulo);
        display: block;
        position: static;
        margin: 0 10px;
        padding: 7px 4px 5px;
        border-bottom: 1px solid #cddcf0;
        background: none;
        color: var(--ue-azul-osc);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
    }
    html.upos-esc form#product_add_form.ue-listo .ue-grupo > .ue-cuerpo { padding: 10px 12px 4px; }

    /* Organizacion: campos de tres en tres si hay lugar, de dos en dos, y de uno en uno en el celular */
    html.upos-esc form#product_add_form.ue-listo .ue-organizacion .ue-cuerpo { display: flex; flex-wrap: wrap; margin: 0 -6px; }
    html.upos-esc form#product_add_form.ue-listo .ue-organizacion .ue-cuerpo > [class*="col-"] {
        float: none; width: 50%; padding: 0 6px; min-height: 0;
    }
    html.upos-esc form#product_add_form.ue-listo .ue-organizacion .ue-cuerpo > .ue-ancho { width: 50%; }
    html.upos-esc form#product_add_form.ue-listo .ue-organizacion .ue-ancho .form-group { margin-bottom: 4px; }
    html.upos-esc form#product_add_form.ue-listo .ue-organizacion .help-block,
    html.upos-esc form#product_add_form.ue-listo .ue-organizacion p.help-block { display: none; }
    @media (min-width: 700px) and (max-width: 1279px) {
        html.upos-esc form#product_add_form.ue-listo .ue-organizacion .ue-cuerpo > [class*="col-"],
        html.upos-esc form#product_add_form.ue-listo .ue-organizacion .ue-cuerpo > .ue-ancho { width: 33.333%; }
    }
    @media (max-width: 560px) {
        html.upos-esc form#product_add_form.ue-listo .ue-organizacion .ue-cuerpo > [class*="col-"],
        html.upos-esc form#product_add_form.ue-listo .ue-organizacion .ue-cuerpo > .ue-ancho { width: 100%; }
    }

    /* Datos: nombre y SKU de dos en dos (en el celular, uno debajo del otro) */
    html.upos-esc form#product_add_form.ue-listo .ue-datos .row > .col-sm-4 { width: 50%; }
    html.upos-esc form#product_add_form.ue-listo .ue-datos .col-sm-8.mb-5 { width: 100%; }
    @media (max-width: 560px) {
        html.upos-esc form#product_add_form.ue-listo .ue-datos .row > .col-sm-4 { width: 100%; }
    }

    /* descripcion: sin la barra de menus (Archivo, Editar...), solo los botones de formato */
    html.upos-esc form#product_add_form.ue-listo .tox-tinymce { height: 160px !important; min-height: 160px; border-color: #8ea7c7 !important; }
    html.upos-esc form#product_add_form.ue-listo .tox-menubar { display: none !important; }

    /* "Guardar" a la vista, abajo */
    html.upos-esc form#product_add_form.ue-listo .ue-acciones { margin-top: 4px; }
    html.upos-esc form#product_add_form.ue-listo .ue-acciones .vd-acciones { margin: 6px auto !important; }
    html.upos-esc form#product_add_form.ue-listo .ue-acciones .vd-acciones .btn-group > button { height: 42px !important; min-height: 42px !important; border-radius: 4px !important; }

    /* precios: los tres datos de impuesto en una fila (en el celular, uno debajo del otro) y la tabla de precios compacta */
    html.upos-esc form#product_add_form.ue-listo .ue-precios .ue-cuerpo .row,
    html.upos-esc form#product_add_form.ue-listo .ue-precios > div > .tw-flow-root .row:first-child { display: flex; flex-wrap: wrap; }
    html.upos-esc form#product_add_form.ue-listo .ue-precios .row > .col-sm-4 { flex: 0 0 33.333%; width: 33.333%; }
    html.upos-esc form#product_add_form.ue-listo .ue-precios .row > .col-sm-12,
    html.upos-esc form#product_add_form.ue-listo .ue-precios .row > .form-group.col-sm-12 { flex: 0 0 100%; width: 100%; }
    @media (max-width: 700px) {
        html.upos-esc form#product_add_form.ue-listo .ue-precios .row > .col-sm-4 { flex: 0 0 100%; width: 100%; }
    }
    html.upos-esc form#product_add_form.ue-listo .ue-precios table.add-product-price-table > tbody > tr > th,
    html.upos-esc form#product_add_form.ue-listo .ue-precios table.add-product-price-table > tr > th {
        background: linear-gradient(#5b98dc, #2a62a8) !important;
        color: #fff !important;
        font-size: 12.5px;
        padding: 5px 8px;
        border-color: #1d4f8f !important;
    }
    html.upos-esc form#product_add_form.ue-listo .ue-precios table.add-product-price-table td { padding: 6px 8px; }
    html.upos-esc form#product_add_form.ue-listo .ue-precios table.add-product-price-table .col-sm-6 { padding-left: 4px; padding-right: 4px; }
    html.upos-esc form#product_add_form.ue-listo .ue-precios .table-responsive { margin-bottom: 4px; border: 0; }
}

@media (min-width: 1280px) {
    html.upos-esc form#product_add_form.ue-listo {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        grid-template-areas:
            "datos organizacion"
            "precios precios"
            "acciones acciones";
        gap: 0 12px;
        align-items: start;
    }
    html.upos-esc form#product_add_form.ue-listo > .ue-datos { grid-area: datos; }
    html.upos-esc form#product_add_form.ue-listo > .ue-organizacion { grid-area: organizacion; }
    html.upos-esc form#product_add_form.ue-listo > .ue-precios { grid-area: precios; }
    html.upos-esc form#product_add_form.ue-listo > .ue-acciones { grid-area: acciones; }
}

/* En la parte de arriba de cada pagina, un poco menos de aire */
@media (min-width: 992px) {
    html.upos-esc .content-header { padding-top: 6px !important; padding-bottom: 0 !important; }
    html.upos-esc .content-header h1 { margin: 0 0 4px !important; font-size: 22px !important; }
    html.upos-esc section.content { padding-top: 6px !important; }
}

/* Sin parpadeo: Agregar/Editar venta, Compras y Producto se arman despues de cargar (plegables, filas en una linea, cuadros).
   Mientras tanto el formulario no se muestra, y aparece ya armado. estilo-escritorio.js le pone "ue-armado" cuando termina;
   si algo fallara, a los 3.5 segundos se muestra igual. Aplica con el estilo nuevo y con el clasico. */
form#add_sell_form:not(.ue-armado),
form#edit_sell_form:not(.ue-armado),
form#add_purchase_form:not(.ue-armado),
form#product_add_form:not(.ue-armado) {
    visibility: hidden;
    animation: ue-revelar 0s linear 3.5s forwards;
}
@keyframes ue-revelar { to { visibility: visible; } }
form.ue-armado { visibility: visible; }
html.upos-esc form#product_add_form.ue-listo-no { visibility: visible !important; animation: none; }