/* ==========================================================================
   EVA3 — estilos del sistema de plugins (módulos). Solo tokens var(--eva-*).
   Complementa eva3.css: cards de plugins, cabecera de módulo, formularios de módulo.
   ========================================================================== */

/* --- Sidebar: módulo desactivado ------------------------------------------ */
.sidebar__link--off { opacity: .6; }
.sidebar__link--off:hover, .sidebar__link--off[aria-current="page"] { opacity: 1; }

/* --- Cabecera de módulo ---------------------------------------------------- */
.module-switch { gap: var(--eva-space-2); margin-right: var(--eva-space-2); }
.module-switch__label { font-size: var(--eva-text-sm); color: var(--eva-text-secondary); }

/* --- Página Plugins -------------------------------------------------------- */
.plugins-toolbar { margin-bottom: var(--eva-space-5); flex-wrap: wrap; }
.plugins-group { margin-bottom: var(--eva-space-6); }
.plugins-group__title { font-size: var(--eva-text-md); margin: 0 0 var(--eva-space-3); display: flex; align-items: center; gap: var(--eva-space-2); }
.plugins-group[hidden] { display: none; }
.plugins-grid { align-items: stretch; }

.plugin-card { display: flex; flex-direction: column; gap: var(--eva-space-3); transition: border-color var(--eva-duration-fast) var(--eva-easing), transform var(--eva-duration-fast) var(--eva-easing), box-shadow var(--eva-duration-fast) var(--eva-easing); }
.plugin-card:hover { transform: translateY(-2px); box-shadow: var(--eva-shadow-md); }
.plugin-card--on { border-color: color-mix(in srgb, var(--eva-primary) 45%, var(--eva-border)); }
.plugin-card--locked { opacity: .82; }
.plugin-card[hidden] { display: none; }
.plugin-card__head { display: flex; align-items: flex-start; gap: var(--eva-space-3); }
.plugin-card__icon { flex: 0 0 auto; }
.plugin-card__name { margin: 0 0 var(--eva-space-1); font-size: var(--eva-text-md); line-height: 1.2; }
.plugin-card__desc { margin: 0; flex: 1 1 auto; min-height: 2.6em; }
.plugin-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--eva-space-2); border-top: 1px solid var(--eva-border); padding-top: var(--eva-space-3); }
.plugin-card__state { display: inline-flex; align-items: center; gap: var(--eva-space-2); color: var(--eva-text-secondary); }

/* --- Formularios de módulo ------------------------------------------------- */
.module-section { margin-bottom: var(--eva-space-5); }
.module-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--eva-space-3); margin-bottom: var(--eva-space-3); }
.module-section__head h3 { margin: 0; }
.module-section__head p { margin: var(--eva-space-1) 0 0; }
.module-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--eva-space-3); align-items: center; padding: var(--eva-space-3) 0; border-bottom: 1px solid var(--eva-border); }
.module-rule:last-child { border-bottom: 0; }
.module-rule__name { font-weight: 600; }
.module-rule__desc { color: var(--eva-text-secondary); font-size: var(--eva-text-sm); }
.module-rule__controls { display: flex; align-items: center; gap: var(--eva-space-2); flex-wrap: wrap; justify-content: flex-end; }
.module-rule__extra { grid-column: 1 / -1; display: grid; gap: var(--eva-space-3); padding: var(--eva-space-3); border-radius: var(--eva-radius-md); background: var(--eva-bg-elevated); }
.module-rule__extra[hidden] { display: none; }

/* Selector múltiple compacto (roles / canales) */
.chips { display: flex; flex-wrap: wrap; gap: var(--eva-space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--eva-space-1); padding: 2px var(--eva-space-2); border-radius: 999px; background: var(--eva-bg-elevated); border: 1px solid var(--eva-border); font-size: var(--eva-text-sm); }
.chip button { all: unset; cursor: pointer; line-height: 1; color: var(--eva-text-secondary); }
.chip button:hover { color: var(--eva-danger); }
.multiselect { display: grid; gap: var(--eva-space-2); }
.multiselect select { min-height: 2.4rem; }

/* Vista previa estilo mensaje (embed builder, welcome, polls) */
.msg-preview { display: grid; grid-template-columns: auto 1fr; gap: var(--eva-space-3); padding: var(--eva-space-4); border-radius: var(--eva-radius-lg); background: var(--eva-bg-elevated); border: 1px solid var(--eva-border); }
.msg-preview__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--eva-primary); display: grid; place-items: center; color: var(--eva-on-primary, #fff); font-weight: 700; }
.msg-preview__meta { display: flex; align-items: center; gap: var(--eva-space-2); margin-bottom: var(--eva-space-1); }
.msg-preview__bot { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--eva-primary); color: var(--eva-on-primary, #fff); }
.msg-preview__content { white-space: pre-wrap; word-break: break-word; }
.embed-preview { border-left: 4px solid var(--eva-primary); border-radius: var(--eva-radius-md); background: var(--eva-bg-card); padding: var(--eva-space-3) var(--eva-space-4); margin-top: var(--eva-space-2); max-width: 520px; display: grid; gap: var(--eva-space-2); }
.embed-preview__author { display: flex; align-items: center; gap: var(--eva-space-2); font-size: var(--eva-text-sm); font-weight: 600; }
.embed-preview__author img, .embed-preview__footer img { width: 20px; height: 20px; border-radius: 50%; }
.embed-preview__title { font-weight: 700; }
.embed-preview__desc { white-space: pre-wrap; font-size: var(--eva-text-sm); }
.embed-preview__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--eva-space-2); }
.embed-preview__field-name { font-weight: 600; font-size: var(--eva-text-sm); }
.embed-preview__field-value { font-size: var(--eva-text-sm); white-space: pre-wrap; }
.embed-preview__thumb { float: right; max-width: 80px; max-height: 80px; border-radius: var(--eva-radius-sm); margin-left: var(--eva-space-2); }
.embed-preview__image { max-width: 100%; border-radius: var(--eva-radius-md); }
.embed-preview__footer { display: flex; align-items: center; gap: var(--eva-space-2); font-size: var(--eva-text-xs); color: var(--eva-text-secondary); }
.embed-preview[hidden] { display: none; }

/* Tablas de listados de módulos (paneles, sorteos, alertas…) */
.table--modules td:last-child { text-align: right; white-space: nowrap; }
.table--modules .row { gap: var(--eva-space-1); }

/* Autosave / estado del formulario */
.form-status { font-size: var(--eva-text-sm); color: var(--eva-text-secondary); min-height: 1.4em; }
.form-status--saving { color: var(--eva-warning); }
.form-status--saved { color: var(--eva-success); }
.form-status--error { color: var(--eva-danger); }

@media (max-width: 720px) {
  .module-rule { grid-template-columns: 1fr; }
  .module-rule__controls { justify-content: flex-start; }
  .plugin-card__foot { flex-direction: column; align-items: stretch; }
}

/* Tendencias de precio (módulo web3): subida / bajada */
.trend-up { color: var(--eva-success); }
.trend-down { color: var(--eva-danger); }

/* ---- Alertas multired (modules/socialAlerts): colores de marca vía --eva-platform-<id> (config/theme.js) ---- */
.platform--youtube { --platform: var(--eva-platform-youtube); }
.platform--twitch { --platform: var(--eva-platform-twitch); }
.platform--kick { --platform: var(--eva-platform-kick); }
.platform--tiktok { --platform: var(--eva-platform-tiktok); }
.platform--instagram { --platform: var(--eva-platform-instagram); }
.platform--x { --platform: var(--eva-platform-x); }
.platform--feeds { --platform: var(--eva-platform-feeds); }
.alerts-tabs { display: flex; flex-wrap: wrap; gap: var(--eva-space-2); margin-bottom: var(--eva-space-4); }
.alerts-tab { display: inline-flex; align-items: center; gap: var(--eva-space-1-5); padding: var(--eva-space-2) var(--eva-space-3); border-radius: var(--eva-radius-pill); border: var(--eva-border-width) solid var(--eva-border); background: var(--eva-bg-input); color: var(--eva-text-secondary); font-size: var(--eva-text-sm); font-weight: var(--eva-weight-semibold); text-decoration: none; transition: var(--eva-transition); }
.alerts-tab:hover { color: var(--eva-text-primary); border-color: var(--eva-border-strong); }
.alerts-tab[aria-current="page"] { color: var(--eva-text-primary); border-color: var(--platform, var(--eva-primary)); box-shadow: inset 0 -2px 0 var(--platform, var(--eva-primary)); }
.alerts-tab .icon { width: 16px; height: 16px; color: var(--platform, currentColor); }
.alerts-tab__dot { width: 8px; height: 8px; border-radius: var(--eva-radius-circle); background: var(--eva-text-disabled); }
.alerts-tab__dot--success { background: var(--eva-success); }
.alerts-tab__dot--warning { background: var(--eva-warning); }
.alerts-tab__dot--danger { background: var(--eva-danger); }
.platform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--eva-space-4); }
.platform-card { display: flex; flex-direction: column; gap: var(--eva-space-3); border-top: 3px solid var(--platform, var(--eva-primary)); }
.platform-card__head { display: flex; align-items: center; gap: var(--eva-space-3); flex-wrap: wrap; }
.platform-card__title { display: grid; gap: var(--eva-space-1); min-width: 0; flex: 1; }
.platform-card__title h3 { margin: 0; }
.platform-logo { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--eva-radius-md); color: var(--platform, var(--eva-primary)); background: color-mix(in srgb, var(--platform, var(--eva-primary)) 16%, transparent); }
.platform-logo .icon { width: 24px; height: 24px; }
.platform-logo--lg { width: 56px; height: 56px; }
.platform-logo--lg .icon { width: 30px; height: 30px; }
.platform-card__meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--eva-space-1-5); margin: 0; font-size: var(--eva-text-sm); }
.platform-card__meta .badge { white-space: normal; text-align: left; }
.platform-card__meta > div { display: flex; justify-content: space-between; gap: var(--eva-space-3); }
.platform-card__meta dt { color: var(--eva-text-muted); flex: none; }
.platform-card__meta dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.platform-card__actions { display: flex; flex-wrap: wrap; gap: var(--eva-space-2); margin-top: auto; }
.platform-card__actions form, .account-card__actions form { display: contents; }
.platform-hero { border-top: 3px solid var(--platform, var(--eva-primary)); }
.platform-hero__cta { margin-left: auto; }
.event-caps { list-style: none; padding: 0; margin: var(--eva-space-3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--eva-space-2); }
.event-cap { display: grid; gap: var(--eva-space-1); padding: var(--eva-space-2) var(--eva-space-3); border-radius: var(--eva-radius-md); background: var(--eva-bg-elevated); font-size: var(--eva-text-sm); }
.event-cap--off { opacity: .7; }
.event-cap .badge { justify-self: start; }
.account-list { display: grid; gap: var(--eva-space-3); }
.account-card { display: grid; gap: var(--eva-space-3); border-left: 3px solid var(--platform, var(--eva-primary)); }
.account-card__head { display: flex; align-items: center; gap: var(--eva-space-3); flex-wrap: wrap; }
.account-card__name { display: flex; align-items: center; gap: var(--eva-space-2); flex-wrap: wrap; flex: 1; min-width: 0; }
.account-card__actions { display: flex; flex-wrap: wrap; gap: var(--eva-space-2); }
.account-card__subtitle { margin: 0 0 var(--eva-space-2); font-size: var(--eva-text-sm); color: var(--eva-text-secondary); }
.account-avatar { width: 40px; height: 40px; flex: none; border-radius: var(--eva-radius-circle); object-fit: cover; display: grid; place-items: center; color: var(--platform, var(--eva-primary)); background: var(--eva-bg-elevated); }
.rule-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--eva-space-2); }
.rule-item { display: flex; justify-content: space-between; align-items: center; gap: var(--eva-space-2); flex-wrap: wrap; padding: var(--eva-space-2) var(--eva-space-3); border-radius: var(--eva-radius-md); background: var(--eva-bg-elevated); font-size: var(--eva-text-sm); }
.rule-item--empty, .rule-item--off { color: var(--eva-text-muted); }
.alerts-editor { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--eva-space-5); align-items: start; }
.alerts-preview-col { position: sticky; top: var(--eva-space-4); display: grid; gap: var(--eva-space-2); }
.alerts-fieldset { border: var(--eva-border-width) solid var(--eva-border); border-radius: var(--eva-radius-md); padding: var(--eva-space-3); display: grid; gap: var(--eva-space-3); margin: 0; min-width: 0; }
.alerts-fieldset legend { padding: 0 var(--eva-space-1); font-weight: var(--eva-weight-semibold); font-size: var(--eva-text-sm); }
.embed-preview--platform { border-left-color: var(--preview-color, var(--platform, var(--eva-primary))); }
.discord-link-button { display: inline-flex; align-items: center; gap: var(--eva-space-1-5); margin-top: var(--eva-space-2); padding: var(--eva-space-1-5) var(--eva-space-3); border-radius: var(--eva-radius-sm); background: var(--eva-bg-card); border: var(--eva-border-width) solid var(--eva-border-strong); font-size: var(--eva-text-sm); font-weight: var(--eva-weight-semibold); }
.discord-link-button .icon { width: 14px; height: 14px; }
.discord-link-button[hidden] { display: none; }
.input--color { width: 48px; padding: 2px; flex: none; }
.input--color[hidden] { display: none; }
.text-danger { color: var(--eva-danger); }
@media (max-width: 1024px) {
  .alerts-editor { grid-template-columns: minmax(0, 1fr); }
  .alerts-preview-col { position: static; }
}
@media (max-width: 480px) {
  .platform-hero__cta { margin-left: 0; width: 100%; }
  .platform-hero__cta .btn { width: 100%; justify-content: center; }
  .platform-card__meta > div { flex-direction: column; gap: 0; }
  .platform-card__meta dd { text-align: left; }
}