/* ══════════════════════════════════════════════════════════════
   KACHAI · Apariencias

   El modo de luminosidad (claro/oscuro/sistema) y la apariencia cromática
   son preferencias independientes. Esta hoja sólo redefine tokens y acentos;
   no cambia estructura, comportamiento ni colores semánticos de peligro,
   advertencia o éxito.
   ══════════════════════════════════════════════════════════════ */

:root,
:root[data-skin="kachai"] {
  --skin-primary: #5146E5;
  --skin-primary-hover: #6257F0;
  --skin-bright: #8B8BFF;
  --skin-soft: rgba(81, 70, 229, .15);
  --skin-faint: rgba(81, 70, 229, .075);
  --skin-ring: rgba(98, 87, 240, .28);
  --skin-glow: rgba(139, 139, 255, .20);
  --skin-user-bg: #3D36B0;
  --skin-gradient: linear-gradient(112deg, #5146E5 0%, #6257F0 52%, #8B8BFF 100%);
  --skin-shell-glow: rgba(81, 70, 229, .09);
  --skin-shell-secondary: rgba(139, 139, 255, .045);
}

:root[data-skin="neon"] {
  --skin-primary: #6D28D9;
  --skin-primary-hover: #7C3AED;
  --skin-bright: #D8B4FE;
  --skin-soft: rgba(168, 85, 247, .17);
  --skin-faint: rgba(168, 85, 247, .085);
  --skin-ring: rgba(192, 132, 252, .30);
  --skin-glow: rgba(216, 180, 254, .28);
  --skin-user-bg: #4C1D95;
  --skin-gradient: linear-gradient(112deg, #6D28D9 0%, #A855F7 55%, #E879F9 100%);
  --skin-shell-glow: rgba(168, 85, 247, .14);
  --skin-shell-secondary: rgba(232, 121, 249, .07);
}

:root[data-skin="electric"] {
  --skin-primary: #1D4ED8;
  --skin-primary-hover: #2563EB;
  --skin-bright: #38BDF8;
  --skin-soft: rgba(37, 99, 235, .16);
  --skin-faint: rgba(56, 189, 248, .075);
  --skin-ring: rgba(56, 189, 248, .27);
  --skin-glow: rgba(56, 189, 248, .23);
  --skin-user-bg: #1E3A8A;
  --skin-gradient: linear-gradient(112deg, #1D4ED8 0%, #2563EB 54%, #38BDF8 100%);
  --skin-shell-glow: rgba(37, 99, 235, .12);
  --skin-shell-secondary: rgba(56, 189, 248, .06);
}

/* Alias semánticos consumidos por chat, diálogos, Living Space y módulos. */
:root[data-skin] {
  --accent-primary: var(--skin-primary);
  --accent-primary-hover: var(--skin-primary-hover);
  --accent-soft: var(--skin-soft);
  --chat-accent: var(--skin-primary);
  --chat-accent-bright: var(--skin-bright);
  --chat-accent-soft: var(--skin-soft);
  --chat-user-bg: var(--skin-user-bg);
  --dialog-accent: var(--skin-primary);
  --dialog-accent-hover: var(--skin-primary-hover);
  --dialog-accent-soft: var(--skin-soft);
  --acento: var(--skin-primary);
  --acento-suave: var(--skin-soft);
  --azul: var(--skin-primary-hover);
  --aro-a: var(--skin-primary);
  --aro-b: var(--skin-bright);
  --dash-accent: var(--skin-primary);
  --dash-gradient: var(--skin-gradient);
  --dash-brand: var(--skin-gradient);
  --action-gradient: var(--skin-gradient);
}

:root[data-theme="dark"][data-skin] {
  --space-glow: var(--skin-shell-glow);
  --space-violet: var(--skin-shell-secondary);
  --space-depth: color-mix(in srgb, var(--skin-primary) 8%, transparent);
  --space-card-glow: color-mix(in srgb, var(--skin-bright) 7%, transparent);
}

:root[data-theme="light"][data-skin] {
  --space-glow: color-mix(in srgb, var(--skin-primary) 4%, transparent);
  --space-violet: color-mix(in srgb, var(--skin-bright) 2%, transparent);
  --space-depth: color-mix(in srgb, var(--skin-primary) 2.5%, transparent);
  --space-card-glow: transparent;
}

/* ── Acciones primarias y estados seleccionados ───────────── */
:where(.btn-primary, .btn-send, .mode-switch__btn.is-on, .btn-workshop.is-on,
       .ws-tab.is-on, .ws-dev.is-on, .a-btn--primary, .dash-news-primary) {
  border-color: var(--skin-primary) !important;
  background: var(--skin-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 7px 22px color-mix(in srgb, var(--skin-primary) 24%, transparent) !important;
}

:where(.btn-primary, .btn-send, .mode-switch__btn.is-on, .btn-workshop.is-on,
       .ws-tab.is-on, .ws-dev.is-on, .a-btn--primary, .dash-news-primary):hover:not(:disabled) {
  border-color: var(--skin-primary-hover) !important;
  background: var(--skin-primary-hover) !important;
}

:where(.btn-send.is-stop, .stream-bar__stop) {
  border-color: color-mix(in srgb, var(--skin-primary) 58%, transparent) !important;
  background: var(--skin-soft) !important;
  color: var(--text-primary, var(--tinta)) !important;
  box-shadow: none !important;
}

:where(.conv-item.is-active, .proyecto-item.is-activa, .p-nav__item.is-on,
       .a-nav__link.is-on, .settings-nav__item.is-on) {
  border-color: color-mix(in srgb, var(--skin-primary) 34%, transparent) !important;
  background: linear-gradient(90deg, var(--skin-soft), var(--skin-faint)) !important;
  box-shadow: inset 3px 0 0 var(--skin-primary) !important;
}

:where(.conv-item, .proyecto-item, .p-nav__item, .a-nav__link, .settings-nav__item):hover {
  border-color: color-mix(in srgb, var(--skin-primary) 25%, transparent) !important;
  background: var(--skin-faint) !important;
}

:where(.proyecto-item__punto, .activity, .status-pill__dot.is-busy) {
  background: var(--skin-bright) !important;
  box-shadow: 0 0 12px var(--skin-glow);
}

/* ── Chat ─────────────────────────────────────────────────── */
:root[data-theme="dark"][data-skin="neon"] .chat-shell {
  background:
    radial-gradient(circle at 8% 0%, rgba(168, 85, 247, .11), transparent 30rem),
    radial-gradient(circle at 96% 100%, rgba(232, 121, 249, .045), transparent 34rem),
    var(--noche-profunda, #030712);
}

:root[data-theme="dark"][data-skin="electric"] .chat-shell {
  background:
    radial-gradient(circle at 8% 0%, rgba(37, 99, 235, .10), transparent 30rem),
    radial-gradient(circle at 96% 100%, rgba(56, 189, 248, .045), transparent 34rem),
    var(--noche-profunda, #030712);
}

.msg__name,
.msg--assistant .msg__name,
.dash-eyebrow,
.dash-meta__label,
.dash-card__head h2 .ms,
.kachai-brand .node--violet,
.kachai-brand .ai {
  color: var(--skin-bright) !important;
}

.msg__badge,
.stream-bar__fill {
  background: var(--skin-gradient) !important;
}

.msg__body {
  border-left-color: color-mix(in srgb, var(--skin-primary) 34%, transparent) !important;
}

.msg--assistant .msg__body {
  background: transparent !important;
  border-left-color: color-mix(in srgb, var(--skin-primary) 20%, transparent) !important;
}

:root[data-theme="dark"][data-skin] .msg--user .msg__body {
  border: 1px solid color-mix(in srgb, var(--skin-bright) 25%, transparent) !important;
  border-left-color: var(--skin-primary) !important;
  border-radius: 15px;
  background: color-mix(in srgb, var(--skin-user-bg) 76%, var(--noche-profunda, #030712) 24%) !important;
}

:root[data-theme="light"][data-skin] .msg--user .msg__body {
  border: 1px solid color-mix(in srgb, var(--skin-primary) 19%, #FFFFFF) !important;
  border-left-color: var(--skin-primary) !important;
  border-radius: 15px;
  background: color-mix(in srgb, var(--skin-primary) 10%, #FFFFFF) !important;
}

.composer__box:focus-within,
.kachai-dialog__input:focus,
:where(input, textarea, select):focus-visible {
  border-color: color-mix(in srgb, var(--skin-primary) 72%, transparent) !important;
  outline-color: var(--skin-primary) !important;
  box-shadow: 0 0 0 3px var(--skin-ring) !important;
}

:where(.msg__action, .tool-btn, .composer-action, .comp-menu__item,
       .ws-tab, .ws-dev, .ws-btn, .dash-action):hover:not(:disabled) {
  background: var(--skin-soft) !important;
  color: var(--skin-bright) !important;
}

/* Cerrar/eliminar continúa rojo: no se transforma en color de identidad. */
:where(.ws-btn--close, .user-menu__item--danger, .p-btn--danger, .a-btn--danger):hover {
  background: var(--peligro) !important;
  border-color: var(--peligro) !important;
  color: #FFFFFF !important;
}

/* ── Living Space ─────────────────────────────────────────── */
.dash-action:focus-visible,
.dash-tool:focus-visible,
.dash-news__item:focus-visible {
  outline: 2px solid var(--skin-primary);
  outline-offset: 2px;
}

.dash-news__topic,
.dash-news-chip {
  border-color: color-mix(in srgb, var(--skin-primary) 30%, transparent) !important;
  background: var(--skin-soft) !important;
  color: var(--skin-bright) !important;
}

/* ── Paneles de cuenta, administración y módulos ──────────── */
:where(.p-btn, .a-btn, .context-action, .mod-btn):focus-visible {
  outline: 2px solid var(--skin-primary) !important;
  outline-offset: 2px;
}

:where(.p-btn, .a-btn, .context-action, .mod-btn):hover:not(.p-btn--danger):not(.a-btn--danger) {
  border-color: color-mix(in srgb, var(--skin-primary) 34%, transparent) !important;
}

.mod-btn--principal {
  border-color: var(--skin-primary) !important;
  background: var(--skin-primary) !important;
  color: #FFFFFF !important;
}
.mod-btn--principal:hover { background: var(--skin-primary-hover) !important; }

/* ── Selector de apariencia en Mi cuenta ──────────────────── */
.a-appearance {
  display: grid;
  gap: 24px;
  margin: 22px 0 26px;
  padding: 22px;
  border: 1px solid var(--line, var(--linea));
  border-radius: var(--r-lg, 18px);
  background: color-mix(in srgb, var(--surface, var(--papel)) 94%, var(--skin-primary) 6%);
}

.a-appearance__group { display: grid; gap: 11px; }
.a-appearance__heading {
  margin: 0;
  color: var(--text-primary, var(--tinta));
  font: 600 15px/1.3 var(--fuente);
}
.a-appearance__description {
  margin: -4px 0 0;
  color: var(--text-secondary, var(--tinta-2));
  font-size: 13px;
  line-height: 1.5;
}

.a-appearance__modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.a-appearance-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line, var(--linea));
  border-radius: 11px;
  background: transparent;
  color: var(--text-secondary, var(--tinta-2));
  font: 500 13px/1 var(--fuente);
  cursor: pointer;
}
.a-appearance-mode:hover { border-color: color-mix(in srgb, var(--skin-primary) 38%, transparent); }
.a-appearance-mode.is-selected {
  border-color: color-mix(in srgb, var(--skin-primary) 48%, transparent);
  background: var(--skin-soft);
  color: var(--text-primary, var(--tinta));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skin-primary) 18%, transparent);
}
.a-appearance-mode .ms { color: var(--skin-bright); font-size: 18px; }

.a-appearance__skins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.a-skin-card {
  position: relative;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line, var(--linea));
  border-radius: 14px;
  background: var(--surface, var(--papel));
  color: var(--text-primary, var(--tinta));
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.a-skin-card:hover { transform: translateY(-1px); }
.a-skin-card.is-selected {
  border-color: var(--skin-primary);
  box-shadow: 0 0 0 3px var(--skin-ring), 0 10px 24px color-mix(in srgb, var(--skin-primary) 13%, transparent);
}
.a-skin-card__preview {
  --preview-primary: #5146E5;
  --preview-bright: #8B8BFF;
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: 7px;
  height: 72px;
  margin-bottom: 11px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 10px;
  background:
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--preview-bright) 20%, transparent), transparent 45%),
    #07101F;
}
.a-skin-card[data-skin-option="neon"] .a-skin-card__preview { --preview-primary: #7C3AED; --preview-bright: #E879F9; }
.a-skin-card[data-skin-option="electric"] .a-skin-card__preview { --preview-primary: #2563EB; --preview-bright: #38BDF8; }
.a-skin-card__rail { border-radius: 6px; background: #0B1629; box-shadow: inset 3px 0 0 var(--preview-primary); }
.a-skin-card__stage { display: grid; align-content: end; gap: 6px; }
.a-skin-card__bubble { height: 18px; border-radius: 6px; background: color-mix(in srgb, var(--preview-primary) 68%, #07101F); }
.a-skin-card__button { width: 48%; height: 11px; margin-left: auto; border-radius: 999px; background: var(--preview-primary); box-shadow: 0 0 12px color-mix(in srgb, var(--preview-bright) 38%, transparent); }
.a-skin-card__copy { display: grid; gap: 3px; }
.a-skin-card__copy strong { font-size: 13px; font-weight: 600; }
.a-skin-card__copy small { color: var(--text-secondary, var(--tinta-2)); font-size: 11.5px; line-height: 1.35; }
.a-skin-card__check {
  position: absolute;
  top: 18px;
  right: 18px;
  display: none;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--preview-primary, var(--skin-primary));
  color: #FFFFFF;
}
.a-skin-card.is-selected .a-skin-card__check { display: grid; }
.a-skin-card__check .ms { font-size: 15px; }

.a-appearance__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--text-secondary, var(--tinta-2));
  font-size: 12px;
  line-height: 1.5;
}
.a-appearance__note .ms { flex: 0 0 auto; margin-top: 1px; color: var(--skin-bright); font-size: 16px; }

@media (max-width: 760px) {
  .a-appearance__skins { grid-template-columns: 1fr; }
  .a-skin-card { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 12px; }
  .a-skin-card__preview { width: 116px; margin: 0; }
}

@media (max-width: 480px) {
  .a-appearance { padding: 16px; }
  .a-appearance__modes { grid-template-columns: 1fr; }
  .a-skin-card { grid-template-columns: 92px 1fr; }
  .a-skin-card__preview { width: 92px; height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .a-skin-card { transition: none; }
  .a-skin-card:hover { transform: none; }
}