/* comparar.html — "El Duelo": estilos propios (contrato: ../../CONTRATO-DISENO.md).
   Reusa el componente compartido .duel/.rival/.metric/.bar/.verdict; solo agrega el selector
   de productos y las filas extra que necesita la comparación (chips, avisos, ficha técnica). */

.cmp-hero{padding:26px 0 6px}
.cmp-hero h1{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.02em;margin:16px 0 12px}
.cmp-hero p{color:var(--fu-muted);max-width:44em;font-size:15.5px}

/* selector de productos */
.picker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:8px}
#picker-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 6px 0 14px;border-radius:999px;border:1px solid var(--fu-line-2);background:var(--fu-surface);font-size:13.5px}
.chip button{width:22px;height:22px;border-radius:50%;border:0;background:var(--fu-surface-2);color:var(--fu-text);display:grid;place-items:center;cursor:pointer;font-size:14px;line-height:1;font-family:inherit}
.chip button:hover{background:var(--fu-line-2)}
.picker-add{display:flex;align-items:center;gap:8px}
.picker-add select{height:38px;border-radius:999px;border:1px solid var(--fu-line-2);background:var(--fu-bg);color:var(--fu-text);padding:0 14px;font:inherit;font-size:13.5px;max-width:280px}
.picker-add select:disabled{opacity:.5;cursor:not-allowed}
.picker-add .btn{height:38px;padding:0 18px;font-size:13.5px}
.picker-note{font-size:12.5px;color:var(--fu-faint);margin-top:10px}

/* contenido extra dentro de cada .rival del sistema compartido */
.rival .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.rival .aviso{margin-top:12px;font-size:12.5px;color:var(--fu-muted);background:var(--fu-surface-2);border-radius:var(--fu-radius-sm);padding:10px 12px;line-height:1.55}
.rival .group-title{margin-top:22px;padding-top:16px;border-top:1px solid var(--fu-line);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fu-faint)}
.rival .metric.pend .row b{color:var(--fu-faint);font-style:italic;font-weight:400}

.empty-cmp{border:1px dashed var(--fu-line-2);border-radius:var(--fu-radius);padding:48px 24px;text-align:center;color:var(--fu-muted)}

/* 1 o 2 productos: no repartir en 3 columnas fijas */
#duel[data-n="1"]{grid-template-columns:minmax(0,1fr);max-width:420px}
#duel[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:760px){
  .picker{flex-direction:column;align-items:stretch}
  .picker-add{flex-wrap:wrap}
  .picker-add select{max-width:none;flex:1}
  #duel[data-n="1"]{max-width:none}
}
/* menos aire entre el título y el selector (revisión 2026-09-22) */
.cmp-hero{padding-bottom:28px}
section.block.duelo{padding-top:36px}

/* ---- comparador por categoría + tabla de componentes (2026-09-22) ---- */
.cmp-grupo{margin-top:10px;font-size:14px;color:var(--fu-muted)}
.cmp-grupo b{color:var(--fu-text)}
.chip small{color:var(--fu-faint);font-size:12px}
.rival.anterior{background:var(--fu-bg-2)}
.rival .sin-precio{margin-top:16px;font-size:13px;color:var(--fu-faint)}
.rival .metric b i{font-style:normal;color:var(--fu-faint);font-weight:500}
.rival-cta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--fu-line)}
.rival-cta .quote{border:0;cursor:pointer;font-family:inherit}
.rival-link{font-size:13.5px;color:var(--fu-muted)}
.rival-link:hover{color:var(--fu-text)}
.specs-cmp{margin-top:56px}
.specs-head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.specs-head h2{font-size:clamp(24px,2.8vw,34px);letter-spacing:-.02em}
.specs-head p{color:var(--fu-muted);margin-top:6px}
.solo-dif{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--fu-text);cursor:pointer;user-select:none;position:relative}
.solo-dif input{position:absolute;opacity:0;pointer-events:none}
.solo-dif .sw{width:40px;height:24px;border-radius:999px;background:var(--fu-surface-2);border:1px solid var(--fu-line-2);position:relative;transition:background var(--fu-dur-base) ease}
.solo-dif .sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--fu-text);transition:transform var(--fu-dur-base) var(--fu-ease)}
.solo-dif input:checked+.sw{background:var(--fu-cta-bg)}
.solo-dif input:checked+.sw::after{transform:translateX(16px);background:var(--fu-cta-text)}
.solo-dif input:focus-visible+.sw{outline:2px solid var(--fu-text);outline-offset:2px}
.spec-scroll{overflow-x:auto;border:1px solid var(--fu-line);border-radius:var(--fu-radius);background:var(--fu-bg)}
.spec-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.spec-table th,.spec-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--fu-line);vertical-align:top}
.spec-table thead th{background:var(--fu-surface);font-size:13.5px;font-weight:600}
.spec-table thead th small{display:block;font-weight:500;color:var(--fu-faint);font-size:11.5px;margin-top:2px}
.spec-table tbody th{width:26%;font-weight:500;color:var(--fu-muted);position:sticky;left:0;background:var(--fu-bg)}
.spec-table tr.sec th{background:var(--fu-bg-2);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fu-faint);padding:10px 16px}
.spec-table tr.cambia td{color:var(--fu-text);font-weight:600}
.spec-table tr.cambia th{color:var(--fu-text)}
.spec-table .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--fu-text);margin-left:8px;vertical-align:middle}
.spec-table .src{font-size:12px;color:var(--fu-faint);margin-left:4px;font-weight:400}
.spec-table .src:hover{color:var(--fu-text)}
.spec-table .pc{color:var(--fu-faint);font-style:italic;font-weight:400}
.spec-table tbody tr:not(.sec){animation:fu-in var(--fu-dur-base) var(--fu-ease) both;animation-delay:calc(var(--i,0) * 18ms)}
@media (max-width:760px){.spec-table tbody th{width:40%}.specs-head{align-items:start}}
.picker-add[hidden]{display:none}

/* ---- tabla de componentes v2 (2026-09-22, observación de Gabriel): las diferencias saltan a la vista ---- */
.spec-scroll{border-radius:var(--fu-radius);border:1px solid var(--fu-line);background:var(--fu-surface);overflow:auto}
.spec-table{font-size:14.5px;min-width:600px}
.spec-table th,.spec-table td{text-align:left!important;padding:14px 18px;border-bottom:1px solid var(--fu-line)}
.spec-table thead th{background:var(--fu-surface);color:var(--fu-text);font-size:14px;font-weight:600;border-bottom:1px solid var(--fu-line-2);vertical-align:bottom}
.spec-table thead th:first-child{color:var(--fu-faint);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.spec-table thead th small{display:block;margin-top:3px;font-size:11.5px;font-weight:500;color:var(--fu-faint);letter-spacing:0;text-transform:none}
.spec-table tbody th{background:var(--fu-surface);color:var(--fu-muted);font-weight:500;width:24%;white-space:nowrap}
.spec-table td{color:var(--fu-muted);line-height:1.45}
.spec-table tr.sec th{background:var(--fu-bg-2)!important;color:var(--fu-faint)!important;font-size:11px!important;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:12px 18px!important;border-bottom:1px solid var(--fu-line)}
.spec-table tr.cambia th{color:var(--fu-text);box-shadow:inset 3px 0 0 var(--fu-text)}
.spec-table tr.cambia td{color:var(--fu-text);font-weight:600}
.spec-table tbody tr:not(.sec):hover td,.spec-table tbody tr:not(.sec):hover th{background:var(--fu-surface-2)}
.cambia-chip{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:999px;border:1px solid var(--fu-line-2);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fu-text);vertical-align:middle}
.spec-table .src{opacity:.55;text-decoration:none}
.spec-table .src:hover{opacity:1}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:0}
@media (max-width:760px){.spec-table tbody th{white-space:normal;width:38%}.spec-table th,.spec-table td{padding:12px 14px}}