/*
Theme Name: PortalFilm
Theme URI: https://portalfilm.com
Author: PreciseFuture
Author URI: https://precisefuture.com
Description: Tema WordPress para PortalFilm - La enciclopedia universal del audiovisual. Diseñado con enfoque en accesibilidad, SEO y experiencia de usuario.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portalfilm
Tags: entertainment, film, movies, tv-shows, accessibility-ready, custom-menu, featured-images, translation-ready
*/

/* ============================================
   Fuente Inter (Google Fonts, local)
   ============================================ */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(assets/fonts/inter-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================
   Variables CSS - Tema claro (por defecto)
   ============================================ */
:root {
    --color-bg-base: #F7F9FB;
    --color-bg-surface: #FFFFFF;
    --color-bg-surface-secondary: #F0F2F5;
    --color-text-primary: #1A1D23;
    --color-text-secondary: #49515E;
    --color-border: #D4D8DE;
    --color-primary: #2F5D8A;
    --color-primary-variant: #244C71;
    --color-primary-light: #5F84A2;
    --color-secondary: #3C7D7F;
    --color-secondary-variant: #285C5D;
    --color-success: #357C5A;
    --color-warning: #C48A35;
    --color-error: #B04747;
    --color-info: #227A9C;
    --color-tag-bg: #E5E9EF;
    --shadow-card: rgba(0, 0, 0, 0.1);
    --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 1rem;
    --font-size-h1: 2rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --font-size-small: 0.875rem;
    --line-height-base: 1.5;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --transition-base: 0.2s ease-in-out;
}

/* ============================================
   Variables CSS - Tema oscuro
   ============================================ */
[data-theme="dark"] {
    --color-bg-base: #121417;
    --color-bg-surface: #1D2026;
    --color-bg-surface-secondary: #21262C;
    --color-text-primary: #F1F3F5;
    --color-text-secondary: #B0B8C2;
    --color-border: #2A2F38;
    --color-primary: #3C7FA5;
    --color-primary-variant: #2D617E;
    --color-primary-light: #5D96B5;
    --color-secondary: #4C8284;
    --color-secondary-variant: #345A5C;
    --color-success: #5E886E;
    --color-warning: #C78A4A;
    --color-error: #B85F5F;
    --color-info: #4C8199;
    --color-tag-bg: #2A323D;
    --shadow-card: rgba(0, 0, 0, 0.6);
}

/* ============================================
   Reset y base
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Tipografía base
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover,
a:focus {
    color: var(--color-primary-variant);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* ============================================
   Layout principal
   ============================================ */
.site-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.site-main {
    min-height: 60vh;
    padding: var(--spacing-xl) 0;
}

/* ============================================
   Utilidades accesibilidad
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: #fff;
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: 9999;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   Accesibilidad y preferencias
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .site-container {
        padding: 0 var(--spacing-sm);
    }
}