/* ===================================================================
   Definiciones de Fuentes
   =================================================================== */

@font-face {
    font-family: 'din-nextlt-pro-regular';
    src: url(/fonts/din-nextlt-pro-regular.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'din-nextltpro-bold';
    src: url(/fonts/din-nextltpro-bold.woff) format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'din-nextltpro-bold-condensed';
    src: url(/fonts/din-nextltpro-bold-condensed.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ===================================================================
   Estilos Base y Estructura General
   =================================================================== */

html {
    font-size: 1rem;
    position: relative;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

footer {
    padding: 0px;
    bottom: 0;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
    line-height: 30px;
    position: static;
}


/* ===================================================================
   Estilos para la Página de Login (Modern Login UI)
   =================================================================== */

.login-page-body {
    background-color: var(--tacp-beige);
    font-family: 'din-nextlt-pro-regular', 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    position: relative;
    overflow-x: hidden;
}

.login-header {
    background-color: var(--tacp-navbar);
    padding: 0.65rem 2rem;
    min-height: 64px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    border-bottom: none;
    box-shadow: 0 1px 0 rgba(238, 236, 225, 0.08);
}

.login-header-logo {
    height: 46px;
    width: auto;
    max-width: min(58vw, 340px);
    object-fit: contain;
    object-position: left center;
    flex-shrink: 1;
    display: block;
}

.login-header-badge {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'din-nextltpro-bold', 'Segoe UI', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Aviso compacto debajo de contraseña / encima del botón (solo si hay mensaje) */
.login-feedback {
    margin: 0 0 0.75rem;
    text-align: left;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.login-feedback.is-hiding {
    opacity: 0;
}

/* Toast fijo (OTP / pasos AJAX): no mueve la tarjeta */
.login-feedback--float {
    position: fixed;
    top: calc(64px + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100% - 1.5rem));
    margin: 0;
    z-index: 1040;
    pointer-events: none;
}

.login-feedback--float .login-feedback-msg {
    pointer-events: auto;
    box-shadow: 0 8px 24px rgba(35, 35, 35, 0.12);
}

.login-feedback--float.is-hiding {
    transform: translateX(-50%) translateY(-6px);
}

.login-feedback-msg {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.login-feedback-msg--error {
    color: #7a1216;
    background-color: #fff5f5;
    border: 1px solid color-mix(in srgb, var(--tacp-red) 28%, var(--tacp-white));
}

.login-feedback-msg--success {
    color: #0f5132;
    background-color: var(--tacp-green-soft);
    border: 1px solid color-mix(in srgb, var(--tacp-green) 35%, var(--tacp-white));
}

/*
 * Aviso login/recover/reset: sin altura reservada (puede empujar el botón hacia abajo).
 * Solo renderizar el slot cuando hay mensaje (ver Index / Recuperar / Restablecer).
 */
.login-form-feedback {
    display: flex;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    margin: 0;
    padding: 0;
}

/*
 * Registro — aviso de servidor (banner) vs error de campo (texto rojo inline).
 * Márgenes del slot = 0: el ritmo lo marca el gap del form (ver LOGIN-SPACING.md).
 */
.login-form-feedback--registro {
    min-height: 0;
    margin: 0;
}

.login-form-feedback--registro .login-form-msg--error {
    padding: 0.55rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--tacp-red) 22%, var(--tacp-white));
    border-left: 3px solid var(--tacp-red);
    border-radius: 0.4rem;
    background-color: var(--tacp-red-soft);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
}

.login-form-feedback--registro .login-form-msg-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-basis: 0.95rem;
    margin-top: 0.1rem;
}

.login-form-msg--dismissible {
    align-items: flex-start;
    gap: 0.4rem;
}

.login-form-msg-close {
    flex: 0 0 auto;
    margin: -0.15rem -0.15rem 0 auto;
    padding: 0.1rem 0.35rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}

.login-form-msg-close:hover,
.login-form-msg-close:focus {
    opacity: 1;
    outline: none;
}

.login-card-registro .login-check {
    margin: 0;
}

/* Aviso de formulario: dentro del slot, sin empujar el botón */
.login-form-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-size: 0.8125rem;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    transition: opacity 0.35s ease;
}

.login-form-msg.is-hiding {
    opacity: 0;
}

.login-form-msg--error {
    color: var(--tacp-red);
    font-weight: 500;
}

.login-form-msg-icon {
    flex: 0 0 1.05rem;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.06rem;
    display: block;
}

.login-form-msg--success {
    color: #0f5132;
    font-weight: 500;
}

.login-form-msg-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

.login-form-msg output.login-form-msg-text {
    display: block;
    border: 0;
    background: transparent;
}

/* Error de auth: borde + label en rojo (especificidad > hover/focus base) */
.login-card-modern form.login-form--auth-error .login-field .login-field-control,
.login-card-modern form.login-form--auth-error .login-field .login-field-control:hover,
.login-card-modern form.login-form--auth-error .login-field .login-field-control:focus,
.login-card-modern .login-field.login-field--has-error .login-field-control,
.login-card-modern .login-field.login-field--has-error .login-field-control:hover,
.login-card-modern .login-field.login-field--has-error .login-field-control:focus {
    border-color: var(--tacp-red);
    box-shadow: none;
}

.login-card-modern form.login-form--auth-error .login-field .login-field-control:focus,
.login-card-modern .login-field.login-field--has-error .login-field-control:focus {
    box-shadow: 0 0 0 3px var(--tacp-red-shadow-light);
}

.login-card-modern form.login-form--auth-error .login-field .login-field-label,
.login-card-modern form.login-form--auth-error .login-field .login-field-control:focus + .login-field-label,
.login-card-modern .login-field.login-field--has-error .login-field-label,
.login-card-modern .login-field.login-field--has-error .login-field-control:focus + .login-field-label {
    color: var(--tacp-red);
}

/*
 * =============================================================================
 * ESPACIADO LOGIN / REGISTRO  (detalle: wwwroot/css/LOGIN-SPACING.md)
 * =============================================================================
 * - Separación de campos: SOLO vía .login-fields-stack { gap }.
 * - NO poner gap en .login-card-modern > form (queda en 0 a propósito).
 * - Labels flotantes: padding-top en .login-field (el label come aire visual).
 * - Registro: ritmo stack → términos → aviso → botón = gap del form registro.
 * =============================================================================
 */
.login-fields-stack {
    display: flex;
    flex-direction: column;
    gap: 1.1rem; /* ref. socios.touring.pe login */
    width: 100%;
    margin: 0;
    padding: 0;
}

.login-fields-stack > .login-field,
.login-fields-stack > .row > [class*="col-"] > .login-field {
    margin-bottom: 0;
    padding-top: 0.4rem;
}

/* Filas de 2 columnas dentro del stack (registro) */
.login-fields-stack > .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    margin-top: 0;
    margin-bottom: 0;
    row-gap: 1.1rem; /* cuando col-12 apila en móvil */
}

.login-fields-stack > .row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.login-card-registro .login-fields-stack > .row {
    row-gap: 0.9rem;
}

.login-form .login-submit,
.login-submit {
    margin-top: 0;
}

.login-submit .btn-login {
    width: 100%;
    display: block;
}

/* OTP: una casilla por dígito (evita letter-spacing desalineado) */
.login-otp {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    margin: 0.35rem 0 0.5rem;
}

.login-otp-digit {
    width: 2.65rem;
    height: 3.1rem;
    padding: 0;
    border: 1px solid var(--tacp-beige-deep);
    border-radius: 10px;
    background: var(--tacp-white);
    text-align: center;
    font-size: 1.45rem;
    font-weight: 700;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    color: var(--tacp-black);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-otp-digit:focus {
    border-color: var(--tacp-red);
    box-shadow: 0 0 0 3px var(--tacp-red-shadow-light);
}

@media (max-width: 575px) {
    .login-feedback--float {
        top: calc(44px + 0.55rem);
    }

    .login-otp {
        gap: 0.4rem;
    }

    .login-otp-digit {
        width: 2.35rem;
        height: 2.85rem;
        font-size: 1.25rem;
    }
}

.login-footer {
    position: relative;
    z-index: 2;
}

footer.site-footer.login-footer {
    background-color: var(--tacp-charcoal);
    border-top: 1px solid rgba(238, 236, 225, 0.14);
}

.login-main-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2.25rem 1rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Un sello de agua (móvil y tablet). En desktop se añaden dos, recortados en esquinas. */
.login-main-content::before,
.login-main-content::after {
    content: "";
    position: absolute;
    background-image: url("../img/tacp-logo-plomo-touring.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.login-main-content::before {
    width: min(46vw, 200px);
    height: min(46vw, 200px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.1;
}

.login-main-content::after {
    display: none;
}

/* ----- Tarjeta de Login ----- */
/* Tablet/desktop: superficie cálida con contorno suave. Móvil: sin caja (ver media query). */

.login-card-modern {
    width: 100%;
    max-width: 450px;
    padding: 2.75rem 2.5rem 2rem;
    border-radius: 16px;
    background-color: var(--tacp-surface);
    border: 1px solid var(--tacp-beige-deep);
    box-shadow: 0 12px 32px rgba(35, 35, 35, 0.07);
    text-align: center;
    position: relative;
    z-index: 1;
    --login-field-gap: var(--tacp-surface);
}

.login-card-modern h2 {
    font-family: 'din-nextltpro-bold', 'Segoe UI', sans-serif;
    color: var(--tacp-black);
    margin-bottom: 0.4rem;
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.login-card-tagline {
    color: var(--tacp-gray);
    font-size: 0.95rem;
    margin-bottom: 1.85rem;
    line-height: 1.45;
}

.login-card-modern hr,
.login-card-divider {
    border: 0;
    height: 1px;
    /* Gris más visible que beige-deep */
    background: color-mix(in srgb, var(--tacp-gray) 35%, var(--tacp-beige-deep));
    /* Zona botón → “Crear cuenta”: más aire (ref. foto móvil / producción) */
    margin: 1.9rem 0 1.4rem;
}

/* ----- Campos outlined (etiqueta flotante) ----- */
/* Ritmo entre bloques del form (stack → aviso? → método? → botón). Campos: .login-fields-stack */
.login-card-modern > form.login-form,
.login-card-modern > form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* contraseña → botón */
}

.login-field {
    position: relative;
    margin-bottom: 1.5rem;
    padding-top: 0.55rem;
    text-align: left;
}

.login-field-box {
    position: relative;
    height: 52px;
    isolation: isolate;
}

.login-field-control {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 1.05rem;
    font-size: 1rem;
    /* line-height ≈ letra (no = altura del input): evita sombreado de selección a todo el alto */
    line-height: 1.25;
    font-family: inherit;
    color: var(--tacp-black);
    background-color: var(--tacp-white);
    border: 1px solid var(--tacp-beige-deep);
    border-radius: 12px;
    outline: none;
    position: relative;
    z-index: 1;
    transition: border-color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.login-card-modern .login-field-control::selection,
.login-card-modern .form-control::selection,
.login-card-modern textarea::selection {
    background-color: var(--tacp-red-soft-strong);
    color: var(--tacp-black);
}

select.login-field-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23595959' d='M1.4 0.6L6 5.2L10.6 0.6L12 2L6 8L0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 10px 7px;
    padding-right: 2.4rem;
    cursor: pointer;
}

select.login-field-control option {
    color: var(--tacp-black);
    background-color: var(--tacp-white);
}

.login-field-control::placeholder {
    color: transparent;
}

.login-field-control:hover {
    border-color: var(--tacp-gray);
}

.login-field-control:focus {
    border-color: var(--tacp-gray);
    box-shadow: none;
}

.login-field-control.input-validation-error,
.login-field-control.input-validation-error:focus {
    border-color: var(--tacp-red);
    box-shadow: none;
}

.login-field-label {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0 0.4rem;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--tacp-gray);
    background-color: transparent;
    pointer-events: none;
    white-space: nowrap;
    transform-origin: left center;
    transition: top 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.15s ease,
                background-color 0.15s ease;
}

.login-field:not(.is-filled) select.login-field-control {
    color: transparent;
}

.login-field-control:focus + .login-field-label,
.login-field-control:not(:placeholder-shown) + .login-field-label,
.login-field.is-filled .login-field-label,
.login-field-date .login-field-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    background-color: var(--login-field-gap);
}

/* Fecha de nacimiento: flatpickr (mismo almanaque visual que reservas) */
.login-fecha-box {
    position: relative;
}

.login-field-date .login-field-control,
.login-field-date .login-fecha-visible {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 52px;
    line-height: 1.25;
    padding: 0 2.75rem 0 1.05rem;
    background-image: none;
}

/* Placeholder dd/mm/aaaa (ref. producción) */
.login-field-date .login-fecha-visible::placeholder {
    color: var(--tacp-gray);
    opacity: 0.65;
}

/* Original ISO oculto (flatpickr); sin !important — más específico que .login-field-control */
.login-fecha-box > input.flatpickr-input:not(.login-fecha-visible) {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-fecha-toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tacp-gray);
    cursor: pointer;
}

.login-fecha-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}

.login-fecha-toggle:hover,
.login-fecha-toggle:focus-visible,
.login-fecha-toggle[aria-expanded="true"] {
    background: var(--tacp-red-soft);
    color: var(--tacp-red);
    outline: none;
}

/* Almanaque (misma identidad que .reserva-almanaque en reserva-visual-map.css) */
.flatpickr-calendar.reserva-almanaque {
    z-index: 10050;
    width: min(320px, calc(100vw - 16px));
    font-family: inherit;
    border-radius: 12px;
    border: 1px solid var(--tacp-beige-deep);
    box-shadow: 0 8px 24px var(--tacp-gray-shadow-light);
}

.flatpickr-calendar.reserva-almanaque .flatpickr-months {
    padding: 8px 4px 0;
    align-items: center;
}

.flatpickr-calendar.reserva-almanaque .flatpickr-current-month {
    font-weight: 600;
    font-size: 14px;
    color: var(--tacp-black);
    padding-top: 6px;
}

.flatpickr-calendar.reserva-almanaque .flatpickr-weekday {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--tacp-gray);
}

.flatpickr-calendar.reserva-almanaque .flatpickr-day {
    border-radius: 8px;
    color: var(--tacp-black);
    height: 38px;
    line-height: 38px;
    max-width: none;
}

.flatpickr-calendar.reserva-almanaque .flatpickr-day:hover,
.flatpickr-calendar.reserva-almanaque .flatpickr-day:focus {
    background: var(--tacp-red-soft);
    border-color: var(--tacp-red-soft);
}

.flatpickr-calendar.reserva-almanaque .flatpickr-day.today {
    border-color: var(--tacp-red);
}

.flatpickr-calendar.reserva-almanaque .flatpickr-day.selected,
.flatpickr-calendar.reserva-almanaque .flatpickr-day.selected:hover {
    background: var(--tacp-red);
    border-color: var(--tacp-red);
    color: var(--tacp-white);
}

.flatpickr-calendar.reserva-almanaque .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.reserva-almanaque .flatpickr-day.flatpickr-disabled:hover {
    color: var(--tacp-gray-light);
}

.flatpickr-calendar.reserva-almanaque .flatpickr-prev-month:hover svg,
.flatpickr-calendar.reserva-almanaque .flatpickr-next-month:hover svg {
    fill: var(--tacp-red);
}

.flatpickr-calendar.reserva-almanaque .reserva-almanaque-acciones {
    display: flex;
    gap: 8px;
    padding: 6px 8px 10px;
}

.flatpickr-calendar.reserva-almanaque .flatpickr-hoy {
    flex: 1 1 0;
    display: block;
    width: auto;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--tacp-beige-deep);
    border-radius: 8px;
    background: var(--tacp-white);
    color: var(--tacp-black);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.flatpickr-calendar.reserva-almanaque .flatpickr-hoy:hover {
    background: var(--tacp-beige-deep);
    border-color: var(--tacp-black);
}

.login-field-control:focus + .login-field-label {
    color: var(--tacp-gray);
}

.login-field-control.input-validation-error + .login-field-label,
.login-field-control.input-validation-error:focus + .login-field-label {
    color: var(--tacp-red);
}

.login-field-control.input-validation-error:placeholder-shown + .login-field-label,
.login-field-control.input-validation-error:not(:focus):placeholder-shown + .login-field-label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    background-color: transparent;
    color: var(--tacp-red);
}

.login-field-error {
    display: flex;
    align-items: center;
    text-align: left;
    color: var(--tacp-red);
    font-size: 0.75rem;
    line-height: 1.25;
    min-height: 1.15rem;
    margin-top: 0.35rem;
    padding-left: 0.15rem;
}

.login-field-error:empty,
.login-field-error.field-validation-valid {
    display: none;
    margin: 0;
    min-height: 0;
}

.login-card-registro {
    max-width: 540px;
}

/*
 * Ritmo vertical registro (referencia: socios.touring.pe/registro — minimal).
 * Especificidad igual/mayor que `.login-card-modern > form.login-form { gap: 0 }`.
 * Hijos del form: stack | check | aviso? | submit → mismo gap entre bloques.
 */
.login-card-modern.login-card-registro > form.login-form {
    gap: 0.7rem;
}

.login-card-registro .login-fields-stack {
    gap: 0.9rem;
}

.login-card-registro .login-fields-stack > .login-field,
.login-card-registro .login-fields-stack > .row > [class*="col-"] > .login-field {
    margin-bottom: 0;
    padding-top: 0.3rem;
}

.login-card-registro .login-submit {
    margin-top: 0;
}

.login-card-registro .login-submit .btn-login {
    width: 100%;
    display: block;
}

.login-card-registro .login-card-divider,
.login-card-registro hr.login-card-divider {
    margin: 1.5rem 0 1.15rem;
}

.login-check {
    text-align: left;
}

.login-check .form-check-input {
    border-color: var(--tacp-beige-deep);
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.2em;
}

.login-check .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem var(--tacp-gray-shadow-light);
    border-color: var(--tacp-gray);
}

.login-check .form-check-input:checked {
    background-color: var(--tacp-red);
    border-color: var(--tacp-red);
}

.login-check .form-check-label {
    color: var(--tacp-gray);
    font-size: 0.875rem;
}

.login-check a {
    color: var(--tacp-red);
    font-weight: 600;
    text-decoration: none;
}

.login-check a:hover {
    color: var(--tacp-red-darker);
    text-decoration: underline;
}

/* Campos clásicos dentro de la tarjeta (registro y otras pantallas) */
.login-card-modern .form-control,
.login-card-modern .form-select {
    height: 52px;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--tacp-black);
    background-color: var(--tacp-white);
    border: 1px solid var(--tacp-beige-deep);
    border-radius: 12px;
    box-shadow: none;
}

.login-card-modern .form-control:hover,
.login-card-modern .form-select:hover {
    border-color: var(--tacp-gray);
}

.login-card-modern .form-control:focus,
.login-card-modern .form-select:focus {
    border-color: var(--tacp-gray);
    box-shadow: none;
    outline: 0;
}

.login-card-modern .form-control.input-validation-error,
.login-card-modern .form-control.input-validation-error:focus,
.login-card-modern .form-select.input-validation-error,
.login-card-modern .form-select.input-validation-error:focus {
    border-color: var(--tacp-red);
}

.login-card-modern .input-group {
    border: 1px solid var(--tacp-beige-deep);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--tacp-white);
}

.login-card-modern .input-group:hover {
    border-color: var(--tacp-gray);
}

.login-card-modern .input-group:focus-within {
    border-color: var(--tacp-gray);
    box-shadow: none;
}

.login-card-modern .input-group .form-control {
    border: 0;
    height: 52px;
    box-shadow: none;
    border-radius: 0;
}

.login-card-modern .input-group-text {
    border: 0;
    background: transparent;
    color: var(--tacp-gray);
}

.login-card-modern .form-control-lg {
    height: auto;
    min-height: 56px;
}

/* ----- Formularios y Botones del Login ----- */

.login-form-group {
    margin-bottom: 0.9rem;
    text-align: left;
}

.login-form-group .form-select option[value="0"] {
    color: var(--tacp-gray);
    font-style: italic;
    background-color: var(--tacp-white);
}

.btn-login {
    background-color: var(--tacp-red);
    border: 0;
    color: var(--tacp-white);
    padding: 0.85rem 1rem;
    min-height: 50px;
    font-size: 1rem;
    font-family: 'din-nextltpro-bold', 'Segoe UI', sans-serif;
    font-weight: bold;
    letter-spacing: 0.02em;
    border-radius: 12px;
    transition: background-color 0.2s ease;
    width: 100%;
}

.btn-login:hover {
    background-color: var(--tacp-red-darker);
    color: var(--tacp-white);
    transform: translateY(-1px);
}

.login-links-modern {
    margin-top: 0;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

/* Enlace bajo el botón (recuperar / restablecer): sin mt-4 de Bootstrap */
.login-links-modern.login-links-below-form {
    margin-top: 1.05rem;
}

.login-links-modern p {
    margin-bottom: 0;
}

.login-links-modern a {
    color: var(--tacp-gray);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.login-links-modern a:hover {
    color: var(--tacp-red);
    text-decoration: none;
}

/* ----- Elementos Decorativos ----- */
/* Eliminados por solicitud */


/* ----- Responsive ----- */

/* Tablet: tarjeta centrada, no a todo el ancho */
@media (max-width: 1099px) {
    .login-header-badge {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }
}

@media (max-width: 768px) {
    .login-header {
        padding: 0.6rem 1rem;
        min-height: 58px;
    }

    .login-header-badge {
        display: none;
    }

    .login-main-content {
        padding: 2rem 1.5rem 2.25rem;
    }
}

/* Tablet: un sello grande recortado (se ve una parte) */
@media (min-width: 576px) and (max-width: 1099px) {
    .login-main-content::before {
        width: min(34vw, 220px);
        height: min(34vw, 220px);
        top: auto;
        left: auto;
        right: 0.75rem;
        bottom: 0.75rem;
        transform: none;
        opacity: 0.11;
    }

    .login-main-content::after {
        display: none;
    }
}

/* Desktop: sello izq. abajo y der. arriba, recortados en los bordes */
@media (min-width: 1100px) {
    .login-main-content::before,
    .login-main-content::after {
        display: block;
        width: min(34vh, 280px);
        height: min(34vh, 280px);
        opacity: 0.12;
    }

    .login-main-content::before {
        top: auto;
        left: 1.25rem;
        bottom: 0.5rem;
        transform: none;
    }

    .login-main-content::after {
        top: 0.75rem;
        left: auto;
        right: 1.25rem;
        bottom: auto;
        transform: none;
    }
}

/* Móvil: formulario sobre el beige, sin caja */
@media (max-width: 767px) {
    .login-card-modern {
        margin: 0;
        padding: 1.35rem 0.35rem 0.65rem;
        border-radius: 0;
        max-width: none;
        width: 100%;
        background-color: transparent;
        border: none;
        box-shadow: none;
        --login-field-gap: var(--tacp-beige);
    }

    .login-card-modern hr,
    .login-card-divider {
        background: rgba(89, 89, 89, 0.38);
    }
}

/* Móvil estrecho: formulario a ancho útil; logo de navbar más grande */
@media (max-width: 575px) {
    .login-header {
        padding: 0.28rem 0.85rem;
        min-height: 44px;
    }

    .login-header-logo {
        height: 36px;
        max-width: calc(100vw - 1.7rem);
    }

    .login-main-content {
        padding: 1.15rem 1.25rem 1.5rem;
        align-items: flex-start;
    }

    .login-main-content::before {
        width: min(58vw, 210px);
        height: min(58vw, 210px);
        top: 50%;
        left: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        opacity: 0.1;
    }

    .login-card-modern h2 {
        font-size: 1.5rem;
        margin-bottom: 0.35rem;
    }

    .login-card-tagline {
        font-size: 0.9rem;
        margin-bottom: 1.35rem;
    }

    .login-card-modern hr,
    .login-card-divider {
        margin: 1.65rem 0 1.25rem;
    }

    .login-form-feedback {
        min-height: 0;
        margin: 0;
    }

    .login-card-modern > form.login-form,
    .login-card-modern > form {
        gap: 1.15rem;
    }

    .login-links-modern {
        gap: 0.6rem;
    }

    .login-links-modern.login-links-below-form {
        margin-top: 0.95rem;
    }

    .login-form-feedback--registro {
        min-height: 0;
        margin: 0;
    }

    .login-form-feedback--registro .login-form-msg--error {
        padding: 0.5rem 0.6rem;
        font-size: 0.75rem;
    }

    .login-card-modern.login-card-registro > form.login-form {
        gap: 0.6rem;
    }

    .login-card-registro .login-fields-stack {
        gap: 0.85rem;
    }

    .login-fields-stack {
        gap: 1rem;
        margin-bottom: 0;
    }

    .login-fields-stack > .login-field,
    .login-fields-stack > .row > [class*="col-"] > .login-field {
        margin-bottom: 0;
        padding-top: 0.35rem;
    }

    .login-card-registro .login-fields-stack > .login-field,
    .login-card-registro .login-fields-stack > .row > [class*="col-"] > .login-field {
        padding-top: 0.28rem;
    }

    .login-field {
        margin-bottom: 1.45rem;
        padding-top: 0.55rem;
    }

    .btn-login {
        padding: 0.75rem;
        font-size: 1.05rem;
    }
}

@media (max-width: 360px) {
    .login-main-content {
        padding: 1rem 1.1rem 1.35rem;
    }
}