/* ==========================================================================
   FACTOS THEME - STYLES
   Tailwind CSS (CDN) + Variables CSS (custom colors/spacing)
   Las variables se inyectan desde functions.php
   ========================================================================== */

/* ============================================================================
   VARIABLES CSS + TAILWIND CONFIG
   ============================================================================ */

:root {
    /* Colores */
    --color-red: #E8291C;
    --color-blue: #1A1F8C;
    --color-white: #ffffff;
    --color-gray: #f5f5f5;
    --color-dark: #0f1560;
    
    /* Layout */
    --sidebar-width: 200px;
    --grid-cols: 4;
}

/* ============================================================================
   BASE STYLES (Tailwind + Personalizaciones)
   ============================================================================ */

@layer base {
    html {
        @apply scroll-smooth;
    }

    body {
        @apply font-sans bg-white text-gray-800;
        font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    h1, h2, h3, h4, h5, h6, .headline {
        font-family: 'Barlow Condensed', sans-serif;
        @apply font-black uppercase;
        letter-spacing: -0.5px;
        line-height: 1.1;
    }

    a {
        @apply transition-colors duration-300;
        color: var(--color-red);
    }

    a:hover {
        color: var(--color-blue);
    }

    img {
        @apply max-w-full h-auto block;
    }
}

/* ============================================================================
   SIDEBAR
   ============================================================================ */

.sidebar {
    @apply fixed left-0 top-0 h-screen z-50 bg-white flex flex-col gap-6 overflow-y-auto;
    width: var(--sidebar-width);
    border-right: 3px solid var(--color-blue);
    padding: 1.25rem;
}

.logo-icon {
    @apply flex items-center justify-center flex-shrink-0 rounded font-bold text-white;
    width: 50px;
    height: 50px;
    font-size: 24px;
    background: linear-gradient(135deg, var(--color-red) 50%, var(--color-blue) 50%);
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sidebar-categories {
    @apply flex flex-col gap-2 flex-1;
}

.sidebar-item {
    @apply py-2.5 px-3 text-xs font-semibold uppercase transition-all duration-300;
    color: var(--color-blue);
    letter-spacing: 0.5px;
    border-left: 3px solid transparent;
    padding-left: 12px;
    cursor: pointer;
}

.sidebar-item:hover,
.sidebar-item.active {
    color: var(--color-red);
    border-left-color: var(--color-red);
    background: rgba(232, 41, 28, 0.05);
}

.social-icons {
    @apply flex flex-col gap-2.5 mt-auto flex-shrink-0;
}

.social-icon {
    @apply w-8 h-8 rounded-full flex items-center justify-center text-xs transition-all duration-300 no-underline;
    background: var(--color-red);
    color: white;
    text-decoration: none;
}

.social-icon:hover {
    background: var(--color-blue);
    @apply -translate-y-1;
}

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

.main-content {
    margin-left: var(--sidebar-width);
}

.header-info {
    @apply py-3 px-5 text-xs text-right text-white;
    background: var(--color-blue);
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.hero-section {
    @apply py-10 px-5 min-h-96;
    background: linear-gradient(135deg, var(--color-blue) 0%, #0f1560 100%);
}

.hero-section > div:first-child {
    @apply max-w-5xl mx-auto text-center mb-8;
}

.hero-section > div:first-child h2 {
    @apply text-white text-lg font-black uppercase m-0;
    letter-spacing: 2px;
}

.hero-container {
    @apply max-w-5xl mx-auto grid grid-cols-2 gap-5 items-center;
}

.hero-card {
    @apply bg-white rounded-lg overflow-hidden transition-transform duration-300;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.hero-card:hover {
    @apply -translate-y-1;
}

.hero-image {
    @apply w-full h-64 object-cover block;
}

.red-band {
    @apply p-5 text-white;
    background: var(--color-red);
}

.red-band .hero-title,
.red-band h3 {
    @apply m-0;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

.blue-band {
    @apply p-5 text-white;
    background: var(--color-blue);
}

.blue-band p {
    @apply text-sm m-0;
    line-height: 1.5;
}

/* ============================================================================
   BAJADA SECTION
   ============================================================================ */

.bajada-section {
    @apply py-10 px-5 text-center text-white;
    background: var(--color-blue);
}

.bajada-content {
    @apply max-w-2xl mx-auto;
}

.bajada-content p {
    @apply text-base mb-3;
    line-height: 1.6;
}

.bajada-content p:last-child {
    @apply mb-0;
}

/* ============================================================================
   NEWS SECTION
   ============================================================================ */

.news-section {
    @apply py-10 px-5 max-w-6xl mx-auto;
}

.section-title {
    @apply mb-8 text-lg font-black uppercase;
    color: var(--color-blue);
    letter-spacing: 1px;
}

.news-grid {
    @apply mb-8;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: 1.25rem;
}

.news-card {
    @apply bg-white rounded overflow-hidden transition-all duration-300 relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.news-card:hover {
    @apply -translate-y-1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.news-image {
    @apply w-full h-44 object-cover block;
}

.logo-badge {
    @apply absolute top-2 left-2 w-7 h-7 rounded flex items-center justify-center text-sm font-black z-10 bg-white;
    color: var(--color-blue);
}

.news-content {
    @apply p-3.75;
}

.news-title {
    @apply flex items-center text-white text-sm leading-tight -m-3.75 mb-2.5 p-3 min-h-[70px];
    background: var(--color-red);
    margin: -15px -15px 10px -15px;
}

.news-title a {
    color: white;
}

.news-bajada {
    @apply text-xs;
    color: var(--color-blue);
    line-height: 1.4;
}

/* ============================================================================
   PAGINATION
   ============================================================================ */

.pagination {
    @apply flex gap-3.75 justify-center mb-10;
}

.btn-more {
    @apply px-7 py-3 border-2 rounded font-bold transition-all duration-300 text-sm uppercase;
    letter-spacing: 1px;
    background: white;
    color: var(--color-blue);
    border-color: var(--color-blue);
    font-family: 'Barlow Condensed', sans-serif;
    cursor: pointer;
}

.btn-more:hover {
    background: var(--color-red);
    color: white;
    border-color: var(--color-red);
}

.btn-more:disabled {
    @apply opacity-60 cursor-not-allowed;
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.footer {
    @apply py-10 px-5 mt-10 text-white;
    background: var(--color-blue);
}

.footer-container {
    @apply max-w-5xl mx-auto grid grid-cols-2 gap-10;
}

.footer-brand {
    @apply flex flex-col gap-3.75;
}

.footer-logo {
    @apply w-15 h-15 flex items-center justify-center rounded bg-white font-black text-2xl;
    color: var(--color-blue);
}

.footer-tagline {
    @apply text-base max-w-xs;
    line-height: 1.6;
}

.footer-content {
    @apply grid grid-cols-2 gap-10;
}

.footer-section h3 {
    @apply mb-3.75 text-sm font-black uppercase;
    color: var(--color-red);
}

.footer-section ul {
    @apply list-none;
}

.footer-section li {
    @apply mb-2 text-xs;
}

.footer-section a {
    @apply text-white transition-colors duration-300;
    text-decoration: none;
}

.footer-section a:hover {
    color: var(--color-red);
}

/* ============================================================================
   SINGLE ARTICLE
   ============================================================================ */

.single-section {
    @apply py-10 px-5 max-w-3xl mx-auto;
}

.breadcrumb {
    @apply text-xs mb-8;
    color: #999;
}

.breadcrumb a {
    color: var(--color-blue);
}

.single-title {
    @apply font-black mb-5;
    font-size: 2.5rem;
    color: var(--color-blue);
}

.single-bajada {
    @apply text-lg mb-5;
    color: var(--color-red);
    line-height: 1.6;
}

.single-meta {
    @apply flex gap-8 text-xs mb-8;
    color: #999;
}

.meta-category {
    @apply bg-red-600 text-white px-3 py-1 rounded text-xs font-black uppercase;
    background: var(--color-red);
}

.single-featured {
    @apply my-10 rounded overflow-hidden;
}

.featured-img {
    @apply w-full h-auto block;
}

.single-video {
    @apply my-10 rounded overflow-hidden;
}

.single-video iframe {
    @apply max-w-full;
}

.single-content {
    @apply text-base mb-10;
    line-height: 1.8;
}

.single-content p {
    @apply mb-5;
}

.single-content h2,
.single-content h3 {
    @apply my-8;
    color: var(--color-blue);
}

.single-content ul,
.single-content ol {
    @apply ml-7 my-5;
}

.single-content li {
    @apply mb-2;
}

.single-content a {
    @apply font-semibold;
    color: var(--color-red);
}

.single-content a:hover {
    color: var(--color-blue);
}

.single-content blockquote {
    @apply my-8 pl-5 italic;
    border-left: 4px solid var(--color-red);
    color: #666;
}

/* Share Buttons */
.share-buttons {
    @apply p-8 rounded my-10;
    background: var(--color-gray);
}

.share-buttons h4 {
    @apply mb-3.75 text-sm font-black;
    color: var(--color-blue);
}

.share-btn {
    @apply inline-flex items-center gap-2 px-5 py-2.5 bg-white rounded mr-2.5 mb-2.5 transition-all duration-300 text-xs font-semibold no-underline border;
    color: var(--color-blue);
    border-color: #ddd;
}

.share-btn:hover {
    background: var(--color-blue);
    color: white;
    border-color: var(--color-blue);
}

/* Related Articles */
.related-articles {
    @apply mt-16 pt-10;
    border-top: 2px solid var(--color-gray);
}

.related-articles h3 {
    @apply mb-8;
    color: var(--color-blue);
}

.related-grid {
    @apply grid grid-cols-3 gap-8;
}

.related-card {
    @apply bg-white rounded overflow-hidden transition-all duration-300;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.related-card:hover {
    @apply -translate-y-1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.related-img {
    @apply w-full h-44 object-cover block;
}

.related-card h4 {
    @apply p-3.75 text-sm leading-snug m-0;
    color: var(--color-blue);
}

.related-bajada {
    @apply px-3.75 pb-3.75 text-xs;
    color: #666;
    line-height: 1.4;
}

/* ============================================================================
   ARCHIVE PAGE
   ============================================================================ */

.archive-section {
    @apply py-10 px-5 max-w-6xl mx-auto;
}

.archive-header {
    @apply mb-10;
}

.archive-title {
    @apply font-black mb-2.5;
    font-size: 2.5rem;
    color: var(--color-blue);
}

.archive-description {
    @apply text-base;
    color: #666;
}

/* ============================================================================
   GENERIC SECTION
   ============================================================================ */

.generic-section {
    @apply py-10 px-5 max-w-3xl mx-auto;
}

.generic-section h1 {
    @apply mb-5;
    color: var(--color-blue);
}

.generic-section article {
    @apply mb-10;
}

.generic-section article h2 {
    @apply mb-2.5;
    color: var(--color-blue);
}

.generic-section article h2 a:hover {
    color: var(--color-red);
}

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

@media (max-width: 1200px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-container {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .sidebar {
        width: 160px;
        padding: 15px;
        gap: 15px;
    }

    .main-content,
    .header-info {
        margin-left: 160px;
    }

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

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

    .single-title {
        font-size: 1.8rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 480px) {
    .sidebar {
        width: 120px;
        padding: 12px;
        gap: 12px;
    }

    .main-content,
    .header-info {
        margin-left: 120px;
    }

    .sidebar-item {
        font-size: 9px;
        padding: 8px;
    }

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

    .single-title {
        font-size: 1.4rem;
    }

    .section-title {
        font-size: 14px;
    }

    .share-btn {
        padding: 8px 15px;
        font-size: 12px;
    }

    .news-section,
    .archive-section,
    .single-section {
        padding: 20px 10px;
    }
}