:root{
  --bg:#07111f;
  --bg-2:#0b1526;
  --panel:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --text:#eef4ff;
  --muted:#9fb0cb;
  --brand:#ff614f;
  --brand-2:#4dd5ff;
  --ok:#2ed58a;
  --warning:#ffd34f;
  --danger:#ff7f73;
  --shadow:0 28px 90px rgba(0,0,0,.38);
  --radius:28px;
  --card-bg:#efe9d8;
  --card-blue:#40b4ea;
  --card-red:#ff4e3d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 12%, rgba(255,97,79,.16), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(77,213,255,.14), transparent 24%),
    linear-gradient(180deg,#07111f,#081321 42%,#07111f);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1240px,92vw);margin:0 auto}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-2);font-weight:800}
.topbar{
  position:sticky;top:0;z-index:90;
  backdrop-filter:blur(16px);
  background:rgba(6,12,23,.75);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),#ff8f77);font-weight:900;color:#fff;
  box-shadow:0 14px 30px rgba(255,97,79,.34)
}
.brand small{display:block;color:var(--muted);line-height:1.15}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{color:#dce9ff;font-size:14px}
.nav a:hover{color:#fff}
.btn,button{
  border:0;border-radius:18px;padding:14px 18px;font-weight:800;cursor:pointer;
  background:linear-gradient(135deg,var(--brand),#ff856f);color:#fff;
  box-shadow:0 18px 36px rgba(255,97,79,.23)
}
button.ghost,.btn.ghost{
  background:rgba(255,255,255,.06);box-shadow:none;border:1px solid var(--line)
}
button.small, .btn.small{padding:11px 14px;border-radius:14px;font-size:14px}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);font-size:13px;color:#dbe8ff
}
.hero{
  padding:72px 0 38px;
  display:grid;grid-template-columns:1.18fr .82fr;gap:26px;align-items:center;
}
.hero h1{
  margin:10px 0 12px;
  font-size:clamp(40px,6vw,80px);
  line-height:.93;letter-spacing:-.06em
}
.hero p{max-width:760px;font-size:20px;line-height:1.45;color:var(--muted)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.choice-box,.panel,.stat,.summary-box,.panel-lite,.info-box,.feature-tile,.metric,.survey-box,.section-card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.04));
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.choice-box,.panel,.summary-box,.survey-box,.section-card,.info-box{padding:24px}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.choice-btn,.tab-btn{
  border-radius:18px;padding:16px;border:1px solid var(--line);background:rgba(255,255,255,.06);
  font-weight:900;color:#fff;cursor:pointer
}
.choice-btn.active,.tab-btn.active{background:linear-gradient(135deg,var(--brand-2),#99ecff);color:#072033}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.stat{padding:20px}
.stat strong{display:block;font-size:38px;letter-spacing:-.04em}
.stat span{color:var(--muted)}
.section{padding:28px 0}
.panel h2,.section h2{margin:0 0 12px;font-size:42px;letter-spacing:-.05em;line-height:1.06}
.search-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:14px}
select,input,textarea{
  width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--line);
  background:#091223;color:#fff
}
textarea{min-height:120px;resize:vertical}
.simple-grid{display:grid;grid-template-columns:1fr .95fr;gap:20px;margin-top:20px;align-items:start}
.summary-box h3,.survey-box h3{margin:12px 0 12px;font-size:24px}
.summary-list{display:grid;gap:12px}
.summary-item{padding:16px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05)}
.summary-item strong{display:block;font-size:13px;color:#fff;margin-bottom:6px}
.summary-actions{display:flex;gap:10px;flex-wrap:wrap}
.flip-wrap{display:flex;justify-content:center}
.flip-card{
  width:340px;max-width:100%;
  perspective:1400px; position:relative;
}
.flip-inner{
  position:relative; width:100%; min-height:620px;
  transition:transform .85s ease; transform-style:preserve-3d;
}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
@media (hover:hover){
  .flip-card.hoverable:hover .flip-inner{transform:rotateY(180deg)}
}
.card-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:26px; overflow:hidden;
}
.card-front{
  background:var(--card-bg); color:#101828;
  border:8px solid #fff8ef; box-shadow:0 30px 60px rgba(0,0,0,.3)
}
.card-back{
  transform:rotateY(180deg);
  background:linear-gradient(180deg,#0c1526,#0b1220); color:#fff;
  border:1px solid var(--line); box-shadow:0 30px 60px rgba(0,0,0,.3);
  padding:18px;
}
.flip-corner{
  position:absolute; right:12px; bottom:12px; z-index:5;
  padding:10px 12px; border-radius:999px; background:rgba(17,24,39,.88); color:#fff;
  font-size:12px; font-weight:800; border:1px solid rgba(255,255,255,.12)
}
.retro-card .card-head{
  background:var(--card-red);color:#fff;padding:10px 14px;font-weight:900;font-size:30px;
  display:flex;justify-content:space-between;align-items:center
}
.retro-card .card-flag{
  font-size:13px;padding:4px 10px;border:2px solid rgba(255,255,255,.94);border-radius:999px
}
.retro-card .card-image{
  height:240px;background:#d9e4ee;display:flex;align-items:center;justify-content:center
}
.retro-card .card-image img{
  width:100%;height:100%;object-fit:contain
}
.retro-card .card-title{
  background:var(--card-blue);color:#fff;padding:12px 14px;font-weight:900;font-size:24px;line-height:1.05
}
.retro-card .specs{padding:12px 14px}
.retro-card .spec-row{
  display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.16);font-size:14px
}
.retro-card .score{
  margin:10px 14px 16px;background:#111827;color:#fff;border-radius:18px;padding:12px;text-align:center;font-weight:900
}
.stars{color:#ffd74a;letter-spacing:2px}
.back-grid{display:grid;gap:12px}
.back-item{padding:14px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.back-item strong{display:block;font-size:13px;margin-bottom:6px;color:#fff}
.feature-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px
}
.feature-tile{padding:18px}
.feature-tile h4{margin:8px 0}
.footer{
  border-top:1px solid var(--line);margin-top:28px;padding:26px 0 42px
}
.footer-inner{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12px;color:#dce7fb}
.detail-hero{padding:38px 0 12px}
.detail-top h1{font-size:62px;line-height:.95;margin:8px 0 10px;letter-spacing:-.05em}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}
.metric{padding:16px}
.metric strong{display:block;font-size:20px}
.detail-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:22px;align-items:start}
.gallery{
  display:grid;grid-template-columns:2fr 1fr;gap:12px
}
.gallery-main,.gallery-side{
  border-radius:22px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid var(--line)
}
.gallery-main img{height:370px;width:100%;object-fit:contain;background:#dce6ee}
.gallery-col{display:grid;gap:12px}
.gallery-side img{height:179px;width:100%;object-fit:contain;background:#e4edf5}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.info-box h3{margin:4px 0 12px;font-size:18px}
.info-box ul{margin:0;padding-left:18px}
.kv-table{display:grid;grid-template-columns:1fr auto;gap:0;margin-top:8px}
.kv-table div{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.method-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.weight{padding:18px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.weight strong{display:block;font-size:36px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
th{font-size:13px;color:#dbe8ff}
.status-ok{color:#7af0b1}
.notice{padding:14px 16px;border-radius:18px;background:rgba(46,213,138,.12);border:1px solid rgba(46,213,138,.25);color:#d8ffeb}
.notice.warn{background:rgba(255,211,79,.12);border-color:rgba(255,211,79,.28);color:#fff7d1}
.score-rail{
  height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden
}
.score-bar{
  height:100%;background:linear-gradient(90deg,var(--brand-2),#9ceeff);width:0;transition:width 1s ease
}
.form-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 18px}
.hidden{display:none !important}
.align-end{display:flex;align-items:end}
@media (max-width: 1100px){
  .hero,.simple-grid,.detail-layout{grid-template-columns:1fr}
  .search-grid{grid-template-columns:1fr 1fr 1fr}
  .metrics,.method-grid,.feature-strip,.stats,.info-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav{display:none}
  .hero h1,.detail-top h1{font-size:42px}
  .panel h2,.section h2{font-size:34px}
  .search-grid,.metrics,.method-grid,.feature-strip,.stats,.info-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .footer-inner{flex-direction:column}
}


.rank-toolbar{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0 20px
}
.rank-sections{display:grid;gap:22px}
.rank-section{
  padding:22px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.04));
  border:1px solid var(--line);box-shadow:var(--shadow)
}
.rank-section-head{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px
}
.rank-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px
}
.rank-card{
  display:block;padding:18px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid var(--line);
  transition:transform .18s ease, border-color .18s ease
}
.rank-card:hover{transform:translateY(-2px);border-color:rgba(77,213,255,.35)}
.rank-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}
.rank-badge,.rank-code{
  font-size:12px;font-weight:800;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)
}
.rank-title{font-size:24px;font-weight:900;line-height:1;margin-bottom:8px}
.rank-sub{color:var(--muted);font-size:14px;margin-bottom:12px}
.rank-stats{display:flex;justify-content:space-between;gap:12px;color:#dce7fb;font-size:13px;padding:7px 0;border-top:1px solid rgba(255,255,255,.07)}
@media (max-width:1100px){.rank-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.rank-grid{grid-template-columns:1fr}}


/* Ajustes de espacio para evitar contenido mordido */
.info-box > :first-child,.panel > :first-child,.summary-box > :first-child,.survey-box > :first-child,.section-card > :first-child{margin-top:0}
.info-box ul li{margin:6px 0}
.detail-top{padding-top:6px}
#cardHolder,.flip-wrap{padding:4px 0 6px}

/* Tops con cards retro clásicas */
.rank-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:start
}
.rank-item{display:flex;flex-direction:column;gap:14px;align-items:center}
.rank-meta{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line)
}
.rank-meta-left{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rank-badge,.rank-code{font-size:12px;font-weight:800;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.rank-meta-title{font-size:14px;color:var(--muted)}
.rank-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.flip-card.compact{width:300px;max-width:100%}
.flip-card.compact .flip-inner{min-height:600px}
.flip-card.compact .retro-card .card-head{font-size:24px;padding:9px 12px}
.flip-card.compact .retro-card .card-flag{font-size:12px;padding:3px 9px}
.flip-card.compact .retro-card .card-image{height:208px}
.flip-card.compact .retro-card .card-title{font-size:20px;padding:11px 12px}
.flip-card.compact .retro-card .specs{padding:10px 12px}
.flip-card.compact .retro-card .spec-row{font-size:13px;padding:6px 0}
.flip-card.compact .retro-card .score{font-size:13px;padding:10px;margin:8px 12px 14px}
.flip-card.compact .card-back{padding:16px}
.flip-card.compact .card-back h3{font-size:24px !important;line-height:1.05}
.flip-card.compact .back-item{padding:12px}

@media (max-width:1100px){
  .rank-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
@media (max-width:720px){
  .flip-card,.flip-card.compact{width:100%}
  .flip-card .flip-inner{min-height:610px}
  .flip-card.compact .flip-inner{min-height:590px}
}


/* v6 refinamientos */
.panel,.summary-box,.survey-box,.section-card,.info-box,.rank-section{padding-top:28px}
.panel{padding-top:30px}
.eyebrow{display:block;line-height:1.35;margin-bottom:10px}
.panel h2,.section h2{line-height:1.1}
.summary-box h3,.survey-box h3,.info-box h3{margin:0 0 14px;font-size:18px;line-height:1.15}
.info-box .eyebrow,.summary-box .eyebrow,.survey-box .eyebrow{margin-bottom:8px}
.info-box,.survey-box,.summary-box{overflow:hidden}
.kv-table{margin-top:10px}
.kv-table div{padding:12px 0}
.rank-section{padding:26px 22px 24px}
.rank-section-head h3{line-height:1.08}
.rank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:start}
.rank-item{align-items:center}
.flip-card.compact{width:290px;max-width:100%}
.flip-card.compact .flip-inner{min-height:575px}
.flip-card.compact .retro-card .card-image{height:196px}
.flip-card.compact .retro-card .card-title{font-size:19px}
.flip-card.compact .retro-card .spec-row{font-size:12.5px;padding:5px 0}
.flip-card.compact .retro-card .score{font-size:12.5px;line-height:1.3}
.flip-card.compact .card-back{padding:15px}
.flip-card.compact .card-back h3{font-size:22px !important;line-height:1.06}
.flip-card.compact .back-grid{gap:10px}
.flip-card.compact .back-item{padding:10px;font-size:13px}
.field-help{margin:12px 2px 8px;color:var(--muted);font-size:13px;line-height:1.45}
@media (max-width: 720px){
  .panel,.summary-box,.survey-box,.section-card,.info-box,.rank-section{padding-top:24px}
  .flip-card.compact .flip-inner{min-height:560px}
}


/* v6.1 ajuste fino del bloque principal en inicio */
#buscar.panel{
  padding:30px 34px 30px 34px;
}
#buscar.panel > .eyebrow,
#buscar.panel > h2,
#buscar.panel > p{
  padding-left:2px;
}
#buscar .simple-grid{
  margin-top:22px;
}
#buscar .summary-box{
  padding:28px 28px 18px 28px;
}
#buscar .summary-box .eyebrow,
#buscar .summary-box h3,
#buscar .summary-box .summary-list,
#buscar .summary-box .summary-actions{
  margin-left:2px;
}
@media (max-width: 720px){
  #buscar.panel{
    padding:24px 22px 24px 22px;
  }
  #buscar .summary-box{
    padding:22px 20px 16px 20px;
  }
}


/* v6.2 estética vintage + startup */
:root{
  --bg:#07101d;
  --bg-2:#0c1728;
  --panel:rgba(255,245,228,.055);
  --line:rgba(255,225,186,.13);
  --text:#f4efe6;
  --muted:#aeb8cb;
  --brand:#ff6e5d;
  --brand-2:#63d7f8;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --card-bg:#efe3cd;
  --card-blue:#4baee0;
  --card-red:#f25b4b;
}
body{
  position:relative;
  background:
    radial-gradient(circle at 12% 14%, rgba(255,110,93,.14), transparent 28%),
    radial-gradient(circle at 84% 16%, rgba(99,215,248,.12), transparent 28%),
    radial-gradient(circle at 50% 120%, rgba(255,221,160,.06), transparent 24%),
    linear-gradient(180deg,#06101d 0%,#081321 38%,#091524 100%);
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 5px);
  opacity:.18;
}
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  box-shadow:inset 0 0 160px rgba(0,0,0,.34);
}
.topbar{
  background:linear-gradient(180deg, rgba(7,12,24,.84), rgba(7,12,24,.72));
  border-bottom:1px solid rgba(255,226,190,.09);
}
.brand-mark{
  border:1px solid rgba(255,248,236,.18);
  box-shadow:0 14px 34px rgba(255,110,93,.28);
}
.nav a{color:#e6e2db}
.nav a:hover{color:#fff5eb}
.btn,button{
  background:linear-gradient(135deg, #ff6d5e, #ff8e72);
  box-shadow:0 16px 34px rgba(255,97,79,.22);
}
button.ghost,.btn.ghost,.pill,.tag,.choice-btn,.tab-btn{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.035));
  border-color:rgba(255,225,186,.12);
}
.choice-box,.panel,.stat,.summary-box,.panel-lite,.info-box,.feature-tile,.metric,.survey-box,.section-card,.rank-section{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.038)),
    linear-gradient(135deg, rgba(255,110,93,.03), transparent 40%, rgba(99,215,248,.03));
  border:1px solid rgba(255,225,186,.11);
  box-shadow:0 28px 80px rgba(0,0,0,.32);
  backdrop-filter:blur(14px);
}
.choice-box::after,.panel::after,.summary-box::after,.survey-box::after,.section-card::after,.info-box::after,.rank-section::after{
  content:"";
  position:absolute; inset:1px; pointer-events:none; border-radius:calc(var(--radius) - 1px);
  box-shadow:inset 0 1px 0 rgba(255,248,236,.05);
}
.hero h1,.panel h2,.section h2,.detail-top h1{
  letter-spacing:-.055em;
}
.eyebrow{
  color:#6ddbff;
  text-shadow:0 0 18px rgba(99,215,248,.18);
}
select,input,textarea{
  background:rgba(5,15,30,.88);
  border-color:rgba(255,225,186,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.summary-item,.back-item,.weight,.gallery-main,.gallery-side,.rank-meta{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border-color:rgba(255,225,186,.10);
}
.retro-card .card-head{
  background:linear-gradient(180deg,#f55f4f,#ef5142);
}
.retro-card .card-title{
  background:linear-gradient(180deg,#45b0e3,#3aa2d5);
}
.card-front{
  border-color:#f8efe2;
  box-shadow:0 32px 60px rgba(0,0,0,.30), 0 0 0 1px rgba(110,74,34,.08);
}
.flip-corner{
  background:rgba(11,18,30,.9);
  border-color:rgba(255,233,204,.12);
}
.rank-item{
  padding:6px 2px;
}
.rank-meta-title{
  color:#c2cbda;
}
.footer{
  border-top:1px solid rgba(255,225,186,.08);
}
/* mejora final del alineado izquierdo en inicio */
#buscar.panel{
  padding:32px 42px 32px 42px;
}
#buscar.panel > .eyebrow,
#buscar.panel > h2,
#buscar.panel > p{
  padding-left:6px;
}
#buscar .search-grid{
  margin-left:6px;
}
#buscar .simple-grid{
  margin-top:24px;
  margin-left:6px;
}
#buscar .summary-box{
  padding:30px 30px 20px 30px;
}
#buscar .summary-box .eyebrow,
#buscar .summary-box h3,
#buscar .summary-box .summary-list,
#buscar .summary-box .summary-actions{
  margin-left:0;
}
@media (max-width: 720px){
  #buscar.panel{
    padding:24px 20px 24px 20px;
  }
  #buscar.panel > .eyebrow,
  #buscar.panel > h2,
  #buscar.panel > p,
  #buscar .search-grid,
  #buscar .simple-grid{
    padding-left:0;
    margin-left:0;
  }
  #buscar .summary-box{
    padding:22px 18px 16px 18px;
  }
}


/* v6.3 tops: filtros por categoría y top 10 por cuadro */
.rank-toolbar-extended{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:12px;
  align-items:end;
}
.toolbar-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.toolbar-field label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.rank-toolbar-extended > .pill{
  align-self:end;
  justify-self:start;
  min-height:46px;
  display:flex;
  align-items:center;
}
.rank-toolbar-extended select:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.rank-section-side{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rank-grid.rank-grid-top10{
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:18px;
  align-items:start;
}
.rank-grid.rank-grid-top10 .rank-item{
  gap:12px;
}
.rank-grid.rank-grid-top10 .flip-card.compact{
  width:100%;
  max-width:240px;
}
.rank-grid.rank-grid-top10 .flip-card.compact .flip-inner{
  min-height:500px;
}
.rank-grid.rank-grid-top10 .flip-card.compact .retro-card .card-head{
  font-size:20px;
  padding:8px 10px;
}
.rank-grid.rank-grid-top10 .flip-card.compact .retro-card .card-flag{
  font-size:10px;
  padding:3px 8px;
}
.rank-grid.rank-grid-top10 .flip-card.compact .retro-card .card-image{
  height:160px;
}
.rank-grid.rank-grid-top10 .flip-card.compact .retro-card .card-title{
  font-size:16px;
  padding:10px 10px;
}
.rank-grid.rank-grid-top10 .flip-card.compact .retro-card .specs{
  padding:8px 10px;
}
.rank-grid.rank-grid-top10 .flip-card.compact .retro-card .spec-row{
  font-size:11.5px;
  padding:4px 0;
}
.rank-grid.rank-grid-top10 .flip-card.compact .retro-card .score{
  font-size:11px;
  margin:8px 10px 12px;
  padding:9px;
}
.rank-grid.rank-grid-top10 .flip-card.compact .card-back{
  padding:12px;
}
.rank-grid.rank-grid-top10 .flip-card.compact .card-back h3{
  font-size:18px !important;
}
.rank-grid.rank-grid-top10 .flip-card.compact .back-grid{
  gap:8px;
}
.rank-grid.rank-grid-top10 .flip-card.compact .back-item{
  padding:8px;
  font-size:11.5px;
}
.rank-grid.rank-grid-top10 .rank-meta{
  padding:9px 10px;
  min-height:64px;
  align-items:flex-start;
}
.rank-grid.rank-grid-top10 .rank-meta-title{
  font-size:13px;
  line-height:1.3;
}
.rank-grid.rank-grid-top10 .rank-cta{
  width:100%;
}
.rank-grid.rank-grid-top10 .rank-cta .btn.small,
.rank-grid.rank-grid-top10 .rank-cta .btn.ghost.small{
  font-size:11px;
  padding:10px 12px;
}
@media (max-width: 1500px){
  .rank-toolbar-extended{grid-template-columns:repeat(4, minmax(0,1fr));}
  .rank-toolbar-extended > .pill{grid-column:1 / -1;}
  .rank-grid.rank-grid-top10{grid-template-columns:repeat(4, minmax(0,1fr));}
}
@media (max-width: 1180px){
  .rank-toolbar-extended{grid-template-columns:repeat(2, minmax(0,1fr));}
  .rank-grid.rank-grid-top10{grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width: 860px){
  .rank-grid.rank-grid-top10{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 620px){
  .rank-toolbar-extended{grid-template-columns:1fr;}
  .rank-grid.rank-grid-top10{grid-template-columns:1fr;}
  .rank-grid.rank-grid-top10 .flip-card.compact{max-width:100%;}
}


/* v6.4 tops: ocultar filtros irrelevantes según tipo */
.toolbar-field{
  transition:opacity .22s ease, transform .22s ease, max-height .22s ease, margin .22s ease, padding .22s ease;
}
.toolbar-field.is-hidden{
  opacity:0;
  transform:translateY(-6px) scale(.98);
  pointer-events:none;
  max-height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  gap:0;
}
.toolbar-field.is-hidden label,
.toolbar-field.is-hidden select{
  display:none;
}
.field-help.subtle{
  margin-top:-4px;
  opacity:.88;
}


/* v6.5 tops: encapsular mejor el cuadro de filtros y dar aire interno */
.filter-panel{
  padding:20px 22px 18px;
  margin:18px 0 22px;
}
.filter-panel .rank-toolbar{
  margin:0;
}
.filter-panel .field-help{
  margin:12px 2px 0;
  max-width:100%;
}
.filter-panel .field-help.subtle{
  margin-top:6px;
}
.rank-toolbar-extended{
  gap:14px;
}
.rank-toolbar-extended > .pill{
  justify-self:stretch;
  width:100%;
  min-height:50px;
  border-radius:20px;
  padding:12px 16px;
}
.toolbar-field{
  min-width:0;
}
.toolbar-field label{
  padding-left:2px;
}
.toolbar-field select{
  min-height:50px;
}
@media (max-width:1180px){
  .filter-panel{
    padding:18px 18px 16px;
  }
}
@media (max-width:620px){
  .filter-panel{
    padding:16px 14px 14px;
  }
}


/* Admin panel only: no toca el estilo público */
.admin-tabbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0 22px;
}
.admin-tab-btn{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:999px;
  padding:12px 18px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.admin-tab-btn.active{
  background:linear-gradient(135deg,var(--brand),#ff8e72);
  color:white;
  box-shadow:0 16px 34px rgba(255,97,79,.22);
}
[data-admin-view].hidden{
  display:none;
}
.image-chip{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  margin:6px 0;
  font-size:13px;
  color:var(--muted);
  word-break:break-all;
}
pre.section-card{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  line-height:1.45;
}
@media (max-width: 900px){
  .admin-tabbar{gap:10px}
}


.inventory-filter-grid{align-items:end}
.inventory-filter-grid input,
.inventory-filter-grid select{min-height:52px}
#dbEditForm textarea{min-height:92px}
#dbLockedType,#dbLockedBrand,#dbLockedLine,#dbLockedVersion,#dbLockedYear{
  opacity:.72;
}

.admin-vehicle-picker{align-items:end}
#dbEditForm .eyebrow{margin-top:6px}
#dbEditForm textarea{min-height:88px}
#marketVehicle{display:none}


.admin-form-grid{align-items:start}
.admin-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.admin-field label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800;padding-left:2px}
.admin-field.full-span{width:100%}
.admin-field textarea{min-height:104px}
.admin-field select,.admin-field input,.admin-field textarea{width:100%}


/* v7.4.1 ajustes panel base de datos */
[data-admin-view="inventory"] .info-grid{
  grid-template-columns:1.3fr .95fr;
  align-items:start;
}
#dbEditForm{
  min-width:0;
}
#dbEditForm .admin-form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
#dbEditForm .admin-form-grid:first-of-type{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
#dbEditForm .admin-field{
  min-width:0;
}
#dbEditForm .admin-field label{
  white-space:normal;
  line-height:1.25;
  word-break:break-word;
  font-size:11px;
  letter-spacing:.07em;
}
#dbEditForm .admin-field select,
#dbEditForm .admin-field input,
#dbEditForm .admin-field textarea{
  min-width:0;
}
#dbEditForm .admin-field textarea{
  min-height:96px;
}
#dbEditNote{
  max-width:100%;
  line-height:1.45;
}
@media (max-width:1200px){
  [data-admin-view="inventory"] .info-grid{
    grid-template-columns:1fr;
  }
  #dbEditForm .admin-form-grid:first-of-type{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:720px){
  #dbEditForm .admin-form-grid,
  #dbEditForm .admin-form-grid:first-of-type{
    grid-template-columns:1fr !important;
  }
}