/* =====================================================
   COMEX RYD - tema.css
   Tema Claro / Tema Oscuro
   -----------------------------------------------------
   Este archivo NO modifica la estructura existente.
   Se carga DESPUES del css de cada pagina y solamente
   sobreescribe colores cuando el tema claro esta activo.

   Uso:
   <link rel="stylesheet" href="tema.css">   (o ../tema.css)
   <script src="tema.js" defer></script>
   ===================================================== */

/* ---------- Variables del tema oscuro (por defecto) ---------- */

:root{
    --tema-fondo:#000000;
    --tema-fondo-2:#000000;
    --tema-texto:#ffffff;
    --tema-gris:#cbd5e1;
    --tema-card:rgba(255,255,255,.04);
    --tema-borde:rgba(255,255,255,.08);
    --tema-overlay:rgba(0,0,0,.45);
    --tema-principal:#F57C00;
}

/* ---------- Tema claro ---------- */

html.tema-claro{
    --tema-fondo:#ffffff;
    --tema-fondo-2:#ffffff;
    --tema-texto:#0b1220;
    --tema-gris:#48566b;
    --tema-card:rgba(11,18,32,.04);
    --tema-borde:rgba(11,18,32,.12);
    --tema-overlay:rgba(255,255,255,.55);

    /* variables usadas por catalogos.css / categoria.css / subrubro.css / producto.css */
    --fondo:#ffffff;
    --fondo-2:#ffffff;
    --texto:#0b1220;
    --gris:#48566b;
    --card:rgba(11,18,32,.04);
    --borde:rgba(11,18,32,.12);
}

html.tema-claro body{
    background:var(--tema-fondo);
    color:var(--tema-texto);
}

/* Fondo (imagen del buque) mas suave en modo claro */
html.tema-claro .video-fondo,
html.tema-claro .imagen-fondo{
    filter:brightness(1.05) saturate(1.05);
}

html.tema-claro .overlay{
    background:var(--tema-overlay);
}

/* Textos genericos */
html.tema-claro h1,
html.tema-claro h2,
html.tema-claro h3,
html.tema-claro h4,
html.tema-claro strong{
    color:var(--tema-texto);
}

html.tema-claro p,
html.tema-claro li,
html.tema-claro span,
html.tema-claro label,
html.tema-claro .section-subtitle{
    color:var(--tema-gris);
}

/* Tarjetas y bloques translucidos */
html.tema-claro .opcion,
html.tema-claro .servicio-card,
html.tema-claro .service-card,
html.tema-claro .stat-card,
html.tema-claro .process-card,
html.tema-claro .product-card,
html.tema-claro .industrial-card,
html.tema-claro .card,
html.tema-claro .destacado-card,
html.tema-claro .explorador-panel{
    background:#ffffff;
    border-color:var(--tema-borde);
    color:var(--tema-texto);
    box-shadow:0 6px 20px rgba(11,18,32,.06);
}

html.tema-claro .opcion{
    color:var(--tema-texto);
}

html.tema-claro .opcion:hover,
html.tema-claro .service-card:hover,
html.tema-claro .servicio-card:hover{
    color:#ffffff;
}

html.tema-claro .opcion:hover{
    background:var(--tema-principal);
    border-color:var(--tema-principal);
}

/* Divisores */
html.tema-claro .section-divider{
    background:linear-gradient(90deg,transparent,rgba(11,18,32,.18),transparent);
}

/* Formularios */
html.tema-claro input,
html.tema-claro textarea,
html.tema-claro select{
    background:#ffffff;
    color:var(--tema-texto);
    border:1px solid var(--tema-borde);
}

html.tema-claro input::placeholder,
html.tema-claro textarea::placeholder{
    color:#8b97a8;
}

/* Footer */
html.tema-claro footer,
html.tema-claro .footer{
    background:var(--tema-fondo-2);
    color:var(--tema-gris);
}

html.tema-claro .footer a,
html.tema-claro footer a{
    color:var(--tema-gris);
}

html.tema-claro .footer a:hover,
html.tema-claro footer a:hover{
    color:var(--tema-principal);
}

/* Paginacion */
html.tema-claro .pagination a{
    background:#ffffff;
    color:var(--tema-texto);
    border:1px solid var(--tema-borde);
}

html.tema-claro .pagination a.active{
    background:var(--tema-principal);
    color:#ffffff;
    border-color:var(--tema-principal);
}

/* =====================================================
   BOTON DE CAMBIO DE TEMA
   ===================================================== */

.tema-toggle{
    position:fixed;
    right:30px;
    bottom:112px;

    width:56px;
    height:56px;

    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;

    background:rgba(15,23,42,.75);
    color:#ffffff;

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

    cursor:pointer;

    backdrop-filter:blur(8px);

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    z-index:9999;

    transition:.25s ease;
}

.tema-toggle:hover{
    transform:scale(1.08);
    border-color:var(--tema-principal);
    color:var(--tema-principal);
}

html.tema-claro .tema-toggle{
    background:#ffffff;
    color:#0b1220;
    border-color:rgba(11,18,32,.15);
}

.tema-toggle .icono-sol{display:none;}
.tema-toggle .icono-luna{display:block;}

html.tema-claro .tema-toggle .icono-sol{display:block;}
html.tema-claro .tema-toggle .icono-luna{display:none;}

@media(max-width:900px){
    .tema-toggle{
        right:22px;
        bottom:100px;
        width:48px;
        height:48px;
    }
}

/* ---------- Ajustes finos del tema claro ---------- */

html.tema-claro .overlay{
    background:rgba(255,255,255,.30);
}

/* El logo es blanco: en tema claro se le agrega contraste */
html.tema-claro .logo{
    filter:drop-shadow(0 2px 8px rgba(11,18,32,.65));
}

html.tema-claro .hero footer,
html.tema-claro body > footer{
    background:transparent;
    color:#0b1220;
    text-shadow:0 1px 4px rgba(255,255,255,.8);
}

html.tema-claro .hero h1,
html.tema-claro .hero p,
html.tema-claro .hero-content h1,
html.tema-claro .hero-content p,
html.tema-claro .volver-inicio{
    color:#0b1220;
    text-shadow:0 1px 6px rgba(255,255,255,.75);
}

/* =====================================================
   TEMA CLARO: pantalla blanca con letras negras (INICIO)
   ===================================================== */

html.tema-claro{
    --tema-fondo:#ffffff;
    --tema-fondo-2:#f6f7fa;
}

html.tema-claro body{
    background:#ffffff;
    color:#0b1220;
}

html.tema-claro .hero-inicio{
    background:#ffffff;
}

/* En tema claro el degradado del banner se aclara hacia el blanco */
html.tema-claro .banner-degradado{
    background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(255,255,255,0) 45%,#ffffff 100%);
}

html.tema-claro .banner-lema{
    color:#0b1220;
    text-shadow:0 1px 6px rgba(255,255,255,.9);
}

html.tema-claro .banner-contenido .logo{
    filter:drop-shadow(0 2px 10px rgba(11,18,32,.55));
}

/* Botones del inicio: blanco con letras negras y acento naranja */
html.tema-claro .opcion{
    background:#ffffff;
    color:#0b1220;
    border:1px solid rgba(11,18,32,.14);
    box-shadow:0 8px 24px rgba(11,18,32,.08);
}

html.tema-claro .opcion:hover{
    background:#F57C00;
    border-color:#F57C00;
    color:#ffffff;
}

html.tema-claro body > footer{
    color:#48566b;
    text-shadow:none;
}


/* =====================================================
   BUQUE ARRIBA + PANTALLA SOLIDA HACIA ABAJO
   -----------------------------------------------------
   El banner del buque (dia / noche) queda SIEMPRE en la
   parte de arriba. Al hacer scroll, todo lo que sigue
   (opciones, catalogos, importaciones, exportaciones,
   secciones y footer) queda sobre un fondo solido:
   BLANCO en tema claro y NEGRO en tema oscuro.
   ===================================================== */

:root{
    --fondo-solido:#000000;
    --texto-solido:#ffffff;
}

html.tema-claro{
    --fondo-solido:#ffffff;
    --texto-solido:#0b1220;
}

html,
body{
    background:var(--fondo-solido);
    color:var(--texto-solido);
}

/* El buque no se mueve del lugar: queda arriba de todo */
.banner-buque{
    position:relative;
    z-index:1;
}

/* El degradado del banner termina en el color solido de la pagina */
.banner-degradado{
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.30) 0%,
        rgba(0,0,0,.10) 45%,
        var(--fondo-solido) 100%
    );
}

html.tema-claro .banner-degradado{
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.10) 0%,
        rgba(255,255,255,.05) 45%,
        var(--fondo-solido) 100%
    );
}

/* Todo lo que va debajo del buque: fondo solido, sin imagen de fondo */
.hero,
.hero-inicio,
.hero-importaciones,
main,
.tienda,
.seccion,
.contenido,
.contenedor{
    background:var(--fondo-solido);
}

/* Ya no se usa imagen/video de fondo fijo detras del contenido */
body > .video-fondo,
body > .imagen-fondo,
body > .overlay{
    display:none !important;
}

footer,
.footer{
    background:var(--fondo-solido);
    color:var(--texto-solido);
}

/* En tema oscuro las tarjetas se despegan del negro puro */
html:not(.tema-claro) .opcion,
html:not(.tema-claro) .servicio-card,
html:not(.tema-claro) .service-card,
html:not(.tema-claro) .stat-card,
html:not(.tema-claro) .process-card,
html:not(.tema-claro) .product-card,
html:not(.tema-claro) .card,
html:not(.tema-claro) .destacado-card,
html:not(.tema-claro) .explorador-panel{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.14);
}

/* Textos generales sobre el fondo solido */
html:not(.tema-claro) body,
html:not(.tema-claro) h1,
html:not(.tema-claro) h2,
html:not(.tema-claro) h3,
html:not(.tema-claro) h4{
    color:#ffffff;
}