/* ============================================================
   SOFT UI — mismo lenguaje neumórfico que comparador/soft-ui.css,
   trasladado al vocabulario de clases .ws-* de Comunidad.

   Variante accesible: una única fuente de luz (arriba-izquierda),
   conservando el contraste de texto del sitio. En oscuro el relieve
   es sutil (la sombra se come el contraste si se exagera); en claro
   la luz es marcada y la sombra suave.

   Misma regla de fondo que en el comparador — solo tres estados:

     HUNDIDO   recibe datos       buscadores · campos de formulario ·
                                   zona de soltar imagen · barra de voto
     ELEVADO   accionas sobre ello  botones primarios/ghost/danger ·
                                   login · modal · autocompletado ·
                                   cerrar/limpiar · selector de tipo
                                   de reseña · botones de tier
     PLANO     se repite mucho    tarjetas de reseña/guía/PC/stat/
               (relieve solo al   quick-access/chip/tier-card — con
               hover o :active)   relieve solo al pasar el ratón

   Seleccionado = pulsado: igual que .processor-card.selected en el
   comparador, un nav/tab/tipo activo se HUNDE, no se eleva.

   Fuera de esto, a propósito: topbar, sidebar y statusbar (el chrome
   estructural) se quedan sin relieve, igual que la barra de título y
   la barra de estado del comparador.

   Se carga DESPUÉS de comunidad.css.
   ============================================================ */

.ws {
    --sui-luz:    rgba(255, 255, 255, 0.045);
    --sui-sombra: rgba(0, 0, 0, 0.55);

    --sui-alto:
        -3px -3px 8px var(--sui-luz),
         4px  4px 14px var(--sui-sombra);

    --sui-hondo:
        inset  4px  4px 10px var(--sui-sombra),
        inset -3px -3px  8px var(--sui-luz);

    --sui-suave:
        -2px -2px 5px var(--sui-luz),
         2px  3px 8px rgba(0, 0, 0, 0.4);

    /* Más oscuro que --sui-sombra por sí sola dejaría el hueco: --ws-bg
       (#121212) ya es más oscuro que el --pn-bg (#1e1e1e) del comparador, así
       que aquí el hueco tiene que bajar más para conservar el mismo salto de
       contraste entre "superficie" y "hueco" que allí. */
    --sui-hueco-bg: #080808;
}

body.light-theme .ws,
.light-theme .ws {
    --sui-luz:    rgba(255, 255, 255, 0.95);
    --sui-sombra: rgba(163, 177, 198, 0.55);
    --sui-hueco-bg: #e7e8ea;
}

/* ============================================================
   1. HUNDIDO — campos que reciben datos
   ============================================================ */
.ws-search,
.ws-tl-search {
    border-color: transparent;
    background: var(--sui-hueco-bg);
    box-shadow: var(--sui-hondo);
}
.ws-search:focus-within,
.ws-tl-search:focus-within {
    box-shadow: var(--sui-hondo), 0 0 0 2px var(--ws-accent);
}

.ws-field input,
.ws-field select,
.ws-field textarea {
    border-color: transparent;
    background: var(--sui-hueco-bg);
    box-shadow: var(--sui-hondo);
}
.ws-field input:focus,
.ws-field select:focus,
.ws-field textarea:focus {
    box-shadow: var(--sui-hondo), 0 0 0 2px var(--ws-accent);
}

.ws-drop {
    background: var(--sui-hueco-bg);
    box-shadow: var(--sui-hondo);
}
.ws-drop.is-drag {
    box-shadow: var(--sui-hondo), 0 0 0 2px var(--ws-accent);
}

.ws-tl-distbar {
    background: var(--sui-hueco-bg);
    box-shadow: var(--sui-hondo);
}

/* ============================================================
   2. ELEVADO — accionas sobre ello
   ============================================================ */
.ws-btn--primary,
.ws-btn--ghost,
.ws-btn--danger,
.ws-side-login {
    border: none;
    box-shadow: var(--sui-alto);
    transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}
.ws-btn--primary:active:not(:disabled),
.ws-btn--ghost:active:not(:disabled),
.ws-btn--danger:active:not(:disabled),
.ws-side-login:active {
    box-shadow: var(--sui-hondo);
    transform: translateY(1px);
}
.ws-btn--disabled {
    box-shadow: none;
}

.ws-modal-close,
.ws-drop-clear,
.ws-tl-search-clear {
    box-shadow: var(--sui-suave);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ws-modal-close:active,
.ws-drop-clear:active,
.ws-tl-search-clear:active {
    box-shadow: var(--sui-hondo);
    transform: translateY(1px);
}

.ws-modal-dialog,
.ws-tl-vote-dialog {
    border: none;
    box-shadow: var(--sui-alto), 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* .ws-ac cuelga de <body> (fuera de .ws, ver comunidad.css), así que
   var(--sui-alto) no resuelve aquí — se repite el valor a mano. */
.ws-ac {
    border: none;
    box-shadow: -3px -3px 8px rgba(255, 255, 255, 0.045), 4px 4px 14px rgba(0, 0, 0, 0.55), 0 12px 30px rgba(0, 0, 0, 0.4);
}

.ws-rvm-type,
.ws-tl-vb {
    border-color: transparent;
    box-shadow: var(--sui-suave);
    transition: box-shadow 0.16s ease, background 0.16s ease, transform 0.12s ease;
}
.ws-rvm-type:hover,
.ws-tl-vb:hover:not(:disabled) {
    box-shadow: var(--sui-alto);
}
.ws-tl-vb:hover:not(:disabled) { transform: translateY(-2px); }

/* Seleccionado = pulsado, se hunde */
.ws-nav.is-active,
.ws-tl-tab.is-active,
.ws-rvm-type.is-active,
.ws-tl-vb.is-active {
    border-color: transparent;
    box-shadow: var(--sui-hondo);
}
.ws-tl-vb.is-active:hover { transform: none; }

/* ============================================================
   3. PLANO en reposo — lo que se repite mucho
   Relieve solo al pasar el ratón, para no acabar con todo abombado.
   ============================================================ */
.ws-card,
.ws-rev,
.ws-guide,
.ws-pc-card,
.ws-quick-item,
.ws-comp-item,
.ws-chip,
.ws-tl-card {
    box-shadow: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.ws-card:hover,
.ws-rev:hover,
.ws-guide:hover,
.ws-pc-card:hover,
.ws-quick-item:hover,
.ws-comp-item:hover,
.ws-chip:hover,
.ws-tl-card:hover {
    border-color: transparent;
    box-shadow: var(--sui-suave);
}

/* .ws-stat no se repite "mucho" (solo 3, un dato destacado del dashboard,
   igual que el winner-banner del comparador): relieve permanente, no solo
   al hover. */
.ws-stat {
    border-color: transparent;
    box-shadow: var(--sui-suave);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ws-stat:hover {
    box-shadow: var(--sui-alto);
}

.ws-tl-item {
    box-shadow: none;
    transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.ws-tl-item:hover {
    border-color: transparent;
    box-shadow: var(--sui-suave);
}

/* Banners únicos y destacados: relieve permanente, más marcado al hover */
.ws-tl-promo,
.ws-tl-summary,
.ws-bn-cta {
    border-color: transparent;
    box-shadow: var(--sui-suave);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ws-tl-promo:hover {
    box-shadow: var(--sui-alto);
}

/* ============================================================
   4. FOCO DE TECLADO — el relieve solo no cumple contraste
   ============================================================ */
.ws-search:focus-within,
.ws-btn--primary:focus-visible,
.ws-btn--ghost:focus-visible,
.ws-btn--danger:focus-visible,
.ws-side-login:focus-visible,
.ws-nav:focus-visible,
.ws-tl-vb:focus-visible,
.ws-rvm-type:focus-visible,
.ws-modal-close:focus-visible {
    outline: 2px solid var(--ws-accent);
    outline-offset: 2px;
}

/* ============================================================
   5. RESPETO A prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ws-btn--primary, .ws-btn--ghost, .ws-btn--danger, .ws-side-login,
    .ws-modal-close, .ws-drop-clear, .ws-tl-search-clear,
    .ws-rvm-type, .ws-tl-vb,
    .ws-card, .ws-stat, .ws-rev, .ws-guide, .ws-pc-card,
    .ws-quick-item, .ws-comp-item, .ws-chip, .ws-tl-card, .ws-tl-item,
    .ws-tl-promo {
        transition: none;
    }
    .ws-tl-vb:hover:not(:disabled),
    .ws-tl-promo:hover {
        transform: none;
    }
}

/* Sin relieve, a propósito: .ws-topbar, .ws-sidebar y .ws-statusbar
   son el chrome estructural — si también abomban, deja de leerse qué
   es pulsable y qué es marco de la aplicación. */