/* =====================================================================
   Tarifario de Grúas — Tema visual
   Secretaría de Movilidad · Gobierno del Estado de México
   Requiere Bootstrap 5.3.3 cargado ANTES de este archivo.
   Solo capa visual: no depende de la lógica de Django ni de Bootstrap JS.
   ===================================================================== */

/* ---------- 1. Variables de marca ---------- */
:root {
  /* Color institucional */
  --tf-guinda:        #9F2241;
  --tf-guinda-oscuro: #861B36;
  --tf-guinda-suave:  rgba(159, 34, 65, .10);

  /* Neutros cálidos */
  --tf-fondo:         #FCFBFA;
  --tf-fondo-2:       #F7F4F2;
  --tf-superficie:    #FFFFFF;
  --tf-borde:         #DDD5D1;
  --tf-borde-suave:   #E6E0DC;
  --tf-linea:         #EFEAE7;

  /* Texto */
  --tf-texto:         #2B2523;
  --tf-texto-2:       #5C524E;
  --tf-texto-3:       #6B615D;
  --tf-texto-4:       #8A807B;

  /* Tipografía */
  --tf-font-titulo:   'Montserrat', system-ui, sans-serif;
  --tf-font-texto:    'Noto Sans', system-ui, sans-serif;
  --tf-font-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Forma */
  --tf-radio:         3px;
  --tf-sombra:        0 1px 2px rgba(43,37,35,.04);
  --tf-sombra-panel:  -24px 0 64px rgba(43,37,35,.08);

  /* Puente con Bootstrap: los componentes .btn-primary, .form-check, etc.
     toman el guinda sin tocar el CSS de Bootstrap. */
  --bs-primary:       var(--tf-guinda);
  --bs-primary-rgb:   159, 34, 65;
  --bs-link-color:    var(--tf-guinda);
  --bs-link-hover-color: var(--tf-guinda-oscuro);
  --bs-body-color:    var(--tf-texto);
  --bs-body-bg:       var(--tf-fondo);
  --bs-body-font-family: var(--tf-font-texto);
  --bs-border-radius: var(--tf-radio);
}

/* ---------- 2. Base ---------- */
body {
  font-family: var(--tf-font-texto);
  color: var(--tf-texto);
  background: var(--tf-fondo);
  -webkit-font-smoothing: antialiased;
}

/* La pantalla se integra al layout de Allauth, ocultando solo su chrome global. */
.tf-login-page > header,
.tf-login-page > footer { display: none; }
.tf-login-page > main.flex-grow-1 { min-height: 100vh; }
a { color: var(--tf-guinda); text-decoration: none; }
a:hover { color: var(--tf-guinda-oscuro); text-decoration: underline; }

/* ---------- 3. Estructura: panel dividido ---------- */
.tf-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 1.25fr) minmax(520px, 1fr);
}

.tf-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: clamp(36px, 4vw, 64px) clamp(32px, 5vw, 88px);
  /* Mapa, círculo y halo comparten centro */
  --tf-mapa-w: min(40vw, 640px);
  --tf-mapa-x: calc(98% - var(--tf-mapa-w) / 2);
  --tf-mapa-y: 52%;
  background:
    radial-gradient(circle at var(--tf-mapa-x) var(--tf-mapa-y), rgba(255,255,255,.055), transparent 34%),
    linear-gradient(145deg, var(--tf-guinda) 0%, var(--tf-guinda-oscuro) 78%);
  color: #fff;
}
/* Trama diagonal sutil del panel */
.tf-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, transparent 2px 10px);
}
.tf-aside > * { position: relative; z-index: 1; }
.tf-aside::after {
  content: "";
  position: absolute;
  width: var(--tf-mapa-w);
  aspect-ratio: 1;
  left: var(--tf-mapa-x);
  top: var(--tf-mapa-y);
  translate: -50% -50%;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(255,255,255,.018), 0 0 0 144px rgba(255,255,255,.012);
  pointer-events: none;
}
.tf-aside > .tf-mapa-marca {
  position: absolute;
  z-index: 0;
  left: var(--tf-mapa-x);
  top: var(--tf-mapa-y);
  width: var(--tf-mapa-w);
  height: auto;
  aspect-ratio: 1;
  opacity: .2;
  translate: -50% -50%;
  pointer-events: none;
}

.tf-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  padding: clamp(36px, 4vw, 64px) clamp(34px, 5vw, 76px);
  background: var(--tf-fondo);
  box-shadow: var(--tf-sombra-panel);
  position: relative;
  z-index: 2;
}
.tf-main > * { width: 100%; max-width: 620px; margin-inline: auto; }
.tf-consulta { animation: tf-entrada-suave .42s ease-out both; }
.tf-login { animation: tf-entrada-suave .42s .06s ease-out both; }
.tf-pie { animation: tf-entrada-suave .42s .12s ease-out both; }

@keyframes tf-entrada-suave {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 4. Lockup institucional ---------- */
.tf-brand { display: flex; align-items: center; gap: 20px; }
.tf-brand__logo { display: block; width: min(100%, 520px); height: auto; }
.tf-brand__escudo { height: 56px; width: auto; display: block; }
.tf-brand__sep { width: 1px; height: 42px; background: rgba(255,255,255,.28); }
.tf-brand__texto { display: flex; flex-direction: column; gap: 4px; }
.tf-brand__nombre {
  font-family: var(--tf-font-titulo);
  font-weight: 700; font-size: 18px; letter-spacing: .14em;
}
.tf-brand__dependencia {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
/* Variante clara del lockup (encabezado sobre blanco) */
.tf-brand--claro .tf-brand__sep { background: var(--tf-borde-suave); }
.tf-brand--claro .tf-brand__nombre { color: var(--tf-guinda); }
.tf-brand--claro .tf-brand__dependencia { color: var(--tf-texto-4); }

/* ---------- 5. Titular del panel ---------- */
.tf-kicker {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 24px;
}
.tf-titulo {
  font-family: var(--tf-font-titulo);
  font-weight: 700;
  font-size: clamp(42px, 4.4vw, 72px);
  line-height: 1.03;
  letter-spacing: -.025em;
  margin: 0 0 26px;
}
.tf-entrada {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  max-width: 44ch;
  text-wrap: pretty;
}

/* Guía breve: llena el panel con información útil sin competir con el formulario. */
.tf-guia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-guia__paso {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 6px;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(3px);
  color: rgba(255,255,255,.68);
  font-size: 11.5px;
  line-height: 1.45;
}
.tf-guia__paso strong { display: block; color: #fff; font-size: 12.5px; font-weight: 600; }
.tf-guia__numero {
  display: block;
  margin-bottom: 10px;
  color: #D8B78A;
  font-family: var(--tf-font-titulo);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}

/* ---------- 6. Cifras del panel ---------- */
.tf-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 20px 40px;
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 26px;
}
.tf-dato__cifra { font-family: var(--tf-font-titulo); font-size: 22px; font-weight: 600; }
.tf-dato__etiqueta { font-size: 11.5px; line-height: 1.4; margin-top: 4px; color: rgba(255,255,255,.6); }

/* ---------- 7. Bloque de consulta (acción principal) ---------- */
.tf-seccion-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tf-seccion-marca__linea { width: 26px; height: 2px; background: var(--tf-guinda); }
.tf-seccion-marca__texto {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--tf-guinda);
}
.tf-h2 {
  font-family: var(--tf-font-titulo);
  font-weight: 600; font-size: clamp(28px, 2vw, 34px); letter-spacing: -.025em;
  margin: 0 0 10px;
}
.tf-lead { margin: 0 0 30px; font-size: 15px; line-height: 1.6; color: var(--tf-texto-3); max-width: 46ch; }

.tf-label {
  display: block;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--tf-texto-2); margin-bottom: 12px;
}
.tf-ayuda { margin-top: 12px; font-size: 12.5px; color: var(--tf-texto-4); }
.tf-nota { margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: var(--tf-texto-4); }
.tf-nota { display: flex; align-items: flex-start; gap: 9px; }
.tf-nota i { margin-top: 2px; color: var(--tf-guinda); font-size: 15px; }

/* Campos — se aplican sobre .form-control de Bootstrap o sobre <input> pelón */
.tf-input,
.tf-split .form-control {
  width: 100%;
  height: 48px;
  padding: 0 15px;
  font-size: 14.5px;
  color: var(--tf-texto);
  background: var(--tf-superficie);
  border: 1px solid var(--tf-borde);
  border-radius: var(--tf-radio);
  outline: none;
  box-shadow: none;
}
.tf-input:focus,
.tf-split .form-control:focus {
  border-color: var(--tf-guinda);
  box-shadow: 0 0 0 3px var(--tf-guinda-suave);
}
.tf-input::placeholder,
.tf-split .form-control::placeholder { color: #A79C97; }

/* Controles con iconografía y acciones auxiliares. */
.tf-control { position: relative; }
.tf-control__icono {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  color: #958985;
  font-size: 15px;
  pointer-events: none;
}
.tf-input--con-icono { padding-left: 44px; padding-right: 46px; }
.tf-control__accion {
  position: absolute;
  z-index: 2;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tf-texto-4);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.tf-control__accion:hover { color: var(--tf-guinda); background: var(--tf-guinda-suave); }
.tf-control__accion:focus-visible { outline: 2px solid var(--tf-guinda); outline-offset: 1px; }
/* Edge agrega su propio ojo; ya tenemos el botón de mostrar contraseña. */
.tf-input::-ms-reveal,
.tf-input::-ms-clear { display: none; }
.tf-control__accion[hidden] { display: none; }

/* Campo de folio: el elemento dominante de la pantalla */
.tf-input--folio,
.tf-split .form-control.tf-input--folio {
  height: 72px;
  padding: 0 58px 0 54px;
  font-family: var(--tf-font-mono);
  font-size: 22px;
  letter-spacing: .12em;
  border-radius: 5px;
  box-shadow: var(--tf-sombra);
}
.tf-input--folio:focus { box-shadow: 0 0 0 3px var(--tf-guinda-suave); }

/* reCAPTCHA de la consulta pública */
.tf-captcha {
  min-height: 78px;
  margin-top: 18px;
  overflow: hidden;
}
.tf-captcha .g-recaptcha {
  width: 304px;
  max-width: 100%;
  transform-origin: left top;
}

/* Estado de error (Django: .is-invalid o .tf-input--error) */
.tf-input--error,
.tf-split .form-control.is-invalid {
  border-color: var(--tf-guinda);
  background: #FFF8F9;
}
.tf-error { margin-top: 10px; font-size: 12.5px; color: var(--tf-guinda); }
.tf-consulta-mensaje { min-height: 20px; margin-top: 10px; font-size: 12.5px; color: var(--tf-texto-4); }

/* Botones */
.tf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 58px;
  border: none; border-radius: 5px;
  font-family: var(--tf-font-titulo);
  font-weight: 600; font-size: 14.5px; letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tf-btn--primario { background: var(--tf-guinda); color: #fff; box-shadow: 0 8px 18px rgba(159,34,65,.16); }
.tf-btn--primario:hover { background: var(--tf-guinda-oscuro); color: #fff; box-shadow: 0 10px 22px rgba(97,18,50,.2); transform: translateY(-1px); }
.tf-btn--contorno {
  height: 50px;
  background: var(--tf-superficie);
  color: var(--tf-guinda);
  border: 1px solid var(--tf-guinda);
  font-size: 13.5px;
}
.tf-btn--contorno:hover { background: var(--tf-guinda); color: #fff; transform: translateY(-1px); }
.tf-btn:focus-visible { outline: 3px solid var(--tf-guinda-suave); outline-offset: 3px; }
.tf-btn:active { transform: translateY(0); }
.tf-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 8. Acceso de concesionarios (acción secundaria) ---------- */
.tf-login {
  border: 1px solid var(--tf-borde-suave);
  border-radius: 6px;
  background: var(--tf-fondo-2);
  box-shadow: 0 8px 24px rgba(43,37,35,.035);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tf-login:hover { border-color: #D9CFCA; box-shadow: 0 12px 30px rgba(43,37,35,.055); }
.tf-login__cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--tf-borde-suave);
}
.tf-login__titulo { font-family: var(--tf-font-titulo); font-weight: 600; font-size: 15px; }
.tf-login__sub { font-size: 13px; color: #7C726D; margin-top: 4px; }
.tf-login__toggle {
  background: none; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--tf-guinda); white-space: nowrap; padding: 6px;
}
.tf-login__toggle:hover { color: var(--tf-guinda-oscuro); }
.tf-login__cuerpo {
  padding: 26px 28px 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.tf-login__cuerpo[hidden] { display: none; }
.tf-login__ancho { grid-column: 1 / -1; }
.tf-login__fila {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.tf-login .tf-label { font-size: 10.5px; margin-bottom: 9px; }

/* Código de verificación (doble factor): separado y grande para leerse fácil. */
.tf-input--codigo { letter-spacing: 6px; font-size: 18px; }
.tf-login__vigencia { color: #9aa1ab; font-size: 12px; }
.tf-login__salir { padding: 0 28px 24px; text-align: center; }
.tf-login__cancelar {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--tf-texto-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.tf-login__cancelar:hover { color: var(--tf-guinda); }

.tf-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--tf-texto-2); cursor: pointer; }
.tf-check input { width: 16px; height: 16px; accent-color: var(--tf-guinda); margin: 0; }

/* ---------- 9. Pie ---------- */
.tf-pie {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--tf-linea);
  padding-top: 20px;
  font-size: 12px; color: var(--tf-texto-4);
}
.tf-pie__enlaces { display: flex; gap: 22px; }
.tf-pie__seguro { display: inline-flex; align-items: center; gap: 6px; color: #6E8177; }
.tf-pie__seguro i { font-size: 10px; }

/* ---------- 10. Mensajes de Django ({% for message in messages %}) ---------- */
.tf-mensaje {
  padding: 14px 18px;
  border: 1px solid var(--tf-borde-suave);
  border-left: 3px solid var(--tf-guinda);
  background: var(--tf-superficie);
  font-size: 13.5px; line-height: 1.55; color: var(--tf-texto-2);
  border-radius: var(--tf-radio);
}
.tf-mensaje--exito { border-left-color: #2F6B4F; }

/* ---------- 10b. Recuperación de contraseña ---------- */
.tf-guia__paso--actual {
  border-color: rgba(216,183,138,.6);
  background: rgba(255,255,255,.1);
  color: #fff;
}
.tf-campos { display: grid; gap: 22px; }
.tf-campos .tf-btn { margin-top: 6px; }
.tf-ayuda ul { margin: 0; padding-left: 18px; }
.tf-lista {
  margin: 0; padding-left: 20px;
  font-size: 14px; line-height: 1.7; color: var(--tf-texto-3);
}
.tf-volver { margin: 22px 0 0; font-size: 13.5px; text-align: center; }
.tf-volver i { margin-right: 4px; }

/* ---------- 11. Móvil ---------- */
@media (max-width: 991.98px) {
  .tf-split { grid-template-columns: 1fr; min-height: 0; }
  .tf-aside {
    gap: 26px;
    padding: 20px 22px 28px;
  }
  .tf-aside::after { display: none; }
  .tf-mapa-marca { display: none; }
  .tf-guia { display: none; }
  .tf-aside .tf-datos { display: none; }        /* las cifras no viajan a móvil */
  .tf-brand__escudo { height: 40px; }
  .tf-brand__logo { width: min(100%, 350px); }
  .tf-brand__sep { height: 30px; }
  .tf-brand__nombre { font-size: 14px; }
  .tf-brand__dependencia { font-size: 8.5px; letter-spacing: .16em; }
  .tf-kicker { display: none; }
  .tf-titulo { font-size: 34px; margin: 10px 0 12px; }
  .tf-entrada { font-size: 14.5px; }

  .tf-main { padding: 32px 22px 36px; gap: 28px; box-shadow: none; }
  .tf-h2 { font-size: 24px; }
  .tf-lead { margin-bottom: 24px; font-size: 14.5px; }
  .tf-input--folio,
  .tf-split .form-control.tf-input--folio { height: 62px; font-size: 19px; padding: 0 50px 0 48px; }
  .tf-btn { height: 56px; }

  .tf-login__cabecera { padding: 18px 20px; }
  .tf-login__cuerpo { grid-template-columns: 1fr; padding: 22px 20px; }
  .tf-check input { width: 18px; height: 18px; }   /* área táctil */
  .tf-pie { flex-direction: column; gap: 8px; }
}

@media (max-width: 359.98px) {
  .tf-captcha { min-height: 68px; }
  .tf-captcha .g-recaptcha { transform: scale(.86); }
}

/* En laptops angostas, el panel sigue dividido pero el login evita campos apretados. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .tf-login__cuerpo { grid-template-columns: 1fr; }
  .tf-guia { grid-template-columns: 1fr; gap: 8px; }
  .tf-guia__paso { display: grid; grid-template-columns: 34px 1fr; align-items: center; padding: 10px 12px; }
  .tf-guia__numero { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tf-consulta,
  .tf-login,
  .tf-pie { animation: none; }
  .tf-btn,
  .tf-login,
  .tf-control__accion { transition: none; }
}