/*
 * Tema visual del portal (se carga despues de AdminLTE / Bootstrap 3).
 * Mantiene la paleta de AdminLTE skin-blue; cada empresa puede redefinir
 * las variables --acento* sobre su clase de body (ej. .company-1016).
 */

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('fonts/source-sans-3-latin.woff2') format('woff2');
}

:root {
    --acento: #3c8dbc;          /* azul AdminLTE: marcas, lineas activas, iconos */
    --acento-btn: #2f6f98;      /* mismo azul, tono con contraste suficiente para texto blanco */
    --acento-osc: #235676;
    --acento-suave: #eaf3f9;
    --acento-borde: #d6e6f1;
    --fondo: #ecf0f5;
    --superficie: #ffffff;
    --texto: #1f2d3d;
    --texto-2: #4f5f6f;
    --texto-3: #5b6b7b;
    --borde: #dbe2ea;
    --borde-campo: #c9d6e2;
    --borde-suave: #e1e7ee;
    --peligro: #c23321;
    --exito: #00733e;
    --exito-suave: #e3f5ec;
    --aviso-texto: #7a4b00;
    --aviso-suave: #fff7e6;
    --aviso-borde: #f0d9a8;
    --radio: 12px;
    --radio-sm: 10px;
    --sombra: 0 1px 2px rgba(31, 45, 61, .06);
    --sombra-alta: 0 10px 24px rgba(31, 45, 61, .12);
    --foco: 0 0 0 3px rgba(60, 141, 188, .35);
}

.company-1016 {
    --acento: #073763;
    --acento-btn: #073763;
    --acento-osc: #052a4c;
    --acento-suave: #e8eef5;
    --acento-borde: #ccd9e6;
}

/* ---------- Base ---------- */
body,
.main-header .logo,
.content-header > h1,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
    color: var(--texto);
    background: var(--fondo);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

.wrapper,
.content-wrapper,
.layout-top-nav .content-wrapper {
    background: var(--fondo);
}

a { color: var(--acento-btn); }
a:hover, a:focus { color: var(--acento-osc); }

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--foco);
}

.container { width: auto; max-width: 1280px; }

/* ---------- Cabecera ---------- */
.skin-blue .main-header .navbar,
.company-1016 .main-header .navbar {
    background-color: var(--superficie) !important;
    border-bottom: 1px solid var(--borde);
    min-height: 60px;
}

.main-header {
    box-shadow: var(--sombra);
}

.main-header .navbar .container {
    padding-left: 24px;
    padding-right: 24px;
}

.main-header .navbar-header .marca-logo {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 20px 0 0;
}

.main-header .navbar-header .marca-logo img {
    height: 32px;
    width: auto;
}

.skin-blue .main-header .navbar .nav > li > a {
    color: #3d4b5a;
    font-weight: 600;
    font-size: 15px;
    padding: 20px 12px 17px;
    border-bottom: 3px solid transparent;
}

.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus {
    background: transparent;
    color: var(--acento-btn);
}

.skin-blue .main-header .navbar .nav > li.active > a,
.skin-blue .main-header .navbar .nav > .active > a {
    background: transparent;
    color: var(--acento-btn);
    border-bottom-color: var(--acento);
}

.main-header .navbar .dropdown-menu {
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-alta);
    padding: 6px;
    margin-top: 0;
}

.main-header .navbar .dropdown-menu > li > a {
    color: var(--texto);
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
}

.main-header .navbar .dropdown-menu > li > a:hover {
    background: var(--acento-suave);
    color: var(--acento-osc);
}

.skin-blue .main-header .navbar .navbar-toggle {
    color: var(--texto);
    padding: 14px 12px;
    margin: 6px 0 0 0;
    border-radius: var(--radio-sm);
}

.skin-blue .main-header .navbar .navbar-toggle:hover {
    background: var(--acento-suave);
}

/* Boton del carro (el JS de carro.js reescribe este <li>, por eso se estiliza por id) */
.navbar-custom-menu > .navbar-nav > li#cantProdCarro > a,
.navbar-custom-menu > .navbar-nav > li > a.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 8px 0 0;
    height: 40px;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: var(--radio-sm);
    background: var(--acento-btn) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    width: auto;
}

.navbar-custom-menu > .navbar-nav > li#cantProdCarro > a:hover,
.navbar-custom-menu > .navbar-nav > li > a.btn:hover {
    background: var(--acento-osc) !important;
}

span.red {
    background: var(--peligro);
    color: #fff;
    min-width: 22px;
    width: auto;
    height: 22px;
    line-height: 22px;
    padding: 0 6px;
    margin: 0;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
}

/* Menu de usuario */
.skin-blue .main-header .navbar .user-menu > a.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    margin: 10px 0 0;
    padding: 0 14px !important;
    border: 1px solid var(--borde) !important;
    border-radius: 20px;
    font-size: 14px;
}

.skin-blue .main-header li.user-header,
.company-1016 .main-header li.user-header {
    background-color: var(--acento-btn) !important;
    border-radius: 8px 8px 0 0;
}

.navbar-nav > .user-menu > .dropdown-menu {
    padding: 0;
    overflow: hidden;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background: #f7f9fb;
}

@media (max-width: 767px) {
    .main-header .navbar .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .main-header .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .main-header .navbar-header .navbar-toggle {
        order: 2;
    }
    .skin-blue .main-header .navbar .nav > li > a {
        padding: 12px;
        border-bottom: 0;
        border-left: 3px solid transparent;
    }
    .skin-blue .main-header .navbar .nav > li.active > a {
        border-left-color: var(--acento);
    }
    .skin-blue .main-header .navbar .dropdown-menu li a {
        color: var(--texto);
    }
    .main-header .navbar .navbar-collapse {
        border-top: 1px solid var(--borde);
    }
    .navbar-custom-menu {
        float: none;
        padding-bottom: 10px;
    }
    .navbar-custom-menu > .navbar-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
    }
}

/* ---------- Menu lateral de modulos (body.con-lateral) ---------- */
:root {
    --lateral-ancho: 240px;
    --lateral-plegado: 64px;
}

/* El menu lateral va a la derecha; su boton queda en el extremo derecho de la barra superior */
.con-lateral .main-header .navbar .container {
    max-width: none;
    position: relative;
    padding-right: 72px;
}

.main-header .navbar-header {
    display: flex;
    align-items: center;
    min-height: 60px;
}

.btn-lateral {
    position: absolute;
    top: 8px;
    right: 16px;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 0;
    border-radius: var(--radio-sm);
    background: transparent;
    color: var(--texto);
    font-size: 18px;
}

.btn-lateral:hover { background: var(--acento-suave); color: var(--acento-osc); }

.lateral {
    position: fixed;
    top: 60px;
    bottom: 0;
    right: 0;
    z-index: 1020;
    width: var(--lateral-ancho);
    padding: 12px 10px 24px;
    background: var(--superficie);
    border-left: 1px solid var(--borde);
    overflow-x: hidden;
    overflow-y: auto;
    transition: width .2s ease, transform .2s ease;
}

body.con-lateral .content-wrapper,
body.con-lateral .main-footer {
    margin-right: var(--lateral-ancho);
    transition: margin-right .2s ease;
}

.lateral-seccion {
    padding: 16px 12px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-3);
    white-space: nowrap;
}

.lateral-seccion:first-child { padding-top: 6px; }

.lateral-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
    margin-bottom: 2px;
    border-radius: var(--radio-sm);
    color: var(--texto);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.lateral-item .fa {
    flex: none;
    width: 20px;
    font-size: 16px;
    text-align: center;
    color: var(--texto-3);
}

.lateral-item:hover,
.lateral-item:focus {
    background: var(--acento-suave);
    color: var(--acento-osc);
    text-decoration: none;
}

.lateral-item.activo {
    background: var(--acento-suave);
    color: var(--acento-osc);
    box-shadow: inset -3px 0 0 var(--acento);
}

.lateral-item.activo .fa,
.lateral-item:hover .fa { color: var(--acento-btn); }

.lateral-texto { overflow: hidden; text-overflow: ellipsis; }

.lateral-fondo { display: none; }

/* Plegado (escritorio): solo iconos */
@media (min-width: 992px) {
    body.lateral-plegado .lateral { width: var(--lateral-plegado); }
    body.con-lateral.lateral-plegado .content-wrapper,
    body.con-lateral.lateral-plegado .main-footer { margin-right: var(--lateral-plegado); }
    body.lateral-plegado .lateral-texto { display: none; }
    body.lateral-plegado .lateral-item { justify-content: center; padding: 0; }
    body.lateral-plegado .lateral-seccion {
        height: 1px;
        padding: 0;
        margin: 12px 8px;
        background: var(--borde);
    }
}

/* Celular / tablet: panel deslizable sobre el contenido */
@media (max-width: 991px) {
    .lateral {
        width: 270px;
        transform: translateX(100%);
        box-shadow: none;
    }
    body.lateral-abierto .lateral {
        transform: none;
        box-shadow: var(--sombra-alta);
    }
    body.con-lateral .content-wrapper,
    body.con-lateral .main-footer { margin-right: 0; }
    .con-lateral .main-header .navbar .container { padding-right: 64px; }
    .btn-lateral { right: 12px; }
    body.lateral-abierto .lateral-fondo {
        display: block;
        position: fixed;
        inset: 60px 0 0 0;
        z-index: 1010;
        background: rgba(31, 45, 61, .35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lateral, body.con-lateral .content-wrapper, body.con-lateral .main-footer { transition: none; }
}

/* ---------- Franja de titulo de pagina ---------- */
.banda {
    background: var(--acento-suave);
    border-bottom: 1px solid var(--acento-borde);
    margin-top: 60px;
}

.banda-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.banda-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

.banda-textos {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.banda-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--acento-btn);
}

.banda-titulo {
    margin: 0;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--texto);
}

.banda-sub {
    margin: 0;
    font-size: 16px;
    color: var(--texto-2);
}

.banda-logo {
    background: var(--superficie);
    border-radius: var(--radio);
    padding: 10px 18px;
    box-shadow: var(--sombra);
    display: flex;
    align-items: center;
}

.banda-logo img {
    height: 48px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

.layout-top-nav .content {
    padding: 24px 24px 48px;
}

@media (max-width: 767px) {
    .banda-inner { padding: 20px 16px; }
    .banda-titulo { font-size: 26px; }
    .banda-logo img { height: 36px; }
    .layout-top-nav .content { padding: 16px 16px 40px; }
}

/* ---------- Buscador del catalogo ---------- */
.buscador {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.buscador-campo {
    flex: 1 1 420px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 16px;
    background: var(--superficie);
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio);
}

.buscador-campo:focus-within {
    border-color: var(--acento);
    box-shadow: var(--foco);
}

.buscador-campo .fa {
    color: var(--texto-3);
    font-size: 18px;
}

.buscador-campo input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: var(--texto);
}

.buscador .btn {
    height: 52px;
    padding: 0 28px;
    font-size: 16px;
}

/* Solicitud excepcional y sugerencias en una misma fila, sobre el buscador */
.buscador-opciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.buscador-opcion-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.excepcional {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 0 1 auto;
    max-width: 760px;
    margin: 0;
    padding: 8px 14px;
    background: var(--superficie);
    border: 1px solid var(--aviso-borde);
    border-radius: var(--radio);
    font-weight: 400;
    cursor: pointer;
}

.excepcional input {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    accent-color: var(--acento-btn);
}

.excepcional-titulo {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--texto);
}

.excepcional-texto {
    display: block;
    font-size: 14px;
    color: var(--aviso-texto);
}

/* ---------- Galeria del catalogo ---------- */
#gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin: 0;
}

.producto {
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s ease, transform .18s ease;
}

.producto:hover {
    box-shadow: var(--sombra-alta);
    transform: translateY(-2px);
}

.producto-img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #eef2f6;
}

.producto-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.producto-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
}

.producto-cod {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-3);
}

.producto-nombre {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--texto);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}

.producto-marca {
    font-size: 14px;
    color: var(--texto-3);
}

.producto-btn {
    margin-top: auto;
}

@media (max-width: 480px) {
    #gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .producto-img { padding: 12px; }
    .producto-info { padding: 10px 12px 12px; }
    .producto-nombre { font-size: 15px; }
}

/* ---------- Botones ---------- */
.btn {
    border-radius: var(--radio-sm);
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary,
.btn-info,
.skin-blue .btn-primary {
    background-color: var(--acento-btn) !important;
    border-color: var(--acento-btn) !important;
    color: #fff !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: var(--acento-osc) !important;
    border-color: var(--acento-osc) !important;
}

.btn-contorno {
    background: var(--superficie);
    border: 1.5px solid var(--acento-btn);
    color: var(--acento-btn);
}

.btn-contorno:hover, .btn-contorno:focus {
    background: var(--acento-btn);
    color: #fff;
}

.btn-bloque {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
}

.btn-lg-tema {
    min-height: 48px;
    padding: 0 22px;
    font-size: 17px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-success { background-color: #008d4c; border-color: #008d4c; }
.btn-success:hover, .btn-success:focus { background-color: #00733e; border-color: #00733e; }
.btn-danger { background-color: var(--peligro); border-color: var(--peligro); }

/* ---------- Formularios ---------- */
.form-control {
    height: 44px;
    border-radius: var(--radio-sm) !important;
    border-color: var(--borde-campo);
    font-size: 15px;
    color: var(--texto);
    box-shadow: none;
}

textarea.form-control { height: auto; }

.form-control:focus {
    border-color: var(--acento);
    box-shadow: var(--foco);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 44px;
    border-radius: var(--radio-sm) !important;
    border-color: var(--borde-campo) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

label { font-weight: 600; }

/*
 * Campos sin la clase .form-control (ej. RUT/DV de usuarios, fechas de seguimiento OC,
 * observaciones del visor): mismo aspecto que .form-control, pero sin cambiar su ancho
 * ni su display. :where() deja la especificidad en 0, asi que cualquier clase propia
 * (contador de cantidad, buscador, select2, medidas de tallas) sigue mandando.
 */
:where(.content-wrapper, .modal, .lateral) :where(
    input:not([type]),
    input[type="text"], input[type="textbox"], input[type="number"], input[type="password"],
    input[type="email"], input[type="tel"], input[type="search"], input[type="date"],
    input[type="url"], select, textarea
):where(:not(.form-control):not(.select2-search__field)) {
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio-sm);
    background-color: var(--superficie);
    color: var(--texto);
    font-size: 15px;
    line-height: 1.4;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
    transition: border-color .15s ease, box-shadow .15s ease;
}

:where(.content-wrapper, .modal) :where(textarea) {
    min-height: 72px;
    width: 100%;
    resize: vertical;
}

:where(.content-wrapper, .modal, .lateral) :where(input, select, textarea):focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: var(--foco);
}

:where(.content-wrapper, .modal) :where(input, select, textarea):where([disabled], [readonly]):where(:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"])) {
    background-color: #f4f7fa;
    color: var(--texto-2);
}

/* Casillas, radios y deslizadores con el color del tema */
:where(input[type="checkbox"], input[type="radio"]) {
    width: 18px;
    height: 18px;
    accent-color: var(--acento-btn);
    vertical-align: middle;
    cursor: pointer;
}

:where(input[type="range"]) { accent-color: var(--acento-btn); }

/* Selector de archivos */
:where(.content-wrapper, .modal) :where(input[type="file"]) {
    max-width: 100%;
    font-size: 14px;
    color: var(--texto-2);
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 1.5px solid var(--acento-btn);
    border-radius: var(--radio-sm);
    background: var(--superficie);
    color: var(--acento-btn);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background: var(--acento-btn);
    color: #fff;
}

/* Botones sin clase: aspecto de boton secundario */
:where(.content-wrapper, .modal) :where(button:not([class])) {
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio-sm);
    background: var(--superficie);
    color: var(--texto);
    font-weight: 600;
    cursor: pointer;
}

:where(.content-wrapper, .modal) :where(button:not([class])):hover {
    background: var(--acento-suave);
    border-color: var(--acento);
}

/* Botones por defecto de Bootstrap/AdminLTE */
.btn-default {
    background: var(--superficie);
    border-color: var(--borde-campo);
    color: var(--texto);
}

.btn-default:hover, .btn-default:focus, .btn-default:active {
    background: var(--acento-suave);
    border-color: var(--acento);
    color: var(--acento-osc);
}

.btn-warning { background-color: #f39c12; border-color: #e08e0b; color: #1f2d3d; }
.btn-warning:hover, .btn-warning:focus { background-color: #e08e0b; color: #1f2d3d; }

.input-group-addon {
    border-color: var(--borde-campo);
    background: #f4f7fa;
    color: var(--texto-2);
}

/* Datepicker y select2 desplegados */
.datepicker.dropdown-menu {
    border-radius: var(--radio);
    border-color: var(--borde);
    box-shadow: var(--sombra-alta);
    padding: 8px;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
    background: var(--acento-btn) !important;
    border-color: var(--acento-btn) !important;
    color: #fff;
}

.select2-dropdown {
    border-color: var(--borde-campo) !important;
    border-radius: var(--radio-sm) !important;
    box-shadow: var(--sombra-alta);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--acento-btn) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--acento) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--acento-suave) !important;
    border-color: var(--acento-borde) !important;
    color: var(--acento-osc) !important;
    border-radius: 14px !important;
    padding: 2px 10px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--acento-osc) !important;
}

/* ---------- Cajas (AdminLTE .box) ---------- */
.box {
    border: 1px solid var(--borde-suave);
    border-top: 1px solid var(--borde-suave);
    border-radius: 14px;
    box-shadow: var(--sombra);
    background: var(--superficie);
}

.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger {
    border-top: 1px solid var(--borde-suave);
}

.box-header.with-border {
    border-bottom: 1px solid #eef2f6;
    padding: 16px 20px;
}

.box-header .box-title {
    font-size: 18px;
    font-weight: 700;
}

.box-body { padding: 16px 20px; }

/* ---------- Tablas ---------- */
.table > thead > tr > th {
    background: #f4f7fa;
    color: var(--texto-2);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--borde);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > thead > tr > th {
    padding: 12px;
    vertical-align: middle;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th {
    border-color: #e6ebf1;
}

.table-hover > tbody > tr:hover,
table.dataTable tbody tr:hover {
    background: #f7fafc;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio-sm);
    height: 38px;
    padding: 0 10px;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--acento-btn);
    border-color: var(--borde);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background: var(--acento-btn);
    border-color: var(--acento-btn);
}

/* ---------- Pestanas ---------- */
.nav-tabs-custom {
    border-radius: 14px;
    border: 1px solid var(--borde-suave);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--acento);
}

/* ---------- Modales ---------- */
.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(31, 45, 61, .25);
    overflow: hidden;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f6;
}

.modal-title { font-weight: 700; font-size: 18px; }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid #eef2f6; background: #f7f9fb; }

/* Modales de mensaje: cuerpo blanco, cabecera de color */
.modal-danger .modal-body, .modal-warning .modal-body,
.modal-success .modal-body, .modal-info .modal-body,
.modal-danger .modal-footer, .modal-warning .modal-footer,
.modal-success .modal-footer, .modal-info .modal-footer {
    background: var(--superficie) !important;
    color: var(--texto) !important;
}

.modal-danger .modal-header { background: var(--peligro) !important; color: #fff; }
.modal-success .modal-header { background: #008d4c !important; color: #fff; }
.modal-warning .modal-header { background: #f39c12 !important; color: #1f2d3d; }
.modal-info .modal-header { background: var(--acento-btn) !important; color: #fff; }

.modal-danger .modal-footer .btn, .modal-warning .modal-footer .btn,
.modal-success .modal-footer .btn, .modal-info .modal-footer .btn {
    border-color: var(--borde-campo) !important;
}

/* ---------- Alertas y etiquetas ---------- */
.alert { border-radius: var(--radio); border: 0; }

.badge, .label { border-radius: 12px; font-weight: 600; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }

.etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    background: var(--acento-suave);
    color: var(--acento-osc);
}

.etiqueta-aviso { background: var(--aviso-suave); color: var(--aviso-texto); }
.etiqueta-exito { background: var(--exito-suave); color: var(--exito); }

/* ---------- Tarjeta generica ---------- */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--sombra);
}

.tarjeta-titulo {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
}

/* ---------- Detalle de producto ---------- */
.detalle {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}

/* La foto ocupa la mitad del ancho; bajo 992px las columnas se apilan */
.detalle-media {
    flex: 0 0 calc(50% - 14px);
    max-width: calc(50% - 14px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detalle-foto {
    background: #fff;
    border: 1px solid var(--borde-suave);
    border-radius: 16px;
    padding: 28px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detalle-foto img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.detalle-info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.detalle-cod {
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-3);
    margin: 0;
}

.detalle-marca {
    font-size: 15px;
    font-weight: 700;
    color: var(--acento-btn);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.detalle-titulo {
    margin: 4px 0 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--texto);
}

.detalle-precio {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--texto);
}

.campo-fila {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.campo-fila + .campo-fila { margin-top: 20px; }

.campo-etiqueta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
}

.campo-etiqueta a { font-size: 14px; font-weight: 600; cursor: pointer; }

.tallas { display: flex; flex-wrap: wrap; gap: 8px; }

.talla-btn {
    min-width: 52px;
    height: 46px;
    padding: 0 12px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--borde-campo);
    background: var(--superficie);
    color: var(--texto);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.talla-btn:hover { border-color: var(--acento); }

.talla-btn.activa {
    background: var(--acento-btn);
    border-color: var(--acento-btn);
    color: #fff;
}

.cantidad-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.stepper {
    display: inline-flex;
    align-items: center;
    height: 46px;
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--superficie);
}

.stepper .stepper-btn {
    width: 46px;
    height: 46px;
    border: 0;
    background: #f4f7fa;
    color: var(--acento-btn);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0;
    padding: 0;
}

.stepper .stepper-btn:hover { background: var(--acento-suave); }

.stepper input {
    width: 54px;
    height: 46px;
    border: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    background: transparent;
    color: var(--texto);
}

.stepper-sm { height: 40px; }
.stepper-sm .stepper-btn { width: 40px; height: 40px; }
.stepper-sm input { width: 44px; height: 40px; font-size: 16px; }

.docs { display: flex; flex-wrap: nowrap; gap: 10px; }

.doc-btn {
    flex: 1 1 0;
    justify-content: center;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio-sm);
    background: var(--superficie);
    color: var(--texto);
    font-weight: 600;
    cursor: pointer;
}

.doc-btn .fa { color: #b2311f; font-size: 18px; }
.doc-btn:hover { background: #f4f8fb; color: var(--texto); }

.detalle-descripcion {
    font-size: 16px;
    line-height: 1.55;
    color: #3d4b5a;
}

@media (max-width: 991px) {
    .detalle-media { flex: 1 1 100%; max-width: 100%; }
    .detalle-info { flex: 1 1 100%; }
}

@media (max-width: 767px) {
    .detalle-titulo { font-size: 24px; }
    .detalle-foto { padding: 16px; }
    .docs { flex-wrap: wrap; }
    .doc-btn { flex: 1 1 100%; }
}

/* ---------- Carro ---------- */
.carro-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.carro-detalle {
    flex: 999 1 560px;
    min-width: 0;
}

.carro-resumen {
    flex: 1 1 320px;
    max-width: 440px;
    min-width: 0;
}

.carro-resumen .box-body > div,
.carro-resumen #calendarContainer {
    margin-top: 14px;
}

.carro-resumen .campo-titulo {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--texto);
    margin-bottom: 6px;
}

.carro-acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 20px 20px;
}

.carro-acciones .btn { min-height: 50px; font-size: 17px; }

.prod-celda {
    display: flex;
    align-items: center;
    gap: 14px;
}

.prod-celda-img {
    width: 64px;
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px solid #eef2f6;
    border-radius: var(--radio-sm);
    background: #fff;
}

.prod-celda-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.prod-celda-nombre { font-weight: 600; color: var(--texto); line-height: 1.3; }
.prod-celda-cod { font-size: 13px; color: var(--texto-3); }

.btn-quitar {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radio-sm);
    background: transparent;
    color: var(--texto-3);
}

.btn-quitar:hover { background: #fbeceb; color: #9c2a1b; }

.carro-vacio {
    text-align: center;
    padding: 48px 24px;
}

.carro-vacio h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.carro-vacio p { color: var(--texto-3); margin-bottom: 20px; }

/* ---------- Indicador de carga ---------- */
.cargando {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(255, 255, 255, .78);
}

/* jQuery muestra el overlay con display:block, por eso la caja se centra con posicion absoluta */
.cargando-caja {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 36px;
    background: var(--superficie);
    border-radius: 16px;
    box-shadow: var(--sombra-alta);
    font-size: 16px;
    font-weight: 600;
    color: var(--texto-2);
}

.spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid var(--acento-suave);
    border-top-color: var(--acento);
    animation: girar .8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.4s; }
    .producto, .producto:hover { transition: none; transform: none; }
}

/* ---------- Dashboard ---------- */
.dash-filtros .box-body { padding: 16px 20px; }

.dash-filtros-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin: 0;
}

.dash-filtro { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.dash-filtro label { margin: 0; font-size: 13px; color: var(--texto-2); }
.dash-filtro-detalle { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.dash-filtro-detalle:empty { display: none; }
.dash-filtro-accion .btn { height: 44px; padding: 0 20px; }

.dash-seccion {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-2);
}

.dash-seccion::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borde);
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.dash-kpi {
    --kpi-color: var(--acento);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: 14px;
    box-shadow: var(--sombra);
    overflow: hidden;
}

/* franja de color del indicador */
.dash-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--kpi-color);
}

.dash-kpi-etiqueta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-2);
}

.dash-kpi-icono {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 15px;
    color: var(--kpi-color);
    background: #f1f4f8;
    background: color-mix(in srgb, var(--kpi-color) 13%, #fff);
}

.dash-kpi-valor {
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.dash-kpi-total .dash-kpi-valor { font-size: 46px; }
.dash-kpi-total { background: var(--acento-suave); border-color: var(--acento-borde); }
.dash-kpi-total .dash-kpi-icono { color: #fff; background: var(--acento); }

.dash-kpi-nota { font-size: 13px; color: var(--texto-3); }

/* medidor de porcentaje dentro de un indicador */
.dash-medidor {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #eef3f7;
    overflow: hidden;
}

.dash-medidor > span {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 3px;
    background: var(--kpi-color);
}

/* tasas bajo la barra de estados */
.dash-tasas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--borde-suave);
}

.dash-tasas div {
    padding: 12px 14px;
    border-radius: var(--radio-sm);
    background: #f6f8fb;
}

.dash-tasas dt { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.dash-tasas dd { margin: 2px 0 0; font-size: 24px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.dash-tasas dd.dash-tasas-nota { font-size: 12px; font-weight: 400; color: var(--texto-3); }

.dash-nota { margin: 14px 0 0; font-size: 12px; color: var(--texto-3); }

/* Avance por grupo: porcentaje y "cumplidos / total" */
.dash-avance .dash-barra-valor { min-width: 110px; }
.dash-avance .dash-barra-valor small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--texto-3);
}
.dash-punto-pista { background: #eef3f7; box-shadow: inset 0 0 0 1px var(--borde); }

.dash-mas { margin-top: 10px; }
.dash-mas > summary {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--acento-btn);
    cursor: pointer;
}

.dash-punto {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dash-tarjeta .box-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.dash-tarjeta .box-header:before,
.dash-tarjeta .box-header:after { display: none; }

.dash-periodo { font-size: 13px; color: var(--texto-3); }

.dash-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 0 20px;
}

.dash-grilla > .box { margin-bottom: 20px; }
.dash-grilla > .dash-tarjeta-ancha { grid-column: 1 / -1; }

.dash-tarjeta { border-radius: 14px; }
.dash-tarjeta .box-title { font-weight: 700; }

.dash-vacio { margin: 8px 0; color: var(--texto-3); }

/* Barras horizontales: nombre | barra | valor */
.dash-barras {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-barra {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 2px 0;
}

.dash-tarjeta-ancha .dash-barra { grid-template-columns: minmax(0, 30%) minmax(0, 1fr) auto; }

.dash-barra-nombre {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-barra-pos {
    flex: none;
    width: 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--texto-3);
    text-align: right;
}

.dash-barra-pista {
    height: 14px;
    border-radius: 0 4px 4px 0;
    background: #eef3f7;
    overflow: hidden;
}

.dash-barra-relleno {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 0 4px 4px 0;
    background: var(--dash-color, var(--acento));
}

.dash-barra:hover .dash-barra-relleno { filter: brightness(.85); }

.dash-barra-valor {
    min-width: 64px;
    font-size: 14px;
    font-weight: 700;
    color: var(--texto);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Barra de proporcion de estados */
.dash-proporcion {
    display: flex;
    gap: 2px;
    height: 22px;
    border-radius: 6px;
    overflow: visible;
}

.dash-proporcion-seg {
    position: relative;
    min-width: 4px;
}

.dash-proporcion-seg:first-child { border-radius: 6px 0 0 6px; }
.dash-proporcion-seg:last-child { border-radius: 0 6px 6px 0; }
.dash-proporcion-seg:only-child { border-radius: 6px; }

.dash-leyenda {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 14px 0 0;
    padding: 0;
    font-size: 14px;
    color: var(--texto-2);
}

.dash-leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.dash-leyenda b { color: var(--texto); }

/* Columnas apiladas por mes */
.dash-columnas {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 260px;
    padding-top: 8px;
    border-bottom: 1px solid var(--borde);
    overflow-x: auto;
}

.dash-columna {
    position: relative;
    flex: 1 1 0;
    min-width: 36px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dash-columna-total {
    font-size: 12px;
    font-weight: 700;
    color: var(--texto-2);
    font-variant-numeric: tabular-nums;
}

.dash-columna-area {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.dash-columna-pila {
    width: 100%;
    max-width: 24px;
    min-height: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.dash-columna-seg { flex-basis: 0; min-height: 2px; }

.dash-columna-mes {
    margin-top: 6px;
    font-size: 12px;
    color: var(--texto-3);
    white-space: nowrap;
}

.dash-columna:hover .dash-columna-pila { filter: brightness(.92); }

/* Columnas de una sola serie con linea de promedio */
.dash-columnas-simple { height: 240px; gap: 10px; }
.dash-columnas-simple .dash-columna-pila { max-width: 32px; background: var(--dash-color, var(--acento)); }
.dash-columnas-simple .dash-columna:hover .dash-columna-pila { filter: brightness(.85); }
.dash-columna-total { white-space: nowrap; }

/* muchas columnas: mas angostas y rotulos sin cortar (pueden pasar sobre las vecinas vacias) */
.dash-columnas-densa { gap: 4px; }
.dash-columnas-densa .dash-columna { min-width: 18px; }
.dash-columnas-densa .dash-columna-total,
.dash-columnas-densa .dash-columna-mes { min-height: 16px; overflow: visible; }

.dash-columna-area { position: relative; }

.dash-promedio {
    position: absolute;
    left: -5px;
    right: -5px;
    z-index: 1;
    border-top: 2px dashed var(--texto-2);
    opacity: .55;
    pointer-events: none;
}

.dash-linea-promedio {
    display: inline-block;
    width: 18px;
    border-top: 2px dashed var(--texto-2);
    opacity: .7;
}

/* Detalle al pasar el mouse (barras, segmentos y columnas) */
[data-tip] { cursor: default; }

[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    width: max-content;
    max-width: 320px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--texto);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    pointer-events: none;
    box-shadow: var(--sombra-alta);
}

.dash-barra[data-tip]:hover::after { left: auto; right: 0; transform: none; }

@media (max-width: 767px) {
    .dash-grilla { grid-template-columns: 1fr; }
    .dash-barra,
    .dash-tarjeta-ancha .dash-barra { grid-template-columns: minmax(0, 1fr) auto; }
    .dash-barra-pista { grid-column: 1 / -1; grid-row: 2; }
    .dash-kpi-total .dash-kpi-valor { font-size: 40px; }
    .dash-tasas { grid-template-columns: 1fr; }
}

/* ---------- Login y recuperacion de contrasena ---------- */
.login-page {
    background: var(--fondo);
}

.login-box-body {
    padding: 28px;
    border: 1px solid var(--borde-suave);
    border-radius: 16px;
    box-shadow: var(--sombra);
}

.login-box-msg {
    padding: 0 0 18px;
    font-size: 16px;
    color: var(--texto-2);
}

.login-box-body .btn-block {
    min-height: 46px;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--radio-sm) !important;
}

/* ---------- Pie ---------- */
.main-footer {
    background: var(--superficie);
    border-top: 1px solid var(--borde);
    color: var(--texto-3);
    font-size: 14px;
}