/* Login -- "papel de estudio juridico". Ola R3: el dueño no quiso el efecto de
   R1 (escudo fantasma de fondo + tilt 3D de la card -- "hace algo nuevo, no
   uses el logo"). Fondo nuevo: hojas de papel (expedientes del estudio)
   flotando en profundidad real -- perspective en el contenedor, translateZ
   escalonado por hoja, rotacion sutil, deriva lentisima (36-58s) + parallax de
   mouse de 2-4px en rAF (ver wwwroot/js/login-scene.js). La card queda
   ESTATICA (sin tilt); solo conserva el barrido especular de una vez al
   cargar. Tema SIEMPRE claro (pre-auth, sin toggle). */

.rma-login-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg);
}

.rma-paper-field {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    perspective: 1800px;
}

.rma-paper {
    position: absolute;
    border-radius: 3px;
    background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 95%, transparent), color-mix(in srgb, var(--neutral-100) 90%, transparent));
    border: 1px solid color-mix(in srgb, var(--neutral-300) 45%, transparent);
    box-shadow: 0 30px 60px -24px rgba(35, 33, 30, 0.16), 0 10px 22px -14px rgba(35, 33, 30, 0.08);
    transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), var(--tz));
    will-change: transform;
    animation: rma-paper-drift var(--dur, 42s) ease-in-out infinite alternate;
}

.rma-paper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--neutral-300) 55%, transparent) 50%);
}

@keyframes rma-paper-drift {
    from { translate: 0 0; rotate: var(--rot-a); }
    to { translate: var(--drift-x) var(--drift-y); rotate: var(--rot-b); }
}

.rma-paper-1 { top: 6%; left: 5%; width: 210px; height: 290px; --tz: -190px; --rot-a: -3deg; --rot-b: -2.2deg; --drift-x: -10px; --drift-y: 12px; --dur: 46s; opacity: 0.32; }
.rma-paper-2 { top: 56%; left: 3%; width: 250px; height: 330px; --tz: -50px; --rot-a: 2deg; --rot-b: 2.8deg; --drift-x: 12px; --drift-y: -10px; --dur: 39s; opacity: 0.4; }
.rma-paper-3 { top: -8%; left: 60%; width: 230px; height: 310px; --tz: -230px; --rot-a: 3deg; --rot-b: 2.1deg; --drift-x: -14px; --drift-y: 10px; --dur: 52s; opacity: 0.26; }
.rma-paper-4 { top: 60%; left: 72%; width: 290px; height: 370px; --tz: 10px; --rot-a: -2deg; --rot-b: -1.2deg; --drift-x: 10px; --drift-y: -14px; --dur: 36s; opacity: 0.46; }
.rma-paper-5 { top: 16%; left: 84%; width: 190px; height: 250px; --tz: -150px; --rot-a: 1.5deg; --rot-b: 2.2deg; --drift-x: -8px; --drift-y: 12px; --dur: 44s; opacity: 0.3; }
.rma-paper-6 { top: 80%; left: 40%; width: 170px; height: 220px; --tz: -110px; --rot-a: -1deg; --rot-b: -1.8deg; --drift-x: 10px; --drift-y: -8px; --dur: 58s; opacity: 0.24; }

@media (prefers-reduced-motion: reduce) {
    .rma-paper { animation: none !important; opacity: 0.16; }
}

@media (max-width: 767.98px) {
    .rma-paper-3, .rma-paper-5, .rma-paper-6 { display: none; }
}

.rma-login-scene {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    width: 100%;
}

.rma-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
}

/* Bloque de marca (Ola R3): el lockup vertical completo (isotipo + nombre +
   eslogan, todo ya resuelto adentro del SVG por el manual de marca) en tamaño
   digno arriba de la card -- ya NO watermark de fondo. */
.rma-login-lockup {
    width: min(230px, 60vw);
    height: auto;
}

.rma-login-wordmark {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    font-size: var(--text-display-md);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin: 0;
}

.rma-login-tagline {
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    color: var(--text-secondary);
    margin: 10px 0 0;
}

.rma-login-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 408px;
    padding: 44px 40px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow-xl);
}

.rma-login-card::before {
    content: "";
    position: absolute;
    inset: -20% -40%;
    background: linear-gradient(75deg, transparent 42%, color-mix(in srgb, white 50%, transparent) 50%, transparent 58%);
    translate: -140% 0;
    animation: rma-specular-sweep 1.3s var(--ease-out) 0.5s 1 both;
    pointer-events: none;
}

@keyframes rma-specular-sweep {
    from { translate: -140% 0; }
    to { translate: 140% 0; }
}

@supports not (backdrop-filter: blur(1px)) {
    .rma-login-card { background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
    .rma-login-card::before { animation: none; opacity: 0; }
}

.rma-field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 7px; }

.rma-field label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.rma-field-control { position: relative; }

.rma-field-control .rma-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    translate: 0 -50%;
    display: inline-flex;
    color: var(--text-secondary);
    pointer-events: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.rma-field-control:focus-within .rma-field-icon { color: var(--accent); }

.rma-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.rma-field-control .rma-input { padding-left: 42px; }

.rma-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.rma-field-error {
    color: var(--rojo);
    font-size: var(--text-sm);
}

.rma-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 22px;
    cursor: pointer;
}

.rma-checkbox input { accent-color: var(--accent); width: 15px; height: 15px; }

.rma-btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: white;
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.rma-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(75deg, transparent 30%, color-mix(in srgb, white 30%, transparent) 50%, transparent 70%);
    translate: -120% 0;
    transition: translate var(--duration-slow) var(--ease-out);
    pointer-events: none;
}

.rma-btn-primary:hover { background: var(--accent-hover); }
.rma-btn-primary:hover::after { translate: 120% 0; }
.rma-btn-primary:active { transform: scale(0.99); }

.rma-btn-primary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.rma-forgot-link {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.rma-forgot-link:hover { color: var(--accent); text-decoration: underline; }

/* Ola R5: texto discreto (no un link -- no hay a donde navegar que prometa
   algo real) que reemplaza el viejo "Olvidaste tu contraseña?" en el login. */
.rma-forgot-hint {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.rma-login-footer {
    margin-top: 28px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Columna central: la reescritura de R3 dejo esta clase sin reglas y el
   contenido caia arriba-izquierda a viewports anchos (el flex del padre
   centra al hijo, pero el hijo era full-width). */
.rma-login-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: min(420px, calc(100vw - 32px));
    padding: 32px 0;
}

.rma-login-center > * {
    width: 100%;
}

/* ============================================================ Capa de tinta
   "El expediente que se firma solo": rubricas de escribano que se dibujan en
   tinta verde (stroke-dashoffset sobre pathLength=1), se sostienen y se
   desvanecen, mas el sello del estudio estampandose cada ciclo. Coreografia
   maestra de 24s con delays escalonados; todo aria-hidden y sin pointer
   events. El parallax lo mueve login-scene.js via --px/--py en el contenedor. */
.rma-tinta-field {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    color: #1d5147; /* tinta verde botella (login es claro siempre) */
    transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
}

.rma-rubrica {
    position: absolute;
    opacity: 0;
    filter: drop-shadow(0 1px 0 rgba(29, 81, 71, 0.14));
}

.rma-rubrica path {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.rma-rubrica-a {
    top: 9%;
    right: 3%;
    width: min(44vw, 660px);
    transform: rotate(-4deg);
}
.rma-rubrica-a path { stroke-width: 2.4; }

.rma-rubrica-b {
    bottom: 11%;
    left: 2%;
    width: min(36vw, 540px);
    transform: rotate(2.5deg);
}
.rma-rubrica-b path { stroke-width: 2.2; }

.rma-rubrica-c {
    top: 24%;
    left: 7%;
    width: min(24vw, 360px);
    transform: rotate(-6deg);
}
.rma-rubrica-c path { stroke-width: 2; }

.rma-rubrica-a, .rma-rubrica-b, .rma-rubrica-c {
    animation: rma-rubrica-vida 24s linear infinite;
}
.rma-rubrica-a { animation-delay: 0s; }
.rma-rubrica-b { animation-delay: 8s; }
.rma-rubrica-c { animation-delay: 15s; }

/* La opacidad y el trazo viven en el MISMO keyframes para que el reset del
   dashoffset (33%) ocurra siempre con opacidad 0 (salto invisible). */
@keyframes rma-rubrica-vida {
    0%   { opacity: 0;    stroke-dashoffset: 1; }
    2%   { opacity: 0.5; }
    9%   { stroke-dashoffset: 0; }
    24%  { opacity: 0.5;  stroke-dashoffset: 0; }
    31%  { opacity: 0;    stroke-dashoffset: 0; }
    33%  { stroke-dashoffset: 1; }
    100% { opacity: 0;    stroke-dashoffset: 1; }
}

/* Las custom properties de keyframes no animan strokes de paths hijos en
   todos los engines: animamos el path directamente. */
.rma-rubrica path { animation: inherit; animation-name: rma-rubrica-trazo; }
.rma-rubrica-a path { animation-delay: 0s; }
.rma-rubrica-b path { animation-delay: 8s; }
.rma-rubrica-c path { animation-delay: 15s; }

@keyframes rma-rubrica-trazo {
    0%   { stroke-dashoffset: 1; }
    9%   { stroke-dashoffset: 0; }
    31%  { stroke-dashoffset: 0; }
    33%  { stroke-dashoffset: 1; }
    100% { stroke-dashoffset: 1; }
}

.rma-sello {
    position: absolute;
    top: 33%;
    right: 11%;
    width: 112px;
    height: 112px;
    opacity: 0;
    transform: rotate(-8deg) scale(1.16);
    animation: rma-sello-estampa 24s ease-out infinite;
    animation-delay: 5s;
}

@keyframes rma-sello-estampa {
    0%    { opacity: 0;    transform: rotate(-8deg) scale(1.16); }
    2.2%  { opacity: 0.42; transform: rotate(-8deg) scale(1); }
    4%    { opacity: 0.26; transform: rotate(-8deg) scale(1); }
    20%   { opacity: 0.26; transform: rotate(-8deg) scale(1); }
    27%   { opacity: 0;    transform: rotate(-8deg) scale(1); }
    100%  { opacity: 0;    transform: rotate(-8deg) scale(1.16); }
}

/* Mas vida a los papeles (pedido explicito: "que haya movimiento"): amplitud
   ~1.6x y ciclos ~20% mas cortos que los de R3. Override por cascade. */
.rma-paper-1 { --drift-x: -17px; --drift-y: 20px;  --rot-a: -4.2deg; --rot-b: -2.8deg; --dur: 37s; }
.rma-paper-2 { --drift-x: 20px;  --drift-y: -17px; --rot-a: 2.8deg;  --rot-b: 4deg;    --dur: 31s; }
.rma-paper-3 { --drift-x: -23px; --drift-y: 17px;  --rot-a: 4.2deg;  --rot-b: 2.6deg;  --dur: 42s; }
.rma-paper-4 { --drift-x: 17px;  --drift-y: -23px; --rot-a: -3deg;   --rot-b: -1.6deg; --dur: 29s; }
.rma-paper-5 { --drift-x: -14px; --drift-y: 20px;  --rot-a: 2.2deg;  --rot-b: 3.2deg;  --dur: 35s; }
.rma-paper-6 { --drift-x: 17px;  --drift-y: -14px; --rot-a: -1.6deg; --rot-b: -2.6deg; --dur: 46s; }

@media (prefers-reduced-motion: reduce) {
    .rma-rubrica, .rma-rubrica path, .rma-sello {
        animation: none;
    }
    /* Composicion en reposo: una rubrica dibujada y el sello apoyado. */
    .rma-rubrica-a { opacity: 0.32; }
    .rma-rubrica-a path { stroke-dashoffset: 0; }
    .rma-sello { opacity: 0.2; transform: rotate(-8deg) scale(1); }
}

/* ==================================================== Sello de agua gigante
   La R del estudio, enorme y disfuminada detras de la card (pedido explicito
   del dueno): vive DENTRO del stacking context de la columna central con
   z-index -1, asi queda detras de la card pero delante de papeles y tinta.
   Respira lentisimo. */
.rma-sello-fondo {
    position: absolute;
    top: 46%;
    left: 50%;
    width: min(560px, 86vw);
    aspect-ratio: 1;
    z-index: -1;
    color: #1d5147;
    opacity: 0.055;
    filter: blur(2.5px);
    transform: translate(-50%, -38%) rotate(-7deg);
    animation: rma-sello-fondo-respira 26s ease-in-out infinite alternate;
    pointer-events: none;
}

.rma-sello-fondo svg {
    width: 100%;
    height: 100%;
}

@keyframes rma-sello-fondo-respira {
    from { transform: translate(-50%, -38%) rotate(-7deg) scale(1); }
    to   { transform: translate(-50%, -38%) rotate(-5.5deg) scale(1.03); }
}

/* ============================================================= Firma bajo el
   lockup: un subrayado de tinta que se dibuja una sola vez al cargar. */
.rma-brand-firma {
    width: 168px;
    height: 18px;
    margin: 2px auto 0;
    display: block;
    color: #1d5147;
    opacity: 0.4;
}

.rma-brand-firma path {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rma-firma-trazo 900ms cubic-bezier(0.4, 0, 0.2, 1) 400ms forwards;
}

@keyframes rma-firma-trazo {
    to { stroke-dashoffset: 0; }
}

/* ======================================================== Huella del sello:
   despues del estampado (delay 5s del ciclo de 24s), queda un anillo de tinta
   residual que persiste mas tiempo y se va solo. */
.rma-sello-huella {
    position: absolute;
    top: 33%;
    right: 11%;
    width: 112px;
    height: 112px;
    opacity: 0;
    transform: rotate(-6deg) translate(3px, 2px);
    animation: rma-huella-vida 24s linear infinite;
    animation-delay: 5s;
}

@keyframes rma-huella-vida {
    0%    { opacity: 0; }
    2.2%  { opacity: 0; }
    3%    { opacity: 0.12; }
    52%   { opacity: 0.09; }
    62%   { opacity: 0; }
    100%  { opacity: 0; }
}

/* ================================================== La card llega como papel:
   se apoya con un asentamiento corto al cargar (una sola vez). */
.rma-login-card {
    animation: rma-card-se-apoya 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rma-card-se-apoya {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================== Tinta en las micro-interacciones:
   subrayado que se dibuja al enfocar cada campo, y el boton que "estampa". */
.rma-field-control {
    position: relative;
}

.rma-field-control::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: #1d5147;
    opacity: 0.55;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.rma-field-control:focus-within::after {
    transform: scaleX(1);
}

.rma-btn-primary:active {
    transform: translateY(1px) scale(0.985);
    transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
    .rma-sello-fondo,
    .rma-sello-huella,
    .rma-brand-firma path,
    .rma-login-card {
        animation: none;
    }
    .rma-login-card { opacity: 1; transform: none; }
    .rma-brand-firma path { stroke-dashoffset: 0; }
    .rma-sello-fondo { transform: translate(-50%, -38%) rotate(-7deg); }
}

/* ================================================================= SPLIT
   Composicion editorial partida: panel de marca en verde botella (la escena
   de tinta pasa a vivir aca, en crema tono-sobre-tono) + panel de formulario
   directo sobre papel. Los keyframes/clases de la escena se REUSAN; este
   bloque solo re-ancla posiciones y re-tinta colores dentro del panel. */
.rma-auth-split {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    min-height: 100vh;
    background: var(--bg);
}

/* ------------------------------------------------------------ Panel marca */
.rma-auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    color: #F4EFE4;
    background:
        radial-gradient(120% 90% at 85% 8%, rgba(244, 239, 228, 0.07), transparent 55%),
        linear-gradient(165deg, #1A4A40 0%, #123B33 58%, #0E312A 100%);
    clip-path: inset(0 100% 0 0);
    animation: rma-panel-barrido 700ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards;
}

@keyframes rma-panel-barrido {
    to { clip-path: inset(0 0 0 0); }
}

.rma-brand-escena {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* La escena se re-ancla al panel (era fixed a viewport) y se re-tinta crema. */
.rma-auth-brand .rma-paper-field,
.rma-auth-brand .rma-tinta-field {
    position: absolute;
    inset: 0;
}

.rma-auth-brand .rma-tinta-field { color: rgba(244, 239, 228, 0.85); }

.rma-auth-brand .rma-paper {
    background: rgba(244, 239, 228, 0.05);
    border: 1px solid rgba(244, 239, 228, 0.09);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.rma-auth-brand .rma-paper::after { display: none; }

.rma-auth-brand .rma-rubrica { filter: none; }
.rma-auth-brand .rma-rubrica-a { top: 6%; right: -4%; width: 58%; }
.rma-auth-brand .rma-rubrica-b { bottom: 7%; left: -3%; width: 52%; }
.rma-auth-brand .rma-sello { top: 12%; right: 12%; }
.rma-auth-brand .rma-sello-huella { top: 12%; right: 12%; }

/* El sello gigante: embossed tono sobre tono, medio asomado del borde. */
.rma-auth-brand .rma-sello-fondo {
    position: absolute;
    top: auto;
    bottom: -14%;
    left: auto;
    right: -10%;
    width: min(520px, 58%);
    transform: rotate(-9deg);
    color: #F4EFE4;
    opacity: 0.05;
    filter: blur(1.5px);
    animation-name: rma-sello-fondo-respira-b;
}

@keyframes rma-sello-fondo-respira-b {
    from { transform: rotate(-9deg) scale(1); }
    to   { transform: rotate(-7.5deg) scale(1.03); }
}

.rma-brand-contenido {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(28px, 4.5vw, 64px);
    width: 100%;
}

.rma-brand-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rma-brand-avatar { width: 34px; height: 34px; color: #F4EFE4; opacity: 0.9; }

.rma-brand-nombre {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 239, 228, 0.72);
}

.rma-brand-eyebrow {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 239, 228, 0.55);
    margin: 0 0 18px;
}

.rma-brand-display {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-weight: 550;
    font-size: clamp(38px, 4.6vw, 68px);
    line-height: 1.06;
    letter-spacing: -0.01em;
    margin: 0;
}

.rma-linea {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
}

.rma-linea > span {
    display: inline-block;
    transform: translateY(118%);
    animation: rma-linea-sube 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rma-linea:nth-child(1) > span { animation-delay: 500ms; }
.rma-linea:nth-child(2) > span { animation-delay: 600ms; }
.rma-linea:nth-child(3) > span { animation-delay: 700ms; }

@keyframes rma-linea-sube {
    to { transform: translateY(0); }
}

.rma-brand-flourish {
    width: min(250px, 40%);
    height: 24px;
    margin-top: 14px;
    color: #C9A756; /* dorado — unico acento sobre el verde */
}

.rma-brand-flourish path {
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rma-firma-trazo 750ms cubic-bezier(0.4, 0, 0.2, 1) 1250ms forwards;
}

.rma-brand-baja {
    max-width: 46ch;
    margin: 20px 0 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(244, 239, 228, 0.66);
    opacity: 0;
    animation: rma-baja-aparece 600ms ease-out 1100ms forwards;
}

@keyframes rma-baja-aparece {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rma-brand-pie {
    font-size: 12.5px;
    color: rgba(244, 239, 228, 0.4);
    margin: 0;
}

/* ------------------------------------------------------- Panel formulario */
.rma-auth-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 4vw, 56px);
    background: var(--bg);
}

.rma-auth-form-inner {
    width: min(400px, 100%);
    animation: rma-card-se-apoya 480ms cubic-bezier(0.22, 1, 0.36, 1) 250ms both;
}

.rma-form-eyebrow {
    font-size: 11.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted, #8a857c);
    margin: 0 0 6px;
}

.rma-form-titulo {
    font-family: var(--font-serif, "Fraunces", Georgia, serif);
    font-size: 34px;
    font-weight: 560;
    margin: 0 0 26px;
    color: var(--text-primary, #1c1b17);
}

/* El form llega dentro de .rma-login-card (las views de Account la usan):
   en el split el panel ES la superficie — la card pierde su chrome. */
.rma-auth-form .rma-login-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    animation: none; /* la entrada la hace .rma-auth-form-inner */
}

/* ------------------------------------------------------------- Responsive */
@media (max-width: 940px) {
    .rma-auth-split { grid-template-columns: 1fr; }

    .rma-auth-brand { min-height: 0; }

    .rma-brand-escena { display: none; }

    .rma-brand-contenido { gap: 18px; padding: 24px 22px 26px; }

    .rma-brand-display { font-size: clamp(28px, 8vw, 38px); }

    .rma-brand-baja, .rma-brand-pie { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rma-auth-brand { clip-path: inset(0 0 0 0); animation: none; }
    .rma-linea > span { transform: none; animation: none; }
    .rma-brand-flourish path { stroke-dashoffset: 0; animation: none; }
    .rma-brand-baja { opacity: 1; animation: none; }
    .rma-auth-form-inner { animation: none; }
}

/* Labels robustos a zoom fraccional (125%/110% de Windows): a 11px/600 los
   trazos de las mayusculas pierden subpixeles y la "E" se ve mordida (visto
   en produccion). Cuerpo mas grande + peso mayor + tracking en em. */
.rma-field label,
.rma-form-eyebrow {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    -webkit-font-smoothing: antialiased;
}

/* La card en el split es transparente pero seguia RECORTANDO: overflow:hidden
   + border-radius heredados de la card centrada mordian la primera letra del
   primer label en la esquina superior izquierda (hallazgo del dueno con
   DevTools). Sin chrome no hay nada que recortar ni barrer. */
.rma-auth-form .rma-login-card {
    overflow: visible;
    border-radius: 0;
    max-width: none;
    backdrop-filter: none;
}

.rma-auth-form .rma-login-card::before {
    display: none;
}

/* ============================================================ Paginas de
   estado (Ola R4, lenguaje Expediente): 404 / 500 / acceso denegado / sesion
   finalizada heredan el split de _LayoutAuth (brand panel + su rubrica
   dorada ya cuentan como el UNICO acento dorado de la pantalla -- regla 1 del
   lenguaje). El panel de formulario solo aporta bajada + una rubrica TENUE en
   tinta (no dorada, no un segundo acento) + boton de vuelta. */
.rma-auth-estado-rubrica {
    display: block;
    width: 168px;
    height: 14px;
    margin: 14px 0 0;
    color: #1d5147;
    opacity: 0.35;
}

.rma-auth-estado-rubrica path {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rma-firma-trazo 700ms cubic-bezier(0.4, 0, 0.2, 1) 300ms forwards;
}

.rma-auth-cta {
    display: block;
    width: 100%;
    margin-top: 24px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    .rma-auth-estado-rubrica path { animation: none; stroke-dashoffset: 0; }
}