.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo--trefoil {
  display: inline-block;
  object-fit: contain;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* label (21) → input: Figma 9 px / 6 px */
}

.field__label {
  /* Figma 32:437/439: labels "Usuario"/"Contraseña" SemiBold 16 negro.
     width fit-content → cada label mide lo que mide su palabra
     (59×21 / 91×21) y no el ancho del input (QA C006). */
  align-self: flex-start;
  width: fit-content;
  font-size: 16px;
  line-height: 21px;
  font-weight: var(--font-weight-semibold);
  color: var(--login-text-heading, #000000);
}

.field__control {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 40px; /* Figma 32:442/443: 329×40 r5 */
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--login-input-border, #797776);
  border-radius: var(--login-input-radius, 5px);
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.field__control:hover {
  border-color: var(--login-input-border, #797776);
}

.field__control:focus-within {
  border-color: var(--color-brand-primary);
  box-shadow: var(--shadow-focus);
}

.field--invalid .field__control {
  border-color: var(--color-danger);
}

.field--invalid .field__control:focus-within {
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.2);
}

.field__input {
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-3);
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: var(--color-text-primary);
}

.field__input::placeholder {
  color: var(--color-text-muted);
}

.field__trailing {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  color: var(--color-text-secondary);
}

.field__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.field__toggle:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
}

.field__error {
  font-size: var(--font-size-small);
  color: var(--color-danger);
}

.field__hint {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition-fast),
    color var(--transition-fast), border-color var(--transition-fast),
    box-shadow var(--transition-fast), transform var(--transition-fast);
  border: 1px solid transparent;
  user-select: none;
  white-space: nowrap;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-small);
}

.btn--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-h3);
}

.btn--primary {
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}

.btn--primary:hover:not(:disabled) {
  background: var(--color-brand-primary-hover);
}

.btn--primary:active:not(:disabled) {
  background: var(--color-brand-primary-pressed);
  transform: translateY(1px);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn--secondary:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
}

.btn--ghost {
  background: transparent;
  color: var(--color-brand-primary);
}

.btn--ghost:hover:not(:disabled) {
  background: rgba(209, 0, 31, 0.06);
}

.btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

.btn--loading .btn__label {
  opacity: 0.85;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Diálogo modal de aviso. Misma estética que el card del login y que el
   aviso de sesión vencida de la home: fondo blanco, borde superior rojo,
   botón pill rojo. */

.dialog__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: var(--z-modal);
}

.dialog__panel {
  position: fixed;
  top: 18vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(460px, calc(100vw - 32px));
  box-sizing: border-box;
  background: var(--color-surface);
  border-radius: 15px;
  border-top: 5px solid var(--color-brand-primary);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  padding: var(--space-6);
  z-index: calc(var(--z-modal) + 1);
  font-family: var(--font-family-base);
}

.dialog__title {
  margin: 0 0 var(--space-3);
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.dialog__body {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-secondary);
}

.dialog__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
}

/* Mismo pill que el botón "Ingresar" (C009) */
.dialog__btn {
  border-radius: 31px;
  min-width: 140px;
  height: 42px;
  padding: 0 var(--space-5);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 0 4.9px rgba(0, 0, 0, 0.25);
}

/* Card de login — Figma 32:450 "Rectangle 5100" 584×744 r29.
   Columna interna de 329 px centrada (inputs 32:442/443 en x=833 de un
   card que arranca en x=707 → padding lateral 127 px). Medidas verticales
   del Figma (desde el tope del card): lockup 87 · título 149 · subtítulo
   246 · label Usuario 322 · input 352 · label Contraseña 421 · input 448 ·
   Olvidé 520 · botón 562 · Registrate 643 · fin 744.
   Ajustes QA ciclo 1: C002 C004 C005 C006 C007 C009 C010. */

.login-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-5);
  background: var(--color-surface);
  border-radius: 24px;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   Header: lockup + título + subtítulo · CENTRADO (desktop)
   ============================================================ */
.login-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

/* Móvil/tablet: mismo contenido que desktop — lockup, título y subtítulo
   (QA C068/C069). */
.login-card__header .logo--lockup-red {
  display: inline-block;
}

/* Título: DM Sans Bold 30 px · line-height 1.15 · 2 líneas · 383×68 (C004).
   En celulares angostos baja hasta 24 px para que "Portal del
   Intermediario" entre en una línea. */
.login-card__title {
  font-size: clamp(24px, 7vw, 30px);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  color: var(--login-text-heading, #000000);
  letter-spacing: 0;
}

/* Subtítulo: Regular 16 px · #7d7d7d · 313×50 (C005) */
.login-card__subtitle {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  color: var(--login-text-subtitle, #7d7d7d);
  max-width: 313px;
  line-height: 25px;
}

/* ============================================================
   Body
   ============================================================ */
.login-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-card__forgot {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--space-1) * -1);
}

/* ============================================================
   Footer
   ============================================================ */
.login-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Botón "Ingresar" — pill rojo 328×42 r31 · texto SemiBold 18 (C009) */
.login-card__footer .btn--primary {
  border-radius: 31px;
  box-shadow: 0 0 4.9px rgba(0, 0, 0, 0.25);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  padding: 0 var(--space-5);
  min-height: 42px;
  height: 42px;
}

/* "¿No tienes cuenta? Regístrate aquí" — Regular 16 · #979797 (C010) */
.login-card__signup {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--login-text-muted, #979797);
  text-align: center;
  width: fit-content; /* mide su texto (258×21), no el ancho de la columna */
  margin: 0 auto;
}

/* ============================================================
   Links
   ============================================================ */
/* Por defecto (e.g. "Regístrate aquí") → rojo de marca, mismo cuerpo */
.login-card__link {
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-regular);
  font-size: inherit;
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.login-card__link:hover {
  color: var(--color-brand-primary-hover);
}

/* "Olvidé mi contraseña" → Light Italic 16 · #979797 · subrayado (C007) */
.login-card__link--italic {
  color: var(--login-text-muted, #979797);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 21px;
  text-decoration: underline;
}

.login-card__link--italic:hover {
  color: var(--login-text-muted, #979797);
  opacity: 0.85;
}

@media (min-width: 480px) {
  .login-card {
    padding: var(--space-10) var(--space-8);
  }
}

/* ============================================================
   Desktop ≥ 1024px: card 584×744 r29 (C002). Sin sombra ni borde: en el
   Figma el card es un rectángulo blanco plano sobre la foto.
   ============================================================ */
@media (min-width: 1024px) {
  .login-card {
    width: 584px;
    max-width: min(584px, calc(100vw - 420px));
    min-height: 744px;
    margin: 0;
    padding: 87px 40px 80px;
    gap: 0;
    border-radius: 29px;
    box-shadow: none;
    border: 0;
    justify-content: flex-start;
  }

  /* Columna interna de 329 px (inputs / botón) */
  .login-card__body,
  .login-card__footer {
    width: 329px;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Desktop: mostrar lockup + subtítulo (Figma desktop) */
  .login-card__header .logo--lockup-red {
    display: inline-block;
  }
  .login-card__subtitle {
    display: block;
  }

  .login-card__header {
    gap: 0;
  }
  .login-card__title {
    margin-top: 37px; /* lockup (25) → título en y=149 */
  }
  .login-card__subtitle {
    margin-top: 29px; /* título (68) → subtítulo en y=246 */
  }

  .login-card__body {
    margin-top: 26px; /* subtítulo (50) → label Usuario en y=322 */
    gap: 29px; /* input Usuario (fin 392) → label Contraseña (421) */
  }

  .login-card__forgot {
    margin-top: 3px; /* input Contraseña (fin 488) → Olvidé (520) */
  }

  .login-card__footer {
    margin-top: 21px; /* Olvidé (21) → botón en y=562 */
    gap: 39px; /* botón (42) → Registrate en y=643 */
  }
}

/* En viewports bajos (laptops 768 px de alto) el card de 744 no entra con
   los márgenes: dejamos que el alto lo defina el contenido y el panel
   derecho scrollea. */
@media (min-width: 1024px) and (max-height: 860px) {
  .login-card {
    min-height: 0;
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* Página de Login — rediseño Figma 32:394 (desktop) y 9:698 (mobile).
   Ajustes QA ciclo 1 (15-09-2026): C001 fondo 100 % viewport, C002 card
   584×744 r29 flotando a la derecha, C011 lockup 385×87 abajo-izquierda.
   C067–C069 (móvil): también en celular/tablet va la foto de fondo, y el card
   muestra logo + título + subtítulo como en desktop (el Figma sólo tiene
   frame desktop; el móvil es su adaptación). */

.auth-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #dbdadd;
  background-image: url(8d8764dc94af45490ac4.jpg);
  background-size: cover;
  background-position: 30% center; /* en vertical se ve la persona */
  background-repeat: no-repeat;
}

/* ============================================================
   Lockup "mapfre" blanco abajo a la izquierda (solo desktop).
   Figma 40:1018 "Logo mapfre14 1": 385×87 en (64, 731) de 1440×900
   → left 64 · bottom 82.
   ============================================================ */
.auth-page__hero-brand {
  display: none;
  position: absolute;
  left: 64px;
  bottom: 82px;
  z-index: 1;
  line-height: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* ============================================================
   Form (único panel en móvil; a la derecha sobre la foto en desktop)
   ============================================================ */
.auth-page__form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.auth-page__form-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
}

/* ============================================================
   Desktop ≥ 1024px: foto a pantalla completa · card blanco a la derecha.
   Figma 32:450 "Rectangle 5100": 584×744 r29 en (707, 72) de 1440×900
   → margen derecho 149 px (10.35 vw), centrado vertical.
   ============================================================ */
@media (min-width: 1024px) {
  .auth-page {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    background-position: center center;
  }

  .auth-page__hero-brand {
    display: block;
  }

  .auth-page__form {
    flex: 1 1 auto;
    height: 100%;
    overflow-y: auto;
    background: transparent;
    /* El card vive en la mitad derecha; dejamos libre la mitad izquierda
       para la foto y el lockup. */
    align-items: flex-end;
  }

  .auth-page__form-inner {
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-8) clamp(40px, 10.35vw, 149px) var(--space-8) 0;
    min-height: 100%;
  }
}



/* MAPFRE Display — fuente oficial de marca (3 pesos). */

@font-face {
  font-family: "MAPFRE Display";
  src: url(6fa6ca36c3fe2362feb2.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MAPFRE Display";
  src: url(1e93d8ed257e87ec1b1e.woff) format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "MAPFRE Display";
  src: url(c870349ad8148fa9e507.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   MAPFRE Uruguay · Portal del Agente · Design Tokens
   Fuente: REEF_Portal_Agente_Rediseno_Home_Login.docx §5
   ========================================================================== */

:root {
  /* --- Color · marca ----------------------------------------------------- */
  /* Rojo del diseño Figma del login (LogIN Portal). Difiere del #D1001F del
     REEF — acá priorizamos el mock del login de agente. */
  --color-brand-primary: #e2211c;
  --color-brand-primary-hover: #c01016;
  --color-brand-primary-pressed: #99070d;
  --color-brand-secondary: #1f1f1f;

  /* --- Login Figma · valores específicos -------------------------------- */
  --login-text-heading: #000000;       /* "Bienvenido al Portal del Agente" */
  --login-text-subtitle: #7d7d7d;      /* "Ingresa tus datos…" */
  --login-text-muted: #979797;         /* "Olvidé mi contraseña", "¿No tienes…" */
  --login-input-border: #797776;       /* borde de inputs */
  --login-input-radius: 5px;

  /* --- Color · superficies ---------------------------------------------- */
  --color-surface: #ffffff;
  --color-surface-alt: #f7f7f8;
  --color-surface-muted: #ededef;

  /* --- Color · bordes --------------------------------------------------- */
  --color-border: #e2e2e5;
  --color-border-strong: #c5c5cb;

  /* --- Color · texto ---------------------------------------------------- */
  --color-text-primary: #1f1f1f;
  --color-text-secondary: #55555b;
  --color-text-muted: #8a8a92;
  --color-text-on-brand: #ffffff;

  /* --- Color · estados -------------------------------------------------- */
  --color-success: #2e7d32;
  --color-warning: #c96f00;
  --color-danger: #c62828;
  --color-info: #1a5a90;

  /* --- Tipografía -------------------------------------------------------- */
  --font-family-base: "MAPFRE Display", "DM Sans", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-family-mono: ui-monospace, "JetBrains Mono", Consolas, monospace;

  --font-size-display: clamp(28px, 4vw, 40px);
  --font-size-h1: clamp(22px, 3vw, 28px);
  --font-size-h2: 20px;
  --font-size-h3: 16px;
  --font-size-body: 15px;
  --font-size-small: 13px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-base: 1.5;

  /* --- Espaciado -------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Radios ----------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Sombras / elevación ---------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(209, 0, 31, 0.25);

  /* --- Transiciones ----------------------------------------------------- */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-index ---------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}

/* Breakpoints (referencia, no usables como tokens directos en CSS):
   xs   0      | sm  480px | md  768px
   lg  1024px  | xl 1280px | 2xl 1536px */

/* Reset minimal — basado en modern-normalize + ajustes propios */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

html {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background: var(--color-surface-alt);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#root_login_agente {
  flex: 1;
  display: flex;
  flex-direction: column;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}