/* =====================================================================
   hex-renamed-with-discord :: Integración de Discord Connect
   =====================================================================

   Estiliza:
     - La página del módulo (index.php?m=discordconnect).
     - La tarjeta del sidebar y el panel de la portada que inyecta
       modules/addons/discordconnect/hooks.php.

   Todo se apoya en las variables de custom.css (--bg-card, --accent,
   --hairline, --radius...), así que hereda el modo oscuro del tema en
   lugar de imponer blancos fijos. El módulo trae su propia hoja base
   (modules/addons/discordconnect/assets/css/style.css); esta va después
   y solo reajusta lo necesario.

   Si desinstalas el módulo, borra este archivo y su <link> en
   includes/head.tpl. El resto del tema no depende de él.
   ===================================================================== */

:root {
    /* Blurple oficial de Discord, más una variante adaptada al fondo
       oscuro del tema para textos e iconos (el blurple puro sobre
       #07070a se queda en 3.6:1, por debajo de AA). */
    --dc-brand:         #5865F2;
    --dc-brand-hover:   #4752C4;
    --dc-brand-active:  #3C45A5;
    --dc-brand-on-dark: #8b95f7;
    --dc-brand-tint:    rgba(88, 101, 242, 0.14);
    --dc-brand-border:  rgba(88, 101, 242, 0.35);
}


/* ---------------------------------------------------------------------
   01. Botón de marca
   --------------------------------------------------------------------- */

/* Los colores llevan valor de respaldo literal en var(): si por lo que sea
   :root no se aplicara, el botón sigue siendo blurple y no queda transparente
   (que es como acaba viéndose "apagado" sobre el fondo oscuro del tema).

   Los selectores repiten la clase (.dc-btn-discord.dc-btn-discord) para subir
   la especificidad a 0,2,0 sin recurrir a !important, y así ganar a las reglas
   genéricas de .btn del tema sin bloquear ajustes puntuales posteriores. */

.dc-btn-discord,
a.dc-btn-discord,
button.dc-btn-discord,
.dc-btn-discord.dc-btn-discord {
    background-color: var(--dc-brand, #5865F2);
    border: 1px solid var(--dc-brand, #5865F2);
    border-radius: var(--radius, 12px);
    color: #fff;
    font-family: var(--font-ui, inherit);
    font-weight: 600;
    min-height: var(--tap-target, 44px);
    padding: 0.625rem 1.5rem;
    text-decoration: none;
    transition: background-color var(--t, 180ms ease), border-color var(--t, 180ms ease), transform var(--t-fast, 120ms ease);
}

/* El tema define `a:hover, a:focus { color: var(--text); text-decoration:
   underline; }` (custom.css). Esa regla tiene especificidad (0,1,1) y gana a
   un `.dc-btn-discord` a secas (0,1,0): al recibir el foco el botón se volvía
   blanco y subrayado. Estos selectores llegan a (0,2,1) y lo evitan. */

a.dc-btn-discord:link,
a.dc-btn-discord:visited {
    color: #fff;
    text-decoration: none;
}

.dc-btn-discord.dc-btn-discord:hover,
.dc-btn-discord.dc-btn-discord:focus,
a.dc-btn-discord:hover,
a.dc-btn-discord:focus {
    background-color: var(--dc-brand-hover, #4752C4);
    border-color: var(--dc-brand-hover, #4752C4);
    color: #fff;
    text-decoration: none;
}

.dc-btn-discord.dc-btn-discord:active,
a.dc-btn-discord:active {
    background-color: var(--dc-brand-active, #3C45A5);
    border-color: var(--dc-brand-active, #3C45A5);
    color: #fff;
    text-decoration: none;
    transform: translateY(1px);
}

/* Dentro del sidebar y de los paneles de la portada, el tema usa selectores
   muy específicos (#main-body .sidebar .card-sidebar .card-body .btn). Estos
   los igualan para que el color de marca no se pierda en ese contexto. */
#main-body .sidebar .card-sidebar .card-body a.dc-btn-discord,
#main-body .sidebar .card-sidebar .card-body .dc-btn-discord,
#main-body .hex-panel .card-body a.dc-btn-discord,
#main-body .hex-panel .card-body .dc-btn-discord {
    background-color: var(--dc-brand, #5865F2);
    border-color: var(--dc-brand, #5865F2);
    color: #fff;
}

#main-body .sidebar .card-sidebar .card-body a.dc-btn-discord:hover,
#main-body .sidebar .card-sidebar .card-body .dc-btn-discord:hover,
#main-body .hex-panel .card-body a.dc-btn-discord:hover,
#main-body .hex-panel .card-body .dc-btn-discord:hover {
    background-color: var(--dc-brand-hover, #4752C4);
    border-color: var(--dc-brand-hover, #4752C4);
    color: #fff;
}

.dc-btn-discord:focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
}

.dc-btn-discord.disabled,
.dc-btn-discord:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* El icono de marca sí usa la variante clara: va sobre el fondo del tema. */
.dc-icon-brand,
.dc-empty__icon,
.dc-widget__icon {
    color: var(--dc-brand-on-dark);
}


/* ---------------------------------------------------------------------
   02. Página del módulo
   --------------------------------------------------------------------- */

.dc-card {
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
}

.dc-card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.dc-card .card-title {
    font-family: var(--font-display);
    color: var(--text);
}

.dc-empty {
    padding: 2.5rem 1rem;
}

.dc-empty__icon {
    font-size: 4rem;
}

.dc-empty__text {
    color: var(--text-secondary);
    max-width: 34rem;
    margin-inline: auto;
}

.dc-empty__hint {
    color: var(--text-muted);
}

.dc-profile__avatar {
    border-color: var(--dc-brand);
    box-shadow: 0 0 0 4px var(--dc-brand-tint);
}

.dc-profile__name {
    font-family: var(--font-display);
    color: var(--text);
}

.dc-profile__name small {
    font-family: var(--font-ui);
    font-size: 0.875rem;
    color: var(--text-tertiary) !important;
}

.dc-profile__meta dt {
    color: var(--text-tertiary);
    font-weight: 500;
}

.dc-profile__meta dd {
    color: var(--text-secondary);
}

/* Los IDs de rol se muestran como chips, no como <code> suelto. */
.dc-profile__meta code {
    display: inline-block;
    background: var(--dc-brand-tint);
    border: 1px solid var(--dc-brand-border);
    border-radius: var(--radius-pill);
    color: var(--dc-brand-on-dark);
    font-size: 0.75rem;
    padding: 0.125rem 0.625rem;
    margin: 0 0.125rem 0.25rem 0;
}

.dc-prefs__desc {
    color: var(--text-tertiary);
}

.dc-page .form-check-label {
    color: var(--text-secondary);
}


/* ---------------------------------------------------------------------
   03. Widgets inyectados por los hooks
   --------------------------------------------------------------------- */

/* La tarjeta del sidebar la pinta includes/sidebar.tpl con .card-sidebar;
   aquí solo se ajusta el contenido que mete el módulo. */
.card-sidebar .dc-widget,
.hex-panel .dc-widget {
    padding: 0.25rem 0;
}

.dc-widget__avatar {
    border-color: var(--dc-brand);
    box-shadow: 0 0 0 3px var(--dc-brand-tint);
}

.dc-widget__name {
    font-family: var(--font-display);
    color: var(--text);
    font-size: 0.9375rem;
}

.dc-widget__handle,
.dc-widget__text {
    color: var(--text-tertiary);
}

.dc-widget__badge {
    border-radius: var(--radius-pill);
}

.dc-widget__btn {
    border-radius: var(--radius);
    margin-top: 0.5rem;
}

.dc-widget--unlinked .dc-widget__icon {
    font-size: 2.5rem;
}


/* ---------------------------------------------------------------------
   04. Accesibilidad
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .dc-btn-discord,
    .dc-profile__avatar {
        transition: none;
    }

    .dc-btn-discord:active {
        transform: none;
    }
}