:root {
    --azul: #2563eb;
    --verde: #16a34a;
    --rojo: #dc2626;
    --fondo: #f8fafc;
    --texto: #1e293b;
}
* { box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--fondo);
    color: var(--texto);
    margin: 0;
    padding: 0 1rem 3rem;
    max-width: 800px;
    margin-inline: auto;
}
header { padding: 2rem 0 1rem; border-bottom: 1px solid #e2e8f0; margin-bottom: 1.5rem; }
h1 { font-size: 1.8rem; margin: 0.2rem 0; }
.fecha-actualizacion { color: #64748b; font-size: 0.9rem; }
.ficha-actual { text-align: center; padding: 1.5rem 0; border-bottom: 1px solid #e2e8f0; margin-bottom: 1.5rem; }
.valor-grande { font-size: 3.2rem; font-weight: 700; margin: 0.3rem 0; color: var(--azul); }
.variacion { font-weight: 600; }
.sube { color: var(--rojo); }
.baja { color: var(--verde); }
.formulario { display: flex; flex-direction: column; gap: 1rem; max-width: 400px; margin: 1.5rem 0; }
.formulario label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.formulario input {
    padding: 0.6rem; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1rem;
}
.formulario button {
    padding: 0.7rem; background: var(--azul); color: white; border: none;
    border-radius: 6px; font-size: 1rem; cursor: pointer;
}
.resultado {
    background: white; padding: 1.2rem; border-radius: 8px; border: 1px solid #e2e8f0;
}
.aviso-legal { font-size: 0.8rem; color: #94a3b8; margin-top: 0.5rem; }