/* theme_noche.css
   -----------------------------------------------------------------------
   Capa del módulo de sueño sobre el tema compartido
   (budget app/theme_presupuesto.css). Los componentes .rv-* salen de allí;
   aquí solo se cambian los tokens de color y se añaden las piezas propias
   del sueño: la tarjeta nocturna, el anillo de puntuación, la línea de la
   noche, el gráfico semanal y el círculo de respiración.

   La paleta conserva el índigo, la lavanda y el ámbar del diseño original
   de Stitch (que era solo oscuro, azul noche). El modo claro es una versión
   diurna del mismo índigo.
   ----------------------------------------------------------------------- */

/* ----------------------------- Tokens: claro ----------------------------- */
:root {
    --color-background: 247 248 252;
    --color-surface: 247 248 252;
    --color-surface-bright: 255 255 255;
    --color-surface-dim: 226 229 240;
    --color-surface-container-lowest: 255 255 255;
    --color-surface-container-low: 242 244 250;
    --color-surface-container: 237 239 247;
    --color-surface-container-high: 229 232 242;
    --color-surface-container-highest: 219 223 236;
    --color-surface-variant: 225 228 239;

    --color-on-background: 17 20 33;
    --color-on-surface: 17 20 33;
    --color-on-surface-variant: 92 96 118;
    --color-inverse-surface: 26 30 44;
    --color-inverse-on-surface: 240 242 250;

    --color-outline: 142 146 166;
    --color-outline-variant: 222 225 236;

    /* Índigo del diseño original (su "inverse-primary"). */
    --color-primary: 75 86 175;
    --color-on-primary: 255 255 255;
    --color-primary-container: 223 224 255;
    --color-on-primary-container: 25 36 126;
    --color-primary-fixed: 223 224 255;
    --color-primary-fixed-dim: 188 194 255;
    --color-on-primary-fixed: 0 10 100;
    --color-on-primary-fixed-variant: 50 61 150;
    --color-inverse-primary: 188 194 255;
    --color-surface-tint: 75 86 175;

    /* Lavanda. */
    --color-secondary: 112 82 160;
    --color-on-secondary: 255 255 255;
    --color-secondary-container: 236 220 255;
    --color-on-secondary-container: 60 34 99;

    /* Ámbar del amanecer: horarios, consejos y la conciliación. */
    --color-tertiary: 154 90 24;
    --color-on-tertiary: 255 255 255;
    --color-tertiary-container: 255 220 191;
    --color-on-tertiary-container: 74 40 0;

    --color-error: 186 26 26;
    --color-on-error: 255 255 255;
    --color-error-container: 255 218 214;
    --color-on-error-container: 65 0 2;

    /* Cielo nocturno de la tarjeta principal. */
    --sl-hero-from: #3c47a3;
    --sl-hero-mid: #1b2163;
    --sl-hero-to: #090c24;
    --sl-accent-on-dark: #c9ceff;
    --sl-amber-on-dark: #ffc58e;
}

/* ----------------------------- Tokens: oscuro ----------------------------- */
/* Los mismos valores que tenía el diseño de Stitch. */
html.dark {
    --color-background: 15 19 28;
    --color-surface: 15 19 28;
    --color-surface-bright: 53 57 67;
    --color-surface-dim: 10 14 23;
    --color-surface-container-lowest: 10 14 23;
    --color-surface-container-low: 24 27 37;
    --color-surface-container: 28 32 41;
    --color-surface-container-high: 38 42 52;
    --color-surface-container-highest: 49 53 63;
    --color-surface-variant: 49 53 63;

    --color-on-background: 223 226 239;
    --color-on-surface: 223 226 239;
    --color-on-surface-variant: 164 167 188;
    --color-inverse-surface: 223 226 239;
    --color-inverse-on-surface: 15 19 28;

    --color-outline: 144 143 157;
    --color-outline-variant: 49 53 63;

    --color-primary: 188 194 255;
    --color-on-primary: 25 36 126;
    --color-primary-container: 50 61 150;
    --color-on-primary-container: 223 224 255;
    --color-primary-fixed: 50 61 150;
    --color-primary-fixed-dim: 188 194 255;
    --color-on-primary-fixed: 223 224 255;
    --color-on-primary-fixed-variant: 188 194 255;
    --color-inverse-primary: 75 86 175;
    --color-surface-tint: 188 194 255;

    --color-secondary: 214 186 255;
    --color-on-secondary: 60 34 99;
    --color-secondary-container: 83 57 124;
    --color-on-secondary-container: 236 220 255;

    --color-tertiary: 250 186 124;
    --color-on-tertiary: 74 40 0;
    --color-tertiary-container: 104 60 8;
    --color-on-tertiary-container: 255 220 191;

    --color-error: 255 180 171;
    --color-on-error: 105 0 5;
    --color-error-container: 147 0 10;
    --color-on-error-container: 255 218 214;

    --sl-hero-from: #2e3888;
    --sl-hero-mid: #141a4c;
    --sl-hero-to: #05070f;
}

/* --------------------------- Tarjeta nocturna --------------------------- */
/* La misma idea que .rv-paycard de finanzas, con un cielo de noche y unas
   pocas estrellas pintadas con degradados (sin imágenes). */
.sl-hero {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 22px;
    color: #fff;
    background:
        radial-gradient(1.5px 1.5px at 18% 22%, rgb(255 255 255 / .7), transparent 60%),
        radial-gradient(1px 1px at 72% 14%, rgb(255 255 255 / .6), transparent 60%),
        radial-gradient(1.5px 1.5px at 86% 58%, rgb(255 255 255 / .45), transparent 60%),
        radial-gradient(1px 1px at 38% 78%, rgb(255 255 255 / .4), transparent 60%),
        radial-gradient(1px 1px at 58% 40%, rgb(255 255 255 / .35), transparent 60%),
        radial-gradient(130% 120% at 88% 0%, var(--sl-hero-from) 0%, var(--sl-hero-mid) 46%, var(--sl-hero-to) 100%);
}

.sl-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(128deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / 0) 46%);
}

.sl-hero>* {
    position: relative;
    z-index: 1;
}

.sl-hero__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgb(255 255 255 / .62);
}

.sl-hero__muted {
    color: rgb(255 255 255 / .72);
}

.sl-hero .rv-badge {
    background-color: rgb(255 255 255 / .14);
    color: #fff;
}

.sl-hero .rv-btn--primary {
    background-color: #fff;
    color: #19247e;
}

/* Métricas pequeñas dentro de la tarjeta (eficiencia, conciliación…). */
.sl-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background-color: rgb(255 255 255 / .09);
}

.sl-stat__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgb(255 255 255 / .75);
}

.sl-stat__label .material-symbols-outlined {
    font-size: 18px;
    color: var(--sl-amber-on-dark);
}

.sl-stat__value {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Anillo de puntuación. */
.sl-ring {
    transform: rotate(-90deg);
}

.sl-ring circle {
    fill: none;
    stroke-linecap: round;
}

.sl-ring__track {
    stroke: rgb(255 255 255 / .16);
}

.sl-ring__bar {
    stroke: var(--sl-accent-on-dark);
    transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1);
}

/* Horas editables dentro de la tarjeta del registro. */
.sl-time-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 18px;
    background-color: rgb(255 255 255 / .09);
    transition: background-color .2s ease;
}

.sl-time-field:focus-within {
    background-color: rgb(255 255 255 / .16);
}

.sl-time-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgb(255 255 255 / .75);
    cursor: pointer;
}

.sl-time-field input {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    color-scheme: dark;
    font: inherit;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    outline: none;
    cursor: pointer;
}

/* ------------------------- Línea de la noche ------------------------- */
/* Barra de la hora de acostarse a la de despertar: conciliación en ámbar,
   sueño en índigo y una marca por cada despertar. */
.sl-timeline {
    position: relative;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    background-color: rgb(255 255 255 / .12);
}

.sl-timeline__latency {
    background-color: var(--sl-amber-on-dark);
}

.sl-timeline__sleep {
    flex: 1 1 auto;
    background-color: var(--sl-accent-on-dark);
}

.sl-timeline__wake {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    margin-left: -1.5px;
    background-color: var(--sl-hero-to);
}

/* ------------------------- Reparto de la noche ------------------------- */
.sl-split {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    gap: 2px;
    background-color: rgb(var(--color-surface-container-highest));
}

.sl-split>span {
    height: 100%;
    transition: width .8s cubic-bezier(.2, .8, .2, 1);
}

.sl-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* --------------------------- Gráfico semanal --------------------------- */
.sl-chart {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    height: 150px;
}

.sl-chart__goal {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1.5px dashed rgb(var(--color-tertiary) / .7);
    pointer-events: none;
    z-index: 1;
}

.sl-chart__legend-goal {
    width: 18px;
    border-top: 1.5px dashed rgb(var(--color-tertiary) / .8);
}

.sl-chart__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.sl-chart__col[disabled] {
    cursor: default;
}

/* Altos fijos: el JS coloca la línea de la meta contando con ellos. */
.sl-chart__value {
    position: relative;
    z-index: 2;
    height: 14px;
    line-height: 14px;
    padding: 0 3px;
    border-radius: 6px;
    /* La línea de la meta pasa por detrás de la etiqueta, no por encima. */
    background-color: rgb(var(--color-surface-container));
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--color-on-surface-variant));
    white-space: nowrap;
}

.sl-chart__bar {
    width: 100%;
    max-width: 34px;
    min-height: 6px;
    border-radius: 10px 10px 6px 6px;
    background-color: rgb(var(--color-primary) / .35);
    transition: height .8s cubic-bezier(.2, .8, .2, 1), background-color .2s ease;
}

.sl-chart__bar--goal {
    background-color: rgb(var(--color-primary) / .75);
}

.sl-chart__bar--empty {
    background-color: rgb(var(--color-surface-container-highest));
}

.sl-chart__col[aria-pressed="true"] .sl-chart__bar {
    background-color: rgb(var(--color-primary));
}

.sl-chart__col[aria-pressed="true"] .sl-chart__value,
.sl-chart__col[aria-pressed="true"] .sl-chart__day {
    color: rgb(var(--color-primary));
}

.sl-chart__day {
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    font-weight: 700;
    color: rgb(var(--color-on-surface-variant));
}

.sl-chart__col:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
    border-radius: 10px;
}

/* ------------------------------ Formularios ------------------------------ */
/* Tarjeta elegible (conciliación, sensación al despertar). */
.sl-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 12px 6px;
    border: 1px solid transparent;
    border-radius: 18px;
    background-color: rgb(var(--color-surface-container-high) / .7);
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .1s ease;
}

.sl-option:hover {
    background-color: rgb(var(--color-surface-container-high));
}

.sl-option:active {
    transform: scale(.97);
}

.sl-option[aria-pressed="true"] {
    border-color: rgb(var(--color-primary));
    background-color: rgb(var(--color-primary) / .12);
}

.sl-option .material-symbols-outlined {
    font-size: 28px;
    color: rgb(var(--color-on-surface-variant));
}

.sl-option[aria-pressed="true"] .material-symbols-outlined {
    color: rgb(var(--color-primary));
    font-variation-settings: 'FILL' 1;
}

.sl-option__title {
    font-size: 14px;
    font-weight: 700;
}

.sl-option__sub {
    font-size: 12px;
    color: rgb(var(--color-on-surface-variant));
}

/* Botón redondo con número (despertares). */
.sl-count {
    height: 48px;
    border: 0;
    border-radius: 999px;
    background-color: rgb(var(--color-surface-container-high));
    color: rgb(var(--color-on-surface));
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .1s ease;
}

.sl-count:active {
    transform: scale(.95);
}

.sl-count[aria-pressed="true"] {
    background-color: rgb(var(--color-primary));
    color: rgb(var(--color-on-primary));
}

.sl-option:focus-visible,
.sl-count:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

/* Píldoras de fecha: qué noche se está registrando. */
.sl-night {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 62px;
    padding: 9px 10px;
    border: 0;
    border-radius: 16px;
    background-color: rgb(var(--color-surface-container-high));
    color: rgb(var(--color-on-surface));
    font: inherit;
    cursor: pointer;
}

.sl-night__name {
    font-size: 12px;
    font-weight: 600;
    color: rgb(var(--color-on-surface-variant));
    white-space: nowrap;
}

.sl-night__num {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sl-night__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: transparent;
}

.sl-night--logged .sl-night__dot {
    background-color: rgb(var(--color-primary));
}

.sl-night[aria-pressed="true"] {
    background-color: rgb(var(--color-on-surface));
    color: rgb(var(--color-surface));
}

.sl-night[aria-pressed="true"] .sl-night__name {
    color: rgb(var(--color-surface) / .7);
}

.sl-night--logged[aria-pressed="true"] .sl-night__dot {
    background-color: rgb(var(--color-surface) / .8);
}

/* Control deslizante (temperatura, volumen). */
.sl-range {
    width: 100%;
    accent-color: rgb(var(--color-primary));
    cursor: pointer;
}

/* Escala de temperatura con la franja ideal marcada. */
.sl-thermo {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6aa8ff 0%, #8fd3c2 30%, #9ad17a 50%, #f2c46b 72%, #ee7b5b 100%);
}

.sl-thermo__ideal {
    position: absolute;
    top: -4px;
    bottom: -4px;
    border: 2px solid rgb(var(--color-on-surface));
    border-radius: 999px;
    pointer-events: none;
}

/* El deslizador real va encima, invisible: se arrastra sobre la barra de
   colores y el marcador lo sigue. */
.sl-thermo input {
    position: absolute;
    inset: -12px 0;
    width: 100%;
    height: calc(100% + 24px);
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.sl-thermo:focus-within {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 6px;
}

.sl-thermo__marker {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border-radius: 50%;
    background-color: rgb(var(--color-surface-container-lowest));
    border: 3px solid rgb(var(--color-on-surface));
    transform: translateY(-50%);
    transition: left .2s ease;
}

/* Reto de 7 noches. */
.sl-segments {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.sl-segments>span {
    height: 8px;
    border-radius: 999px;
    background-color: rgb(var(--color-surface-container-highest));
}

.sl-segments>span.is-done {
    background-color: rgb(var(--color-primary));
}

.sl-segments>span.is-today {
    box-shadow: 0 0 0 2px rgb(var(--color-surface-container)), 0 0 0 3.5px rgb(var(--color-primary) / .6);
}

/* Paso del protocolo 10-3-2-1-0. */
.sl-step {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 8px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sl-step:hover {
    background-color: rgb(var(--color-surface-container-high) / .6);
}

.sl-step__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
    background-color: rgb(var(--color-secondary) / .16);
    color: rgb(var(--color-secondary));
}

.sl-step__check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid rgb(var(--color-outline) / .6);
    color: transparent;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.sl-step__check .material-symbols-outlined {
    font-size: 18px;
    font-weight: 700;
}

.sl-step[aria-pressed="true"] .sl-step__check {
    border-color: rgb(var(--color-primary));
    background-color: rgb(var(--color-primary));
    color: rgb(var(--color-on-primary));
}

.sl-step[aria-pressed="true"] .rv-row__title {
    color: rgb(var(--color-on-surface-variant));
}

.sl-step:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

/* ----------------------------- Respiración ----------------------------- */
.sl-breath {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.sl-breath__halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--color-primary) / .35) 0%, rgb(var(--color-primary) / .12) 60%, rgb(var(--color-primary) / 0) 72%);
    transform: scale(.55);
    transition-property: transform;
    transition-timing-function: ease-in-out;
}

.sl-breath__core {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: rgb(var(--color-primary));
    color: rgb(var(--color-on-primary));
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Botón de icono sobre la tarjeta nocturna (editar la noche). */
.sl-hero .rv-icon-btn {
    color: #fff;
}

.sl-hero .rv-icon-btn:hover {
    background-color: rgb(255 255 255 / .14);
    color: #fff;
}