/* =====================================================================================================
   MiRodeo · ingreso · propuesta 1 «Tranquera» (decisión de Nicolás del 05/11/2026, claude/web-ingreso.md)
   UNA SOLA HOJA para la portada de mirodeo.com.ar y para el ingreso del tablero de cada cliente (clave, «Cambiar», «Olvidé mi clave», «Link enviado»,
   clave mal puesta, «Entrando…» y elegir clave #/clave/…): lo usan los <main> que llevan la clase «mr-tranquera» (index.html, IngresoTablero.tsx, ElegirClave.tsx).
   NO la lleva el celular de la manga (vincular y PIN): ese sigue con su boceto B (app/src/pantallas/acceso.css).
   Esta hoja va DESPUÉS de ingreso.css y lo pisa con más especificidad.
   Foto Hereford (N1) a pantalla completa, título grande a la izquierda con la raya terracota debajo y la tarjeta flotando abajo a la derecha
   (en el celular: el título arriba y la tarjeta abajo, a todo el ancho). Arriba a la izquierda, el logo (y, en el tablero, «Tablero de <cliente>»); abajo, el pie.
   Colores, botón y letras: los de ingreso.css (siempre oscuro, botón terracota #8a3b1e con letra blanca, enlaces crema con subrayado terracota).
   Portada: título FIJO. Tablero: las frases rotan (h1 con data-frases): la caja tiene alto fijo y la raya no se mueve.
   ===================================================================================================== */

/* Velo: la mitad izquierda va oscura (ahí vive el título) y la foto luce a la derecha; la tarjeta es lisa, así que se lee con cualquier foto. */
.mr-tranquera .mr-velo {
  background:
    linear-gradient(90deg, rgba(16, 10, 7, .86) 0%, rgba(16, 10, 7, .80) 46%, rgba(16, 10, 7, .30) 68%, rgba(16, 10, 7, .08) 100%),
    linear-gradient(0deg, rgba(16, 10, 7, .55) 0%, rgba(16, 10, 7, 0) 45%);
}

/* Notebook: dos columnas. A la izquierda el logo (arriba), el título y el pie (abajo); a la derecha la tarjeta, abajo.
   La tarjeta crece hacia arriba (un error, la lista de campos) sin mover el título: están en columnas distintas. */
.mr-tranquera .mr-capa {
  grid-template-columns: minmax(0, 1fr) 410px; grid-template-rows: auto 1fr auto;   /* filas que no se achican a cero: si algo no entra, la prueba ve el scroll */
  column-gap: 4cqw; align-items: start; justify-items: start; text-align: left;
  padding: 4.2cqh 4.4cqw 3.6cqh;
  --mr-f: min(5.4cqw, 11cqh);        /* tamaño del título */
  --mr-lineas: 2;                    /* líneas que reserva la caja de las frases que rotan (tablero); la portada no las usa */
  --mr-aire-frase: 1.5cqh;           /* aire entre el título y lo de abajo (en el celular, entre el logo y el título) */
}
.mr-tranquera .mr-cab { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; }

/* El título: «Del corral al tablero, aunque no haya señal.» (portada) o la frase que toca (tablero), con la raya terracota debajo. */
.mr-tranquera .mr-frase {
  grid-column: 1; grid-row: 2; align-self: end; margin: 0; max-width: 46cqw; padding: 0 0 var(--mr-aire-frase);
  display: block; height: auto; overflow: visible; text-align: left;
  font: 700 var(--mr-f)/.98 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);
}
/* La app trae una regla de títulos (tipografia.css: «:root:not([data-presentacion]) h1», semi-negrita con tracking .03em) que pesa más que una clase y dejaba el título del
   tablero más flaco y más espaciado que el de la portada. Acá se le gana (tres clases) para que sea EL MISMO título en los dos lados. */
.mr-ingreso.mr-tranquera .mr-frase { font-family: var(--mr-f-titulo); font-weight: 700; letter-spacing: .005em; }
.mr-tranquera .mr-frase::after { content: ""; display: block; width: 2.2em; height: .12em; margin-top: .28em; background: var(--mr-pri-vivo); border-radius: 4px; }
/* La palabra subrayada de las frases que rotan (<em>) no lleva subrayado: el subrayado terracota es la raya de abajo, como en la portada. */
.mr-tranquera .mr-frase em { text-decoration: none; }
/* Frases que rotan (tablero): la caja mide siempre lo mismo (las líneas que reserva + la raya), así la raya no salta cuando cambia la frase.
   ajustarFrase() (ingreso-comun.js) achica la letra, si hace falta, para que entre la más larga. En el notebook el texto se pega a la raya, abajo. */
.mr-tranquera .mr-frase[data-frases] {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;   /* a la izquierda: ingreso.css los centra */
  height: calc(var(--mr-f) * (var(--mr-lineas) * .98 + .4) + var(--mr-aire-frase));
}

.mr-tranquera .mr-lugar { grid-column: 2; grid-row: 2 / 4; align-self: end; width: 100%; height: auto; align-content: end; }

/* Pie: en la portada «¿Querés MiRodeo en tu campo? Escribinos» (el botón mide 44 px y da el alto); en el tablero «Tablero hecho con MiRodeo». */
.mr-tranquera .mr-pie { grid-column: 1; grid-row: 3; align-self: end; margin: 0; min-height: 44px; flex-wrap: wrap; gap: 0 .4em; font-size: .98rem; }   /* 44 px fijos: así la portada no salta cuando consulta.js suma «Escribinos» */
.mr-tranquera[data-ingreso] .mr-pie { height: auto; min-height: 28px; }   /* el pie del tablero no tiene botón: no hace falta que mida 44 px */
/* «Escribinos»: letra crema con el subrayado terracota vivo, como «Cambiar» y «Olvidé mi clave». Abre el cuestionario «Consultanos» (consulta.js). */
.mr-tranquera .mr-pie .mr-escribinos { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: 0; border: 0; background: none; cursor: pointer;
  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; }

/* Celular: el título arriba y la tarjeta abajo, a todo el ancho. */
@container mr (max-width: 640px) {
  .mr-tranquera .mr-velo { background: linear-gradient(180deg, rgba(16, 10, 7, .82) 0%, rgba(16, 10, 7, .80) 28%, rgba(16, 10, 7, .44) 40%, rgba(16, 10, 7, .50) 50%, rgba(16, 10, 7, .84) 62%, rgba(16, 10, 7, .92) 100%); }
  .mr-tranquera .mr-capa { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; column-gap: 0; padding: 18px 16px 12px;
    --mr-f: min(10.4cqw, 6.6cqh); --mr-lineas: 3; --mr-aire-frase: 14px; }
  .mr-tranquera .mr-frase { grid-column: 1; grid-row: 2; align-self: start; max-width: none; padding: var(--mr-aire-frase) 0 0; }
  .mr-tranquera .mr-frase[data-frases] { justify-content: flex-start; }   /* en el celular el texto cuelga del logo y la raya lo sigue */
  .mr-tranquera .mr-lugar { grid-column: 1; grid-row: 3; }
  .mr-tranquera .mr-pie { grid-column: 1; grid-row: 4; justify-self: center; justify-content: center; padding-top: 4px; flex-wrap: nowrap; font-size: .9rem; gap: 0 .3em; }   /* un solo renglón, también a 360 px */
  .mr-tranquera .mr-pie .mr-escribinos { font-size: .95rem; }
}
/* Celular bajo (360×640): lo justo para que todo entre sin scroll. */
@container mr (max-width: 640px) and (max-height: 700px) {
  .mr-tranquera .mr-capa { padding: 12px 16px 4px; --mr-f: min(10.4cqw, 5.2cqh); --mr-lineas: 2; --mr-aire-frase: 8px; }
  .mr-tranquera .mr-cab { height: 40px; }
  .mr-tranquera .mr-tarjeta { padding: 16px 16px 8px; }
  .mr-tranquera .mr-form { gap: 8px; }
  .mr-tranquera .mr-form input { min-height: 52px; }
  .mr-tranquera .mr-btn { min-height: 54px; }
  .mr-tranquera .mr-pie { padding-top: 0; }
  /* El tablero tiene tarjetas más altas que la portada (clave + mail, «elegir clave» con su error): un poco más apretadas, solo ahí (la portada no lleva data-ingreso). */
  .mr-tranquera[data-ingreso] .mr-tarjeta { padding: 12px 16px 6px; }
  .mr-tranquera[data-ingreso] .mr-form { gap: 6px; }
  .mr-tranquera[data-ingreso] .mr-form input { min-height: 48px; }
  .mr-tranquera[data-ingreso] .mr-btn { min-height: 50px; }
}