/* ==============================
   RESPONSIVE - COMPARTIR
============================== */

/* Pantallas grandes */
@media (max-width:1440px){
    .product-share-row{gap:18px}
    .product-share-buttons{gap:8px}
}

/* Laptop */
@media (max-width:1200px){
    .product-share-row{gap:15px}
    .product-share-buttons{gap:7px}
    .share-button{width:38px;height:38px}
    .share-button svg{width:18px;height:18px}
}

/* Tablet horizontal */
@media (max-width:992px){
    .product-share-row{align-items:flex-start;flex-direction:column;gap:14px}
    .product-share-buttons{width:100%;justify-content:flex-start;gap:8px}
    .share-button{width:40px;height:40px}
}

/* Tablet */
@media (max-width:768px){
    .product-share-row{margin-top:20px;padding-top:18px}
    .product-share-title{font-size:12px}
    .product-share-buttons{gap:7px}
    .share-button{width:39px;height:39px;border-radius:8px}
    .share-button svg{width:18px;height:18px}
}

/* Celular grande */
@media (max-width:576px){
    .product-share-row{gap:12px}
    .product-share-buttons{display:grid;grid-template-columns:repeat(5,40px);justify-content:flex-start;gap:8px}
    .share-button{width:40px;height:40px}
}

/* Celular mediano */
@media (max-width:480px){
    .product-share-buttons{grid-template-columns:repeat(4,40px);gap:8px}
    .share-button{width:40px;height:40px}
}

/* Celular pequeño */
@media (max-width:400px){
    .product-share-row{padding-top:15px}
    .product-share-buttons{grid-template-columns:repeat(4,38px);gap:7px}
    .share-button{width:38px;height:38px}
    .share-button svg{width:17px;height:17px}
}

/* Celulares muy pequeños */
@media (max-width:340px){
    .product-share-buttons{grid-template-columns:repeat(3,38px)}
}

@media (max-width: 1500px) {
    .kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .sales-layout {
        grid-template-columns: 1fr;
    }

    .product-detail,
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .home-hero {
        grid-template-columns: 1fr;
    }

    .hero-showcase {
        min-height: 360px;
    }

    .product-grid,
    .benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-filter-panel {
        grid-template-columns: 1fr;
    }

    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-shell {
        grid-template-columns: 1fr;
    }

    .client-sidebar {
        position: static;
    }
}

@media (max-width: 1024px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

    body.sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-main,
    body.sidebar-collapsed .admin-main {
        width: 100%;
        margin-left: 0;
    }

    .mobile-menu-button {
        display: inline-grid;
    }

    .sidebar-toggle {
        display: none;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(0, 0, 0, 0.46);
    }

    body.sidebar-open .sidebar-backdrop {
        display: block;
    }

    body.sidebar-collapsed .admin-sidebar {
        width: var(--sidebar-width);
    }

    body.sidebar-collapsed .admin-brand strong,
    body.sidebar-collapsed .sidebar-nav p,
    body.sidebar-collapsed .sidebar-nav span,
    body.sidebar-collapsed .view-store span,
    body.sidebar-collapsed .admin-mini-profile div {
        display: block;
    }

    body.sidebar-collapsed .sidebar-head,
    body.sidebar-collapsed .sidebar-nav a,
    body.sidebar-collapsed .view-store {
        justify-content: initial;
    }
}

@media (max-width: 820px) {
    .admin-main {
        padding: 14px;
    }

    .admin-topbar,
    .control-hero,
    .module-placeholder {
        align-items: stretch;
        flex-direction: column;
    }

    .topbar-actions,
    .control-actions {
        justify-content: flex-start;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-navbar-inner {
        position: relative;
        min-height: 74px;
    }

    .public-menu-toggle {
        display: grid;
    }

    .public-nav {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-top: 0;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        background: #fff;
        box-shadow: 0 18px 40px rgba(17, 24, 39, 0.12);
    }

    .public-nav.is-open {
        display: flex;
    }

    .public-nav-links {
        align-items: stretch;
        flex-direction: column;
        gap: 2px;
    }

    .public-nav-links a {
        min-height: 44px;
        padding: 0 4px;
    }

    .public-nav-links a::after {
        bottom: 6px;
        right: auto;
        width: 36px;
    }

    .login-button {
        width: 100%;
    }

    .navbar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .account-trigger,
    .navbar-icon-button {
        width: 100%;
    }

    .account-dropdown {
        position: static;
        box-shadow: none;
        margin-top: 8px;
    }

    .home-page {
        width: min(100% - 24px, 1280px);
        padding-top: 28px;
    }

    .home-hero {
        min-height: auto;
        padding: 28px;
    }

    .section-heading,
    .membership-band {
        align-items: flex-start;
        flex-direction: column;
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-page {
        width: min(100% - 24px, 1280px);
        padding-top: 28px;
    }

    .catalog-controls-head {
        align-items: flex-start;
    }

    .filter-mobile-toggle {
        display: inline-flex;
    }

    .catalog-filter-panel {
        display: none;
    }

    .catalog-filter-panel.is-open {
        display: grid;
    }

    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .plans-grid,
    .client-stats,
    .payment-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .admin-sidebar {
        width: min(88vw, var(--sidebar-width));
    }

    .topbar-actions {
        display: grid;
        grid-template-columns: 1fr repeat(3, 42px);
        width: 100%;
    }

    .clock-pill {
        justify-content: center;
    }

    .kpi-grid,
    .shortcut-grid {
        grid-template-columns: 1fr;
    }

    .panel,
    .kpi-card,
    .admin-topbar,
    .control-hero,
    .module-placeholder {
        border-radius: var(--radius-sm);
    }

    .public-shell,
    .site-footer {
        width: min(100% - 24px, 1120px);
    }

    .site-navbar-inner {
        width: min(100% - 24px, 1280px);
    }

    .site-footer {
        flex-direction: column;
    }

    .home-hero {
        padding: 24px;
    }

    .home-hero-copy h1 {
        font-size: clamp(2.35rem, 12vw, 3.35rem);
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-showcase {
        min-height: 300px;
    }

    .kit-card-main {
        inset: 34px 24px auto;
        min-height: 204px;
    }

    .kit-card-small {
        right: 14px;
        bottom: 18px;
        width: 154px;
    }

    .kit-ribbon {
        left: 16px;
        bottom: 18px;
        font-size: 0.78rem;
    }

    .category-grid,
    .product-grid,
    .product-grid-compact,
    .catalog-grid,
    .benefit-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .catalog-hero {
        padding: 24px;
    }

    .catalog-search {
        min-height: 54px;
    }

    .filter-selects {
        grid-template-columns: 1fr;
    }

    .catalog-preview {
        min-height: 198px;
    }

    .catalog-card-foot {
        align-items: stretch;
        flex-direction: column;
    }

    .design-link {
        width: 100%;
    }

    .category-card {
        min-height: 132px;
    }

    .product-preview {
        min-height: 190px;
    }

    .site-footer-full {
        width: 100%;
    }

    .footer-grid,
    .footer-bottom {
        width: min(100% - 24px, 1280px);
    }

    .form-grid,
    .file-info,
    .product-protection-grid,
    .payment-choice-grid,
    .plans-grid,
    .client-stats {
        grid-template-columns: 1fr;
    }

    .product-detail-page {
        width: min(100% - 24px, 1180px);
        padding-top: 24px;
    }

    .product-detail {
        padding: 14px;
    }

    .product-main-image {
        min-height: 260px;
    }

    .product-detail-info {
        padding: 20px;
    }

    .product-share-row {
        flex-wrap: wrap;
    }

    .product-share-row span {
        flex: 1 0 100%;
    }


    .checkout-method-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-choice-card {
        grid-template-columns: 22px auto minmax(0, 1fr) 20px;
    }

    .membership-status-card,
    .membership-account-head {
        align-items: stretch;
        flex-direction: column;
    }

    .membership-status-card > svg {
        align-self: flex-start;
    }

    .cart-item {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .cart-item form {
        grid-column: 1 / -1;
    }

    .product-actions .button,
    .client-row .button {
        width: 100%;
    }

    .client-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .pagination-nav {
        align-items: stretch;
        flex-direction: column;
    }

    .pagination-nav div {
        justify-content: center;
    }
}

/* =====================================================
   RESPONSIVE - INDEX MODERNO
===================================================== */
@media (max-width:1400px){
    .home-catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .home-hero-modern{grid-template-columns:minmax(0,1fr) minmax(420px,.9fr)}
}

@media (max-width:1120px){
    .home-page-modern{width:min(100% - 30px,1580px)}
    .home-hero-modern{grid-template-columns:minmax(0,1fr) minmax(370px,.82fr);min-height:58vh;padding:42px}
    .hero-product-carousel{min-height:320px}
    .home-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:860px){
    .home-page-modern{width:min(100% - 24px,1580px);padding-top:16px}
    .home-hero-modern{grid-template-columns:1fr;gap:18px;min-height:auto;max-height:none;padding:34px}
    .home-hero-copy-modern{text-align:center;margin:0 auto}
    .home-hero-copy-modern>p:not(.eyebrow){margin:0 auto}
    .hero-actions-modern{justify-content:center}
    .hero-product-carousel{min-height:300px}
    .home-search-section{margin-top:18px}
    .home-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:560px){
    .home-page-modern{width:min(100% - 18px,1580px);padding-top:10px}
    .home-hero-modern{padding:26px 18px;border-radius:12px}
    .home-hero-copy-modern h1{font-size:clamp(2.25rem,12vw,3.4rem)}
    .hero-actions-modern .button{width:100%}
    .hero-product-carousel{min-height:235px}
    .hero-product-slide{width:min(62vw,235px)}
    .hero-carousel-arrow{width:34px;height:34px;font-size:1.5rem}
    .hero-carousel-prev{left:-2px}
    .hero-carousel-next{right:-2px}
    .home-search-box{min-height:52px;padding:0 14px}
    .home-categories-section{margin-top:12px}
    .home-category-chip{min-height:38px;padding:0 12px;font-size:.8rem}
    .home-catalog-section{margin-top:22px}
    .home-catalog-heading{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:13px}
    .home-catalog-grid{gap:10px}
    .home-product-body{padding:11px}
    .home-product-body h3{min-height:38px;font-size:.86rem}
    .home-product-foot{align-items:stretch;flex-direction:column}
    .home-product-link{width:100%}
}

@media (max-width:380px){
    .home-catalog-grid{grid-template-columns:1fr}
    .hero-product-carousel{min-height:215px}
}
@media (max-width:1350px){
    .catalog-page-products .catalog-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media (max-width:1050px){
    .catalog-page-products .catalog-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:820px){
    .catalog-page-products .catalog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:520px){
    .catalog-page-products .catalog-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width:1200px){
    .home-catalog-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:820px){
    .home-catalog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:520px){
    .home-catalog-grid{
        grid-template-columns:1fr;
    }
}

/* TABLET */
@media(max-width:820px){
    body .home-page-modern,
    body .catalog-page,
    body .catalog-page-products,
    body .membership-page,
    body .contact-page{
        width:min(100% - 24px,1580px);
    }
}

/* CELULAR */
@media(max-width:520px){
    body .home-page-modern,
    body .catalog-page,
    body .catalog-page-products,
    body .membership-page,
    body .contact-page{
        width:min(100% - 20px,1580px);
    }
}

/* =====================================================
   FORMATOS DEL PRODUCTO - MODO OSCURO
===================================================== */

html[data-theme="dark"] .format-list span{
    color:#ddd6fe;
    background:rgba(139,92,246,.20);
    border:1px solid rgba(167,139,250,.45);
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

html[data-theme="dark"] .format-list span:hover{
    color:#ffffff;
    background:rgba(124,58,237,.38);
    border-color:#a78bfa;
}