:root { color-scheme: dark; --lime: #d9ed45; --text: #f3f3f3; --line: rgba(255, 255, 255, .34); --soft-line: rgba(255, 255, 255, .16); }
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #050505; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); font-family: "Trebuchet MS", "Segoe UI", sans-serif; background: #050505; }
button, input { font: inherit; }
.preview-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 578px; background: radial-gradient(circle at 19% 45%, rgba(81, 89, 15, .4), transparent 40%), linear-gradient(112deg, #20240b 0%, #171a08 44%, #070707 70%); }
.brand-side { display: grid; height: 100vh; align-self: start; place-items: center; padding: 72px; }
.brand-logo { width: min(247px, 34vw); height: auto; filter: drop-shadow(0 12px 42px rgba(0, 0, 0, .24)); image-rendering: auto; }
.consult-panel { width: 500px; min-height: calc(100vh - 29px); align-self: start; justify-self: start; margin: 16px 0 13px; padding: 32px 40px 38px; background: #2b2b2b; border-radius: 42px; box-shadow: -30px 0 80px rgba(0, 0, 0, .22); }
.panel-header { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 18px; }
.panel-header h1 { margin: 0; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.round-button { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; cursor: pointer; }
.round-button:hover { border-color: var(--lime); color: var(--lime); }
.round-button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.vehicle-art { position: relative; width: min(100%, 287px); margin: 34px auto 24px; }
.vehicle-art canvas { display: block; width: 100%; height: auto; }
.plate-form { width: 100%; margin: 0 auto; }
.plate-card { width: calc(100% - 18px); margin: 0 auto; padding: 0 21px; border: 1px solid var(--line); border-radius: 20px; }
.plate-card > label { display: block; margin-top: 10px; text-align: center; color: #ddd; font-size: 16px; }
.plate-card.is-invalid { border-color: rgba(217, 120, 122, .55); }
.plate-card.is-invalid > label { color: #d9787a; }
.plate-error { margin: 14px 0 0; color: #d9787a; font-size: 16px; text-align: center; line-height: 1.35; }
#placa { width: 100%; height: 70px; padding: 0 8px; color: #d0d0d0; background: transparent; border: 0; border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); border-radius: 0; outline: 0; text-align: center; font-family: Consolas, "Courier New", monospace; font-size: 31px; letter-spacing: .32em; }
#placa::placeholder { color: #aeaeae; opacity: 1; }
#placa:focus { color: #fff; border-top-color: var(--soft-line); border-bottom-color: var(--soft-line); }
.foreign-row { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #e6e6e6; font-size: 15px; font-weight: 700; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { display: block; position: relative; width: 66px; height: 40px; border-radius: 999px; background: #d8d8d8; cursor: pointer; transition: background .2s ease; }
.switch span::after { position: absolute; top: 6px; left: 6px; width: 28px; height: 28px; content: ""; background: #fff; border-radius: 50%; transition: transform .2s ease; }
.switch input:checked + span { background: var(--lime); }
.switch input:checked + span::after { transform: translateX(26px); }
.agreement { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; color: #eee; font-size: 16px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.agreement a { color: inherit; text-underline-offset: 3px; }
.agreement input { width: 26px; height: 26px; flex: 0 0 auto; margin: 0; accent-color: var(--lime); }
.recaptcha-note { margin: 30px 0 18px; color: #898989; font-size: 13px; line-height: 1.5; }
.continue-button { width: 100%; min-height: 50px; color: #151515; background: var(--lime); border: 0; border-radius: 10px; font-weight: 800; font-size: 16px; cursor: pointer; }
.continue-button:disabled { color: #8d8d8d; background: #555; cursor: not-allowed; }
.continue-button:not(:disabled):hover { background: #e2f661; }
.consult-error { margin: 16px 0 0; color: #ffb4b4; font-size: 14px; text-align: center; }
@media (max-width: 950px) { .preview-shell { grid-template-columns: 1fr; background: #111; } .brand-side { height: auto; min-height: 190px; padding: 46px 30px; background: radial-gradient(circle at center, #3d450d, #171a08 66%); } .brand-logo { width: min(247px, 72vw); } .consult-panel { width: 100%; min-height: auto; margin: 0; padding: 30px 24px 48px; border-radius: 34px 34px 0 0; } }
@media (max-width: 480px) { .consult-panel { padding-inline: 16px; } .panel-header { grid-template-columns: 48px 1fr 48px; gap: 8px; } .round-button { width: 48px; height: 48px; } .round-button svg { width: 25px; height: 25px; } .panel-header h1 { font-size: 17px; } .vehicle-art { margin-top: 30px; } .plate-card { padding-inline: 16px; } #placa { height: 80px; font-size: 31px; letter-spacing: .3em; } .foreign-row { min-height: 80px; font-size: 16px; } .switch span { width: 72px; height: 45px; } .switch span::after { width: 31px; height: 31px; top: 7px; left: 7px; } .switch input:checked + span::after { transform: translateX(27px); } .agreement { font-size: 15px; margin-top: 20px; } .agreement input { width: 27px; height: 27px; } }