/**
 * IOmed · Centro Médico Dayenu — Páginas de autenticación refinadas
 * ---------------------------------------------------------------------------
 * Capa ADITIVA cargada solo por layouts/auth. Fondo atmosférico de marca,
 * tarjeta flotante y tipografía editorial, sobre el markup existente.
 */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/fraunces/fraunces-600.woff2") format("woff2");
}

body {
    background:
        radial-gradient(55% 70% at 90% 5%, rgba(20, 184, 166, 0.13), transparent 60%),
        radial-gradient(45% 55% at 4% 96%, rgba(13, 148, 136, 0.10), transparent 55%),
        linear-gradient(165deg, #F0FDFA 0%, #ECFEFF 55%, #FFFFFF 100%) !important;
    min-height: 100vh;
}

/* El markup tiene dos .width-540: uno vacío para mensajes flash y la tarjeta
   real del formulario (.bg-white). El vacío no debe dibujar ninguna caja. */
.width-540:empty {
    display: none !important;
}

/* Tarjeta del formulario: cristal flotante de marca (solo la real). */
.width-540.bg-white,
.width-540.shadow-md {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(13, 148, 136, 0.10);
    border-radius: 22px !important;
    box-shadow: 0 4px 10px rgba(11, 59, 57, 0.04), 0 28px 60px -22px rgba(11, 59, 57, 0.28) !important;
    animation: authRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes authRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Título editorial */
.width-540 h1,
.width-540 h2,
.width-540 .text-center.mb-7 {
    font-family: "Fraunces", "Poppins", Georgia, serif;
    letter-spacing: -0.015em;
    color: #0F2A2A;
}

/* Campos con foco de marca */
.width-540 .form-control {
    border-radius: 12px;
    transition: border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.width-540 .form-control:focus {
    border-color: #0D9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.16);
}

/* El logo (blanco) se posa sobre un badge de marca para que resalte sobre el
   fondo claro, con relieve suave. */
.text-center .image {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 28px;
    background: #FFFFFF;
    border: 1px solid rgba(13, 148, 136, 0.12);
    box-shadow: 0 4px 10px rgba(11, 59, 57, 0.05), 0 20px 40px -14px rgba(11, 59, 57, 0.28);
    animation: authRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.text-center .image img.img-fluid {
    width: 78px !important;
    height: auto;
    max-height: none;
}
@media (prefers-reduced-motion: reduce) {
    .text-center .image { animation: none; }
}

/* Botón principal con marca teal, presencia y feedback de presión */
.width-540 .btn-primary,
.width-540 button[type="submit"] {
    background: linear-gradient(135deg, #0D9488, #0F766E) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 8px 22px -8px rgba(13, 148, 136, 0.55);
    transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.width-540 .btn-primary:hover,
.width-540 button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(13, 148, 136, 0.65);
}
.width-540 .btn-primary:active,
.width-540 button[type="submit"]:active {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    .width-540 { animation: none; }
    .width-540 .btn-primary, .width-540 button[type="submit"], .width-540 .form-control { transition: none; }
}