/* ============================================================
   SOFT UI — relieve suave para el bloque de resultados.

   Problema que resuelve: el análisis visual eran cinco recuadros
   metidos unos dentro de otros (panel exterior → banner del ganador
   → columna izquierda → visor del gráfico → columna derecha). Cada
   uno con su borde, su fondo y su radio. Demasiado marco y poco
   contenido.

   Enfoque: UNA sola superficie (el panel exterior). Dentro no hay
   cajas: hay relieve. Lo que sobresale está elevado, lo que muestra
   datos está hundido, y las zonas se separan con aire y alguna línea
   de pelo, no con marcos.

   Nota sobre el estilo: el neumorphism puro nace en claro sobre un
   gris pastel y en oscuro pierde el contraste (el relieve se come la
   legibilidad). Aquí se usa la variante accesible: mismo lenguaje de
   luz — foco arriba a la izquierda, sombra abajo a la derecha — pero
   conservando el contraste de texto del sitio.

   Se carga DESPUÉS de comparacion_visual.css y panel-skin.css.
   ============================================================ */

body.panel-ui {
    /* Una única fuente de luz, arriba a la izquierda */
    --sui-luz:    rgba(255, 255, 255, 0.045);
    --sui-sombra: rgba(0, 0, 0, 0.55);
    --sui-radio:  14px;

    /* Relieve: sobresale de la superficie */
    --sui-alto:
        -3px -3px 8px var(--sui-luz),
         4px  4px 14px var(--sui-sombra);

    /* Hundido: hueco excavado en la superficie */
    --sui-hondo:
        inset  4px  4px 10px var(--sui-sombra),
        inset -3px -3px  8px var(--sui-luz);

    /* Apenas insinuado, para piezas pequeñas */
    --sui-suave:
        -2px -2px 5px var(--sui-luz),
         2px  3px 8px rgba(0, 0, 0, 0.4);

    /* Fondo de las zonas hundidas. Un hueco excavado siempre queda MÁS
       oscuro que la superficie; no vale reutilizar --pn-inset, que en
       claro es blanco puro y dejaría el texto tenue sin contraste. */
    --sui-hueco-bg: #141414;
}

body.panel-ui.light-theme {
    --sui-hueco-bg: #e9e9e9;
}

body.panel-ui.light-theme {
    /* En claro la luz es más marcada y la sombra mucho más suave:
       si se copian los valores del oscuro, el relieve se ve sucio. */
    --sui-luz:    rgba(255, 255, 255, 0.95);
    --sui-sombra: rgba(163, 177, 198, 0.55);
}

/* ============================================================
   1. LA ÚNICA CAJA — el panel exterior
   ============================================================ */
body.panel-ui .visual-comparison {
    border: none;
    border-radius: var(--sui-radio);
    background: var(--pn-bg);
    box-shadow: var(--sui-alto);
    padding-bottom: 1.4rem;
}

/* La barra de título deja de ser una banda con borde inferior y pasa
   a ser solo un rótulo: el relieve del panel ya lo separa del resto. */
body.panel-ui .visual-comparison > .results-title {
    background: transparent;
    border-bottom: none;
    border-radius: var(--sui-radio) var(--sui-radio) 0 0;
    padding: 1rem 1.2rem 0.1rem;
    margin-right: -1rem;
}

body.panel-ui .visual-comparison .results-subtitle {
    margin-left: 1.2rem;
    margin-bottom: 1.4rem;
}

/* ============================================================
   2. FUERA LOS RECUADROS INTERIORES
   Las dos columnas dejan de ser tarjetas. Se separan con aire y
   una línea de pelo vertical, que basta para leer la división.
   ============================================================ */
body.panel-ui .comparison-left,
body.panel-ui .comparison-right {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0.2rem 0 0;
}

body.panel-ui .comparison-split {
    gap: 2.2rem;
}

@media (min-width: 1100px) {
    body.panel-ui .comparison-right {
        border-left: 1px solid var(--pn-border-soft);
        padding-left: 2.2rem;
    }
}

/* Los encabezados de columna ya no compiten con un marco:
   se apoyan en una línea corta bajo el texto. */
body.panel-ui .comparison-left > h4,
body.panel-ui .comparison-right > h4 {
    padding-bottom: 0.55rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--pn-border-soft);
}

/* ============================================================
   3. RELIEVE DONDE SIGNIFICA ALGO
   ============================================================ */

/* El gráfico es una pantalla: va hundido. Además se le quita el
   borde naranja, que era el marco más ruidoso de todo el bloque. */
body.panel-ui .comparison-left .chart-viewport {
    border: none;
    border-radius: var(--sui-radio);
    background: var(--sui-hueco-bg);
    box-shadow: var(--sui-hondo);
}

/* El ganador es el dato destacado: va elevado. */
body.panel-ui .visual-comparison .winner-banner {
    background: var(--pn-bg2);
    border: none;
    border-radius: var(--sui-radio);
    box-shadow: var(--sui-suave);
    padding: 1rem 1.3rem;
    margin-bottom: 1.6rem;
}

/* La copa, hundida en su propio hueco redondo */
body.panel-ui .winner-trophy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sui-hueco-bg);
    box-shadow: var(--sui-hondo);
}

/* ============================================================
   4. CONTROLES CON EL MISMO LENGUAJE
   Sobresalen en reposo, se hunden al pulsar. Es lo que hace que
   un soft UI se sienta físico en vez de plano.
   ============================================================ */
body.panel-ui .visual-comparison .btn-share,
body.panel-ui .chart-type-trigger {
    border: none;
    border-radius: 10px;
    background: var(--pn-bg2);
    box-shadow: var(--sui-suave);
    transition: box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

body.panel-ui .visual-comparison .btn-share:hover,
body.panel-ui .chart-type-trigger:hover {
    color: var(--pn-accent);
}

/* En claro el naranja de marca sobre fondo claro se queda en ~2:1. Antes lo
   compensaba el borde del botón, que aquí desaparece, así que se oscurece el
   texto hasta cumplir AA sin salirse de la gama naranja. */
body.panel-ui.light-theme .visual-comparison .btn-share,
body.panel-ui.light-theme .chart-type-trigger {
    color: #9a3412;
}
body.panel-ui.light-theme .visual-comparison .btn-share:hover,
body.panel-ui.light-theme .chart-type-trigger:hover {
    color: #7c2d12;
}

body.panel-ui .visual-comparison .btn-share:active,
body.panel-ui .chart-type-trigger:active {
    box-shadow: var(--sui-hondo);
    transform: translateY(1px);
}

/* El foco de teclado no puede depender del relieve: se mantiene
   un anillo visible (el relieve solo no cumple contraste). */
body.panel-ui .visual-comparison .btn-share:focus-visible,
body.panel-ui .chart-type-trigger:focus-visible,
body.panel-ui .tree-folder:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 2px;
}

/* Las filas del árbol: hundidas al pasar por encima, como si se
   pulsara la superficie. Sin bordes ni fondos sólidos. */
body.panel-ui .tree-folder {
    border-radius: 8px;
    transition: box-shadow 0.2s ease, color 0.2s ease;
}

body.panel-ui .tree-folder:hover {
    background: transparent;
    box-shadow: var(--sui-hondo);
}

/* El menú desplegable del tipo de gráfico, elevado sobre el panel */
body.panel-ui .chart-type-menu {
    border: none;
    border-radius: 12px;
    box-shadow:
        var(--sui-alto),
        0 12px 28px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   5. RESPETO A prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body.panel-ui .visual-comparison .btn-share,
    body.panel-ui .chart-type-trigger,
    body.panel-ui .tree-folder {
        transition: none;
    }
}

/* ============================================================
   ===== RESTO DEL COMPARADOR =====

   Regla para no acabar con todo abombado. Solo tres estados, y cada
   uno significa una cosa:

     HUNDIDO   recibe o contiene datos   buscador · huecos A-F ·
                                         lista de modelos · tablas
     ELEVADO   actúas sobre ello         botón Comparar · dock ·
                                         panel de filtros
     PLANO     ni una cosa ni otra       tarjetas del catálogo ·
                                         marquee · barra de estado ·
                                         títulos y etiquetas

   Lo que se repite mucho se queda PLANO en reposo. Sesenta tarjetas
   con doble sombra cada una no es relieve, es ruido — y además cuesta
   pintarlo. Las tarjetas reaccionan al pasar por encima y al quedar
   seleccionadas, que es cuando el relieve informa de algo.
   ============================================================ */

/* ---------- HUNDIDO: el buscador ---------- */
/* Conserva un filo de 1px a propósito. Sin él, el relleno del campo queda
   a 1,02:1 contra el fondo: el hueco solo se insinúa con la sombra y el
   buscador deja de verse como algo donde escribir. En un input la
   legibilidad manda sobre la pureza del estilo. */
body.panel-ui .search-form input {
    border: 1px solid var(--pn-border);
    border-radius: 10px;
    background: var(--sui-hueco-bg);
    box-shadow: var(--sui-hondo);
}

body.panel-ui .search-form input:focus {
    outline: 2px solid var(--pn-accent);
    outline-offset: 1px;
}

/* ---------- HUNDIDO: la lista de modelos ---------- */
/* Es un visor de datos, igual que el gráfico: cóncavo. */
body.panel-ui .processors-list-wrapper {
    border: none;
    border-radius: var(--sui-radio);
    background: var(--sui-hueco-bg);
    box-shadow: var(--sui-hondo);
}

/* La cinta de recuento deja de ser una banda con borde */
body.panel-ui .card-count-banner {
    background: transparent;
    border-bottom: 1px solid var(--pn-border-soft);
}

/* ---------- HUNDIDO: los huecos A-F ---------- */
/* Un hueco vacío pide que lo rellenes: cóncavo y sin borde de puntos. */
body.panel-ui .selection-slot {
    border: none;
    border-radius: 12px;
    background: var(--sui-hueco-bg);
    box-shadow: var(--sui-hondo);
}

/* Al llenarse deja de ser un hueco y pasa a ser contenido: sube a ras. */
body.panel-ui .selection-slot.has-selection {
    background: var(--pn-bg2);
    box-shadow: var(--sui-suave);
}

/* ---------- HUNDIDO: las tablas de especificaciones ---------- */
/* Eran los tres últimos recuadros con marco completo del bloque. */
body.panel-ui .specs-table-wrap {
    border: none;
    border-radius: var(--sui-radio);
    background: var(--sui-hueco-bg);
    box-shadow: var(--sui-hondo);
}

/* ---------- ELEVADO: el dock de comparación ---------- */
body.panel-ui .ws-compare-dock {
    border: none;
    border-radius: var(--sui-radio);
    box-shadow: var(--sui-alto);
}

body.panel-ui .ws-compare-dock .ws-panel-head {
    background: transparent;
    border-bottom: 1px solid var(--pn-border-soft);
}

body.panel-ui .ws-compare-dock .compare-action {
    border-top: 1px solid var(--pn-border-soft);
}

/* ---------- ELEVADO: el botón de comparar ---------- */
body.panel-ui .btn-compare {
    border: none;
    box-shadow: var(--sui-alto);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Al pulsar se hunde. Hace falta ganar al :hover propio del comparador,
   que es más específico y mantendría el botón levantado durante el clic. */
body.panel-ui .compare-action .btn-compare:active:not(:disabled) {
    box-shadow: var(--sui-hondo);
    transform: translateY(1px);
}

body.panel-ui .btn-compare:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 3px;
}

/* ---------- ELEVADO: el panel lateral de filtros ---------- */
/* Flota por encima del contenido, así que sobresale. */
body.panel-ui .side-filter {
    border: none;
    box-shadow: var(--sui-alto);
}

body.panel-ui .side-filter h4 {
    background: transparent;
    border-bottom: 1px solid var(--pn-border-soft);
}

/* ---------- PLANO en reposo: las tarjetas del catálogo ---------- */
/* Sin relieve mientras no las toques. La sombra dura original se
   sustituye por un apoyo mínimo para que la rejilla respire. */
body.panel-ui .processor-card {
    border: 1px solid var(--pn-border-soft);
    box-shadow: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

body.panel-ui .processor-card:hover {
    border-color: transparent;
    box-shadow: var(--sui-suave);
    transform: translateY(-2px);
}

/* Seleccionada = pulsada: se hunde. El relieve dice el estado, pero
   el borde de acento lo dice también, para no depender solo de él. */
body.panel-ui .processor-card.selected {
    border-color: var(--pn-accent);
    box-shadow: var(--sui-hondo);
    transform: none;
}

/* ---------- Sin relieve, a propósito ---------- */
/* El marquee, la barra de estado y la barra de título son etiquetas y
   contenedores decorativos: si también se abomban, deja de leerse qué
   es pulsable y qué no. Se quedan como están. */

@media (prefers-reduced-motion: reduce) {
    body.panel-ui .processor-card,
    body.panel-ui .btn-compare {
        transition: none;
    }
    body.panel-ui .processor-card:hover {
        transform: none;
    }
}

/* ============================================================
   6. MÓVIL — sin columnas, sin línea divisoria
   ============================================================ */
@media (max-width: 900px) {
    body.panel-ui .comparison-right {
        border-left: none;
        padding-left: 0;
        padding-top: 1.4rem;
        border-top: 1px solid var(--pn-border-soft);
    }
    body.panel-ui .comparison-split {
        gap: 1.4rem;
    }
}