/* ════════════════════════════════════════════════════════════════════════════
   VECTOR · Tema "Neumórfico Suave"
   Soft UI: superficies gris-azul unificadas + sombras duales (luz arriba-izq,
   sombra abajo-der). Mantiene la identidad Petróleo + Ámbar del producto.
   ════════════════════════════════════════════════════════════════════════════
   Pedido de Darío 2026-07-18. Los tokens de color/sombra viven en BD
   (vector_themes.tokens_jsonb, codigo neumorfico_suave) y se aplican inline
   por aplicarTemaDinamico(); este archivo agrega SOLO lo que los tokens no
   alcanzan: inputs hundidos (inset), botones en relieve y detalles pressed.
   Todo scopeado a [data-theme="neumorfico_suave"], cero impacto en otros temas.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Inputs y selects: hundidos (inset dual) ─────────────────────────────── */
:root[data-theme="neumorfico_suave"] .fg input,
:root[data-theme="neumorfico_suave"] .fg select,
:root[data-theme="neumorfico_suave"] .fg textarea{
  background:var(--vx-surface-2);
  border-color:transparent;
  backdrop-filter:none;
  box-shadow:inset 3px 3px 6px rgba(122,140,168,.42),
    inset -3px -3px 6px rgba(255,255,255,.82);
}
:root[data-theme="neumorfico_suave"] .fg input:focus,
:root[data-theme="neumorfico_suave"] .fg select:focus,
:root[data-theme="neumorfico_suave"] .fg textarea:focus{
  background:var(--vx-surface-2);
  border-color:var(--vx-brand-primary);
  box-shadow:inset 2px 2px 5px rgba(122,140,168,.38),
    inset -2px -2px 5px rgba(255,255,255,.78),
    0 0 0 3px rgba(14,63,77,.12);
}

/* ── Botones secundarios (.bsm): en relieve, pressed al click ──────────────
   OJO: :not(.pri) obligatorio, sin él esta regla (0,2,1) le gana el
   background a .bsm.pri (0,2,0) de main.css y el primario queda ilegible
   (texto blanco sobre superficie clara; visto en el tour w.128). */
:root[data-theme="neumorfico_suave"] .bsm:not(.pri){
  background:var(--vx-surface-1);
  border-color:transparent;
  box-shadow:3px 3px 7px rgba(122,140,168,.50),
    -3px -3px 7px rgba(255,255,255,.85);
}
:root[data-theme="neumorfico_suave"] .bsm:not(.pri):hover{
  background:var(--vx-surface-1);
  border-color:transparent;
  box-shadow:4px 4px 9px rgba(122,140,168,.56),
    -4px -4px 9px rgba(255,255,255,.9);
}
:root[data-theme="neumorfico_suave"] .bsm:not(.pri):active{
  box-shadow:inset 3px 3px 6px rgba(122,140,168,.46),
    inset -3px -3px 6px rgba(255,255,255,.8);
}
/* Deshabilitado: PLANO (sin relieve), con sombra dual + opacity .45 quedaba
   como mancha ilegible (paginación "Anterior/Siguiente", reporte Darío w.129) */
:root[data-theme="neumorfico_suave"] .bsm:not(.pri):disabled{
  background:transparent;
  border-color:var(--vx-border-default);
  box-shadow:none;
  opacity:.55;
}
:root[data-theme="neumorfico_suave"] .bsm.pri:disabled{
  box-shadow:none;
}
:root[data-theme="neumorfico_suave"] .bsm.pri{
  box-shadow:4px 4px 10px rgba(14,63,77,.30),
    -3px -3px 8px rgba(255,255,255,.55);
}
:root[data-theme="neumorfico_suave"] .bsm.pri:hover{
  box-shadow:5px 5px 12px rgba(14,63,77,.36),
    -3px -3px 8px rgba(255,255,255,.6);
}
:root[data-theme="neumorfico_suave"] .bsm.pri:active{
  box-shadow:inset 3px 3px 7px rgba(6,31,38,.45);
}

/* ── Botón primario del login (.btn-p) ───────────────────────────────────── */
:root[data-theme="neumorfico_suave"] .btn-p{
  box-shadow:5px 5px 14px rgba(14,63,77,.32),
    -4px -4px 10px rgba(255,255,255,.55);
}
:root[data-theme="neumorfico_suave"] .btn-p:hover{
  box-shadow:6px 6px 18px rgba(14,63,77,.38),
    -4px -4px 10px rgba(255,255,255,.6);
}

/* ── Tabs segmentadas: pill activa en relieve (no blanco duro) ───────────── */
:root[data-theme="neumorfico_suave"] .stabs{
  background:transparent;
  box-shadow:inset 3px 3px 6px rgba(122,140,168,.40),
    inset -3px -3px 6px rgba(255,255,255,.78);
}
:root[data-theme="neumorfico_suave"] .stab.active{
  background:var(--vx-surface-1);
  box-shadow:2px 2px 5px rgba(122,140,168,.50),
    -2px -2px 5px rgba(255,255,255,.85);
}
:root[data-theme="neumorfico_suave"] .tab-bar .tab-btn.active{
  box-shadow:2px 2px 5px rgba(122,140,168,.46),
    -2px -2px 5px rgba(255,255,255,.82);
}

/* ── Combos y dropdowns: mismas superficies suaves ───────────────────────── */
:root[data-theme="neumorfico_suave"] .sodcombo-dd{
  border-color:transparent;
}

/* ── Contraste de textos secundarios (w.208) ──────────────────────────────
   Medido con Playwright sobre las 5 pantallas de campo, con la cuenta del
   vendedor y viewport de teléfono: 22 textos por debajo del mínimo WCAG AA
   (4.5:1). La interfaz no estaba rota, pero en un teléfono al sol esos
   textos no se leen, y son los 37 del piloto los que trabajan así.

   --text-muted global (--n-600, #637588 en main.css) da 3.77 sobre el fondo
   de página de este tema. NO se toca en main.css a propósito: ahí es la
   paleta base de TODOS los temas, y oscurecerla rompería los oscuros, donde
   ese gris se lee sobre fondo negro. Se corrige acá, scopeado, que es donde
   está el problema.

   Los valores están calibrados contra --vx-surface-page (#DFE6EF), que es el
   peor caso: el fondo de página es más oscuro que el de las tarjetas
   (#EBEFF5), así que lo que cumple sobre la página cumple sobre ambas. */
:root[data-theme="neumorfico_suave"]{
  --n-600:        #586879;   /* 3.77 -> 4.54 sobre la página, 4.95 sobre tarjeta */
  --text-muted:   #586879;
  --text-subtle:  #586879;
}