/* ============================================================================= Grupo Automotores acceso.css · login del sistema + portal del cliente Las dos pantallas que quedaron fuera del rediseño del sitio público y que seguían pintadas con `static/page/css/style.css`: el verde y las píldoras del cliente anterior. Acá se pasan al mismo sistema —Sora + JetBrains Mono, carbón/marfil, dorado de filete, esquina viva— sin tocar una sola URL, un solo `id` ni un solo campo de formulario. DEPENDE de `tokens.css` y `shell.css`, en ese orden. De shell salen el reset, la tipografía base, `.ga-btn`, `.ga-nav`, `.ga-foot`, `.ga-lab` y `.ga-rule`; de `landings.css`, `.ga-form` / `.ga-input`. Este archivo NO redefine ninguno de esos: sólo agrega lo propio de las dos pantallas y da vuelta lo que cambia de superficie (los inputs están escritos para banda oscura y el login los usa sobre marfil). Cero colores hardcodeados fuera de un `--ga-*`. Los `rgba()` que aparecen son las mismas mezclas que ya usa landings.css para los estados semánticos, que no tienen token de fondo propio. ========================================================================== */ /* ============================================================================= 1. LOGIN · /login/ ============================================================================= */ /* El login no tiene navbar, así que el `padding-top: var(--ga-nav-h)` que shell.css le pone al `body` para compensarla acá sobra: dejaría 72px muertos arriba del panel. Se apaga con una clase en el `` y no tocando shell.css, que lo comparten las nueve pantallas públicas. */ .ga-auth-body { padding-top: 0; min-height: 100vh; min-height: 100dvh; background: var(--ga-ink-900); } /* Dos columnas a sangre. El hero de la izquierda es carbón porque tiene que convencer; el formulario va sobre marfil porque es un lugar donde alguien escribe. Es el mismo criterio que separa `contacto.html` del inicio, y la razón por la que el login anterior —negro entero, campos translúcidos— se veía bien en una captura y se leía peor con las manos en el teclado. 1.05fr del lado del formulario: el panel de acceso es lo que la persona vino a hacer, así que no puede ser la mitad más chica. */ .ga-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; min-height: 100dvh; } /* --- Columna izquierda: el argumento ------------------------------------- */ .ga-login__hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; background: var(--ga-ink-800); color: var(--ga-on-ink); padding: var(--ga-s-16) var(--ga-s-12); overflow: hidden; } /* La trama la dibuja `.ga-trama` (shell.css), con la variante `--angulo`. Vivió acá hasta que el hero del inicio la pidió también: tres copias del mismo `mask-image` es exactamente lo que este repo evita en el resto de los casos. El `` va en el template, delante de `.ga-login__heroin`. */ /* El filete dorado sobre el corte entre columnas: la misma firma que separa la navbar del contenido en el sitio público. */ .ga-login__hero::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: var(--ga-gold); opacity: .55; } .ga-login__heroin { position: relative; z-index: 1; max-width: 52ch; } .ga-login__brand { display: flex; align-items: center; gap: var(--ga-s-3); margin-bottom: var(--ga-s-10); text-decoration: none; } .ga-login__brand img { width: 42px; height: auto; flex: none; } .ga-login__brand > span { display: flex; flex-direction: column; line-height: 1.15; } .ga-login__brand b { font-family: var(--ga-font-disp); font-weight: var(--ga-w-semi); font-size: 1.0625rem; letter-spacing: var(--ga-track-name); color: var(--ga-on-ink); } .ga-login__brand i { font-style: normal; font-family: var(--ga-font-mono); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ga-gold); } /* El rótulo en versalitas mono. Reemplaza a la píldora con borde redondeado del login anterior: el sistema no tiene píldoras. */ .ga-login__eyebrow { display: inline-flex; align-items: center; gap: var(--ga-s-2); font-family: var(--ga-font-mono); font-size: var(--ga-t-lab); font-weight: var(--ga-w-med); letter-spacing: var(--ga-track-lab); text-transform: uppercase; color: var(--ga-gold); } .ga-login__title { font-family: var(--ga-font-disp); font-weight: var(--ga-w-semi); font-size: var(--ga-t-h1); line-height: var(--ga-lh-tight); letter-spacing: var(--ga-track-disp); color: var(--ga-on-ink); margin: var(--ga-s-4) 0 0; text-wrap: balance; } /* Media línea dorada, no el título entero: sobre carbón un bloque de texto dorado completo se lee amarillo. */ .ga-login__title em { font-style: normal; color: var(--ga-gold); } .ga-login__hero .ga-rule { margin: var(--ga-s-5) 0; } .ga-login__desc { color: var(--ga-on-ink-mut); font-size: var(--ga-t-sm); line-height: var(--ga-lh-body); max-width: 46ch; } /* La lista de módulos. Sin tildes verdes: el tilde afirmaba algo ("está hecho") que acá no aplica —son las partes del sistema, no una checklist—. Un filete por renglón y el icono en dorado. */ .ga-login__feats { list-style: none; margin: var(--ga-s-8) 0 0; padding: 0; max-width: 44ch; } .ga-login__feats li { display: flex; align-items: center; gap: var(--ga-s-3); padding: var(--ga-s-3) 0; border-top: 1px solid var(--ga-line-ink); font-size: var(--ga-t-sm); color: var(--ga-on-ink); } .ga-login__feats li:last-child { border-bottom: 1px solid var(--ga-line-ink); } .ga-login__feats .bi { flex: none; font-size: .875rem; color: var(--ga-gold); } /* --- Columna derecha: el formulario -------------------------------------- */ .ga-login__panel { display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--ga-bone-50); color: var(--ga-on-bone); padding: var(--ga-s-12) var(--ga-s-10); } .ga-login__box { width: 100%; max-width: 400px; } .ga-login__head { margin-bottom: var(--ga-s-8); } .ga-login__head .ga-lab { color: var(--ga-gold-ink); } .ga-login__head h1 { font-family: var(--ga-font-disp); font-weight: var(--ga-w-semi); font-size: var(--ga-t-h2); line-height: var(--ga-lh-tight); letter-spacing: var(--ga-track-disp); color: var(--ga-on-bone); margin: var(--ga-s-3) 0 var(--ga-s-2); } .ga-login__head p { color: var(--ga-on-bone-mut); font-size: var(--ga-t-sm); margin: 0; } /* El formulario reusa `.ga-form` / `.ga-form__field` de landings.css. Lo que cambia es la superficie: allá los campos van sobre carbón y acá sobre marfil, así que hay que dar vuelta el par de texto. Misma inversión que hace `.ga-contacto`, escrita para este contenedor. */ .ga-login__box .ga-form__field > label { color: var(--ga-on-bone-mut); } .ga-login__box .ga-input, .ga-login__box textarea.ga-input { color: var(--ga-on-bone); background: var(--ga-bone-0); border-color: var(--ga-bone-300); } .ga-login__box .ga-input::placeholder { color: var(--ga-on-bone-mut); } .ga-login__box .ga-input:focus { background: var(--ga-bone-0); color: var(--ga-on-bone); border-color: var(--ga-gold-ink); box-shadow: 0 0 0 3px var(--ga-goldink-a16); } .ga-login__box .ga-input.is-invalid { border-color: var(--ga-danger); box-shadow: 0 0 0 3px rgba(169, 68, 54, .14); } .ga-login__box .invalid-feedback { color: var(--ga-danger); } /* Campo con icono. El icono va DENTRO del campo, no en un `input-group-text` con su propio borde: dos cajas pegadas con un filete en el medio es el lenguaje de Bootstrap, no el de este sistema. */ .ga-login__campo { position: relative; display: flex; } .ga-login__campo > .bi { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: .875rem; color: var(--ga-on-bone-mut); pointer-events: none; z-index: 2; } .ga-login__campo .ga-input { padding-left: 38px; } .ga-login__campo--pass .ga-input { padding-right: 44px; } /* El ojo de mostrar/ocultar. `#id_password` y `.toggle-pass` son los hooks del JS de la pantalla: el markup cambia alrededor, el hook no. */ .ga-login__ojo { position: absolute; right: 0; top: 0; bottom: 0; width: 42px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: var(--ga-on-bone-mut); cursor: pointer; z-index: 2; transition: color var(--ga-dur-fast) var(--ga-ease); } .ga-login__ojo:hover { color: var(--ga-gold-ink); } .ga-login__ojo:focus-visible { outline: 2px solid var(--ga-gold-ink); outline-offset: -2px; } /* Recordarme. Cuadrado, como todo lo demás del sistema. `LoginForm.remember_me` existe en el form y `LoginView.form_valid` lo lee para elegir entre sesión de navegador y dos semanas, pero el template anterior nunca lo renderizó: hoy la rama larga está muerta. Los estilos quedan escritos —es una casilla, no un componente— para que encenderlo sea agregar el `` y nada más. No se encendió acá porque cambiaría cuánto dura la sesión de la gente, que no es una decisión de diseño. */ /* El error del formulario. Sobre marfil va `--ga-danger`, no el `--lit`, que está calibrado para carbón. Reemplaza al `.alert-danger` de Bootstrap, que trae su propio rojo y su propio radio. */ .ga-login__err { display: flex; gap: var(--ga-s-3); align-items: flex-start; padding: 11px 13px; margin-bottom: var(--ga-s-4); font-size: var(--ga-t-sm); color: var(--ga-on-bone); background: rgba(169, 68, 54, .08); border: 1px solid rgba(169, 68, 54, .35); border-left: 2px solid var(--ga-danger); border-radius: var(--ga-r); } .ga-login__err .bi { flex: none; margin-top: 3px; color: var(--ga-danger); } /* El único CTA dorado sólido de la pantalla, que es la regla del sistema. */ .ga-login__box .ga-btn--gold { width: 100%; min-height: 46px; } /* Pie del panel: volver al sitio y el crédito, separados por un filete. */ .ga-login__foot { margin-top: var(--ga-s-8); padding-top: var(--ga-s-5); border-top: 1px solid var(--ga-bone-300); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ga-s-3); } .ga-login__volver { display: inline-flex; align-items: center; gap: var(--ga-s-2); font-family: var(--ga-font-mono); font-size: var(--ga-t-lab); font-weight: var(--ga-w-med); letter-spacing: var(--ga-track-lab); text-transform: uppercase; color: var(--ga-on-bone-mut); } .ga-login__volver:hover { color: var(--ga-gold-ink); } .ga-login__creditos { display: inline-flex; align-items: center; gap: var(--ga-s-2); font-family: var(--ga-font-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ga-on-bone-mut); } .ga-login__creditos img { height: 16px; width: auto; opacity: .5; transition: opacity var(--ga-dur-fast) var(--ga-ease); } .ga-login__creditos a:hover img { opacity: .85; } /* --- Responsive ---------------------------------------------------------- ≤1000px: una sola columna. El hero pierde el argumento largo y queda como cabecera de marca. El párrafo y la lista de módulos se esconden en vez de apilarse: en un teléfono, entre leer las cuatro bondades del sistema y ver el campo de usuario, gana el campo de usuario. -------------------------------------------------------------------------- */ @media (max-width: 1000px) { .ga-login { grid-template-columns: minmax(0, 1fr); min-height: 0; } .ga-login__hero { padding: var(--ga-s-10) var(--ga-gutter) var(--ga-s-8); justify-content: flex-start; } .ga-login__hero::after { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; } .ga-login__heroin { max-width: none; } .ga-login__brand { margin-bottom: var(--ga-s-6); } .ga-login__desc, .ga-login__feats { display: none; } .ga-login__hero .ga-rule { margin: var(--ga-s-4) 0 0; } .ga-login__panel { padding: var(--ga-s-10) var(--ga-gutter) var(--ga-s-12); align-items: stretch; } .ga-login__box { max-width: 420px; margin: 0 auto; } } @media (max-width: 620px) { .ga-login__hero { padding: var(--ga-s-8) var(--ga-s-5) var(--ga-s-6); } .ga-login__panel { padding: var(--ga-s-8) var(--ga-s-5) var(--ga-s-10); } .ga-login__foot { flex-direction: column; align-items: flex-start; } } /* --- Variante de una sola columna ---------------------------------------- Las cuatro pantallas de restablecer contraseña cuelgan de este mismo base y no tienen argumento que hacer: son un trámite. Se quedan con el panel de marfil centrado sobre el carbón, sin hero. Venían de la era Materialize —`col s12`, `material-icons`, `card blue lighten-5`— y ninguna de esas clases existe en el proyecto desde hace rato: se veían como HTML pelado. -------------------------------------------------------------------------- */ .ga-login--solo { grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; padding: var(--ga-s-10) var(--ga-gutter); } .ga-login--solo .ga-login__panel { width: 100%; max-width: 520px; border: 1px solid var(--ga-bone-300); border-top: 2px solid var(--ga-gold); padding: var(--ga-s-10); } .ga-login--solo .ga-login__box { max-width: none; } .ga-login--solo .ga-login__brand { justify-content: center; margin-bottom: var(--ga-s-8); } .ga-login--solo .ga-login__brand b { color: var(--ga-on-bone); } .ga-login--solo .ga-login__brand i { color: var(--ga-gold-ink); } .ga-login--solo .ga-login__head { text-align: center; } .ga-login--solo .ga-login__foot { justify-content: center; } /* Párrafo explicativo del trámite: es texto para leer, no un subtítulo. */ .ga-login__texto { font-size: var(--ga-t-sm); line-height: var(--ga-lh-body); color: var(--ga-on-bone-mut); margin: 0 0 var(--ga-s-6); } /* Fila de botones del trámite. `Aceptar` es el dorado; `Cancelar`, filete. */ .ga-login__acciones { display: flex; gap: var(--ga-s-3); flex-wrap: wrap; } .ga-login__acciones > .ga-btn { flex: 1 1 auto; min-height: 46px; } /* Gana sobre el `width: 100%` que `.ga-login__box .ga-btn--gold` le pone al CTA cuando está solo en la caja: acá comparte renglón con Cancelar. */ .ga-login__box .ga-login__acciones .ga-btn--gold { width: auto; } @media (max-width: 620px) { .ga-login--solo { padding: var(--ga-s-6) var(--ga-s-5); } .ga-login--solo .ga-login__panel { padding: var(--ga-s-6); } } /* ============================================================================= 2. PORTAL DEL CLIENTE · /mi-cuenta/ Reusa `.ga-nav`, `.ga-brand`, `.ga-menu`, `.ga-btn`, `.ga-foot` y `.ga-empty` de shell.css tal cual: es la misma cabecera que ve el visitante antes de loguearse, con otros destinos. Que la barra no cambie de forma al entrar es parte de que el portal se sienta el mismo lugar y no otro sitio. El contenido va sobre marfil: son datos que el cliente lee y compara —importes, fechas, estados—, no una pantalla que tiene que convencer. ============================================================================= */ /* Encabezado. Es `.ga-lhero` con el saludo en lugar del título de sección; se escribe aparte porque el nombre del cliente no es un `h1` de landing y no quiere el `clamp()` que llega a 40px. */ .ga-pt-hero { position: relative; isolation: isolate; background: var(--ga-ink-800); color: var(--ga-on-ink); border-bottom: 2px solid var(--ga-gold); overflow: hidden; } /* La trama es la misma `.ga-trama` de shell.css que usan el login y el hero del inicio; el `` va en el template. Acá el encabezado es una banda baja y ancha, así que se queda con el vértice de arriba (sin `--angulo`). */ .ga-pt-hero__in { position: relative; z-index: 1; padding: var(--ga-s-10) var(--ga-gutter) var(--ga-s-8); } .ga-pt-hero .ga-lab { color: var(--ga-gold); } .ga-pt-hero h1 { font-family: var(--ga-font-disp); font-weight: var(--ga-w-semi); font-size: var(--ga-t-h2); line-height: var(--ga-lh-tight); letter-spacing: var(--ga-track-disp); color: var(--ga-on-ink); margin: var(--ga-s-3) 0 0; text-wrap: balance; } .ga-pt-hero h1 em { font-style: normal; color: var(--ga-gold); } .ga-pt-hero h1 .ga-num { font-weight: var(--ga-w-mono-bold); letter-spacing: var(--ga-track-num); } .ga-pt-hero__sub { color: var(--ga-on-ink-mut); font-size: var(--ga-t-sm); margin: var(--ga-s-3) 0 0; max-width: 60ch; } .ga-pt-hero .ga-rule { margin-top: var(--ga-s-4); } /* Volver. Mismo objeto que `.ga-login__volver`, sobre carbón. */ .ga-pt-volver { display: inline-flex; align-items: center; gap: var(--ga-s-2); font-family: var(--ga-font-mono); font-size: var(--ga-t-lab); font-weight: var(--ga-w-med); letter-spacing: var(--ga-track-lab); text-transform: uppercase; color: var(--ga-on-ink-mut); } .ga-pt-volver:hover { color: var(--ga-gold); } /* Metadatos del encabezado del detalle: apertura, entrega, vendedor. Cada dato con su rótulo en versalitas y su valor en mono, que es exactamente como el sitio público muestra una ficha técnica. */ .ga-pt-meta { display: flex; flex-wrap: wrap; gap: var(--ga-s-8); margin: var(--ga-s-6) 0 0; padding-top: var(--ga-s-5); border-top: 1px solid var(--ga-line-ink); } .ga-pt-meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ga-pt-meta dt { font-family: var(--ga-font-mono); font-size: var(--ga-t-lab); font-weight: var(--ga-w-med); letter-spacing: var(--ga-track-lab); text-transform: uppercase; color: var(--ga-on-ink-mut); } .ga-pt-meta dd { margin: 0; font-size: var(--ga-t-sm); color: var(--ga-on-ink); } .ga-pt-meta .ga-num { font-weight: var(--ga-w-mono-bold); letter-spacing: var(--ga-track-num); } /* Cuerpo, sobre marfil. */ .ga-pt-body { background: var(--ga-bone-50); } .ga-pt-body__in { padding: var(--ga-s-10) var(--ga-gutter) var(--ga-s-16); } .ga-pt-h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ga-s-3); font-family: var(--ga-font-disp); font-weight: var(--ga-w-semi); font-size: var(--ga-t-h3); letter-spacing: var(--ga-track-disp); color: var(--ga-on-bone); margin: 0 0 var(--ga-s-5); } .ga-pt-h2 .ga-num { color: var(--ga-on-bone-mut); font-size: var(--ga-t-sm); } /* --- Tarjeta de operación (listado) -------------------------------------- */ .ga-pt-grid { display: grid; gap: var(--ga-s-5); grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } @media (max-width: 620px) { .ga-pt-grid { grid-template-columns: minmax(0, 1fr); } } /* Sin sombra y sin radio: lo que separa un plano de otro es una línea, no un halo. El hover sube el borde a dorado y nada más. */ .ga-pt-card { display: flex; flex-direction: column; background: var(--ga-bone-0); border: 1px solid var(--ga-bone-200); border-radius: var(--ga-r); transition: border-color var(--ga-dur-fast) var(--ga-ease); } .ga-pt-card:hover { border-color: var(--ga-gold-ink); } .ga-pt-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ga-s-3); padding: var(--ga-s-4) var(--ga-s-5); border-bottom: 1px solid var(--ga-bone-200); background: var(--ga-bone-50); } .ga-pt-card__num { display: inline-flex; align-items: center; gap: var(--ga-s-2); font-family: var(--ga-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--ga-w-mono-bold); font-size: var(--ga-t-sm); letter-spacing: var(--ga-track-num); color: var(--ga-on-bone); } .ga-pt-card__num .bi { color: var(--ga-gold-ink); font-weight: 400; } .ga-pt-card__body { padding: var(--ga-s-5); display: flex; flex-direction: column; gap: var(--ga-s-4); flex: 1 1 auto; } .ga-pt-card__cta { margin-top: auto; align-self: flex-start; } /* --- Estado de la operación ---------------------------------------------- Los seis `EstadoBoleto` tenían cada uno su color (azul, ámbar, violeta, naranja, verde, rojo). Seis acentos es no tener ninguno. Acá son tres, que son las tres cosas que el cliente necesita distinguir de un vistazo: la operación sigue su curso (dorado — estados 1 a 4), terminó bien (verde — entregado) o se cayó (rojo — anulado). La palabra sigue estando completa: es la que informa, no el color. El neutro de la clase base queda para el día que aparezca un estado que no entre en los tres. -------------------------------------------------------------------------- */ .ga-pt-estado { display: inline-flex; align-items: center; flex: none; padding: 4px 9px; font-family: var(--ga-font-mono); font-size: var(--ga-t-lab); font-weight: var(--ga-w-med); letter-spacing: var(--ga-track-lab); text-transform: uppercase; white-space: nowrap; border: 1px solid var(--ga-bone-300); border-left: 2px solid var(--ga-bone-300); border-radius: var(--ga-r); color: var(--ga-on-bone-mut); background: var(--ga-bone-0); } .ga-pt-estado--vivo { color: var(--ga-gold-ink); border-color: var(--ga-goldink-a16); border-left-color: var(--ga-gold-ink); background: var(--ga-goldink-a08); } .ga-pt-estado--ok { color: var(--ga-ok-ink); border-color: rgba(74, 124, 89, .28); border-left-color: var(--ga-ok-ink); background: rgba(74, 124, 89, .08); } .ga-pt-estado--baja { color: var(--ga-danger); border-color: rgba(169, 68, 54, .28); border-left-color: var(--ga-danger); background: rgba(169, 68, 54, .07); } /* Sobre carbón (encabezado del detalle) el par de texto se da vuelta. */ .ga-pt-hero .ga-pt-estado { background: transparent; border-color: var(--ga-line-ink); color: var(--ga-on-ink-mut); } .ga-pt-hero .ga-pt-estado--vivo { color: var(--ga-gold); border-left-color: var(--ga-gold); background: var(--ga-gold-a12); } .ga-pt-hero .ga-pt-estado--ok { color: var(--ga-ok); border-left-color: var(--ga-ok); background: rgba(74, 124, 89, .16); } .ga-pt-hero .ga-pt-estado--baja { color: var(--ga-danger-lit); border-left-color: var(--ga-danger-lit); background: rgba(210, 112, 95, .12); } /* --- Chip de vehículo ----------------------------------------------------- */ .ga-pt-chips { display: flex; flex-wrap: wrap; gap: var(--ga-s-2); } .ga-pt-chip { display: inline-flex; align-items: center; gap: var(--ga-s-2); padding: 5px 10px; font-size: var(--ga-t-xs); color: var(--ga-on-bone); background: var(--ga-bone-50); border: 1px solid var(--ga-bone-200); border-radius: var(--ga-r); } .ga-pt-chip .bi { color: var(--ga-gold-ink); font-size: .8125rem; } /* --- Fechas en línea ------------------------------------------------------ */ .ga-pt-fechas { display: flex; flex-wrap: wrap; gap: var(--ga-s-2) var(--ga-s-6); font-size: var(--ga-t-xs); color: var(--ga-on-bone-mut); } .ga-pt-fechas > span { display: inline-flex; align-items: center; gap: var(--ga-s-2); } .ga-pt-fechas .bi { color: var(--ga-gold-ink); } .ga-pt-fechas .ga-num { color: var(--ga-on-bone); } /* --- Progreso de pago ----------------------------------------------------- 2px de alto: es un filete que se llena, no una barra. El sistema no tiene ningún elemento de 6px con las puntas redondeadas. -------------------------------------------------------------------------- */ .ga-pt-pago { display: flex; flex-direction: column; gap: var(--ga-s-2); } .ga-pt-pago__top, .ga-pt-pago__bot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ga-s-3); font-size: var(--ga-t-xs); color: var(--ga-on-bone-mut); } .ga-pt-pago__bot { justify-content: flex-end; } .ga-pt-pago__k { font-family: var(--ga-font-mono); font-size: var(--ga-t-lab); font-weight: var(--ga-w-med); letter-spacing: var(--ga-track-lab); text-transform: uppercase; } .ga-pt-pago__v { font-family: var(--ga-font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--ga-track-num); color: var(--ga-on-bone); } .ga-pt-barra { position: relative; height: 2px; background: var(--ga-bone-300); overflow: hidden; } .ga-pt-barra > span { display: block; height: 100%; background: var(--ga-gold-ink); transition: width var(--ga-dur) var(--ga-ease); } .ga-pt-barra--gruesa { height: 3px; } .ga-pt-saldo { color: var(--ga-warn); font-family: var(--ga-font-mono); font-variant-numeric: tabular-nums; } .ga-pt-saldado { color: var(--ga-ok-ink); display: inline-flex; align-items: center; gap: 4px; } /* --- Tarjeta de sección (detalle) ---------------------------------------- Dos columnas que se autobalancean por alto, igual que el masonry anterior: con `column-count` una card no se parte porque todas llevan `break-inside`. -------------------------------------------------------------------------- */ .ga-pt-cols { column-count: 2; column-gap: var(--ga-s-5); } .ga-pt-cols > .ga-pt-sec { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } @media (max-width: 991.98px) { .ga-pt-cols { column-count: 1; } } .ga-pt-sec { background: var(--ga-bone-0); border: 1px solid var(--ga-bone-200); border-radius: var(--ga-r); padding: var(--ga-s-6); margin-bottom: var(--ga-s-5); } .ga-pt-sec > h2 { display: flex; align-items: center; gap: var(--ga-s-3); font-family: var(--ga-font-disp); font-weight: var(--ga-w-semi); font-size: 1.0625rem; letter-spacing: var(--ga-track-disp); color: var(--ga-on-bone); margin: 0 0 var(--ga-s-5); padding-bottom: var(--ga-s-4); border-bottom: 1px solid var(--ga-bone-200); } .ga-pt-sec > h2 .bi { color: var(--ga-gold-ink); font-size: 1rem; } .ga-pt-sec__nota { font-size: var(--ga-t-sm); color: var(--ga-on-bone-mut); margin: 0; } /* Rótulo de subgrupo dentro de una card. */ .ga-pt-sub { font-family: var(--ga-font-mono); font-size: var(--ga-t-lab); font-weight: var(--ga-w-med); letter-spacing: var(--ga-track-lab); text-transform: uppercase; color: var(--ga-on-bone-mut); margin: 0 0 var(--ga-s-3); } .ga-pt-sub--sep { margin-top: var(--ga-s-6); } /* --- Línea de tiempo ------------------------------------------------------ Los hitos eran círculos de 2rem con borde de 2px y un `@keyframes` que pulsaba en verde. El sistema no tiene círculos ni glows: acá el hito es un cuadrado de 11px sobre una guía de 1px, y el paso en curso se distingue por el relleno dorado y su rótulo, no por una animación. -------------------------------------------------------------------------- */ .ga-pt-tl { position: relative; padding-left: var(--ga-s-6); } .ga-pt-tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--ga-bone-300); } .ga-pt-tl__paso { position: relative; padding-bottom: var(--ga-s-6); } .ga-pt-tl__paso:last-child { padding-bottom: 0; } .ga-pt-tl__hito { position: absolute; left: calc(var(--ga-s-6) * -1); top: 3px; width: 11px; height: 11px; border: 1px solid var(--ga-bone-300); background: var(--ga-bone-50); z-index: 1; } .ga-pt-tl__paso.is-hecho .ga-pt-tl__hito { border-color: var(--ga-ok-ink); background: var(--ga-ok-ink); } .ga-pt-tl__paso.is-curso .ga-pt-tl__hito { border-color: var(--ga-gold-ink); background: var(--ga-gold-ink); } .ga-pt-tl__t { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ga-s-2); font-family: var(--ga-font-disp); font-weight: var(--ga-w-med); font-size: var(--ga-t-sm); color: var(--ga-on-bone); } .ga-pt-tl__paso.is-curso .ga-pt-tl__t { color: var(--ga-gold-ink); } .ga-pt-tl__paso.is-pend .ga-pt-tl__t { color: var(--ga-on-bone-mut); } .ga-pt-tl__d { font-size: var(--ga-t-xs); line-height: 1.5; color: var(--ga-on-bone-mut); margin: 3px 0 0; max-width: 52ch; } .ga-pt-tl__paso.is-pend .ga-pt-tl__d { color: var(--ga-bone-300); } .ga-pt-tl__f { display: inline-flex; align-items: center; gap: var(--ga-s-2); margin-top: 5px; font-family: var(--ga-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ga-t-lab); letter-spacing: .06em; } .ga-pt-tl__f--real { color: var(--ga-ok-ink); } .ga-pt-tl__f--est { color: var(--ga-warn); } .ga-pt-tl__ahora { font-family: var(--ga-font-mono); font-size: var(--ga-t-lab); font-weight: var(--ga-w-med); letter-spacing: var(--ga-track-lab); text-transform: uppercase; color: var(--ga-gold-ink); border: 1px solid var(--ga-goldink-a16); border-left: 2px solid var(--ga-gold-ink); background: var(--ga-goldink-a08); padding: 2px 7px; } /* --- Renglones de dato --------------------------------------------------- Vehículos, pagos, cuotas y requisitos eran cuatro cajas distintas —`.vehiculo-info`, `.pago-row`, `.doc-item` y el bloque de cuotas— con el mismo trabajo: rotular algo a la izquierda y poner su valor a la derecha. Acá son una sola lista con filetes horizontales, que es como el sitio público muestra la ficha técnica de un vehículo y los datos de contacto. -------------------------------------------------------------------------- */ .ga-pt-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .ga-pt-lista > li { display: flex; align-items: center; gap: var(--ga-s-4); padding: var(--ga-s-3) 0; border-top: 1px solid var(--ga-bone-200); font-size: var(--ga-t-sm); min-width: 0; } .ga-pt-lista > li:first-child { border-top: 0; } .ga-pt-lista > li > .bi { flex: none; color: var(--ga-gold-ink); } .ga-pt-lista__main { flex: 1 1 auto; min-width: 0; } .ga-pt-lista__k { color: var(--ga-on-bone); display: block; } .ga-pt-lista__sub { display: block; margin-top: 2px; font-family: var(--ga-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ga-t-lab); letter-spacing: .04em; color: var(--ga-on-bone-mut); } .ga-pt-lista__v { flex: none; text-align: right; font-family: var(--ga-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--ga-w-mono-bold); letter-spacing: var(--ga-track-num); color: var(--ga-on-bone); } .ga-pt-lista__v--ok { color: var(--ga-ok-ink); } .ga-pt-lista__v--mut { color: var(--ga-on-bone-mut); font-weight: var(--ga-w-med); } .ga-pt-lista__lado { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } /* La permuta entra, no sale: se marca con el color de atención y la flecha de intercambio, no con otro acento más. */ .ga-pt-lista > li.is-permuta > .bi { color: var(--ga-warn); } /* Requisito pendiente / cumplido. El pendiente NO va en rojo: no es un error del cliente, es algo que todavía tiene que traer. */ .ga-pt-lista > li.is-falta > .bi { color: var(--ga-warn); } .ga-pt-lista > li.is-ok > .bi { color: var(--ga-ok-ink); } .ga-pt-marca { flex: none; font-family: var(--ga-font-mono); font-size: var(--ga-t-lab); font-weight: var(--ga-w-med); letter-spacing: var(--ga-track-lab); text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--ga-bone-300); border-radius: var(--ga-r); color: var(--ga-on-bone-mut); white-space: nowrap; } .ga-pt-marca--ok { color: var(--ga-ok-ink); border-color: rgba(74, 124, 89, .3); background: rgba(74, 124, 89, .07); } .ga-pt-marca--falta { color: var(--ga-warn); border-color: rgba(184, 132, 46, .3); background: rgba(184, 132, 46, .07); } .ga-pt-marca--vencida { color: var(--ga-danger); border-color: rgba(169, 68, 54, .3); background: rgba(169, 68, 54, .07); } /* Total al pie de una card. Es el renglón que se lee primero, así que lleva filete propio y el número en mono bold. */ .ga-pt-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ga-s-4); padding: var(--ga-s-3) 0; border-top: 1px solid var(--ga-bone-300); font-size: var(--ga-t-sm); } .ga-pt-total--sep { margin-top: var(--ga-s-4); } .ga-pt-total--fuerte { border-top-width: 2px; border-top-color: var(--ga-gold-ink); } .ga-pt-total__k { font-family: var(--ga-font-mono); font-size: var(--ga-t-lab); font-weight: var(--ga-w-med); letter-spacing: var(--ga-track-lab); text-transform: uppercase; color: var(--ga-on-bone-mut); } .ga-pt-total__v { font-family: var(--ga-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--ga-w-mono-bold); font-size: 1.0625rem; letter-spacing: var(--ga-track-num); color: var(--ga-on-bone); } .ga-pt-total__v--ok { color: var(--ga-ok-ink); } .ga-pt-total__v--debe { color: var(--ga-warn); } /* Nota del vendedor: bloque citado con filete dorado a la izquierda. */ .ga-pt-nota { padding: var(--ga-s-4) var(--ga-s-5); background: var(--ga-goldink-a08); border: 1px solid var(--ga-goldink-a16); border-left: 2px solid var(--ga-gold-ink); border-radius: var(--ga-r); font-size: var(--ga-t-sm); line-height: var(--ga-lh-body); color: var(--ga-on-bone); white-space: pre-line; } /* Galería de la entrega. Misma retícula que `.ga-egrid` de contenido.css. */ .ga-pt-fotos { display: grid; gap: var(--ga-s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } .ga-pt-fotos__ancho { grid-column: 1 / -1; } .ga-pt-fotos a { display: block; border: 1px solid var(--ga-bone-200); overflow: hidden; } .ga-pt-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--ga-dur) var(--ga-ease); } .ga-pt-fotos a:hover img { transform: scale(1.03); } @media (max-width: 700px) { .ga-pt-hero__in { padding: var(--ga-s-8) var(--ga-s-5) var(--ga-s-6); } .ga-pt-body__in { padding: var(--ga-s-8) var(--ga-s-5) var(--ga-s-12); } .ga-pt-meta { gap: var(--ga-s-5); } .ga-pt-sec { padding: var(--ga-s-5); } }