/* ============================================================================
   MieliNotes · Login Loader ("Latido en calma")
   ----------------------------------------------------------------------------
   Pantalla de carga SOLO para los dos logins (portal de pacientes + sistema
   clínico/doctoras). Cubre la espera entre el submit de credenciales y la
   redirección al dashboard — el momento que más tarda.

   Concepto: el símbolo de MieliNotes (Ψ entre mente y corazón, sobre notas)
   "respira" dentro de un medallón; ondas concéntricas se expanden como una
   guía de respiración (mindfulness / bienestar) y una onda de calma
   (brainwave) fluye por debajo (mente serena). Sereno, con identidad de marca.

   Namespace: .mnl-*  (MieliNotes Loader)
   Reglas: animación 100% en transform / opacity (GPU, sin reflow). Las
   animaciones y `will-change` SOLO se activan con `.is-visible`: en el login
   inactivo no corre nada ni se promueven capas → cero consumo mientras se
   teclea. Auto-contenido: usa los tokens del sistema con fallback teal para
   funcionar tanto sobre app.css como sobre portal.css.
   Paleta coherente con la identidad teal clínica y con los skeletons claros,
   para que la secuencia [loader login] → dashboard → [skeleton] no se sienta
   como un salto entre estilos.
   ========================================================================== */

.mnl-overlay {
    /* variables locales (con fallback al token del sistema) */
    --mnl-primary: var(--primary, #199c82);
    --mnl-primary-600: var(--teal-600, #168a73);
    --mnl-primary-700: var(--teal-700, #116d5b);
    --mnl-ink: #274a44;
    --mnl-muted: #6b8a83;

    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* fondo claro y calmo, coherente con el tema claro + skeletons */
    background:
        radial-gradient(120% 90% at 50% 38%, #ffffff 0%, #f4faf8 55%, #ecf7f3 100%);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
    -webkit-tap-highlight-color: transparent;
}

.mnl-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Escenario centrado ─────────────────────────────────────────────────── */
.mnl-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    text-align: center;
    max-width: 340px;
    width: 100%;
}
/* respiro extra entre el medallón (cuyas ondas se expanden) y la onda de calma */
.mnl-wave { margin-top: 6px; }

/* ── Medallón + ondas de respiración ────────────────────────────────────── */
.mnl-mark {
    position: relative;
    width: 138px;
    height: 138px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

/* Ondas concéntricas: se expanden y desvanecen (guía de respiración) */
.mnl-ring {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    border: 1.5px solid var(--mnl-primary);
    opacity: 0;
    transform: scale(.62);
}
.mnl-ring:nth-child(2) { animation-delay: 1.2s; }
.mnl-ring:nth-child(3) { animation-delay: 2.4s; }

/* Disco/medallón que aloja el logo */
.mnl-disc {
    position: relative;
    z-index: 1;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: #ffffff;
    display: grid;
    place-items: center;
    box-shadow:
        0 10px 30px -12px rgba(25, 156, 130, .45),
        0 2px 8px rgba(16, 100, 84, .08),
        inset 0 0 0 1px rgba(25, 156, 130, .12);
}

.mnl-mark-img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    display: block;
    /* el logo webp trae fondo blanco: se funde con el disco */
    mix-blend-mode: multiply;
}

/* ── Onda de calma (brainwave / respiración) ────────────────────────────── */
/* Onda suave que FLUYE horizontalmente. Evoca la mente en calma (no un ECG
   cardíaco). El movimiento es 100% `transform: translateX` → compuesto por la
   GPU (fluido en móvil, sin repaint por frame). Bordes difuminados con máscara
   (estática → barata): la onda entra y sale sin cortes ni puntos. */
.mnl-wave {
    position: relative;
    width: 230px;
    max-width: 74vw;
    height: 40px;
    overflow: hidden;
    /* desvanece los extremos: la onda nace y muere en suave, sin cortes */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.mnl-wave-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;            /* el doble del visor → translateX(-50%) hace loop perfecto */
    height: 100%;
}
.mnl-wave-line {
    fill: none;
    stroke: var(--mnl-primary-600);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* mantiene grosor y caps redondos aunque el visor estire la onda */
    vector-effect: non-scaling-stroke;
}

/* ── Texto sereno ───────────────────────────────────────────────────────── */
.mnl-text {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--mnl-ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Activación: animaciones + will-change SOLO con el loader visible ──────
   En el login inactivo (overlay oculto) no corre ninguna animación ni se
   promueve ninguna capa de compositor → cero GPU/batería mientras se teclea.
   Al mostrarse (.is-visible) arrancan; los caps redondos y el flujo siguen
   siendo transform/opacity puros (GPU, sin reflow). */
.mnl-overlay.is-visible .mnl-disc {
    will-change: transform;
    animation: mnl-breathe 3.6s ease-in-out infinite;
}
.mnl-overlay.is-visible .mnl-ring {
    will-change: transform, opacity;
    animation: mnl-ring 3.6s ease-out infinite;
}
.mnl-overlay.is-visible .mnl-wave-track {
    will-change: transform;
    animation: mnl-flow 3.4s linear infinite;
}
.mnl-overlay.is-visible .mnl-wave-line {
    animation: mnl-wave-breathe 3.6s ease-in-out infinite;
}
.mnl-overlay.is-visible .mnl-text {
    will-change: opacity;
    animation: mnl-text 3.6s ease-in-out infinite;
}

/* ── Keyframes (transform / opacity — sin reflow) ───────────────────────── */
@keyframes mnl-breathe {
    0%, 100% { transform: scale(1);     opacity: .9; }
    50%      { transform: scale(1.045); opacity: 1;  }
}
@keyframes mnl-ring {
    0%   { transform: scale(.64); opacity: 0; }
    18%  { opacity: .45; }
    100% { transform: scale(1.68); opacity: 0; }
}
@keyframes mnl-flow {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes mnl-wave-breathe {
    0%, 100% { opacity: .65; }
    50%      { opacity: 1; }
}
@keyframes mnl-text {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .mnl-stage { gap: 28px; }
    .mnl-mark, .mnl-ring { width: 122px; height: 122px; }
    .mnl-disc { width: 104px; height: 104px; }
    .mnl-mark-img { width: 72px; height: 72px; }
    .mnl-wave { width: 200px; height: 36px; }
    .mnl-text { font-size: 14px; }
}

/* Landscape corto (móvil horizontal): compacta el conjunto vertical */
@media (max-height: 460px) {
    .mnl-stage { gap: 18px; }
    .mnl-mark, .mnl-ring { width: 104px; height: 104px; }
    .mnl-disc { width: 88px; height: 88px; }
    .mnl-mark-img { width: 60px; height: 60px; }
    .mnl-wave { height: 32px; }
}

/* ── Dispositivos táctiles (móviles/tablets — lo que usan las doctoras) ────
   Recorta 1 de las 3 ondas concéntricas: una capa de compositor menos y algo
   menos de memoria GPU en hardware débil (Mali-G52 / Adreno 610), sin perder
   el efecto de respiración (2 ondas se leen igual). Alineado con la estrategia
   por tiers de app.css. No afecta laptops/desktop (pointer: fine). */
@media (hover: none) and (pointer: coarse) {
    .mnl-ring:nth-child(3) { display: none; }
}

/* ── Accesibilidad: respeta reduce-motion (congela, no elimina) ─────────── */
@media (prefers-reduced-motion: reduce) {
    .mnl-ring,
    .mnl-disc,
    .mnl-wave-track,
    .mnl-wave-line,
    .mnl-text {
        animation: none !important;
    }
    .mnl-ring { opacity: .22; transform: scale(1.3); }
    .mnl-ring:nth-child(2), .mnl-ring:nth-child(3) { display: none; }
    .mnl-wave-line { opacity: 1; }
    .mnl-text { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Marca del login como enlace a la LANDING pública ("/")
   ----------------------------------------------------------------------------
   Landing pública (Parte 1): un usuario "recordado" que aterriza en el login
   puede volver al sitio de venta tocando la marca. Este archivo ya se carga en
   AMBOS logins (@cssAsset, hand-served, sin build), así que aquí viven los
   estilos del enlace — sin recompilar app.css/portal.css.

   La marca conserva su layout original (.hero-header / .form-mobile-logo del
   login de doctoras); solo neutralizamos el estilo de <a> y anadimos una
   afordancia sutil de hover.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-home-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 12px;
    transition: opacity .16s ease, transform .16s ease;
}
.hero-home-link:hover { text-decoration: none; opacity: .88; }
.hero-home-link:focus-visible {
    outline: 2px solid var(--primary, #199c82);
    outline-offset: 3px;
}