/*
 * =========================================================================================================
 * main-mcbs-clasico.css — reglas VISUALES exclusivas del tema CLÁSICO (Fase 3.0, aislamiento por tema)
 * ---------------------------------------------------------------------------------------------------------
 * Se carga SOLO en Clásico, inmediatamente después de main-mcbs.css (layout-clasico.html, head-base, th:unless
 * PROFESIONAL): el tema Profesional ni siquiera las recibe, así que ya no necesita !important para neutralizarlas.
 * Cada bloque salió tal cual de main-mcbs.css (mismos selectores, valores, !important y @media, en el mismo orden
 * relativo); en su lugar original queda un comentario indicando que se movió. La posición nueva (al final de
 * main-mcbs.css) se verificó comparando los estilos computados del Clásico antes y después: sin diferencias.
 *
 * Qué va aquí: colores, fondos, bordes y posiciones decorativas pensadas para AdminPress. Qué NO va aquí: geometría
 * funcional, visibilidad por estado, scroll, impresión o foco operativo (eso queda en main-mcbs.css, común).
 * Para agregar reglas nuevas: si solo tienen sentido en Clásico, aquí; si las necesitan ambos temas, main-mcbs.css.
 * =========================================================================================================
 */

/* ---------- Lote 1 · Inventario y mantenimiento de productos ---------- */

/* Aviso del pedido elegido en Inventario (catalogos/productos/index.html). */
div#pedidoSeleccionado {
    padding: 0 !important;
   /* margin: 0 !important;
    */
    background-color: yellow !important;
    color: black !important;
    padding: 0 6px !important;
    margin-bottom: 2px;
    margin-top: 2px;
    text-transform: uppercase;
}

/* Líneas del producto en pedidos (scriptProductos.html): colores. La geometría sigue en main-mcbs.css. */
.cargar-informacion-pedido-producto {
    color: black;
    background-color: yellow;
    font-weight: bold;
}

/* Última compra / venta (informacion-producto*.html, rotacion-productos.html): colores. */
.datos-ultima-compra {
    background-color: #cce5ff !important;
    font-weight: bold !important;
    color: #0c5460;
}

/* Línea de auditoría (creado / modificado) del modal de productos. */
p.alert.alert-info.info-productos {
    margin: 0;
    padding: 0.1em 0.5em;
    text-align: center;
}

/* Panel «Parámetros para la web» (form.html y parametros-web.html). */
.row.bg-web {
   background-color: #d1ecf1;
   border-radius: 4px;
   padding: 10px;
   margin-bottom: 5px;
}

/* Modal de productos en escritorio: auditoría fija arriba a la derecha y columna izquierda celeste. */
@media (min-width :881px) {
   .info-productos {
       position: fixed;
       right: 9px;
       top: 45px;
   }
   /* 18/10/2026: el panel ya no es col-md-5 sino col-12 col-xl-5 (se apila por debajo de 1200px). */
   .column-left {
       background-color: #d1ecf1;
       padding: 0 10px 10px 10px !important;
   }
}
@media (min-width: 1200px) {
   .column-left {
       border-right: 10px solid #FFF; /* separación con el panel derecho cuando van lado a lado */
   }
}

/* ---------- Lote 3 · Modales (geometría y apariencia del Clásico) ----------
 * Verificado antes de mover: ninguna regla POSTERIOR de main-mcbs.css con la misma especificidad y la misma
 * propiedad alcanza a estos elementos (análisis por especificidad + combinaciones reales de clases en vistas/JS),
 * así que cargarlas después no cambia el Clásico. En Profesional, Bootstrap y profesional-componentes.css (§6)
 * definen posición, alto, scroll y espaciado sin pelear con !important.
 */

/* Modales grandes: alto fijo con scroll dentro del cuadro (ancho 100% sigue común en main-mcbs.css). */
@media ( min-width : 992px) {
   .modal-lg {
       max-height: 100% !important;
       height: 94vh;
       overflow-y: scroll;
   }
}

/* Botón cerrar: cuadro rojo con × blanca. */
.modal-header > button.close {
   background-color: red;
   width: 30px;
   color: #FFF;
   border-radius: 4px;
}

/* Todos los modales 30px más arriba en escritorio. */
@media (min-width: 992px){
    .modal {
        top: -30px !important;
   }
}

/* Espaciado compacto de encabezado, pie y cuerpo. */
.modal-header {
    padding: 4px 15px !important;
}
.modal-footer {
    padding: 5px 15px !important;
}
.modal-body {
    padding: 5px !important;
}

/* Sombra negra de los modales medianos centrados. */
.modal-dialog.modal-dialog-centered.modal-medium {
   box-shadow:  0px 0px 100px 0px black;
}

/* ---------- Lote 4 · Facturación y cobro (apariencia del Clásico) ----------
 * Mismo análisis que el lote 3: sin reglas posteriores de igual especificidad y misma propiedad sobre los mismos
 * elementos. En Profesional los reemplazan profesional-modulos.css §1 (modal de cobro) y profesional-componentes.css
 * §9 (barra de totales).
 */

/* Pie del modal de cobro: padding mínimo (el display:block es común y sigue en main-mcbs.css). */
#modalPagar .modal-footer {
    padding: 4px !important;
}

/* Barra de totales: banda #2d2d2d con campos, etiquetas y símbolos blancos. */
.cajaTablaTotal {
    background-color: #2d2d2d;
}
.cajaTablaTotal input {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
.cajaTablaTotal .input-group-addon {
    border-color: #ffffff !important;
}
.cajaTablaTotal label {
    color: #ffffff !important;
}
.cajaTablaTotal span {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

/* Título del modal de cobro: grande, con línea naranja. */
.documentoAGenerar, .documentoARegistrar {
    border-bottom: 1px solid orange;
    font-size: 2em !important;
}
.documentoAGenerar span {
    font-weight: bold;
}
h2.documentoARegistrar {
    font-size: 2em;
    font-weight: bold;
}
@media (max-width :800px) {
   h2.documentoARegistrar {
       font-size: 1.3em;
       font-weight: bold;
       padding: 0em;
       color: red;
       line-height: 1.3em;
   }
}

/* ==========================================================================
 * Campos obligatorios en Clásico (todos los formularios; piloto aprobado en Clientes)
 * La marca sale SOLO del atributo [required]: en cada .form-group con un control [required]
 * (incluye los que el JS activa/desactiva, p. ej. CABYS o campos FEC) la primera etiqueta
 * hija recibe el mismo asterisco de siempre (Font Awesome 5, rojo, .8em, antes del texto)
 * dibujado con ::before, y el <i class="fas fa-asterisk color-rojo"> manual de esa etiqueta
 * se oculta. Medido en Clientes: misma posición y tamaño que el ícono original.
 *  - Íconos fuera de esa regla (campos que solo valida JS, leyendas "* Campos requeridos",
 *    etiquetas fuera de .form-group) quedan como siempre.
 *  - Sin soporte de :has() el navegador ignora estas reglas y se ve el ícono original.
 * ========================================================================== */
@media screen {
    .form-group:has(:is(input, select, textarea)[required]:not([type="hidden"])) > label:first-of-type:not(.custom-control-label):not(.btn):not([class*="label-status"]) i.fas.fa-asterisk.color-rojo {
        display: none !important; /* jQuery .show()/.hide() del ícono (CABYS, FEC) escribe display en línea */
    }

    .form-group:has(:is(input, select, textarea)[required]:not([type="hidden"])) > label:first-of-type:not(.custom-control-label):not(.btn):not([class*="label-status"])::before {
        content: "\f069"; /* fa-asterisk */
        display: inline-block;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-style: normal;
        font-size: .8em;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        margin-right: .27em; /* equivale al espacio que el HTML pone tras el ícono */
        color: red;
    }

    /* Si la etiqueta ya traía el ícono, el texto conserva su espacio inicial: sin margen extra. */
    .form-group:has(:is(input, select, textarea)[required]:not([type="hidden"])) > label:first-of-type:not(.custom-control-label):not(.btn):not([class*="label-status"]):has(> i.fa-asterisk)::before {
        margin-right: 0;
    }
}