/* Confort Home unified premium layer 20260613.
   Visual-only overrides aligned with index.php proportions. */

:root{
    --ch-black:#050505;
    --ch-panel:#111111;
    --ch-panel-2:#181818;
    --ch-gold:#C8A45D;
    --ch-gold-2:#E3BD6B;
    --ch-white:#FFFFFF;
    --ch-cream:#FAF7EF;
    --ch-text:#F7F7F7;
    --ch-dark-text:#171717;
    --ch-muted:rgba(255,255,255,.68);
    --ch-line:rgba(200,164,93,.24);
    --ch-line-soft:rgba(255,255,255,.10);
    --ch-shadow:0 24px 62px rgba(0,0,0,.36);
    --ch-shadow-soft:0 14px 32px rgba(0,0,0,.24);
    --ch-radius:16px;
    --ch-header-h:62px;
    --ch-header-h-mobile:64px;
}

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

body{
    font-family:'Inter','Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
    background:
        radial-gradient(circle at 12% 14%,rgba(200,164,93,.12),transparent 26%),
        radial-gradient(circle at 88% 8%,rgba(15,76,61,.22),transparent 30%),
        linear-gradient(180deg,#050505 0%,#080808 48%,#050505 100%)!important;
    color:var(--ch-text)!important;
}

body::before{
    opacity:.12!important;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

a,
button,
input,
select,
textarea{
    font-family:inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(200,164,93,.58)!important;
    outline-offset:3px!important;
}

.main-header,
.premium-shop-header,
.premium-detail-header,
.topbar{
    background:#050505!important;
    border-bottom:1px solid var(--ch-line)!important;
    box-shadow:0 16px 40px rgba(0,0,0,.38)!important;
    z-index:2100!important;
}

.premium-header-shell,
.premium-detail-header-inner,
.topbar-inner,
.header-flex{
    width:min(1180px,calc(100% - 32px))!important;
    min-height:var(--ch-header-h)!important;
    margin:0 auto!important;
    display:flex!important;
    align-items:center!important;
    gap:18px!important;
}

.premium-header-shell,
.topbar-inner{
    justify-content:space-between!important;
}

.premium-detail-header-inner,
.header-flex{
    justify-content:space-between!important;
}

.premium-brand,
.premium-detail-brand,
.brand,
.logo-container,
.logo-branding{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-width:0!important;
    color:#fff!important;
    text-decoration:none!important;
}

.premium-brand img,
.premium-detail-brand img,
.brand-logo,
.logo-img-main{
    width:64px!important;
    height:64px!important;
    max-width:64px!important;
    max-height:64px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 0 14px rgba(200,164,93,.18)) drop-shadow(0 10px 18px rgba(0,0,0,.48))!important;
}

.premium-brand strong,
.premium-detail-brand strong,
.brand-title,
.logo-sitio,
.logo-ch{
    color:#f9efd6!important;
    font-family:'Montserrat','Inter',system-ui,sans-serif!important;
    font-size:1.08rem!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
}

.premium-brand small,
.premium-brand span,
.premium-detail-brand small,
.brand-subtitle,
.logo-sitio span{
    color:rgba(255,255,255,.78)!important;
    font-size:.54rem!important;
    font-weight:800!important;
    line-height:1.05!important;
    text-transform:uppercase!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
}

.premium-header-actions,
.premium-detail-actions,
.top-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
}

.premium-header-pill,
.premium-header-cart,
.premium-header-user,
.premium-detail-action,
.header-link,
.action-pill{
    min-height:40px!important;
    padding:0 11px!important;
    border-radius:10px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    background:rgba(255,255,255,.045)!important;
    color:#fff!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    text-decoration:none!important;
    font-size:.74rem!important;
    font-weight:850!important;
    line-height:1!important;
}

.premium-header-pill i,
.premium-header-cart i,
.premium-header-user i,
.premium-detail-action i,
.header-link i,
.action-pill i{
    color:var(--ch-gold)!important;
    font-size:1rem!important;
}

.premium-search,
.premium-search-mini,
.buscador,
.buscador-catalogo,
.search-container,
.input-wrapper,
.input-wrap{
    border-radius:10px!important;
    border:1px solid rgba(200,164,93,.22)!important;
    box-shadow:0 12px 32px rgba(0,0,0,.24)!important;
}

.premium-search,
.premium-search-mini{
    min-height:40px!important;
}

.premium-search input,
.buscador input,
.buscador-catalogo input,
.search-input,
.input-estilizado,
.input-control,
.input,
.select,
textarea.input{
    min-width:0!important;
    font-size:.84rem!important;
}

.mobile-bottom-nav{
    height:calc(64px + env(safe-area-inset-bottom))!important;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom))!important;
    border:1px solid rgba(255,255,255,.10)!important;
    background:rgba(8,8,8,.96)!important;
    box-shadow:0 -14px 38px rgba(0,0,0,.42)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
}

.mobile-nav-item{
    min-width:0!important;
    min-height:46px!important;
    border-radius:12px!important;
    color:rgba(255,255,255,.78)!important;
    font-size:.52rem!important;
    font-weight:850!important;
    line-height:1.05!important;
}

.mobile-nav-item i{
    color:var(--ch-gold)!important;
    font-size:.9rem!important;
}

.mobile-nav-item.active,
.mobile-nav-item.is-active,
.mobile-nav-item:hover,
.mobile-nav-item:focus-visible{
    background:rgba(200,164,93,.16)!important;
    color:#fff!important;
}

.floating-back,
.floating-cart,
.floating-theme,
.btn-whatsapp,
.floating-utility-btn{
    border-color:rgba(200,164,93,.34)!important;
    background:rgba(10,10,10,.88)!important;
    color:#fff!important;
    box-shadow:var(--ch-shadow-soft)!important;
}

.floating-back i,
.floating-cart i,
.floating-theme i,
.btn-whatsapp i,
.floating-utility-btn i{
    color:var(--ch-gold)!important;
}

.login-shell,
.hero-login,
.page,
.shell{
    width:min(1180px,calc(100% - 32px))!important;
    margin-inline:auto!important;
}

.login-shell,
.hero-login{
    min-height:calc(100dvh - 110px)!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.02fr) minmax(320px,.78fr)!important;
    align-items:center!important;
    gap:24px!important;
    padding:24px 0 82px!important;
}

.brand-panel,
.master-hero,
.login-box,
.login-card,
.card,
.summary-card,
.info-card,
.specs-card,
.img-card,
.imagen-card,
.info-detalle,
.empresa-box,
.empresa-top-card,
.modal-content{
    border:1px solid var(--ch-line-soft)!important;
    border-radius:var(--ch-radius)!important;
    box-shadow:var(--ch-shadow-soft)!important;
}

.brand-panel,
.master-hero,
.login-box,
.login-card,
.card,
.summary-card,
.empresa-box,
.empresa-top-card,
.modal-content{
    background:rgba(18,18,18,.94)!important;
    color:#fff!important;
}

.login-title,
.master-title,
.seccion-titulo,
.card-title h2,
.card-title h3,
.titulo-dashboard h1,
.titulo-dashboard h2,
.category-showcase-title,
.compact-rail-header h3{
    font-family:'Montserrat','Inter',system-ui,sans-serif!important;
    color:#fff!important;
    letter-spacing:0!important;
}

.subtitulo,
.login-subtitle,
.master-copy,
.card-desc,
.titulo-dashboard p,
.category-showcase-count,
.compact-rail-header p{
    color:rgba(255,255,255,.70)!important;
}

.login-logo,
.login-icon,
.brand-lock-icon,
.tag,
.kicker,
.sispos-badge,
.category-showcase-kicker,
.compact-rail-kicker,
.search-icon,
.input-icon{
    color:var(--ch-gold)!important;
}

.btn-ingresar,
.btn-login,
.btn-admin,
.btn-primario,
.btn-primary,
.btn-accion,
.btn-carrito,
.compact-product-action,
.btn-add-publico,
.category-more-btn{
    background:var(--ch-gold)!important;
    color:#111!important;
    border-color:var(--ch-gold)!important;
    border-radius:10px!important;
    font-weight:900!important;
}

.btn-soft,
.btn-secondary,
.btn-ver,
.btn-ver-mas,
.btn-dark{
    border-radius:10px!important;
}

.productos-grid,
.category-showcase-grid{
    gap:16px!important;
}

.catalogo-compact-rail,
.category-showcase{
    border-radius:16px!important;
    background:rgba(18,18,18,.96)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:0 24px 58px rgba(0,0,0,.36)!important;
}

.compact-product-card,
.producto-card{
    border-radius:13px!important;
    box-shadow:0 16px 36px rgba(0,0,0,.24)!important;
}

.compact-product-media,
.img-wrapper,
.img-container,
.imagen-producto-grande{
    background:#f7f7f7!important;
}

.detalle-grid,
.main-wrapper{
    width:min(1180px,calc(100% - 32px))!important;
    margin-inline:auto!important;
}

.detalle-grid{
    display:grid!important;
    grid-template-columns:minmax(0,.92fr) minmax(320px,1.08fr)!important;
    gap:22px!important;
    align-items:start!important;
}

.main-wrapper{
    display:grid!important;
    grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr)!important;
    gap:22px!important;
    align-items:start!important;
}

.sidebar{
    background:#050505!important;
    border-right:1px solid var(--ch-line)!important;
    box-shadow:16px 0 46px rgba(0,0,0,.30)!important;
}

.logo-img-sidebar{
    width:64px!important;
    height:64px!important;
    object-fit:contain!important;
}

.main-content{
    min-width:0!important;
}

.table-container,
.tabla-responsive-container{
    border-radius:14px!important;
    overflow:auto!important;
}

table{
    max-width:100%;
}

@media(max-width:980px){
    .premium-header-shell,
    .premium-detail-header-inner,
    .topbar-inner,
    .header-flex{
        min-height:var(--ch-header-h-mobile)!important;
        gap:8px!important;
    }

    .premium-header-actions,
    .premium-detail-actions,
    .top-actions{
        gap:6px!important;
    }

    .premium-header-pill,
    .premium-header-cart,
    .premium-header-user,
    .premium-detail-action,
    .header-link,
    .action-pill{
        width:38px!important;
        height:38px!important;
        min-height:38px!important;
        padding:0!important;
        position:relative!important;
    }

    .premium-header-pill span:not(.cart-counter):not(.cart-count-badge),
    .premium-header-cart span:not(.cart-counter):not(.cart-count-badge),
    .premium-header-user span:not(.cart-counter):not(.cart-count-badge),
    .premium-detail-action span:not(.premium-cart-badge),
    .header-link span,
    .action-pill span{
        display:none!important;
    }

    .login-shell,
    .hero-login{
        grid-template-columns:1fr!important;
        min-height:auto!important;
        padding:18px 0 calc(86px + env(safe-area-inset-bottom))!important;
        gap:14px!important;
    }

    .brand-panel,
    .master-hero{
        padding:18px!important;
    }
}

@media(max-width:768px){
    body{
        padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;
    }

    .premium-header-shell,
    .premium-detail-header-inner,
    .topbar-inner,
    .header-flex{
        width:100%!important;
        padding:0 12px!important;
    }

    .premium-brand,
    .premium-detail-brand,
    .brand,
    .logo-container,
    .logo-branding{
        gap:8px!important;
        overflow:hidden!important;
    }

    .premium-brand img,
    .premium-detail-brand img,
    .brand-logo,
    .logo-img-main,
    .logo-img-sidebar{
        width:48px!important;
        height:48px!important;
        max-width:48px!important;
        max-height:48px!important;
    }

    .premium-brand strong,
    .premium-detail-brand strong,
    .brand-title,
    .logo-sitio,
    .logo-ch{
        max-width:38vw!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        font-size:.96rem!important;
    }

    .premium-brand small,
    .premium-brand span,
    .premium-detail-brand small,
    .brand-subtitle,
    .logo-sitio span{
        max-width:38vw!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        font-size:.48rem!important;
    }

    .login-shell,
    .hero-login,
    .page,
    .shell,
    .detalle-grid,
    .main-wrapper{
        width:calc(100% - 24px)!important;
    }

    .detalle-grid,
    .main-wrapper{
        grid-template-columns:1fr!important;
        gap:14px!important;
    }

    .card,
    .login-box,
    .login-card,
    .summary-card,
    .info-card,
    .specs-card,
    .img-card,
    .imagen-card,
    .info-detalle{
        border-radius:14px!important;
    }

    .catalogo-category-sections .category-showcase-grid,
    .category-showcase-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:10px!important;
    }

    .category-showcase,
    .catalogo-compact-rail{
        padding:12px!important;
    }

    .compact-rail-viewport{
        min-height:124px!important;
        max-height:142px!important;
        padding:7px 10px 12px!important;
    }

    .compact-product-card{
        width:176px!important;
        height:104px!important;
        min-height:104px!important;
        max-height:104px!important;
        flex:0 0 176px!important;
        grid-template-columns:64px minmax(0,1fr)!important;
        grid-template-rows:88px!important;
        gap:7px!important;
        padding:8px!important;
    }

    .compact-product-media{
        width:64px!important;
        height:88px!important;
        min-height:88px!important;
        max-height:88px!important;
    }

    .compact-product-info{
        height:88px!important;
        min-height:88px!important;
        max-height:88px!important;
        gap:4px!important;
    }

    .compact-product-chip{
        padding:3px 6px!important;
        font-size:.48rem!important;
    }

    .compact-product-title{
        font-size:.62rem!important;
        line-height:1.08!important;
        max-height:2.2em!important;
    }

    .compact-product-bottom strong{
        max-width:calc(100% - 30px)!important;
        font-size:.66rem!important;
        line-height:1!important;
    }

    .compact-product-action{
        width:28px!important;
        height:28px!important;
        flex-basis:28px!important;
        border-radius:10px!important;
        font-size:.66rem!important;
    }

    .category-showcase-grid .producto-card{
        width:100%!important;
        min-width:0!important;
        border-radius:13px!important;
        overflow:hidden!important;
    }

    .category-showcase-grid .img-wrapper,
    .category-showcase-grid .img-container{
        height:118px!important;
        padding:7px!important;
    }

    .category-showcase-grid .info-producto,
    .category-showcase-grid .info{
        padding:8px!important;
    }

    .category-showcase-grid .info-producto h3,
    .category-showcase-grid .info h3{
        min-height:28px!important;
        margin:5px 0!important;
        font-size:.66rem!important;
        line-height:1.18!important;
    }

    .category-showcase-grid .categoria-chip,
    .category-showcase-grid .categoria-pill{
        padding:3px 7px!important;
        font-size:.5rem!important;
        margin-bottom:5px!important;
    }

    .category-showcase-grid .mensaje-elije-tamano,
    .category-showcase-grid .descuento-especial-card{
        padding:5px 6px!important;
        font-size:.52rem!important;
        border-radius:999px!important;
    }

    .category-showcase-grid .contenedor-precios{
        min-height:30px!important;
        margin:5px 0 8px!important;
    }

    .category-showcase-grid .precio-tag,
    .category-showcase-grid .precio-actual{
        font-size:.86rem!important;
    }

    .category-showcase-grid .btn-ver,
    .category-showcase-grid .btn-ver-mas{
        min-height:34px!important;
        padding:9px 8px!important;
        font-size:.64rem!important;
    }

    .category-showcase-grid .btn-carrito,
    .category-showcase-grid .btn-add-publico{
        width:34px!important;
        height:34px!important;
        min-width:34px!important;
    }

    .form-grid,
    .profile-grid{
        grid-template-columns:1fr!important;
    }

    .form-grid > *,
    .profile-grid > *,
    .span-4,
    .field.full,
    .input-group.span-4{
        grid-column:1 / -1!important;
    }

    .topbar{
        position:sticky!important;
        top:0!important;
    }

    .sidebar{
        position:relative!important;
        width:100%!important;
        min-height:auto!important;
        border-right:0!important;
        border-bottom:1px solid var(--ch-line)!important;
    }

    .portal-wrapper{
        display:block!important;
    }

    .main-content{
        margin-left:0!important;
        width:100%!important;
        padding:16px 12px calc(82px + env(safe-area-inset-bottom))!important;
    }

    .table-container,
    .tabla-responsive-container{
        max-width:100%;
        overflow:auto!important;
        -webkit-overflow-scrolling:touch;
    }
}

@media(max-width:430px){
    .premium-brand strong,
    .premium-detail-brand strong,
    .brand-title,
    .logo-sitio,
    .logo-ch{
        max-width:34vw!important;
        font-size:.88rem!important;
    }

    .premium-brand small,
    .premium-brand span,
    .premium-detail-brand small,
    .brand-subtitle,
    .logo-sitio span{
        max-width:34vw!important;
        font-size:.43rem!important;
    }

    .premium-header-pill,
    .premium-header-cart,
    .premium-header-user,
    .premium-detail-action,
    .header-link,
    .action-pill{
        width:36px!important;
        height:36px!important;
        min-height:36px!important;
    }

    .premium-header-pill i,
    .premium-header-cart i,
    .premium-header-user i,
    .premium-detail-action i,
    .header-link i,
    .action-pill i{
        font-size:.95rem!important;
    }

    .mobile-bottom-nav{
        height:calc(62px + env(safe-area-inset-bottom))!important;
    }

    .mobile-nav-item{
        min-height:44px!important;
        font-size:.48rem!important;
    }

    .compact-product-card{
        width:154px!important;
        height:98px!important;
        min-height:98px!important;
        max-height:98px!important;
        flex-basis:154px!important;
        grid-template-columns:56px minmax(0,1fr)!important;
        grid-template-rows:82px!important;
        padding:7px!important;
        gap:6px!important;
    }

    .compact-product-media{
        width:56px!important;
        height:82px!important;
        min-height:82px!important;
        max-height:82px!important;
    }

    .compact-product-info{
        height:82px!important;
        min-height:82px!important;
        max-height:82px!important;
    }

    .compact-product-chip{
        font-size:.44rem!important;
    }

    .compact-product-title{
        font-size:.58rem!important;
    }

    .compact-product-bottom strong{
        font-size:.62rem!important;
    }

    .login-shell,
    .hero-login,
    .page,
    .shell,
    .detalle-grid,
    .main-wrapper{
        width:calc(100% - 20px)!important;
    }
}

@media(max-width:360px){
    .premium-detail-action[href="loguin_ingreso.php"],
    .header-link[href="login-empresa.php"],
    .premium-header-user{
        display:none!important;
    }

    .premium-brand img,
    .premium-detail-brand img,
    .brand-logo,
    .logo-img-main,
    .logo-img-sidebar{
        width:44px!important;
        height:44px!important;
        max-width:44px!important;
        max-height:44px!important;
    }

    .compact-product-card{
        width:142px!important;
        flex-basis:142px!important;
        grid-template-columns:52px minmax(0,1fr)!important;
    }

    .compact-product-media{
        width:52px!important;
    }

    .category-showcase-grid{
        gap:8px!important;
    }

    .category-showcase-grid .img-wrapper,
    .category-showcase-grid .img-container{
        height:106px!important;
    }
}

/* Detalle publico: visual alineada con detalle.php. */
.premium-detail-header ~ .main-wrapper .specs-card,
.premium-detail-header ~ .main-wrapper .info-card{
    background:rgba(18,18,18,.96)!important;
    color:#fff!important;
    border:1px solid rgba(200,164,93,.22)!important;
    box-shadow:0 24px 58px rgba(0,0,0,.36)!important;
}

.premium-detail-header ~ .main-wrapper .specs-title,
.premium-detail-header ~ .main-wrapper .info-card h1{
    color:#fff!important;
    text-shadow:0 10px 24px rgba(0,0,0,.32)!important;
}

.premium-detail-header ~ .main-wrapper .specs-title{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    margin:0 0 15px!important;
    font-size:.82rem!important;
    letter-spacing:.7px!important;
}

.premium-detail-header ~ .main-wrapper .specs-title::before{
    content:"\f00b";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:var(--ch-gold)!important;
}

.premium-detail-header ~ .main-wrapper .spec-item{
    background:rgba(200,164,93,.08)!important;
    color:#fff!important;
    border:1px solid rgba(200,164,93,.24)!important;
    border-radius:13px!important;
    padding:11px 12px!important;
    box-shadow:none!important;
}

.premium-detail-header ~ .main-wrapper .spec-item span:not(.spec-label){
    color:#fff!important;
    font-weight:850!important;
    line-height:1.42!important;
}

.premium-detail-header ~ .main-wrapper .spec-label{
    color:rgba(255,255,255,.64)!important;
    font-size:.59rem!important;
    text-transform:uppercase!important;
    letter-spacing:.5px!important;
}

.premium-detail-header ~ .main-wrapper .descripcion{
    color:rgba(255,255,255,.72)!important;
    line-height:1.65!important;
    border-top:1px dashed rgba(255,255,255,.18)!important;
}

.premium-detail-header ~ .main-wrapper .descripcion strong{
    color:#fff!important;
}

.premium-detail-header ~ .main-wrapper .trust-badge{
    background:rgba(200,164,93,.08)!important;
    color:#fff!important;
    border:1px solid rgba(200,164,93,.24)!important;
    box-shadow:none!important;
}

.premium-detail-header ~ .main-wrapper .trust-badge i{
    color:var(--ch-gold)!important;
}