/* Variables Globales */
:root {
    --bg-color: #e5e7eb;
    --text-color: #1f2937;
    --text-muted: #4b5563;
    --glass-bg: rgba(255, 255, 255, 0.4);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: rgba(31, 38, 135, 0.15);
}

body.dark-mode {
    --bg-color: #111827;
    --text-color: #f3f4f6;
    --text-muted: #9ca3af;
    --glass-bg: rgba(17, 24, 39, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow-x: hidden;
    transition: background-color 0.5s ease;
}

/* Animaciones de Fondo */
@keyframes floatGreen {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, 30px) scale(1.1); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes floatRed {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-40px, -50px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

.bg-shape { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; transition: opacity 0.5s; }
.shape-green { 
    width: 40vw; height: 40vw; background: #006847; top: -10%; left: -10%; opacity: 0.4; 
    animation: floatGreen 15s ease-in-out infinite;
}
.shape-red { 
    width: 45vw; height: 45vw; background: #CE1126; bottom: -15%; right: -10%; opacity: 0.3; 
    animation: floatRed 18s ease-in-out infinite;
}
body.dark-mode .bg-shape { opacity: 0.2; }

/* Contenedor y Cabecera */
.container { width: 100%; max-width: 1100px; padding: 20px; z-index: 1; }
header { text-align: center; margin-bottom: 40px; }
.header-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.header-buttons { display: flex; gap: 10px; }
.title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 5px; text-shadow: 0 2px 4px var(--glass-shadow); }
.subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px; }
.main-actions { display: flex; gap: 15px; justify-content: center; }

/* Animación de entrada */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tarjetas y 3D Flip */
.flag-container { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; perspective: 1000px; }

.glass-card {
    flex: 1;
    min-width: 280px;
    height: 380px;
    background: transparent;
    border-radius: 20px;
    animation: fadeInUp 0.8s ease backwards;
}

.card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; }
.glass-card.flipped .card-inner { transform: rotateY(180deg); }
.card-front, .card-back {
    position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
    background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); border-radius: 20px; padding: 30px 20px;
    box-shadow: 0 8px 32px 0 var(--glass-shadow); text-align: center; display: flex; flex-direction: column;
}
.card-back { transform: rotateY(180deg); justify-content: center; align-items: center; padding: 40px; }
h2.flip-trigger { font-size: 1.2rem; cursor: pointer; transition: color 0.3s; margin-bottom: 15px; }
h2.flip-trigger:hover { color: #10b981; }
.history-text { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; }

/* Sliders y Textos */
.slider-group { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.pct-text { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); min-width: 40px; }
input[type=range] { -webkit-appearance: none; flex: 1; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; background: rgba(150, 150, 150, 0.3); border-radius: 4px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; background: var(--text-color); cursor: pointer; margin-top: -5px; transition: transform 0.2s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }

.hex-text { font-size: 1.1rem; font-weight: 600; color: var(--text-muted); margin-bottom: 15px; cursor: pointer; transition: color 0.2s;}
.hex-text:hover { color: var(--text-color); transform: scale(1.05); }

/* Bloques de Color y Escudo */
.color-block { flex: 1; border-radius: 12px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease, background-color 0.1s; }
.color-block:hover { transform: scale(1.03); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

.escudo-block { 
    display: flex; justify-content: center; align-items: center; 
    overflow: hidden; 
}
.escudo { 
    width: auto; height: auto;
    max-width: 75%; max-height: 85%; 
    object-fit: contain; transition: opacity 0.2s; 
}

/* Botones, Selects y Modal */
.glass-btn, .glass-select {
    padding: 10px 20px; font-size: 0.9rem; font-weight: 600; color: var(--text-color);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 50px; cursor: pointer; backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.glass-btn:hover, .glass-select:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.glass-btn.highlight { background: rgba(16, 185, 129, 0.2); border-color: #10b981; }
.icon-btn { font-size: 1.2rem; padding: 8px 15px; }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); z-index: 100; justify-content: center; align-items: center; }
.modal.active { display: flex; }
.modal-content { width: 90%; max-width: 500px; height: auto; padding: 30px; }
textarea { width: 100%; height: 150px; margin: 20px 0; padding: 15px; border-radius: 10px; border: none; background: rgba(0,0,0,0.1); color: var(--text-color); resize: none; font-family: monospace; }

.toast { position: fixed; bottom: -50px; left: 50%; transform: translateX(-50%); background: var(--text-color); color: var(--bg-color); padding: 12px 24px; border-radius: 50px; font-weight: 600; transition: bottom 0.3s ease; z-index: 1000; }
.toast.show { bottom: 30px; }

/* --- Footer Profesional Completo --- */
.glass-footer {
    width: 100%;
    margin-top: 50px;
    padding: 40px 40px 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 var(--glass-shadow);
    display: flex;
    flex-direction: column;
    gap: 30px;
    animation: fadeInUp 1s ease backwards;
    animation-delay: 0.7s;
}

/* Sección Superior del Footer (Columnas) */
.footer-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--glass-border);
}

.footer-section h3 {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 15px;
}

.footer-section p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 8px;
}

/* Enlaces del Footer */
.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.footer-section ul li a:hover {
    color: #10b981; /* Resalta en verde esperanza */
    transform: translateX(5px);
}

/* Sección Inferior del Footer (Derechos y Redes) */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.footer-text { font-size: 0.95rem; color: var(--text-color); }
.social-links { display: flex; gap: 15px; }

.social-btn {
    display: flex; justify-content: center; align-items: center;
    width: 45px; height: 45px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); border: 1px solid var(--glass-border);
    color: var(--text-color); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.social-btn svg { width: 22px; height: 22px; fill: currentColor; transition: transform 0.3s ease; }

.social-btn:hover {
    background: var(--text-color); color: var(--bg-color);
    transform: translateY(-5px); box-shadow: 0 10px 20px var(--glass-shadow);
}
.social-btn:hover svg { transform: scale(1.1); }

/* --- Diseño Adaptable (Responsive) --- */
@media (max-width: 768px) {
    .flag-container { flex-direction: column; align-items: center; }
    .glass-card { width: 100%; max-width: 400px; }
    .header-controls { flex-direction: column; gap: 15px; align-items: center; }
    
    /* Ajustes del Footer Completo en Celular */
    .glass-footer { padding: 30px 20px 20px; }
    .footer-top { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    .footer-section ul li a:hover { transform: translateY(-3px) translateX(0); } /* Animación hacia arriba en celular */
    .footer-bottom { flex-direction: column; text-align: center; justify-content: center; }
}
/* Diseño Adaptable (Responsive) */
@media (max-width: 768px) {
    .flag-container { flex-direction: column; align-items: center; }
    .glass-card { width: 100%; max-width: 400px; }
    .header-controls { flex-direction: column; gap: 15px; align-items: center; }
    
    .glass-footer {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
    }
}