/* =====================================================
   COMEX RYD - explorador.css
   Barra lateral de RUBROS y SUBRUBROS (20%)
   + panel de productos (80%)
   + productos destacados de la semana
   -----------------------------------------------------
   Archivo independiente: no toca el css existente.
   ===================================================== */

.explorador-section{
    padding:90px 6% 40px 6%;
}

.explorador{
    display:grid;
    grid-template-columns:20% 1fr;
    gap:30px;

    align-items:start;

    margin-top:35px;
}

/* ---------- Barra lateral ---------- */

.explorador-sidebar{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;

    padding:18px 14px;

    max-height:70vh;
    overflow-y:auto;

    position:sticky;
    top:20px;
}

html.tema-claro .explorador-sidebar{
    background:#ffffff;
    border-color:rgba(11,18,32,.12);
    box-shadow:0 6px 20px rgba(11,18,32,.06);
}

.explorador-sidebar h3{
    font-size:.95rem;
    letter-spacing:1px;

    margin-bottom:14px;
    padding-bottom:10px;

    border-bottom:1px solid rgba(255,255,255,.10);
}

html.tema-claro .explorador-sidebar h3{
    border-bottom-color:rgba(11,18,32,.12);
}

.rubro{
    border-bottom:1px solid rgba(255,255,255,.06);
}

html.tema-claro .rubro{
    border-bottom-color:rgba(11,18,32,.08);
}

.rubro > summary{
    list-style:none;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    padding:11px 6px;

    font-size:.88rem;
    font-weight:600;

    color:inherit;

    transition:.2s ease;
}

.rubro > summary::-webkit-details-marker{
    display:none;
}

.rubro > summary:hover{
    color:#F57C00;
}

.rubro > summary .flecha{
    font-size:.7rem;
    opacity:.6;
    transition:.2s ease;
}

.rubro[open] > summary{
    color:#F57C00;
}

.rubro[open] > summary .flecha{
    transform:rotate(90deg);
}

.subrubros{
    list-style:none;
    margin:0 0 10px 0;
    padding:0 0 0 8px;
}

.subrubros li{
    margin:0;
}

.subrubros a{
    display:block;

    padding:7px 8px;

    font-size:.8rem;

    color:#cbd5e1;

    text-decoration:none;

    border-left:2px solid transparent;
    border-radius:6px;

    transition:.2s ease;
}

html.tema-claro .subrubros a{
    color:#48566b;
}

.subrubros a:hover{
    background:rgba(245,124,0,.10);
    border-left-color:#F57C00;
    color:#F57C00;
}

.subrubros a.activo{
    background:rgba(245,124,0,.16);
    border-left-color:#F57C00;
    color:#F57C00;
    font-weight:600;
}

/* ---------- Panel derecho ---------- */

.explorador-panel{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;

    padding:30px;

    min-height:420px;
}

.explorador-panel .panel-titulo{
    font-size:1.5rem;
    margin-bottom:6px;
}

.explorador-panel .panel-ruta{
    font-size:.8rem;
    letter-spacing:1px;
    color:#F57C00;
    margin-bottom:20px;
}

.panel-vacio{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    gap:10px;

    padding:70px 20px;

    color:#cbd5e1;
}

html.tema-claro .panel-vacio{
    color:#48566b;
}

.panel-vacio .icono{
    font-size:2.2rem;
    opacity:.6;
}

/* ---------- Grilla de productos ---------- */

.productos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:20px;
}

.producto-item{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;

    overflow:hidden;

    text-decoration:none;
    color:inherit;

    transition:.25s ease;
}

html.tema-claro .producto-item{
    background:#ffffff;
    border-color:rgba(11,18,32,.12);
}

.producto-item:hover{
    transform:translateY(-5px);
    border-color:#F57C00;
    box-shadow:0 12px 28px rgba(245,124,0,.18);
}

.producto-item .imagen{
    width:100%;
    height:150px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.05);

    overflow:hidden;
}

.producto-item .imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.producto-item .imagen span{
    font-size:.75rem;
    color:#94a3b8;
    letter-spacing:1px;
}

.producto-item .datos{
    padding:14px;
}

.producto-item .datos h4{
    font-size:.95rem;
    margin-bottom:6px;
}

.producto-item .datos p{
    font-size:.78rem;
    color:#cbd5e1;
    line-height:1.5;
    margin:0;
}

html.tema-claro .producto-item .datos p{
    color:#48566b;
}

.producto-item .etiqueta{
    display:inline-block;

    margin-top:10px;

    font-size:.68rem;
    letter-spacing:1px;

    padding:4px 9px;

    border-radius:20px;

    background:rgba(245,124,0,.15);
    color:#F57C00;
}

/* ---------- Destacados de la semana ---------- */

.destacados-section{
    padding:60px 6% 90px 6%;
}

.destacados-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:22px;

    margin-top:35px;
}

/* Cada tarjeta ocupa un ancho fijo por fila segun el espacio disponible:
   4 por fila en pantallas grandes, 3, 2 o 1 en pantallas menores.
   Al usar flex + justify-content:center, la ultima fila incompleta
   (por ejemplo 2 tarjetas) queda centrada en lugar de alineada a la izquierda. */
.destacados-grid > *{
    flex:0 1 calc((100% - 2 * 22px) / 3);
    max-width:calc((100% - 2 * 22px) / 3);
    min-width:240px;
}

@media (max-width:900px){
    .destacados-grid > *{
        flex-basis:calc((100% - 22px) / 2);
        max-width:calc((100% - 22px) / 2);
    }
}

@media (max-width:600px){
    .destacados-grid > *{
        flex-basis:100%;
        max-width:100%;
        min-width:0;
    }
}

.destacado-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;

    overflow:hidden;

    text-decoration:none;
    color:inherit;

    transition:.25s ease;
}

.destacado-card:hover{
    transform:translateY(-6px);
    border-color:#F57C00;
    box-shadow:0 14px 30px rgba(245,124,0,.20);
}

.destacado-card .imagen{
    height:160px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.05);
}

.destacado-card .imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.destacado-card .imagen span{
    font-size:.72rem;
    letter-spacing:1px;
    color:#94a3b8;
}

.destacado-card .datos{
    padding:16px;
}

.destacado-card .datos .rubro-tag{
    font-size:.68rem;
    letter-spacing:1px;
    color:#F57C00;
    display:block;
    margin-bottom:8px;
}

.destacado-card .datos h4{
    font-size:1rem;
    margin-bottom:8px;
}

.destacado-card .datos p{
    font-size:.8rem;
    color:#cbd5e1;
    line-height:1.6;
    margin:0;
}

html.tema-claro .destacado-card .datos p{
    color:#48566b;
}

.aviso-editable{
    margin-top:22px;

    font-size:.78rem;
    color:#94a3b8;
}

/* ---------- Responsive ---------- */

@media(max-width:900px){

    .explorador{
        grid-template-columns:1fr;
    }

    .explorador-sidebar{
        position:relative;
        top:0;
        max-height:none;
    }

    .explorador-section,
    .destacados-section{
        padding-left:22px;
        padding-right:22px;
    }

    .explorador-panel{
        padding:20px;
    }
}

/* =====================================================
   BANNER DEL BUQUE (solo arriba, no fondo fijo)
   Se usa en catalogos.php, categoria.php, subrubro.php
   y producto.php
   ===================================================== */

.banner-buque{
    position:relative;
    width:100%;
    height:42vh;
    min-height:260px;
    max-height:430px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.banner-buque.banner-compacto{
    height:32vh;
    min-height:220px;
    max-height:330px;
}

.banner-buque .banner-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:opacity 1s ease;
    animation:banner-zoom 22s ease-in-out infinite alternate;
}

@keyframes banner-zoom{
    from{transform:scale(1);}
    to{transform:scale(1.08);}
}

/* Tema oscuro: se ve el buque de noche */
.banner-buque .banner-dia{opacity:0;}
.banner-buque .banner-noche{opacity:1;}

/* Tema claro: se ve el buque de dia */
html.tema-claro .banner-buque .banner-dia{opacity:1;}
html.tema-claro .banner-buque .banner-noche{opacity:0;}

.banner-degradado{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(3,7,18,.25) 0%,rgba(3,7,18,.55) 60%,rgba(3,7,18,.85) 100%);
}

html.tema-claro .banner-degradado{
    background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.35) 55%,rgba(255,255,255,.92) 100%);
}

.banner-contenido{
    position:relative;
    z-index:2;
    text-align:center;
    padding:0 6%;
}

.banner-contenido .logo{
    height:64px;
    width:auto;
    margin-bottom:14px;
}

.banner-titulo{
    font-size:2.4rem;
    font-weight:800;
    letter-spacing:1px;
    color:#ffffff;
    margin:0;
    text-shadow:0 4px 18px rgba(0,0,0,.45);
}

html.tema-claro .banner-titulo{
    color:#0b1220;
    text-shadow:none;
}

.banner-lema{
    margin-top:8px;
    font-size:.8rem;
    letter-spacing:3px;
    color:#e2e8f0;
}

html.tema-claro .banner-lema{color:#3d4a5c;}

.banner-volver{
    display:inline-block;
    margin-top:16px;
    padding:9px 18px;
    border-radius:30px;
    font-size:.78rem;
    font-weight:600;
    text-decoration:none;
    color:#ffffff;
    background:rgba(245,124,0,.9);
}

.banner-volver:hover{background:#F57C00;}

/* =====================================================
   LAYOUT ESTILO ALIBABA
   Barra lateral a la izquierda + contenido a la derecha
   ===================================================== */

.tienda{
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:28px;
    align-items:start;
    padding:34px 5% 70px;
}

.tienda-sidebar{
    position:sticky;
    top:16px;
    max-height:82vh;
}

.tienda-panel{min-width:0;}

.sidebar-buscador{margin-bottom:12px;}

.sidebar-buscador input{
    width:100%;
    padding:9px 11px;
    font-size:.8rem;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05);
    color:inherit;
    font-family:inherit;
}

html.tema-claro .sidebar-buscador input{
    border-color:rgba(11,18,32,.16);
    background:#f7f9fc;
}

.ver-rubro{
    display:inline-block;
    margin:0 0 12px 10px;
    font-size:.74rem;
    font-weight:600;
    text-decoration:none;
    color:#F57C00;
}

/* ---------- Cabecera del panel ---------- */

.tienda-ruta{
    font-size:.78rem;
    opacity:.75;
    margin-bottom:6px;
}

.tienda-ruta a{color:inherit;text-decoration:none;}
.tienda-ruta a:hover{color:#F57C00;}

.tienda-titulo{
    font-size:1.9rem;
    font-weight:800;
    margin:0 0 6px;
}

.tienda-bajada{
    font-size:.9rem;
    opacity:.8;
    margin:0 0 20px;
}

.tienda-buscador{
    display:flex;
    gap:10px;
    margin-bottom:22px;
}

.tienda-buscador input{
    flex:1;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05);
    color:inherit;
    font-family:inherit;
}

html.tema-claro .tienda-buscador input{
    border-color:rgba(11,18,32,.16);
    background:#ffffff;
}

.tienda-buscador button{
    padding:12px 22px;
    border:none;
    border-radius:10px;
    background:#F57C00;
    color:#fff;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
}

/* ---------- Grilla de tarjetas ---------- */

.tienda-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
    gap:18px;
}

.tienda-card{
    display:block;
    text-decoration:none;
    color:inherit;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    overflow:hidden;
    background:rgba(255,255,255,.04);
    transition:.2s ease;
}

html.tema-claro .tienda-card{
    background:#ffffff;
    border-color:rgba(11,18,32,.10);
    box-shadow:0 6px 18px rgba(11,18,32,.05);
}

.tienda-card:hover{
    transform:translateY(-4px);
    border-color:#F57C00;
}

.tienda-card .imagen{
    height:165px;
    background:rgba(255,255,255,.06);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

html.tema-claro .tienda-card .imagen{background:#f2f5f9;}

.tienda-card .imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.tienda-card .imagen span{
    font-size:.7rem;
    letter-spacing:1px;
    opacity:.5;
}

.tienda-card .datos{padding:13px 14px 16px;}

.tienda-card .datos h4{
    font-size:.92rem;
    font-weight:700;
    margin:0 0 6px;
    line-height:1.35;
}

.tienda-card .datos p{
    font-size:.78rem;
    margin:0;
    opacity:.75;
    line-height:1.5;
}

.tienda-card .precio{
    display:block;
    margin-top:9px;
    font-size:.9rem;
    font-weight:700;
    color:#F57C00;
}

.tienda-vacio{
    border:1px dashed rgba(255,255,255,.18);
    border-radius:14px;
    padding:50px 26px;
    text-align:center;
}

html.tema-claro .tienda-vacio{border-color:rgba(11,18,32,.18);}

/* ---------- Paginacion ---------- */

.tienda-paginacion{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    margin-top:32px;
}

.tienda-paginacion a{
    padding:9px 14px;
    border-radius:9px;
    font-size:.8rem;
    text-decoration:none;
    color:inherit;
    border:1px solid rgba(255,255,255,.14);
}

html.tema-claro .tienda-paginacion a{border-color:rgba(11,18,32,.14);}

.tienda-paginacion a.active,
.tienda-paginacion a:hover{
    background:#F57C00;
    border-color:#F57C00;
    color:#fff;
}

/* =====================================================
   FICHA DE PRODUCTO: galeria 4 imagenes + 1 video + PDF
   ===================================================== */

.ficha{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:38px;
    align-items:start;
}

.galeria-visor{
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    overflow:hidden;
    background:rgba(255,255,255,.04);
    aspect-ratio:4/3;
    display:flex;
    align-items:center;
    justify-content:center;
}

html.tema-claro .galeria-visor{
    background:#ffffff;
    border-color:rgba(11,18,32,.10);
}

.galeria-visor img,
.galeria-visor video,
.galeria-visor iframe{
    width:100%;
    height:100%;
    object-fit:cover;
    border:0;
    display:block;
}

.galeria-miniaturas{
    display:flex;
    gap:10px;
    margin-top:12px;
    flex-wrap:wrap;
}

.miniatura{
    position:relative;
    width:78px;
    height:66px;
    border-radius:10px;
    overflow:hidden;
    border:2px solid transparent;
    background:rgba(255,255,255,.06);
    cursor:pointer;
    padding:0;
}

html.tema-claro .miniatura{background:#f2f5f9;}

.miniatura img{width:100%;height:100%;object-fit:cover;display:block;}

.miniatura.activa{border-color:#F57C00;}

.miniatura .icono-play{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.45);
    color:#fff;
    font-size:1.1rem;
}

.ficha-datos h1{
    font-size:1.8rem;
    font-weight:800;
    margin:0 0 10px;
    line-height:1.25;
}

.ficha-precio{
    font-size:1.5rem;
    font-weight:800;
    color:#F57C00;
    margin:12px 0 4px;
}

.ficha-precio small{
    display:block;
    font-size:.7rem;
    letter-spacing:1px;
    opacity:.7;
    color:inherit;
    font-weight:600;
}

.ficha-acciones{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:22px 0 8px;
}

.btn-wsp,
.btn-catalogo{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 22px;
    border-radius:11px;
    font-size:.85rem;
    font-weight:700;
    text-decoration:none;
}

.btn-wsp{background:#F57C00;color:#fff;}
.btn-wsp:hover{background:#e06f00;}

.btn-catalogo{
    background:transparent;
    border:1px solid #F57C00;
    color:#F57C00;
}

.btn-catalogo:hover{background:rgba(245,124,0,.12);}

.ficha-caja{
    margin-top:22px;
    padding:18px 20px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
}

html.tema-claro .ficha-caja{
    background:#ffffff;
    border-color:rgba(11,18,32,.10);
    box-shadow:0 6px 18px rgba(11,18,32,.05);
}

.ficha-caja h3{font-size:.95rem;margin:0 0 12px;}

.ficha-caja ul{margin:0;padding-left:18px;font-size:.83rem;line-height:1.9;}

.ficha-especificaciones{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:10px;
    font-size:.83rem;
}

.ficha-especificaciones div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:9px 12px;
    border-radius:9px;
    background:rgba(255,255,255,.05);
}

html.tema-claro .ficha-especificaciones div{background:#f5f7fb;}

@media (max-width:1000px){
    .tienda{grid-template-columns:1fr;}
    .tienda-sidebar{position:relative;max-height:none;}
    .ficha{grid-template-columns:1fr;}
}


/* ================================================================
   Disponibilidad de productos (contadores dinamicos)
================================================================ */

.rubro-contador,
.sub-contador {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    font-size: .68rem;
    font-weight: 800;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 999px;
}

.rubro-contador.ok,
.sub-contador.ok {
    background: rgba(46, 160, 67, .16);
    color: #2EA043;
}

.rubro-contador.vacio,
.sub-contador.vacio {
    background: rgba(140, 140, 140, .16);
    opacity: .7;
}

.tienda-sidebar .subrubros a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* =====================================================
   GALERIA: miniaturas de video (YouTube / TikTok / Instagram)
   ===================================================== */

.miniatura-video .icono-play{
    align-items:flex-start;
    padding-top:10px;
}

.miniatura-video .etiqueta-video{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    padding:3px 4px;

    background:rgba(0,0,0,.72);
    color:#ffffff;

    font-size:.58rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    text-align:center;
}

/* La galeria acepta todas las imagenes que se carguen */
.galeria-miniaturas{
    max-height:none;
    overflow:visible;
}


/* =====================================================
   AJUSTES PARA TELÉFONO (banner, sidebar y destacados)
   ===================================================== */

@media (max-width:768px){

    .banner-buque,
    .banner-buque.banner-compacto{
        height:auto;
        min-height:0;
        max-height:none;
        padding:26px 16px;
    }

    .banner-contenido .logo{
        height:44px;
        margin-bottom:10px;
    }

    .banner-titulo{
        font-size:1.5rem;
        letter-spacing:.5px;
    }

    .banner-lema{
        font-size:.66rem;
        letter-spacing:1.5px;
    }

    .banner-volver{
        margin-top:12px;
        font-size:.72rem;
        padding:8px 14px;
    }

    .explorador-section{
        padding:40px 18px 20px;
    }

    .explorador{
        grid-template-columns:1fr;
        gap:18px;
        margin-top:20px;
    }

    .explorador-sidebar{
        position:relative;
        top:0;
        max-height:58vh;
        padding:12px 10px;
    }

    .rubro > summary{
        padding:10px 4px;
        font-size:.82rem;
    }

    .subrubros a{
        padding:6px 8px;
        font-size:.76rem;
    }

    .destacados-section{
        padding:40px 18px 60px;
    }

    .destacados-grid{
        gap:16px;
        margin-top:22px;
    }

    .destacados-grid > *{
        flex-basis:100%;
        max-width:100%;
        min-width:0;
    }

}


/* ==================================================
   PANEL DE RUBROS COLAPSABLE (compacto en teléfono)
   ================================================== */

.rubros-panel-toggle{
    display:none;
}

.rubros-panel > summary::-webkit-details-marker{ display:none; }

@media(max-width:1024px){

    .rubros-panel{
        margin-bottom:26px;
    }

    .rubros-panel-toggle{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        cursor:pointer;
        list-style:none;
        padding:13px 16px;
        border-radius:12px;
        border:1px solid rgba(245,124,0,.45);
        background:rgba(245,124,0,.10);
        color:#F57C00;
        font-weight:800;
        font-size:.85rem;
        letter-spacing:.5px;
    }

    .rubros-panel[open] .rubros-panel-flecha{
        transform:rotate(180deg);
    }

    .rubros-panel-flecha{
        transition:.2s ease;
    }

    .rubros-panel .explorador-sidebar{
        margin-top:10px;
        max-height:60vh;
        padding:12px 10px;
    }

    .rubros-panel .explorador-sidebar h3{
        display:none;
    }

    .catalogo-layout .sidebar-categorias{
        height:auto;
    }

}