/* ================================================================
   KRONHOS E-COMMERCE - CAPA DE CALIDAD GLOBAL
   Fase 5.1 / 2026-09-10
   ---------------------------------------------------------------
   Objetivo:
   - Evitar desbordes y anchos rígidos heredados en páginas Cats.Master.
   - Mantener superficies y textos coherentes en Light/Dark.
   - Garantizar un footer inferior sólido y legible.
   - Normalizar el detalle de producto y formularios secundarios.
   - No afecta clasico-original porque todo está aislado por .kr-ecommerce.
   ================================================================ */

/* ---------- 1. Seguridad de layout / ancho completo ---------- */
body.kr-ecommerce {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-bottom: 34px !important; /* reserva para la barra inferior fija */
}

.kr-ecommerce .kr-page-shell,
.kr-ecommerce .divMaster,
.kr-ecommerce .divMaster > .row,
.kr-ecommerce .column1,
.kr-ecommerce .column2,
.kr-ecommerce .column3,
.kr-ecommerce [id*="ContentPlaceHolder1"] {
    max-width: 100%;
    box-sizing: border-box;
}

    .kr-ecommerce .divMaster > .row {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

.kr-ecommerce .column1,
.kr-ecommerce .column2,
.kr-ecommerce .column3 {
    min-width: 0 !important;
}

.kr-ecommerce input,
.kr-ecommerce select,
.kr-ecommerce textarea,
.kr-ecommerce table,
.kr-ecommerce .table,
.kr-ecommerce .tabla800,
.kr-ecommerce .aspxgridview,
.kr-ecommerce [class*="dxgvControl"] {
    max-width: 100% !important;
}

.kr-ecommerce .tabla800,
.kr-ecommerce .aspxgridview,
.kr-ecommerce [class*="dxgvControl"] {
    width: 100% !important;
}

/* ---------- 2. Detalle de producto: CDetalle.aspx ---------- */
.kr-ecommerce .kr-product-detail-page,
.kr-ecommerce .kr-product-detail-panel,
.kr-ecommerce .kr-product-detail-view {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    background: transparent !important;
    color: var(--kr-ecom-text) !important;
}

    /* FormView renderiza una tabla. No debe recuperar BackColor blanco. */
    .kr-ecommerce .kr-product-detail-view,
    .kr-ecommerce .kr-product-detail-view > tbody,
    .kr-ecommerce .kr-product-detail-view > tbody > tr,
    .kr-ecommerce .kr-product-detail-view > tbody > tr > td {
        background: transparent !important;
        background-color: transparent !important;
        color: var(--kr-ecom-text) !important;
    }

    .kr-ecommerce .kr-product-detail-page .detalle {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(280px, .9fr) minmax(340px, 1.1fr) !important;
        gap: clamp(24px, 3vw, 52px) !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .kr-ecommerce .kr-product-detail-page .detalleImg,
    .kr-ecommerce .kr-product-detail-page .detalleDet {
        width: auto !important;
        min-width: 0 !important;
        float: none !important;
    }

    .kr-ecommerce .kr-product-detail-page .detalleImg {
        min-height: clamp(240px, 28vw, 430px) !important;
        padding: clamp(16px, 2vw, 28px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

        .kr-ecommerce .kr-product-detail-page .detalleImg .imgin {
            display: block !important;
            width: auto !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: 390px !important;
            margin: auto !important;
            object-fit: contain !important;
        }

    .kr-ecommerce .kr-product-detail-page .detalleDet {
        padding: clamp(4px, 1vw, 12px) !important;
        color: var(--kr-ecom-text) !important;
    }

    .kr-ecommerce .kr-product-detail-page .titulo2_pr {
        color: var(--kr-ecom-text) !important;
        font-size: clamp(18px, 1.6vw, 25px) !important;
        font-weight: 750 !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
        text-align: left !important;
    }

    .kr-ecommerce .kr-product-detail-page .kr-detail-notes,
    .kr-ecommerce .kr-product-detail-page .kr-detail-meta {
        color: var(--kr-ecom-muted) !important;
        text-align: left !important;
        line-height: 1.55 !important;
    }

    .kr-ecommerce .kr-product-detail-page .kr-detail-notes {
        margin-bottom: 8px !important;
    }

    .kr-ecommerce .kr-product-detail-page .precio {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        width: 100% !important;
        margin-top: 18px !important;
        padding-top: 16px !important;
        border-top: 1px solid var(--kr-ecom-border) !important;
        color: var(--kr-ecom-text) !important;
    }

    .kr-ecommerce .kr-product-detail-page .kr-detail-price {
        width: auto !important;
        float: none !important;
        color: var(--kr-ecom-text) !important;
        font-size: clamp(18px, 1.45vw, 23px) !important;
    }

    .kr-ecommerce .kr-product-detail-page .kr-detail-price-note {
        margin-top: 2px !important;
        color: var(--kr-ecom-muted) !important;
        font-size: 11px !important;
    }

    .kr-ecommerce .kr-product-detail-page .kr-detail-price-tax {
        color: var(--kr-ecom-primary-strong) !important;
    }

    .kr-ecommerce .kr-product-detail-page .kr-detail-stock {
        grid-column: 1 / -1;
        padding-top: 10px !important;
        color: var(--kr-ecom-text) !important;
        text-align: left !important;
        font-weight: 700 !important;
    }

    .kr-ecommerce .kr-product-detail-page .kr-detail-stock-value {
        color: var(--kr-ecom-success) !important;
    }

    .kr-ecommerce .kr-product-detail-page .kr-detail-promo {
        clear: both !important;
        margin-top: 10px !important;
        color: var(--kr-ecom-promo) !important;
    }

    .kr-ecommerce .kr-product-detail-page .contenidopr1 {
        grid-column: 1 / -1;
        width: 100% !important;
        color: var(--kr-ecom-text) !important;
    }

    .kr-ecommerce .kr-product-detail-page .kr-detail-addbar {
        width: 100% !important;
        min-height: 64px !important;
        margin: 16px 0 28px !important;
        padding: 10px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        color: var(--kr-ecom-text) !important;
        border-top: 1px solid var(--kr-ecom-border) !important;
        border-bottom: 1px solid var(--kr-ecom-border) !important;
        background: transparent !important;
    }

        .kr-ecommerce .kr-product-detail-page .kr-detail-addbar .txt_der {
            width: 72px !important;
            min-width: 72px !important;
            margin: 0 !important;
        }

        .kr-ecommerce .kr-product-detail-page .kr-detail-addbar .botonAdd {
            margin: 0 !important;
        }

/* ---------- 3. Páginas de formulario / cliente ---------- */
.kr-ecommerce .border,
.kr-ecommerce .divContenedorCuerpo,
.kr-ecommerce .panelGeneralC,
.kr-ecommerce .panelGeneralCd,
.kr-ecommerce .loginT,
.kr-ecommerce .loginR,
.kr-ecommerce .registrese,
.kr-ecommerce .resIn,
.kr-ecommerce .CabResumen {
    max-width: 100% !important;
    background-color: var(--kr-ecom-surface) !important;
    background-image: none !important;
    color: var(--kr-ecom-text) !important;
}

.kr-ecommerce .DatosEntregaCab,
.kr-ecommerce .DatosEntregaCab_,
.kr-ecommerce .DatosEntregaCue,
.kr-ecommerce .rowLogin,
.kr-ecommerce .totali,
.kr-ecommerce .totald {
    color: var(--kr-ecom-text) !important;
}

.kr-ecommerce .msgEmpty,
.kr-ecommerce .watermark,
.kr-ecommerce .buscador_wm_m {
    color: var(--kr-ecom-muted) !important;
}

/* Neutraliza fondos claros heredados en las dos columnas del detalle de pedido. */
.kr-ecommerce .kr-order-info > .c1,
.kr-ecommerce .kr-order-info > .c2 {
    background: var(--kr-ecom-surface) !important;
    background-color: var(--kr-ecom-surface) !important;
    background-image: none !important;
    color: var(--kr-ecom-text) !important;
}

/* ---------- 4. Footer inferior: siempre sólido ---------- */
.kr-ecommerce .cajainfcont {
    min-height: 30px !important;
    background: var(--kr-ecom-primary) !important;
    background-color: var(--kr-ecom-primary) !important;
    background-image: none !important;
    color: var(--kr-ecom-accent-contrast) !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid var(--kr-ecom-border) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .14) !important;
    isolation: isolate !important;
}

    .kr-ecommerce .cajainfcont,
    .kr-ecommerce .cajainfcont * {
        opacity: 1 !important;
    }

.kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajainfcont {
    background: var(--kr-ecom-surface-alt) !important;
    background-color: var(--kr-ecom-surface-alt) !important;
    color: var(--kr-ecom-text) !important;
    border-top-color: var(--kr-ecom-border) !important;
}

    .kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajainfcont,
    .kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajainfcont a,
    .kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajainfcont span,
    .kr-ecommerce[data-ecommerce-theme="dark-tech"] .cajainfcont div {
        color: var(--kr-ecom-text) !important;
    }

.kr-ecommerce .pieDir {
    background-image: none !important;
    opacity: 1 !important;
}

.kr-ecommerce[data-ecommerce-theme="dark-tech"] .pieDir {
    background: var(--kr-ecom-surface) !important;
    background-color: var(--kr-ecom-surface) !important;
    color: var(--kr-ecom-text) !important;
}

/* ---------- 5. DevExpress / tablas: no forzar ancho fijo ---------- */
.kr-ecommerce .aspxgridview,
.kr-ecommerce [class*="dxgvControl"],
.kr-ecommerce [class*="dxgvTable"],
.kr-ecommerce [class*="dxgvHSDC"],
.kr-ecommerce [class*="dxgvCSD"],
.kr-ecommerce [class*="dxgvFSDC"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ---------- 6. Responsive ---------- */
@media (max-width: 1073px) {
    .kr-ecommerce .kr-product-detail-page .detalle {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .kr-ecommerce .kr-product-detail-page .detalleImg {
        min-height: 280px !important;
    }
}

@media (max-width: 760px) {
    body.kr-ecommerce {
        padding-bottom: 32px !important;
    }

    .kr-ecommerce .kr-product-detail-page .detalle {
        padding: 14px !important;
    }

    .kr-ecommerce .kr-product-detail-page .detalleImg {
        min-height: 220px !important;
        padding: 12px !important;
    }

        .kr-ecommerce .kr-product-detail-page .detalleImg .imgin {
            max-height: 300px !important;
        }

    .kr-ecommerce .kr-product-detail-page .precio {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .kr-ecommerce .kr-product-detail-page .kr-detail-stock {
        grid-column: auto;
    }

    .kr-ecommerce .kr-product-detail-page .kr-detail-addbar {
        margin-bottom: 18px !important;
    }

    .kr-ecommerce .resC1,
    .kr-ecommerce .resC2,
    .kr-ecommerce .cinc {
        float: none !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding-left: 0 !important;
    }
}


/* =========================================================
   FASE 6.17 - FOOTER POR THEME (ARCHIVO DE MAYOR PRIORIDAD)
   EcommerceQuality.css se carga después de EcommerceComponents.css.
   Por eso las variables y reglas finales del footer viven aquí.
   ========================================================= */
.kr-ecommerce {
    --kr-ecom-footer-bg: var(--kr-ecom-primary-strong);
    --kr-ecom-footer-text: var(--kr-ecom-accent-contrast);
}

    .kr-ecommerce[data-ecommerce-theme="premium"] {
        --kr-ecom-footer-bg: var(--kr-ecom-primary-strong);
        --kr-ecom-footer-text: var(--kr-ecom-accent-contrast);
    }

    .kr-ecommerce[data-ecommerce-theme="marketplace"] {
        --kr-ecom-footer-bg: var(--kr-ecom-primary);
        --kr-ecom-footer-text: var(--kr-ecom-accent-contrast);
    }

    .kr-ecommerce[data-ecommerce-theme="b2b"] {
        --kr-ecom-footer-bg: var(--kr-ecom-primary-strong);
        --kr-ecom-footer-text: var(--kr-ecom-accent-contrast);
    }

    .kr-ecommerce[data-ecommerce-theme="soft-modern"] {
        --kr-ecom-footer-bg: var(--kr-ecom-accent);
        --kr-ecom-footer-text: var(--kr-ecom-accent-contrast);
    }

    .kr-ecommerce[data-ecommerce-theme="corporativo"] {
        --kr-ecom-footer-bg: var(--kr-ecom-primary-strong);
        --kr-ecom-footer-text: var(--kr-ecom-accent-contrast);
    }

    .kr-ecommerce[data-ecommerce-theme="compacto"] {
        --kr-ecom-footer-bg: var(--kr-ecom-primary);
        --kr-ecom-footer-text: var(--kr-ecom-accent-contrast);
    }

    .kr-ecommerce[data-ecommerce-theme="boutique"] {
        --kr-ecom-footer-bg: var(--kr-ecom-primary-strong);
        --kr-ecom-footer-text: var(--kr-ecom-accent-contrast);
    }

    .kr-ecommerce[data-ecommerce-theme="editorial"] {
        --kr-ecom-footer-bg: var(--kr-ecom-primary-strong);
        --kr-ecom-footer-text: var(--kr-ecom-accent-contrast);
    }

    .kr-ecommerce[data-ecommerce-theme="dark-tech"] {
        --kr-ecom-footer-bg: var(--kr-ecom-surface-alt);
        --kr-ecom-footer-text: var(--kr-ecom-text);
    }

    .kr-ecommerce .pieDir,
    .kr-ecommerce .cajainfcont,
    .kr-ecommerce .cajainfcont::before {
        background: var(--kr-ecom-footer-bg) !important;
        background-color: var(--kr-ecom-footer-bg) !important;
        background-image: none !important;
        color: var(--kr-ecom-footer-text) !important;
    }

        .kr-ecommerce .pieDir *,
        .kr-ecommerce .pieDir a,
        .kr-ecommerce .cajainfcont *,
        .kr-ecommerce .cajainfcont a,
        .kr-ecommerce .txtcajasinf,
        .kr-ecommerce .redes {
            color: var(--kr-ecom-footer-text) !important;
        }


    /* =========================================================
   FASE 6.19 - CONTRATO VISUAL FINAL POR THEME
   Este archivo se carga al final: menu y footer consumen solo
   variables del theme activo. No aplica a clasico-original.
   ========================================================= */
    .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-category-title,
    .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories,
    .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories * {
        font-family: var(--kr-ecom-menu-font, var(--kr-ecom-font)) !important;
    }

    .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories {
        border-color: var(--kr-ecom-menu-border, var(--kr-ecom-border)) !important;
        background: var(--kr-ecom-menu-bg, var(--kr-ecom-surface)) !important;
        color: var(--kr-ecom-menu-text, var(--kr-ecom-text)) !important;
    }

        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories .kr-cat-group {
            border-color: var(--kr-ecom-menu-border, var(--kr-ecom-border)) !important;
            background: var(--kr-ecom-menu-bg, var(--kr-ecom-surface)) !important;
        }

        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories .kr-cat-header {
            background: var(--kr-ecom-menu-group-bg, var(--kr-ecom-surface-alt)) !important;
            color: var(--kr-ecom-menu-text, var(--kr-ecom-text)) !important;
            border-color: var(--kr-ecom-menu-border, var(--kr-ecom-border)) !important;
        }

        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories .kr-cat-group[open] > .kr-cat-header {
            background: var(--kr-ecom-menu-group-active-bg, var(--kr-ecom-primary-soft)) !important;
            color: var(--kr-ecom-menu-active-text, var(--kr-ecom-primary-strong)) !important;
        }

        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories .kr-cat-name {
            color: inherit !important;
            font-family: var(--kr-ecom-menu-font, var(--kr-ecom-font)) !important;
            font-weight: var(--kr-ecom-weight-medium) !important;
        }

        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories .kr-cat-child,
        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories .kr-cat-child:link,
        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories .kr-cat-child:visited {
            background: var(--kr-ecom-menu-bg, var(--kr-ecom-surface)) !important;
            color: var(--kr-ecom-menu-sub-text, var(--kr-ecom-muted)) !important;
            border-color: var(--kr-ecom-menu-border, var(--kr-ecom-border)) !important;
            font-family: var(--kr-ecom-menu-font, var(--kr-ecom-font)) !important;
            font-weight: var(--kr-ecom-weight-regular) !important;
        }

            .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories .kr-cat-child:hover,
            .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .kr-repeater-categories .kr-cat-child:focus-visible {
                background: var(--kr-ecom-menu-group-active-bg, var(--kr-ecom-primary-soft)) !important;
                color: var(--kr-ecom-menu-active-text, var(--kr-ecom-primary-strong)) !important;
            }

    .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .pieDir,
    .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .cajainfcont,
    .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .cajainfcont::before {
        background: var(--kr-ecom-footer-bg) !important;
        background-color: var(--kr-ecom-footer-bg) !important;
        background-image: none !important;
        color: var(--kr-ecom-footer-text) !important;
        border-color: color-mix(in srgb, var(--kr-ecom-footer-text) 18%, transparent) !important;
    }

        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .pieDir *,
        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .pieDir a,
        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .cajainfcont :not(.material-symbols-rounded),
        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .cajainfcont a,
        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .txtcajasinf,
        .kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .redes {
            color: var(--kr-ecom-footer-text) !important;
            font-family: var(--kr-ecom-font) !important;
        }


/* ================================================================
   NAVEGACION INFERIOR RESPONSIVE
   Solo themes modernos. clasico-original queda intacto.
   ================================================================ */

body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .cajainf {
    display: none !important;
}

@media screen and (max-width: 760px) {
    body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .cajainf {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden;
    }

        body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"]) .cajainf .cajasinf {
            box-sizing: border-box;
            width: auto !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 8px 4px;
            overflow: hidden;
        }

        body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
        .cajainf .kr-mig-cats-39ff3c85f {
            display: flex !important;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: 100% !important;
            min-width: 0;
            overflow: hidden;
            text-align: center;
        }

            body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
            .cajainf .kr-mig-cats-39ff3c85f > br {
                display: none;
            }

        body.kr-ecommerce:not([data-ecommerce-theme="clasico-original"])
        .cajainf .txtcajasinf {
            display: block;
            width: 100%;
            min-width: 0;
            overflow: hidden;
            color: var(--kr-ecom-footer-text) !important;
            font-family: var(--kr-ecom-font) !important;
            font-size: 11px !important;
            line-height: 1.25;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
}