/* =============================================================================
   Depuración Corporal · Pantallas de acceso
   -----------------------------------------------------------------------------
   Login, verificación en dos pasos y selección de rol. Es la primera superficie
   construida sobre css/theme.css: aquí no hay ni un color literal, todo sale de
   los tokens.

   Estas pantallas NO cargan Angle ni Bootstrap. AuthLayout enlaza únicamente
   theme.css y esta hoja, así que el marcado es propio y no hereda nada del tema
   antiguo.

   Anatomía
   --------
     .auth-shell            raíz a pantalla completa, en modo oscuro
       .auth-bg--photo      fotografía de la lima (Images/background.jpg) + velos
       .auth-bg--glow       degradado radial verde, sin fotografía
       .auth-split          rejilla 2 columnas: reclamo abajo-izquierda, tarjeta a la derecha
       .auth-center         columna centrada, para 2FA y selección de rol
   ============================================================================= */

/* El margen de 8px que trae el navegador por defecto sobra: sin Angle cargado nadie
   lo quita, y sumado al alto del 100% deja una barra de scroll fantasma. */
html,
body {
    height: 100%;
    margin: 0;
}

/* Dentro del acceso todo el marcado es nuevo, así que aquí sí se puede usar el
   selector universal: ninguna hoja antigua entra en este árbol. */
.auth-shell,
.auth-shell *,
.auth-shell *::before,
.auth-shell *::after {
    box-sizing: border-box;
}

.auth-shell {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    font-family: var(--dc-font-sans);
    font-size: var(--dc-text-base);
    line-height: 1.5;
    color: var(--dc-text);
    background-color: var(--dc-bg);
    -webkit-font-smoothing: antialiased;
}

/* --- Fondos ------------------------------------------------------------------ */

.auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Fotografía a sangre. Se ancla a la izquierda para que la lima quede completa y
   los velos oscurecen hacia la derecha, que es donde va la tarjeta. */
.auth-bg--photo {
    background-image: url("../Images/background.jpg");
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--dc-deep-900);
}

.auth-bg--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
                rgba(6, 17, 16, .10) 0%,
                rgba(6, 17, 16, .38) 42%,
                rgba(6, 17, 16, .74) 100%);
}

/* Velo inferior: sostiene el reclamo sobre las burbujas. */
.auth-bg--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(6, 17, 16, .18) 0%,
                rgba(6, 17, 16, 0) 35%,
                rgba(6, 17, 16, .62) 100%);
}

/* Degradado verde sin fotografía: la usan las pantallas posteriores al login,
   donde la imagen distraería del contenido. */
.auth-bg--glow {
    background-color: var(--dc-deep-900);
    background-image:
        radial-gradient(120% 85% at 50% -10%, var(--dc-deep-500) 0%, rgba(23, 68, 63, 0) 62%),
        radial-gradient(80% 60% at 50% 40%, rgba(18, 52, 48, .85) 0%, rgba(18, 52, 48, 0) 70%);
}

/* --- Rejilla del login -------------------------------------------------------- */

.auth-split {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    min-height: 100%;
}

.auth-hero {
    grid-column: 1;
    align-self: end;
    max-width: 40rem;
    padding: var(--dc-space-12) clamp(var(--dc-space-6), 4vw, var(--dc-space-12));
}

.auth-hero__title {
    margin: var(--dc-space-5) 0 var(--dc-space-3);
    font-size: clamp(1.75rem, 3.2vw, var(--dc-text-3xl));
    font-weight: var(--dc-weight-normal);
    letter-spacing: var(--dc-tracking-tight);
    line-height: 1.15;
    color: var(--dc-text);
}

.auth-hero__text {
    max-width: 26rem;
    margin: 0;
    font-size: var(--dc-text-md);
    color: var(--dc-text-muted);
}

.auth-panel {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--dc-space-8) var(--dc-space-6);
}

/* --- Columna centrada (2FA y selección de rol) --------------------------------- */

.auth-center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: var(--dc-space-12) var(--dc-space-6);
    text-align: center;
}

.auth-center__head {
    margin-bottom: var(--dc-space-8);
}

.auth-center__title {
    margin: var(--dc-space-2) 0 var(--dc-space-3);
    font-size: clamp(1.75rem, 3.4vw, var(--dc-text-3xl));
    font-weight: var(--dc-weight-semibold);
    letter-spacing: var(--dc-tracking-tight);
    line-height: 1.15;
    color: var(--dc-text);
}

.auth-center__text {
    margin: 0;
    font-size: var(--dc-text-md);
    color: var(--dc-text-muted);
}

/* --- Marca --------------------------------------------------------------------- */

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--dc-space-2);
    font-size: var(--dc-text-lg);
    line-height: 1;
    color: var(--dc-text);
}

.auth-brand svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--dc-accent);
}

.auth-brand__sep {
    color: var(--dc-text-subtle);
    font-weight: var(--dc-weight-normal);
}

.auth-brand__soft { color: var(--dc-text-muted); }

/* --- Tarjeta de acceso ----------------------------------------------------------- */

.auth-card {
    width: 100%;
    max-width: 23.75rem; /* 380px */
    padding: var(--dc-space-8) var(--dc-space-6);
    background-color: var(--dc-surface);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-lg);
    box-shadow: var(--dc-shadow-4);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    text-align: left;
}

.auth-card__title {
    margin: 0 0 var(--dc-space-6);
    font-size: var(--dc-text-2xl);
    font-weight: var(--dc-weight-semibold);
    letter-spacing: var(--dc-tracking-tight);
    line-height: 1.2;
    color: var(--dc-text);
}

.auth-card__lead {
    margin: calc(var(--dc-space-6) * -1 + var(--dc-space-2)) 0 var(--dc-space-6);
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
}

/* La casilla de "recordarme" respira más que un campo normal. */
.auth-card .dc-check { margin: var(--dc-space-5) 0; }

/* Código de un solo uso: se lee de un vistazo, no como texto corrido. */
.auth-code {
    text-align: center;
    font-size: var(--dc-text-xl);
    font-weight: var(--dc-weight-semibold);
    letter-spacing: .35em;
    text-indent: .35em; /* compensa el hueco que la última letra deja a la derecha */
}

/* --- Pie -------------------------------------------------------------------------- */

.auth-foot {
    margin: var(--dc-space-5) 0 0;
    font-size: var(--dc-text-xs);
    line-height: 1.7;
    text-align: center;
    color: var(--dc-text-subtle);
}

.auth-foot a { font-weight: var(--dc-weight-medium); }

/* --- Selección de rol -------------------------------------------------------------- */

/*
   Tres columnas, no cuatro.

   Son cinco areas y la clinica las quiere repartidas 3 + 2: arriba las de consulta
   —Depuracion, Holistica y Nutricion— y debajo las de gestion. Con tres columnas el
   corte sale solo del orden en que estan declaradas en SeleccionarRol.razor, sin
   numeros ni saltos escritos a mano: si maniana hay un area mas, se coloca sola.

   El ancho baja de 50 a 38rem para que cada tarjeta siga midiendo lo mismo que con
   cuatro columnas y no se estiren al quitar una.
*/
.role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dc-space-5);
    width: 100%;
    max-width: 38rem;
    margin: 0 auto;
}

.role-card {
    position: relative;
    display: block;
    padding: var(--dc-space-6) var(--dc-space-4) var(--dc-space-5);
    text-align: center;
    text-decoration: none;
    background-color: var(--dc-surface-2);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-lg);
    transition: transform var(--dc-duration) var(--dc-ease),
                border-color var(--dc-duration) var(--dc-ease),
                background-color var(--dc-duration) var(--dc-ease),
                box-shadow var(--dc-duration) var(--dc-ease);
}

.role-card:hover {
    transform: translateY(-2px);
    background-color: var(--dc-accent-soft);
    border-color: rgba(var(--dc-accent-rgb), .45);
    box-shadow: var(--dc-shadow-3);
}

.role-card:focus-visible {
    outline: none;
    border-color: var(--dc-accent);
    box-shadow: 0 0 0 3px var(--dc-accent-ring);
}

.role-card__arrow {
    position: absolute;
    top: var(--dc-space-4);
    right: var(--dc-space-4);
    display: flex;
    color: var(--dc-text-subtle);
    transition: transform var(--dc-duration) var(--dc-ease),
                color var(--dc-duration) var(--dc-ease);
}

.role-card__arrow svg { width: 1rem; height: 1rem; }

.role-card:hover .role-card__arrow {
    transform: translateX(3px);
    color: var(--dc-accent);
}

.role-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto var(--dc-space-4);
    color: var(--dc-accent);
    background-color: var(--dc-accent-soft);
    border: 1px solid rgba(var(--dc-accent-rgb), .22);
    border-radius: var(--dc-radius-lg);
}

.role-card__icon svg { width: 1.5rem; height: 1.5rem; }

.role-card__title {
    display: block;
    margin-bottom: var(--dc-space-1);
    font-size: var(--dc-text-base);
    font-weight: var(--dc-weight-semibold);
    color: var(--dc-text);
}

.role-card__text {
    display: block;
    font-size: var(--dc-text-xs);
    line-height: 1.45;
    color: var(--dc-text-muted);
}

/* El estado vacío es una .dc-note--empty del tema; aquí solo se le acota el ancho
   para que no se estire a toda la columna. */
.role-empty {
    max-width: 26rem;
    margin: 0 auto;
    padding: var(--dc-space-6);
}

/* --- Adaptación ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 28rem; }
}

/* Por debajo de esta anchura el reclamo ya no cabe al lado de la tarjeta: se apila
   encima, y la fotografía pasa a ser solo fondo. */
@media (max-width: 900px) {
    .auth-split {
        grid-template-columns: 1fr;
        justify-items: center;
        align-content: center;
        gap: var(--dc-space-8);
        padding: var(--dc-space-8) 0;
    }

    /* justify-items: center encoge las columnas al contenido, así que el ancho hay
       que declararlo: si no, la tarjeta no llega a sus 380px. */
    .auth-hero {
        grid-column: 1;
        align-self: auto;
        width: 100%;
        max-width: 30rem;
        padding: 0 var(--dc-space-6);
        text-align: center;
    }

    .auth-hero__text { margin: 0 auto; }

    .auth-panel {
        grid-column: 1;
        width: 100%;
        max-width: 30rem;
        padding: 0 var(--dc-space-6);
    }

    .auth-bg--photo::before {
        background: linear-gradient(180deg,
                    rgba(6, 17, 16, .55) 0%,
                    rgba(6, 17, 16, .78) 100%);
    }
}

@media (max-width: 560px) {
    .auth-card { padding: var(--dc-space-6) var(--dc-space-5); }
    .role-grid { grid-template-columns: minmax(0, 1fr); max-width: 20rem; }
    .auth-center { padding: var(--dc-space-8) var(--dc-space-5); }
}

@media (prefers-reduced-motion: reduce) {
    .role-card,
    .role-card__arrow {
        transition: none;
    }

    .role-card:hover { transform: none; }
}