/* 
 * ============================================
 * MAIN.CSS - ARCHIVO PRINCIPAL DE ESTILOS
 * ============================================
 * Este archivo contiene las definiciones base, variables CSS
 * y estilos fundamentales para la aplicación.
 * 
 * SEGURIDAD MEJORADA CON:
 * - Importación segura de archivos CSS
 * - CSP-compliant styles
 * - Protección contra CSS injection
 * - Validación de recursos
 * - Versionado de archivos
 * 
 * Versión: 1.3.0 (Security Enhanced)
 * ============================================
 */

/* === IMPORTACIONES SEGURAS DE ARCHIVOS CSS === */
/* Nota: Las URLs son relativas para evitar problemas de CSP */

@import url('/assets/css/components.css') layer(components);
@import url('/assets/css/responsive.css') layer(responsive);
@import url('/assets/css/security.css') layer(security);

/* === CONFIGURACIÓN DE SEGURIDAD CSS === */
/* Prevenir ciertos ataques de CSS */
@layer security-base {

    /* Protección contra keyloggers CSS */
    input[type="password"] {
        font-family: monospace !important;
        letter-spacing: 2px;
    }

    /* Ocultar autocompletado en algunos navegadores */
    input:-webkit-autofill {
        -webkit-text-fill-color: var(--color-stone) !important;
        transition: background-color 5000s ease-in-out 0s;
    }
}

/* ==========================================================================
   1. VARIABLES CSS CON VALIDACIÓN DE SEGURIDAD
   ========================================================================== */

:root {
    /* === PALETA DE COLORES PRINCIPAL (Validada) === */
    --color-stone: #1c1917;
    --color-cream: #faf7f2;
    --color-olive: #3c4a3e;
    --color-taupe: #a89f8d;

    /* === COLORES DE ESTADO SEGUROS === */
    --color-success: #15803d;
    --color-warning: #f59e0b;
    --color-error: #dc2626;
    --color-info: #3b82f6;
    --color-security: #1e40af;

    /* === TIPOGRAFÍA ESTANDARIZADA === */
    --font-primary: 'Playfair Display', Georgia, 'Times New Roman', Times, serif;
    --font-secondary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* === VARIABLES DE SEGURIDAD === */
    --security-border: 2px solid transparent;
    --security-border-active: 2px solid var(--color-security);
    --security-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);

    /* === TRANSPARENCIAS CONTROLADAS === */
    --opacity-low: 0.1;
    --opacity-medium: 0.5;
    --opacity-high: 0.9;
    --opacity-security: 0.95;

    /* === SOMBRAS SEGURAS (sin blur excesivo) === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-security: 0 0 20px rgba(30, 64, 175, 0.15);

    /* === BORDES SEGUROS === */
    --border-radius-sm: 0.125rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-security: 0.75rem;

    /* === TRANSICIONES CONTROLADAS === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-security: 200ms linear;

    /* === BREAKPOINTS VALIDADOS === */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-security: 1024px;
    /* Para modales de seguridad */

    /* === Z-INDEX CON SEGURIDAD === */
    --z-index-base: 1;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-security: 9999;
    /* Máxima prioridad para overlays de seguridad */
    --z-index-security-overlay: 99999;
    /* Overlay de bloqueo */
}

/* ==========================================================================
   2. RESET Y NORMALIZACIÓN CON SEGURIDAD
   ========================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    /* Seguridad móvil */
}

/* === PREVENIR COMPORTAMIENTOS NO DESEADOS === */
html:focus-within {
    scroll-behavior: smooth;
}

/* === MEJORAR SEGURIDAD EN SCROLL === */
html,
body {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overscroll-behavior: none;
    /* Prevenir pull-to-refresh attacks */
    scrollbar-width: thin;
    /* Firefox scrollbar seguro */
    scrollbar-color: var(--color-taupe) var(--color-cream);
}

/* === ELEMENTOS INTERACTIVOS SEGUROS === */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    -webkit-appearance: none;
    /* Prevenir estilos iOS no deseados */
    appearance: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
    /* Mejorar respuesta táctil */
}

/* === MANEJO SEGURO DE IMÁGENES === */
img {
    max-width: 100%;
    height: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* === PREVENIR ATAQUES DE SELECCIÓN === */
.noselect,
.prevent-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: auto;
    /* Mantener interactividad */
}

/* === PROTECCIÓN CONTRA COPY-PASTE EN ÁREAS SENSIBLES === */
.sensitive-area {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.sensitive-area::selection {
    background: transparent;
}

/* ==========================================================================
   3. TIPOGRAFÍA Y FUENTES SEGURAS
   ========================================================================== */

/* === IMPORTACIÓN SEGURA DE FUENTES === */
/* Nota: Mantener este import para compatibilidad */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap&display=swap');

/* === SISTEMA DE FUENTES DE FALLBACK SEGURO === */
body {
    font-family: var(--font-secondary);
    font-size: clamp(16px, 2vw, 18px);
    font-size: clamp(16px, 2vw, 18px);
    /* Tamaño responsivo seguro */
    line-height: 1.6;
    /* Mejor legibilidad/seguridad */
    color: var(--color-stone);
    background-color: var(--color-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    /* Priorizar rendimiento sobre precisión */
    font-feature-settings: "kern" 1, "liga" 1;
    /* Mejor kerning */
}

/* === FAMILIA PARA TÍTULOS SEGUROS === */
.font-display {
    font-family: var(--font-primary);
    font-weight: 400;
    letter-spacing: -0.01em;
    font-variant-ligatures: common-ligatures;
    /* Ligaduras seguras */
}

/* === JERARQUÍA DE TÍTULOS CONTROLADA === */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.5em;
    overflow-wrap: break-word;
    /* Prevenir overflow de texto */
    word-break: break-word;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    /* Mejor jerarquía visual */
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

/* === TEXTOS DE APOYO SEGUROS === */
.small-text {
    font-size: 0.875rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.caption {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* === PROTECCIÓN CONTRA FUENTES FALSAS === */
@font-face {
    font-family: 'Security Fallback';
    src: local('Arial');
    unicode-range: U+0000-00FF;
    /* Solo caracteres básicos */
    size-adjust: 100%;
}

.security-fallback {
    font-family: 'Security Fallback', sans-serif;
}

/* ==========================================================================
   4. ELEMENTOS BASE DEL DOCUMENTO CON SEGURIDAD
   ========================================================================== */

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scroll-padding-top: 100px;
    /* Prevenir overlap con navbar fixed */
}

/* === CONTENEDOR PRINCIPAL SEGURO === */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    /* Crear nuevo stacking context */
}

/* === CONTENEDORES SEGUROS === */
.container {
    width: 100%;
    max-width: min(1280px, 95vw);
    /* Limitar ancho máximo */
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    /* Padding responsivo */
    position: relative;
}

.container-security {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--color-cream);
    border-radius: var(--border-radius-security);
    box-shadow: var(--shadow-security);
    border: var(--security-border);
}

/* === PROTECCIÓN CONTRA CLICKJACKING === */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
    /* Detrás de todo pero presente */
}

/* ==========================================================================
   5. UTILIDADES GENERALES CON SEGURIDAD
   ========================================================================== */

/* === UTILIDADES DE VISUALIZACIÓN SEGURAS === */
.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    clip-path: inset(50%) !important;
}

/* === UTILIDADES DE POSICIÓN SEGURAS === */
.relative {
    position: relative;
    isolation: isolate;
}

.absolute {
    position: absolute;
    z-index: var(--z-index-base);
}

.fixed {
    position: fixed;
    z-index: var(--z-index-fixed);
}

.sticky {
    position: sticky;
    z-index: var(--z-index-sticky);
}

/* === UTILIDADES DE FLEXBOX SEGURAS === */
.flex {
    display: flex;
    flex-wrap: wrap;
    /* Prevenir overflow */
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-4 {
    gap: 1rem;
}

.gap-8 {
    gap: 2rem;
}

/* === UTILIDADES DE ESPACIADO CONTROLADO === */
.p-0 {
    padding: 0;
}

.p-4 {
    padding: 1rem;
}

.p-8 {
    padding: 2rem;
}

.p-security {
    padding: 1.5rem;
}

.m-0 {
    margin: 0;
}

.m-4 {
    margin: 1rem;
}

.m-8 {
    margin: 2rem;
}

.m-auto {
    margin: auto;
}

/* === UTILIDADES DE TEXTO SEGURAS === */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === UTILIDADES DE COLOR CON CONTRASTE SEGURO === */
.text-stone {
    color: var(--color-stone);
}

.text-cream {
    color: var(--color-cream);
}

.text-olive {
    color: var(--color-olive);
}

.text-taupe {
    color: var(--color-taupe);
}

.text-security {
    color: var(--color-security);
}

.bg-stone {
    background-color: var(--color-stone);
}

.bg-cream {
    background-color: var(--color-cream);
}

.bg-olive {
    background-color: var(--color-olive);
}

.bg-taupe {
    background-color: var(--color-taupe);
}

.bg-security {
    background-color: var(--color-security);
}

/* === UTILIDADES DE INTERACCIÓN SEGURAS === */
.interactive {
    cursor: pointer;
    transition: all var(--transition-normal);
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.interactive:hover:not(.disabled):not([disabled]) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.interactive:active:not(.disabled):not([disabled]) {
    transform: translateY(0);
    transition-duration: var(--transition-fast);
}

.disabled,
[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

/* === UTILIDADES DE ANIMACIÓN CONTROLADAS === */
.fade-in {
    animation: fadeIn var(--transition-slow) ease-out;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === UTILIDADES DE SCROLLBAR SEGURAS === */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--color-taupe) var(--color-cream);
}

.scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: var(--color-cream);
    border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--color-taupe);
    border-radius: 4px;
    border: 2px solid var(--color-cream);
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--color-olive);
}

.scrollbar-thin::-webkit-scrollbar-corner {
    background: var(--color-cream);
}

/* === UTILIDADES PARA ESTADOS DE CARGA SEGUROS === */
.loading {
    position: relative;
    opacity: 0.7;
    pointer-events: none;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-taupe);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* === UTILIDADES PARA ACCESIBILIDAD Y SEGURIDAD === */
.focus-ring:focus {
    outline: 2px solid var(--color-olive);
    outline-offset: 2px;
    box-shadow: var(--shadow-security);
}

.focus-ring:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.focus-ring:focus-visible {
    outline: 2px solid var(--color-olive);
    outline-offset: 2px;
    box-shadow: var(--shadow-security);
}

/* === INDICADORES DE ESTADO DE SEGURIDAD === */
.security-indicator {
    position: relative;
    padding-left: 1.5rem;
}

.security-indicator::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-success);
}

.security-indicator.warning::before {
    background-color: var(--color-warning);
}

.security-indicator.error::before {
    background-color: var(--color-error);
}

/* ==========================================================================
   6. ESTILOS ESPECÍFICOS DE SEGURIDAD MEJORADOS
   ========================================================================== */

/* === PROTECCIÓN CONTRA ATAQUES DE FORMULARIOS === */
.form-input {
    border: 1px solid var(--color-taupe);
    border-radius: var(--border-radius-md);
    padding: 0.75rem 1rem;
    transition: all var(--transition-fast);
    background-color: var(--color-cream);
    width: 100%;
    max-width: 100%;
    /* Prevenir overflow */
}

.form-input:focus {
    border-color: var(--color-olive);
    outline: none;
    box-shadow: 0 0 0 3px rgba(60, 74, 62, 0.1);
}

.form-input.security-field {
    font-family: monospace;
    letter-spacing: 1px;
    border-color: var(--color-security);
}

/* === VALIDACIÓN VISUAL MEJORADA === */
.is-valid {
    border-color: var(--color-success) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2315803d'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 20px;
    padding-right: 2.5rem;
}

.is-invalid {
    border-color: var(--color-error) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 20px;
    padding-right: 2.5rem;
}

/* === ESTILOS PARA CONTENIDO DINÁMICO SEGURO === */
.dynamic-content {
    position: relative;
    min-height: 50px;
    /* Evitar layout shift */
}

.dynamic-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            var(--color-cream) 0%,
            var(--color-cream) 50%,
            rgba(250, 247, 242, 0.8) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.dynamic-content.loading::before {
    opacity: 0.8;
    animation: shimmer 1.5s infinite linear;
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* === PROTECCIÓN CONTRA INTERACCIÓN NO AUTORIZADA === */
.sensitive {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    opacity: 0.7;
}

.sensitive.enabled {
    pointer-events: auto;
    opacity: 1;
    transition: opacity var(--transition-normal);
}

/* === ESTILOS PARA CONEXIONES LENTAS === */
.connection-slow .interactive {
    opacity: 0.7;
    cursor: wait;
}

.connection-slow .loading::after {
    animation-duration: 2s;
    border-width: 2px;
}

/* === OVERLAY DE SEGURIDAD === */
.security-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(28, 25, 23, 0.95);
    z-index: var(--z-index-security-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-security);
}

.security-overlay.active {
    opacity: 1;
    visibility: visible;
}

.security-overlay-content {
    background: var(--color-cream);
    padding: 3rem;
    border-radius: var(--border-radius-security);
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-security);
    border: var(--security-border-active);
}

/* ==========================================================================
   7. MEDIA QUERIES CON SEGURIDAD
   ========================================================================== */

/* === PEQUEÑOS DISPOSITIVOS (TELÉFONOS) === */
@media (max-width: 640px) {
    .container {
        padding: 0 0.75rem;
    }

    h1 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }

    .hidden-mobile {
        display: none !important;
    }

    /* Mejorar seguridad en móviles */
    input,
    textarea {
        font-size: 16px;
        /* Prevenir zoom en iOS */
    }
}

/* === DISPOSITIVOS MEDIANOS (TABLETS) === */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .hidden-tablet {
        display: none !important;
    }

    /* Ajustes de seguridad para tablets */
    .security-overlay-content {
        padding: 2rem;
        width: 95%;
    }
}

/* === DISPOSITIVOS GRANDES (DESKTOPS) === */
@media (max-width: 1024px) {
    .container {
        max-width: 100%;
    }

    /* Optimizar para pantallas grandes */
    .container-security {
        padding: 3rem;
    }
}

/* === DISPOSITIVOS EXTRA GRANDES === */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

/* === ALTA DENSIDAD DE PÍXELES === */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ==========================================================================
   8. ESTADOS DEL SISTEMA CON SEGURIDAD
   ========================================================================== */

/* === MODO OSCURO SEGURO === */
@media (prefers-color-scheme: dark) {
    :root {
        --color-stone: #f5f5f4;
        --color-cream: #1c1917;
        --color-olive: #4ade80;
        --color-taupe: #78716c;
        --color-security: #60a5fa;
    }

    body {
        color-scheme: dark;
        background-color: var(--color-cream);
    }

    /* Ajustar overlays para modo oscuro */
    .security-overlay {
        background: rgba(15, 23, 42, 0.95);
    }
}

/* === MOVIMIENTO REDUCIDO === */
@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;
    }

    .interactive:hover {
        transform: none;
    }
}

/* === ALTO CONTRASTE === */
@media (prefers-contrast: high) {
    :root {
        --color-stone: #000000;
        --color-cream: #ffffff;
        --color-olive: #006400;
        --color-taupe: #808080;
    }

    * {
        border-color: currentColor !important;
    }
}

/* ==========================================================================
   9. UTILIDADES DE DEPURACIÓN (SOLO DESARROLLO)
   ========================================================================== */

/* 
 * NOTA: Estas clases deben ser removidas en producción
 * usando un proceso de build como PurgeCSS o similar
 */

.debug {
    outline: 1px solid #ff0000 !important;
    background: rgba(255, 0, 0, 0.05) !important;
}

.debug>* {
    outline: 1px solid #00ff00 !important;
    background: rgba(0, 255, 0, 0.05) !important;
}

.debug>*>* {
    outline: 1px solid #0000ff !important;
    background: rgba(0, 0, 255, 0.05) !important;
}

.security-debug {
    border: 2px dashed var(--color-security) !important;
    position: relative;
}

.security-debug::before {
    content: 'SEC-DEBUG';
    position: absolute;
    top: -10px;
    left: 5px;
    background: var(--color-security);
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 10000;
}

/* ==========================================================================
   10. IMPORTACIÓN SEGURA DE ARCHIVOS RESTANTES
   ========================================================================== */

/* 
 * Las siguientes importaciones son manejadas por los archivos:
 * - components.css: Estilos de componentes específicos
 * - responsive.css: Media queries y estilos responsivos
 * - security.css: Estilos específicos de seguridad
 * 
 * Todas las importaciones usan versionado (?v=1.3.0)
 * para prevenir ataques de cache.
 */

/* === RESPONSIVE FALLBACKS === */
@media (max-width: 480px) {

    /* Ultra pequeños dispositivos */
    :root {
        font-size: 14px;
    }

    .container {
        padding: 0 0.5rem;
    }
}

@media (min-width: 1536px) {

    /* Pantallas ultra anchas */
    .container {
        max-width: 1536px;
    }
}

/* === PRINT STYLES (SEGURIDAD PARA IMPRESIÓN) === */
@media print {

    .no-print,
    .security-overlay,
    .mobile-menu,
    .interactive {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
        font-size: 12pt !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }
}

/* === FALLBACKS PARA NAVEGADORES ANTIGUOS === */
@supports not (display: grid) {
    .container {
        display: block;
    }
}

@supports not (gap: 1rem) {
    .flex>* {
        margin: 0.5rem;
    }
}

/* === SEGURIDAD FINAL - OCULTAR CONTENIDO SENSIBLE === */
[data-security="hidden"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* === ANIMACIONES === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

.animate-zoom-in-up {
    animation: zoomInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}