/* ================================================================
 * NASUS RP — Portal de soporte (Fluent Support) con el diseño de la web
 *
 * Fluent Support dibuja todo con variables (--fs-*, --el-*). Aquí se
 * cambian por la paleta del tema: fondo oscuro, cyan #00f0ff, morado
 * #b983ff, bordes suaves y esquinas redondeadas. Se carga solo en la
 * página de soporte y en Mi cuenta (inc/modules/support-portal.php).
 * ================================================================ */

/* ---------- Paleta (claro y modo oscuro del plugin, igual) ---------- */
body .fs_client_portal,
html.dark body .fs_client_portal {
    --fs-primary: #00f0ff;
    --fs-primary-dark: #00c8d6;
    --fs-primary-hover: #b983ff;
    --fs-global-component-bg: #0d0d15;
    --fs-white: #12121c;
    --fs-black: #f5f5f7;
    --fs-text-strong: #f5f5f7;
    --fs-text-sub: #b4b4c4;
    --fs-text-light: #8b8b9a;
    --fs-text-lighter: #6c6c7c;
    --fs-text-muted: #8b8b9a;
    --fs-text-dark: #e6e6ee;
    --fs-text-inactive: #8b8b9a;
    --fs-text-primary: #f5f5f7;
    --fs-text-secondary: #b4b4c4;
    --fs-text-white: #07070c;
    --fs-border-soft: #262634;
    --fs-border-soft-rgb: 38, 38, 52;
    --fs-border-light: #262634;
    --fs-border-lighter: #30303f;
    --fs-border-default: #262634;
    --fs-border-input: #30303f;
    --fs-border-input-hover: #45455a;
    --fs-border-error: #ff2e63;
    --fs-border-focus: #00f0ff;
    --fs-bg-weak: #161622;
    --fs-bg-light: #12121c;
    --fs-bg-lighter: #1b1b28;
    --fs-bg-white: #12121c;
    --fs-bg-primary: #12121c;
    --fs-bg-subtle: #161622;
    --fs-bg-disabled: #262634;
    --fs-bg-hover: #1e1e2c;
    --fs-bg-rgb-weak: 22, 22, 34;
    --fs-status-success: #22e06c;
    --fs-status-success-bg: rgba(34, 224, 108, 0.12);
    --fs-status-info: #00f0ff;
    --fs-status-info-bg: rgba(0, 240, 255, 0.1);
    --fs-status-error: #ff2e63;
    --fs-status-error-bg: rgba(255, 46, 99, 0.12);
    --fs-status-error-hover: #ff5a85;
    --fs-status-warning: #ffd166;
    --fs-link: #00f0ff;
    --fs-link-hover: #b983ff;
    --fs-icon: #8b8b9a;
    --fs-icon-light: #6c6c7c;
    --fs-inline-btn-text: #f5f5f7;
    --fs-btn-primary-bg: #00f0ff;
    --fs-btn-text: #07070c;
    --fs-table-hover-bg: #1b1b28;
    --fs-table-header-bg: #161622;
    --fs-subtle-btn-bg: #161622;
    --fs-pagination-hover: #1e1e2c;
    --fs-pagination-text: #b4b4c4;
    --fs-pagination-disabled: #4a4a5a;
    --fs-radius-md: 12px;
    --fs-radius-lg: 16px;
    --fs-radius-xl: 20px;
    --fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --fs-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --fs-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55);
    color: #f5f5f7;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Element Plus: también aplica a los menús y calendarios que se abren fuera del portal */
body.nx-support,
body .fs_client_portal {
    --el-color-primary: #00f0ff;
    --el-color-primary-light-3: #4df5ff;
    --el-color-primary-light-5: #0f5d66;
    --el-color-primary-light-7: #0d3f46;
    --el-color-primary-light-8: #0c3237;
    --el-color-primary-light-9: #0a2226;
    --el-color-primary-dark-2: #00c0cc;
    --el-color-success: #22e06c;
    --el-color-warning: #ffd166;
    --el-color-danger: #ff2e63;
    --el-color-error: #ff2e63;
    --el-bg-color: #12121c;
    --el-bg-color-page: #07070c;
    --el-bg-color-overlay: #12121c;
    --el-popover-bg-color: #12121c;
    --el-popover-border-color: #262634;
    --el-text-color-primary: #f5f5f7;
    --el-text-color-regular: #b4b4c4;
    --el-text-color-secondary: #8b8b9a;
    --el-text-color-placeholder: #6c6c7c;
    --el-border-color: #262634;
    --el-border-color-light: #262634;
    --el-border-color-lighter: #262634;
    --el-border-color-extra-light: #1b1b28;
    --el-fill-color: #161622;
    --el-fill-color-blank: #0d0d15;
    --el-fill-color-light: #161622;
    --el-fill-color-lighter: #161622;
    --el-input-bg-color: #0d0d15;
    --el-input-text-color: #f5f5f7;
    --el-input-border-color: #30303f;
    --el-input-hover-border-color: #45455a;
    --el-input-placeholder-color: #6c6c7c;
    --el-input-focus-border-color: #00f0ff;
    --el-disabled-bg-color: #1b1b28;
    --el-disabled-text-color: #6c6c7c;
    --el-disabled-border-color: #262634;
    --el-table-bg-color: #12121c;
    --el-table-tr-bg-color: #12121c;
    --el-table-header-bg-color: #161622;
    --el-table-row-hover-bg-color: #1b1b28;
    --el-table-border-color: #262634;
    --el-skeleton-color: #161622;
    --el-skeleton-to-color: #262634;
    --el-mask-color: rgba(7, 7, 12, 0.85);
    --el-mask-color-extra-light: rgba(7, 7, 12, 0.3);
    --el-border-radius-base: 10px;
}

/* ---------- Tarjetas con el estilo de la web ---------- */
body .fs_client_portal .fs_tickets_container,
body .fs_client_portal .fs_ticket_wrapper,
body .fs_client_portal .fs_create_ticket_container {
    position: relative;
    background: linear-gradient(180deg, rgba(20, 20, 31, 0.96) 0%, rgba(13, 13, 21, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
body .fs_client_portal .fs_tickets_container::before,
body .fs_client_portal .fs_ticket_wrapper::before,
body .fs_client_portal .fs_create_ticket_container::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00f0ff 30%, #b983ff 70%, transparent);
    opacity: 0.7;
    pointer-events: none;
}

/* Títulos con la tipografía de la web */
body .fs_client_portal .fs_tickets_header h1,
body .fs_client_portal .fs_tickets_header h2,
body .fs_client_portal .fs_tickets_header h3,
body .fs_client_portal .fs_ticket_title,
body .fs_client_portal .fs_ticket_heading,
body .fs_client_portal .fs_ticket_subject {
    font-family: 'Anton', 'Space Grotesk', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #f5f5f7;
}

/* Botones: cyan con brillo, morado al pasar */
body .fs_client_portal .el-button--primary,
body .fs_client_portal .fs_create_ticket_btn,
body .fs_client_portal button[type="submit"] {
    --el-button-text-color: #07070c;
    --el-button-bg-color: #00f0ff;
    --el-button-border-color: #00f0ff;
    --el-button-hover-text-color: #07070c;
    --el-button-hover-bg-color: #b983ff;
    --el-button-hover-border-color: #b983ff;
    --el-button-active-bg-color: #9d63f5;
    border-radius: 100px;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.25);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
body .fs_client_portal .el-button--primary:hover,
body .fs_client_portal .fs_create_ticket_btn:hover {
    box-shadow: 0 8px 24px rgba(185, 131, 255, 0.4);
    transform: translateY(-1px);
}
body .fs_client_portal .el-button:not(.el-button--primary) {
    border-radius: 100px;
}

/* Lista de tickets */
body .fs_client_portal .fs_ticket_row,
body .fs_client_portal .fs_tk_row {
    transition: background 0.2s ease;
}
body .fs_client_portal .fs_ticket_row:hover,
body .fs_client_portal .fs_tk_row:hover {
    background: rgba(0, 240, 255, 0.04);
}
body .fs_client_portal .fs_status_badge {
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Conversación: respuestas de la tienda en cyan, del cliente en morado */
body .fs_client_portal .fs_ticket_thread {
    border-left: 3px solid transparent;
    transition: background 0.2s ease;
}
body .fs_client_portal .fs_ticket_thread.fs_person_agent {
    border-left-color: #00f0ff;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.06), transparent 60%);
}
body .fs_client_portal .fs_ticket_thread.fs_person_customer {
    border-left-color: #b983ff;
    background: linear-gradient(90deg, rgba(185, 131, 255, 0.05), transparent 60%);
}
body .fs_client_portal .fs_thread_ribbon.fs_thread_ribbon_customer {
    color: #b983ff;
    background: rgba(185, 131, 255, 0.12);
    border-radius: 100px;
}
body .fs_client_portal .fs_thread_ribbon_agent {
    border-radius: 100px;
}
body .fs_client_portal .fs_ticket_avatar {
    box-shadow: 0 0 0 2px #12121c, 0 0 0 3px rgba(0, 240, 255, 0.45);
}
body .fs_client_portal .fs_thread_body,
body .fs_client_portal .fs_thread_message {
    color: #e6e6ee;
    line-height: 1.65;
}
body .fs_client_portal .fs_thread_body a,
body .fs_client_portal .fs_thread_message a { color: #00f0ff; }

/* Editor de respuesta */
body .fs_client_portal .wp-editor-wrap,
body .fs_client_portal .wp-editor-container {
    border-color: #30303f;
    border-radius: 12px;
    overflow: hidden;
}
body .fs_client_portal .wp-editor-area,
body .fs_client_portal textarea {
    background: #0d0d15;
    color: #f5f5f7;
}
body .fs_client_portal .mce-toolbar-grp,
body .fs_client_portal .quicktags-toolbar,
body .fs_client_portal .wp-editor-tabs button {
    background: #161622;
    border-color: #262634;
    color: #b4b4c4;
}

/* Alertas (ticket cerrado, avisos) */
body .fs_client_portal .fs_ticket_alert,
body .fs_client_portal .fs_ticket_closed_alert {
    background: rgba(255, 209, 102, 0.08);
    border: 1px solid rgba(255, 209, 102, 0.3);
    border-radius: 14px;
    color: #f5f5f7;
}

/* ================================================================
 * Formularios de acceso / registro / recuperar contraseña (sin sesión)
 * ================================================================ */
.nx-support .fst_login_form_auth_wrapper {
    max-width: 460px;
    margin: 10px auto 30px;
    padding: 28px 26px;
    position: relative;
    background: linear-gradient(180deg, rgba(20, 20, 31, 0.96) 0%, rgba(13, 13, 21, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.nx-support .fst_login_form_auth_wrapper::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00f0ff 30%, #b983ff 70%, transparent);
}
.nx-support .fst_login_form_auth_wrapper p { margin: 0 0 14px; color: #b4b4c4; }
.nx-support .fst_login_form_auth_wrapper label,
.nx-support .fst_field_label label {
    display: block;
    margin-bottom: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b8b9a;
}
.nx-support .fst_field_label.is-required label::after { content: ' *'; color: #ff2e63; }
.nx-support .fst_login_form_auth_wrapper input[type="text"],
.nx-support .fst_login_form_auth_wrapper input[type="email"],
.nx-support .fst_login_form_auth_wrapper input[type="password"] {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background: #0d0d15;
    border: 1px solid #30303f;
    border-radius: 12px;
    color: #f5f5f7;
    font-size: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nx-support .fst_login_form_auth_wrapper input:focus {
    outline: none;
    border-color: #00f0ff;
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.15);
}
.nx-support .fst_login_form_auth_wrapper .login-remember label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 13px;
    color: #b4b4c4;
}
.nx-support .fst_login_form_auth_wrapper input[type="checkbox"] { accent-color: #00f0ff; }
.nx-support .fst_login_form_auth_wrapper #wp-submit,
.nx-support .fst_login_form_auth_wrapper #fst_submit,
.nx-support .fst_login_form_auth_wrapper button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 100px;
    background: #00f0ff;
    color: #07070c;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 22px rgba(0, 240, 255, 0.3);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.nx-support .fst_login_form_auth_wrapper #wp-submit:hover,
.nx-support .fst_login_form_auth_wrapper #fst_submit:hover,
.nx-support .fst_login_form_auth_wrapper button[type="submit"]:hover {
    background: #b983ff;
    box-shadow: 0 10px 28px rgba(185, 131, 255, 0.4);
    transform: translateY(-1px);
}
.nx-support .fst_login_form_auth_wrapper button[type="submit"] svg path { fill: #07070c; }
.nx-support .fst_login_form_auth_wrapper a {
    color: #00f0ff;
    font-weight: 600;
    text-decoration: none;
}
.nx-support .fst_login_form_auth_wrapper a:hover { color: #b983ff; }
.nx-support .fst_registration_fields { margin-bottom: 14px; }

@media (max-width: 640px) {
    .nx-support .fst_login_form_auth_wrapper { padding: 22px 18px; border-radius: 18px; }
    body .fs_client_portal .fs_tickets_container,
    body .fs_client_portal .fs_ticket_wrapper,
    body .fs_client_portal .fs_create_ticket_container { border-radius: 16px; }
}

/* ================================================================
 * Centrado de la página de soporte
 * El tema deja el contenido de las páginas en una columna de 800px
 * pegada a la izquierda (.nx-page-content). Para soporte se ensancha
 * y se centra, que si no el portal queda tirado a un lado.
 * ================================================================ */
.nx-support .nx-page-header,
.nx-support .nx-page-content,
.nx-support .nx-page-article > .nx-page-content {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}
.nx-support .fs_client_portal {
    max-width: 1040px;
    margin: 0 auto;
}

/* ================================================================
 * Botones que no son el principal: "Cerrar ticket", "Cancelar", "✕"
 * Sin esto quedan blancos sobre blanco (o invisibles) en oscuro.
 * ================================================================ */
body .fs_client_portal .el-button:not(.el-button--primary),
body .fs_client_portal .el-button.el-button--default,
body .fs_client_portal .el-button.is-plain,
body .fs_client_portal button.fs_close_ticket,
body .fs_client_portal .fs_ticket_close_btn {
    background: #161622;
    border: 1px solid #30303f;
    color: #e6e6ee;
}
body .fs_client_portal .el-button:not(.el-button--primary):hover,
body .fs_client_portal button.fs_close_ticket:hover,
body .fs_client_portal .fs_ticket_close_btn:hover {
    background: #1e1e2c;
    border-color: #00f0ff;
    color: #00f0ff;
}
/* Cerrar / eliminar: rojo suave, no rojo plano de aviso */
body .fs_client_portal .el-button--danger,
body .fs_client_portal .el-button.is-danger {
    background: rgba(255, 46, 99, 0.12);
    border: 1px solid rgba(255, 46, 99, 0.45);
    color: #ff5a85;
}
body .fs_client_portal .el-button--danger:hover,
body .fs_client_portal .el-button.is-danger:hover {
    background: #ff2e63;
    border-color: #ff2e63;
    color: #fff;
}
/* La "✕" de las ventanas y de los adjuntos */
body .el-dialog,
body .el-message-box {
    background: #12121c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
}
body .el-dialog__title,
body .el-message-box__title { color: #f5f5f7; }
body .el-dialog__headerbtn .el-dialog__close,
body .el-message-box__headerbtn .el-message-box__close,
body .fs_client_portal .el-tag .el-tag__close {
    color: #8b8b9a;
}
body .el-dialog__headerbtn:hover .el-dialog__close,
body .el-message-box__headerbtn:hover .el-message-box__close,
body .fs_client_portal .el-tag .el-tag__close:hover {
    color: #ff2e63;
    background: transparent;
}

/* ================================================================
 * Escribir una respuesta: el fondo se veía blanco
 * Fluent Support usa TinyMCE (iframe), textarea o un div editable
 * según el caso. El iframe se oscurece desde support-portal.js.
 * ================================================================ */
body .fs_client_portal textarea,
body .fs_client_portal .el-textarea__inner,
body .fs_client_portal .el-input__wrapper,
body .fs_client_portal .el-input__inner,
body .fs_client_portal [contenteditable="true"],
body .fs_client_portal .ql-editor,
body .fs_client_portal .fs_editor_wrapper,
body .fs_client_portal .wp-editor-container,
body .fs_client_portal .mce-edit-area,
body .fs_client_portal .mce-panel,
body .nx-fs-editor-dark {
    background: #0d0d15 !important;
    color: #f5f5f7 !important;
}
body .fs_client_portal .el-input__wrapper { box-shadow: 0 0 0 1px #30303f inset; }
body .fs_client_portal .el-input__wrapper.is-focus,
body .fs_client_portal .el-textarea__inner:focus { box-shadow: 0 0 0 1px #00f0ff inset; }
body .fs_client_portal textarea::placeholder,
body .fs_client_portal .el-textarea__inner::placeholder,
body .fs_client_portal .el-input__inner::placeholder { color: #6c6c7c; }
body .fs_client_portal .mce-edit-area iframe,
body .fs_client_portal .wp-editor-area,
body .fs_client_portal iframe.wp-editor-area { background: #0d0d15 !important; }
body .fs_client_portal .mce-statusbar,
body .fs_client_portal .mce-menubar { background: #161622 !important; border-color: #262634 !important; }
body .fs_client_portal .mce-btn button,
body .fs_client_portal .mce-ico { color: #b4b4c4 !important; }
body .fs_client_portal .mce-btn:hover { background: #1e1e2c !important; }

/* Soporte sin sesión: acceso con código (plugin Nasus OTP Login).
   El mensaje "Inicie sesión o cree una cuenta…" sobra: el acceso trae título. */
.nx-support .nx-page-content:has(.nx-support-login) > p { display: none !important; }
.nx-support-login { padding: 8px 0 40px; }

/* Aviso arriba del portal: tickets cerrados/reabrir, uno a la vez, pedido */
.nx-support-notice {
    display: flex;
    gap: 14px;
    max-width: 1040px;
    margin: 0 auto 22px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(0, 240, 255, .06), rgba(185, 131, 255, .05));
    border: 1px solid rgba(0, 240, 255, .22);
    border-radius: 16px;
    color: #cfd0da;
    font-size: 14px;
    line-height: 1.55;
}
.nx-support-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(0, 240, 255, .1);
    color: #00f0ff;
}
.nx-support-notice .nx-support-notice-title {
    margin: 0 0 8px !important;
    font: 700 11px/1.2 var(--nx-font-mono, monospace);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #00f0ff;
}
.nx-support-notice ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nx-support-notice li { position: relative; margin: 0; padding-left: 18px; }
.nx-support-notice li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b983ff;
}
.nx-support-notice strong { color: #f5f5f7; }
@media (max-width: 600px) {
    .nx-support-notice { gap: 10px; padding: 14px; font-size: 13px; }
    .nx-support-notice-icon { display: none; }
}