/* ===========================================================================
   Dos Contrastes · Pantallas de autenticación.

   La puerta del estudio es una LÁMINA y el formulario es su RÓTULO: el
   cajetín que todo plano lleva abajo a la derecha, con sus celdas, sus
   hairlines y sus etiquetas en versalita monoespaciada. No es decoración
   prestada de ninguna plantilla — es la única forma que no podría ser el
   acceso de otra cosa.

   Lo anterior venía del sistema del que salió la plataforma: "Segoe UI"
   escrito a fuego, pesos 800, radios de 9 a 16 px contra el radio 2 px de
   este sistema, un degradado de tres paradas, una sombra azulada y un
   círculo blanco de 360 px de adorno. Aquí no hay ni un color ni una fuente
   sueltos: todo sale de los tokens de `_palette.html`, así que las doce
   paletas del estudio y el modo oscuro funcionan sin tocar nada.
   ========================================================================== */

body.auth { margin: 0; background: var(--surface); }

/* ── La lámina ───────────────────────────────────────────────────────────── */
.auth-lamina {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr min(520px, 100%);
  grid-template-rows: auto 1fr auto;
  gap: 2rem 3rem;
  padding: clamp(2.6rem, 4.6vw, 4.4rem);
  background: var(--card-bg);
  color: var(--text-1);
  font-family: var(--f-body);
  overflow: hidden;
}

/* Retícula: el papel sobre el que se dibuja. */
.auth-reticula {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 39px, color-mix(in srgb, var(--border-soft) 50%, transparent) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--border-soft) 50%, transparent) 39px 40px);
}

/* Marco de la lámina. */
.auth-marco {
  position: absolute; inset: 28px;
  border: 1px solid var(--text-1);
  pointer-events: none;
}

/* ── Cabecera: la marca ──────────────────────────────────────────────────── */
.auth-marca {
  position: relative; z-index: 1;
  grid-column: 1; grid-row: 1;
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--text-1); text-decoration: none;
  justify-self: start;
}
.auth-marca-logo { width: 32px; height: 32px; object-fit: contain; }
.auth-marca-dc { height: 36px; width: auto; flex-shrink: 0; color: var(--dc-logo-tinta, currentColor); --dc-gris: var(--dc-logo-gris, #808080); }
.auth-marca-word {
  font-family: var(--f-display); font-weight: 300; font-size: 1.06rem; letter-spacing: .02em;
}
.auth-marca-word b { font-weight: 800; }

/* ── Tesis ───────────────────────────────────────────────────────────────── */
.auth-tesis { position: relative; z-index: 1; grid-column: 1; grid-row: 2; align-self: center; max-width: 27rem; }
.auth-eyebrow {
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .28em;
  font-size: .68rem; font-weight: 600; color: var(--dc-accent);
  display: inline-flex; align-items: center; gap: .6rem;
}
.auth-eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; display: inline-block; }
.auth-tesis h1 {
  font-family: var(--f-display); font-weight: 200;
  font-size: clamp(1.9rem, 3.1vw, 2.7rem); line-height: 1.06; letter-spacing: -.022em;
  margin: 1.2rem 0 0; text-wrap: balance;
}
.auth-tesis h1 b { font-weight: 800; }
.auth-tesis p { margin: 1.1rem 0 0; font-size: .98rem; line-height: 1.6; color: var(--text-2); max-width: 32ch; }

.auth-pie {
  position: relative; z-index: 1; grid-column: 1; grid-row: 3; align-self: end;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── El rótulo: el cajetín del plano ─────────────────────────────────────── */
.auth-rotulo {
  position: relative; z-index: 1;
  grid-column: 2; grid-row: 2 / 4; align-self: end;
  width: 100%;
  border: 1px solid var(--text-1);
  background: var(--card-bg);
}

.rt-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--dc-primary); color: #F1EEE7;
  padding: .6rem .9rem;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
}
.rt-cab-lam { color: var(--dc-accent-light); white-space: nowrap; }

/* Celda a lo ancho: bienvenida, ayuda o aviso. */
.rt-nota {
  border-top: 1px solid var(--text-1);
  padding: .85rem .9rem;
  font-size: .88rem; line-height: 1.5; color: var(--text-2);
  background: var(--sunken);
}
.rt-nota b { color: var(--text-1); font-weight: 600; }

.rt-aviso {
  border-top: 1px solid var(--border);
  border-left: 2px solid var(--dc-accent);
  padding: .7rem .9rem; font-size: .85rem; line-height: 1.45; color: var(--text-2);
  background: color-mix(in srgb, var(--dc-accent) 8%, transparent);
}
.rt-aviso--error { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); color: var(--bad); }
.rt-aviso--ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok); }

/* Fila de campo: etiqueta a la izquierda, dato a la derecha, como en el
   cajetín. La etiqueta va sobre fondo hundido para que se lea como celda. */
.rt-fila { display: grid; grid-template-columns: 132px 1fr; border-top: 1px solid var(--border); }
.rt-fila:first-of-type { border-top-color: var(--text-1); }
.rt-et {
  display: flex; align-items: center;
  font-family: var(--f-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
  padding: .55rem .9rem; border-right: 1px solid var(--border);
  background: var(--sunken);
}
.rt-campo { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
/* El input no lleva caja propia: la caja es la celda del rótulo. */
.rt-campo input {
  width: 100%; border: 0; background: transparent; outline: none;
  font-family: var(--f-body); font-size: .9rem; color: var(--text-1);
  padding: .95rem .9rem;
}
.rt-campo input::placeholder { color: var(--text-3); }
/* El foco pinta la celda entera, no un anillo alrededor del input. */
.rt-fila:focus-within { background: color-mix(in srgb, var(--dc-accent) 7%, transparent); }
.rt-fila:focus-within .rt-et { color: var(--dc-accent); }
.rt-campo--ojo input { padding-right: 2.8rem; }
.rt-ojo {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-3);
}
.rt-ojo:hover { color: var(--dc-accent); }
.rt-error { padding: 0 .9rem .7rem; font-size: .78rem; color: var(--bad); }
.rt-ayuda { padding: 0 .9rem .8rem; font-size: .76rem; color: var(--text-3); }

.rt-opciones {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding: .75rem .9rem;
  font-size: .85rem;
}
.rt-opciones .form-check { margin: 0; }
.rt-opciones .form-check-label { color: var(--text-2); }
.rt-opciones a { color: var(--dc-accent-ink, var(--dc-accent)); text-decoration: none; }
.rt-opciones a:hover { color: var(--text-1); }

/* La franja de envío: el borde inferior del cajetín. */
.rt-enviar {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; border: 0; border-top: 1px solid var(--text-1);
  background: var(--dc-primary); color: #F1EEE7;
  font-family: var(--f-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 1.05rem 1rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.rt-enviar:hover { background: var(--dc-accent); color: #1A1613; }
.rt-enviar:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 2px; }

/* Salida secundaria (volver). Va encima de la franja de envío: el negro es el
   canto inferior del cajetín y nada debe quedar colgando debajo. */
.rt-salida {
  border-top: 1px solid var(--border); padding: .7rem .9rem; text-align: center;
  font-size: .82rem;
}
.rt-salida a { color: var(--text-2); text-decoration: none; }
.rt-salida a:hover { color: var(--dc-accent); }

/* ── Modo oscuro ─────────────────────────────────────────────────────────── */
/* La tinta de la marca es casi el mismo tono que la lámina oscura, así que la
   cabecera y la franja de envío se perderían. En oscuro mandan el hundido y
   el acento, igual que hace `main.css` con los botones primarios. */
html[data-theme="dark"] .auth-marco { border-color: var(--border); }
html[data-theme="dark"] .auth-rotulo { border-color: var(--border); }
html[data-theme="dark"] .rt-fila:first-of-type,
html[data-theme="dark"] .rt-nota { border-top-color: var(--border); }
html[data-theme="dark"] .rt-cab {
  background: var(--sunken); color: var(--text-1);
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .rt-enviar {
  background: var(--dc-accent); color: #1A1613; border-top-color: var(--border);
}
html[data-theme="dark"] .rt-enviar:hover { background: var(--dc-accent-light); }

/* ── Responsivo ──────────────────────────────────────────────────────────── */
/* En un teléfono el marco a 28 px ahoga la pantalla y la filigrana estorba
   detrás del rótulo: se van, y el cajetín pasa a ocupar el ancho. */
@media (max-width: 900px) {
  .auth-lamina {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    gap: 1.6rem;
    padding: 1.5rem 1.25rem 2rem;
    align-content: start;
  }
  .auth-marco { display: none; }
  .auth-tesis { grid-column: 1; grid-row: 2; align-self: start; }
  .auth-rotulo { grid-column: 1; grid-row: 3; align-self: start; }
  .auth-pie { grid-column: 1; grid-row: 4; align-self: end; padding-top: 1rem; }
}
@media (max-width: 460px) {
  /* La cabecera del cajetín parte en dos renglones y empuja la lámina; en un
     teléfono basta el nombre del estudio. */
  .rt-cab-sub { display: none; }
  /* La etiqueta a la izquierda deja de caber sin partir el dato en dos. */
  .rt-fila { grid-template-columns: 1fr; }
  .rt-et { border-right: 0; border-bottom: 1px solid var(--border); padding: .5rem .9rem; }
  .rt-campo input { padding-top: .8rem; padding-bottom: .8rem; }
}