:root{
    --bg:#f5f7fb;
    --surface:#ffffff;
    --surface-2:#eef2ff;
    --ink:#111827;
    --muted:#6b7280;
    --line:#d8deea;
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --nav:#0f172a;
    --nav-2:#1e293b;
    --success:#15803d;
    --warning:#b45309;
    --danger:#b91c1c;
    --info:#0369a1;
    --purple:#6d28d9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family: Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--ink);
    font-size:15px;
}

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.login-body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0f172a;
}
.login-card{
    width:100%;
    max-width:420px;
    background:#fff;
    border:3px solid #1e293b;
    padding:28px;
}
.login-card h1{margin:0 0 8px;font-size:30px}
.login-card p{margin:0 0 20px;color:var(--muted)}

.app-shell{display:flex;min-height:100vh}
.sidebar{
    width:260px;
    background:var(--nav);
    color:#fff;
    padding:18px 14px;
    position:fixed;
    inset:0 auto 0 0;
    overflow-y:auto;
}
.brand{
    padding:10px 12px 18px;
    border-bottom:1px solid #334155;
    margin-bottom:14px;
}
.brand-title{font-size:22px;font-weight:800;line-height:1}
.brand-sub{font-size:12px;color:#cbd5e1;margin-top:6px}
.nav-link{
    display:block;
    color:#e5e7eb;
    padding:11px 12px;
    margin:4px 0;
    border:1px solid transparent;
}
.nav-link:hover,.nav-link.active{
    background:var(--nav-2);
    color:#fff;
    border-color:#475569;
    text-decoration:none;
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:22px;
}
.topbar{
    background:#fff;
    border:1px solid var(--line);
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}
.topbar h1{font-size:22px;margin:0}
.topbar .meta{color:var(--muted);font-size:13px}

.card{
    background:var(--surface);
    border:1px solid var(--line);
    padding:16px;
    margin-bottom:16px;
}
.card h2,.card h3{margin-top:0}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{
    background:#fff;
    border:1px solid var(--line);
    padding:16px;
}
.kpi .label{color:var(--muted);font-size:13px;margin-bottom:8px}
.kpi .value{font-size:26px;font-weight:800}
.kpi.primary{border-top:5px solid var(--primary)}
.kpi.success{border-top:5px solid var(--success)}
.kpi.warning{border-top:5px solid var(--warning)}
.kpi.danger{border-top:5px solid var(--danger)}

.table-wrap{overflow:auto;border:1px solid var(--line);background:#fff}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:10px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#eef2ff;font-size:13px;text-transform:uppercase;letter-spacing:.02em}
tr:last-child td{border-bottom:0}

.form-row{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form-row-3{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.form-field{margin-bottom:13px}
label{display:block;font-weight:700;margin-bottom:6px;font-size:13px}
input,select,textarea{
    width:100%;
    border:1px solid #b8c2d6;
    padding:10px;
    font-size:15px;
    background:#fff;
    color:var(--ink);
}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{
    outline:3px solid #bfdbfe;
    border-color:var(--primary);
}
.btn{
    display:inline-block;
    border:1px solid var(--primary);
    background:var(--primary);
    color:#fff;
    padding:9px 13px;
    cursor:pointer;
    font-weight:700;
    font-size:14px;
    text-decoration:none;
}
.btn:hover{background:var(--primary-dark);text-decoration:none;color:#fff}
.btn.secondary{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn.dark{background:#111827;border-color:#111827;color:#fff}
.btn.success{background:var(--success);border-color:var(--success)}
.btn.warning{background:var(--warning);border-color:var(--warning)}
.btn.danger{background:var(--danger);border-color:var(--danger)}
.btn.small{font-size:12px;padding:6px 8px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.badge{
    display:inline-block;
    padding:4px 8px;
    font-size:12px;
    font-weight:800;
    border:1px solid currentColor;
}
.badge.active,.badge.paid{color:var(--success);background:#ecfdf5}
.badge.pending{color:var(--warning);background:#fffbeb}
.badge.overdue,.badge.late{color:var(--danger);background:#fef2f2}
.badge.cancelled{color:#374151;background:#f3f4f6}
.badge.partial{color:var(--info);background:#eff6ff}

.flash{
    padding:12px 14px;
    margin-bottom:15px;
    border:1px solid;
    background:#fff;
}
.flash.success{border-color:var(--success);color:var(--success)}
.flash.error{border-color:var(--danger);color:var(--danger)}
.flash.warning{border-color:var(--warning);color:var(--warning)}

.compact-card{padding:12px}
.checkbox-line{
    display:flex;
    gap:10px;
    align-items:flex-start;
    cursor:pointer;
    font-weight:400;
    margin:0;
}
.checkbox-line input{
    width:auto;
    margin-top:3px;
    min-width:18px;
    height:18px;
}

.note{
    background:#fffbeb;
    border:1px solid #f59e0b;
    padding:12px;
    margin-bottom:14px;
}
.muted{color:var(--muted)}
.right{text-align:right}
.center{text-align:center}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}

.receipt{
    max-width:760px;
    margin:20px auto;
    background:#fff;
    border:1px solid #111827;
    padding:24px;
}
.receipt h1{margin:0 0 6px}
.print-only{display:none}


.detail-list{
    border:1px solid var(--line);
    background:#fff;
}
.detail-list div{
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    gap:12px;
    padding:10px 12px;
    border-bottom:1px solid var(--line);
}
.detail-list div:last-child{border-bottom:0}
.detail-list span{
    color:var(--muted);
    font-size:13px;
}
.detail-list strong{
    word-break:break-word;
}

@media(max-width:900px){
    .sidebar{position:static;width:100%;height:auto}
    .app-shell{display:block}
    .main{margin-left:0;width:100%;padding:14px}
    .grid-2,.grid-3,.grid-4,.form-row,.form-row-3{grid-template-columns:1fr}
    .topbar{display:block}
}

@media print{
    body{background:#fff}
    .sidebar,.topbar,.no-print,.actions{display:none!important}
    .main{margin:0;width:100%;padding:0}
    .card,.table-wrap{border:0}
    .receipt{border:0;margin:0;max-width:100%;padding:0}
}


.inline-tool{
    margin-top:14px;
    border:1px solid var(--line);
    background:#f8fafc;
    padding:12px;
    display:flex;
    gap:12px;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
}
.inline-form{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}
.inline-form input[type="date"]{
    width:auto;
    min-width:170px;
}

.static-box{
    border:1px solid var(--line);
    background:#f8fafc;
    padding:10px;
    min-height:43px;
}
.clean-list{
    margin:0;
    padding-left:18px;
}
.clean-list li{
    margin:6px 0;
}



/* Vehículos */
.form-section{
    border:1px solid var(--line);
    padding:16px;
    margin-bottom:16px;
    background:#fff;
}
.form-section h2{
    margin:0 0 14px;
    font-size:20px;
    border-bottom:1px solid var(--line);
    padding-bottom:10px;
}
.vehicle-cell{
    display:flex;
    gap:12px;
    align-items:center;
}
.vehicle-thumb{
    width:78px;
    height:54px;
    object-fit:cover;
    border:1px solid var(--line);
    background:#e5e7eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    color:var(--muted);
}
.vehicle-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:12px;
    margin-top:14px;
}
.compact-gallery{
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
}
.vehicle-image-card{
    border:1px solid var(--line);
    background:#fff;
    padding:8px;
}
.vehicle-image-card img{
    width:100%;
    height:130px;
    object-fit:cover;
    display:block;
    margin-bottom:8px;
}
.compact-gallery .vehicle-image-card img{
    height:90px;
    margin-bottom:0;
}
.upload-box{
    border:2px dashed #94a3b8;
    padding:22px;
    background:#f8fafc;
    text-align:center;
}
.filters{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}
.filters input[type="search"]{
    min-width:320px;
}
.actions.spread{
    justify-content:space-between;
    align-items:center;
}
.checkbox-line.mini{
    display:flex;
    gap:8px;
    align-items:center;
    padding:8px 0;
}
.checkbox-line.mini input{
    width:auto;
}
@media(max-width:900px){
    .vehicle-cell{align-items:flex-start}
    .filters input[type="search"]{min-width:100%}
}


.input-with-action{
    display:flex;
    gap:8px;
    align-items:center;
}
.input-with-action input{
    flex:1;
}
.field-help{
    font-size:12px;
    color:var(--muted);
    margin-top:6px;
}
.success-text{
    color:var(--success);
    font-weight:700;
}
.danger-text{
    color:var(--danger);
    font-weight:700;
}

.copy-line{
    margin-top:8px;
    padding:10px;
    border:1px solid var(--line);
    background:#f8fafc;
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size:13px;
    word-break:break-all;
}
.inline-upload-form{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.inline-upload-form input[type="file"]{
    width:auto;
    min-width:260px;
}
.public-vehicle-page{
    max-width:1080px;
    margin:0 auto;
    padding:22px;
}
.public-hero{
    border:1px solid var(--line);
    background:#fff;
    padding:18px;
    margin-bottom:18px;
}
.public-price{
    font-size:30px;
    font-weight:900;
    margin:10px 0;
}
.public-main-image img{
    width:100%;
    max-height:520px;
    object-fit:cover;
    border:1px solid var(--line);
    background:#e5e7eb;
}
.public-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:10px;
    margin-top:10px;
}
.public-gallery img{
    width:100%;
    height:100px;
    object-fit:cover;
    border:1px solid var(--line);
}


.public-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin: 18px 0;
}

.public-catalog-card {
    display: block;
    background: #ffffff;
    border: 1px solid #d9e2ef;
    color: #0f172a;
    text-decoration: none;
}

.public-catalog-card:hover {
    border-color: #2563eb;
}

.public-catalog-thumb {
    height: 210px;
    background: #e8eef8;
    border-bottom: 1px solid #d9e2ef;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.public-catalog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-catalog-body {
    padding: 16px;
}

.public-catalog-body h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

.small-price {
    font-size: 22px;
    margin: 8px 0;
}

.public-footer {
    padding: 24px 0;
    color: #64748b;
    text-align: center;
}

.copy-line {
    user-select: all;
}


/* Catálogo público profesional — v13 */
.public-auto-body {
    background: #eef3f9;
    color: #0f172a;
}

.auto-public-shell {
    width: min(1460px, calc(100% - 32px));
    margin: 0 auto;
    padding: 22px 0 36px;
}

.auto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #d7e0ec;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.auto-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0f172a;
    text-decoration: none;
}

.auto-brand:hover {
    text-decoration: none;
}

.auto-brand-mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0b2f57;
    color: #ffffff;
    font-weight: 900;
    font-size: 22px;
}

.auto-brand strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
}

.auto-brand small {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-top: 3px;
}

.auto-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auto-header-link {
    color: #334155;
    font-weight: 800;
}

.auto-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #15803d;
    border: 1px solid #15803d;
    color: #ffffff;
    font-weight: 900;
    padding: 11px 16px;
    text-decoration: none;
}

.auto-header-cta:hover {
    color: #ffffff;
    text-decoration: none;
    background: #166534;
}

.auto-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, .75fr);
    gap: 18px;
    background: #0b2f57;
    border: 1px solid #123f70;
    padding: 34px;
    margin-bottom: 18px;
    color: #ffffff;
}

.auto-hero-copy h1 {
    margin: 8px 0 12px;
    font-size: clamp(34px, 4vw, 58px);
    line-height: .96;
    letter-spacing: -0.04em;
    max-width: 840px;
}

.auto-hero-copy p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: #c9d8ea;
    max-width: 680px;
}

.auto-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2563eb;
}

.auto-hero .auto-eyebrow {
    color: #93c5fd;
}

.auto-hero-actions,
.auto-card-actions,
.auto-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.auto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #2563eb;
    background: #ffffff;
    color: #1d4ed8;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
}

.auto-btn:hover {
    text-decoration: none;
}

.auto-btn-primary {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.auto-btn-primary:hover {
    background: #1d4ed8;
    color: #ffffff;
}

.auto-btn-light {
    background: #ffffff;
    color: #0b2f57;
    border-color: #ffffff;
}

.auto-btn-light:hover {
    color: #0b2f57;
    background: #eaf2ff;
}

.auto-btn-outline {
    background: transparent;
    color: #1d4ed8;
    border-color: #93b4f8;
}

.auto-btn-outline:hover {
    background: #eaf2ff;
    color: #1d4ed8;
}

.auto-btn-block {
    width: 100%;
}

.auto-hero-panel {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #c7d4e4;
    padding: 24px;
    align-self: stretch;
}

.auto-hero-panel strong {
    display: block;
    font-size: 56px;
    line-height: .9;
    letter-spacing: -0.05em;
}

.auto-hero-panel > span {
    display: block;
    color: #64748b;
    margin-top: 8px;
    font-weight: 800;
}

.auto-trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
}

.auto-trust-grid span {
    border: 1px solid #d7e0ec;
    background: #f8fafc;
    padding: 10px;
    color: #334155;
    font-weight: 800;
    font-size: 13px;
}

.auto-filter-panel {
    background: #ffffff;
    border: 1px solid #d7e0ec;
    padding: 16px;
    margin-bottom: 22px;
}

.auto-filter-form label {
    display: block;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}

.auto-filter-form input,
.auto-filter-form select {
    margin-top: 7px;
    min-height: 44px;
    border: 1px solid #b8c7dc;
    background: #ffffff;
    color: #0f172a;
}

.auto-filter-main {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(160px, .7fr));
    gap: 12px;
}

.auto-filter-extra {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr)) auto;
    gap: 12px;
    margin-top: 12px;
    align-items: end;
}

.auto-filter-buttons {
    display: flex;
    gap: 8px;
}

.auto-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin: 8px 0 14px;
}

.auto-section-head h2 {
    margin: 4px 0 0;
    font-size: 26px;
    letter-spacing: -0.03em;
}

.auto-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.auto-card {
    background: #ffffff;
    border: 1px solid #d7e0ec;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.auto-card:hover {
    border-color: #2563eb;
}

.auto-card-image {
    position: relative;
    display: block;
    background: #dbe5f1;
    height: 230px;
    overflow: hidden;
    color: #ffffff;
    text-decoration: none;
}

.auto-card-image:hover {
    text-decoration: none;
}

.auto-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.auto-card-placeholder,
.auto-detail-placeholder {
    width: 100%;
    height: 100%;
    background: #0b2f57;
    color: #c9d8ea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.auto-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.35);
    background: #0f172a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.auto-badge-status {
    left: 12px;
    top: 12px;
    background: #15803d;
}

.auto-badge-photos {
    right: 12px;
    top: 12px;
    background: #0f172a;
}

.auto-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.auto-card-body h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.auto-card-body h3 a {
    color: #0f172a;
}

.auto-card-subtitle {
    margin: 0;
    color: #64748b;
    font-weight: 800;
}

.auto-card-price {
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: #0b2f57;
}

.muted-price {
    color: #64748b;
}

.auto-spec-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.auto-spec-row span {
    background: #eef3f9;
    border: 1px solid #d7e0ec;
    padding: 9px 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    min-width: 0;
}

.auto-card-actions {
    margin-top: auto;
}

.auto-card-actions .auto-btn {
    flex: 1 1 auto;
    min-height: 38px;
    padding: 8px 10px;
}

.auto-empty {
    background: #ffffff;
    border: 1px solid #d7e0ec;
    padding: 28px;
    text-align: center;
}

.auto-empty h2 {
    margin-top: 0;
}

.auto-public-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: #64748b;
    border-top: 1px solid #d7e0ec;
    padding-top: 18px;
    margin-top: 28px;
}

.auto-public-footer strong {
    color: #0f172a;
}

/* Detalle público */
.auto-detail-shell {
    width: min(1380px, calc(100% - 32px));
}

.auto-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
    gap: 18px;
    align-items: start;
}

.auto-detail-gallery,
.auto-detail-summary,
.auto-info-card,
.auto-finance-banner {
    background: #ffffff;
    border: 1px solid #d7e0ec;
}

.auto-detail-gallery {
    padding: 14px;
}

.auto-detail-main-image {
    position: relative;
    background: #dbe5f1;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.auto-detail-main-image img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    display: block;
}

.auto-detail-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.auto-detail-thumbs button {
    border: 2px solid transparent;
    background: #eef3f9;
    padding: 0;
    height: 76px;
    cursor: pointer;
}

.auto-detail-thumbs button.is-active {
    border-color: #2563eb;
}

.auto-detail-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.auto-detail-summary {
    padding: 24px;
    position: sticky;
    top: 18px;
}

.auto-detail-summary h1 {
    margin: 8px 0 8px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: .98;
    letter-spacing: -0.05em;
}

.auto-detail-subtitle {
    margin: 0;
    color: #64748b;
    font-weight: 800;
    font-size: 17px;
}

.auto-detail-price {
    font-size: 42px;
    line-height: 1;
    color: #0b2f57;
    font-weight: 900;
    letter-spacing: -0.06em;
    margin: 18px 0;
}

.auto-detail-mini-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.auto-detail-mini-specs div {
    background: #eef3f9;
    border: 1px solid #d7e0ec;
    padding: 12px;
}

.auto-detail-mini-specs strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
}

.auto-detail-mini-specs span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    margin-top: 3px;
}

.auto-safe-note {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    margin: 16px 0 0;
}

.auto-detail-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.auto-info-card {
    padding: 20px;
}

.auto-info-card-wide {
    grid-column: 1 / -1;
}

.auto-info-card h2 {
    margin: 0 0 14px;
    letter-spacing: -0.03em;
}

.auto-info-card p {
    margin-bottom: 0;
    line-height: 1.6;
    color: #334155;
}

.auto-spec-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.auto-spec-list div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #e2e8f0;
}

.auto-spec-list div:last-child {
    border-bottom: 0;
}

.auto-spec-list dt {
    color: #64748b;
    font-weight: 900;
}

.auto-spec-list dd {
    margin: 0;
    color: #0f172a;
    font-weight: 800;
}

.auto-finance-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    margin-top: 18px;
    background: #0b2f57;
    color: #ffffff;
    border-color: #0b2f57;
}

.auto-finance-banner h2 {
    margin: 6px 0 6px;
    letter-spacing: -0.03em;
}

.auto-finance-banner p {
    margin: 0;
    color: #c9d8ea;
}

@media (max-width: 1180px) {
    .auto-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .auto-filter-main,
    .auto-filter-extra {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .auto-filter-buttons {
        grid-column: 1 / -1;
    }
}

@media (max-width: 880px) {
    .auto-public-shell,
    .auto-detail-shell {
        width: min(100% - 20px, 760px);
        padding-top: 10px;
    }

    .auto-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .auto-header-actions {
        width: 100%;
    }

    .auto-header-actions a {
        flex: 1;
        text-align: center;
    }

    .auto-hero {
        grid-template-columns: 1fr;
        padding: 24px;
    }

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

    .auto-detail-layout {
        grid-template-columns: 1fr;
    }

    .auto-detail-summary {
        position: static;
    }

    .auto-detail-main-image,
    .auto-detail-main-image img {
        min-height: 360px;
    }

    .auto-detail-content {
        grid-template-columns: 1fr;
    }

    .auto-finance-banner {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .auto-catalog-grid {
        grid-template-columns: 1fr;
    }

    .auto-filter-main,
    .auto-filter-extra {
        grid-template-columns: 1fr;
    }

    .auto-hero-copy h1 {
        font-size: 36px;
    }

    .auto-hero-panel strong {
        font-size: 42px;
    }

    .auto-trust-grid,
    .auto-spec-row,
    .auto-detail-mini-specs {
        grid-template-columns: 1fr;
    }

    .auto-card-image {
        height: 250px;
    }

    .auto-detail-main-image,
    .auto-detail-main-image img {
        min-height: 300px;
    }

    .auto-spec-list div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .auto-public-footer {
        flex-direction: column;
    }
}