/* ===========================
   CaribeXCOM — Theme (Light)
   Archivo: cx-theme.css
   =========================== */

html[data-theme="light"]{
    --bg: #ffffff;
    --bg-2: #ffffff;
    --text: #000000;
    --muted: rgba(0,0,0,.72);
    --muted-2: rgba(0,0,0,.55);

    --panel: #ffffff;
    --panel-2: #ffffff;

    --border: rgba(0,0,0,.12);
    --border-2: rgba(0,0,0,.08);

    --grad-panel: none;

    /* NUEVO: gris suave para contenedores en tema claro */
    --soft-panel: #f3f4f6;
    --soft-panel-2: #eef0f3;
}

/* ===========================
   Navbar en claro
   =========================== */
html[data-theme="light"] .cx-nav{
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid rgba(0,0,0,.10);
}

html[data-theme="light"] .cx-nav__link{
    color: rgba(0,0,0,.78);
}
html[data-theme="light"] .cx-nav__link:hover,
html[data-theme="light"] .cx-nav__link.is-active{
    color: #000;
}

/* ===========================
   Contenedores: gris suave (ANTES rojo)
   =========================== */
html[data-theme="light"] .cx-card,
html[data-theme="light"] .cx-hero__media,
html[data-theme="light"] .cx-carousel,
html[data-theme="light"] .cx-logo,
html[data-theme="light"] .cx-esal-item{
    background: var(--soft-panel);
    color: #000;
    border-color: rgba(0,0,0,.10);
}

html[data-theme="light"] .cx-card p,
html[data-theme="light"] .cx-esal-desc{
    color: rgba(0,0,0,.72);
}

/* ===========================
   Botones amarillos
   =========================== */
html[data-theme="light"] .cx-btn{
    background: var(--cx-yellow);
    color: #000;
    border-color: rgba(0,0,0,.12);
}
html[data-theme="light"] .cx-btn--primary{
    background: var(--cx-yellow);
    color: #000;
    box-shadow: 0 16px 40px rgba(0,0,0,.10);
}

/* Inputs en claro (para que no queden oscuros) */
html[data-theme="light"] .cx-input{
    background: #ffffff;
    color: #000000;
    border-color: rgba(0,0,0,.12);
}
html[data-theme="light"] .cx-input::placeholder{
    color: rgba(0,0,0,.45);
}

/* ===========================
   FOOTER — Tema claro
   - Footer blanco
   - Textos negros
   - Redes: gris suave
   - Copy: gris suave (no rojo)
   =========================== */
html[data-theme="light"] .cx-footer{
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,.10);
}

/* Textos footer selectivo */
html[data-theme="light"] .cx-footer .cx-footer__title,
html[data-theme="light"] .cx-footer .cx-footer__links,
html[data-theme="light"] .cx-footer .cx-footer__contact,
html[data-theme="light"] .cx-footer .cx-footer__left,
html[data-theme="light"] .cx-footer .cx-footer__right{
    color: #000000;
}

html[data-theme="light"] .cx-footer a{
    color: #000000;
    opacity: .85;
}
html[data-theme="light"] .cx-footer a:hover{
    opacity: 1;
}

/* Card de redes en GRIS suave (ANTES rojo) */
html[data-theme="light"] .cx-footer .cx-social-card{
    background: var(--soft-panel);
    color: #000;
    border: 1px solid rgba(0,0,0,.10);
}

/* Dentro del card gris, texto negro */
html[data-theme="light"] .cx-footer .cx-social-card *{
    color: #000;
}

/* Botones de redes sobre gris */
html[data-theme="light"] .cx-footer .cx-social-card .cx-social__a{
    border-color: rgba(0,0,0,.14);
    background: rgba(0,0,0,.04);
}
html[data-theme="light"] .cx-footer .cx-social-card .cx-social__a:hover{
    background: rgba(0,0,0,.08);
    border-color: rgba(0,0,0,.22);
}

/* Copy: cinta casi negra + TODO blanco (incluye links) */
html[data-theme="light"] .cx-footer__bottom{
    background: #111316;              /* casi negro */
    border: 1px solid rgba(0,0,0,.35);
    border-radius: 12px;

    color: #ffffff !important;
}

/* Fuerza blanco en cualquier elemento dentro (links incluidos) */
html[data-theme="light"] .cx-footer__bottom,
html[data-theme="light"] .cx-footer__bottom *{
    color: #ffffff !important;
}

/* Links dentro del copy: blanco y hover un poquito más brillante */
html[data-theme="light"] .cx-footer__bottom a{
    color: #ffffff !important;
    text-decoration: underline;
    opacity: .92;
}
html[data-theme="light"] .cx-footer__bottom a:hover{
    opacity: 1;
}
html[data-theme="light"] .cx-footer__bottom,
html[data-theme="light"] .cx-footer__bottom *{
    color: #ffffff !important;
}

/* =========================================
   Mobile nav (hamburguesa) — Tema claro
   ========================================= */

/* Botón hamburguesa */
html[data-theme="light"] .cx-burger{
    background: rgba(255,255,255,.92);
    border-color: rgba(0,0,0,.14);
    backdrop-filter: blur(12px);
}

html[data-theme="light"] .cx-burger span{
    background: rgba(0,0,0,.75);
}

/* Backdrop (oscurece el fondo) */
html[data-theme="light"] .cx-nav__backdrop{
    background: rgba(0,0,0,.25);
}

/* Panel del menú (la caja que se abre) */
@media (max-width: 980px){
    html[data-theme="light"] .cx-nav__links{
        background: rgba(255,255,255,.96);
        border-color: rgba(0,0,0,.14);
        box-shadow: 0 18px 50px rgba(0,0,0,.12);
        backdrop-filter: blur(16px);
    }

    /* Links dentro del panel */
    html[data-theme="light"] .cx-nav__link{
        color: rgba(0,0,0,.82);
        border-color: rgba(0,0,0,.08);
        background: rgba(0,0,0,.03);
    }

    html[data-theme="light"] .cx-nav__link:hover,
    html[data-theme="light"] .cx-nav__link.is-active{
        color: #000;
        background: rgba(0,0,0,.06);
        border-color: rgba(0,0,0,.12);
    }
}

/* Aliados en claro */
html[data-theme="light"] .cx-aliado{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
}
html[data-theme="light"] .cx-aliado__name{
    color: rgba(0,0,0,.82);
}
html[data-theme="light"] .cx-aliado__logo{
    background: #0f172a;
    border-color: rgba(0,0,0,.16);
}
html[data-theme="light"] .cx-aliado__logo img{
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* ===========================
   ADMIN — Tema claro
   =========================== */
html[data-theme="light"] .cx-admin{
    background: #ffffff;
}

html[data-theme="light"] .cx-admin__side{
    background: #ffffff;
    border-right: 1px solid rgba(0,0,0,.10);
}

html[data-theme="light"] .cx-admin__brand{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
    color: #000;
}

html[data-theme="light"] .cx-admin__title,
html[data-theme="light"] .cx-admin__sub{
    color: #000;
    opacity: .9;
}

html[data-theme="light"] .cx-admin__link{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
    color: rgba(0,0,0,.85);
}

html[data-theme="light"] .cx-admin__link:hover{
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.16);
    color: #000;
}

html[data-theme="light"] .cx-admin__side-footer{
    background: rgba(0,0,0,.02);
    border-color: rgba(0,0,0,.10);
}

html[data-theme="light"] .cx-admin__side-footer-label{
    color: rgba(0,0,0,.55);
}

html[data-theme="light"] .cx-admin__main{
    background: #ffffff;
}

html[data-theme="light"] .cx-admin__footer{
    background: rgba(0,0,0,.02);
    border-color: rgba(0,0,0,.10);
}

html[data-theme="light"] .cx-admin__footer-text{
    color: rgba(0,0,0,.72);
}

html[data-theme="light"] .cx-admin__footer-sub{
    color: rgba(0,0,0,.55);
}

html[data-theme="light"] .cx-admin__toggle{
    background: rgba(255,255,255,.94);
    border-color: rgba(0,0,0,.14);
}

html[data-theme="light"] .cx-admin__toggle span{
    background: rgba(0,0,0,.72);
}

html[data-theme="light"] .cx-admin__backdrop{
    background: rgba(0,0,0,.30);
}
/* ===========================
   Admin tables — Tema claro (texto negro)
   =========================== */
html[data-theme="light"] .cx-admin .cx-table thead th{
    color: rgba(0,0,0,.80) !important;
    background: rgba(0,0,0,.12) !important;
    border-bottom: 1px solid rgba(0,0,0,.12) !important;
}

html[data-theme="light"] .cx-admin .cx-table tbody td{
    color: rgba(0,0,0,.82) !important;
    border-bottom: 1px solid rgba(0,0,0,.10) !important;
    background: transparent !important;
}

/* Zebra suave en claro */
html[data-theme="light"] .cx-admin .cx-table tbody tr:nth-child(even) td{
    background: rgba(0,0,0,.03) !important;
}

/* Hover suave */
html[data-theme="light"] .cx-admin .cx-table tbody tr:hover td{
    background: rgba(0,0,0,.06) !important;
}

/* Código en claro */
html[data-theme="light"] .cx-admin code{
    color: rgba(0,0,0,.78);
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.10);
}
/* Admin KPI en claro: texto negro (cards grises) */
html[data-theme="light"] .cx-admin .cx-admin-kpi__label{
    color: rgba(0,0,0,.55) !important;
}

html[data-theme="light"] .cx-admin .cx-admin-kpi__value{
    color: rgba(0,0,0,.88) !important;
}