/* ============================================================
   PALETA — editorial, inspirada en rouan.me. Soporta dos temas.
   Tema oscuro por defecto; el claro se activa con [data-tema="claro"].
   ============================================================ */
:root {
    /* === Tema OSCURO (default) === */
    --bg:           #0e0e0d;
    --superficie:   #161614;
    --texto:        #ededea;
    --texto-sec:    #9a9a93;
    --texto-tenue:  #6b6b65;
    --borde:        #26261f;
    --borde-fuerte: #3a3a31;

    /* Botón primario: invertido respecto al fondo */
    --boton-bg:     #ededea;
    --boton-texto:  #0a0a0a;

    /* Capa translúcida del nav (mismo tono que --bg en rgba) */
    --nav-bg:       rgba(14, 14, 13, 0.78);

    /* Colores de la gráfica */
    --chart-aportado: #4a4a42;
    --chart-intereses: #ededea;
    --chart-grid:    #232320;
    --chart-tick:    #888881;
    --chart-tooltip-bg:     #161614;
    --chart-tooltip-borde:  #3a3a31;
    --chart-tooltip-titulo: #ededea;
    --chart-tooltip-cuerpo: #9a9a93;

    --radio:    4px;
    --transicion: 160ms ease;
}

[data-tema="claro"] {
    --bg:           #fafaf7;
    --superficie:   #ffffff;
    --texto:        #0a0a0a;
    --texto-sec:    #555555;
    --texto-tenue:  #888888;
    --borde:        #e5e5e0;
    --borde-fuerte: #d0d0c8;

    --boton-bg:     #0a0a0a;
    --boton-texto:  #fafaf7;

    --nav-bg:       rgba(250, 250, 247, 0.85);

    --chart-aportado: #c8c8c0;
    --chart-intereses: #0a0a0a;
    --chart-grid:    #eeeeea;
    --chart-tick:    #888888;
    --chart-tooltip-bg:     #ffffff;
    --chart-tooltip-borde:  #d0d0c8;
    --chart-tooltip-titulo: #0a0a0a;
    --chart-tooltip-cuerpo: #555555;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
ul { list-style: none; }
a  { color: inherit; text-decoration: none; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--texto);
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    transition: background var(--transicion), color var(--transicion);
}

/* ============================================================
   TOGGLE DE TEMA (flotante en esquina superior derecha)
   ============================================================ */
.toggle-tema {
    background: transparent;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto-sec);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.toggle-tema:hover { color: var(--texto); border-color: var(--borde-fuerte); }
.toggle-tema-flotante {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 5;
}
.icono-tema { display: none; }
[data-tema="oscuro"] .icono-sol  { display: block; }
[data-tema="claro"]  .icono-luna { display: block; }
/* Si no hay atributo data-tema, asumimos oscuro (default) */
:root:not([data-tema="claro"]) .icono-sol { display: block; }

/* ============================================================
   CONTENEDOR Y SECCIONES
   ============================================================ */
.contenedor {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.seccion { padding: 2.5rem 0; border-top: 1px solid var(--borde); }
.seccion:first-of-type { border-top: 0; }

.seccion-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.num {
    font-size: 0.85rem;
    color: var(--texto-tenue);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.seccion-titulo {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.seccion-bajada {
    color: var(--texto-sec);
    font-size: 0.95rem;
    margin-top: -1.25rem;
    margin-bottom: 2rem;
    max-width: 60ch;
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 2.5rem 3rem 2rem 0; }

.hero-eyebrow {
    font-size: 0.85rem;
    color: var(--texto-tenue);
    margin-bottom: 1.25rem;
}

.hero-titulo {
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    max-width: 22ch;
    margin-bottom: 1rem;
}

.hero-bajada {
    color: var(--texto-sec);
    max-width: 58ch;
    font-size: 1.02rem;
}

/* ----- Toggle de moneda estilo enlaces ----- */
.toggle-moneda {
    margin-top: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--texto-sec);
}

.toggle-etiqueta { color: var(--texto-tenue); margin-right: 0.25rem; }

.moneda-opcion {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--texto-tenue);
    cursor: pointer;
    transition: color var(--transicion);
}
.moneda-opcion:hover { color: var(--texto-sec); }
.moneda-opcion.activa {
    color: var(--texto);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.toggle-sep { color: var(--borde-fuerte); }

/* ============================================================
   FORMULARIO
   ============================================================ */
.formulario {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
    max-width: 720px;
}

.campo { display: flex; flex-direction: column; gap: 0.55rem; }
.campo-completo { grid-column: 1 / -1; margin-top: 0.5rem; }

.campo label {
    font-size: 0.85rem;
    color: var(--texto-sec);
    font-weight: 500;
}

.campo input,
.campo select {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
    width: 100%;
}

.campo input:focus,
.campo select:focus {
    outline: none;
    border-color: var(--texto);
}

.campo select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23555' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.25rem;
    cursor: pointer;
}

.input-con-prefijo { position: relative; }
.input-con-prefijo .prefijo {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-tenue);
    pointer-events: none;
    font-size: 0.95rem;
}
.input-con-prefijo input { padding-left: 1.75rem; }

.campo input[type=number]::-webkit-inner-spin-button,
.campo input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.campo input[type=number] { -moz-appearance: textfield; }

/* ----- Botón primario ----- */
.boton-primario {
    background: var(--boton-bg);
    color: var(--boton-texto);
    border: 1px solid var(--boton-bg);
    border-radius: var(--radio);
    padding: 0.8rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion);
    justify-self: start;
}
.boton-primario:hover { background: transparent; color: var(--boton-bg); }

.mensaje-error {
    grid-column: 1 / -1;
    color: #a02828;
    font-size: 0.85rem;
    min-height: 1.1em;
}

/* ============================================================
   RESULTADOS
   ============================================================ */
.resultados {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.resultado {
    border-top: 1px solid var(--texto);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.resultado-etiqueta {
    font-size: 0.8rem;
    color: var(--texto-sec);
    font-weight: 500;
}

.resultado-valor {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    margin-top: 0.15rem;
}

.resultado-pie {
    font-size: 0.83rem;
    color: var(--texto-tenue);
    margin-top: 0.4rem;
}

/* ============================================================
   GRÁFICA
   ============================================================ */
.contenedor-grafica {
    position: relative;
    height: 320px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem;
    background: var(--superficie);
}

/* ============================================================
   PIE
   ============================================================ */
.pie {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borde);
    color: var(--texto-sec);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.pie-nota { color: var(--texto-tenue); }
.pie .hero-eyebrow { margin-bottom: 0.25rem; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 760px) {
    .contenedor { padding: 1.5rem 1.25rem; }
    .toggle-tema { width: 30px; height: 30px; }
    .toggle-tema-flotante { top: 1rem; right: 1.25rem; }

    .seccion { padding: 2rem 0; }
    .seccion-header { margin-bottom: 1.25rem; }

    .hero { padding: 1.5rem 2.5rem 1rem 0; }

    .formulario { grid-template-columns: 1fr; }
    .resultados  { grid-template-columns: 1fr; gap: 1.25rem; }
    .contenedor-grafica { height: 280px; padding: 0.75rem; }
}