/* ================================================================
   SENXORY — Sistema de diseño "Ascua"
   Fondo casi negro con calidez (no gris azulado), un único acento
   ember que va del rojo profundo al ámbar, dorado viejo como
   secundario. Serif editorial para titulares, sans de sistema para
   cuerpo de texto. Grano sutil de fondo, sombras cálidas, curvas
   más lentas y orgánicas en las transiciones — pensado para leerse
   con las luces bajas.

   IMPORTANTE: los nombres de las variables (--oro, --rosa, etc.) se
   mantienen tal cual aunque el color ya no sea "oro" ni "rosa" —
   se usan inline en muchos módulos (admin, retos, calendario…) y
   renombrarlas rompería esas páginas. Solo cambian los valores.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&display=swap');

:root {
    --bg:            #0d0808;   /* negro con fondo cálido, no azulado */
    --bg-elevado:    #1c1310;
    --bg-tarjeta:    #1c1310;
    --bg-input:      #241713;
    --borde:         #3a2620;
    --texto:         #f3e6d8;   /* marfil cálido, no blanco puro */
    --texto-tenue:   #b6a094;
    --oro:           #ff5a3c;   /* acento primario — ascua/ember */
    --oro-suave:     #ffab7a;
    --rosa:          #d4a24e;   /* acento secundario — oro viejo (antes cian) */
    --rosa-suave:    #e8c580;
    --verde-ok:      #7cbf6a;
    --rojo-no:       #e2394f;
    --radio:         16px;
    --radio-chico:   9px;
    --sombra:        0 10px 34px rgba(0,0,0,0.55);
    --ease-suave:    cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    position: relative;
    background:
        radial-gradient(ellipse 900px 520px at 50% -10%, rgba(255,90,60,0.13), transparent 60%),
        radial-gradient(ellipse 700px 600px at 100% 100%, rgba(212,162,78,0.07), transparent 65%),
        radial-gradient(ellipse 600px 460px at 0% 55%, rgba(255,90,60,0.05), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    line-height: 1.5;
}

/* Foto de fondo PERSONALIZADA de cada pareja (opcional). Vacía por
   defecto — JS le pone background-image solo si la pareja ha subido
   una desde Mi cuenta; si no, este div no pinta nada y no se nota que
   existe. Va por debajo del grano y del contenido, por encima del negro
   base y los degradados ember. */
#fondo-pareja {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#fondo-pareja::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Atenúa la foto para que el texto siga leyéndose por encima —
       sube/baja el 0.86-0.93 si la quieres más o menos visible */
    background: linear-gradient(rgba(13,8,8,0.90), rgba(13,8,8,0.94));
}

/* Grano de fondo sutil — textura de vela/película, no de pantalla */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#vista-cargando, #vista-login, #vista-pareja, #vista-dashboard, .cabecera {
    position: relative;
    z-index: 1;
}

h1, h2, h3, .display {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.4em;
}

h1 { font-size: 2.05rem; font-weight: 600; text-shadow: 0 0 26px rgba(255,90,60,0.22); }
h2 { font-size: 1.4rem; font-weight: 600; }
h3 { font-size: 1.08rem; font-weight: 600; color: var(--rosa); }

.display { font-weight: 500; font-style: italic; }

a { color: var(--rosa); text-decoration: none; }
a:hover { text-decoration: underline; }

p { color: var(--texto-tenue); }

ul { color: var(--texto-tenue); padding-left: 20px; margin: 8px 0; }
li { margin-bottom: 6px; }

.contenedor {
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    position: relative;
    z-index: 1;
}

.contenedor-estrecho {
    max-width: 420px;
    margin: 0 auto;
    padding: 48px 20px;
    position: relative;
    z-index: 1;
}

.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borde);
    background: rgba(13, 8, 8, 0.88);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.marca {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--texto);
    letter-spacing: 0.005em;
}

.marca span { color: var(--oro); font-style: normal; }

nav.menu {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

nav.menu a {
    color: var(--texto-tenue);
    padding: 8px 14px;
    border-radius: var(--radio-chico);
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.25s var(--ease-suave), color 0.25s var(--ease-suave);
}

nav.menu a:hover, nav.menu a.activo {
    background: var(--bg-tarjeta);
    color: var(--oro-suave);
    text-decoration: none;
}

.menu-mas { position: relative; }

.menu-mas-boton {
    background: none;
    border: none;
    color: var(--texto-tenue);
    padding: 8px 14px;
    border-radius: var(--radio-chico);
    font-size: 0.92rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

.menu-mas-boton:hover, .menu-mas-boton.activo {
    background: var(--bg-tarjeta);
    color: var(--oro-suave);
}

.menu-mas-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 6px;
    flex-direction: column;
    min-width: 160px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    z-index: 20;
}

.menu-mas.abierto .menu-mas-panel { display: flex; }

.menu-mas-panel a {
    color: var(--texto-tenue);
    padding: 9px 12px;
    border-radius: var(--radio-chico);
    font-size: 0.9rem;
    font-weight: 500;
}

.menu-mas-panel a:hover, .menu-mas-panel a.activo {
    background: var(--bg);
    color: var(--oro-suave);
    text-decoration: none;
}

@media (max-width: 640px) {
    .menu-mas-panel { right: auto; left: 0; }
}

.tarjeta {
    background: var(--bg-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: var(--sombra), 0 0 0px rgba(255,90,60,0);
    transition: box-shadow 0.5s var(--ease-suave), border-color 0.5s var(--ease-suave), transform 0.35s var(--ease-suave);
}

.tarjeta:hover {
    border-color: rgba(255,90,60,0.4);
    box-shadow: var(--sombra), 0 0 38px rgba(255,90,60,0.14);
}
a.tarjeta:hover {
    transform: translateY(-3px);
}

.tarjeta-linea {
    background: var(--bg-input);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.35s var(--ease-suave);
}

/* Variante dorada de .tarjeta, para contenido destacado/accionable
   (avisos de reto pendiente, resumen de retos en marcha, CTA de eLoves…).
   Antes cada uno de esos sitios reinventaba por separado fondo/borde/radio
   solo para ponerle el borde de oro; ahora comparten esta base. */
.tarjeta-destacada {
    background: var(--bg-tarjeta);
    border: 1px solid var(--oro);
    border-radius: var(--radio);
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 0 30px rgba(255,90,60,0.12);
}

/* Rótulo de sección en mayúsculas con línea divisoria — usado para separar
   bloques dentro de una misma página larga (dashboard, estadísticas…). */
.etiqueta-seccion {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texto-tenue);
    margin: 26px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.etiqueta-seccion::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borde);
}

/* Rejilla de accesos a módulos — el grid "Todos los módulos" del
   dashboard, u otro listado similar de accesos a módulos. */
.modulos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.modulo-tile {
    background: var(--bg-input);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 16px 8px;
    min-height: 56px;
    text-align: center;
    text-decoration: none;
    color: var(--texto);
    font-size: 0.88rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease-suave);
}
.modulo-tile:hover {
    color: var(--oro-suave);
    border-color: var(--oro);
    text-decoration: none;
    transform: translateY(-2px);
}
@media (max-width: 640px) {
    .modulos-grid { grid-template-columns: repeat(2, 1fr); }
}

.fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 640px) {
    .grid-2 { grid-template-columns: 1fr; }
    nav.menu { justify-content: center; width: 100%; }
    .cabecera { flex-direction: column; gap: 10px; }
}

label {
    display: block;
    font-size: 0.85rem;
    color: var(--texto-tenue);
    margin-bottom: 6px;
    margin-top: 14px;
}

input, textarea, select {
    width: 100%;
    padding: 11px 13px;
    background: var(--bg-input);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-family: inherit;
    font-size: 1rem; /* 16px — por debajo de esto, iOS Safari hace zoom automático al tocar el campo */
    transition: border-color 0.25s var(--ease-suave), box-shadow 0.25s var(--ease-suave);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--oro);
    box-shadow: 0 0 10px rgba(255, 90, 60, 0.22);
}

textarea { resize: vertical; min-height: 80px; }

button, .boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radio-chico);
    border: 1px solid transparent;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: transform 0.15s var(--ease-suave), opacity 0.2s ease, box-shadow 0.3s var(--ease-suave);
}

button:active { transform: scale(0.97); }

.boton-icono {
    padding: 10px 12px;
    flex-shrink: 0;
}

/* Los botones primarios llevan forma de píldora — el único elemento
   totalmente redondeado del sistema, para que la llamada a la acción
   se sienta distinta (más suave, más deseable) que el resto de la UI. */
.boton-primario {
    background: linear-gradient(135deg, var(--oro) 0%, #ff3d5e 55%, var(--rosa) 100%);
    color: #fff6ee;
    border-radius: 999px;
    padding: 10px 22px;
    box-shadow: 0 4px 20px rgba(255, 90, 60, 0.35);
    transition: transform 0.15s var(--ease-suave), opacity 0.2s ease, box-shadow 0.4s var(--ease-suave);
}
.boton-primario:hover { box-shadow: 0 6px 30px rgba(255, 90, 60, 0.5), 0 0 24px rgba(212,162,78,0.25); }

.boton-secundario {
    background: var(--bg-input);
    border-color: var(--borde);
    color: var(--texto);
}
.boton-secundario:hover { border-color: var(--rosa); color: var(--rosa-suave); }

.boton-peligro {
    background: transparent;
    border-color: var(--rojo-no);
    color: var(--rojo-no);
}

.boton-ok { background: var(--verde-ok); color: #0f2013; }
.boton-no { background: var(--rojo-no); color: #ffffff; }

button:disabled { opacity: 0.5; cursor: not-allowed; }

.chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-input);
    border: 1px solid var(--borde);
    color: var(--texto-tenue);
}
.chip-pendiente { color: var(--oro-suave); border-color: var(--oro); }
.chip-aceptado  { color: var(--rosa-suave); border-color: var(--rosa); }
.chip-cumplido  { color: var(--verde-ok); border-color: var(--verde-ok); }
.chip-no_cumplido, .chip-rechazado, .chip-cancelado { color: var(--rojo-no); border-color: var(--rojo-no); }
.chip-caducado  { color: var(--texto-tenue); }

.nivel-dot {
    display: inline-flex;
    gap: 3px;
}
.nivel-dot span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--borde);
    transition: background 0.3s var(--ease-suave), box-shadow 0.3s var(--ease-suave);
}
/* Cada punto activo "arde" un poco más — degradado ember en vez de un
   color plano, como una brasa que se aviva según sube el nivel. */
.nivel-dot span.activo {
    background: linear-gradient(135deg, var(--oro), var(--oro-suave));
    box-shadow: 0 0 6px rgba(255,90,60,0.55);
}

.aviso {
    padding: 12px 16px;
    border-radius: var(--radio-chico);
    background: rgba(255, 90, 60, 0.1);
    border: 1px solid var(--oro);
    color: var(--oro-suave);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* ── Toast de incentivos (drop diario / combo semanal) ──────────────────
   Flotante, se apila si hay más de uno, y se autodestruye solo — no
   requiere que el usuario haga nada para que desaparezca. */
.toast-incentivos-contenedor {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
    width: 100%;
    padding: 0 14px;
}
.toast-incentivo {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--oro), var(--rosa));
    color: #fff6ee;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(255, 90, 60, 0.35);
    animation: toast-entra 0.35s var(--ease-suave), toast-sale 0.4s ease 3.6s forwards;
    max-width: 380px;
}
.toast-incentivo .icono { font-size: 1.1rem; }
@keyframes toast-entra {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-sale {
    to { opacity: 0; transform: translateY(-10px); }
}

.aviso-ok {
    background: rgba(124, 191, 106, 0.12);
    border-color: var(--verde-ok);
    color: var(--verde-ok);
}

/* Se usa junto a .tarjeta-destacada — aquí solo las diferencias:
   fondo en degradado, padding más ajustado y layout en fila. */
.aviso-reto-pendiente {
    background: linear-gradient(135deg, rgba(255,90,60,0.16) 0%, rgba(212,162,78,0.1) 100%);
    padding: 16px 18px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.aviso-reto-pendiente .contenido { flex: 1; }
.aviso-reto-pendiente .titulo { font-weight: 700; color: var(--oro-suave); margin-bottom: 4px; }
.aviso-reto-pendiente .cerrar {
    background: none; border: none; color: var(--texto-tenue);
    font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 10px 12px;
}
.aviso-reto-pendiente .cerrar:hover { color: var(--texto); }

.vacio {
    text-align: center;
    padding: 40px 20px;
    color: var(--texto-tenue);
}

.puntuacion-bloque {
    text-align: center;
    padding: 16px;
}
.puntuacion-numero {
    font-family: "Fraunces", Georgia, serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--oro);
    text-shadow: 0 0 22px rgba(255,90,60,0.4);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .puntuacion-numero {
        background: linear-gradient(135deg, var(--oro-suave), var(--oro) 60%, var(--rosa));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.codigo-grande {
    font-family: "Fraunces", Georgia, serif;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--rosa);
    text-align: center;
    padding: 18px;
    border: 1px dashed var(--rosa);
    border-radius: var(--radio-chico);
    margin: 14px 0;
    text-shadow: 0 0 18px rgba(212,162,78,0.4);
}

.spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--oro);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 20px;
}
.tabs button {
    background: none;
    border: none;
    border-radius: 0;
    padding: 10px 16px;
    color: var(--texto-tenue);
    font-weight: 500;
    box-shadow: none;
    transition: color 0.25s var(--ease-suave), border-color 0.25s var(--ease-suave);
}
.tabs button.activo {
    color: var(--oro-suave);
    border-bottom: 2px solid var(--oro);
}

/* Campo de contraseña con botón de ojito — ver toggleMostrarPassword() en app.js */
.campo-password-wrap {
    position: relative;
}
.campo-password-wrap input {
    padding-right: 42px;
}
.campo-password-wrap .boton-ojo {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    padding: 6px 8px;
    line-height: 1;
    opacity: 0.75;
}
.campo-password-wrap .boton-ojo:hover {
    opacity: 1;
}

/* Respeta a quien prefiere menos movimiento en pantalla */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}