:root { --bg:#050d1f; --panel:#0b1c36; --panel-soft:#08152b; --line:#2f4d78; --text:#edf3ff; --muted:#a9bddb; --gold:#f0d28f; --gold-border:rgba(230,195,106,.28); --green:#5adb7c; --red:#db5a5a; }
* { box-sizing: border-box; }
body { margin:0; font-family:'Inter',sans-serif; background:#050d1f url('../textura.png') center/cover fixed; color:var(--text); }

.page-shell { width:min(1300px, calc(100% - 32px)); margin:16px auto 60px; }
.breadcrumbs { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:15px; margin-bottom:14px; }
.breadcrumbs a { color:#f0dba8; text-decoration:none; }
.hero { border:1px solid var(--gold-border); border-radius:12px; background:linear-gradient(130deg,rgba(9,24,50,.95),rgba(8,18,35,.88)); padding:22px 28px; margin-bottom:24px; }
.eyebrow { margin:0; color:#f2daa2; text-transform:uppercase; font-size:12px; letter-spacing:2px; font-weight:700; }
.hero h1 { margin:5px 0 7px; font-family:'Cinzel',serif; font-size:clamp(22px,3vw,36px); }
.copy { margin:0; color:#c8d8f0; font-size:15px; }

/* ── Layout ── */
.comparador-layout { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:start; }

/* ── Slot ── */
.comp-slot { background:linear-gradient(180deg,var(--panel),var(--panel-soft)); border:1px solid var(--gold-border); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.slot-search-wrap { position:relative; }
.slot-search-bar { display:flex; align-items:center; gap:8px; background:#0c1f3d; border:1px solid var(--line); border-radius:8px; padding:0 12px; transition:border-color .15s; }
.slot-search-bar:focus-within { border-color:var(--gold); }
.slot-search-bar i { color:var(--muted); font-size:14px; }
.slot-input { flex:1; background:transparent; border:none; outline:none; color:var(--text); font-size:14px; padding:10px 6px; font-family:'Inter',sans-serif; }
.slot-input::placeholder { color:#4a6080; }

/* Dropdown */
.slot-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#0d1f3a; border:1px solid var(--line); border-radius:8px; max-height:280px; overflow-y:auto; z-index:100; display:none; }
.slot-dropdown.open { display:block; }
.slot-dropdown::-webkit-scrollbar { width:4px; }
.slot-dropdown::-webkit-scrollbar-thumb { background:#2f4d78; border-radius:4px; }
.dd-item { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:8px; width:100%; padding:8px 10px; background:transparent; border:none; border-bottom:1px solid rgba(47,77,120,.3); color:var(--text); cursor:pointer; text-align:left; transition:background .1s; }
.dd-item:last-child { border-bottom:none; }
.dd-item:hover { background:rgba(240,210,143,.06); }
.dd-item img { width:32px; height:32px; object-fit:contain; background:#dce8f4; border-radius:5px; }
.dd-name { font-size:13px; font-weight:600; }
.dd-sub { font-size:11px; color:var(--muted); white-space:nowrap; }
.dd-empty { padding:12px; text-align:center; color:var(--muted); font-size:13px; }
mark { background:rgba(240,210,143,.3); color:var(--gold); border-radius:2px; padding:0 1px; }

/* ── Card ── */
.slot-card .slot-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:40px 20px; color:var(--muted); opacity:.5; font-size:13px; }
.slot-card .slot-empty i { font-size:28px; }
.item-header { display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.item-img-wrap { width:64px; height:64px; flex-shrink:0; background:#dce8f4; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.item-img-wrap img { width:100%; height:100%; object-fit:contain; }
.item-meta { flex:1; display:flex; flex-direction:column; gap:4px; }
.item-name { font-size:15px; font-weight:700; color:var(--gold); }
.item-type { font-size:12px; color:var(--muted); }
.item-link { font-size:11px; color:#6b9ad4; text-decoration:none; display:flex; align-items:center; gap:4px; margin-top:2px; }
.item-link:hover { color:var(--gold); }
.item-effects { margin:0; padding:0 0 0 16px; display:flex; flex-direction:column; gap:3px; }
.item-effects li { font-size:12px; color:#c8d8f0; }
.btn-clear { margin-top:12px; padding:6px 12px; background:transparent; border:1px solid rgba(200,80,80,.4); border-radius:6px; color:#db7a7a; font-size:12px; cursor:pointer; transition:all .12s; display:flex; align-items:center; gap:5px; }
.btn-clear:hover { border-color:#db5a5a; color:#ff9090; }

/* ── VS col ── */
.vs-col { display:flex; flex-direction:column; align-items:center; gap:20px; padding-top:60px; }
.vs-badge { font-family:'Cinzel',serif; font-size:22px; font-weight:700; color:var(--gold); background:rgba(240,210,143,.1); border:2px solid var(--gold-border); border-radius:50%; width:52px; height:52px; display:flex; align-items:center; justify-content:center; }
.comp-hint { color:var(--muted); font-size:13px; text-align:center; max-width:120px; }

/* ── Comparison table ── */
.comp-table { width:100%; border-collapse:collapse; min-width:240px; }
.comp-table th { padding:6px 10px; font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; background:rgba(47,77,120,.3); }
.th-stat { text-align:center; }
.th-item { max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.comp-table td { padding:5px 10px; font-size:12px; border-bottom:1px solid rgba(47,77,120,.25); text-align:center; }
.stat-key { color:var(--muted); white-space:nowrap; padding:5px 8px; }
.stat-val { font-weight:700; font-size:13px; min-width:70px; }
.stat-val.better { color:var(--green); }
.stat-val.worse  { color:var(--red); }
.stat-val.equal  { color:var(--muted); }
.comp-table tr:hover td { background:rgba(240,210,143,.04); }

@media (max-width:900px) {
  .comparador-layout { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .vs-col { flex-direction:row; padding-top:0; justify-content:center; }
  .comp-table { min-width:100%; }
}