/* Explain: Base reset, typography, and page background styles with contrast corrections. - */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    background: var(--background-color);
    color: var(--text-color);
    scroll-behavior: smooth;
}

body {
    background-color: var(--background-color);
    background-image: none;
    background-attachment: scroll;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: clamp(50px, 8vw, 100px);
    height: clamp(50px, 8vw, 100px);
    z-index: 45;
    pointer-events: none;
    background-image: url('https://files.cdn-files-a.com/uploads/12276149/normal_filter_nobg_6a6311734489e.png?format=avif');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* --- CORRECCIONES DE CONTRASTE PROFESIONAL (TEMA CLARO/AMARILLO) --- */

/* 1. Evitar que texto amarillo se pierda en fondo claro (Mejorar a un tono ámbar/dorado oscuro) */
.text-\[var\(--primary-color\)\], .text-\[\#ffcc00\] {
    color: #d97706 !important; 
}

/* Restaurar amarillo brillante original solo si el fondo es explícitamente oscuro */
.bg-black .text-\[var\(--primary-color)\],
.bg-gray-900 .text-\[var\(--primary-color)\],
[class*="bg-black/"] .text-\[var\(--primary-color)\],
[class*="from-black"] .text-\[var\(--primary-color)\],
[class*="bg-[#0"] .text-\[var\(--primary-color)\],
[class*="bg-[#1"] .text-\[var\(--primary-color)\],
[class*="bg-[#2"] .text-\[var\(--primary-color)\],
[class*="bg-[#3"] .text-\[var\(--primary-color)\] {
    color: var(--primary-color) !important; 
}

/* 2. Evitar texto blanco o gris claro sobre fondos claros (Blanco sobre blanco/gris) */
.text-white, .text-gray-100, .text-gray-200, .text-gray-300, .text-gray-400 {
    color: var(--text-color) !important;
}

/* Restaurar texto blanco solo cuando el fondo proporciona contraste oscuro real */
.bg-black .text-white, .bg-gray-900 .text-white, .bg-gray-800 .text-white,
.btn-primary-gradient .text-white, .btn.text-white, .badge.text-white,
[style*="background-image"] .text-white, [style*="background-color: #000"] .text-white,
[class*="bg-blue-"] .text-white, [class*="bg-red-"] .text-white, [class*="bg-green-"] .text-white, [class*="bg-purple-"] .text-white,
[class*="bg-black/40"] .text-white, [class*="bg-black/50"] .text-white, [class*="bg-black/60"] .text-white,
[class*="bg-black/70"] .text-white, [class*="bg-black/80"] .text-white, [class*="bg-black/90"] .text-white,
[class*="from-black"] .text-white,
[class*="bg-[#0"] .text-white, [class*="bg-[#1"] .text-white, [class*="bg-[#2"] .text-white, [class*="bg-[#3"] .text-white,
[class*="from-[#0"] .text-white, [class*="from-[#1"] .text-white {
    color: #ffffff !important;
}

/* Ajustar los grises en fondos oscuros para que no se vuelvan negros */
[class*="bg-[#0"] .text-gray-300, [class*="bg-[#1"] .text-gray-300, .bg-black .text-gray-300, [class*="bg-black/"] .text-gray-300 { color: #d1d5db !important; }
[class*="bg-[#0"] .text-gray-400, [class*="bg-[#1"] .text-gray-400, .bg-black .text-gray-400, [class*="bg-black/"] .text-gray-400 { color: #9ca3af !important; }

/* 3. Forzar inputs a tener buen contraste (Fondo blanco, texto oscuro siempre) */
input:not([type="radio"]):not([type="checkbox"]), textarea, select {
    background-color: #ffffff !important;
    color: var(--text-color) !important;
    border-color: #cbd5e1 !important;
    font-weight: 600 !important;
}

input::placeholder, textarea::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* 4. Corregir botones o insignias que usan el amarillo de fondo para que el texto sea negro y legible */
.bg-\[var\(--primary-color\)\], .bg-\[\#ffcc00\] {
    color: #000000 !important;
}
.bg-\[var\(--primary-color\)\] .text-white, .bg-\[\#ffcc00\] .text-white {
    color: #000000 !important;
}

/* Utilidades */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}