/* =====================================================================================================
   MiRodeo · ingreso · propuesta 3 «Cartel de remate» (aprobada el 3/11/2026, claude/web-ingreso.md)
   UN SOLO DISEÑO para mirodeo.com.ar, el tablero de cada cliente y el celular (vincular y PIN).
   Foto oscura que se acerca muy despacio, frases enormes que rotan, el nombre del campo chico arriba y una tarjeta con el ingreso.
   Las letras (Oswald y Zilla Slab) las declara quien usa esto: la web en letras.css, la app en src/tipografia.css.
   Todo va con prefijo «mr-»: no pisa nada de la app.
   ===================================================================================================== */

.mr-ingreso, .mr-bienvenida {
  /* SIEMPRE OSCURO (decisión de Nicolás, 05/11/2026): la tarjeta va oscura en mirodeo.com.ar, el tablero y «elegir clave», con los mismos colores
     del PIN del celular (acceso.css, boceto B). No depende del modo del equipo ni de la Apariencia de la app. La versión clara se descartó.
     Botón TERRACOTA de la marca con letra blanca (elegido por Nicolás en el boceto de la web, 05/11). Los enlaces («Cambiar», «Olvidé mi clave»,
     «Escribinos») van en letra crema con el subrayado terracota vivo: el terracota oscuro como letra no se lee sobre la tarjeta oscura. */
  --mr-pri: #8a3b1e; --mr-sobre-pri: #ffffff; --mr-pri-vivo: #e2703f;
  --mr-enlace: #f6ede5;
  --mr-sup: #291e19; --mr-tinta: #f6ede5; --mr-tinta-s: #cdbdb0; --mr-linea: #4b3a30;
  --mr-peligro: #ff9e94; --mr-peligro-f: #3d1613; --mr-foco: #8fbcf5;
  --mr-in-fondo: #1c1411; --mr-in-borde: #8a7d74; --mr-in-fijo: rgba(255, 255, 255, .07);
  --mr-sello: #f3ead7;                       /* la marca a fuego sobre la foto */
  --mr-sobre-foto: #ffffff; --mr-sobre-foto-s: #efe4da;
  --mr-f-texto: 'Zilla Slab', Rockwell, 'Roboto Slab', Georgia, serif;
  --mr-f-titulo: 'Oswald', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --mr-foco-foto: 58% 62%;
  color-scheme: dark;
}
.mr-ingreso {
  position: fixed; inset: 0; overflow: hidden; z-index: 0;
  container-type: size; container-name: mr;
  background: #120c08; color: var(--mr-sobre-foto);
  font-family: var(--mr-f-texto); font-size: 17px; line-height: 1.35; font-feature-settings: "lnum" 1;
  -webkit-font-smoothing: antialiased;
}
.mr-ingreso *, .mr-ingreso *::before, .mr-ingreso *::after { box-sizing: border-box; }
.mr-ingreso :focus-visible { outline: 3px solid var(--mr-foco); outline-offset: 2px; }

/* ---------------------------------------------------------------- fondo: foto (o video) que se acerca muy despacio + velo */
.mr-media { position: absolute; inset: 0; overflow: hidden; background: #1a120d; }
.mr-media img, .mr-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: var(--mr-foco-foto); transform-origin: var(--mr-foco-foto);
  animation: mr-acercar 40s ease-in-out infinite alternate;
}
.mr-quieto .mr-media img, .mr-quieto .mr-media video { animation: none; }
@keyframes mr-acercar { from { transform: scale(1); } to { transform: scale(1.09); } }
.mr-velo { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 52%, rgba(12, 8, 5, .82) 0%, rgba(12, 8, 5, .79) 60%, rgba(12, 8, 5, .68) 100%); }
/* Celular en el campo: al sol, velo fuerte y parejo. */
.mr-velo.mr-fuerte { background: linear-gradient(180deg, rgba(12, 8, 5, .90) 0%, rgba(12, 8, 5, .86) 50%, rgba(12, 8, 5, .92) 100%); }

/* ---------------------------------------------------------------- la capa con todo: arriba la marca, la frase, la tarjeta y el pie */
.mr-capa {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(1cqh, 1fr) auto auto minmax(1cqh, 1fr) auto;
  justify-items: center; text-align: center;
  padding: 4cqh 5cqw 3.4cqh;
  --mr-f: min(7.6cqw, 13cqh);                /* tamaño de la frase: «letras enormes» (se achica sola si la más larga no entra) */
  --mr-lineas: 2;
  --mr-lugar: 420px;                        /* alto reservado a la tarjeta: el paso 1 (mail) y el 2 (clave) quedan en el mismo lugar */
}
.mr-cab { grid-row: 1; height: clamp(44px, 6cqh, 60px); display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; max-width: 100%; color: var(--mr-sobre-foto); text-decoration: none; }
.mr-cab .mr-sello { width: clamp(40px, 6cqh, 60px); height: clamp(40px, 6cqh, 60px); flex: none; }
.mr-cab .mr-logo-img { height: clamp(40px, 6cqh, 60px); max-width: 160px; object-fit: contain; flex: none; border-radius: 10px; }
.mr-cab .mr-iniciales { display: grid; place-items: center; width: clamp(40px, 6cqh, 60px); height: clamp(40px, 6cqh, 60px); flex: none; border-radius: 50%;
  background: var(--mr-sello); color: #5c2412; font: 700 clamp(16px, 2.3cqh, 22px)/1 var(--mr-f-titulo); letter-spacing: .02em; }
.mr-cab b { font: 700 clamp(22px, 3cqh, 32px)/1.05 var(--mr-f-titulo); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-cab small { display: block; font: 600 .82rem/1.2 var(--mr-f-texto); color: var(--mr-sobre-foto-s); letter-spacing: .02em; text-align: left; }
.mr-cab .mr-cab-txt { display: grid; min-width: 0; text-align: left; }

.mr-sello .trazo { fill: var(--mr-sello); }
.mr-sello .anillo { fill: none; stroke: var(--mr-sello); }

.mr-frase {
  grid-row: 3; margin: 0 0 4cqh; width: 100%; max-width: 1500px;
  height: calc(var(--mr-f) * var(--mr-lineas) * 0.96); display: flex; align-items: center; justify-content: center; overflow: hidden;
  font: 700 var(--mr-f)/0.92 var(--mr-f-titulo); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; color: var(--mr-sobre-foto);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.mr-frase-txt { display: block; max-width: 100%; transition: opacity .6s ease; }
.mr-frase-txt.mr-fuera { opacity: 0; }
.mr-frase em { font-style: normal; text-decoration: underline; text-decoration-color: var(--mr-pri-vivo); text-decoration-thickness: .09em; text-underline-offset: .1em; text-decoration-skip-ink: none; }

.mr-lugar { grid-row: 4; width: min(440px, 92cqw); height: var(--mr-lugar); display: grid; align-content: start; position: relative; z-index: 1; }
/* El alto del lugar es FIJO: la frase queda en el mismo lugar en todos los pasos; si la tarjeta es más alta (un error, la lista de campos), baja sobre el aire de abajo. */
.mr-pie { grid-row: 6; margin: 0; height: 26px; display: flex; align-items: center; font-size: .92rem; color: var(--mr-sobre-foto-s); }
.mr-pie a { color: inherit; font-weight: 700; }
.mr-hecho-con { display: inline-flex; align-items: center; gap: 7px; }
.mr-hecho-con .mr-sello { width: 22px; height: 22px; }
.mr-hecho-con b { font: 700 1rem var(--mr-f-titulo); letter-spacing: .03em; }

/* ---------------------------------------------------------------- la tarjeta y el formulario */
.mr-tarjeta { background: var(--mr-sup); color: var(--mr-tinta); border-radius: 20px; padding: 24px 26px 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); text-align: left; }
.mr-form { display: grid; gap: 12px; width: 100%; margin: 0; }
.mr-titulo-form { margin: 0; font: 600 1.45rem/1.15 var(--mr-f-titulo); letter-spacing: .01em; color: var(--mr-tinta); }
.mr-form label { font-weight: 700; font-size: 1.08rem; margin-bottom: -6px; color: var(--mr-tinta); }
.mr-form p { margin: 0; color: var(--mr-tinta); }
.mr-form input {
  width: 100%; min-height: 56px; padding: 0 16px; font: 600 1.18rem var(--mr-f-texto); color: var(--mr-tinta);
  background: var(--mr-in-fondo); border: 2px solid var(--mr-in-borde); border-radius: 12px; margin: 0;
}
/* La app (estilos.css) pinta TODOS los inputs con -webkit-text-fill-color de SU tema, que antes de entrar es el claro aunque el equipo esté en oscuro:
   tinta oscura sobre la tarjeta oscura, y no se veía lo que se escribe. El relleno del texto va con el de la tarjeta. */
.mr-form input { -webkit-text-fill-color: var(--mr-tinta); }
.mr-form input::placeholder { color: var(--mr-tinta-s); -webkit-text-fill-color: var(--mr-tinta-s); opacity: .8; font-weight: 400; }
/* Autocompletar de Chrome (mail y clave guardados): el navegador pinta el campo con SU fondo (celeste en claro, azul grisáceo en oscuro) y su letra, y sobre la tarjeta
   no se lee. Se le gana igual que en el PIN (app/src/pantallas/acceso.css): el fondo se tapa con una sombra interior del color del campo (el background del navegador va
   con !important y no se le puede ganar de frente), la letra y el cursor van con el color de la tarjeta, y la transición larguísima evita que el fondo del navegador asome.
   El color sale de los mismos tokens que el campo normal, así que sigue a la tarjeta: oscuro con la tarjeta oscura, claro con la clara.
   Dos reglas SEPARADAS: si se juntaran, un navegador que no entienda una de las dos tiraría las dos. */
.mr-form input:-webkit-autofill,
.mr-form input:-webkit-autofill:hover,
.mr-form input:-webkit-autofill:focus,
.mr-form input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--mr-tinta) !important; caret-color: var(--mr-tinta);
  box-shadow: 0 0 0 1000px var(--mr-in-fondo) inset !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.mr-form input:autofill,
.mr-form input:autofill:hover,
.mr-form input:autofill:focus,
.mr-form input:autofill:active {
  -webkit-text-fill-color: var(--mr-tinta) !important; caret-color: var(--mr-tinta);
  box-shadow: 0 0 0 1000px var(--mr-in-fondo) inset !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.mr-form input[readonly] { background: var(--mr-in-fijo); border-style: dashed; font-size: 1.04rem; text-overflow: ellipsis; }
.mr-form input.mr-mal { border: 3px solid var(--mr-peligro); }
.mr-fila-mail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.mr-campo-clave { position: relative; }
.mr-campo-clave input { padding-right: 92px; }
.mr-ver { position: absolute; right: 6px; top: 6px; bottom: 6px; min-width: 76px; border: 0; border-radius: 9px; background: var(--mr-in-fijo); color: var(--mr-tinta); font: 700 .95rem var(--mr-f-texto); cursor: pointer; }
.mr-btn {
  min-height: 58px; width: 100%; border: 0; border-radius: 12px; background: var(--mr-pri); color: var(--mr-sobre-pri);
  font: 700 1.3rem var(--mr-f-texto); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); margin: 0; text-decoration: none;
}
.mr-btn svg { width: 24px; height: 24px; flex: none; }
.mr-btn:hover { filter: brightness(1.08); }
.mr-btn:disabled { opacity: .75; cursor: progress; }
.mr-link { justify-self: center; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--mr-enlace); font: 700 1.02rem var(--mr-f-texto); text-decoration: underline; text-decoration-color: var(--mr-pri-vivo); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.mr-fila-mail .mr-link { justify-self: end; }
.mr-nota { margin: 0; font-size: .98rem; color: var(--mr-tinta-s) !important; text-align: center; }
.mr-nota.mr-izq { text-align: left; }
.mr-aviso-error { display: flex; gap: 10px; align-items: flex-start; background: var(--mr-peligro-f); color: var(--mr-peligro); border-left: 6px solid var(--mr-peligro); border-radius: 10px; padding: 10px 12px; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.mr-aviso-error svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.mr-aviso-ok { display: grid; justify-items: center; gap: 6px; text-align: center; }
.mr-aviso-ok svg { width: 52px; height: 52px; color: var(--mr-pri-vivo); }
.mr-entrando { display: grid; justify-items: center; gap: 10px; padding: 24px 0; font-weight: 700; font-size: 1.15rem; color: var(--mr-tinta); }
.mr-entrando i { width: 38px; height: 38px; border-radius: 50%; border: 4px solid var(--mr-linea); border-top-color: var(--mr-pri-vivo); animation: mr-girar 1s linear infinite; }
@keyframes mr-girar { to { transform: rotate(360deg); } }
.mr-opcion { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 14px; border: 2px solid var(--mr-in-borde); border-radius: 12px;
  background: var(--mr-in-fondo); color: var(--mr-tinta); text-align: left; cursor: pointer; font: 700 1.12rem var(--mr-f-texto); }
.mr-opcion small { display: block; font-weight: 400; font-size: .9rem; color: var(--mr-tinta-s); }
.mr-opcion .mr-mono { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--mr-pri); color: var(--mr-sobre-pri); font: 700 1.05rem var(--mr-f-titulo); overflow: hidden; }
.mr-opcion .mr-mono img { width: 100%; height: 100%; object-fit: cover; }
.mr-o { display: flex; align-items: center; gap: 10px; color: var(--mr-tinta-s); font-size: .95rem; }
.mr-o::before, .mr-o::after { content: ''; flex: 1; border-top: 1px solid var(--mr-linea); }
.mr-google { display: flex; justify-content: center; min-height: 44px; }
.mr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- alturas chicas (notebook 1280×720 y 1366×768): un poco más compacto */
@container mr (max-height: 790px) and (min-width: 641px) {
  .mr-tarjeta { padding: 20px 22px 14px; }
  .mr-form { gap: 10px; }
  .mr-form input { min-height: 54px; }
  .mr-btn { min-height: 56px; }
  .mr-capa { --mr-lugar: 404px; --mr-f: min(7.6cqw, 11cqh); }
  .mr-frase { margin-bottom: 3cqh; }
}
@container mr (max-height: 700px) and (min-width: 641px) {
  .mr-form { gap: 8px; }
  .mr-link { min-height: 40px; }
  .mr-capa { --mr-lugar: 380px; --mr-f: min(7.6cqw, 9.5cqh); }
}

/* ---------------------------------------------------------------- celular */
@container mr (max-width: 640px) {
  .mr-capa { padding: 16px 16px 12px; --mr-f: min(10.4cqw, 6.6cqh); --mr-lineas: 3; --mr-lugar: 404px; }
  .mr-frase { margin-bottom: 18px; }
  .mr-lugar { width: 100%; }
  .mr-tarjeta { padding: 20px 18px 14px; border-radius: 18px; }
  .mr-cab b { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .mr-media img, .mr-media video { animation: none; }
  .mr-frase-txt { transition: none; }
  .mr-entrando i { animation-duration: 3s; }
}

/* =====================================================================================================
   Celular (app de la manga): el fondo fijo detrás del PIN. Los estilos del PIN (boceto B) están en app/src/pantallas/acceso.css.
   ===================================================================================================== */
.mr-fondo-fijo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }   /* debajo del contenido de .acceso (que arma su propio apilado) */