:root {
    color-scheme: dark;
    --bg: #101412;
    --panel: #181e1b;
    --panel-strong: #202722;
    --text: #f5f7f5;
    --muted: #a9b3ad;
    --line: rgba(229, 237, 232, 0.13);
    --cyan: #b6d845;
    --blue: #42b49a;
    --yellow: #f0bd5c;
    --red: #e66b65;
    --green: #b6d845;
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
    --radius: 8px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

[hidden] { display: none !important; }
.form-field { display: grid; gap: 8px; margin-top: 16px; color: var(--muted); }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; min-width: 0; min-height: 46px; padding: 10px;
    border: 1px solid var(--line); border-radius: 6px;
    background: #172823; color: var(--text); font: inherit;
}
.form-field textarea { resize: vertical; }
dialog { width: min(480px, calc(100% - 24px)); max-height: 90dvh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #11201c; color: var(--text); padding: 22px; }
dialog::backdrop { background: #0009; }
dialog .ghost-action { margin-top: 12px; }
#loginError, .form-error { color: var(--red); }
button:disabled { opacity: .5; cursor: wait; }
.status-pill { white-space: normal !important; overflow-wrap: anywhere; }
.route-card, .alert-item, .shift-meta { overflow-wrap: anywhere; }

body {
    margin: 0;
    min-height: 100vh;
    background: #101412;
    color: var(--text);
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.shell {
    min-height: 100vh;
    padding: 18px;
}

.login-panel {
    width: min(480px, calc(100vw - 32px));
    margin: 7vh auto;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #181e1b;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.brand-lockup,
.brand-compact,
.topbar,
.panel-head,
.shift-meta,
.status-pill {
    display: flex;
    align-items: center;
}

.brand-lockup {
    gap: 14px;
    margin-bottom: 24px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 28px rgba(168, 207, 69, 0.20);
}

.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }

.brand-lockup h1,
.topbar h2,
.panel h3,
.mobile-card h3,
.hero-overlay h3 {
    margin: 0;
    letter-spacing: 0;
}

.brand-lockup h1 {
    font-size: clamp(2rem, 5vw, 3rem);
}

.eyebrow {
    margin: 0 0 5px;
    color: var(--cyan);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-grid {
    display: grid;
    gap: 12px;
}

.role-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 4px 12px;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    text-align: left;
}

.role-card.active {
    border-color: rgba(168, 207, 69, 0.68);
    background: rgba(168, 207, 69, 0.10);
}

.role-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--yellow);
    font-weight: 900;
}

.role-card small {
    color: var(--muted);
    font-size: 0.92rem;
}

.primary-action,
.ghost-action,
.icon-button {
    min-height: 44px;
    border: 0;
    border-radius: var(--radius);
}

.primary-action {
    width: 100%;
    margin-top: 16px;
    padding: 0 18px;
    background: linear-gradient(135deg, #b4d957, #79b86d);
    color: #152019;
    font-weight: 900;
    box-shadow: 0 14px 32px rgba(168, 207, 69, 0.18);
}

.primary-action.full {
    margin-top: 12px;
}

.ghost-action {
    width: 100%;
    margin-top: auto;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.app-frame {
    display: none;
    min-height: calc(100vh - 36px);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: #131815;
    box-shadow: var(--shadow);
}

.shell.is-inside .login-panel {
    display: none;
}

.shell.is-inside .app-frame {
    display: grid;
    grid-template-columns: 248px 1fr;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-right: 1px solid var(--line);
    background: #151a17;
}

.brand-compact {
    gap: 10px;
    margin-bottom: 18px;
    font-weight: 900;
}

.brand-compact .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 0.86rem;
}

.nav-item,
.bottom-item {
    min-height: 44px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    text-align: left;
}

.nav-item {
    padding: 0 14px;
}

.nav-item.active,
.bottom-item.active {
    background: rgba(168, 207, 69, 0.11);
    color: var(--text);
}

.workspace {
    position: relative;
    min-width: 0;
    padding: 18px;
    overflow: auto;
}

.topbar {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.status-pill {
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    white-space: nowrap;
}

.pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 8px rgba(98, 216, 137, 0.12);
}

.hero-surface {
    position: relative;
    min-height: 280px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid rgba(168, 207, 69, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
        #181e1b;
}

#routeCanvas,
.fallback-orbit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.fallback-orbit {
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.no-three .fallback-orbit {
    opacity: 1;
}

.fallback-orbit span {
    position: absolute;
    width: 48%;
    height: 22%;
    border: 1px solid rgba(168, 207, 69, 0.28);
    border-radius: 50%;
    transform: rotateX(68deg) rotateZ(var(--spin, 0deg));
    animation: orbitSpin 7s linear infinite;
}

.fallback-orbit span:nth-child(2) {
    --spin: 55deg;
    border-color: rgba(247, 201, 72, 0.28);
    animation-duration: 9s;
}

.fallback-orbit span:nth-child(3) {
    --spin: 112deg;
    border-color: rgba(255, 107, 107, 0.26);
    animation-duration: 11s;
}

.hero-overlay {
    position: absolute;
    left: 18px;
    bottom: 18px;
    width: min(420px, calc(100% - 36px));
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(4, 12, 22, 0.72);
    backdrop-filter: blur(14px);
}

.hero-overlay h3 {
    font-size: clamp(1.45rem, 3vw, 2.3rem);
}

.hero-overlay p:last-child,
.body-copy {
    color: var(--muted);
    line-height: 1.55;
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 16px;
}

.driver-view {
    display: none;
}

.shell[data-role="driver"] .admin-view {
    display: none;
}

.shell[data-role="driver"] .driver-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metrics-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.metric-card,
.panel,
.mobile-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.22);
}

.metric-card {
    padding: 14px;
}

.metric-card strong {
    display: block;
    margin: 8px 0 4px;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}

.metric-card span,
.route-card span,
.driver-card span,
.alert-item span {
    color: var(--muted);
    font-size: 0.9rem;
}

.panel,
.mobile-card {
    padding: 16px;
}

.panel.wide {
    min-width: 0;
}

.panel-head {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.panel-head.compact {
    margin-bottom: 10px;
}

.icon-button {
    width: 44px;
    background: rgba(168, 207, 69, 0.13);
    color: var(--cyan);
    font-size: 1.4rem;
}

.route-list,
.driver-list,
.alert-list,
.action-stack {
    display: grid;
    gap: 10px;
}

.route-card,
.driver-card,
.alert-item,
.driver-action,
.check-row {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.045);
}

.route-card,
.driver-card,
.alert-item,
.driver-action {
    color: var(--text);
    text-align: left;
}

.route-card {
    display: grid;
    grid-template-columns: 0.8fr 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.route-card strong,
.driver-card strong,
.alert-item strong,
.driver-action strong {
    display: block;
    margin-bottom: 4px;
}

.tag {
    justify-self: end;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(247, 201, 72, 0.14);
    color: var(--yellow);
    font-size: 0.82rem;
    font-weight: 800;
}

.driver-card {
    padding: 12px;
}

.bar,
.route-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.bar {
    margin-top: 10px;
}

.bar span,
.route-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--blue));
}

.alert-item {
    width: 100%;
    padding: 13px;
    border-color: rgba(255, 107, 107, 0.28);
}

.alert-item.soft {
    border-color: rgba(247, 201, 72, 0.28);
}

.mobile-card {
    min-height: 150px;
}

.shift-card {
    grid-column: 1 / -1;
    min-height: 190px;
    background:
        linear-gradient(135deg, rgba(168, 207, 69, 0.16), rgba(98, 168, 111, 0.09)),
        var(--panel-strong);
}

.shift-card h3 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.route-progress {
    margin: 22px 0 12px;
    height: 12px;
}

.shift-meta {
    justify-content: space-between;
    color: var(--muted);
}

.driver-action {
    width: 100%;
    min-height: 72px;
    padding: 14px;
}

.driver-action.active {
    border-color: rgba(168, 207, 69, 0.65);
    background: rgba(168, 207, 69, 0.10);
}

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin-top: 9px;
    padding: 0 12px;
    color: var(--text);
}

.check-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--cyan);
}

.bottom-nav {
    display: none;
}

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    transform: translateY(20px);
    max-width: min(360px, calc(100vw - 36px));
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(5, 13, 24, 0.92);
    color: var(--text);
    opacity: 0;
    pointer-events: none;
    transition: 0.22s ease;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

@keyframes orbitSpin {
    to {
        transform: rotateX(68deg) rotateZ(calc(var(--spin, 0deg) + 360deg));
    }
}

.module-header, .fleet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.module-header { margin-bottom: 20px; }
.module-header h3 { font-size: 24px; margin: 0; }
.compact-action { width: auto; min-width: 130px; padding: 10px 16px; margin: 0; }
.management-module { min-width: 0; }
.search-field { max-width: 440px; margin-bottom: 22px; }
.directory-list { display: grid; }
.directory-row { display: grid; grid-template-columns: 44px minmax(0,1.4fr) minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.directory-row strong, .directory-row span { display: block; overflow-wrap: anywhere; }
.directory-actions { display:flex; align-items:center; gap:6px; }
.directory-actions button { display:grid; place-items:center; width:36px; height:36px; border:1px solid #e1e7e3; border-radius:50%; background:#fff; color:#536159; cursor:pointer; }
.directory-actions button:hover { border-color:#8dbb32; color:#527a22; background:#f3f8e9; }
.directory-actions button:last-child:hover { border-color:#e5aaa6; color:#b14c47; background:#fff1f0; }
.directory-actions svg { width:16px; height:16px; }
.vehicle-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.vehicle-actions button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid #e1e7e3; border-radius:50%; background:#fff; color:#536159; cursor:pointer; }
.vehicle-actions button:hover { border-color:#8dbb32; color:#527a22; background:#f3f8e9; }
.vehicle-actions button:last-child:hover { border-color:#e5aaa6; color:#b14c47; background:#fff1f0; }
.vehicle-actions svg { width:15px; height:15px; }
.directory-row div > span { margin-top: 5px; color: var(--muted); font-size: 14px; }
.driver-avatar { display: grid; place-items: center; width: 42px; height: 42px; background: #245447; color: #b8f2d9; border-radius: 50%; font-weight: 800; }
.vehicle-editor { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vehicle-visual { position: relative; min-width: 0; background: #e5eeed; align-self: stretch; min-height: 520px; }
#vehicleCanvas { position: absolute; width: 100%; height: 100%; inset: 0; display: block; touch-action: pan-y; cursor: grab; }
#vehicleCanvas:active { cursor: grabbing; }
.vehicle-caption { position: absolute; top: 24px; left: 24px; right: 24px; z-index: 1; pointer-events: none; color: #233c38; overflow-wrap: anywhere; }
.vehicle-caption span { display: block; font-size: 13px; text-transform: uppercase; }
.vehicle-caption strong { display: block; font-size: 26px; margin-top: 6px; }
.viewer-controls { position: absolute; bottom: 18px; left: 18px; right: 18px; display: flex; gap: 8px; align-items: center; color: #23423c; }
.viewer-button { width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid #becfcb; border-radius: 6px; background: #ffffffdc; color: #23423c; font-size: 20px; }
.viewer-controls label { display: flex; gap: 8px; align-items: center; margin-left: auto; font-size: 12px; }
.viewer-controls input { width: 95px; accent-color: #238a70; }
#vehicleFallback { position: absolute; top: 43%; left: 20px; right: 20px; color: #23423c; text-align: center; }
.vehicle-fields { padding: 24px; min-width: 0; }
.vehicle-fields h4 { font-size: 18px; margin: 0 0 18px; }
.form-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 14px; }
.category-picker { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.category-picker legend { margin-bottom: 10px; color: var(--muted); font-size: 14px; }
.category-picker label { position: relative; }
.category-picker input { position: absolute; opacity: 0; }
.category-picker span { display: grid; place-items: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: 5px; font-size: 13px; cursor: pointer; min-height: 42px; }
.category-picker input:checked + span { color: #9fead2; background: #163a31; border-color: #47ba98; }
.category-picker input:focus-visible + span { outline: 2px solid white; outline-offset: 2px; }
.vehicle-fields .form-field { font-size: 13px; }
.vehicle-fields input[type=color] { padding: 4px; cursor: pointer; }
.fleet-toolbar { padding-top: 26px; padding-bottom: 18px; }
.fleet-toolbar h4 { font-size: 17px; margin-right: auto; }
.fleet-toolbar .form-field { margin: 0; font-size: 12px; }
#vehicleCount { color: var(--cyan); margin-left: 6px; }
.vehicle-list { display: grid; gap: 8px; }
.vehicle-row { width: 100%; display: grid; grid-template-columns: 16px minmax(80px,.7fr) minmax(100px,1fr) minmax(100px,1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 6px; background: #12241f; color: var(--text); padding: 16px; text-align: left; }
.vehicle-row.selected { border-color: var(--cyan); }
.vehicle-row strong, .vehicle-row small { display: block; overflow-wrap: anywhere; }
.vehicle-row small { margin-top: 6px; color: var(--muted); }
.paint-chip { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ffffff70; }
.empty-state { padding: 30px 0; color: var(--muted); }
.toast { z-index: 50; }

.preop-module { max-width: 1180px; margin: 0 auto; }
.preop-date { color: var(--muted); text-transform: capitalize; }
.preop-identity { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.preop-identity > div { padding: 14px 16px; background: #10201c; }
.preop-identity span, .record-meta span, .record-observations > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.preop-identity strong { display: block; overflow-wrap: anywhere; }
.preop-form { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #101f1b; }
.preop-progress { height: 5px; background: rgba(255,255,255,.07); }
.preop-progress span { display: block; height: 100%; background: linear-gradient(90deg,#a8cf45,#71b36d); transition: width .35s ease; }
.preop-stage { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(340px,.95fr); min-height: 510px; }
.preop-visual { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%,#edf3e4 0,#dce8df 62%,#cadbd1 100%); }
#preopCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.preop-logo { position: absolute; z-index: 2; top: 20px; left: 20px; width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 8px 20px #42623a30; }
#preopVisualFallback { position: absolute; inset: 45% 20px auto; color: #29443c; text-align: center; }
.preop-question { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 34px; }
.preop-question h3 { margin: 0; font-size: 28px; letter-spacing: 0; }
.preop-question > p:not(.eyebrow) { margin: 10px 0 24px; color: var(--muted); line-height: 1.55; }
.preop-odometer { max-width: 360px; }
.vehicle-summary { display: grid; gap: 5px; margin-top: 20px; padding-left: 14px; border-left: 3px solid var(--cyan); }
.vehicle-summary span { color: var(--cyan); font-weight: 800; }
.vehicle-summary small { color: var(--muted); }
.condition-options, .fuel-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.condition-option, .fuel-option { min-width: 0; min-height: 132px; padding: 13px 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.035); color: var(--text); text-align: center; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.condition-option:hover, .fuel-option:hover { transform: translateY(-2px); }
.condition-option.selected.good { border-color: #a8cf45; background: #a8cf451b; }
.condition-option.selected.regular { border-color: #e3b64b; background: #e3b64b17; }
.condition-option.selected.bad { border-color: #e45e55; background: #e45e5518; }
.condition-option strong, .condition-option small, .fuel-option strong { display: block; overflow-wrap: anywhere; }
.condition-option small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.25; }
.condition-symbol, .condition-face { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 9px; border: 2px solid currentColor; border-radius: 50%; font-size: 28px; line-height: 1; }
.condition-option.good { color: #b8dc61; }
.condition-option.regular { color: #e3b64b; }
.condition-option.bad { color: #ed756d; }
.fuel-option.selected { border-color: var(--cyan); background: #a8cf4518; }
.mini-tank { position: relative; display: flex; align-items: end; width: 44px; height: 58px; margin: 0 auto 10px; padding: 4px; overflow: hidden; border: 3px solid #d9e5dc; border-radius: 6px; }
.mini-tank::after { content:""; position:absolute; top:8px; right:-9px; width:8px; height:20px; border:3px solid #d9e5dc; border-left:0; border-radius:0 4px 4px 0; }
.mini-tank i { display:block; width:100%; min-height:3px; background:#a8cf45; border-radius:2px; }
.preop-warning { padding: 18px; border-left: 4px solid #e3b64b; background: #e3b64b12; }
.preop-warning p { margin-bottom: 0; color: var(--muted); }
.preop-result { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px; border:1px solid var(--line); border-radius:7px; }
.preop-result span { color:var(--muted); }
.preop-result strong { font-size:20px; }
.result-aprobado { color:#b8dc61 !important; border-color:#a8cf4566 !important; }
.result-con-novedades { color:#e3b64b !important; border-color:#e3b64b66 !important; }
.result-no-apto { color:#ed756d !important; border-color:#e45e5566 !important; }
.preop-legal { margin-bottom:0 !important; font-size:12px; }
.preop-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 15px 18px; border-top: 1px solid var(--line); }
.preop-actions > span { margin-right: auto; color: var(--muted); font-size: 13px; }
.preop-actions .ghost-action { width: auto; margin: 0; padding: 0 18px; }
.records-toolbar { display: flex; align-items: end; gap: 12px; margin-bottom: 18px; }
.records-toolbar .form-field { margin: 0; }
.records-toolbar .form-field:first-child { flex: 1; }
.export-records { min-height:44px; white-space:nowrap; }
.export-records svg { width:17px; height:17px; }
.records-list { display: grid; gap: 8px; }
.record-row { display: grid; grid-template-columns: 125px minmax(190px,1.3fr) minmax(130px,.7fr) minmax(110px,.6fr) auto; align-items: center; gap: 16px; width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #10201c; color: var(--text); text-align: left; }
.record-row:hover { border-color: #a8cf4570; background: #142720; }
.record-number { color: var(--cyan); font-weight: 800; }
.record-row strong,.record-row small { display:block; overflow-wrap:anywhere; }
.record-row small { margin-top:4px; color:var(--muted); }
.result-badge { justify-self:end; padding:7px 10px; border:1px solid currentColor; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; }
.record-dialog { width:min(760px,calc(100% - 24px)); }
.record-heading { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.record-heading img { width:56px; height:56px; border-radius:50%; }
.record-heading h3 { margin:0; font-size:24px; }
.record-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:20px 0; }
.record-meta strong { overflow-wrap:anywhere; }
.record-answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--line); }
.record-answer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; background:#14251f; }
.answer-bien { color:#b8dc61; }.answer-regular { color:#e3b64b; }.answer-mal { color:#ed756d; }
.record-observations { margin-top:18px; padding:14px; border-left:3px solid var(--cyan); background:#a8cf450b; }
.record-observations p { margin:0; white-space:pre-wrap; }

/* Eco Instalar: neutral graphite surfaces with restrained operational accents. */
.workspace { background:#131815; }
.topbar { color:var(--text); }
.status-pill { background:#202722; border-color:#303a34; }
.nav-item.active,
.bottom-item.active { background:#b6d84518; color:#d8ec8b; }
.nav-item:hover,
.bottom-item:hover { background:#ffffff08; color:var(--text); }
.primary-action {
    background:#b6d845;
    color:#18200f;
    box-shadow:0 8px 22px #b6d8451f;
}
.primary-action:hover { background:#c4e255; }
.ghost-action { background:#242c27; border-color:#39453e; }
.ghost-action:hover { background:#2c3730; border-color:#536158; }
.metric-card,
.panel,
.mobile-card { background:#181e1b; border-color:#29322d; box-shadow:0 10px 30px #00000024; }
.route-card,
.driver-card,
.alert-item,
.driver-action,
.check-row { background:#202722; border-color:#303a34; }
.driver-action.active { background:#b6d84512; border-color:#9cbd39; }
.tag { background:#f0bd5c16; color:#f4cb77; }
.form-field input,
.form-field select,
.form-field textarea { background:#202722; border-color:#39443e; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline:2px solid #42b49a; outline-offset:1px; border-color:transparent; }
.directory-row { border-color:#29322d; }
.driver-avatar { background:#25453d; color:#8ee0cd; }
.vehicle-row,
.preop-identity > div,
.preop-form,
.record-row { background:#181e1b; }
.vehicle-row:hover,
.record-row:hover { background:#202722; }
.vehicle-row.selected { border-color:#42b49a; box-shadow:inset 3px 0 #42b49a; }
.category-picker input:checked + span { color:#95e0cf; background:#1f3a33; border-color:#42b49a; }
.preop-progress { background:#29312d; }
.preop-progress span { background:#b6d845; }
.preop-visual { background:radial-gradient(circle at 50% 45%,#f4f7f4 0,#dfe9e3 64%,#cbd9d1 100%); }
.condition-option,
.fuel-option { background:#202722; border-color:#354039; }
.condition-option.selected.good { border-color:#b6d845; background:#b6d84514; }
.condition-option.selected.regular { border-color:#f0bd5c; background:#f0bd5c12; }
.condition-option.selected.bad { border-color:#e66b65; background:#e66b6512; }
.preop-actions { background:#181e1b; }
.record-answer { background:#202722; }
.record-observations { background:#42b49a0d; border-color:#42b49a; }
dialog { background:#181e1b; border-color:#39443e; }
.toast { background:#202722; border-color:#46534b; }
@media (max-width: 1150px) {
    .vehicle-editor { grid-template-columns: 1fr; }
    .vehicle-visual { min-height: 0; height: 380px; }
    .category-picker { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .preop-stage { grid-template-columns:1fr; }
    .preop-visual { min-height:340px; }
}
@media (max-width: 640px) {
    .vehicle-visual { height: 310px; margin: 0 -14px; }
    .vehicle-fields { padding: 22px 0; }
    .vehicle-caption { top: 16px; left: 18px; }
    .vehicle-caption strong { font-size: 22px; }
    .directory-row { grid-template-columns: 38px minmax(0,1fr); gap: 12px; }
    .directory-row > .tag { grid-column: 2; justify-self: start; }
    .directory-row > div:nth-child(3) { grid-column: 2; }
    .vehicle-row { grid-template-columns: 16px 1fr 1fr; font-size: 13px; gap: 10px; }
    .vehicle-row > span:nth-child(4) { grid-column: 2; }
    .vehicle-row .tag { font-size: 11px; padding: 6px; justify-self: end; }
    .fleet-toolbar { gap: 12px; }
    .fleet-toolbar h4 { width: 100%; margin-bottom: 0; }
    .fleet-toolbar .form-field { flex: 1; min-width: 0; }
    .module-header { gap: 10px; }
    .compact-action { min-width: 0; font-size: 13px; }
    .toast { bottom: 90px; }
    .preop-module { margin:-4px -14px 0; }
    .preop-module .module-header { display:none; }
    .preop-date { width:100%; font-size:12px; }
    .preop-identity { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 64px; gap:0; margin:0; border-width:1px 0; border-radius:0; }
    .preop-identity > div { min-width:0; padding:9px 10px; }
    .preop-identity span { margin-bottom:2px; font-size:9px; }
    .preop-identity strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
    .preop-form { border-width:0 0 1px; border-radius:0; }
    .preop-stage { min-height:0; }
    .preop-visual { width:100%; min-height:0; height:clamp(250px,72vw,330px); margin:0; }
    .preop-logo { top:10px; left:12px; width:36px; height:36px; }
    .preop-question { min-height:245px; justify-content:flex-start; padding:15px 14px 12px; }
    .preop-question .eyebrow { margin:0 0 3px; font-size:10px; }
    .preop-question h3 { font-size:20px; line-height:1.15; }
    .preop-question > p:not(.eyebrow) { display:-webkit-box; overflow:hidden; margin:5px 0 12px; font-size:12px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
    .preop-odometer { margin-bottom:8px; }
    .preop-odometer input { min-height:44px; }
    .vehicle-summary { margin-top:10px; gap:2px; }
    .condition-options,.fuel-options { gap:7px; }
    .condition-option,.fuel-option { min-height:88px; padding:8px 4px; font-size:12px; }
    .condition-option small { display:none; }
    .condition-symbol,.condition-face { width:36px; height:36px; margin-bottom:5px; font-size:21px; }
    .mini-tank { width:32px; height:42px; margin-bottom:6px; border-width:2px; }
    .mini-tank::after { right:-7px; width:6px; height:15px; border-width:2px; }
    .preop-result { padding:10px; }
    .preop-question textarea { min-height:74px; max-height:92px; }
    .preop-legal { font-size:10px; line-height:1.3; }
    .preop-actions { position:static; z-index:auto; gap:8px; min-height:54px; padding:6px 12px calc(6px + env(safe-area-inset-bottom)); background:#181e1b; backdrop-filter:none; }
    .preop-actions .compact-action { flex:0 1 116px; width:auto; min-width:0; min-height:40px; padding:7px 10px; font-size:12px; }
    .preop-actions > span { flex:1; margin:0; text-align:center; white-space:nowrap; }
    .records-toolbar { align-items:stretch; flex-direction:column; }
    .records-toolbar .form-field { width:100%; }
    .export-records { width:100%; justify-content:center; }
    .record-row { grid-template-columns:1fr auto; gap:9px; }
    .record-row > span:nth-child(3),.record-row > span:nth-child(4) { grid-column:1; }
    .record-row .result-badge { grid-column:2; grid-row:1; }
    .record-heading { grid-template-columns:48px 1fr; }
    .record-heading img { width:48px; height:48px; }
    .record-heading .result-badge { grid-column:1 / -1; justify-self:start; }
    .record-meta,.record-answers { grid-template-columns:1fr; }
}

@media (max-width: 980px) {
    .shell.is-inside .app-frame {
        grid-template-columns: 1fr;
    }

    .side-nav {
        display: none;
    }

    .workspace {
        padding-bottom: 88px;
    }

    .bottom-nav {
        position: fixed;
        left: 18px;
        right: 18px;
        bottom: 16px;
        z-index: 20;
        display: grid;
        grid-template-columns: repeat(5, minmax(0,1fr));
        gap: 6px;
        min-height: 64px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(24, 30, 27, 0.96);
        backdrop-filter: blur(18px);
    }

    .bottom-item {
        text-align: center;
        font-size: 0.75rem;
    }

    .shell[data-role="admin"] .bottom-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }
    .shell[data-role="driver"] .bottom-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }

    .content-grid,
    .shell[data-role="driver"] .driver-view {
        grid-template-columns: 1fr;
    }

    .metrics-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .shell {
        padding: 0;
    }

    .login-panel {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        border: 0;
        border-radius: 0;
        padding: 24px 18px;
    }

    .app-frame {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .workspace {
        padding: 14px;
        padding-bottom: 92px;
    }

    .topbar {
        align-items: flex-start;
    }

    .status-pill {
        padding: 0 10px;
        font-size: 0.84rem;
    }

    .hero-surface {
        min-height: 310px;
        border-radius: 0;
        margin-left: -14px;
        margin-right: -14px;
        border-left: 0;
        border-right: 0;
    }

    .hero-overlay {
        left: 14px;
        right: 14px;
        bottom: 14px;
        width: auto;
    }

    .metrics-row {
        grid-template-columns: 1fr;
    }

    .route-card {
        grid-template-columns: 1fr;
    }

    .tag {
        justify-self: start;
    }

    .bottom-nav {
        left: 12px;
        right: 12px;
        bottom: 10px;
    }

    .shell[data-role="driver"][data-section="inspections"] .workspace {
        height: 100dvh;
        padding: 10px 14px 84px;
        overflow: hidden;
    }

    .shell[data-role="driver"][data-section="inspections"] .topbar {
        height: 42px;
        margin-bottom: 8px;
        align-items: center;
    }

    .shell[data-role="driver"][data-section="inspections"] .topbar .eyebrow,
    .shell[data-role="driver"][data-section="inspections"] .topbar .status-pill {
        display: none;
    }

    .shell[data-role="driver"][data-section="inspections"] .topbar h2 {
        font-size: 20px;
    }

    .shell[data-role="driver"][data-section="inspections"] .preop-module {
        display: flex;
        flex-direction: column;
        height: calc(100dvh - 144px);
        min-height: 0;
    }

    .shell[data-role="driver"][data-section="inspections"] .preop-identity {
        flex: 0 0 43px;
    }

    .shell[data-role="driver"][data-section="inspections"] .preop-form {
        display: flex;
        flex: 1;
        min-height: 0;
        flex-direction: column;
    }

    .shell[data-role="driver"][data-section="inspections"] .preop-progress {
        flex: 0 0 5px;
    }

    .shell[data-role="driver"][data-section="inspections"] .preop-stage {
        display: grid;
        flex: 1;
        min-height: 0;
        grid-template-rows: minmax(185px,1.15fr) minmax(184px,1fr);
    }

    .shell[data-role="driver"][data-section="inspections"] .preop-visual {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .shell[data-role="driver"][data-section="inspections"] .preop-question {
        min-height: 0;
        overflow: hidden;
    }

    .shell[data-role="driver"][data-section="inspections"] .preop-stage:has(#preopObservations) {
        grid-template-rows: minmax(125px,.7fr) minmax(220px,1.3fr);
    }

    .shell[data-role="driver"][data-section="inspections"] #preopError {
        flex: 0 0 auto;
        margin: 0;
        padding: 0 14px;
        font-size: 11px;
    }

    .shell[data-role="driver"][data-section="inspections"] .preop-actions {
        position: relative;
        z-index: 2;
        flex: 0 0 52px;
        border-top: 0;
        border-bottom: 0;
        box-shadow: inset 0 1px rgba(255,255,255,.035);
    }
}

@media (max-width: 640px) and (max-height: 700px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-stage {
        grid-template-rows: minmax(150px,.9fr) minmax(175px,1fr);
    }

    .shell[data-role="driver"][data-section="inspections"] .preop-question {
        padding-top: 10px;
    }

    .shell[data-role="driver"][data-section="inspections"] .preop-question > p:not(.eyebrow) {
        margin-bottom: 7px;
        -webkit-line-clamp: 1;
    }
}

/* Light operational theme: calm, legible and intentionally connected. */
:root {
    color-scheme: light;
    --bg:#f3f6f2;
    --panel:#ffffff;
    --panel-strong:#f8faf7;
    --text:#18231e;
    --muted:#647169;
    --line:#dce4de;
    --cyan:#8dbb32;
    --blue:#168b75;
    --yellow:#d99b2b;
    --red:#cf514c;
    --green:#8dbb32;
    --shadow:0 18px 48px rgba(33,58,46,.10);
}

body { background:#f3f6f2; color:var(--text); }
.app-frame { background:#f7f9f6; border-color:#d7e0da; border-radius:8px; box-shadow:var(--shadow); }
.workspace { background:#f7f9f6; }
.side-nav { background:#ffffff; border-color:#dce4de; }
.brand-compact { color:#1e3329; }
.nav-item,
.bottom-item { color:#68766e; }
.nav-item:hover,
.bottom-item:hover { background:#f0f5ef; color:#20352b; }
.nav-item.active,
.bottom-item.active { background:#eef6dc; color:#365318; box-shadow:inset 3px 0 #8dbb32; }
.topbar { color:#18231e; }
.status-pill { background:#ffffff; border-color:#dce4de; color:#647169; box-shadow:0 4px 14px rgba(33,58,46,.06); }
.pulse { background:#78ad27; box-shadow:0 0 0 6px rgba(141,187,50,.14); }
.eyebrow { color:#527d1f; }

.login-panel,
.metric-card,
.panel,
.mobile-card,
dialog { background:#ffffff; color:#18231e; border-color:#dce4de; box-shadow:0 12px 34px rgba(33,58,46,.08); }
.login-panel { border-radius:8px; }
.role-card { background:#f8faf7; color:#18231e; border-color:#dce4de; }
.role-card.active { background:#f0f7df; border-color:#8dbb32; }
.role-icon { background:#e8f0e9; color:#527d1f; }

.primary-action { background:#8dbb32; color:#15200d; box-shadow:0 8px 20px rgba(103,142,34,.20); }
.primary-action:hover { background:#9ac83b; }
.ghost-action { background:#ffffff; color:#294137; border-color:#cfdad3; }
.ghost-action:hover { background:#f3f7f3; border-color:#9caca2; }
.icon-button { background:#edf6dd; color:#527d1f; }

.route-card,
.driver-card,
.alert-item,
.driver-action,
.check-row,
.vehicle-row,
.record-row { background:#ffffff; color:#18231e; border-color:#dce4de; }
.route-card:hover,
.driver-action:hover,
.vehicle-row:hover,
.record-row:hover { background:#f8faf7; border-color:#b8c8bd; }
.driver-action.active { background:#f0f7df; border-color:#8dbb32; }
.route-card span,
.driver-card span,
.alert-item span,
.vehicle-row small,
.record-row small { color:#647169; }
.bar,
.route-progress { background:#e8eee9; }
.bar span,
.route-progress span { background:linear-gradient(90deg,#8dbb32,#168b75); }
.tag { background:#fff4dc; color:#875b0c; border:1px solid #efd8a8; }
.alert-item { border-left:3px solid #cf514c; }

.form-field { color:#536159; }
.form-field input,
.form-field select,
.form-field textarea { background:#ffffff; color:#18231e; border-color:#ccd8d0; }
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color:#9eafa4; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline:3px solid rgba(22,139,117,.15); border-color:#168b75; }
.category-picker span { background:#ffffff; color:#3b4a42; border-color:#d4ded7; }
.category-picker input:checked + span { color:#0e6858; background:#e6f5f1; border-color:#168b75; box-shadow:inset 0 0 0 1px #168b75; }
.driver-avatar { background:#e5f4ef; color:#0f725f; }
.directory-row { border-color:#e2e8e4; }
.vehicle-row.selected { background:#f5faeb; border-color:#8dbb32; box-shadow:inset 3px 0 #8dbb32; }

.preop-identity { background:#dce4de; border-color:#dce4de; }
.preop-identity > div { background:#ffffff; }
.preop-identity span,
.record-meta span,
.record-observations > span { color:#6c786f; }
.preop-form { background:#ffffff; border-color:#dce4de; box-shadow:0 12px 32px rgba(33,58,46,.08); }
.preop-progress { background:#e5ebe7; }
.preop-progress span { background:linear-gradient(90deg,#8dbb32,#168b75); }
.preop-question { background:#ffffff; }
.preop-question > p:not(.eyebrow),
.vehicle-summary small,
.condition-option small,
.preop-legal { color:#647169; }
.vehicle-summary { border-color:#168b75; }
.vehicle-summary span { color:#0e7562; }
.condition-option,
.fuel-option { background:#f8faf7; color:#25352d; border-color:#d6dfd9; }
.condition-option:hover,
.fuel-option:hover { background:#ffffff; border-color:#a9b9af; box-shadow:0 7px 18px rgba(33,58,46,.08); }
.condition-option.good { color:#587e20; }
.condition-option.regular { color:#9a6810; }
.condition-option.bad { color:#b4403b; }
.condition-option.selected.good { background:#edf6dc; border-color:#8dbb32; }
.condition-option.selected.regular { background:#fff4dd; border-color:#d99b2b; }
.condition-option.selected.bad { background:#fff0ef; border-color:#cf514c; }
.fuel-option.selected { background:#e8f5f1; border-color:#168b75; }
.mini-tank,
.mini-tank::after { border-color:#69776f; }
.preop-result { background:#f8faf7; border-color:#d6dfd9; }
.preop-actions { background:#ffffff !important; border-color:#e1e7e3; }
.preop-warning { background:#fff7e8; color:#694a12; }
.preop-warning p { color:#765f35; }

.record-answer { background:#ffffff; }
.record-answers { background:#dce4de; border-color:#dce4de; }
.record-observations { background:#eaf6f3; border-color:#168b75; }
.result-aprobado { color:#547c19 !important; border-color:#9fc45f !important; }
.result-con-novedades { color:#95620a !important; border-color:#e0b661 !important; }
.result-no-apto { color:#b13c37 !important; border-color:#df817c !important; }
.toast { background:#223229; color:#ffffff; border-color:#344a3e; }

@media (max-width:980px) {
    .bottom-nav { background:rgba(255,255,255,.96); border-color:#d5dfd8; box-shadow:0 10px 34px rgba(33,58,46,.16); }
    .bottom-item.active { box-shadow:inset 0 -3px #8dbb32; }
}

@media (max-width:640px) {
    .shell[data-role="driver"][data-section="inspections"] .workspace { background:#f7f9f6; }
    .shell[data-role="driver"][data-section="inspections"] .preop-actions { box-shadow:inset 0 1px #e4eae6; }
}
.shell[data-role="driver"][data-section="inspections"] .preop-mechanical-step .preop-visual { position:relative !important; height:165px !important; min-height:165px !important; max-height:165px !important; overflow:hidden !important; }
.shell[data-role="driver"][data-section="inspections"] .preop-mechanical-step .preop-visual canvas { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; transform:none !important; }
@media (max-width:640px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-mechanical-step .preop-stage { grid-template-rows:165px minmax(250px,1fr) !important; }
    .shell[data-role="driver"][data-section="inspections"] .preop-mechanical-step .preop-visual { height:165px !important; min-height:165px !important; max-height:165px !important; }
}
.preop-electrical-step .preop-question { overflow:visible !important; }
.preop-electrical-step .electrical-list { overflow:visible !important; }
.preop-electrical-step .electrical-novelty { display:block !important; position:relative; z-index:5; background:#fff8df; border:1px solid #e7c66b; border-radius:12px; padding:8px; }
.preop-electrical-step .electrical-novelty textarea { display:block !important; width:100%; background:#fff !important; color:#26352a !important; }
.shell[data-role="driver"][data-section="inspections"] .preop-electrical-step .preop-question { overflow-y:auto !important; overflow-x:hidden !important; padding-bottom:92px !important; -webkit-overflow-scrolling:touch; }
.shell[data-role="driver"][data-section="inspections"] .preop-electrical-step .electrical-list { padding-bottom:8px; }
.shell[data-role="driver"][data-section="inspections"] .preop-electrical-step .electrical-novelty { margin-bottom:12px; }
.shell[data-role="driver"][data-section="inspections"] .preop-mechanical-step .preop-visual { overflow:hidden; min-height:220px; }
.shell[data-role="driver"][data-section="inspections"] .preop-mechanical-step .preop-visual canvas { transform:scale(1.05); transform-origin:center; max-width:100%; max-height:100%; }
.shell[data-role="driver"][data-section="inspections"] .preop-mechanical-step .preop-question { overflow-y:auto !important; overflow-x:hidden !important; padding-bottom:92px !important; -webkit-overflow-scrolling:touch; }
.mechanical-novelty { display:block !important; position:relative; z-index:5; background:#fff8df; border:1px solid #e7c66b; border-radius:12px; padding:8px; }
.mechanical-novelty textarea { display:block !important; width:100%; background:#fff !important; color:#26352a !important; min-height:60px; }
.preop-mechanical-step .mechanical-grid { grid-template-columns:1fr !important; gap:8px; }
.preop-mechanical-step .mechanical-item { min-height:46px; padding:8px 12px; }
.preop-mechanical-step .mechanical-item span { font-size:12px; white-space:normal; }
.preop-mechanical-step .mechanical-item small { font-size:10px; }
@media (max-width:640px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-mechanical-step .preop-stage { grid-template-rows:180px minmax(240px,1fr); }
    .shell[data-role="driver"][data-section="inspections"] .preop-mechanical-step .preop-visual { min-height:180px; height:180px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-mechanical-step .preop-visual canvas { transform:scale(.94); }
}

/* V5 experience system --------------------------------------------------- */
body { background:#f5f7f4; }
.shell:not(.is-inside) { display:grid; min-height:100dvh; place-items:center; padding:24px; }
.login-panel {
    display:grid;
    grid-template-columns:minmax(360px,1.08fr) minmax(340px,.92fr);
    width:min(980px,calc(100vw - 48px));
    min-height:620px;
    margin:0;
    padding:0;
    overflow:hidden;
    border:0;
    background:#ffffff;
    box-shadow:0 28px 80px rgba(43,66,54,.13);
}
.login-visual { position:relative; min-width:0; overflow:hidden; background:#eaf4d8; }
.login-visual::before { content:""; position:absolute; inset:0; background:linear-gradient(160deg,#f2f8e7 0%,#deedc3 100%); }
.login-visual-copy { position:absolute; z-index:2; top:44px; left:44px; right:44px; }
.login-kicker { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; background:#ffffffc9; color:#4d6f1d; font-size:12px; font-weight:750; }
.login-visual-copy h2 { max-width:390px; margin:16px 0 8px; color:#1b2a21; font-size:38px; line-height:1.08; }
.login-visual-copy p { max-width:340px; margin:0; color:#526159; font-size:15px; }
.login-visual > img { position:absolute; z-index:1; right:-10%; bottom:-3%; width:94%; max-height:72%; object-fit:contain; object-position:right bottom; }
.login-content { display:flex; min-width:0; flex-direction:column; justify-content:center; padding:48px 52px; }
.login-content .brand-lockup { gap:10px; margin-bottom:52px; }
.login-content .brand-mark { width:40px; height:40px; box-shadow:none; }
.login-content .brand-lockup strong,
.login-content .brand-lockup span { display:block; }
.login-content .brand-lockup strong { font-size:15px; }
.login-content .brand-lockup div > span { margin-top:1px; color:#768078; font-size:11px; }
.login-heading h1 { margin:0; font-size:32px; line-height:1.15; }
.login-heading > p:last-child { margin:9px 0 22px; color:#6a756e; }
.login-content .form-field { gap:7px; margin-top:13px; color:#35443c; font-size:13px; font-weight:650; }
.input-shell { display:flex; align-items:center; gap:10px; min-height:52px; padding:0 14px; border:1px solid #d8e0db; border-radius:8px; background:#fbfcfb; transition:.2s ease; }
.input-shell:focus-within { border-color:#7fae2c; box-shadow:0 0 0 4px rgba(141,187,50,.13); background:#fff; }
.input-shell svg { width:19px; height:19px; color:#748078; }
.input-shell input { min-height:48px; padding:0; border:0; outline:0 !important; background:transparent; box-shadow:none !important; }
.login-content #loginError { min-height:18px; margin:8px 0 0; font-size:12px; }
.login-content .primary-action { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; min-height:52px; }
.login-content .primary-action svg { width:18px; height:18px; }
.login-help { display:flex; align-items:center; justify-content:center; gap:7px; margin:22px 0 0; color:#7a847e; font-size:11px; }
.login-help svg { width:15px; height:15px; color:#668f25; }

.management-module { max-width:1180px; margin:0 auto; }
.management-module:not(.preop-module) { padding:24px; border-radius:8px; background:#ffffff; box-shadow:0 8px 30px rgba(37,58,47,.055); }
.search-field { position:relative; max-width:100%; }
.search-field input { padding-left:16px; background:#f7f9f7; border-color:transparent; }
.module-header .compact-action { min-height:42px; }
.directory-row { grid-template-columns:46px minmax(0,1.5fr) minmax(0,1fr) auto; }
.directory-row:hover { background:#fafcf9; }
.driver-avatar { width:42px; height:42px; }
.fleet-toolbar { border-top:1px solid #e8ede9; }
.vehicle-editor { overflow:hidden; border:1px solid #e3e9e5; border-radius:8px; }
.vehicle-fields { background:#fff; }
.vehicle-fields .form-field input,
.vehicle-fields .form-field select { background:#f8faf8; }
.record-row { min-height:72px; }
.record-number { color:#587d21; }

dialog { padding:28px; border:0; border-radius:8px; box-shadow:0 26px 90px rgba(20,35,27,.24); }
dialog h3 { margin:0 0 8px; font-size:23px; }
.dialog-section-title { margin:18px 0 4px; color:#6b766f; font-size:11px; font-weight:800; text-transform:uppercase; }
#driverDialog { width:min(720px,calc(100% - 24px)); }
.license-list { display:grid; gap:10px; }
.license-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px; gap:10px; align-items:end; }
.license-remove { display:grid; place-items:center; width:40px; height:44px; border:0; border-radius:50%; background:#f6eeee; color:#a34444; cursor:pointer; }
.license-remove svg,.add-license-button svg { width:18px; height:18px; }
.add-license-button { display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 2px; border:0; background:transparent; color:#527a22; font-weight:800; cursor:pointer; }
@media (max-width:560px) { .license-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px; gap:7px; } .license-remove { width:36px; height:42px; } }
dialog .form-field input,
dialog .form-field select,
dialog .form-field textarea { background:#f7f9f7; }
dialog::backdrop { background:rgba(19,31,25,.36); backdrop-filter:blur(4px); }

.shift-card { position:relative; overflow:hidden; min-height:260px; padding-right:min(42%,290px); background:linear-gradient(145deg,#f0f7df,#e2f0c8); color:#1d2b23; }
.shift-card::after { content:""; position:absolute; right:-70px; bottom:-90px; width:330px; height:330px; border-radius:50%; background:rgba(255,255,255,.48); }
.shift-character { position:absolute; z-index:1; right:-34px; bottom:-18px; width:min(42%,300px); max-height:94%; object-fit:contain; object-position:right bottom; }
.shift-card > *:not(.shift-character) { position:relative; z-index:2; }
.shift-card .form-field select { background:#ffffffd9; }
.action-stack { gap:0; }
.driver-action { display:grid; grid-template-columns:1fr auto; min-height:74px; padding:15px 4px; border-width:0 0 1px; border-radius:0; background:#fff; }
.driver-action::after { content:"\203A"; grid-column:2; grid-row:1 / span 2; align-self:center; color:#9ba49e; font-size:28px; font-weight:300; }

@media (max-width:760px) {
    .shell:not(.is-inside) { display:block; padding:0; background:#fff; }
    .login-panel { display:flex; width:100%; min-height:100dvh; flex-direction:column; border-radius:0; box-shadow:none; }
    .login-visual { flex:0 0 clamp(225px,35dvh,320px); }
    .login-visual-copy { top:26px; left:24px; right:24px; }
    .login-visual-copy h2 { max-width:280px; margin-top:12px; font-size:29px; }
    .login-visual-copy p { display:none; }
    .login-visual > img { right:-8%; bottom:-13%; width:76%; max-height:84%; }
    .login-content { flex:1; justify-content:flex-start; padding:24px 24px calc(28px + env(safe-area-inset-bottom)); }
    .login-content .brand-lockup { position:absolute; z-index:3; top:20px; right:20px; margin:0; }
    .login-content .brand-lockup .brand-mark { width:38px; height:38px; }
    .login-content .brand-lockup div { display:none; }
    .login-heading h1 { font-size:27px; }
    .login-heading > p:last-child { margin-bottom:14px; }
    .login-help { margin-top:16px; }
}

@media (max-width:640px) {
    .management-module:not(.preop-module) { margin:0 -18px; padding:18px; border-radius:0; box-shadow:none; }
    .module-header { align-items:center; }
    .module-header h3 { font-size:24px; }
    .module-header .compact-action { min-width:auto; padding:8px 12px; }
    .directory-row { grid-template-columns:42px minmax(0,1fr) auto; }
    .directory-row > div:nth-child(3) { display:none; }
    .vehicle-editor { margin:0 -18px; border-width:1px 0; border-radius:0; }
    .vehicle-fields { padding-left:18px; padding-right:18px; }
    .shift-card { min-height:250px; margin:0; padding:20px 38% 20px 20px; border:0; border-radius:8px; }
    .shift-character { right:-42px; width:48%; }
    .driver-view .mobile-card:not(.shift-card) { padding:18px 0; }
    dialog { width:calc(100% - 20px); max-height:calc(100dvh - 20px); padding:22px; }
}

/* Native-app inspired shell: clean planes, quiet depth and icon-led navigation. */
.nav-item { display:flex; align-items:center; gap:12px; }
.nav-item svg { width:19px; height:19px; flex:0 0 19px; }
.side-nav > .ghost-action { display:flex; align-items:center; justify-content:center; gap:9px; }
.side-nav > .ghost-action svg { width:18px; height:18px; }
.status-pill { min-height:36px; padding:0 12px; font-size:12px; }
.primary-action { min-height:48px; border-radius:8px; font-size:14px; }
.ghost-action { border-radius:8px; }

@media (max-width:980px) {
    .workspace { padding-bottom:86px; }
    .bottom-nav {
        left:0;
        right:0;
        bottom:0;
        min-height:74px;
        padding:8px max(10px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
        gap:0;
        border-width:1px 0 0;
        border-radius:0;
        box-shadow:0 -5px 22px rgba(33,58,46,.07);
        backdrop-filter:blur(18px);
    }
    .bottom-item {
        display:flex;
        min-width:0;
        min-height:56px;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        padding:4px 2px;
        border-radius:0;
        font-size:10px;
        font-weight:550;
        line-height:1;
    }
    .bottom-item svg { width:23px; height:23px; stroke-width:1.75; }
    .bottom-item.active { color:#628b24; background:transparent; box-shadow:none; }
    .bottom-item.active svg { stroke-width:2.35; }
}

@media (max-width:640px) {
    .shell,.workspace { background:#ffffff; }
    .workspace { padding:14px 18px 88px; }
    .topbar { margin-bottom:14px; }
    .topbar h2 { font-size:26px; font-weight:750; }
    .topbar .eyebrow { display:none; }
    .topbar .status-pill { width:38px; min-height:38px; padding:0; justify-content:center; border:0; background:#f3f4f2; box-shadow:none; }
    .topbar .status-pill #connectionState { display:none; }
    .topbar .status-pill .pulse { width:9px; height:9px; box-shadow:0 0 0 5px rgba(141,187,50,.13); }

    .hero-surface { margin:0 -18px 18px; min-height:270px; border:0; border-radius:0; }
    .hero-overlay { left:18px; right:18px; bottom:16px; padding:15px 16px; border:0; border-radius:8px; background:rgba(255,255,255,.92); color:#18231e; box-shadow:0 8px 26px rgba(33,58,46,.13); backdrop-filter:blur(12px); }
    .hero-overlay h3 { font-size:24px; }
    .hero-overlay p:last-child { margin:5px 0 0; color:#647169; font-size:13px; line-height:1.4; }

    .content-grid,.metrics-row { gap:12px; }
    .metric-card,.panel,.mobile-card { box-shadow:none; }
    .metric-card { padding:15px 14px; background:#f6f8f5; }
    .metric-card::before { display:none; }
    .panel,.mobile-card { padding:18px 0; border-bottom:1px solid #e8ede9; border-radius:0; }
    .module-header { padding-bottom:10px; }

    .preop-module { margin:-2px -18px 0; }
    .preop-identity { padding:4px 18px 8px; }
    .preop-form { border-radius:0; box-shadow:none; }
    .preop-visual { background:#f1f5f1; }
    .preop-question { padding-left:18px; padding-right:18px; }
    .condition-option,.fuel-option { background:#ffffff; box-shadow:inset 0 0 0 1px #e0e6e2; }
    .condition-symbol,.condition-face { border-width:1.5px; }
    .preop-actions { padding-left:18px; padding-right:18px; }
    .preop-actions .compact-action { min-height:42px; border-radius:8px; }

    .directory-row,.record-row,.vehicle-row { padding-left:2px; padding-right:2px; }
    .records-toolbar,.fleet-toolbar { padding-left:0; padding-right:0; }
    .toast { bottom:88px; }
}

/* Editorial hierarchy: fewer boxes, clearer groups and a calmer reading rhythm. */
body { line-height:1.45; }
h1,h2,h3,h4,.eyebrow { letter-spacing:0; }
.eyebrow { margin-bottom:3px; font-size:11px; font-weight:700; text-transform:none; }
.topbar { min-height:48px; margin-bottom:18px; }
.topbar h2 { font-size:22px; line-height:1.15; }
.module-header { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid #e5ebe7; }
.module-header h3 { font-size:20px; line-height:1.2; }

.metric-card,
.panel,
.mobile-card { border:0; border-radius:8px; box-shadow:0 6px 22px rgba(33,58,46,.055); }
.metric-card { position:relative; padding:17px 16px 15px; overflow:hidden; }
.metric-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:#8dbb32; }
.metric-card strong { margin:5px 0 2px; }
.panel,.mobile-card { padding:20px; }

.route-list,
.driver-list,
.alert-list { gap:0; }
.route-card,
.driver-card,
.alert-item { border:0; border-bottom:1px solid #e6ece8; border-radius:0; box-shadow:none; }
.route-card:last-child,
.driver-card:last-child,
.alert-item:last-child { border-bottom:0; }
.route-card { padding:16px 4px; }
.driver-card,.alert-item { padding:14px 4px; }
.alert-item { padding-left:12px; border-left:3px solid #cf514c; }
.tag { border:0; border-radius:4px; padding:5px 8px; }

.preop-identity { display:flex; align-items:center; gap:0; margin-bottom:12px; background:transparent; border:0; border-radius:0; }
.preop-identity > div { flex:1; position:relative; padding:6px 18px 6px 0; background:transparent; }
.preop-identity > div + div { padding-left:18px; }
.preop-identity > div + div::before { content:""; position:absolute; left:0; top:7px; bottom:7px; width:1px; background:#dbe4de; }
.preop-identity span { margin-bottom:1px; font-size:10px; font-weight:600; text-transform:none; }
.preop-identity strong { font-size:13px; font-weight:650; }
.preop-form { border:0; border-radius:8px; box-shadow:0 8px 28px rgba(33,58,46,.07); }
.preop-stage { min-height:490px; }
.preop-question { padding:30px clamp(24px,3vw,38px); }
.preop-question h3 { font-size:26px; line-height:1.2; }
.preop-question > p:not(.eyebrow) { max-width:42ch; margin:7px 0 20px; }
.condition-options,.fuel-options { gap:10px; }
.condition-option,.fuel-option { border:0; border-radius:8px; box-shadow:inset 0 0 0 1px #dbe3de; }
.condition-option.selected,
.fuel-option.selected { box-shadow:inset 0 0 0 2px currentColor,0 6px 16px rgba(33,58,46,.08); }
.preop-actions { border-top:1px solid #edf1ee; }

.directory-row { padding:16px 4px; }
.vehicle-row,.record-row { border-width:0 0 1px; border-radius:0; box-shadow:none; }
.vehicle-row.selected { border-radius:6px; border:1px solid #b9d184; }
.records-list,.vehicle-list { gap:0; }
.record-answers { border:0; gap:1px; }
.record-answer { padding:13px 4px; border-bottom:1px solid #e6ece8; }

@media (max-width:640px) {
    .topbar { min-height:40px; margin-bottom:8px; }
    .panel,.mobile-card { padding:16px; }
    .preop-identity { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 62px; padding:0 12px; }
    .preop-identity > div { padding:6px 9px 6px 0; }
    .preop-identity > div + div { padding-left:9px; }
    .preop-identity > div + div::before { top:8px; bottom:8px; }
    .preop-stage { min-height:0; }
    .preop-question { padding:13px 16px 10px; }
    .preop-question h3 { font-size:19px; }
    .preop-question > p:not(.eyebrow) { margin:4px 0 10px; }
    .condition-options,.fuel-options { gap:6px; }
    .preop-actions { border-top:0; }
}

/* Final V5 component precedence. */
.hero-surface { background:linear-gradient(145deg,#eef5ef,#dcebe1); border-color:#d9e4dc; }
.hero-overlay { border:0; background:rgba(255,255,255,.91); color:#18231e; box-shadow:0 10px 30px rgba(37,58,47,.12); }
.hero-overlay p:last-child { color:#647169; }
.driver-view .shift-card { position:relative; overflow:hidden; min-height:260px; padding:22px min(42%,290px) 22px 22px; border:0; border-radius:8px; background:linear-gradient(145deg,#f0f7df,#e2f0c8); color:#1d2b23; }
.driver-view .shift-card::after { content:""; position:absolute; right:-70px; bottom:-90px; width:330px; height:330px; border-radius:50%; background:rgba(255,255,255,.48); }
.driver-view .shift-character { position:absolute; z-index:1; right:-34px; bottom:-18px; width:min(42%,300px); max-height:94%; object-fit:contain; object-position:right bottom; }
.driver-view .shift-card > *:not(.shift-character) { position:relative; z-index:2; }

@media (max-width:640px) {
    .driver-view .shift-card { min-height:250px; padding:20px 38% 20px 20px; }
    .driver-view .shift-character { right:-42px; width:48%; }
}

/* Illustrated product language ------------------------------------------------ */
#routeCanvas,.fallback-orbit,#vehicleCanvas,#vehicleFallback,.viewer-controls,#preopCanvas,#preopVisualFallback { display:none !important; }
.hero-surface { min-height:350px; overflow:hidden; background:linear-gradient(145deg,#eef7df,#dcefc4); }
.hero-fleet-art { position:absolute; z-index:1; right:-2%; bottom:-13%; width:min(68%,790px); max-height:112%; object-fit:contain; object-position:right bottom; }
.hero-overlay { z-index:2; width:min(390px,calc(100% - 36px)); }

.team-intro,.records-intro { position:relative; display:flex; min-height:210px; align-items:center; overflow:hidden; margin-bottom:22px; padding:28px 42% 28px 28px; border-radius:8px; background:linear-gradient(145deg,#f0f7df,#e4f1ce); }
.team-intro::after,.records-intro::after { content:""; position:absolute; right:-80px; bottom:-130px; width:380px; height:380px; border-radius:50%; background:rgba(255,255,255,.5); }
.team-intro > div,.records-intro > div { position:relative; z-index:2; }
.team-intro span,.records-kicker { color:#5d8124; font-size:12px; font-weight:750; }
.team-intro h4,.records-intro h4 { max-width:420px; margin:8px 0; font-size:24px; line-height:1.15; }
.team-intro p,.records-intro p { max-width:440px; margin:0; color:#647169; }
.team-intro img,.records-intro img { position:absolute; z-index:1; right:-1%; bottom:-19%; width:43%; height:128%; object-fit:contain; object-position:center bottom; }
.records-intro { background:linear-gradient(145deg,#eaf6f2,#d9eee7); }
.records-intro img { right:0; bottom:-11%; width:46%; height:120%; }

.vehicle-visual { min-height:540px; overflow:hidden; background:linear-gradient(145deg,#eff7e4,#dfeecb); }
.vehicle-visual::after { content:""; position:absolute; right:-15%; bottom:-25%; width:78%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.48); }
.vehicle-fleet-art { position:absolute; z-index:1; inset:auto -15% -4% -8%; width:120%; height:82%; object-fit:contain; object-position:center bottom; }
.vehicle-caption { z-index:3; }

.preop-visual { background:linear-gradient(145deg,#eff7e3,#dcefc4); }
.preop-visual::after { content:""; position:absolute; right:-20%; bottom:-24%; width:80%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.46); }
.preop-safety-art { position:absolute; z-index:1; inset:3% 1% 0; width:98%; height:97%; object-fit:contain; object-position:center bottom; }
.preop-logo { z-index:3; }

.records-toolbar { padding:2px 0 16px; }
.records-list:empty::before,.directory-list:empty::before,.vehicle-list:empty::before { content:"Todavia no hay informacion para mostrar"; display:block; padding:36px 0; color:#748078; text-align:center; }

@media (max-width:980px) {
    .hero-surface { min-height:330px; }
    .hero-fleet-art { right:-12%; width:76%; }
    .team-intro,.records-intro { padding-right:45%; }
}

@media (max-width:640px) {
    .hero-surface { min-height:330px; background:linear-gradient(160deg,#f0f8e4,#dcefc4); }
    .hero-fleet-art { right:-28%; bottom:2%; width:104%; max-height:76%; }
    .hero-overlay { bottom:14px; }

    .team-intro,.records-intro { min-height:220px; margin:0 0 18px; padding:22px 44% 22px 20px; }
    .team-intro h4,.records-intro h4 { font-size:21px; }
    .team-intro p,.records-intro p { font-size:12px; }
    .team-intro img { right:-11%; bottom:-10%; width:57%; height:105%; }
    .records-intro img { right:-13%; bottom:-4%; width:62%; height:102%; }

    .vehicle-visual { height:300px; min-height:300px; margin:0; }
    .vehicle-fleet-art { inset:auto -19% -3% -15%; width:132%; height:83%; }
    .vehicle-caption { top:18px; left:18px; }

    .shell[data-role="driver"][data-section="inspections"] .preop-visual { background:linear-gradient(155deg,#f1f8e8,#deefca); }
    .shell[data-role="driver"][data-section="inspections"] .preop-safety-art { inset:2% -3% 0; width:106%; height:98%; }
    .preop-logo { width:34px; height:34px; }
}

/* Driver home and guided inspection refinement ------------------------------ */
.shell[data-role="driver"][data-section="overview"] .hero-surface { display:none; }
.driver-home-heading { grid-column:1 / -1; display:flex; align-items:end; justify-content:space-between; gap:18px; padding:2px 2px 6px; }
.driver-home-heading h3 { margin:0; font-size:28px; line-height:1.15; }
.driver-home-heading p:last-child { margin:6px 0 0; color:#6b766f; }
.driver-day { display:flex; align-items:center; gap:7px; padding:9px 12px; border-radius:999px; background:#fff; color:#4d5d54; box-shadow:0 5px 18px rgba(37,58,47,.07); font-size:12px; font-weight:700; }
.driver-day svg { width:17px; height:17px; color:#6d942d; }

.driver-view .action-stack { align-content:start; padding:20px; border:0; border-radius:8px; background:#fff; box-shadow:0 8px 28px rgba(37,58,47,.06); }
.driver-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; }
.driver-section-title span,.driver-section-title strong { display:block; }
.driver-section-title span { color:#77817b; font-size:11px; }
.driver-section-title strong { margin-top:2px; font-size:16px; }
.driver-section-title > svg { width:22px; height:22px; color:#739b31; }
.driver-view .driver-action { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; min-height:70px; padding:10px 3px; border:0; border-top:1px solid #edf1ee; text-align:left; }
.driver-view .driver-action::after { content:"\203A"; grid-column:3; grid-row:1; color:#98a29c; font-size:27px; }
.driver-action-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#f0f5e7; color:#668f25; }
.driver-action-icon svg { width:19px; height:19px; }
.driver-view .driver-action strong,.driver-view .driver-action small { display:block; }
.driver-view .driver-action strong { margin:0; color:#1d2a23; font-size:14px; }
.driver-view .driver-action small { margin-top:2px; color:#768078; font-size:11px; }
.driver-view .driver-action.active { background:transparent; }
.driver-view .driver-action.active .driver-action-icon { background:#8dbb32; color:#14200d; }

.section-icon,.next-stop-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#eef6df; color:#648b28; }
.section-icon svg,.next-stop-icon svg { width:20px; height:20px; }
.driver-view .check-row { min-height:52px; margin:0; padding:0 2px; border:0; border-top:1px solid #edf1ee; border-radius:0; background:#fff; }
.driver-view .check-row input { width:20px; height:20px; }
.next-stop-card { display:grid; grid-template-columns:48px 1fr; align-content:start; gap:12px; }
.next-stop-card .next-stop-icon { grid-row:1; }
.next-stop-card h3 { margin:1px 0 2px; font-size:20px; }
.next-stop-card .body-copy { margin:0; }
.next-stop-card .primary-action { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:8px; }
.next-stop-card .primary-action svg { width:18px; height:18px; }

.preop-actions .compact-action { display:flex; align-items:center; justify-content:center; gap:7px; }
.preop-actions .compact-action svg { width:17px; height:17px; }
.preop-progress { height:6px; }
.preop-question .eyebrow { display:inline-flex; width:max-content; min-height:25px; align-items:center; padding:0 9px; border-radius:999px; background:#eef6df; color:#587c20; }
.preop-question h3 { margin-top:9px; }
.condition-option,.fuel-option { position:relative; overflow:hidden; }
.condition-option.selected::after,.fuel-option.selected::after { content:""; position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:currentColor; }

@media (max-width:640px) {
    .shell[data-role="driver"][data-section="overview"] .workspace { background:#f7f9f6; }
    .shell[data-role="driver"][data-section="overview"] .topbar { margin-bottom:4px; }
    .driver-home-heading { align-items:center; padding:8px 0 4px; }
    .driver-home-heading h3 { font-size:23px; }
    .driver-home-heading p:last-child { max-width:270px; font-size:12px; }
    .driver-day { padding:8px; }
    .driver-day > span { display:none; }
    .shell[data-role="driver"] .driver-view { gap:14px; }
    .driver-view .shift-card { min-height:270px; padding:22px 41% 20px 20px; }
    .driver-view .shift-card h3 { max-width:210px; font-size:24px; }
    .driver-view .shift-character { right:-39px; bottom:-8px; width:53%; max-height:92%; }
    .driver-view .action-stack { padding:17px 16px; border-radius:8px; box-shadow:none; }
    .driver-view .mobile-card:not(.shift-card) { padding:17px 16px; border:0; border-radius:8px; background:#fff; }
    .driver-view .check-row { padding:0; }
    .next-stop-card { grid-template-columns:44px 1fr; }

    .shell[data-role="driver"][data-section="inspections"] .preop-form { background:#fff; }
    .shell[data-role="driver"][data-section="inspections"] .preop-stage { grid-template-rows:minmax(190px,1fr) minmax(190px,1fr); }
    .shell[data-role="driver"][data-section="inspections"] .preop-visual { border-bottom:0; }
    .shell[data-role="driver"][data-section="inspections"] .preop-question { margin-top:-1px; padding:14px 18px 10px; border-top:1px solid #edf1ee; background:#fff; }
    .shell[data-role="driver"][data-section="inspections"] .condition-option,
    .shell[data-role="driver"][data-section="inspections"] .fuel-option { min-height:86px; border-radius:8px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-actions { padding-left:18px; padding-right:18px; box-shadow:0 -8px 24px rgba(37,58,47,.055); }
}

/* Premium guided inspection -------------------------------------------------- */
.preop-app-head { display:flex; align-items:center; gap:12px; min-height:66px; padding:12px 18px; background:#fff; }
.preop-app-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:50%; background:#edf6dd; color:#628b24; }
.preop-app-icon svg { width:21px; height:21px; }
.preop-app-head small,.preop-app-head strong { display:block; }
.preop-app-head small { color:#758078; font-size:10px; }
.preop-app-head strong { margin-top:1px; color:#1c2922; font-size:14px; }
.preop-step-count { margin-left:auto; padding:6px 9px; border-radius:999px; background:#f3f6f2; color:#526159; font-size:11px; font-weight:750; white-space:nowrap; }
.preop-stage { border-top:1px solid #edf1ee; }
.preop-visual { isolation:isolate; }
.preop-visual::before { content:"Inspeccion segura"; position:absolute; z-index:3; right:18px; top:18px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.84); color:#587b21; font-size:10px; font-weight:750; box-shadow:0 5px 16px rgba(42,65,53,.08); backdrop-filter:blur(8px); }
.preop-safety-art { filter:drop-shadow(0 18px 26px rgba(51,77,62,.12)); }
.preop-question { position:relative; }
.preop-question::before { content:""; position:absolute; left:0; top:28px; bottom:28px; width:3px; border-radius:0 3px 3px 0; background:#8dbb32; }
.preop-odometer input { font-size:18px; font-weight:700; }
.vehicle-summary { padding:12px 14px; border:0; border-radius:8px; background:#f5f8f3; }
.condition-option,.fuel-option { transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.condition-option:active,.fuel-option:active { transform:scale(.98); }
.preop-actions { min-height:62px; }
.preop-actions > span:empty { display:none; }

@media (max-width:640px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-module { background:#fff; }
    .shell[data-role="driver"][data-section="inspections"] .preop-identity { flex:0 0 48px; padding:3px 18px 7px; background:#fff; }
    .shell[data-role="driver"][data-section="inspections"] .preop-identity > div { padding-top:5px; padding-bottom:5px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-form { border-radius:0; }
    .shell[data-role="driver"][data-section="inspections"] .preop-app-head { flex:0 0 55px; min-height:55px; padding:7px 18px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-app-icon { width:38px; height:38px; flex-basis:38px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-progress { flex:0 0 5px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-stage { grid-template-rows:minmax(178px,1.06fr) minmax(187px,.94fr); border-top:0; }
    .shell[data-role="driver"][data-section="inspections"] .preop-visual::before { top:10px; right:12px; padding:5px 8px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-safety-art { inset:1% 0 0; width:100%; height:99%; }
    .shell[data-role="driver"][data-section="inspections"] .preop-question { padding:12px 18px 9px; border-top:0; box-shadow:0 -10px 28px rgba(45,69,56,.06); }
    .shell[data-role="driver"][data-section="inspections"] .preop-question::before { display:none; }
    .shell[data-role="driver"][data-section="inspections"] .preop-question .eyebrow { min-height:22px; padding:0 8px; font-size:9px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-question h3 { margin-top:6px; font-size:20px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-question > p:not(.eyebrow) { margin:4px 0 9px; }
    .shell[data-role="driver"][data-section="inspections"] .vehicle-summary { margin-top:7px; padding:8px 11px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-actions { flex:0 0 54px; min-height:54px; gap:10px; padding-top:6px; padding-bottom:6px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-actions .compact-action { flex:1; max-width:none; min-height:42px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-actions .ghost-action[hidden] + .preop-step-count { margin-left:0; }
}

@media (max-width:640px) and (max-height:700px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-stage { grid-template-rows:minmax(145px,.85fr) minmax(174px,1fr); }
    .shell[data-role="driver"][data-section="inspections"] .preop-visual::before { display:none; }
}

/* Per-question floating 3D object showcase. */
.preop-visual { background:#ffffff; }
#preopCanvas { display:block !important; z-index:2; }
.preop-safety-art { display:none !important; }
.no-three #preopCanvas { display:none !important; }
.no-three .preop-safety-art { display:block !important; }
.preop-visual::after { content:""; position:absolute; z-index:1; left:50%; bottom:12%; width:42%; height:7%; transform:translateX(-50%); border-radius:50%; background:rgba(44,61,52,.15); filter:blur(12px); }
.preop-visual::before { z-index:4; content:"Vista interactiva"; background:#f4f7f3; color:#607069; box-shadow:none; }
.preop-logo { z-index:4; width:44px; height:44px; box-shadow:0 7px 20px rgba(60,86,46,.13); }

@media (max-width:640px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-visual { background:#fff; }
    .shell[data-role="driver"][data-section="inspections"] #preopCanvas { inset:0; width:100%; height:100%; }
    .shell[data-role="driver"][data-section="inspections"] .preop-visual::after { bottom:10%; width:48%; height:7%; filter:blur(10px); }
    .shell[data-role="driver"][data-section="inspections"] .preop-logo { top:10px; left:12px; width:34px; height:34px; }
}

/* Seamless inspection canvas: one continuous visual surface. */
.preop-module { position:relative; }
.preop-identity { margin-bottom:0; padding:9px 18px; background:#f2f7e9; }
.preop-identity > div { background:transparent; }
.preop-form { overflow:hidden; border:0; background:linear-gradient(135deg,#f2f8e8 0%,#e6f2d5 52%,#edf7e7 100%); box-shadow:none; }
.preop-app-head { background:transparent; }
.preop-app-icon { background:rgba(255,255,255,.68); box-shadow:0 6px 18px rgba(64,88,51,.08); }
.preop-step-count { background:rgba(255,255,255,.68); }
.preop-progress { background:rgba(88,112,73,.11); }
.preop-stage { border:0; background:transparent; }
.preop-visual { background:transparent; }
.preop-question { background:transparent; }
.preop-question::before { background:#759f31; }
.preop-visual::before { background:rgba(255,255,255,.64); }
.preop-logo { border:4px solid rgba(255,255,255,.7); }
.vehicle-summary { background:rgba(255,255,255,.58); }
.preop-question .eyebrow { background:rgba(255,255,255,.67); }
.condition-option,.fuel-option { background:rgba(255,255,255,.72); box-shadow:0 7px 20px rgba(54,77,43,.07); backdrop-filter:blur(8px); }
.condition-option:hover,.fuel-option:hover { background:#fff; }
.preop-result { background:rgba(255,255,255,.63); }
.preop-question .form-field input,
.preop-question .form-field textarea { background:rgba(255,255,255,.78); border-color:rgba(107,131,94,.22); }
.preop-actions { border:0; background:transparent !important; box-shadow:none; }
.preop-actions .ghost-action { background:rgba(255,255,255,.65); border-color:rgba(85,108,74,.18); }

@media (max-width:640px) {
    .shell[data-role="driver"][data-section="inspections"] .workspace { background:#f2f7e9; }
    .shell[data-role="driver"][data-section="inspections"] .topbar { background:#f2f7e9; }
    .shell[data-role="driver"][data-section="inspections"] .preop-module,
    .shell[data-role="driver"][data-section="inspections"] .preop-identity,
    .shell[data-role="driver"][data-section="inspections"] .preop-form,
    .shell[data-role="driver"][data-section="inspections"] .preop-app-head,
    .shell[data-role="driver"][data-section="inspections"] .preop-visual,
    .shell[data-role="driver"][data-section="inspections"] .preop-question { background:transparent; }
    .shell[data-role="driver"][data-section="inspections"] .preop-module { background:linear-gradient(155deg,#f3f8eb 0%,#e5f1d4 60%,#edf7e7 100%); }
    .shell[data-role="driver"][data-section="inspections"] .preop-identity { border:0; }
    .shell[data-role="driver"][data-section="inspections"] .preop-stage { background:transparent; }
.shell[data-role="driver"][data-section="inspections"] .preop-question { border:0; box-shadow:none; }
    .shell[data-role="driver"][data-section="inspections"] .preop-actions { box-shadow:none; }
    .shell[data-role="driver"][data-section="inspections"] .condition-option,
.shell[data-role="driver"][data-section="inspections"] .fuel-option { background:rgba(255,255,255,.74); box-shadow:0 6px 16px rgba(55,78,44,.07); }

/* The fleet editor uses the interactive model; artwork is only a no-WebGL fallback. */
body.vehicle-three-ready #vehicleCanvas { display:block !important; }
body.vehicle-three-ready .viewer-controls { display:flex !important; }
body.vehicle-three-ready .vehicle-fleet-art { display:none; }
.departure-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.task-field { margin-top:8px; }
.task-field textarea { min-height:58px; resize:none; }
.binary-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.binary-options button { min-height:54px; border:1px solid #d9e2db; border-radius:8px; background:rgba(255,255,255,.78); color:#536159; font-weight:800; cursor:pointer; }
.binary-options button.selected { border-color:#7da92d; background:#e7f2d3; color:#294314; box-shadow:0 6px 16px rgba(83,120,38,.1); }
.health-detail { margin-top:9px; }
.fuel-options { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media (max-width:560px) {
    .fuel-options { gap:5px !important; }
    .fuel-option { min-width:0; padding:7px 2px !important; }
    .fuel-option strong { font-size:10px; }
    .fuel-option .mini-tank { transform:scale(.82); }
    .departure-fields { gap:7px; }
}
.wellness-form { display:grid; gap:7px; }
.wellness-task textarea { min-height:44px; resize:none; }
.wellness-row { display:grid; grid-template-columns:minmax(0,1fr) 116px; align-items:center; gap:8px; }
.wellness-row > span { color:#3f4c44; font-size:12px; font-weight:700; }
.wellness-row .binary-options { gap:5px; }
.wellness-row .binary-options button { min-height:34px; padding:4px; }
.wellness-detail input { min-height:34px !important; padding-top:6px !important; padding-bottom:6px !important; }
@media (max-width:760px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-combined-step .preop-stage { grid-template-rows:76px minmax(0,1fr); }
    .shell[data-role="driver"][data-section="inspections"] .preop-combined-step .preop-question { padding:7px 18px 5px; }
    .preop-combined-step .preop-question .eyebrow,
    .preop-combined-step .preop-question > p:not(.eyebrow) { display:none; }
    .preop-combined-step .preop-question h3 { margin:0 0 5px; font-size:17px; }
    .preop-combined-step .wellness-form { gap:5px; }
    .preop-combined-step .wellness-task { font-size:10px; }
    .preop-combined-step .wellness-task textarea { min-height:38px; padding:7px 10px; }
}

/* Clean white inspection canvas keeps the lime vehicles and status colors legible. */
.shell[data-role="driver"][data-section="inspections"] .workspace,
.shell[data-role="driver"][data-section="inspections"] .topbar,
.shell[data-role="driver"][data-section="inspections"] .preop-module,
.shell[data-role="driver"][data-section="inspections"] .preop-identity,
.shell[data-role="driver"][data-section="inspections"] .preop-form,
.shell[data-role="driver"][data-section="inspections"] .preop-app-head,
.shell[data-role="driver"][data-section="inspections"] .preop-stage,
.shell[data-role="driver"][data-section="inspections"] .preop-visual,
.shell[data-role="driver"][data-section="inspections"] .preop-question,
.shell[data-role="driver"][data-section="inspections"] .preop-actions { background:#fff !important; }
.shell[data-role="driver"][data-section="inspections"] .preop-visual::after { background:rgba(36,51,46,.14); }
.shell[data-role="driver"][data-section="inspections"] .condition-option,
.shell[data-role="driver"][data-section="inspections"] .fuel-option,
.shell[data-role="driver"][data-section="inspections"] .binary-options button,
.shell[data-role="driver"][data-section="inspections"] .vehicle-summary { background:#f8faf8; backdrop-filter:none; }
.roadkit-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.roadkit-item { display:grid; justify-items:center; align-content:center; gap:2px; min-width:0; min-height:62px; padding:5px 2px; border:1px solid #e1e7e3; border-radius:8px; background:#f8faf8; color:#5e6a63; cursor:pointer; }
.roadkit-item svg { width:18px; height:18px; }
.roadkit-item span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:800; }
.roadkit-item small { font-size:8px; color:#89928d; }
.roadkit-item.present { border-color:#8dbb32; background:#edf6df; color:#527a22; }
.roadkit-item.missing { border-color:#e5aaa6; background:#fff1f0; color:#b14c47; }
.roadkit-item.novelty { border-color:#e7c66b; background:#fff8df; color:#9a6b08; }
.roadkit-item.present small { color:#628b29; }
.roadkit-item.missing small { color:#bd5b55; }
.roadkit-item.novelty small { color:#9a6b08; }
.roadkit-note { margin-top:6px; }
.roadkit-note input { min-height:36px !important; padding-top:6px !important; padding-bottom:6px !important; }
@media (max-width:760px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-roadkit-step .preop-stage { grid-template-rows:minmax(170px,.9fr) minmax(205px,1.1fr); }
    .shell[data-role="driver"][data-section="inspections"] .preop-roadkit-step .preop-visual canvas { transform:scale(1.3); transform-origin:center; }
    .shell[data-role="driver"][data-section="inspections"] .preop-roadkit-step .preop-question { padding:8px 14px 6px; }
    .preop-roadkit-step .preop-question .eyebrow,
    .preop-roadkit-step .preop-question > p:not(.eyebrow) { display:none; }
    .preop-roadkit-step .preop-question h3 { margin:0 0 6px; font-size:17px; }
}
@media (max-width:430px) {
    .roadkit-grid { gap:4px; }
    .roadkit-item { min-height:56px; }
    .roadkit-item svg { width:16px; height:16px; }
    .roadkit-item span { font-size:8px; }
}
.tool-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.tool-check { display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:8px; min-height:62px; padding:8px 10px; border:1px solid #e1e7e3; border-radius:8px; background:#f8faf8; color:#5e6a63; text-align:left; cursor:pointer; }
.tool-check svg { grid-row:1 / span 2; width:25px; height:25px; }
.tool-check span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:800; }
.tool-check small { color:#89928d; font-size:9px; }
.tool-check.present { border-color:#8dbb32; background:#edf6df; color:#527a22; }
.tool-check.missing { border-color:#e5aaa6; background:#fff1f0; color:#b14c47; }
.tool-check.novelty,.firstaid-item.novelty { border-color:#e7c66b; background:#fff8df; color:#9a6b08; }
.item-novelty-note { margin-top:6px; }
.item-novelty-note input { min-height:34px !important; padding-top:5px !important; padding-bottom:5px !important; }
.firstaid-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.firstaid-item { display:grid; justify-items:center; align-content:center; gap:2px; min-width:0; min-height:60px; padding:5px 2px; border:1px solid #e1e7e3; border-radius:8px; background:#f8faf8; color:#5e6a63; cursor:pointer; }
.firstaid-item svg { width:18px; height:18px; }
.firstaid-item span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; font-weight:800; }
.firstaid-item small { color:#89928d; font-size:8px; }
.firstaid-item.present { border-color:#8dbb32; background:#edf6df; color:#527a22; }
.firstaid-item.missing { border-color:#e5aaa6; background:#fff1f0; color:#b14c47; }
.electrical-list { display:grid; gap:4px; }
.electrical-row { display:grid; grid-template-columns:minmax(0,1fr) 174px; align-items:center; gap:8px; min-height:34px; padding:3px 5px; border-bottom:1px solid #edf1ee; }
.electrical-name { display:flex; align-items:center; gap:7px; min-width:0; color:#46534b; }
.electrical-name svg { flex:0 0 16px; width:16px; height:16px; color:#6f942f; }
.electrical-name b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.electrical-options { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.electrical-options button { min-height:28px; padding:3px; border:1px solid #dfe6e1; border-radius:6px; background:#f8faf8; color:#68736c; font-size:9px; font-weight:800; cursor:pointer; }
.electrical-options .good.selected { border-color:#8dbb32; background:#edf6df; color:#527a22; }
.electrical-options .bad.selected { border-color:#e5aaa6; background:#fff1f0; color:#b14c47; }
.electrical-options .na.selected { border-color:#aeb8b2; background:#edf0ee; color:#4e5953; }
.electrical-hero { display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:10px; border-radius:16px; background:linear-gradient(135deg,#fff8d8,#eef8d9); color:#26352a; }
.electrical-hero svg { width:38px; height:38px; color:#d6a500; stroke-width:2.5; }
.electrical-hero strong { display:block; font-size:18px; }
.electrical-hero small { display:block; color:#6b756c; margin-top:3px; }
.traffic-light { display:flex; align-items:center; justify-content:center; gap:6px; min-width:112px; min-height:34px; border:1px solid #dfe6e1; border-radius:18px; background:#f8faf8; color:#68736c; font-size:10px; font-weight:800; cursor:pointer; }
.traffic-dot { width:13px; height:13px; border-radius:50%; background:#c8d0ca; box-shadow:0 0 0 3px #eef2ef; }
.traffic-light.state-bien { border-color:#8dbb32; background:#edf6df; color:#527a22; } .traffic-light.state-bien .traffic-dot { background:#54a849; }
.traffic-light.state-regular { border-color:#e7c66b; background:#fff8df; color:#946808; } .traffic-light.state-regular .traffic-dot { background:#e7ad22; }
.traffic-light.state-mal { border-color:#e5aaa6; background:#fff1f0; color:#b14c47; } .traffic-light.state-mal .traffic-dot { background:#d8574f; }
.traffic-light.state-no_aplica { border-color:#aeb8b2; background:#edf0ee; color:#4e5953; } .traffic-light.state-no_aplica .traffic-dot { background:#84918a; }
.electrical-novelty textarea { min-height:60px; }
.destination-other { grid-column:1 / -1; }
.preop-identity-step .preop-visual canvas { display:none !important; }
.preop-identity-step .preop-safety-art { display:none !important; }
.preop-identity-step .preop-visual { background:#fff !important; }
form.preop-identity-step .preop-visual { display:none !important; }
form.preop-identity-step .preop-question { grid-column:1 / -1; }
.preop-vehicle-image { min-height:190px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; border-radius:18px; background:transparent; overflow:hidden; color:#849187; font-size:12px; text-align:center; }
.preop-vehicle-image img { width:100%; height:190px; object-fit:contain; display:block; }
.preop-summary-step .preop-visual { display:none !important; }
.preop-summary-step .preop-question { grid-column:1 / -1; }
.preop-summary-step .preop-stage { grid-template-rows:minmax(0,1fr) !important; }
.preop-summary-step .preop-question { overflow-y:auto !important; }
.preop-summary-vehicle { display:flex; align-items:center; gap:20px; min-height:210px; margin:0 0 16px; padding:10px 18px; border-radius:20px; background:#f7faf4; }
.preop-summary-vehicle img { width:250px; height:190px; object-fit:contain; flex:0 0 250px; }
.preop-summary-vehicle span,.preop-summary-vehicle strong,.preop-summary-vehicle small { display:block; }
.preop-summary-vehicle span { color:#6f7f75; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.preop-summary-vehicle strong { margin-top:4px; color:#1c2922; font-size:18px; }
.preop-summary-vehicle small { margin-top:5px; color:#758078; font-size:12px; }
@media (max-width:640px) { .preop-identity-step .preop-stage { grid-template-rows:minmax(0,1fr) !important; } .preop-identity-step .preop-question { overflow-y:auto !important; padding-bottom:80px !important; } .preop-vehicle-image { min-height:175px; height:175px; margin-bottom:8px; } .preop-vehicle-image img { height:175px; } }
.summary-observations textarea { min-height:86px; }
.summary-observation-actions { display:flex; justify-content:flex-end; margin-top:7px; }
.observation-no-apply { min-height:36px; padding:7px 13px; border-radius:999px; gap:6px; font-size:12px; }
.observation-no-apply svg { width:15px; height:15px; }
@media (max-width:640px) { .preop-summary-vehicle { flex-direction:column; align-items:center; justify-content:center; min-height:218px; gap:2px; margin-bottom:12px; padding:8px 10px; text-align:center; } .preop-summary-vehicle img { width:230px; height:172px; flex-basis:172px; } .preop-summary-vehicle strong { font-size:16px; } .preop-summary-vehicle small { margin-top:3px; } .summary-observations textarea { min-height:76px; } }
.destination-selects { min-height:0; overflow:visible; }
.destination-selects .form-field { position:relative; z-index:2; }
.preop-electrical-step .electrical-row { min-height:38px; padding:4px 8px; }
.preop-electrical-step .electrical-name b { font-size:13px; white-space:normal; line-height:1.2; }
.preop-electrical-step .electrical-name svg { width:20px; height:20px; }
.preop-electrical-step .traffic-light { min-width:118px; min-height:34px; font-size:11px; }
.preop-electrical-step .electrical-list { padding-bottom:18px; }
.preop-electrical-step .electrical-novelty { margin-bottom:16px; }
.shell[data-role="driver"][data-section="inspections"] .preop-combined-step .preop-visual canvas { transform:scale(1.3); transform-origin:center; }
@media (max-width:760px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-combined-step .preop-visual canvas { transform:scale(1.18); }
}
.shell[data-role="driver"][data-section="inspections"] .preop-combined-step .preop-visual { overflow:visible; min-height:220px; }
.shell[data-role="driver"][data-section="inspections"] .preop-combined-step .preop-visual canvas { transform:scale(1.45); transform-origin:center center; }
@media (max-width:640px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-combined-step .preop-stage { grid-template-rows:minmax(220px,1fr) minmax(210px,1fr); }
    .shell[data-role="driver"][data-section="inspections"] .preop-combined-step .preop-visual { min-height:220px; overflow:visible; }
    .shell[data-role="driver"][data-section="inspections"] .preop-combined-step .preop-visual canvas { transform:scale(1.42); }
}
@media (max-width:760px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-tools-step .preop-stage { grid-template-rows:minmax(205px,1.15fr) minmax(165px,.85fr); }
    .shell[data-role="driver"][data-section="inspections"] .preop-tools-step .preop-visual canvas { transform:scale(1.35); transform-origin:center; }
    .shell[data-role="driver"][data-section="inspections"] .preop-tools-step .preop-question { padding:8px 16px 6px; }
    .preop-tools-step .preop-question .eyebrow,
    .preop-tools-step .preop-question > p:not(.eyebrow) { display:none; }
    .preop-tools-step .preop-question h3 { margin:0 0 7px; font-size:18px; }
    .tool-check { min-height:54px; padding:6px 8px; }
}
@media (max-width:760px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-electrical-step .preop-stage { grid-template-rows:minmax(128px,.72fr) minmax(238px,1.28fr); }
    .shell[data-role="driver"][data-section="inspections"] .preop-electrical-step .preop-visual canvas { transform:scale(1.08); transform-origin:center; }
    .shell[data-role="driver"][data-section="inspections"] .preop-electrical-step .preop-question { padding:5px 12px 3px; }
    .preop-electrical-step .preop-question .eyebrow,
    .preop-electrical-step .preop-question > p:not(.eyebrow) { display:none; }
    .preop-electrical-step .preop-question h3 { margin:0 0 4px; font-size:17px; }
    .electrical-list { gap:2px; }
    .electrical-row { grid-template-columns:minmax(0,1fr) 142px; min-height:28px; padding:1px 3px; }
    .electrical-options button { min-height:25px; font-size:8px; }
}
@media (max-height:700px) and (max-width:760px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-electrical-step .preop-stage { grid-template-rows:96px minmax(226px,1fr); }
    .shell[data-role="driver"][data-section="inspections"] .preop-electrical-step .preop-visual canvas { transform:scale(.92); }
    .electrical-row { min-height:26px; }
}
.mechanical-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.mechanical-item { display:grid; align-content:center; min-width:0; min-height:39px; padding:3px 4px; border:1px solid #e1e7e3; border-radius:6px; background:#f8faf8; color:#55625a; text-align:left; cursor:pointer; }
.mechanical-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; font-weight:800; }
.mechanical-item small { font-size:8px; color:#8a948e; }
.mechanical-item.state-bien { border-color:#8dbb32; background:#edf6df; color:#527a22; }
.mechanical-item.state-regular { border-color:#e7c66b; background:#fff8df; color:#946808; }
.mechanical-item.state-mal { border-color:#e5aaa6; background:#fff1f0; color:#b14c47; }
.mechanical-item.state-no_aplica { border-color:#b8c0bb; background:#edf0ee; color:#505a54; }
.roadsafety-list { display:grid; gap:3px; }
.roadsafety-row { display:grid; grid-template-columns:minmax(0,1fr) 156px; align-items:center; gap:7px; min-height:31px; }
.roadsafety-row > span { font-size:15px; line-height:1.35; font-weight:750; color:#26352d; }
.roadsafety-row > div { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.roadsafety-row button { min-height:27px; padding:2px; border:1px solid #dfe6e1; border-radius:6px; background:#f8faf8; color:#69746d; font-size:8px; font-weight:800; }
.roadsafety-row button.good { border-color:#8dbb32; background:#edf6df; color:#527a22; }
.roadsafety-row button.bad { border-color:#e5aaa6; background:#fff1f0; color:#b14c47; }
.roadsafety-row button.na { border-color:#b8c0bb; background:#edf0ee; color:#505a54; }
.safety-findings { margin-top:5px; }
.safety-findings textarea { min-height:39px !important; resize:none; padding:6px 9px !important; }
.roadsafety-row .safety-light { min-width:138px; min-height:38px; font-size:11px; }
.roadsafety-row .safety-light.state-bien { border-color:#8dbb32; background:#edf6df; color:#527a22; }
.roadsafety-row .safety-light.state-bien .traffic-dot { background:#54a849; }
.roadsafety-row .safety-light.state-no_aplica { border-color:#e7c66b; background:#fff8df; color:#946808; }
.roadsafety-row .safety-light.state-no_aplica .traffic-dot { background:#e7ad22; }
.roadsafety-row .safety-light.state-mal { border-color:#e5aaa6; background:#fff1f0; color:#b14c47; }
.roadsafety-row .safety-light.state-mal .traffic-dot { background:#d8574f; }
.shell[data-role="driver"][data-section="inspections"] .preop-roadsafety-step .preop-visual { min-height:230px; height:230px; overflow:hidden; }
.shell[data-role="driver"][data-section="inspections"] .preop-roadsafety-step .preop-visual canvas { transform:scale(1.2); transform-origin:center; }
@media (max-width:640px) {
    .preop-roadsafety-step .roadsafety-list { gap:10px; }
    .preop-roadsafety-step .roadsafety-row { grid-template-columns:minmax(0,1fr) 126px; min-height:62px; padding:10px 0; }
    .preop-roadsafety-step .roadsafety-row > span { font-size:15px; line-height:1.35; }
    .preop-roadsafety-step .roadsafety-row .safety-light { min-width:118px; min-height:40px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-roadsafety-step .preop-stage { grid-template-rows:220px minmax(250px,1fr) !important; }
    .shell[data-role="driver"][data-section="inspections"] .preop-roadsafety-step .preop-visual { height:220px; min-height:220px; max-height:220px; }
    .shell[data-role="driver"][data-section="inspections"] .preop-roadsafety-step .preop-visual canvas { transform:scale(1.12); }
}
@media (max-width:760px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-mechanical-step .preop-stage { grid-template-rows:92px minmax(275px,1fr); }
    .shell[data-role="driver"][data-section="inspections"] .preop-roadsafety-step .preop-stage { grid-template-rows:120px minmax(245px,1fr); }
    .preop-mechanical-step .preop-visual canvas,.preop-roadsafety-step .preop-visual canvas { transform:scale(.9); transform-origin:center; }
    .preop-mechanical-step .preop-question,.preop-roadsafety-step .preop-question { padding:5px 12px 3px !important; }
    .preop-mechanical-step .preop-question .eyebrow,.preop-mechanical-step .preop-question > p:not(.eyebrow),
    .preop-roadsafety-step .preop-question .eyebrow,.preop-roadsafety-step .preop-question > p:not(.eyebrow) { display:none; }
    .preop-mechanical-step .preop-question h3,.preop-roadsafety-step .preop-question h3 { margin:0 0 4px; font-size:16px; }
}
@media (max-width:760px) {
    .shell[data-role="driver"][data-section="inspections"] .preop-firstaid-step .preop-stage { grid-template-rows:minmax(180px,.95fr) minmax(195px,1.05fr); }
    .shell[data-role="driver"][data-section="inspections"] .preop-firstaid-step .preop-visual canvas { transform:scale(1.28); transform-origin:center; }
    .shell[data-role="driver"][data-section="inspections"] .preop-firstaid-step .preop-question { padding:7px 13px 5px; }
    .preop-firstaid-step .preop-question .eyebrow,
    .preop-firstaid-step .preop-question > p:not(.eyebrow) { display:none; }
    .preop-firstaid-step .preop-question h3 { margin:0 0 5px; font-size:17px; }
    .firstaid-grid { gap:4px; }
    .firstaid-item { min-height:54px; }
    .firstaid-item svg { width:16px; height:16px; }
}
}