:root{
  --bg:#e8edf5;
  --bg-2:#dfe7f2;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --line-2:#cbd5e1;
  --accent:#0f172a;
  --accent-2:#1e293b;
  --accent-bright:#0d9488;
  --on:#ffffff;
  --success:#059669;
  --warning:#d97706;
  --danger:#b91c1c;
  --shadow:0 14px 40px rgba(15,23,42,.08);
  --shadow-soft:0 8px 24px rgba(15,23,42,.06);
  --radius:16px;
  --radius-sm:12px;
  --admin-sidebar:208px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(ellipse 120% 80% at 0% -20%, rgba(13,148,136,.12), transparent 50%),
    radial-gradient(ellipse 80% 50% at 100% 0%, rgba(37,99,235,.08), transparent 45%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  color:var(--ink);
}
body.admin-body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}

.app.admin-shell,
.app{
  display:grid;
  grid-template-columns:var(--admin-sidebar,208px) minmax(0,1fr);
  min-height:100vh;
}

.sidebar{
  background:
    linear-gradient(165deg,#0c1222 0%,#151f33 42%,#0f172a 100%);
  color:#cbd5e1;
  padding:14px 10px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:stretch;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:4px 0 32px rgba(15,23,42,.18);
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 8px 14px;
  margin:0 0 6px;
  text-decoration:none;
  color:#f1f5f9;
  border-radius:12px;
  transition:background .15s ease,color .15s ease;
}
.sidebar-brand:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}
.sidebar-brand-mark{
  flex-shrink:0;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  color:#042f2e;
  background:linear-gradient(135deg,#5eead4,#2dd4bf);
  border-radius:10px;
  box-shadow:0 2px 8px rgba(45,212,191,.35);
}
.sidebar-brand-text{
  font-size:13px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.25;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:4px;
}
.sidebar-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(148,163,184,.85);
  padding:10px 10px 4px;
}
.sidebar-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:9px 10px;
  border-radius:10px;
  background:rgba(30,41,59,.35);
  border:1px solid rgba(148,163,184,.12);
  color:#cbd5e1;
  font-weight:600;
  font-size:13px;
  line-height:1.25;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.sidebar-link:hover{
  background:rgba(51,65,85,.55);
  border-color:rgba(148,163,184,.22);
  color:#fff;
  transform:translateX(1px);
}
@media (prefers-reduced-motion: reduce){
  .sidebar-link,
  .sidebar-brand{transition:none}
  .sidebar-link:hover{transform:none}
}
.sidebar-link--accent{
  background:rgba(13,148,136,.18);
  border-color:rgba(45,212,191,.25);
  color:#ccfbf1;
}
.sidebar-link--accent:hover{
  background:rgba(13,148,136,.32);
  border-color:rgba(45,212,191,.4);
  color:#f0fdfa;
}
.sidebar-icon{
  flex-shrink:0;
  opacity:.92;
}
.sidebar-link-text{min-width:0}

.content{
  padding:22px 28px 32px;
  max-width:1600px;
  width:100%;
  margin:0 auto;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:-4px 0 22px;
  padding:14px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.88));
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(10px);
}
.topbar h1{
  margin:0;
  font-size:clamp(22px,2.6vw,30px);
  letter-spacing:-.035em;
  line-height:1.12;
  font-weight:800;
  color:var(--ink);
  min-width:0;
  flex:1 1 auto;
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex-shrink:0;
}
.topbar span,
.topbar-user{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.topbar-user{
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
  max-width:min(240px,42vw);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topbar-logout{
  min-height:34px;
  padding:7px 12px;
  font-size:11px;
  letter-spacing:.03em;
  text-transform:none;
}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.98),var(--surface-2));
  border:1px solid rgba(226,232,240,.95);
  border-radius:var(--radius);
  box-shadow:0 4px 20px rgba(15,23,42,.04),var(--shadow-soft);
  padding:20px;
  margin-bottom:16px;
}

.btn,button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  background:var(--accent);
  color:var(--on);
  border:1px solid var(--accent);
  border-radius:10px;
  padding:9px 14px;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .18s ease;
}
.btn:hover,button:hover{background:var(--accent-2);border-color:var(--accent-2);box-shadow:var(--shadow-soft)}
.btn-secondary{
  background:#fff;
  border-color:var(--line-2);
  color:var(--ink);
}
.btn-secondary:hover{
  background:#f1f5f9;
  border-color:#94a3b8;
}

.filters,.inline{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:flex-end}
.filters label{margin:0;font-size:12px}

.data-table{margin-top:6px}
.data-table input[type="checkbox"]{width:auto;min-height:auto;margin:0;vertical-align:middle;cursor:pointer}
.inventory-bulk-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 8px;padding:10px 12px;background:#f8fafc;border:1px solid var(--line);border-radius:10px}
.inventory-bulk-bar select{max-width:220px}
.pagination-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 16px;
  margin-top:14px;
  padding:12px 14px;
  background:linear-gradient(180deg,#f8fafc,#f1f5f9);
  border:1px solid var(--line);
  border-radius:12px;
}
.pagination-meta{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.pagination-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
}
.pagination-page{
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  padding:0 6px;
}
.pagination-jump{font-size:12px;margin-right:2px}
.pagination-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 8px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--line-2);
  background:#fff;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.pagination-num:hover{
  background:#f1f5f9;
  border-color:#94a3b8;
  color:var(--accent);
}
.pagination-num.is-current{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  cursor:default;
}
.pagination-ellipsis{
  font-size:13px;
  color:var(--muted);
  padding:0 4px;
  user-select:none;
}
.pagination-btn--disabled{
  opacity:.45;
  pointer-events:none;
  cursor:default;
}
.th-check,.td-check{width:44px;text-align:center;vertical-align:middle}
.dt-nowrap{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px}
.cell-actions{max-width:280px;font-size:12px;line-height:1.45}
.cell-actions a{text-decoration:underline;text-underline-offset:2px}
.danger-link{color:#b91c1c;font-weight:700}
.danger-link:hover{color:#991b1b}

.card code{font-size:12px;background:#f1f5f9;padding:2px 6px;border-radius:6px;color:#0f172a}

input,select,textarea{
  width:100%;
  min-height:40px;
  padding:10px 12px;
  border:1px solid var(--line-2);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  outline:0;
  border-color:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.2);
}
label{display:grid;gap:6px;font-size:12px;color:#475569;font-weight:600}

.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.form-grid .full{grid-column:1 / -1}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stats .card{
  margin:0;
  border-color:#dbe3ef;
}
.stats .card h3{
  margin:0 0 8px;
  color:#64748b;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.stats .card p{
  margin:0;
  font-size:34px;
  font-weight:800;
  letter-spacing:-.04em;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
th,td{
  padding:11px 12px;
  border-bottom:1px solid #edf2f7;
  text-align:left;
  font-size:13px;
  vertical-align:top;
}
th{
  background:linear-gradient(180deg,#f8fafc,#f1f5f9);
  color:#475569;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
th .sortable-th{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:inherit;
  text-decoration:none;
  font-weight:700;
}
th .sortable-th:hover{color:#0f172a}
th .sortable-th.is-active{color:#0f172a}
th.num .sortable-th{
  width:100%;
  justify-content:flex-end;
}
.sort-arrow{
  font-size:12px;
  line-height:1;
  color:#475569;
}
tr:hover td{background:#f8fafc}
tr:last-child td{border-bottom:0}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
  margin-top:12px;
}
.gallery figure{
  margin:0;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:8px;
}
.gallery img{
  width:100%;
  height:130px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #e5e7eb;
}
.gallery figcaption{
  margin-top:7px;
  color:#475569;
  font-size:12px;
}
.cover-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(5,150,105,.25);
  border-radius:999px;
  background:rgba(5,150,105,.1);
  color:var(--success);
  font-weight:700;
  padding:5px 9px;
}
.gallery .btn{
  min-height:32px;
  padding:6px 10px;
  font-size:11px;
}

.car-photo-order-status{
  margin:8px 0 0;
  min-height:1.25em;
}
ul.gallery.car-photo-grid{
  list-style:none;
  padding:0;
  margin-top:12px;
}
.car-photo-item{
  margin:0;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:8px;
  cursor:grab;
  transition:opacity .15s ease,box-shadow .15s ease;
}
.car-photo-item:active{cursor:grabbing}
.car-photo-item.is-dragging{
  opacity:.55;
  box-shadow:0 8px 28px rgba(15,23,42,.12);
}
.car-photo-item-inner{display:flex;flex-direction:column;gap:8px}
.car-photo-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.car-photo-drag{
  font-size:18px;
  line-height:1;
  letter-spacing:-2px;
  color:#64748b;
  user-select:none;
}
.car-photo-sort-btns{display:inline-flex;gap:6px}
.car-photo-sort-btns .btn{
  min-height:30px;
  padding:4px 10px;
  font-size:12px;
  text-transform:none;
  letter-spacing:0;
}
.car-photo-item img{
  width:100%;
  height:130px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #e5e7eb;
  pointer-events:none;
}
.car-photo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.car-detail{
  display:grid;
  grid-template-columns:minmax(260px,420px) minmax(0,1fr);
  gap:16px;
  align-items:start;
}

/* Admin "Ver ficha en panel" — misma jerarquía visual que la ficha pública */
.admin-car-preview .car-detail-media{
  min-width:0;
}
.admin-car-preview .car-main-image{
  width:100%;
  height:min(380px,48vh);
  max-height:440px;
  object-fit:contain;
  object-position:center;
  background:var(--surface-2);
  border-radius:12px;
  border:1px solid var(--line);
  display:block;
}
.admin-body .car-detail-info{
  min-width:0;
}
.admin-body .car-preview-meta{
  margin:0;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.01em;
}
.admin-body .car-detail-info h2{
  margin:8px 0 0;
  font-size:clamp(22px,2.6vw,30px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.12;
  color:var(--ink);
}
.admin-body .car-detail-price{
  margin:10px 0 0;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
}
.admin-body .car-spec-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.admin-body .car-spec-pill{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:7px 13px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:13px;
  color:var(--ink);
  line-height:1.25;
}
.admin-body .car-spec-pill strong{
  font-weight:700;
  color:var(--muted);
}
.admin-body .car-spec-pill .vin-chars{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.04em;
  font-size:12.5px;
}
.admin-body .car-desc{
  margin-top:16px;
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.admin-body .admin-car-preview-metrics{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.45;
}
.admin-body .car-detail-actions{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.car-main-image{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #e5e7eb;
  display:block;
}

.car-carousel{position:relative}
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#111827;
  color:#fff;
  border:0;
  width:36px;
  height:36px;
  border-radius:999px;
  cursor:pointer;
  z-index:2;
  opacity:.95;
}
.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}

.thumb-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:8px;
  margin-top:10px;
}
.thumb-row .thumb{
  width:100%;
  height:64px;
  object-fit:cover;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  display:block;
}
.thumb-row .thumb.active{border-color:#111827}

.public-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.public-grid article{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.public-grid img{width:100%;height:140px;object-fit:cover;border-radius:8px}

.login-body{display:grid;place-items:center;min-height:100vh;background:var(--bg)}
.login-body .card{width:min(460px,92vw)}
.error{color:var(--danger);font-weight:700}
.success-banner{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:10px;
  background:#ecfdf5;
  border:1px solid #6ee7b7;
  color:#065f46;
  font-weight:600;
}
.muted{color:var(--muted)}

@media (max-width: 1100px){
  .app.admin-shell,
  .app{grid-template-columns:1fr}
  .admin-shell .sidebar,
  .sidebar{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
    padding:10px 12px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 6px 28px rgba(15,23,42,.14);
  }
  .sidebar-brand{
    flex:0 0 auto;
    min-width:0;
    padding:6px 8px;
    margin:0;
  }
  .sidebar-nav{
    flex-direction:row;
    flex-wrap:wrap;
    margin:0;
    gap:6px;
    flex:1 1 auto;
    min-width:0;
  }
  .sidebar-label{display:none}
  .sidebar-link{
    white-space:nowrap;
    padding:8px 10px;
  }
}

@media (max-width: 980px){
  .content{padding:14px 16px 24px}
  .form-grid,.stats,.car-detail{grid-template-columns:1fr}
  .car-main-image{height:260px}
}

/* —— Panel: analítica tipo dashboard —— */
.admin-dashboard{
  max-width:1400px;
}
.dashboard-intro{max-width:72ch;margin-top:0}
.dashboard-filters{align-items:flex-end;margin-bottom:4px}

.dashboard-kpi-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
.dashboard-kpi{
  margin:0;
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  border-left-width:4px;
  background:linear-gradient(180deg,#fff,#f8fafc);
}
.dashboard-kpi--views{border-left-color:#2563eb}
.dashboard-kpi--quotes{border-left-color:#7c3aed}
.dashboard-kpi--shares{border-left-color:#0d9488}
.dashboard-kpi-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}
.dashboard-kpi-value{
  font-size:clamp(26px,4vw,36px);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.1;
  color:var(--ink);
}
.dashboard-kpi-hint{font-size:12px;color:var(--muted);font-weight:600}

.dashboard-charts-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
.chart-card{margin:0}
.chart-card-title{
  margin:0 0 4px;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.02em;
}
.chart-card-desc{margin:0 0 12px;font-size:12px;color:var(--muted);font-weight:600}
.chart-wrap{
  position:relative;
  height:280px;
  width:100%;
}
.chart-wrap--doughnut{max-width:320px;margin:0 auto;height:260px}

.dashboard-table-card{margin-bottom:16px}
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-top:8px;
}
table .num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.table-vehicle-cell{min-width:200px}
.table-vehicle-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  font-weight:700;
  border-radius:10px;
  padding:4px 6px 4px 4px;
  margin:-4px -6px -4px -4px;
  transition:background .15s ease;
}
.table-vehicle-link:hover{background:#f1f5f9}
.table-vehicle-thumb{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
  flex-shrink:0;
  background:#f8fafc;
}
.table-vehicle-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.table-vehicle-title{
  font-size:13px;
  font-weight:700;
  line-height:1.25;
  word-break:break-word;
}
.table-vehicle-meta{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
}

@media (max-width:1100px){
  .dashboard-kpi-row{grid-template-columns:1fr}
  .dashboard-charts-row{grid-template-columns:1fr}
  .chart-wrap{height:260px}
}

.photo-upload-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:8px;
}
.car-photo-upload-form{position:relative}
.photo-upload-busy{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--ink);
  font-weight:600;
  font-size:14px;
}
/* Author `display:flex` beats the UA `[hidden]` rule; keep the strip actually hidden until JS reveals it */
.photo-upload-busy[hidden]{
  display:none !important;
}
.photo-upload-busy-text{line-height:1.3}
.photo-upload-spinner{
  width:22px;
  height:22px;
  border-radius:50%;
  border:3px solid var(--line-2);
  border-top-color:var(--accent);
  animation:photo-upload-spin .75s linear infinite;
  flex-shrink:0;
}
@keyframes photo-upload-spin{
  to{transform:rotate(360deg)}
}