/* ═══════════════════════════════════════════════════════════════════════════
   Comparador de builds — neumorfismo sobre la paleta de PCinfo
   ───────────────────────────────────────────────────────────────────────────
   El neumorfismo funciona cuando la tarjeta y el fondo son EL MISMO color y
   lo único que los separa son dos sombras: una oscura abajo-derecha y una
   clara arriba-izquierda. Por eso aquí no hay bordes de 1px por todas partes:
   el relieve lo hacen las sombras.

   En oscuro hay que tener cuidado: la sombra clara casi no se ve, así que se
   sube a rgba(255,255,255,.045) y la oscura se hace más profunda. Con menos
   contraste el relieve desaparece y todo se ve plano y sucio.

   El naranja se reserva para los acentos y para "quién gana". La letra B usa
   el mismo naranja en versión apagada: dos tonos del mismo color distinguen
   las dos builds sin meter un azul que no es de la casa.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Gris PURO en los tres: R = G = B siempre. La primera versión usaba
       #232326, con el azul un punto por encima del rojo y el verde, y a
       simple vista se veía frío.

       Fondo en rgb(13,13,13), el de la web. Las superficies suben a
       rgb(30,30,30): con todo al mismo nivel se veía demasiado oscuro, y
       además el relieve se quedaba sin recorrido — la sombra negra solo podía
       bajar 10 puntos antes de tocar el negro. Levantando la tarjeta, el
       relieve pasa de 23 puntos de rango a 37. */
    --cbd-fondo:   #0d0d0d;   /* rgb(13,13,13) — el fondo del sitio */
    --cbd-sup:     #1e1e1e;   /* rgb(30,30,30) — tarjetas y botones */
    --cbd-hueco:   #141414;   /* rgb(20,20,20) — lo hundido, entre los dos */
    --cbd-luz:     rgba(255, 255, 255, .06);
    --cbd-sombra:  rgba(0, 0, 0, .8);
    --cbd-a:       #ff7b3a;
    --cbd-b:       #b8763f;
    --cbd-bien:    #4caf7d;
    --cbd-mal:     #e5484d;
    --cbd-r:       16px;
}

/* Relieve hacia fuera: la superficie sobresale del fondo */
.cbd-card,
.cbd-elegir-btn {
    background: var(--cbd-sup);
    border-radius: var(--cbd-r);
    box-shadow: 6px 6px 14px var(--cbd-sombra), -6px -6px 14px var(--cbd-luz);
}
/* Relieve hacia dentro: huecos, barras y campos */
.cbd-barra,
.cbd-sel-campo select,
.cbd-compat-lista,
.cbd-piezas {
    background: var(--cbd-hueco);
    box-shadow: inset 4px 4px 9px var(--cbd-sombra), inset -3px -3px 8px var(--cbd-luz);
}

/* El neumorfismo necesita que la tarjeta y el fondo sean el MISMO color: el
   relieve lo hacen solo las sombras. Con el patrón de rayas del sitio detrás,
   las tarjetas se ven pegadas encima y planas, así que en esta página el fondo
   se aplana a propósito. */
.cbd-body { background-color: var(--cbd-fondo) !important; }
.cbd-body::before,
.cbd-body::after { display: none !important; }

/* La navbar es semitransparente y con desenfoque, así que toma el color de lo
   que tiene detrás. Con el fondo ya en rgb(13,13,13) —prácticamente el mismo
   que el resto del sitio— vuelve a verse igual sin tocarle nada. */

.cbd {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.6rem 1.2rem 5rem;
    display: flex; flex-direction: column; gap: 1.2rem;
    color: var(--text-primary);
}

/* ── Cabecera ───────────────────────────────────────────────────────── */
.cbd-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap; padding: .3rem 0 .6rem;
}
.cbd-top-id { display: flex; align-items: center; gap: 1rem; }
.cbd-ico-grande {
    width: 54px; height: 54px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; font-size: 1.35rem; color: var(--cbd-a);
    background: var(--cbd-sup);
    box-shadow: 5px 5px 11px var(--cbd-sombra), -5px -5px 11px var(--cbd-luz);
}
.cbd-top h1 { margin: 0; font-size: 1.75rem; letter-spacing: -.02em; }
.cbd-top p  { margin: .15rem 0 0; color: var(--text-secondary); font-size: .88rem; }
.cbd-top-acc { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ── Botones ────────────────────────────────────────────────────────── */
.cbd-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.15rem; border-radius: 11px; border: 0;
    background: var(--cbd-sup); color: var(--text-secondary);
    font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none;
    box-shadow: 4px 4px 9px var(--cbd-sombra), -4px -4px 9px var(--cbd-luz);
    transition: box-shadow .18s ease, color .18s ease, transform .18s ease;
}
.cbd-btn:hover { color: var(--text-primary); transform: translateY(-1px); }
.cbd-btn:active { box-shadow: inset 3px 3px 7px var(--cbd-sombra), inset -3px -3px 7px var(--cbd-luz); transform: none; }
.cbd-btn-acc { color: var(--cbd-a); }
.cbd-btn-acc:hover { color: #ffa06e; }

/* ── Etiquetas A / B ────────────────────────────────────────────────── */
.cbd-tag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.45rem; height: 1.45rem; flex-shrink: 0;
    border-radius: 7px; font-size: .68rem; font-weight: 800; letter-spacing: 0;
}
.cbd-tag-a { background: rgba(255,123,58,.18);  color: var(--cbd-a); }
.cbd-tag-b { background: rgba(184,118,63,.20);  color: #d9925c; }

/* ── Selector ───────────────────────────────────────────────────────── */
.cbd-sel {
    display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
    padding: 1.1rem 1.3rem;
}
.cbd-sel-campo { display: flex; flex-direction: column; gap: .45rem; flex: 1 1 230px; min-width: 0; }
.cbd-sel-corto { flex: 0 1 150px; }
.cbd-sel-campo label {
    display: flex; align-items: center; gap: .45rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-secondary);
}
.cbd-sel-campo select {
    border: 0; border-radius: 10px; padding: .62rem .8rem;
    color: var(--text-primary); font-size: .9rem; width: 100%;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                      linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.cbd-sel-campo select:focus { outline: 2px solid var(--cbd-a); outline-offset: 2px; }

/* ── Estados vacíos ─────────────────────────────────────────────────── */
.cbd-vacio { text-align: center; padding: 3rem 1.5rem; }
.cbd-vacio > i { font-size: 2.4rem; color: var(--cbd-a); opacity: .65; }
.cbd-vacio h2 { margin: 1rem 0 .4rem; font-size: 1.15rem; }
.cbd-vacio p  { margin: 0 0 1.3rem; color: var(--text-secondary); font-size: .92rem; }

/* ── Rejilla principal ──────────────────────────────────────────────── */
.cbd-rejilla {
    display: grid; gap: 1.2rem;
    grid-template-columns: 265px 1fr 1fr 265px;
    align-items: start;
}
.cbd-card { padding: 1.2rem 1.3rem; }

.cbd-h2 {
    display: flex; align-items: center; gap: .55rem;
    margin: 0 0 1rem; font-size: .76rem; font-weight: 800;
    letter-spacing: .11em; text-transform: uppercase; color: var(--cbd-a);
}
.cbd-intro { margin: -.4rem 0 1.1rem; color: var(--text-secondary); font-size: .87rem; max-width: 78ch; }

/* ── Compatibilidad ─────────────────────────────────────────────────── */
.cbd-compat { display: flex; flex-direction: column; gap: .7rem; }
.cbd-compat-estado {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem;
    padding: .7rem .85rem; border-radius: 11px;
    box-shadow: inset 3px 3px 7px var(--cbd-sombra), inset -2px -2px 6px var(--cbd-luz);
}
.cbd-compat-estado strong { display: block; font-size: .88rem; }
.cbd-compat-estado small  { color: var(--text-secondary); font-size: .76rem; }
.cbd-compat-estado > i    { font-size: 1.1rem; }
.cbd-compat-estado.bien > i { color: var(--cbd-bien); }
.cbd-compat-estado.mal  > i { color: var(--cbd-mal); }
.cbd-compat-estado.bien strong { color: var(--cbd-bien); }
.cbd-compat-estado.mal  strong { color: var(--cbd-mal); }

.cbd-compat-lista { list-style: none; margin: 0; padding: .55rem .7rem; border-radius: 11px; }
.cbd-compat-lista li {
    display: grid; grid-template-columns: 1fr auto auto; gap: .4rem; align-items: center;
    padding: .38rem 0; font-size: .82rem;
}
.cbd-compat-lista li + li { border-top: 1px solid rgba(255,255,255,.04); }
.cbd-compat-tit { color: var(--text-secondary); }
.cbd-pip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; border-radius: 6px;
    font-size: .62rem; font-weight: 800; cursor: help;
}
.cbd-pip-ok    { background: rgba(76,175,125,.18);  color: var(--cbd-bien); }
.cbd-pip-err   { background: rgba(229,72,77,.18);   color: var(--cbd-mal); }
.cbd-pip-falta { background: rgba(255,255,255,.06); color: var(--text-secondary); }

.cbd-pie-nota { margin: .2rem 0 0; font-size: .73rem; color: var(--text-secondary); opacity: .75; line-height: 1.5; }

/* ── Fichas de cada build ───────────────────────────────────────────── */
.cbd-ficha-a { box-shadow: 6px 6px 14px var(--cbd-sombra), -6px -6px 14px var(--cbd-luz), inset 0 2px 0 rgba(255,123,58,.35); }
.cbd-ficha-b { box-shadow: 6px 6px 14px var(--cbd-sombra), -6px -6px 14px var(--cbd-luz), inset 0 2px 0 rgba(184,118,63,.38); }
.cbd-ficha-top { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.cbd-ficha-top h2 {
    flex: 1; min-width: 0; margin: 0; font-size: 1.05rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cbd-ficha-w {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .6rem; border-radius: 8px;
    font-size: .78rem; font-weight: 700; color: var(--cbd-a);
    background: var(--cbd-hueco);
    box-shadow: inset 2px 2px 5px var(--cbd-sombra), inset -2px -2px 5px var(--cbd-luz);
}

.cbd-piezas { border-radius: 12px; padding: .35rem .2rem; }
.cbd-pieza {
    display: grid; grid-template-columns: 1.6rem 6.6rem 1fr; gap: .5rem;
    align-items: center; padding: .5rem .65rem; font-size: .85rem;
}
.cbd-pieza + .cbd-pieza { border-top: 1px solid rgba(255,255,255,.035); }
.cbd-pieza-ico { color: var(--cbd-a); opacity: .8; text-align: center; }
/* "Almacenamiento" y "Refrigeración" no caben a tamaño normal y se comían el
   valor de al lado. Se recortan con puntos suspensivos en vez de desbordar. */
.cbd-pieza-lbl {
    color: var(--text-secondary); font-size: .72rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cbd-pieza-val { min-width: 0; overflow: hidden; }
.cbd-pieza-val small { display: block; color: var(--text-secondary); font-size: .73rem; margin-top: .1rem; }
.cbd-pieza-val em { color: var(--text-secondary); opacity: .5; font-style: italic; }
/* Las piezas repetidas se apagan: el ojo va a lo que cambia */
.cbd-pieza.igual .cbd-pieza-val,
.cbd-pieza.igual .cbd-pieza-lbl { opacity: .45; }
.cbd-pieza.sin { opacity: .4; }

/* ── Ventajas ───────────────────────────────────────────────────────── */
.cbd-ventajas { display: flex; flex-direction: column; gap: 1rem; }
.cbd-vent-col h3 {
    display: flex; align-items: center; gap: .45rem;
    margin: 0 0 .55rem; font-size: .84rem; font-weight: 700;
}
.cbd-vent-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.cbd-vent-col li {
    display: flex; gap: .5rem; align-items: flex-start;
    font-size: .81rem; color: var(--text-secondary); line-height: 1.45;
}
.cbd-vent-col li i { color: var(--cbd-bien); font-size: .72rem; margin-top: .25rem; }
.cbd-vent-nada { margin: 0; font-size: .8rem; color: var(--text-secondary); opacity: .6; font-style: italic; }

/* ── Barras comparativas ────────────────────────────────────────────── */
.cbd-barras { display: flex; flex-direction: column; gap: 1.1rem; }
.cbd-barra-fila {
    display: grid; grid-template-columns: 12rem 1fr 5.5rem; gap: 1.2rem; align-items: center;
}
.cbd-barra-et { font-size: .85rem; font-weight: 600; }
.cbd-barra-par { display: flex; flex-direction: column; gap: .4rem; }
.cbd-barra-linea { display: grid; grid-template-columns: auto 1fr 4.2rem; gap: .6rem; align-items: center; }
.cbd-barra-linea b { font-size: .82rem; text-align: right; font-variant-numeric: tabular-nums; }
.cbd-barra { height: 12px; border-radius: 7px; overflow: hidden; }
.cbd-barra span {
    display: block; height: 100%; border-radius: 7px;
    transition: width .4s ease;
    background: rgba(255,255,255,.14);
}
.cbd-barra span.a.gana { background: linear-gradient(90deg, var(--cbd-a), #ffa06e); }
.cbd-barra span.b.gana { background: linear-gradient(90deg, var(--cbd-b), #d9925c); }
.cbd-barra span.a { background: rgba(255,123,58,.34); }
.cbd-barra span.b { background: rgba(184,118,63,.36); }

.cbd-dif { text-align: right; font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cbd-dif small { display: block; font-size: .64rem; font-weight: 500; opacity: .65; letter-spacing: .04em; }
.cbd-dif.sube { color: var(--cbd-bien); }
.cbd-dif.baja { color: var(--cbd-mal); }

.cbd-teorico {
    display: flex; gap: .6rem; align-items: flex-start;
    margin: 1.2rem 0 0; padding: .8rem 1rem; border-radius: 11px;
    font-size: .81rem; line-height: 1.55; color: var(--text-secondary);
    box-shadow: inset 3px 3px 7px var(--cbd-sombra), inset -2px -2px 6px var(--cbd-luz);
}
.cbd-teorico i { color: #e0a758; margin-top: .18rem; flex-shrink: 0; }
.cbd-teorico strong { color: var(--text-primary); }

/* ── Equilibrio por resolución ──────────────────────────────────────── */
.cbd-res-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.cbd-res-bloque {
    padding: .95rem 1.05rem; border-radius: 12px;
    display: flex; flex-direction: column; gap: .55rem;
    box-shadow: inset 3px 3px 7px var(--cbd-sombra), inset -2px -2px 6px var(--cbd-luz);
}
.cbd-res-bloque.activa { box-shadow: inset 3px 3px 7px var(--cbd-sombra), inset -2px -2px 6px var(--cbd-luz), 0 0 0 1px rgba(255,123,58,.3); }
.cbd-res-bloque h3 { margin: 0 0 .2rem; font-size: .82rem; font-weight: 700; color: var(--text-secondary); }
.cbd-res-linea { display: grid; grid-template-columns: auto 1fr 2.6rem; gap: .55rem; align-items: center; }
.cbd-res-linea b { font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Margen de mejora ───────────────────────────────────────────────── */
.cbd-nivel-par { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.cbd-nivel {
    padding: .95rem 1.05rem; border-radius: 12px;
    box-shadow: inset 3px 3px 7px var(--cbd-sombra), inset -2px -2px 6px var(--cbd-luz);
}
.cbd-nivel-top { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.cbd-nivel-nombre { flex: 1; min-width: 0; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbd-nivel-top strong { font-size: .8rem; padding: .2rem .55rem; border-radius: 7px; }
.cbd-nivel-alto  strong { background: rgba(76,175,125,.18); color: var(--cbd-bien); }
.cbd-nivel-medio strong { background: rgba(224,167,88,.18); color: #e0a758; }
.cbd-nivel-bajo  strong { background: rgba(229,72,77,.18);  color: var(--cbd-mal); }
.cbd-nivel-neutro strong { background: rgba(255,255,255,.06); color: var(--text-secondary); }
.cbd-nivel p { margin: 0; font-size: .8rem; color: var(--text-secondary); line-height: 1.5; }

.cbd-margenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.cbd-margen {
    padding: 1rem 1.1rem; border-radius: 12px;
    display: flex; flex-direction: column; gap: .8rem;
    box-shadow: inset 3px 3px 7px var(--cbd-sombra), inset -2px -2px 6px var(--cbd-luz);
}
.cbd-margen h3 { margin: 0; font-size: .86rem; font-weight: 700; }
.cbd-margen-lado { display: flex; flex-direction: column; gap: .35rem; }
.cbd-margen-cab { display: flex; align-items: center; gap: .5rem; }
.cbd-margen-cab b { font-size: .82rem; font-variant-numeric: tabular-nums; }
.cbd-margen-lado small { font-size: .76rem; color: var(--text-secondary); line-height: 1.45; }
.cbd-margen-lado.alerta small { color: #ef9a9a; }
.cbd-margen-lado.alerta .cbd-barra span { background: var(--cbd-mal); }
.cbd-sin { opacity: .5; font-style: italic; }

/* ── Cierre ─────────────────────────────────────────────────────────── */
.cbd-cierre { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; align-items: start; }
.cbd-conclusion-txt { margin: 0 0 .8rem; font-size: .92rem; line-height: 1.65; color: var(--text-secondary); }
.cbd-conclusion-txt:last-child { margin-bottom: 0; }
.cbd-conclusion-txt strong { color: var(--text-primary); }

.cbd-elegir-par { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .8rem; }
.cbd-elegir-btn {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: 1.1rem .8rem; border-radius: 13px; text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.cbd-elegir-btn strong {
    font-size: .88rem; color: var(--text-primary); text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.cbd-elegir-btn small { font-size: .74rem; color: var(--text-secondary); }
.cbd-elegir-btn:hover { transform: translateY(-2px); }
.cbd-elegir-a:hover { box-shadow: 6px 6px 14px var(--cbd-sombra), -6px -6px 14px var(--cbd-luz), 0 0 0 1px rgba(255,123,58,.4); }
.cbd-elegir-b:hover { box-shadow: 6px 6px 14px var(--cbd-sombra), -6px -6px 14px var(--cbd-luz), 0 0 0 1px rgba(184,118,63,.45); }

.cbd-huerfanas { display: flex; gap: 1rem; align-items: flex-start; }
.cbd-huerfanas > i { font-size: 1.3rem; color: #e0a758; margin-top: .15rem; }
.cbd-huerfanas strong { display: block; margin-bottom: .25rem; }
.cbd-huerfanas p { margin: 0; font-size: .85rem; color: var(--text-secondary); line-height: 1.55; }

/* ── Tema claro ─────────────────────────────────────────────────────────
   El neumorfismo en claro es al revés: la sombra clara casi blanca y la
   oscura muy suave. Con los mismos valores del oscuro se vería sucio. */
.light-theme {
    --cbd-fondo:  #ecebe9;
    --cbd-sup:    #f2f1ef;
    --cbd-hueco:  #e6e5e2;
    --cbd-luz:    rgba(255, 255, 255, .95);
    --cbd-sombra: rgba(0, 0, 0, .13);
    --cbd-b:      #b8763f;
}
.light-theme .cbd-pieza + .cbd-pieza,
.light-theme .cbd-compat-lista li + li { border-top-color: rgba(0,0,0,.06); }
.light-theme .cbd-barra span { background: rgba(0,0,0,.1); }
.light-theme .cbd-pip-falta { background: rgba(0,0,0,.05); }

/* ── Pantallas medianas y móvil ─────────────────────────────────────── */
@media (max-width: 1200px) {
    .cbd-rejilla { grid-template-columns: 1fr 1fr; }
    .cbd-compat, .cbd-ventajas { grid-column: span 2; }
    .cbd-ventajas { flex-direction: row; flex-wrap: wrap; }
    .cbd-vent-col { flex: 1 1 260px; }
    .cbd-cierre { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .cbd-rejilla { grid-template-columns: 1fr; }
    .cbd-compat, .cbd-ventajas { grid-column: auto; }
    .cbd-barra-fila { grid-template-columns: 1fr; gap: .5rem; }
    .cbd-dif { text-align: left; }
    .cbd-nivel-par, .cbd-elegir-par { grid-template-columns: 1fr; }
    .cbd-sel { flex-direction: column; align-items: stretch; }
    .cbd-pieza { grid-template-columns: 1.6rem 1fr; }
    .cbd-pieza-lbl { display: none; }
}