/* ============================================================
   /neuralia: composiciones propias de la página.
   Los componentes (hero, tarjetas, marcos, estados) vienen de
   v2-system.css; acá solo va lo que es particular de esta página.
   ============================================================ */

/* --- Hero --- */
/* Sin foto: Neuralia es software y el hero no muestra hardware.
   El fondo claro y el marco vienen de .v2-hero-int. */
.nrl-hero__sello { margin: 0 0 1.25rem; }
/* El celular del hero no compite con el titular: más chico que el default */
.nrl-hero__celular { width: min(100%, 260px); }
@media (max-width: 899px) {
    .nrl-hero__celular { width: min(72%, 230px); }
}

/* --- 01 · Ejercicios ---
   Una tarjeta por grupo con el color de la app arriba; cada ejercicio con su
   nombre clínico y el que ve el paciente. Fuerza va aparte, punteada. */
.nrl-catalogo {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) { .nrl-catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .nrl-catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.nrl-catalogo__estado {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin: 0 0 .5rem;
    color: var(--v2-tinta-2);
}
.nrl-catalogo__estado .v2-estado { white-space: normal; }

.nrl-grupo {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.35rem 1rem;
    background: var(--v2-superficie);
    border: 1px solid var(--v2-borde);
    border-radius: var(--v2-radio-md);
    box-shadow: var(--v2-sombra-1);
    overflow: hidden;
    transition: transform var(--v2-dur) var(--v2-ease), box-shadow var(--v2-dur) var(--v2-ease);
}
/* La franja de color del grupo, la misma que usa la app */
.nrl-grupo::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--c);
}
.nrl-grupo:hover { transform: translateY(-2px); box-shadow: var(--v2-sombra-2); }

.nrl-grupo__cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}
/* h3 por semántica, pero con la voz de los títulos de tarjeta */
.nrl-grupo__t {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font: 400 1.35rem/1.2 var(--v2-font-accent);
    color: var(--v2-tinta);
}
.nrl-grupo__t::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c);
    flex: none;
}
.nrl-grupo__n {
    font-size: .78rem;
    font-weight: 500;
    color: var(--v2-tinta-3);
    white-space: nowrap;
}

.nrl-grupo ul { list-style: none; margin: 0; padding: 0; }
.nrl-grupo li, .nrl-ej {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .65rem 0;
    border-top: 1px solid var(--v2-borde);
    margin: 0;
}
.nrl-ej__clinico { font-weight: 500; color: var(--v2-tinta); line-height: 1.35; }
.nrl-ej__paciente { font-size: .84rem; color: var(--v2-tinta-3); }

/* Fuerza: ancho completo, punteada, con su estado a la vista */
.nrl-grupo--pendiente {
    grid-column: 1 / -1;
    background: transparent;
    border: 1.5px dashed color-mix(in srgb, var(--c) 60%, transparent);
    box-shadow: none;
}
.nrl-grupo--pendiente::before { display: none; }
.nrl-grupo--pendiente:hover { transform: none; box-shadow: none; }
.nrl-grupo__pendiente-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: .25rem; }
.nrl-grupo__nota { margin: .25rem 0 0; font-size: .9rem; color: var(--v2-tinta-2); max-width: 62ch; }
@media (min-width: 980px) {
    .nrl-grupo--pendiente {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr);
        align-items: center;
        column-gap: 2rem;
    }
    .nrl-grupo--pendiente .nrl-ej { border-top: 0; padding: 0; }
    .nrl-grupo__pendiente-cabeza { margin: 0; }
    .nrl-grupo__nota { margin: 0; }
}

.nrl-aviso { margin-top: var(--v2-espacio-bloque); }

/* --- 02 · Dos vistas --- */
.nrl-vistas { display: grid; gap: 3rem 2.5rem; }
.nrl-vistas > * { min-width: 0; }   /* la URL del navegador es nowrap */
@media (min-width: 900px) {
    .nrl-vistas { grid-template-columns: 260px minmax(0, 660px); justify-content: space-between; align-items: start; }
}
/* A escala de captura, no de página: el celular más chico y el panel con
   ancho máximo, recortado arriba para mostrar la ficha y la evolución */
.nrl-vista .v2-celular { width: min(100%, 240px); }
.nrl-vista--panel .v2-navegador img { max-height: 430px; object-fit: cover; object-position: top; }
.nrl-vista > p { margin: 0 0 1.75rem; max-width: 42ch; }
.nrl-vista > .v2-estado { margin-bottom: .75rem; }
.nrl-vista .v2-celular { margin-inline: 0; }
@media (max-width: 899px) {
    .nrl-vista .v2-celular { margin-inline: auto; width: min(100%, 260px); }
}

/* Lugar reservado: que se lea como "acá va una captura", no como un error */
.nrl-navegador__vacio {
    display: grid;
    place-items: center;
    aspect-ratio: 1440 / 900;
    padding: 1.5rem;
    text-align: center;
    background:
        repeating-linear-gradient(135deg, transparent 0 14px, rgba(var(--v2-violeta-rgb), .045) 14px 15px),
        var(--v2-violeta-50);
}
.v2-celular__vacio {
    background:
        repeating-linear-gradient(135deg, transparent 0 14px, rgba(var(--v2-violeta-rgb), .045) 14px 15px),
        var(--v2-violeta-50);
}
.nrl-reservado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    margin: 0;
    max-width: 30ch;
    font-size: var(--v2-fs-small);
    line-height: 1.5;
}
.nrl-reservado__icono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--v2-blanco);
    border: 1px dashed var(--v2-violeta-200);
    color: var(--v2-violeta-texto);
}

/* --- 03 · Funciones --- */
/* Cinco tarjetas: tres por fila en desktop, así no queda una huérfana de a cuatro */
.nrl-funciones__estado { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 1rem 0 0; color: var(--v2-tinta-2); }

/* Captura a la izquierda, lista numerada a la derecha */
.nrl-funciones { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) {
    .nrl-funciones { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
    .nrl-funciones .nrl-evolucion { position: sticky; top: calc(var(--v2-ancla) + 1rem); }
}
.nrl-funciones .nrl-evolucion { max-width: none; margin: 0; }
.nrl-funciones .nrl-evolucion img { max-height: 480px; }

.nrl-funciones__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--v2-borde-fuerte); }
.nrl-funcion {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--v2-borde);
}
.nrl-funcion__n {
    padding-top: .2rem;
    font: 500 .78rem/1 var(--v2-font-main);
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    color: var(--v2-violeta-texto);
}
.nrl-funcion__t {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem;
    margin: 0 0 .35rem;
    font: 500 1.08rem/1.3 var(--v2-font-main);
    color: var(--v2-tinta);
}
.nrl-funcion__extra {
    font: 600 .66rem/1 var(--v2-font-main);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-tinta-3);
}
.nrl-funcion p { margin: 0; color: var(--v2-tinta-2); line-height: 1.6; }

/* --- 04 · Mide y avisa --- */
.nrl-limites {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    max-width: 760px;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--v2-borde-fuerte);
}
.nrl-limites li {
    position: relative;
    padding: .9rem 0 .9rem 2rem;
    border-bottom: 1px solid var(--v2-borde-fuerte);
    color: var(--v2-tinta);
}
/* Raya en lugar de check: son límites, no beneficios */
.nrl-limites li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--v2-violeta);
}
.nrl-fuente { margin: 1.75rem 0 0; }

/* --- Cierre --- */
.nrl-cierre { margin-bottom: 0; }
.nrl-cierre .v2-acciones { justify-content: center; }

/* --- Notas --- */
.nrl-notas { margin-top: 0; margin-bottom: 3rem; padding-top: 2rem; border-top: 0; }

/* Evolución por ejercicio: ancha pero acotada, para que no ocupe tres pantallas */
.nrl-evolucion { max-width: 660px; margin: 0 auto var(--v2-espacio-bloque); }
.nrl-evolucion img { max-height: 520px; object-fit: cover; object-position: top; }