/**
 * Template CSS - Radiocanal
 * 
 * Recreación moderna profesional basada en análisis Legacy RC.
 * - Variables CSS para colores RC
 * - HTML5 semántico
 * - Mobile-first responsive
 * - Sin dependencias jQuery
 * 
 * @version 2.0.0
 * @date 2026-03-26
 */

/* ============================================
   VARIABLES CSS - COLORES RADIOCANAL
   ============================================ */

:root {
    /* === COLORES PRINCIPALES DEL LOGO === */
    --rc-azul-logo: #0077CC;           /* Azul "radio" del logo */
    --rc-rojo-logo: #E63946;           /* Rojo "canal" del logo */
    
    /* === COLORES BOTONES === */
    --rc-rojo-radio: #FF6347;          /* Botón FM 91.5 (coral/tomate) */
    --rc-azul-tv: #2196F3;             /* Botón TV EN VIVO (azul celeste) */
    
    /* === PALETA EXTENDIDA === */
    --rc-azul-oscuro: #004D99;         /* Azul oscuro para textos/hover */
    --rc-azul-claro: #66B3FF;          /* Azul claro para fondos */
    --rc-rojo-oscuro: #C1121F;         /* Rojo oscuro para hover */
    --rc-rojo-claro: #FF8A8A;          /* Rojo claro para fondos */
    
    /* === TONOS COMPLEMENTARIOS === */
    --rc-naranja: #FF6B35;             /* Naranja para acentos */
    --rc-cyan: #00B4D8;                /* Cyan para elementos especiales */
    
    /* === NEUTRALES === */
    --rc-gris-claro: #F5F5F5;          /* Fondo barras */
    --rc-gris-medio-claro: #ebebebf5;    /* Fondo */
    --rc-gris-medio: #666666;          /* Texto secundario */
    --rc-gris-oscuro: #333333;         /* Texto principal */
    --rc-divider: #DDDDDD;             /* Separadores */
    --rc-blanco: #FFFFFF;              /* Fondos y texto inverso */
    --rc-negro: #1A1A1A;               /* Negro puro para contraste */
    
    /* === ALIASES SEMÁNTICOS (compatibilidad) === */
    --rc-primario: var(--rc-rojo-logo);      /* Color primario = Rojo logo */
    --rc-secundario: var(--rc-azul-logo);    /* Color secundario = Azul logo */

    /* === TIPOGRAFIA === */
    --rc-font-primary: 'Roboto', sans-serif;
    --rc-font-secondary: 'Open Sans', sans-serif;

    /* === TAGS / PILLS === */
    --rc-tag-fondo: #e8f4fd;
    --rc-tag-color: var(--rc-secundario);

    /* === ESTADOS === */
    --rc-success: #28a745;
    --rc-danger: #dc3545;
    --rc-warning: #ffc107;
    --rc-info: #17a2b8;

    /* === ALIASES BACKWARD COMPAT (branding.css legacy) === */
    --rc-primary: var(--rc-secundario);
    --rc-accent: var(--rc-azul-oscuro);
    --rc-dark: var(--rc-negro);
    --rc-light: var(--rc-gris-claro);
    --rc-border: var(--rc-divider);
}

/* ============================================
   RESET Y BASE
   ============================================ */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--rc-negro);
    background-color: var(--rc-gris-medio-claro);
    padding-top: 200px; /* Compensación header fixed-top — ajustado dinámicamente por ResizeObserver en template.js */
}

/* ============================================
   HEADER RADIOCANAL
   Extiende el selector header {} de layout.css
   con estilos específicos del template RC.
   ============================================ */

.header-radiocanal {
    background-color: var(--rc-blanco);
    border-bottom: 1px solid var(--rc-divider);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


.header-radiocanal .bloque-logo {
    margin: 1.5rem 0 0 0;
}

.header-radiocanal .bloque-logo a:focus,
.header-radiocanal .bloque-logo a:focus-visible,
.header-radiocanal .navbar-brand:focus,
.header-radiocanal .navbar-brand:focus-visible,
.header-radiocanal .logo-scroll a:focus,
.header-radiocanal .logo-scroll a:focus-visible {
    outline: none;
    box-shadow: none;
}

.header-radiocanal .bloque-logo .divider {
    width: 100%;
    border-top: 0.1rem solid var(--rc-divider);
    margin: 1.2rem 0 0 0;
}

.header-radiocanal .widget-clima {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.8rem;
}

.header-radiocanal .bloque-menu {
    font-weight: 600;
    font-size: 1.6rem;
    margin-top: 0.6rem;
    margin-bottom: 0.5rem;
}

.header-radiocanal .bloque-menu .navbar {
    padding-top: 0;
    padding-bottom: 0;
}

.header-radiocanal .navbar-nav .nav-link {
    color: var(--rc-negro);
    padding: 0.4rem 0.8rem;
    transition: color 0.3s ease;
}

.header-radiocanal .navbar-nav .nav-link:hover {
    color: var(--rc-secundario);
    background: rgba(0, 119, 204, 0.08);
}

.header-radiocanal .img-header-mobile {
    max-width: 50%;
    margin: 1.5rem 0;
}

.header-scroll {
    background-color: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rc-divider);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-scroll .header-scroll-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
}

.header-scroll .img-scroll {
    height: 3rem;
}

.header-scroll .logo-scroll a:focus,
.header-scroll .logo-scroll a:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ============================================
   MÓDULO SOCIAL FLOTANTE
   Esquina inferior derecha, visible en todas las páginas
   ============================================ */

.social-flotante {
    position: fixed;
    bottom: 2rem;
    right: 1.5rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.social-flotante .social-btn {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    background: var(--rc-blanco);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-flotante .social-whatsapp  { color: #25D366; }
.social-flotante .social-facebook  { color: #1877F2; }
.social-flotante .social-instagram { color: #E1306C; }
.social-flotante .social-youtube   { color: #FF0000; }

.social-flotante .social-btn:hover                 { transform: translateX(-4px); }
.social-flotante .social-whatsapp:hover  { box-shadow: 0 4px 14px rgba(37,  211, 102, 0.35); }
.social-flotante .social-facebook:hover  { box-shadow: 0 4px 14px rgba(24,  119, 242, 0.35); }
.social-flotante .social-instagram:hover { box-shadow: 0 4px 14px rgba(225,  48, 108, 0.35); }
.social-flotante .social-youtube:hover   { box-shadow: 0 4px 14px rgba(255,   0,   0, 0.35); }

/* ============================================
   MAIN CONTENT
   ============================================ */

.main-content {
    min-height: calc(100vh - 300px);
    padding: 2rem 0;
}

/* ============================================
   FOOTER RADIOCANAL
   Extiende #footer de layout.css usando selector
   compuesto para garantizar mayor especificidad.
   ============================================ */

#footer.footer-radiocanal {
    background: var(--rc-gris-claro);
    margin-top: 4rem;
}

#footer.footer-radiocanal .footer-isotipo {
    flex: 0 0 auto;
    max-width: 80px;
}

#footer.footer-radiocanal .footer-medios {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#footer.footer-radiocanal .footer-medios img {
    max-height: 55px;
    width: auto !important; /* override Bootstrap w-100 en contexto footer */
}

#footer.footer-radiocanal .footer-data-fiscal {
    display: flex;
    gap: 1rem;
    align-items: center;
}

#footer.footer-radiocanal .divider {
    border-top: 0.1rem solid var(--rc-divider);
    margin: 1rem 0;
}

#footer.footer-radiocanal .redes-footer {
    gap: 2rem;
}

#footer.footer-radiocanal .redes-footer a         { color: var(--rc-negro); transition: color 0.3s ease; }
#footer.footer-radiocanal .redes-footer a:visited { color: inherit; }
#footer.footer-radiocanal .redes-footer a:hover   { color: var(--rc-primario); }
#footer.footer-radiocanal .redes-footer a:focus   { outline: 2px solid var(--rc-primario); outline-offset: 2px; }
#footer.footer-radiocanal .redes-footer a:active  { color: var(--rc-primario); }

#footer.footer-radiocanal .info-contacto {
    font-size: 1.4rem;
}

#footer.footer-radiocanal .info-contacto p {
    margin: 0.5rem 0;
}

#footer.footer-radiocanal .planilla {
    padding: 2rem 0;
}

#footer.footer-radiocanal .planilla a {
    color: var(--rc-negro);
    text-decoration: none;
}

#footer.footer-radiocanal .btn-planilla-footer {
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: 2.5rem;
    border: 0.2rem solid var(--rc-negro);
    display: inline-block;
    transition: all 0.3s ease;
}

#footer.footer-radiocanal .planilla a:hover .btn-planilla-footer {
    color: var(--rc-blanco);
    border-color: var(--rc-primario);
    background-color: var(--rc-primario);
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    body {
        padding-top: 140px;
    }
}

@media (max-width: 375px) {
    #footer.footer-radiocanal .info-contacto {
        font-size: 1.2rem;
    }
}