:root{
  --bg:#f7f7f8;
  --card:#fff;
  --muted:#666;
  --border:#e5e5ea;
  --brand:#7c3aed;     /* MORADO del diseño */
  --brand-600:#6b2bd1;
}

/* RESET */
*{ box-sizing:border-box }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  background:var(--bg);
  color:#222;
}

/* ================= HEADER ================== */
header{
  position:sticky;
  top:0;
  background:#ffffffcc;
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.2) blur(6px);
  z-index:30;
}
.container{
  max-width:1100px;
  margin:0 auto;
  padding:12px 16px;
}
.toolbar{
  display:flex;
  gap:8px;
  align-items:center;
}
.grow{ flex:1 }

input, select, textarea, button{ font:inherit }
input, select, textarea{
  border:1px solid #d0d0d4;
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  outline:none;
  width:100%;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%, transparent);
}

button{
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  border-radius:10px;
  padding:10px 14px;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}
button:hover{ background:var(--brand-600) }
button.secondary{
  background:#fff;
  color:var(--brand);
}

/* ================= CARDS ================== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:12px;
}
.card{
  background:var(--card);
  border:1px solid #e9e9ee;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.imgbox{
  aspect-ratio:16/9;
  background:#e9e9ee;
  position:relative;
}
.imgbox img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.badges{
  position:absolute;
  left:10px;
  top:10px;
  display:flex;
  gap:6px;
}
.badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #ddd;
  background:#ffffffd0;
}
.card h3{
  margin:8px 0 4px;
  font-size:18px;
}
.section{ padding:12px }
.muted{ color:var(--muted) }

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.row{
  display:flex;
  gap:8px;
  align-items:center;
}
.row > *{ flex:1 }

.footer{
  padding:32px 0;
  text-align:center;
  color:#777;
  font-size:12px;
}

/* ================= MODAL ================== */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:50;
}
/* ✅ FIX: aseguramos que .hidden gane SIEMPRE */
.modal-backdrop.hidden{
  display:none !important;
}

.modal{
  background:#fff;
  width:100%;
  max-width:720px;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  overflow:hidden;
  max-height:90vh;
  display:flex;
  flex-direction:column;
}
.modal header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
}
.modal .content{
  padding:16px;
  overflow:auto;
  max-height:calc(90vh - 56px);
}
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.grid-2 .full{ grid-column:1 / -1 }

/* Alerts dentro del modal */
.alert{
  display:none;
  margin-bottom:8px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #efefef;
}
.alert.ok{
  display:block;
  border-color:#86efac;
  background:#f0fdf4;
}
.alert.err{
  display:block;
  border-color:#fecaca;
  background:#fff1f2;
}

/* Deshabilita scroll del body */
body.no-scroll{ overflow:hidden }

/* ================= ADMIN (panel de leads) ================= */
.admin .filters{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
}
.admin .grid6{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}

.table-wrap{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:auto;
  max-height:calc(100vh - 260px);
}
.table-wrap thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff;
  box-shadow:0 2px 0 var(--border);
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
th, td{
  padding:12px 10px;
  border-bottom:1px solid #f1f1f5;
  vertical-align:top;
}
th{
  color:#555;
  font-size:.85rem;
}
tbody tr:hover{ background:#fafafa }
.pill{
  display:inline-block;
  padding:3px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  font-size:.75rem;
}
.pagination{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin:14px 0;
}


/* Placeholder más visible */
#search::placeholder{
  color: #8b98a5;
}

/* Solo dividir espacio entre buscador y selección de marca */
/* No cambia tamaños, sombras ni estilos existentes */
.toolbar {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2 partes buscador, 1 parte la marca */
  gap: 8px;
}

.toolbar > [role="heading"] {
  grid-column: 1 / -1; /* el título sigue ocupando todo el ancho */
}

/* En móvil se apilan como siempre */
@media (max-width: 768px) {
  .toolbar {
    grid-template-columns: 1fr;
  }
}


/* ====== Base & container ====== */
:root{
  --bg:#eef2f6;            /* tu fondo azulado tenue */
  --card:#fff;
  --ink:#1f2937;           /* texto principal */
  --muted:#64748b;         /* texto secundario */
  --border:#e5e7eb;
  --brand:#0a5fff;         /* CTA azul estilo FIAT */
  --brand-dark:#0748c7;
  --radius:12px;
  --shadow:0 6px 18px rgba(0,0,0,.08);
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  font-size:16px;
  line-height:1.5;
}

/* Contenedor más profesional */
.container{
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ====== Header / toolbar ====== */
header{
  background:#ffffffee;
  backdrop-filter: saturate(1.05) blur(4px);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.toolbar{ gap: 12px; }

/* Mantener la división buscador / marca que ya hicimos */
.toolbar{
  display:grid;
  grid-template-columns: 2fr 1fr;
  align-items:center;
}
.toolbar > [role="heading"]{ grid-column:1/-1; }
@media (max-width: 768px){
  .toolbar{ grid-template-columns: 1fr; }
}

/* Inputs: borde y foco sutiles (sin cambiar tamaños) */
#search, #marca{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  outline:none;
}
#search:focus, #marca:focus{
  border-color:#c7d2fe;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* ====== Grid de cards ====== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* ====== Card ====== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  border-color:#dfe3e8;
}

.card .section{
  padding: 14px 14px 16px;
}

/* Imagen consistente */
.imgbox{ position:relative; overflow:hidden; }
.imgbox img{
  width:100%;
  aspect-ratio: 16 / 9;     /* altura consistente */
  object-fit:cover;
  display:block;
}

/* Badges */
.badges{
  position:absolute; left:10px; top:10px; display:flex; gap:6px; flex-wrap:wrap;
}
.badge{
  background:#0b1220; color:#fff;   /* contraste sobrio */
  font-size:.72rem; letter-spacing:.02em; text-transform:uppercase;
  padding:5px 8px; border-radius:999px; opacity:.92;
}

/* Tipos & jerarquía */
h1,h2,h3{ color:var(--ink); line-height:1.25; margin:0 0 8px; }
h1{ font-size:clamp(22px, 2.2vw, 28px); font-weight:750; }
h2{ font-size:clamp(18px, 1.8vw, 22px); font-weight:700; }
h3{ font-size:18px; font-weight:700; }
.muted{ color:var(--muted) !important; }

/* Chips (las que mostrás en la card) */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chips .badge{
  background:#f1f5f9; color:#0f172a; border:1px solid #e2e8f0;
}

/* Botones */
button{
  appearance:none; border:0; cursor:pointer;
  height:40px; padding:0 14px; border-radius:10px; font-weight:600;
}
button:not(.secondary){
  background:var(--brand); color:#fff;
  transition: filter .15s ease, transform .05s ease;
}
button:not(.secondary):hover{ filter:brightness(1.05); }
button:not(.secondary):active{ transform: translateY(1px); }

button.secondary{
  background:#f8fafc; color:#0f172a; border:1px solid #e2e8f0;
}
button.secondary:hover{ background:#eef2f7; }

/* ====== Modal ====== */
.modal-backdrop{
  background: rgba(10,16,28,.45);
  backdrop-filter: blur(2px);
}
.modal{
  max-width: 760px;
  width: min(92vw, 760px);
  border-radius: 14px;
  overflow: hidden;
}
.modal header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:#fff; border-bottom:1px solid var(--border);
}
.modal .content{
  max-height: calc(90vh - 60px);
  overflow:auto;
  background:#fff;
  padding:14px;
}

/* ====== Listas y mini labels ====== */
.list{ margin:8px 0 0 18px; color:var(--ink); }
.mini{ font-size:.8rem; color:#6b7280; }

/* ====== Footer ====== */
.footer{
  color:#4b5563; text-align:center; padding:24px 12px;
}

/* ====== Accesibilidad (focus visible en links y botones) ====== */
:focus-visible{
  outline:2px solid #93c5fd; outline-offset:2px;
}