/* Quimika · Hoja compartida: acceso, registro, recuperación y edición del perfil.
Conservar ambos sistemas: .q-auth-* y .q-form-*. */
/* Quimika · Sistema compartido de formularios públicos.
Login, registro, recuperación y compatibilidad usan las mismas reglas.
Las clases anteriores se conservan únicamente donde las usa JavaScript. */
.q-auth {
    min-height: 100svh;
}

.q-auth-layout {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
    min-height: 100svh;
}

.q-auth-aside {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 42px;
    padding: 40px clamp(30px, 4.5vw, 76px) 30px;
    background: var(--q-soft);
    overflow: hidden;
    isolation: isolate;
}

.q-auth-aside::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -135px;
    bottom: -170px;
    width: 410px;
    height: 410px;
    border: 1px solid color-mix(in srgb, var(--q-brand) 20%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 52px color-mix(in srgb, var(--q-brand) 3%, transparent), 0 0 0 105px color-mix(in srgb, var(--q-brand) 2%, transparent);
    pointer-events: none;
}

.q-brand-caption {
    display: none;
}

.q-auth-story {
    position: relative;
    max-width: 490px;
    padding: 15px 0 35px;
}

.q-auth-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--q-action-hover);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.q-auth-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    flex: 0 0 22px;
    background: var(--q-brand);
}

.q-auth-story h1 {
    margin: 23px 0 24px;
    color: var(--q-text);
    font: 500 clamp(44px, 4.6vw, 74px)/1.05 var(--q-heading-font);
    letter-spacing: -.045em;
    overflow-wrap: break-word;
}

.q-auth-story h1 em {
    color: var(--q-action);
    font-style: normal;
}

.q-auth-story p {
    max-width: 365px;
    margin: 0;
    color: var(--q-muted);
    font-size: 16px;
    line-height: 1.85;
}

.q-auth-foot {
    color: var(--q-muted);
    font-size: 12px;
}

.q-auth-foot::before {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: 17px;
    background: var(--q-brand);
}

.q-auth .decoracion {
    display: none;
}

.q-auth-main {
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    padding: 42px clamp(24px, 4vw, 64px);
}

.q-auth-card {
    width: min(100%, 486px);
    padding: clamp(26px, 3vw, 42px);
    border: 1px solid var(--q-border);
    border-radius: var(--q-radius-card);
    color: var(--q-text);
    background: var(--q-surface);
    box-shadow: var(--q-shadow);
}

.q-auth--registro .q-auth-card {
    width: min(100%, 650px);
}

.q-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin: 0 0 27px;
    color: var(--q-muted);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.q-auth-back:hover {
    color: var(--q-action);
}

.q-auth-back svg {
    width: 16px;
    height: 16px;
}

.q-auth .topline {
    display: block;
}

.q-auth .step {
    display: none;
}

.q-section-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0 0 16px;
    color: var(--q-action);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.q-section-tag svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.q-auth-card h2 {
    margin: 0 0 12px;
    color: var(--q-text);
    font: 500 clamp(30px, 2.7vw, 39px)/1.14 var(--q-heading-font);
    letter-spacing: -.035em;
    overflow-wrap: break-word;
}

.q-auth-card h3 {
    margin: 0 0 12px;
    font: 500 25px/1.2 var(--q-heading-font);
    letter-spacing: -.02em;
}

.q-auth :is(.chispa, .acceso-punto) {
    color: var(--q-brand);
}

.q-auth-description {
    margin: 0 0 27px;
    color: var(--q-muted);
    font-size: 14px;
    line-height: 1.75;
}

.q-auth :is(.field, .campo) {
    min-width: 0;
    margin: 0 0 19px;
}

.q-auth label {
    display: block;
    margin-bottom: 8px;
    color: var(--q-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.q-auth .fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.q-auth .wide {
    grid-column: 1 / -1;
}

.q-auth :is(.pass, .clave-contenedor, .input-contenedor) {
    position: relative;
    min-width: 0;
}

.q-auth :is(.pass, .clave-contenedor) .q-input {
    padding-right: 85px;
}

.q-auth :is(.toggle, .mostrar) {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 72px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: var(--q-action);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.q-auth :is(.toggle, .mostrar):hover {
    background: var(--q-soft);
}

.q-auth .input-contenedor > :is(svg, i) {
    position: absolute;
    top: 17px;
    left: 15px;
    width: 20px;
    height: 20px;
    color: var(--q-muted);
    pointer-events: none;
}

.q-auth .input-contenedor .q-input {
    padding-left: 45px;
}

.q-auth #codigo {
    font-variant-numeric: tabular-nums;
    letter-spacing: .26em;
    font-weight: 600;
}

.q-auth :is(.hint, .acceso-dispositivo, .nota, .fine) {
    display: block;
    margin: 7px 0 0;
    color: var(--q-muted);
    font-size: 12px;
    line-height: 1.65;
}

.q-auth .contador {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}

.q-auth :is(.field-error, .acceso-error-campo) {
    display: block;
    margin-top: 6px;
    color: var(--q-danger);
    font-size: 12px;
    line-height: 1.6;
}

.q-auth .edad-calculada {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 9px;
    border-radius: 6px;
    color: var(--q-success);
    background: var(--q-success-soft);
    font-size: 12px;
}

.q-auth .edad-calculada.es-error {
    color: var(--q-danger);
    background: var(--q-danger-soft);
}

.q-auth .opciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 5px 0 0;
    font-size: 12px;
}

.q-auth .recordar {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 28px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--q-muted);
    cursor: pointer;
}

.q-auth .recordar input {
    margin: 0;
}

.q-auth .acceso-dispositivo {
    margin: 6px 0 23px;
}

.q-auth .checkline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 22px;
}

.q-auth .checkline .q-checkbox {
    margin: 3px 0 0;
}

.q-auth .checkline label {
    margin: 0;
    color: var(--q-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
}

.q-auth .checkline a {
    font-weight: 500;
}

.q-auth :is(.registro, .login, .pie) {
    margin: 23px 0 0;
    padding-top: 21px;
    border-top: 1px solid var(--q-border);
    color: var(--q-muted);
    font-size: 13px;
    text-align: center;
}

.q-auth :is(.registro, .login, .pie) a {
    font-weight: 700;
}

.q-auth :is(.nota, .fine) {
    margin-top: 16px;
    text-align: center;
}

.q-auth :is(.message, .mensaje) {
    display: none;
}

.q-auth :is(.message, .mensaje, .aviso) {
    margin: 0 0 20px;
    padding: 13px 15px;
    border: 1px solid var(--q-border);
    border-radius: 12px;
    color: var(--q-text);
    background: var(--q-background);
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.q-auth :is(.message, .mensaje, .aviso):is(.error, .es-error, .aviso-error, .aviso--error) {
    display: block;
    color: var(--q-danger);
    background: var(--q-danger-soft);
    border-color: color-mix(in srgb, var(--q-danger) 30%, transparent);
}

.q-auth :is(.message, .mensaje, .aviso):is(.ok, .success, .exito, .aviso-exito, .aviso--exito) {
    display: block;
    color: var(--q-success);
    background: var(--q-success-soft);
    border-color: color-mix(in srgb, var(--q-success) 30%, transparent);
}

.q-auth :is(.acceso-caps, .acceso-espera) {
    display: block;
    margin: 7px 0 15px;
    color: var(--q-warning);
    font-size: 12px;
}

.q-auth .acceso-ayuda {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--q-soft);
    font-size: 13px;
}

.q-auth :is(.acceso-reintentar, .reintentar-config, .enlace-boton) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 9px 12px;
    margin-top: 12px;
    border: 1px solid var(--q-border);
    border-radius: 10px;
    color: var(--q-action);
    background: var(--q-surface);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.q-auth :is(.acceso-reintentar, .enlace-boton) {
    width: 100%;
}

.q-auth :is(.acceso-reintentar, .reintentar-config, .enlace-boton):hover {
    background: var(--q-soft);
}

.q-auth :is(.acceso-reintentar, .reintentar-config, .enlace-boton):disabled {
    opacity: .6;
    cursor: not-allowed;
}

.q-auth .indicador-etapa {
    margin: 0 0 12px;
    color: var(--q-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .8px;
}

.q-auth .pasos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0 0 24px;
}

.q-auth .paso {
    color: var(--q-muted);
    font-size: 11px;
}

.q-auth .paso.activo {
    color: var(--q-action);
    font-weight: 700;
}

.q-auth .linea {
    flex: 1;
    min-width: 8px;
    height: 1px;
    background: var(--q-border);
}

.q-auth :is(.confirmacion-envio, .exito) {
    padding: 24px 0 0;
    text-align: center;
}

.q-auth :is(.confirmacion-envio, .exito) p {
    color: var(--q-muted);
    font-size: 14px;
}

.q-auth :is(.confirmacion-icono, .exito-icono) {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    border-radius: 18px;
    color: var(--q-action);
    background: var(--q-soft);
}

.q-auth .exito-icono {
    color: var(--q-success);
    background: var(--q-success-soft);
}

.q-auth :is(.confirmacion-icono, .exito-icono) svg {
    width: 29px;
    height: 29px;
}

/* La verificación inicial conserva las mismas clases y comportamiento. */
#quimika-login-contenido {
    display: none;
}

html.quimika-sesion-verificada #quimika-login-contenido {
    display: block;
}

#quimika-pantalla-carga {
    display: none;
}

html.quimika-cargando #quimika-pantalla-carga {
    display: flex;
}

#quimika-pantalla-carga {
    position: fixed;
    inset: 0;
    z-index: 99999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 28px;
    color: var(--q-text);
    background: var(--q-background);
    text-align: center;
}

.quimika-carga-logo .q-logo {
    width: 82px;
    height: 82px;
}

.quimika-carga-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--q-border);
    border-top-color: var(--q-brand);
    border-radius: 50%;
    animation: q-girar .8s linear infinite;
}

#quimika-carga-mensaje {
    max-width: 360px;
    margin: 0;
    color: var(--q-muted);
    font-size: 14px;
}

#quimika-carga-reintentar {
    width: auto;
    min-width: 200px;
}

@keyframes q-girar {
    to {
        transform: rotate(360deg);
    }

}

@media (min-width: 1500px) {
    .q-auth-aside {
        padding-left: max(76px, calc((100vw - 1370px) / 2));
    }

}

@media (max-width: 1050px) {
    .q-auth-layout {
        grid-template-columns: minmax(290px, .8fr) minmax(0, 1.2fr);
    }

    .q-auth-aside {
        padding: 34px 30px;
    }

    .q-auth-story h1 {
        font-size: 48px;
    }

    .q-auth-main {
        padding: 32px 25px;
    }

    .q-auth-card {
        padding: 29px;
    }

    .q-auth .fields {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 780px) {
    .q-auth-layout {
        display: block;
    }

    .q-auth-aside {
        position: relative;
        min-height: auto;
        padding: max(18px, env(safe-area-inset-top)) 24px 18px;
        background: transparent;
    }

    .q-auth-aside::after, .q-auth-story, .q-auth-foot {
        display: none;
    }

    .q-brand {
        width: 100%;
        gap: 6px;
    }

    .q-brand .q-logo {
        width: 43px;
        height: 43px;
    }

    .q-wordmark {
        font-size: 29px;
    }

    .q-brand-caption {
        display: block;
        margin-left: auto;
        color: var(--q-muted);
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0;
    }

    .q-auth-main {
        padding: 5px 24px max(32px, env(safe-area-inset-bottom));
    }

    .q-auth-card {
        padding: 30px;
        border-radius: 24px;
    }

    .q-auth--registro .q-auth-card {
        width: min(100%, 580px);
    }

    .q-auth .fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .q-auth-card h2 {
        font-size: 34px;
    }

    .q-auth-back {
        margin-bottom: 23px;
    }

}

@media (max-width: 520px) {
    .q-auth-main {
        padding-right: 14px;
        padding-left: 14px;
    }

    .q-auth-aside {
        padding-right: 22px;
        padding-left: 18px;
    }

    .q-auth-card {
        padding: 25px 21px;
        border-radius: 22px;
    }

    .q-auth-card h2 {
        font-size: 32px;
    }

    .q-auth .fields {
        grid-template-columns: 1fr;
    }

    .q-auth .opciones {
        gap: 8px;
    }

    .q-auth .opciones a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }

    .q-section-tag {
        font-size: 10px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .quimika-carga-spinner {
        animation: none;
    }

}

/* Formularios Quimika. Cargar después de las hojas globales de la aplicación.
Las clases q-form-* se pueden reutilizar en otras pantallas de edición. */
.q-form-page .main {
    max-width: 1320px;
    padding: 24px clamp(16px, 2.5vw, 36px) calc(100px + env(safe-area-inset-bottom));
}

.q-form-content {
    width: 100%;
    min-width: 0;
}

.q-form-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--q-muted);
    text-decoration: none;
}

.q-form-back :is(svg, i) {
    width: 18px;
    height: 18px;
}

.q-form-page .q-form-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.q-form-topbar h1 {
    margin: 0;
    font-size: clamp(25px, 2.6vw, 34px);
    line-height: 1.2;
}

.q-form-page .q-form-topbar .user-pill {
    margin: 0;
    min-height: 42px;
    padding: 8px 12px;
    font-size: 14px;
}

.q-form-page .q-form-card {
    width: 100%;
    min-width: 0;
    padding: clamp(18px, 2.5vw, 30px);
    border-radius: 20px;
}

.q-form-section + .q-form-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--q-border);
}

.q-form-card .q-form-section-title {
    margin: 0 0 16px;
    color: var(--q-text);
    font: 600 15px/1.4 var(--q-font, sans-serif);
    letter-spacing: 0;
}

.q-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px 20px;
}

.q-form-page .q-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.q-form-field--wide {
    grid-column: 1 / -1;
}

.q-form-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    min-height: 22px;
    gap: 8px;
}

.q-form-page .q-form-field-head label {
    display: block;
    margin: 0;
    color: var(--q-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.q-form-page .q-form-field-head .qp-contador {
    flex: 0 1 auto;
    max-width: 65%;
    margin: 0;
    color: var(--q-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: right;
    font-variant-numeric: tabular-nums;
    visibility: hidden;
}

.q-form-field:focus-within .q-form-field-head .qp-contador, .q-form-field--bio .q-form-field-head .qp-contador, .q-form-field-head .qp-contador:is(.qp-contador-completo, .qp-contador-exceso) {
    visibility: visible;
}

.q-form-page .q-form-field-head .qp-contador-exceso, .q-form-page .q-form-field .qp-campo-error {
    color: var(--q-danger);
}

.q-form-page .q-form-field :is(input, select, textarea) {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 11px 12px;
    border-radius: var(--q-radius-input, 12px);
    font-size: 14px;
    line-height: 1.5;
}

.q-form-page .q-form-field #biografia {
    min-height: 112px;
    resize: vertical;
}

.q-form-page .q-form-field .qp-campo-error {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.q-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--q-border);
}

.q-form-actions .btn {
    min-height: 46px;
    margin: 0;
    padding: 12px 24px;
    font-size: 14px;
}

.q-form-page [hidden] {
    display: none !important;
}

@media (min-width: 1200px) {
    .q-form-grid--personal {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .q-form-grid--ubicacion {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (min-width: 700px) and (max-width: 1199px) {
    .q-form-grid--ubicacion .q-form-field:last-child {
        grid-column: 1 / -1;
    }

}

@media (max-width: 699px) {
    .q-form-page .main {
        padding-top: 18px;
    }

    .q-form-page .q-form-topbar {
        gap: 10px;
        margin-bottom: 16px;
    }

    .q-form-page .q-form-topbar .user-pill {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .q-form-page .q-form-card {
        padding: 18px 16px;
        border-radius: 16px;
    }

    .q-form-grid {
        gap: 16px 12px;
    }

    .q-form-grid--profesional, .q-form-grid--ubicacion {
        grid-template-columns: minmax(0, 1fr);
    }

    .q-form-page .q-form-field :is(input, select, textarea) {
        font-size: 16px;
    }

    .q-form-section + .q-form-section {
        margin-top: 20px;
        padding-top: 20px;
    }

    .q-form-actions .btn {
        width: 100%;
    }

}

@media (max-width: 359px) {
    .q-form-grid--personal {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* Variante compacta reutilizable para confirmaciones y formularios públicos. */
.q-auth.q-auth--compact {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: var(--q-background);
}

.q-auth--compact .q-auth-compact-shell {
    width: min(100%, 480px);
    min-width: 0;
    padding: clamp(24px, 5vw, 36px);
}

.q-auth--compact .q-auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
}

.q-auth--compact .q-auth-brand .q-brand {
    width: fit-content;
    padding: 10px 14px;
    border: 1px solid var(--q-border);
    border-radius: 14px;
    background: var(--q-background);
    --q-brand-logo-width: 190px;
}

.q-auth--compact .q-auth-card h1 {
    margin: 0 0 12px;
    color: var(--q-text);
    font: 600 clamp(28px, 5vw, 34px)/1.15 var(--q-heading-font);
    letter-spacing: -0.035em;
}

.q-auth--compact .q-auth-description {
    margin-bottom: 24px;
}

.q-auth--compact #codigo {
    padding-inline: 12px;
    font-size: clamp(24px, 6vw, 30px) !important;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-align: center;
}

.q-auth.q-auth--compact .q-button-secondary {
    min-height: 46px;
    margin-top: 12px;
    border-color: var(--q-border);
    color: var(--q-action);
    background: var(--q-surface);
}

.q-auth.q-auth--compact .q-button-secondary:hover:not(:disabled) {
    color: var(--q-action-hover);
    background: var(--q-soft);
    box-shadow: none;
}

.q-auth--compact .mensaje {
    margin-top: 18px;
    margin-bottom: 0;
}

.q-auth--compact .q-auth-footer {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--q-border);
    color: var(--q-muted);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.q-auth--compact .q-auth-appearance {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.q-auth--compact .q-auth-appearance label {
    margin: 0;
    color: var(--q-muted);
    font-size: 14px;
    font-weight: 400;
}

.q-auth--compact .q-auth-theme-select {
    width: auto;
    min-width: 132px;
    min-height: 40px;
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--q-border);
    border-radius: 10px;
    color: var(--q-text);
    background: var(--q-surface);
    font: inherit;
}

@media (max-width: 360px) {
    .q-auth--compact .q-auth-compact-shell {
        padding: 24px 20px;
        border-radius: 22px;
    }
}