/*
 * Rediseño de las pantallas de autenticación (login, registro, recuperar
 * contraseña) sobre el layout de jeroennoten/laravel-adminlte.
 * Dirección "Tarjeta elevada" — ver docs/sesiones para el mockup original.
 */

:root {
    --auth-navy-900: oklch(23% 0.045 258);
    --auth-blue-600: oklch(52% 0.16 258);
    --auth-blue-500: oklch(58% 0.15 258);
    --auth-ink-900: oklch(21% 0.015 258);
    --auth-ink-500: oklch(42% 0.02 258);
    --auth-line: oklch(90% 0.012 258);
}

body.auth-page {
    background-color: #16233f; /* fallback para navegadores sin soporte oklch() */
    background-color: var(--auth-navy-900);
    background-image: radial-gradient(oklch(70% 0.02 258 / 0.35) 1px, transparent 1px);
    background-size: 22px 22px;
    font-family: 'IBM Plex Sans', "Source Sans Pro", -apple-system, BlinkMacSystemFont, sans-serif;
}

.auth-page a {
    color: var(--auth-blue-600);
}

.auth-page a:hover {
    color: var(--auth-blue-500);
}

/* Logo (login-logo / register-logo / ...) */
.auth-page [class$="-logo"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1.75rem;
}

.auth-page [class$="-logo"] a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: 'Manrope', 'IBM Plex Sans', sans-serif;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -0.01em;
}

.auth-page .auth-logo-mark {
    color: #fff;
    flex-shrink: 0;
}

/* Card */
.auth-page .card.card-outline {
    border-top: 4px solid var(--auth-blue-600);
    border-radius: 10px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 24px 48px -12px oklch(10% 0.02 258 / 0.45);
    overflow: hidden;
}

.auth-page .card-header {
    background: transparent;
    border-bottom: none;
    padding-bottom: 0;
}

.auth-page .card-header .card-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--auth-ink-900);
}

.auth-page .card-body {
    padding: 1rem 2.25rem 1.75rem;
}

.auth-page .card-footer {
    background: #fff;
    border-top: none;
    text-align: center;
    padding-top: 0;
    padding-bottom: 1.75rem;
}

.auth-page .card-footer p {
    font-size: 12.5px;
    color: var(--auth-ink-500);
}

/* Campos de formulario: icono + input, sin la caja gris de AdminLTE */
.auth-page .auth-field {
    margin-bottom: 1.1rem;
}

.auth-page .auth-field-box {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--auth-line);
    border-radius: 8px;
    padding: 2px 14px;
    background: #fff;
    transition: border-color 0.15s ease;
}

.auth-page .auth-field-box:focus-within {
    border-color: var(--auth-blue-600);
}

.auth-page .auth-field-box.is-invalid {
    border-color: #dc3545;
}

.auth-page .auth-field-icon {
    color: var(--auth-ink-500);
    flex-shrink: 0;
}

.auth-page .auth-field-input,
.auth-page .auth-field-input.form-control {
    border: none;
    padding: 10px 0;
    font-size: 14px;
    color: var(--auth-ink-900);
    background: transparent;
    box-shadow: none !important;
}

.auth-page .auth-field-input::placeholder {
    color: oklch(65% 0.01 258);
}

.auth-page .invalid-feedback {
    display: block;
}

/* Recordarme / olvidé contraseña */
.auth-page .icheck-primary label {
    font-size: 12.5px;
    color: var(--auth-ink-500);
}

.auth-page .icheck-primary input:checked + label::before {
    background-color: var(--auth-blue-600);
    border-color: var(--auth-blue-600);
}

.auth-page a.auth-link {
    font-size: 12.5px;
}

/* Botón principal */
.auth-page .btn-primary {
    background-color: var(--auth-blue-600);
    border-color: var(--auth-blue-600);
    border-radius: 7px;
    padding: 0.65rem;
    font-weight: 600;
    font-family: 'IBM Plex Sans', sans-serif;
}

.auth-page .btn-primary:hover,
.auth-page .btn-primary:focus {
    background-color: var(--auth-blue-500);
    border-color: var(--auth-blue-500);
}