/* ---------- Base ---------- */
body{
  font-family:'Segoe UI',sans-serif;
  background:#f2f4f8;
  margin:0;
  padding:0;
}
.container{
  max-width:850px;
  margin:30px auto;
  background:#fff;
  padding:30px 20px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  animation:fadeIn 1s ease-in-out;
}

/* ---------- Header / título ---------- */
h1.title{
  text-align:center;
  font-size:2.5em;
  margin:0 0 10px;
}
.sube{
  color:#2ecc71;
  text-shadow:0 0 10px #2ecc71;
  animation:glowGreen 2s ease-in-out infinite;
}
.baja{
  color:#e74c3c;
  text-shadow:0 0 10px #e74c3c;
  animation:glowRed 2s ease-in-out infinite;
}
.hora{
  text-align:center;
  font-size:14px;
  color:#555;
  margin-bottom:20px;
}

/* ---------- Cards y grid ---------- */
.card{
  background:#f9f9f9;
  padding:20px;
  border-radius:10px;
  margin:10px 0;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.card.destacado.verde{ background:#e6f9f0; border-left:5px solid #2ecc71; }
.card.destacado.rojo{  background:#ffeaea; border-left:5px solid #e74c3c; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:15px;
  margin-top:20px;
}

/* ---------- Bloques específicos del índice ---------- */
.indice-title{
  text-align:center;
  font-size:1.5rem;
  margin-bottom:1rem;
  font-weight:bold;
}
.referencia-box{
  background:#eef5ff;
  border:2px solid #007bff;
  padding:12px;
  border-radius:10px;
  text-align:center;
  margin-bottom:1rem;
  font-weight:bold;
}
.indice-valor{
  text-align:center;
  font-size:2rem;
  font-weight:bold;
  margin:10px 0 0;
}
.variacion{ text-align:center; font-size:1rem; margin-bottom:.5rem; }
.actualizacion{ text-align:center; font-size:.9rem; color:#555; margin-bottom:20px; }

.chart-container{ position:relative; height:300px; margin-bottom:20px; }

.data-boxes{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-bottom:20px;
}
.data-box{
  flex:1 1 48%;
  background:#f9f9f9; padding:15px; border-radius:10px;
  text-align:center; font-weight:bold; box-shadow:0 2px 5px rgba(0,0,0,.05);
}

.comparador-box{
  background:#f9f9f9; padding:15px; border-radius:10px; font-size:.95rem; margin-bottom:20px;
}
.disclaimer{
  text-align:center; font-size:.75rem; color:#666; padding-top:10px;
}

/* ---------- Footer links ---------- */
.footer-links{
  text-align:center;
  margin-top:12px;
  font-size:.9rem;
}
.footer-links a{
  color:#111;
  text-decoration:underline;
  margin:0 8px;
}

/* ---------- Cookie bar ---------- */
.cookie-bar{
  position:fixed; left:0; right:0; bottom:12px; z-index:9999;
  display:flex; justify-content:center; padding:0 10px;
  font:14px/1.4 'Segoe UI',system-ui,-apple-system,Roboto;
}
.cookie-card{
  max-width:720px; background:#111827; color:#fff;
  padding:12px 14px; border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.cookie-accept{
  margin-left:auto; background:#10b981; color:#062;
  border:none; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600;
}
.cookie-card a{ color:#93c5fd; text-decoration:underline; }

/* ---------- Utilidades ---------- */
.logout-wrapper{ text-align:right; margin-bottom:10px; }
.btn-logout{
  display:inline-block; padding:8px 12px; background:#e74c3c; color:#fff;
  border-radius:6px; font-size:14px; transition:background .2s;
}
.btn-logout:hover{ background:#c0392b; }

.loader{ text-align:center; font-size:18px; padding:30px 0; color:#888; }
.content{ display:block; }

/* ---------- Animaciones ---------- */
.fade-in{ opacity:0; animation:fadeIn 1s ease-in-out forwards; }
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes glowGreen{ 0%,100%{text-shadow:0 0 5px #2ecc71;} 50%{text-shadow:0 0 20px #2ecc71;} }
@keyframes glowRed{   0%,100%{text-shadow:0 0 5px #e74c3c;}  50%{text-shadow:0 0 20px #e74c3c;} }

/* ---------- Responsivo ---------- */
@media (max-width:768px){
  .container{ margin:15px; padding:20px; }
  h1.title{ font-size:1.8em; }
  .grid{ gap:10px; }
  .data-box{ flex:1 1 100%; }
}

/* --- Pequeños alias para tus spans actuales en el H1 --- */
h1 .green{ color:#2ecc71; text-shadow:0 0 10px #2ecc71; animation:glowGreen 2s ease-in-out infinite; font-weight:700; }
h1 .red{   color:#e74c3c; text-shadow:0 0 10px #e74c3c; animation:glowRed 2s ease-in-out infinite; font-weight:700; }

/* --- Asegurar tamaño fluido del título y valores grandes --- */
h1.title{ font-size:clamp(1.6rem, 2.2vw + 1rem, 2.5rem); }
.indice-valor{ font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); }

/* --- Contenedor más sólido en móviles y pantallas grandes --- */
.container{ width:100%; box-sizing:border-box; }
@media (min-width:1200px){
  .container{ max-width:900px; }
}

/* --- Gráfico responsivo por proporción (Chart.js lo respeta) --- */
.chart-container{ height:auto; aspect-ratio: 16/9; }
@media (max-width:420px){
  .chart-container{ aspect-ratio: 4/3; }
}

/* --- Inputs/selects del comparador más cómodos en móvil --- */
.comparador-box select{
  width:100%; max-width:100%;
  padding:10px; border:1px solid #d1d5db; border-radius:10px; font:inherit;
  box-sizing:border-box; margin-top:6px;
}

/* --- Mejoras de accesibilidad y suavidad --- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* --- Ocultar cookie bar al imprimir --- */
@media print{
  .cookie-bar{ display:none !important; }
}

.btn-donar{
  background:#111827;color:#fff;border:none;
  padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;
  text-decoration:none;
}
.btn-donar:hover{ filter:brightness(1.05); }