/* ═══════════════════════════════════════════════════════════════
   css/login.css — Pantalla de login y portal de cliente

   Tokenizado: ya no quedan colores escritos a mano. Los de marca y
   estado se componen desde las primitivas —rgb(var(--p-brand-rgb) / α)—
   en vez de repetir el literal, así que ahora el login sigue el color
   de acento y los temas. Antes no lo hacía: cambiar el acento dejaba
   el hover, el foco y los bordes en azul.

   Tres alfas de borde se ajustaron a la escala de tokens
   (.07 → --color-border, .09 → --color-border-strong). Diferencia
   imperceptible, a cambio de que el sistema tenga una sola escala.
   ═══════════════════════════════════════════════════════════════ */

#login-fields-cliente,
#login-fields-admin { transition: opacity .2s; }

/* ══════════════════════════════════════════════════
   PANTALLA COMPLETA
══════════════════════════════════════════════════ */
#login-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-bg);
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}
#login-screen.hidden { display: none; }

/* ── Campo de marca (mitad izquierda) ──
   El único bloque macizo de la pantalla: acero profundo con todo el
   texto reversado. La ficha de operación va en monoespaciada, como
   una hoja de datos. */
.login-campo {
  width: 560px;
  flex: none;
  background: var(--color-field);
  color: var(--color-on-field);
  padding: 56px 56px 44px;
  display: flex;
  flex-direction: column;
}
.login-campo-marca { display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.login-campo-lockup { display: flex; align-items: center; gap: 12px; }
.login-campo-placa {
  width: 44px; height: 44px; flex: none;
  background: var(--color-bg); padding: 3px;
  display: flex; align-items: center; justify-content: center;
}
.login-campo-placa img { width: 100%; height: 100%; object-fit: contain; display: block; }
.login-campo-nombre {
  font-family: var(--font-heading);
  font-size: 34px; font-weight: 600;
  line-height: .9; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-on-field);
}
.login-campo-rule { height: 2px; background: rgb(var(--p-steel-400-rgb)); }
.login-campo-producto {
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--color-on-field-3);
}

.login-campo-claim {
  margin: auto 0 0;
  font-family: var(--font-heading);
  font-size: 26px; font-weight: 500;
  line-height: 1.15; letter-spacing: .01em;
  color: var(--color-on-field);
  max-width: 24ch;
}

/* Ficha de operación: rótulo versalita a la izquierda, dato a la
   derecha, una regla por fila. */
.login-campo-ficha {
  margin: 26px 0 auto;
  border-top: 1px solid rgb(var(--p-white-rgb) / .18);
}
.login-campo-ficha > div {
  display: flex;
  padding: 13px 0;
  border-bottom: 1px solid rgb(var(--p-white-rgb) / .18);
}
.login-campo-ficha > div:last-child { border-bottom: none; }
.login-campo-ficha dt {
  width: 150px; flex: none;
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-on-field-3);
}
.login-campo-ficha dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-on-field);
}

.login-campo-pie {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-on-field-3);
}

/* ── Área de trabajo (mitad derecha) ── */
.login-area {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  overflow-y: auto;
}

.login-wrapper {
  width: min(460px, 100%);
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════
   BRAND / LOGO
══════════════════════════════════════════════════ */
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  justify-content: center;
}
.login-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-field);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.login-brand-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.login-brand-icon svg { width: 22px; height: 22px; fill: var(--color-on-field); }
.login-brand-text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-strong);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.login-brand-text span {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-3);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}

/* Bajo 900 px el campo se repliega y el lockup vuelve al formulario. */
@media (max-width: 900px) {
  .login-campo { display: none; }
  .login-area { padding: 24px 20px; }
}
@media (min-width: 901px) {
  .login-brand { display: none; }
}

/* ══════════════════════════════════════════════════
   PASO 1 — SELECCIÓN DE TIPO DE ACCESO
══════════════════════════════════════════════════ */
#login-step-select {
  animation: loginFadeUp .4s ease both;
}
.login-step-title {
  text-align: center;
  margin-bottom: 22px;
}
.login-step-title h2 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 600;
  color: var(--color-text-strong);
  margin-bottom: 5px;
  line-height: 1;
  letter-spacing: .01em;
}
.login-step-title p {
  font-size: 13px;
  color: var(--color-text-2);
}

/* Grid de tarjetas */
.login-access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

/* Tarjeta individual */
.login-access-card {
  position: relative;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--relieve);
  padding: 20px 14px 16px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  overflow: hidden;
  user-select: none;
}
.login-access-card:hover {
  border-color: var(--color-border-heavy);
  background: var(--color-surface-hover);
}
/* La activa se marca doblando el filete en acento, como un campo con
   foco: sin halo ni sombra, que aqui leerian como elevacion. */
.login-access-card.active {
  border-color: var(--color-brand);
  outline: 1px solid var(--color-brand);
  outline-offset: 1px;
  background: var(--color-brand-dim);
  box-shadow: none;
}
.login-access-card.active .lac-icon { box-shadow: none; }

/* Icono de la tarjeta */
/* El icono pierde la placa teñida: trazo de 1.5 sobre el papel. */
.lac-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: none !important;
  color: var(--color-text-2) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.login-access-card.active .lac-icon { color: var(--color-brand) !important; }
.lac-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }

/* Texto */
.lac-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-text-strong);
  line-height: 1.3;
}
.lac-desc {
  font-size: 11px;
  color: var(--color-text-2);
  line-height: 1.4;
}

/* Check de selección activa */
.lac-check {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  background: var(--color-brand-fill);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}
.lac-check svg { width: 9px; height: 9px; stroke: var(--color-on-brand); stroke-width: 2; }
.login-access-card.active .lac-check { opacity: 1; }

/* Tarjeta validador — ocupa fila completa, layout horizontal */
#lac-validador {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 14px;
  padding: 14px 18px;
}
#lac-validador .lac-icon { margin-bottom: 0; }

/* Botón continuar */
.login-continue-btn {
  width: 100%;
  padding: 0;
  height: 44px;
  margin-top: 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-brand-fill);
  box-shadow: var(--relieve-sm);
  color: var(--color-on-brand);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.login-continue-btn:hover { background: var(--color-brand-fill-hover); border-color: var(--color-brand-fill-hover); transform: none; }
.login-continue-btn:active { transform: none; }
.login-continue-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* ══════════════════════════════════════════════════
   PASO 2 — FORMULARIO DE CREDENCIALES
══════════════════════════════════════════════════ */
#login-step-form {
  display: none;
  animation: loginFadeUp .3s ease both;
}
#login-step-form.visible { display: block; }

/* Botón volver */
.login-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-text-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
  transition: color .15s;
}
.login-back-btn:hover { color: var(--color-text); }
.login-back-btn svg { width: 14px; height: 14px; }

/* Card del formulario */
.login-form-card {
  position: relative;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--relieve);
  padding: 34px;
}

/* Cabecera con tipo seleccionado */
.login-form-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
/* El icono llega con relleno teñido en línea desde _lacConfig; aquí
   se anula para dejarlo en trazo, como el resto de la iconografía. */
.login-form-tipo-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: none !important;
  color: var(--color-text-2) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.login-form-tipo-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.login-form-tipo-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-text-strong);
  margin-bottom: 2px;
}
.login-form-tipo-sub {
  font-size: 12px;
  color: var(--color-text-2);
}

/* Campos */
.login-field { margin-bottom: 20px; }
.login-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text-2);
  margin-bottom: 7px;
}
.login-field input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--relieve-hundido);
  color: var(--color-text);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, outline-color .15s;
}
.login-field input::placeholder { color: var(--color-text-3); }
/* La contraseña es un dato, no prosa. */
.login-field input[type="password"] { font-family: var(--font-mono); font-size: 14px; letter-spacing: .08em; }
.login-field input:focus {
  border-color: var(--color-brand);
  outline: 1px solid var(--color-brand);
  outline-offset: 1px;
  box-shadow: none;
}

/* Error */
.login-error {
  display: none;
  font-size: 12.5px;
  color: var(--color-danger);
  background: var(--color-danger-dim);
  border: 1px solid rgb(var(--p-red-rgb) / .3);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  margin-bottom: 16px;
}
.login-error.show { display: block; }

/* Botón iniciar sesión */
/* El único objeto macizo de la tarjeta. */
.btn-login {
  width: 100%;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-brand-fill);
  box-shadow: var(--relieve-sm);
  color: var(--color-on-brand);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.btn-login:hover { background: var(--color-brand-fill-hover); border-color: var(--color-brand-fill-hover); transform: none; }
.btn-login:active { background: var(--color-brand-fill-pressed); border-color: var(--color-brand-fill-pressed); transform: none; }

/* ══════════════════════════════════════════════════
   ANIMACIÓN COMPARTIDA
══════════════════════════════════════════════════ */
@keyframes loginFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════
   PORTAL CLIENTE — clases cp-*
══════════════════════════════════════════════════ */
.cliente-portal {
  display: flex; flex-direction: column; min-height: 100vh;
  background: var(--color-bg); color: var(--color-text);
}

/* Estas reglas vivían en un <style> dentro de index.html y se perdieron al
   sacarlo (b014d2f, 2026-05-13): sólo pasaron aquí las de las tarjetas y el
   buscador, y la cabecera, el título y los avisos quedaron sin estilo. */
.cp-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 28px;
  /* Oscura como la barra lateral del admin y el panel del acceso: el logo
     trae su propio fondo negro y sobre claro parecería un recuadro pegado. */
  background: var(--color-field);
  color: var(--color-on-field);
  border-bottom: 1px solid var(--color-field-border);
}
.cp-logo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cp-logo .marca { width: 118px; height: auto; display: block; flex-shrink: 0; }
.cp-logo-text {
  padding-left: 14px; border-left: 1px solid var(--color-field-border);
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--track-kicker); text-transform: uppercase;
  color: var(--color-on-field); opacity: .6;
  white-space: nowrap;
}
.cp-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cp-user-nombre {
  font-size: 13px; font-weight: 600; color: var(--color-on-field);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cp-main { padding: 36px 28px 56px; max-width: 1180px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.cp-title-row {
  margin-bottom: 24px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.cp-title-texto { min-width: 0; }
.cp-pendiente { color: var(--color-warning); font-weight: 600; }

/* Ventana «Nueva integración» (usa .modal de components.css) */
.modal.cpi-shell { width: min(480px, 100%); }
.cpi-shell .modal-header h3 { margin: 0; }
.cpi-ayuda { font-size: 11px; color: var(--color-text-3); margin-top: 5px; }
.cpi-opciones { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.cpi-opcion { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text); cursor: pointer; }
.cpi-opcion input:disabled + * , .cpi-opcion:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.cpi-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .cpi-dos { grid-template-columns: 1fr; } }
.cpi-nota {
  font-size: 12px; line-height: 1.45; color: var(--color-text-2);
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-warning-dim);
}
.cpi-error { font-size: 12px; color: var(--color-danger); }
.cpi-ok {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--color-success-dim); color: var(--color-text); font-size: 13px;
}
.cp-kicker {
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--track-kicker); text-transform: uppercase;
  color: var(--color-text-3);
  margin: 0 0 4px;
}
.cp-title-row h2 {
  font-family: var(--font-heading);
  font-size: 38px; font-weight: 600;
  line-height: .95; letter-spacing: .01em;
  color: var(--color-text-strong);
  margin: 0;
}
.cp-subtitle {
  display: inline-block; margin-top: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-text-2);
}
.cp-subtitle:empty { display: none; }

.cp-search-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }

.cp-empty {
  text-align: center; padding: 56px 20px;
  font-size: 14px; color: var(--color-text-2);
  border-radius: var(--radius-card);
  box-shadow: var(--relieve-hundido);
}
.cp-error-msg { color: var(--color-danger); }

.cp-header .cp-logout-btn {
  background: transparent; color: var(--color-on-field);
  border: 1px solid var(--color-field-border); box-shadow: none;
}
.cp-header .cp-logout-btn:hover { background: var(--color-field-hover); box-shadow: none; }

@media (max-width: 640px) {
  .cp-header { padding: 12px 16px; }
  .cp-logo-text { display: none; }
  .cp-user-nombre { display: none; }
  .cp-logo .marca { width: 100px; }
  .cp-main { padding: 24px 16px 40px; }
  .cp-title-row h2 { font-size: 30px; }
  .cp-search-row { flex-wrap: wrap; }
  .cp-search-wrap { max-width: none; }
}

.cp-search-wrap {
  position: relative;
  flex: 1;
  max-width: 340px;
}
.cp-search-wrap svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-2);
  pointer-events: none;
}
.cp-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--relieve-hundido);
  color: var(--color-text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.cp-search-input::placeholder { color: var(--color-text-2); }
.cp-search-input:focus { border-color: rgb(var(--p-brand-rgb) / .4); }
.cp-count { font-size: 12px; color: var(--color-text-2); white-space: nowrap; }
.cp-card.hidden { display: none; }

/* Grid de unidades del cliente
   Una sola escala de espaciado para todas las tarjetas:
     20px  relleno de la tarjeta
     16px  entre bloques (patente · datos · botón)
      8px  dentro de un bloque (estado · destinos)
     22px  entre tarjetas: el relieve necesita sitio para caer su sombra,
           y con menos las de dos tarjetas contiguas se pisan.
   Las tarjetas de una fila miden lo mismo (stretch del grid) y el botón se
   ancla abajo con margin-top:auto, así queda a la misma altura en todas. */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  align-items: stretch;
}
.cp-card {
  position: relative;
  min-width: 0;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--relieve);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .18s;
}
.cp-card:hover { background: var(--color-surface-hover); }

/* La patente es la figura de la tarjeta: condensada y grande, en
   tinta, no en acento —el acento se reserva para lo accionable. Va sola en
   su línea: nunca se recorta, que es lo que identifica al vehículo. */
.cp-card-plate {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-strong);
}

/* Datos: cada línea reserva su alto aunque aún esté cargando. */
.cp-card-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cp-card-status {
  display: flex; align-items: center; gap: 8px;
  min-height: 20px;
  font-size: 13px; line-height: 20px;
  color: var(--color-text);
}
.cp-card-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dot { width: 6px; height: 6px; border-radius: var(--radius-xs); flex-shrink: 0; }
.cp-dot.g { background: var(--color-success); }
.cp-dot.y { background: var(--color-warning); }
.cp-dot.r { background: var(--color-danger); }
.cp-dot.u { background: var(--color-text-3); }
.cp-card-meta {
  min-height: 18px;
  font-size: 12px; line-height: 18px;
  color: var(--color-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cp-card-btn {
  margin-top: auto;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-brand-fill);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--relieve-sm);
  color: var(--color-on-brand);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.cp-card-btn:hover { background: var(--color-brand-fill-hover); }
.cp-card-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }


/* ── Logotipo en el acceso ──
   Mismo criterio que en la barra lateral: ancho definido y alto automático,
   para que el logotipo apaisado no se recorte ni se deforme. */
.login-brand .marca {
  width: 100%;
  max-width: 150px;
  height: auto;
  display: block;
}

.login-campo-lockup .marca {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}