/* Generar la jornada (31 oct 2026).

   Jaime: «el estilo de esta pantalla está un poquito antiguo» y la fila de
   Tendencias no se alcanzaba a ver sin desplazar. Se rehízo con las piezas de
   Configurar y Preparar: negro plano, una tarjeta de filas que dicen su valor
   y abren una hoja, y el botón cobre debajo. Los cuatro datos de la ficha,
   el nombre y las tendencias son filas; antes ocupaban media pantalla. */

/* ---- Las filas ---- */

.jg-filas {
    display: grid;
    margin-top: 1.05rem;
    border: 1px solid rgba(241, 232, 219, .09);
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, .018);
    overflow: hidden;
}

.jg-fila {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: .8rem;
    width: 100%;
    min-height: 3.9rem;
    padding: .62rem .9rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.jg-fila + .jg-fila { border-top: 1px solid rgba(241, 232, 219, .07); }
.jg-fila:hover { background: rgba(220, 147, 109, .06); }
.jg-fila:focus-visible { outline: 2px solid #e9a97f; outline-offset: -2px; }

/* El mismo azulejo de ícono que las filas de Preparar. */
.jg-fila-ic {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border: 1px solid rgba(220, 147, 109, .24);
    border-radius: .72rem;
    color: #d78a63;
    background: rgba(107, 50, 35, .18);
}

.jg-fila-ic svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.jg-fila-tx { min-width: 0; }
.jg-fila-tx strong { display: block; color: #f5ece3; font: 750 .93rem "Sora", sans-serif; letter-spacing: -.02em; }

.jg-fila-tx small {
    display: block;
    margin-top: .12rem;
    overflow: hidden;
    color: #c7b39c;
    font: 600 .78rem "Manrope", sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jg-fila-tx small .jg-falta { color: #e79a72; }
.jg-fila-go { width: 1rem; height: 1rem; fill: none; stroke: #8f857c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.jg-nota { margin: .9rem 0 0 !important; color: #a1968b !important; font-size: .82rem !important; }

/* ---- Las hojas: ficha, nombre y tendencias ---- */

.jg-hoja:not([hidden]) { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; }
.jg-hoja-fondo { position: absolute; inset: 0; background: rgba(4, 4, 5, .74); }

.jg-hoja-panel {
    position: relative;
    width: min(100%, 28rem);
    max-height: 88vh;
    overflow: auto;
    margin: 0;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border: 1px solid rgba(241, 232, 219, .1);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 30%), #0d0c0e;
}

.jg-hoja-tirador { width: 36px; height: 4px; margin: 4px auto 12px; border-radius: 999px; background: rgba(241, 232, 219, .18); }
.jg-hoja-titulo { margin: 0; color: #f5ece3; font: 750 1.1rem "Sora", sans-serif; letter-spacing: -.03em; text-align: center; }
.jg-hoja-copy { margin: .3rem 0 1rem; color: #a1968b; font: 600 .82rem/1.45 "Manrope", sans-serif; text-align: center; }
body.jg-con-hoja { overflow: hidden; }

.jg-hoja-pie { display: flex; gap: .6rem; margin-top: 1rem; }

.jg-hoja-pie button {
    flex: 1;
    display: grid;
    place-items: center;
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    background: #d78a63;
    color: #160e0a;
    font: 800 .82rem "Manrope", sans-serif;
    cursor: pointer;
}

/* La ficha en su hoja: los cuatro campos en dos columnas. `app.css` pone
   `input { width:100% }` y `form p { display:grid }`: acá no hay párrafos. */
.jg-hoja-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.jg-hoja-campos label,
.jg-hoja-nombre label { display: grid; gap: .3rem; color: #a1968b; font: 800 .66rem "Manrope", sans-serif; letter-spacing: .14em; text-transform: uppercase; }

.jg-hoja-campos input,
.jg-hoja-nombre input {
    width: 100%;
    min-height: 2.9rem;
    padding: .55rem .75rem;
    border: 1px solid rgba(241, 232, 219, .14);
    border-radius: .75rem;
    background: rgba(255, 255, 255, .03);
    color: #f5ece3;
    font: 750 1rem "Manrope", sans-serif;
    letter-spacing: 0;
    text-transform: none;
}

.jg-hoja-campos input:focus,
.jg-hoja-nombre input:focus { outline: 2px solid #e9a97f; outline-offset: 1px; border-color: transparent; }
.jg-hoja-campos input::placeholder,
.jg-hoja-nombre input::placeholder { color: #776d66; font-weight: 600; }
/* Chrome pinta en negro los íconos de fecha y hora sobre fondo oscuro. */
.jg-hoja-campos input::-webkit-calendar-picker-indicator { filter: invert(78%) sepia(18%) saturate(420%) hue-rotate(337deg); cursor: pointer; }
.jg-hoja-aviso { margin: .8rem 0 0; color: #8f857c; font: 600 .74rem/1.4 "Manrope", sans-serif; }
.jg-hoja-nombre { display: grid; gap: .5rem; }
.jg-hoja-nombre span { color: #a1968b; font: 600 .76rem/1.4 "Manrope", sans-serif; }
.jg-hoja-nombre span strong { color: #f5ece3; }

/* ---- Tendencias ---- */

.jg-cuota { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .8rem 0; border-top: 1px solid rgba(241, 232, 219, .07); }
.jg-cuota strong { display: inline-flex; align-items: center; gap: .42rem; color: #f5ece3; font: 750 .93rem "Sora", sans-serif; }
.jg-cuota small { display: block; margin-top: .15rem; color: #a1968b; font: 600 .74rem "Manrope", sans-serif; }
.jg-punto { flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.jg-cuota[data-paleta]:not([data-paleta="default"]) .jg-punto { background: rgb(var(--gen)); clip-path: var(--forma, none); }
.jg-paso { display: flex; align-items: center; gap: .2rem; }

.jg-paso button {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 1px solid rgba(241, 232, 219, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #f5ece3;
    font: 700 1.1rem "Manrope", sans-serif;
    cursor: pointer;
}

.jg-paso button:disabled { opacity: .35; cursor: default; }
.jg-paso output { min-width: 2.6rem; color: #f5ece3; font: 800 1.05rem "Sora", sans-serif; text-align: center; }
.jg-paso span { min-width: 2.4rem; color: #8f857c; font: 600 .74rem "Manrope", sans-serif; }

.jg-variedad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    padding: .85rem 0 .2rem;
    border-top: 1px solid rgba(241, 232, 219, .07);
    cursor: pointer;
}

.jg-variedad strong { display: block; color: #f5ece3; font: 750 .93rem "Sora", sans-serif; }
.jg-variedad small { display: block; margin-top: .15rem; color: #a1968b; font: 600 .74rem/1.4 "Manrope", sans-serif; }

/* `input { width:100% }` de app.css aplasta cualquier casilla: se fija acá. */
.jg-variedad input[type="checkbox"] {
    appearance: none;
    position: relative;
    width: 2.9rem;
    min-width: 2.9rem;
    height: 1.7rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    cursor: pointer;
    transition: background .15s ease;
}

.jg-variedad input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: #d8cdc2;
    transition: transform .15s ease;
}

.jg-variedad input[type="checkbox"]:checked { background: #d78a63; }
.jg-variedad input[type="checkbox"]:checked::after { transform: translateX(1.2rem); background: #160e0a; }

/* Lista para generar, la pantalla va sin marco: el título sobre el negro y las
   filas en su tarjeta, como Configurar. Una tarjeta dentro de otra eran dos
   bordes para lo mismo. Armando y con error, el marco sigue. */
.journey-generation-card.jg-sin-marco:not(.is-generating) { padding: .2rem 0 0; border: 0; background: none; overflow: visible; }
.jg-hoja-nombre span strong { white-space: nowrap; }