/* ================================================================
   CONEXIÓN SW - THEME DEFAULT (DARK LUXURY GOLD)
   Basado fielmente en la portada oficial: https://conexionsw.com/
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ================================================================
   1. VARIABLES GLOBALES Y DE SISTEMA
   ================================================================ */
html:root {
  /* Paleta Base Conexión SW */
  --csw-black: #030303;
  --csw-black-soft: #070707;
  --csw-surface: #0a0a0a;
  --csw-gold: #b9944d;
  --csw-gold-light: #d6b86f;
  --csw-gold-dark: #846936;
  --csw-white: #f4f0e8;
  --csw-text: #d9d5ce;
  --csw-muted: #9a9690;
  --csw-muted-dark: #69655f;
  --csw-border: rgba(185, 148, 77, 0.26);
  --csw-border-soft: rgba(185, 148, 77, 0.13);

  /* Variables principales de página */
  --bg: #030303;     /* Fondo de la página base */
  --ink: #f4f0e8;    /* Texto general / Títulos */
  --muted: #9a9690;  /* Texto suave */
  --accent: #b9944d; /* Texto acentuado / Dorado */  
  --scroll-color: rgba(185, 148, 77, 0.35); /* Color de scroll */
  --mobile-topbar-h: 55px; /* Espacio en blanco en móvil para la barra de menú */
  --sticky-top: 1rem;  /* Espacio entre la tarjeta y el fin de la pantalla */

  /* Columna Izquierda / Perfil */
  --left-col-profile-background: #0a0a0a;
  --left-col-profile-avatar-border-radius: 12px;
  --left-col-profile-wallet-background: rgba(185, 148, 77, 0.12);
  --left-col-profile-group-selector-btn-background: rgba(185, 148, 77, 0.22);
  --left-col-profile-name-font-color: #f4f0e8;
  --left-col-profile-area-font-color: #d6b86f;
  --left-col-profile-selector-font-color: #f4f0e8;
  --rigth-col--background: none;

  /* Menú lateral (Desktop y Móvil) */
  --menu-item-background: #0d0d0d;
  --menu-item-font-color: #d9d5ce;
  --menu-item-mobil-background: #070707;
  --menu-item-mobil-scrollbar-width: thin;
  --menu-item-mobil-scrollbar-color: rgba(185, 148, 77, 0.25) transparent;
  --menu-item-mobil-shadow: 0 8px 32px rgba(0, 0, 0, 0.85);
  --menu-item-mobil-btn-background: linear-gradient(115deg, #d7b66c, #a8813c);
  --menu-item-mobil-btn-border: 1px solid rgba(185, 148, 77, 0.5);
  --menu-item-mobil-btn-color: #080705;
  --menu-item-mobil-panel-background: #0a0a0a;
  --menu-item-mobil-option-btn-background: #121212;
  --menu-item-mobil-option-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  --movil-menu-close-color: #b9944d;
  --movil-menu-text-color: #f4f0e8;
  --movil-menu-logout-backround-color: #846936;

  /* Información del sistema / Footer */
  --system-info-background: none;
  --system-info-color: #69655f;
  --domaininfo-footer-text-color: #69655f;

  /* Tipografía */
  --global-font-family: 'Montserrat', 'Poppins-Regular', Arial, sans-serif;

  /* Botón general */  
  --global-button-background-color: #b9944d;
  --global-button-border-color: #b9944d;
  --global-button-text-color: #080705;
  --global-button-background-hover-color: #d6b86f;
  --global-button-border-hover-color: #d6b86f;
  --global-button-radius: 8px;

  /* Estilos y componentes globales */
  --global-border-radius: 8px;
  --global-background-color: #0a0a0a;
  --global-hover-color: #b9944d;
  --global-text-color: #d9d5ce;
  --global-text-color-secondary: #9a9690;
  --global-commponet-bg-color-soft: rgba(185, 148, 77, 0.15);
  --global-commponet-bg-color: #b9944d;
  --global-a-link-color: #d6b86f;
  --global-a-link-hover-color: #f4f0e8;
  --global-border-textarea-color: 1px solid rgba(185, 148, 77, 0.28);
  --global-textarea-bakground-color: #101010;
  --global-table-boxshadow: 0 0 0 0.10rem rgba(185, 148, 77, 0.35);
  --global-table-hover-boxshadow: 0 0 0 0.10rem rgba(185, 148, 77, 0.65);
  --global-pinputtext-padding: 12px;
  --global-pinputtext-height: 40px;
  --global-backround-loader-color: #b9944d;

  /* Toolbar y acciones de galería/comentarios */
  --toolbar-background: #0a0a0a;
  --toolbar-area-background: #101010;
  --toolbar-text-color: #d9d5ce;
  --toolbar-comment-color: #b9944d;
  --toolbar-comment-hover-color: #d6b86f;
  --toolbar-comment-text-color: #080705;
  --toolbar-gallery-icon-margin: 6px;
  --toolbar-gallery-color: #b9944d;
  --toolbar-gallery-hover-color: #d6b86f;
  --toolbar-gallery-folder-color: #f4f0e8;
  --toolbar-gallery-folder-hover-color: #d6b86f;
  --notification-info-text: #f4f0e8;
  --notification-info-profile-text: #080705;
  --notification-info-profile-background: #b9944d;
  --notification-info-profile-border: #d6b86f;
  --notification-info-background: #101010;
  --notification-info-pulse-background: rgba(185, 148, 77, 0.45);
  --image-link-btn: #d6b86f;

  /* Folders */ 
  --folder-header-text-color: #f4f0e8;
  --folder-footer-text-color: #b9944d;
  --folder-border-color: rgba(185, 148, 77, 0.2) rgba(185, 148, 77, 0.2) #0a0a0a rgba(185, 148, 77, 0.2);
  --folder-selected-border-color: #b9944d #b9944d #0a0a0a #b9944d;
  --folder-text-color: #f4f0e8;

  /* Tabs */ 
  --global-tab-background: #101010;
  --global-tab-background-hover: rgba(185, 148, 77, 0.18);
  --global-tab-border: rgba(185, 148, 77, 0.22);
  --global-tab-border-hover: #b9944d;
  --global-tab-font-color: #9a9690;
  --global-tab-font-color-hover: #f4f0e8;
  --global-tab-active-background: #b9944d;
  --global-tab-active-border: #b9944d;
  --global-tab-active-font-color: #080705;  

  /* Variables de superficie y temas PrimeNG (Dark Luxury Gold) */
  --surface-ground: #030303;
  --surface-section: #0a0a0a;
  --surface-card: #0a0a0a;
  --surface-overlay: #0a0a0a;
  --surface-border: rgba(185, 148, 77, 0.22);
  --surface-hover: rgba(185, 148, 77, 0.08);

  --surface-a: #0a0a0a;
  --surface-b: #070707;
  --surface-c: #101010;
  --surface-d: rgba(185, 148, 77, 0.22);
  --surface-e: rgba(185, 148, 77, 0.15);
  --surface-f: #141414;

  --surface-0: #0a0a0a;
  --surface-50: #0d0d0d;
  --surface-100: #141414;
  --surface-200: #1a1a1a;
  --surface-300: #262626;
  --surface-400: #404040;
  --surface-500: #737373;
  --surface-600: #9a9690;
  --surface-700: #a3a3a3;
  --surface-800: #d9d5ce;
  --surface-900: #f4f0e8;

  --primary-color: #b9944d;
  --primary-color-text: #080705;
  --primary-color-light: rgba(185, 148, 77, 0.15);
  --primary-50: rgba(185, 148, 77, 0.05);
  --primary-100: rgba(185, 148, 77, 0.1);
  --primary-200: rgba(185, 148, 77, 0.25);
  --primary-300: rgba(185, 148, 77, 0.4);
  --primary-400: #d6b86f;
  --primary-500: #b9944d;
  --primary-600: #a8813c;
  --primary-700: #d6b86f;
  --primary-800: #846936;
  --primary-900: #5c4620;

  --text-color: #d9d5ce;
  --text-color-secondary: #9a9690;
  --text-primary: #f4f0e8;
  --text-secondary: #9a9690;
  --primary-bg: #b9944d;
  --primary-hover-bg: #d6b86f;
  --focus-ring: rgba(185, 148, 77, 0.25);
  --sidebar-border: rgba(185, 148, 77, 0.26);
  --sidebar-text-size: 1rem;
  --maskbg: rgba(0, 0, 0, 0.75);
  --danger-color: #dc2626;
  --success-color: #16a34a;
  --warning-color: #f59e0b;
  --submit-color: #b9944d;
  --text-danger-color: #dc2626;

  /* Menú lateral simplex (Landing / App) */
  --landing-menu-simplex-desktop-sidebar-bg: #0a0a0a;
  --landing-menu-simplex-desktop-link-color: #d9d5ce;
  --landing-menu-simplex-desktop-social-icon-color: #b9944d;
  --landing-menu-simplex-mobile-topbar-bg: #030303;
  --landing-menu-simplex-mobile-burger-line-color: #080705;
  --landing-menu-simplex-mobile-burger-shadow: rgba(0, 0, 0, 0.4);
  --landing-menu-simplex-mobile-panel-bg: #0a0a0a;
  --landing-menu-simplex-mobile-panel-shadow: rgba(0, 0, 0, 0.6);

  /* ==============================================================
     2. OVERRIDES DE VARIABLES BOOTSTRAP 5 PARA TEMA OSCURO
     ============================================================== */
  --bs-body-bg: #030303;
  --bs-body-color: #d9d5ce;
  --bs-body-color-rgb: 217, 213, 206;
  --bs-card-bg: #0a0a0a;
  --bs-card-color: #d9d5ce;
  --bs-card-border-color: rgba(185, 148, 77, 0.22);
  --bs-border-color: rgba(185, 148, 77, 0.22);
  --bs-border-color-translucent: rgba(185, 148, 77, 0.22);
  --bs-list-group-bg: #0d0d0d;
  --bs-list-group-color: #d9d5ce;
  --bs-list-group-border-color: rgba(185, 148, 77, 0.18);
  --bs-list-group-action-hover-bg: rgba(185, 148, 77, 0.1);
  --bs-list-group-action-hover-color: #d6b86f;
  --bs-list-group-action-active-bg: rgba(185, 148, 77, 0.2);
  --bs-list-group-action-active-color: #f4f0e8;
  --bs-dropdown-bg: #0a0a0a;
  --bs-dropdown-color: #d9d5ce;
  --bs-dropdown-border-color: rgba(185, 148, 77, 0.28);
  --bs-dropdown-link-color: #d9d5ce;
  --bs-dropdown-link-hover-color: #d6b86f;
  --bs-dropdown-link-hover-bg: rgba(185, 148, 77, 0.12);
  --bs-modal-bg: #0a0a0a;
  --bs-modal-color: #f4f0e8;
  --bs-modal-border-color: rgba(185, 148, 77, 0.32);
  --bs-modal-header-border-color: rgba(185, 148, 77, 0.18);
  --bs-modal-footer-border-color: rgba(185, 148, 77, 0.18);

  /* ==============================================================
     3. VARIABLES PRIMENG (TEMA DORADO Y NEGRO)
     ============================================================== */
  --p-button-border-radius: 8px;
  --p-button-label-font-weight: 600;

  /* p-button primary */
  --p-button-primary-background: #b9944d;
  --p-button-primary-hover-background: #d6b86f;
  --p-button-primary-active-background: #846936;
  --p-button-primary-border-color: #b9944d;
  --p-button-primary-hover-border-color: #d6b86f;
  --p-button-primary-active-border-color: #846936;
  --p-button-primary-color: #080705;
  --p-button-primary-hover-color: #080705;
  --p-button-primary-active-color: #080705;
  --p-button-primary-focus-ring-color: rgba(185, 148, 77, 0.6);
  --p-button-primary-focus-ring-shadow: 0 0 0 3px rgba(185, 148, 77, 0.3);

  /* p-button secondary */
  --p-button-secondary-background: rgba(185, 148, 77, 0.15);
  --p-button-secondary-hover-background: rgba(185, 148, 77, 0.25);
  --p-button-secondary-active-background: rgba(185, 148, 77, 0.35);
  --p-button-secondary-border-color: rgba(185, 148, 77, 0.55);
  --p-button-secondary-hover-border-color: #d6b86f;
  --p-button-secondary-active-border-color: #b9944d;
  --p-button-secondary-color: #d6b86f;
  --p-button-secondary-hover-color: #f4f0e8;
  --p-button-secondary-active-color: #f4f0e8;

  /* p-button success */
  --p-button-success-background: #b9944d;
  --p-button-success-hover-background: #d6b86f;
  --p-button-success-active-background: #846936;
  --p-button-success-border-color: #b9944d;
  --p-button-success-hover-border-color: #d6b86f;
  --p-button-success-active-border-color: #846936;
  --p-button-success-color: #080705;
  --p-button-success-hover-color: #080705;
  --p-button-success-active-color: #080705;
  --p-button-success-focus-ring-color: rgba(185, 148, 77, 0.6);
  --p-button-success-focus-ring-shadow: 0 0 0 3px rgba(185, 148, 77, 0.3);

  /* p-button variants */
  --p-button-outlined-primary-border-color: rgba(185, 148, 77, 0.82);
  --p-button-outlined-primary-color: #d6b86f;
  --p-button-outlined-primary-hover-background: rgba(185, 148, 77, 0.08);
  --p-button-text-primary-color: #d6b86f;
  --p-button-text-primary-hover-background: rgba(185, 148, 77, 0.08);
  --p-button-link-color: #d6b86f;
  --p-button-link-hover-color: #f4f0e8;
  --p-button-link-active-color: #b9944d;

  /* p-toolbar */
  --p-toolbar-background: #0a0a0a;
  --p-toolbar-color: #d9d5ce;
  --p-toolbar-border-color: rgba(185, 148, 77, 0.26);
  --p-toolbar-gap: 0.75rem;

  /* p-breadcrumb */
  --p-breadcrumb-background: #070707;
  --p-breadcrumb-item-color: #d6b86f;
  --p-breadcrumb-item-hover-color: #f4f0e8;
  --p-breadcrumb-separator-color: #9a9690;

  /* p-accordion */
  --p-accordion-header-background: #0d0d0d;
  --p-accordion-header-hover-background: #141414;
  --p-accordion-header-active-background: #101010;
  --p-accordion-header-color: #f4f0e8;
  --p-accordion-header-hover-color: #d6b86f;
  --p-accordion-header-active-color: #f4f0e8;
  --p-accordion-header-border-color: rgba(185, 148, 77, 0.22);
  --p-accordion-content-background: #0a0a0a;
  --p-accordion-content-color: #d9d5ce;
  --p-accordion-content-border-color: rgba(185, 148, 77, 0.22);

  /* p-select */
  --p-select-background: #101010;
  --p-select-disabled-background: #181818;
  --p-select-filled-background: #101010;
  --p-select-border-color: rgba(185, 148, 77, 0.28);
  --p-select-hover-border-color: #b9944d;
  --p-select-focus-border-color: #d6b86f;
  --p-select-color: #f4f0e8;
  --p-select-placeholder-color: #706c65;
  --p-select-dropdown-color: #b9944d;
  --p-select-overlay-background: #0a0a0a;
  --p-select-overlay-border-color: rgba(185, 148, 77, 0.28);
  --p-select-overlay-color: #d9d5ce;
  --p-select-option-focus-background: rgba(185, 148, 77, 0.15);
  --p-select-option-selected-background: #b9944d;
  --p-select-option-selected-focus-background: #d6b86f;
  --p-select-option-color: #d9d5ce;
  --p-select-option-focus-color: #f4f0e8;
  --p-select-option-selected-color: #080705;
  --p-select-option-selected-focus-color: #080705;

  /* p-checkbox variables */
  --p-checkbox-background: #101010;
  --p-checkbox-border-color: rgba(185, 148, 77, 0.45);
  --p-checkbox-hover-border-color: #b9944d;
  --p-checkbox-focus-border-color: #d6b86f;
  --p-checkbox-checked-background: #b9944d;
  --p-checkbox-checked-border-color: #b9944d;
  --p-checkbox-checked-color: #080705;
  --p-checkbox-checked-hover-background: #d6b86f;
  --p-checkbox-checked-hover-border-color: #d6b86f;
  --p-checkbox-icon-color: #080705;
  --p-checkbox-icon-checked-color: #080705;

  /* p-textarea */
  --p-textarea-color: #f4f0e8;
  --p-textarea-background: #101010;
  --p-textarea-placeholder-color: #706c65;
  --p-textarea-border-color: rgba(185, 148, 77, 0.28);
  --p-textarea-border-radius: 8px;
  --p-textarea-hover-border-color: #b9944d;
  --p-textarea-focus-border-color: #d6b86f;

  /* p-table */
  --p-datatable-border-color: rgba(185, 148, 77, 0.26);
  --p-datatable-header-background: #0a0a0a;
  --p-datatable-header-color: #f4f0e8;
  --p-datatable-header-cell-background: #0f0f0f;
  --p-datatable-header-cell-hover-background: #161616;
  --p-datatable-header-cell-selected-background: #b9944d;
  --p-datatable-header-cell-border-color: rgba(185, 148, 77, 0.2);
  --p-datatable-header-cell-color: #d6b86f;
  --p-datatable-sort-icon-color: rgba(185, 148, 77, 0.6);
  --p-datatable-sort-icon-hover-color: #d6b86f;
  --p-datatable-row-background: #0a0a0a;
  --p-datatable-row-hover-background: #141414;
  --p-datatable-row-selected-background: rgba(185, 148, 77, 0.18);
  --p-datatable-row-color: #d9d5ce;
  --p-datatable-row-striped-background: #060606;
  --p-datatable-body-cell-border-color: rgba(185, 148, 77, 0.13);

  /* p-paginator */
  --p-paginator-background: #0a0a0a;
  --p-paginator-color: #d9d5ce;
  --p-paginator-border-color: rgba(185, 148, 77, 0.2);
  --p-paginator-button-background: #101010;
  --p-paginator-button-color: #d9d5ce;
  --p-paginator-button-border-color: rgba(185, 148, 77, 0.25);
  --p-paginator-button-hover-background: #181818;
  --p-paginator-button-hover-color: #f4f0e8;
  --p-paginator-button-hover-border-color: #b9944d;
  --p-paginator-current-background: #b9944d;
  --p-paginator-current-color: #080705;
  --p-paginator-current-border-color: #b9944d;
  --p-paginator-nav-icon-color: #b9944d;

  /* p-inputtext */
  --p-inputtext-background: #101010;
  --p-inputtext-color: #f4f0e8;
  --p-inputtext-border-color: rgba(185, 148, 77, 0.28);
  --p-inputtext-placeholder-color: #706c65;
  --p-inputtext-hover-background: #141414;
  --p-inputtext-hover-border-color: #b9944d;
  --p-inputtext-focus-background: #101010;
  --p-inputtext-focus-color: #f4f0e8;
  --p-inputtext-focus-border-color: #d6b86f;

  /* p-dialog */
  --p-dialog-background: #0a0a0a;
  --p-dialog-color: #f4f0e8;
  --p-dialog-border-color: rgba(185, 148, 77, 0.32);
  --p-dialog-header-background: linear-gradient(135deg, #0d0d0d, #070707);
  --p-dialog-header-color: #f4f0e8;
  --p-dialog-header-border-color: rgba(185, 148, 77, 0.18);
  --p-dialog-header-icon-color: #b9944d;
  --p-dialog-header-icon-hover-color: #d6b86f;
  --p-dialog-content-background: #0a0a0a;
  --p-dialog-content-color: #d9d5ce;
  --p-dialog-footer-background: #0a0a0a;
  --p-dialog-footer-border-color: rgba(185, 148, 77, 0.18);

  /* p-tabs */
  --p-tabs-tablist-background: #070707;
  --p-tabs-tab-background: #101010;
  --p-tabs-tab-hover-background: rgba(185, 148, 77, 0.15);
  --p-tabs-tab-active-background: rgba(185, 148, 77, 0.25);
  --p-tabs-tab-color: #9a9690;
  --p-tabs-tab-hover-color: #f4f0e8;
  --p-tabs-tab-active-color: #d6b86f;
  --p-tabs-tab-focus-ring-color: #b9944d;
  --p-tabs-tabpanel-background: #0a0a0a;
  --p-tabs-tabpanel-color: #d9d5ce;
  --p-tabs-active-bar-background: #b9944d;

  /* p-menu, p-tieredmenu, p-contextmenu */
  --p-menu-background: #0a0a0a;
  --p-menu-border-color: rgba(185, 148, 77, 0.3);
  --p-menu-color: #d9d5ce;
  --p-menu-item-color: #d9d5ce;
  --p-menu-item-focus-background: rgba(185, 148, 77, 0.16);
  --p-menu-item-focus-color: #f4f0e8;
  --p-menu-item-icon-color: #b9944d;
  --p-menu-item-icon-focus-color: #d6b86f;
  --p-menu-overlay-background: #0a0a0a;
  --p-menu-overlay-border-color: rgba(185, 148, 77, 0.3);
  --p-menu-overlay-color: #d9d5ce;

  /* p-fileupload (Subida de archivos - Dark Luxury Gold) */
  --p-fileupload-background: #0a0a0a;
  --p-fileupload-color: #d9d5ce;
  --p-fileupload-border-color: rgba(185, 148, 77, 0.28);
  --p-fileupload-border-radius: 8px;
  --p-fileupload-header-background: #0d0d0d;
  --p-fileupload-header-color: #f4f0e8;
  --p-fileupload-header-border-color: rgba(185, 148, 77, 0.22);
  --p-fileupload-header-border-width: 0 0 1px 0;
  --p-fileupload-header-padding: 0.75rem 1rem;
  --p-fileupload-header-gap: 0.75rem;
  --p-fileupload-content-background: #0a0a0a;
  --p-fileupload-content-color: #d9d5ce;
  --p-fileupload-content-border-color: rgba(185, 148, 77, 0.22);
  --p-fileupload-content-padding: 1rem;
  --p-fileupload-content-gap: 1rem;
  --p-fileupload-content-highlight-border-color: #b9944d;
  --p-fileupload-file-background: #0d0d0d;
  --p-fileupload-file-color: #f4f0e8;
  --p-fileupload-file-border-color: rgba(185, 148, 77, 0.18);
  --p-fileupload-file-padding: 0.75rem;
  --p-fileupload-file-gap: 0.75rem;
  --p-fileupload-file-info-gap: 0.25rem;
  --p-fileupload-progressbar-height: 0.35rem;
  --p-fileupload-basic-gap: 0.5rem;
}

/* ================================================================
   4. ESTILOS BASE HTML & BODY & BOOTSTRAP UTILITIES OVERRIDE
   ================================================================ */
@font-face {
  font-family: Poppins-Regular;
  src: url('./fonts/poppins/Poppins-Regular.ttf');
}

@font-face {
  font-family: Poppins-Medium;
  src: url('./fonts/poppins/Poppins-Medium.ttf');
}

@font-face {
  font-family: 'QuetzalWeb';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./fonts/quetzalweb.ttf") format("truetype");
}

* {
  box-sizing: border-box;
}

html, body {
  background-color: var(--bg) !important;
  font-family: var(--global-font-family);
  color: var(--global-text-color) !important;
  margin: 0;
  padding: 0;
  height: 100%;
}

a {
  color: var(--global-a-link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--global-a-link-hover-color);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 500;
}

/* Bootstrap class dark overrides */
.bg-white {
  background-color: #0a0a0a !important;
  color: #d9d5ce !important;
}

.bg-light {
  background-color: #0d0d0d !important;
  color: #d9d5ce !important;
}

.text-dark {
  color: #f4f0e8 !important;
}

.text-muted {
  color: #9a9690 !important;
}

.text-black {
  color: #f4f0e8 !important;
}

.border {
  border-color: rgba(185, 148, 77, 0.22) !important;
}

/* Override del contenedor wrap-area global */
.wrap-area {
  background: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  outline: none !important;
  color: #d9d5ce !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

.wrap-input {
  width: 100% !important;
  position: relative !important;
  border-bottom: none !important;
  margin-bottom: 1rem !important;
}

.label-input {
  font-size: 0.9rem !important;
  color: #f4f0e8 !important;
  font-weight: 600 !important;
  margin-bottom: 0.4rem !important;
  display: inline-block !important;
  padding-left: 0 !important;
}

/* QR Code Display Container */
qrcode,
qrcode canvas,
qrcode img {
  background-color: #ffffff !important;
  padding: 12px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Input text, textarea & controls global styling */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input.p-inputtext,
.p-inputtext,
.wrap-input input,
.wrap-input .input,
.wrap-input textarea,
.qwclass input,
.qwclass textarea {
  background-color: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.28) !important;
  color: #f4f0e8 !important;
  border-radius: 6px !important;
  padding: 0.55rem 0.85rem !important;
}

input.p-inputtext:focus,
.p-inputtext:focus,
.wrap-input input:focus,
.wrap-input textarea:focus,
.qwclass input:focus,
.qwclass textarea:focus {
  border-color: #b9944d !important;
  box-shadow: 0 0 0 2px rgba(185, 148, 77, 0.2) !important;
  outline: none !important;
}

/* ================================================================
   5. CONTENEDORES PRINCIPALES (TARJETAS LATERALES Y CENTRALES)
   ================================================================ */
.model01-card, 
.model01-rigth-card {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  border-radius: 12px !important;
  color: var(--global-text-color) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

.mobile-topbar {
  background-color: #070707 !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.25) !important;
  color: #f4f0e8 !important;
}

.mobile-drawer {
  background-color: #0a0a0a !important;
  border-right: 1px solid rgba(185, 148, 77, 0.26) !important;
}

.mobile-drawer-header {
  border-bottom: 1px solid rgba(185, 148, 77, 0.2) !important;
  background: linear-gradient(135deg, #0d0d0d, #070707) !important;
}

/* ================================================================
   6. MENÚ LATERAL DESKTOP (LIST GROUP ITEMS)
   ================================================================ */
.cmp-menu-base .list-group-item,
.menu-inner .list-group-item {
  background-color: #0d0d0d !important;
  border: 1px solid rgba(185, 148, 77, 0.18) !important;
  color: #d9d5ce !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.03em !important;
  transition: all 0.22s ease !important;
}

.cmp-menu-base .list-group-item .mov-menu-item-icon,
.menu-inner .list-group-item .mov-menu-item-icon,
.cmp-menu-base .list-group-item i,
.menu-inner .list-group-item i {
  color: #b9944d !important;
  transition: color 0.22s ease, transform 0.22s ease !important;
}

.cmp-menu-base .list-group-item:hover,
.menu-inner .list-group-item:hover,
.cmp-menu-base .list-group-item-action:hover,
.menu-inner .list-group-item-action:hover {
  background-color: rgba(185, 148, 77, 0.08) !important;
  border-color: rgba(185, 148, 77, 0.5) !important;
  color: #d6b86f !important;
  transform: translateX(3px);
}

.cmp-menu-base .list-group-item:hover .mov-menu-item-icon,
.menu-inner .list-group-item:hover .mov-menu-item-icon {
  color: #d6b86f !important;
}

.cmp-menu-base .list-group-item.active,
.menu-inner .list-group-item.active,
.cmp-menu-base .list-group-item.router-link-active,
.menu-inner .list-group-item.router-link-active {
  background: linear-gradient(115deg, rgba(215, 182, 108, 0.15), rgba(168, 129, 60, 0.15)) !important;
  border-color: #b9944d !important;
  color: #d6b86f !important;
  font-weight: 600 !important;
}

.submenu-container {
  background: transparent !important;
}

.submenu-level-1 .list-group-item {
  background-color: #070707 !important;
  border: 1px solid rgba(185, 148, 77, 0.12) !important;
  color: #9a9690 !important;
  font-size: 0.8rem !important;
}

.submenu-level-1 .list-group-item:hover {
  background-color: rgba(185, 148, 77, 0.08) !important;
  border-color: rgba(185, 148, 77, 0.4) !important;
  color: #d6b86f !important;
}

/* ================================================================
   7. TARJETA DE PERFIL / CABECERA LATERAL
   ================================================================ */
.profile-base {
  background: transparent !important;
  padding: 0.5rem 0;
}

.profile-base-avatar {
  background-color: #070707 !important;
  border: 1px solid rgba(185, 148, 77, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

.profile-link-text h3,
.profile-bigphoto-card .name {
  color: #f4f0e8 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

.profile-link-text .small,
.profile-bigphoto-card .area {
  color: #d6b86f !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.wallet-card {
  background: #0d0d0d !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  border-radius: 8px !important;
  color: #d6b86f !important;
}

.wallet-icon {
  color: #b9944d !important;
}

/* ================================================================
   8. PERFIL DE USUARIO PRINCIPAL (PROFILEVIEW / CARDS & FIELDS)
   ================================================================ */
.qw-profile-card,
.qw-profile-card.bg-white {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8) !important;
  color: #d9d5ce !important;
  overflow: hidden !important;
}

.qw-profile-banner {
  background-color: #050505 !important;
  border-radius: 16px 16px 0 0 !important;
}

.qw-avatar-card {
  background: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.85) !important;
}

/* Botones de subida de fotos (Banner y Avatar) - Posición a la derecha como en sexyotaku */
.topProfileUpload,
.topProfileUpload.p-fileupload,
.topProfileUpload .p-fileupload,
.topProfileUpload .p-fileupload-basic {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  left: auto !important;
  width: auto !important;
  display: inline-flex !important;
  z-index: 15 !important;
}

.profileAvatarUpload,
.profileAvatarUpload.p-fileupload,
.profileAvatarUpload .p-fileupload,
.profileAvatarUpload .p-fileupload-basic {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  left: auto !important;
  width: auto !important;
  display: inline-flex !important;
  z-index: 15 !important;
}

.topProfileUpload .p-button,
.profileAvatarUpload .p-button,
.topProfileUpload .p-fileupload-choose,
.profileAvatarUpload .p-fileupload-choose {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.qw-profile-username,
h2.qw-profile-username {
  color: #f4f0e8 !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
}

.qw-meta-location {
  color: #9a9690 !important;
}

.qw-meta-invited {
  color: #9a9690 !important;
}

.qw-meta-invited a {
  color: #d6b86f !important;
}

.qw-meta-invited a:hover {
  color: #f4f0e8 !important;
  text-decoration: underline !important;
}

/* Botones de acción del perfil (Follow, Request friendship, Chat) */
.qw-profile-actions-wrapper .p-button {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  border: 1px solid #b9944d !important;
  color: #080705 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.qw-profile-actions-wrapper .p-button:hover {
  background: linear-gradient(115deg, #e2c57e, #bd954d) !important;
  border-color: #d6b86f !important;
  color: #080705 !important;
  transform: translateY(-1px) !important;
}

.qw-profile-actions-wrapper .p-button .p-button-icon {
  color: #080705 !important;
}

/* Campos dinámicos y atributos de subperfil (Nombre, Género, Preferencia, Buscando, etc.) */
.subProfileInfoTitle {
  width: 100% !important;
  color: #9a9690 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 2px !important;
  text-transform: none !important;
}

.subProfileInfoData {
  margin-top: 2px !important;
  margin-bottom: 18px !important;
  width: 100% !important;
  color: #f4f0e8 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.28) !important;
  padding-bottom: 6px !important;
}

/* Estadísticas del perfil */
.qw-profile-stats-desktop,
.qw-profile-stats-mobile {
  background: rgba(10, 10, 10, 0.92) !important;
  border: 1px solid rgba(185, 148, 77, 0.25) !important;
  color: #d9d5ce !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

.qw-stat-btn {
  color: #d9d5ce !important;
}

.qw-stat-btn:hover {
  color: #d6b86f !important;
}

/* Biografía / Mensaje */
.qw-profile-bio {
  background-color: #070707 !important;
  border: 1px solid rgba(185, 148, 77, 0.18) !important;
  border-left: 4px solid #b9944d !important;
  color: #d9d5ce !important;
}

.qw-bio-html {
  color: #d9d5ce !important;
}

/* URL Pública */
.qw-public-url-wrapper {
  background: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.28) !important;
}

.qw-public-url-wrapper:hover {
  border-color: #b9944d !important;
}

.qw-public-url-input {
  color: #d9d5ce !important;
}

.qw-public-url-copy-btn {
  color: #b9944d !important;
}

.qw-public-url-copy-btn:hover {
  color: #d6b86f !important;
}

/* ================================================================
   9. PESTAÑAS DEL PERFIL (QSTABMENU)
   ================================================================ */
.custom-tabmenu {
  border-bottom: 1px solid rgba(185, 148, 77, 0.22) !important;
  gap: 0.35rem !important;
}

.tabmenu-btn {
  background: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  color: #9a9690 !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  padding: 10px 18px 8px 18px !important;
  transition: all 0.2s ease !important;
}

.tabmenu-btn:hover {
  background: rgba(185, 148, 77, 0.15) !important;
  border-color: rgba(185, 148, 77, 0.5) !important;
  color: #f4f0e8 !important;
}

.tabmenu-btn-active {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  border-color: #b9944d !important;
  border-bottom: 1px solid #b9944d !important;
  color: #080705 !important;
  font-weight: 700 !important;
}

.tabmenu-btn-active .tabmenu-icon,
.tabmenu-btn-active .tabmenu-label {
  color: #080705 !important;
}

.tabmenu-icon {
  font-size: 0.95rem !important;
}

.well {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ================================================================
   10. TABLAS DE PERMISOS Y SEGURIDAD (DATA TABLE & CMP-PERMISSIONS)
   ================================================================ */
.dataTable {
  background: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.25) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;
  overflow: hidden !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

.dataTable th {
  background: linear-gradient(135deg, #0d0d0d, #070707) !important;
  color: #d6b86f !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.22) !important;
  border-right: 1px solid rgba(185, 148, 77, 0.12) !important;
}

.dataTable tr {
  border-top: 1px solid rgba(185, 148, 77, 0.15) !important;
  color: #d9d5ce !important;
}

.dataTable td {
  background: #0a0a0a !important;
  color: #f4f0e8 !important;
  font-size: 0.9rem !important;
  padding: 10px 14px !important;
  border-right: 1px solid rgba(185, 148, 77, 0.12) !important;
}

.dataTable tr:nth-child(odd) td {
  background: #060606 !important;
}

.dataTable tr:hover td,
.dataTable tr:nth-child(odd):hover td {
  background: rgba(185, 148, 77, 0.12) !important;
  color: #f4f0e8 !important;
}

/* ================================================================
   11. CHECKBOXES (PRIMENG & CUSTOM) - ALTO CONTRASTE DORADO/NEGRO
   ================================================================ */
p-checkbox,
.p-checkbox {
  display: inline-flex !important;
  vertical-align: middle !important;
}

.p-checkbox .p-checkbox-box {
  background-color: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.45) !important;
  border-radius: 4px !important;
  width: 20px !important;
  height: 20px !important;
  transition: all 0.2s ease !important;
}

.p-checkbox:not(.p-disabled):hover .p-checkbox-box {
  border-color: #b9944d !important;
  box-shadow: 0 0 0 1px rgba(185, 148, 77, 0.3) !important;
}

/* Estado Marcado (Checked / Highlight) */
.p-checkbox.p-checkbox-checked .p-checkbox-box,
.p-checkbox .p-checkbox-box.p-highlight,
.p-checkbox-box.p-highlight,
.p-checkbox-checked .p-checkbox-box,
.p-checkbox-box:has(:checked) {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  background-color: #b9944d !important;
  border-color: #b9944d !important;
  box-shadow: 0 2px 8px rgba(185, 148, 77, 0.35) !important;
}

/* Icono del Check (Marca ✓) */
.p-checkbox .p-checkbox-box .p-checkbox-icon,
.p-checkbox.p-checkbox-checked .p-checkbox-box .p-checkbox-icon,
.p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon,
.p-checkbox-checked .p-checkbox-icon,
.p-checkbox-icon {
  color: #080705 !important;
  fill: #080705 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.p-checkbox-icon path,
svg.p-checkbox-icon path {
  fill: #080705 !important;
  stroke: #080705 !important;
}

/* Radio buttons */
.p-radiobutton .p-radiobutton-box {
  background-color: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.45) !important;
}

.p-radiobutton .p-radiobutton-box.p-highlight {
  border-color: #b9944d !important;
  background-color: #101010 !important;
}

.p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
  background-color: #b9944d !important;
}

/* ================================================================
   12. PUBLICACIONES, MURO Y COMENTARIOS (FEED CARDS)
   ================================================================ */
.card,
.commentItem,
.commentListTml .card {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  border-radius: 8px !important;
  color: #d9d5ce !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.commentUserName {
  color: #d6b86f !important;
  font-family: var(--global-font-family) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  transition: color 0.2s ease !important;
}

.commentUserName:hover {
  color: #f4f0e8 !important;
}

.commentInfo,
.commentInfoDate,
.commentInfo span {
  color: #9a9690 !important;
  font-size: 0.78rem !important;
}

.commentTextDiv,
.formatted-text {
  color: #d9d5ce !important;
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
}

.user-pic img,
.user-pic qw-file img {
  border-radius: 50% !important;
  border: 1px solid rgba(185, 148, 77, 0.4) !important;
}

/* Barra de acciones inferior (Likes, Comentarios, etc.) */
.commentFooterBar {
  border-top: 1px solid rgba(185, 148, 77, 0.12) !important;
  padding-top: 8px !important;
  margin-top: 6px !important;
}

.commentFooterBar ::ng-deep .p-button .p-button-label {
  color: #9a9690 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  font-weight: 500 !important;
}

.commentFooterBar ::ng-deep .p-button .p-button-icon {
  color: #b9944d !important;
  font-size: 0.9rem !important;
}

.commentFooterBar ::ng-deep .p-button:hover .p-button-icon,
.commentFooterBar ::ng-deep .p-button:hover .p-button-label {
  color: #d6b86f !important;
}

/* Botón 3 puntos */
.commentToolBar .p-button.p-button-text,
.commentActions ::ng-deep .p-button.p-button-text {
  color: #b9944d !important;
}

.commentToolBar .p-button.p-button-text:hover,
.commentActions ::ng-deep .p-button.p-button-text:hover {
  color: #d6b86f !important;
  background: rgba(185, 148, 77, 0.1) !important;
}

.commentActions ::ng-deep .p-button .p-button-icon {
  color: #b9944d !important;
}

.commentActions ::ng-deep .p-button:hover .p-button-icon {
  color: #d6b86f !important;
}

/* ================================================================
   13. MENÚS CONTEXTUALES / DESPLEGABLES (3 PUNTOS, CONTEXT, ETC.)
   ================================================================ */
p-menu, 
.p-menu, 
.p-menu-overlay,
.p-tieredmenu,
.p-contextmenu,
.p-submenu-list {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.3) !important;
  border-radius: 8px !important;
  color: #d9d5ce !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9) !important;
  padding: 0.35rem !important;
}

.p-menu .p-menuitem,
.p-tieredmenu .p-menuitem,
.p-contextmenu .p-menuitem {
  margin: 2px 0 !important;
}

.p-menu .p-menuitem-content,
.p-tieredmenu .p-menuitem-content,
.p-contextmenu .p-menuitem-content {
  background-color: transparent !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.p-menu .p-menuitem-link,
.p-tieredmenu .p-menuitem-link,
.p-contextmenu .p-menuitem-link {
  background-color: transparent !important;
  color: #d9d5ce !important;
  font-size: 0.86rem !important;
  padding: 0.65rem 0.9rem !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.p-menu .p-menuitem-text,
.p-tieredmenu .p-menuitem-text,
.p-contextmenu .p-menuitem-text {
  color: #d9d5ce !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

.p-menu .p-menuitem-icon,
.p-tieredmenu .p-menuitem-icon,
.p-contextmenu .p-menuitem-icon {
  color: #b9944d !important;
  font-size: 0.95rem !important;
  margin-right: 0.6rem !important;
}

/* Hover sin blanco sobre blanco */
.p-menu .p-menuitem-content:hover,
.p-menu .p-menuitem-link:hover,
.p-menu .p-menuitem.p-focus > .p-menuitem-content,
.p-menu .p-menuitem-content.p-focus,
.p-tieredmenu .p-menuitem-content:hover,
.p-tieredmenu .p-menuitem-link:hover,
.p-contextmenu .p-menuitem-content:hover,
.p-contextmenu .p-menuitem-link:hover {
  background-color: rgba(185, 148, 77, 0.18) !important;
  color: #f4f0e8 !important;
}

.p-menu .p-menuitem-content:hover .p-menuitem-text,
.p-menu .p-menuitem-link:hover .p-menuitem-text,
.p-menu .p-menuitem.p-focus .p-menuitem-text,
.p-tieredmenu .p-menuitem-content:hover .p-menuitem-text,
.p-contextmenu .p-menuitem-content:hover .p-menuitem-text {
  color: #f4f0e8 !important;
}

.p-menu .p-menuitem-content:hover .p-menuitem-icon,
.p-menu .p-menuitem-link:hover .p-menuitem-icon,
.p-menu .p-menuitem.p-focus .p-menuitem-icon,
.p-tieredmenu .p-menuitem-content:hover .p-menuitem-icon,
.p-contextmenu .p-menuitem-content:hover .p-menuitem-icon {
  color: #d6b86f !important;
}

/* Opción de borrar en menú desplegable */
.menu-item-delete .p-menuitem-text,
.menu-item-delete .p-menuitem-icon {
  color: #ef4444 !important;
}

.menu-item-delete:hover .p-menuitem-content,
.menu-item-delete .p-menuitem-content:hover,
.menu-item-delete:hover .p-menuitem-link {
  background-color: rgba(239, 68, 68, 0.16) !important;
}

.menu-item-delete:hover .p-menuitem-text,
.menu-item-delete:hover .p-menuitem-icon {
  color: #fca5a5 !important;
}

/* ================================================================
   14. PÁGINAS ADMINISTRATIVAS & ACCORDION (DOMAIN CONFIG, ETC.)
   ================================================================ */
.config-dashboard {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  border-radius: 12px !important;
  color: #d9d5ce !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

.config-sidebar {
  background-color: #070707 !important;
  border-right: 1px solid rgba(185, 148, 77, 0.22) !important;
}

.sidebar-header {
  padding: 24px !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.2) !important;
  background: linear-gradient(135deg, #0d0d0d, #070707) !important;
}

.sidebar-header h3 {
  color: #f4f0e8 !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
}

.sidebar-header p {
  color: #d6b86f !important;
}

.settings-spin-icon {
  color: #b9944d !important;
}

.config-sidebar .menu-item {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.15) !important;
  color: #d9d5ce !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  transition: all 0.22s ease-in-out !important;
}

.config-sidebar .menu-item:hover {
  background-color: rgba(185, 148, 77, 0.08) !important;
  border-color: rgba(185, 148, 77, 0.5) !important;
  color: #d6b86f !important;
  transform: translateX(4px) !important;
}

.config-sidebar .menu-item i {
  color: #b9944d !important;
}

.config-sidebar .menu-item-label {
  color: #d9d5ce !important;
}

.config-sidebar .menu-item-desc {
  color: #9a9690 !important;
}

.config-sidebar .menu-item:hover .menu-item-label {
  color: #f4f0e8 !important;
}

.config-sidebar .menu-item:hover .arrow-indicator {
  color: #d6b86f !important;
}

.config-sidebar .menu-item-active {
  background: linear-gradient(115deg, rgba(215, 182, 108, 0.15), rgba(168, 129, 60, 0.15)) !important;
  border: 1px solid #b9944d !important;
}

.config-sidebar .menu-item-active .menu-item-label {
  color: #d6b86f !important;
}

.config-sidebar .menu-item-active .menu-item-content i,
.config-sidebar .menu-item-active .arrow-indicator {
  color: #b9944d !important;
}

.sidebar-footer {
  border-top: 1px solid rgba(185, 148, 77, 0.2) !important;
  background-color: #070707 !important;
  color: #69655f !important;
}

.config-content {
  background-color: #0a0a0a !important;
  color: #d9d5ce !important;
}

.content-header-bar {
  border-bottom: 1px solid rgba(185, 148, 77, 0.22) !important;
  background: linear-gradient(135deg, #0d0d0d, #070707) !important;
}

.content-header-bar h2 {
  color: #f4f0e8 !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
}

.content-subtitle {
  color: #9a9690 !important;
}

.domain-action-header {
  background-color: #070707 !important;
  border: 1px solid rgba(185, 148, 77, 0.2) !important;
  border-radius: 8px !important;
}

.domain-action-header .p-button {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  border: 1px solid #b9944d !important;
  color: #080705 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

/* Accordion de PrimeNG */
p-accordion {
  background: transparent !important;
  border: none !important;
}

p-accordion-panel {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.p-accordionpanel,
.p-accordion-panel {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

p-accordion-header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.p-accordionheader,
.p-accordion-header,
.p-accordion-header-link {
  background: linear-gradient(135deg, #0d0d0d, #070707) !important;
  color: #f4f0e8 !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.18) !important;
  padding: 1rem 1.25rem !important;
}

.p-accordionheader:hover,
.p-accordion-header:hover,
.p-accordion-header-link:hover {
  background: #141414 !important;
  color: #d6b86f !important;
}

p-accordion-content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.p-accordioncontent,
.p-accordion-content,
.p-accordioncontent-content {
  background-color: #0a0a0a !important;
  color: #d9d5ce !important;
  padding: 1.25rem !important;
}

/* ================================================================
   15. POPUPS DE CONFIRMACIÓN (SWEETALERT2 & PRIMENG CONFIRM)
   ================================================================ */
/* SweetAlert2 Popup Overlay */
.swal2-container {
  z-index: 100000000 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(4px);
}

.swal2-popup,
.swal2-modal {
  background: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95) !important;
  color: #d9d5ce !important;
  padding: 2rem !important;
}

.swal2-title {
  color: #f4f0e8 !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  margin-bottom: 0.75rem !important;
}

.swal2-html-container,
.swal2-content {
  color: #d9d5ce !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* Iconos de SweetAlert2 */
.swal2-icon.swal2-question {
  border-color: #b9944d !important;
  color: #b9944d !important;
}

.swal2-icon.swal2-warning {
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

.swal2-icon.swal2-success {
  border-color: #16a34a !important;
  color: #16a34a !important;
}

.swal2-icon.swal2-error {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}

.swal2-icon.swal2-info {
  border-color: #0ea5e9 !important;
  color: #0ea5e9 !important;
}

/* Botones de Confirmación SweetAlert2 */
.swal2-actions {
  gap: 12px !important;
  margin-top: 1.5rem !important;
}

.swal2-styled.swal2-confirm {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  border: 1px solid #b9944d !important;
  color: #080705 !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.65rem 1.75rem !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.swal2-styled.swal2-confirm:hover {
  background: linear-gradient(115deg, #e2c57e, #bd954d) !important;
  border-color: #d6b86f !important;
  color: #080705 !important;
  transform: translateY(-1px) !important;
}

.swal2-styled.swal2-cancel {
  background: rgba(185, 148, 77, 0.15) !important;
  border: 1px solid rgba(185, 148, 77, 0.45) !important;
  color: #d6b86f !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.65rem 1.75rem !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.swal2-styled.swal2-cancel:hover {
  background: rgba(185, 148, 77, 0.25) !important;
  border-color: #d6b86f !important;
  color: #f4f0e8 !important;
  transform: translateY(-1px) !important;
}

.swal2-styled.swal2-deny {
  background: #dc2626 !important;
  border: 1px solid #dc2626 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.swal2-close {
  color: #9a9690 !important;
}

.swal2-close:hover {
  color: #f4f0e8 !important;
}

/* PrimeNG ConfirmDialog & ConfirmPopup */
.p-confirmdialog,
.p-confirmpopup {
  background: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.35) !important;
  border-radius: 12px !important;
  color: #d9d5ce !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95) !important;
}

.p-confirmdialog-icon,
.p-confirmpopup-icon {
  color: #b9944d !important;
  font-size: 2rem !important;
}

.p-confirmdialog-message,
.p-confirmpopup-message {
  color: #d9d5ce !important;
  font-size: 1rem !important;
  margin-left: 1rem !important;
}

.p-confirmdialog .p-confirmdialog-accept,
.p-confirmpopup .p-confirmpopup-accept {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  border: 1px solid #b9944d !important;
  color: #080705 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.p-confirmdialog .p-confirmdialog-reject,
.p-confirmpopup .p-confirmpopup-reject {
  background: rgba(185, 148, 77, 0.15) !important;
  border: 1px solid rgba(185, 148, 77, 0.45) !important;
  color: #d6b86f !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

/* ================================================================
   16. PESTAÑA Y VENTANA DE CHAT (NG-CHAT)
   ================================================================ */
#ng-chat {
  font-family: var(--global-font-family) !important;
}

#ng-chat-people {
  position: relative !important;
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.35) !important;
  border-bottom: none !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.75) !important;
  overflow: hidden !important;
}

#ng-chat-people .ng-chat-title,
.ng-chat-window .ng-chat-title,
#ng-chat .secondary-background,
#ng-chat .primary-background.ng-chat-people-collapsed,
#ng-chat-people.ng-chat-people-collapsed {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  color: #080705 !important;
  border-top-left-radius: 7px !important;
  border-top-right-radius: 7px !important;
}

#ng-chat-people .ng-chat-title span,
#ng-chat-people .ng-chat-title strong,
.ng-chat-window .ng-chat-title strong,
.ng-chat-window .ng-chat-title span {
  color: #080705 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
}

#ng-chat-people .ng-chat-title:hover {
  background: linear-gradient(115deg, #e2c57e, #bd954d) !important;
}

#ng-chat-users {
  background-color: #0a0a0a !important;
}

#ng-chat-users li {
  color: #d9d5ce !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
}

#ng-chat-users li:hover {
  background-color: rgba(185, 148, 77, 0.15) !important;
}

#ng-chat-users li strong {
  color: #f4f0e8 !important;
}

#ng-chat-search_friend {
  background-color: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.28) !important;
  color: #f4f0e8 !important;
  border-radius: 6px !important;
}

.ng-chat-window {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.35) !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.75) !important;
}

.ng-chat-window .ng-chat-messages {
  background-color: #070707 !important;
}

.chat-window-input {
  background-color: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.28) !important;
  color: #f4f0e8 !important;
}

.sent-chat-message-container {
  background-color: rgba(185, 148, 77, 0.22) !important;
  border: 1px solid rgba(185, 148, 77, 0.45) !important;
  color: #f4f0e8 !important;
  border-radius: 8px !important;
}

.received-chat-message-container {
  background-color: #141414 !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  color: #d9d5ce !important;
  border-radius: 8px !important;
}

.ng-chat-footer {
  background-color: #0a0a0a !important;
  border-top: 1px solid rgba(185, 148, 77, 0.2) !important;
}

/* ================================================================
   17. GALERÍAS, ÁLBUMES Y ARCHIVOS (CMP-GALLERY)
   ================================================================ */
p-toolbar {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

.p-toolbar {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  border-radius: 8px !important;
  padding: 0.65rem 1rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.p-toolbar-group-start,
.p-toolbar-group-center,
.p-toolbar-group-end,
.p-toolbar-group-left,
.p-toolbar-group-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: nowrap !important;
}

@media (min-width: 576px) {
  .p-toolbar {
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 575px) {
  .p-toolbar {
    flex-wrap: wrap !important;
  }
}

p-breadcrumb {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
}

.p-breadcrumb {
  background-color: #070707 !important;
  border: 1px solid rgba(185, 148, 77, 0.2) !important;
  border-radius: 8px !important;
  padding: 0.6rem 1rem !important;
}

.p-breadcrumb ul {
  gap: 0.25rem !important;
}

.p-breadcrumb .p-menuitem-link .p-menuitem-text,
.p-breadcrumb .p-menuitem-link .p-menuitem-icon {
  color: #d6b86f !important;
}

.p-breadcrumb .p-menuitem-link:hover .p-menuitem-text,
.p-breadcrumb .p-menuitem-link:hover .p-menuitem-icon {
  color: #f4f0e8 !important;
}

.p-breadcrumb .p-breadcrumb-chevron {
  color: #9a9690 !important;
}

.galleryFolderGrid,
.galleryItemGrid {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  border-radius: 8px !important;
  color: #d9d5ce !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.2s ease !important;
}

.galleryFolderGrid:hover,
.galleryItemGrid:hover {
  border-color: #b9944d !important;
  box-shadow: 0 4px 20px rgba(185, 148, 77, 0.25) !important;
  transform: translateY(-2px) !important;
}

.galleryFolderInfo {
  color: #f4f0e8 !important;
}

/* ================================================================
   18. CAJA PARA CREAR PUBLICACIÓN / NUEVO COMENTARIO (MASTER COMMENT)
   ================================================================ */
.cmptextarea,
textarea.form-control,
.p-textarea {
  background-color: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.28) !important;
  color: #f4f0e8 !important;
  border-radius: 8px !important;
  padding: 0.8rem !important;
}

.cmptextarea:focus,
textarea.form-control:focus,
.p-textarea:focus {
  border-color: #b9944d !important;
  box-shadow: 0 0 0 0.2rem rgba(185, 148, 77, 0.15) !important;
  outline: none !important;
}

.masterCommentTable td {
  vertical-align: middle;
}

.masterCommentSend .p-button,
.masterCommentSend .p-button-success {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  border: 1px solid #b9944d !important;
  color: #080705 !important;
  border-radius: 8px !important;
}

.masterCommentSend .p-button:hover,
.masterCommentSend .p-button-success:hover {
  background: linear-gradient(115deg, #e2c57e, #bd954d) !important;
  border-color: #d6b86f !important;
  color: #080705 !important;
}

.commentToolBar .p-button-danger,
.commentToolBar .p-button-help,
.commentUploadBtn .p-fileupload-choose-button,
.commentUploadBtn .p-fileupload-choose {
  background: transparent !important;
  border: 1px solid rgba(185, 148, 77, 0.35) !important;
  color: #d6b86f !important;
  border-radius: 8px !important;
}

.commentToolBar .p-button-danger .p-button-icon,
.commentToolBar .p-button-help .p-button-icon,
.commentUploadBtn .p-fileupload-choose-button .p-button-icon,
.commentUploadBtn .p-fileupload-choose .p-button-icon,
.commentUploadBtn .p-fileupload-choose-button svg,
.commentUploadBtn .p-fileupload-choose svg,
.commentUploadBtn .pi {
  color: #d6b86f !important;
  fill: #d6b86f !important;
}

.commentToolBar .p-button-danger:hover,
.commentToolBar .p-button-help:hover,
.commentUploadBtn .p-fileupload-choose-button:hover,
.commentUploadBtn .p-fileupload-choose:hover {
  background: rgba(185, 148, 77, 0.1) !important;
  border-color: #d6b86f !important;
  color: #f4f0e8 !important;
}

.commentToolBar .p-button-danger:hover .p-button-icon,
.commentToolBar .p-button-help:hover .p-button-icon,
.commentUploadBtn .p-fileupload-choose-button:hover .p-button-icon,
.commentUploadBtn .p-fileupload-choose:hover .p-button-icon,
.commentUploadBtn .p-fileupload-choose-button:hover svg,
.commentUploadBtn .p-fileupload-choose:hover svg,
.commentUploadBtn:hover .pi {
  color: #f4f0e8 !important;
  fill: #f4f0e8 !important;
}

/* ================================================================
   19. MODALES, DIÁLOGOS, FORMULARIOS Y CONTROLES PRIMENG
   ================================================================ */
p-dialog {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.modal-content, 
.p-dialog {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.32) !important;
  border-radius: 8px !important;
  color: #f4f0e8 !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.85) !important;
}

.modal-header, 
.p-dialog-header {
  border-bottom: 1px solid rgba(185, 148, 77, 0.18) !important;
  background: linear-gradient(135deg, #0d0d0d, #070707) !important;
  color: #f4f0e8 !important;
}

.modal-footer, 
.p-dialog-footer {
  border-top: 1px solid rgba(185, 148, 77, 0.18) !important;
  background: #0a0a0a !important;
}

.form-control, 
.form-select {
  background-color: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.28) !important;
  color: #f4f0e8 !important;
  border-radius: 6px !important;
}

.form-control:focus, 
.form-select:focus {
  border-color: #b9944d !important;
  box-shadow: 0 0 0 0.2rem rgba(185, 148, 77, 0.15) !important;
}

.form-control::placeholder {
  color: #706c65 !important;
}

/* p-password */
.p-password input {
  background-color: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.28) !important;
  color: #f4f0e8 !important;
  border-radius: 6px !important;
}

.p-password .p-password-toggle-mask-icon {
  color: #b9944d !important;
}

/* p-inputswitch & p-toggleswitch */
.p-inputswitch .p-inputswitch-slider,
.p-toggleswitch .p-toggleswitch-slider {
  background-color: #1a1a1a !important;
  border: 1px solid rgba(185, 148, 77, 0.25) !important;
}

.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
  background-color: #b9944d !important;
}

/* p-multiselect */
.p-multiselect {
  background-color: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.28) !important;
  color: #f4f0e8 !important;
  border-radius: 6px !important;
  height: auto !important;
  min-height: 2.75rem !important;
}

.p-multiselect-label-container {
  overflow: visible !important;
  height: auto !important;
  flex: 1 1 auto;
}

.p-multiselect-label {
  white-space: normal !important;
}

.p-multiselect.p-multiselect-display-chip .p-multiselect-label,
.p-multiselect-display-chip .p-multiselect-label,
.p-multiselect .p-multiselect-label:has(.p-chip),
.p-multiselect .p-multiselect-label:has(.p-multiselect-chip-item),
.p-multiselect .p-multiselect-label:has(.p-multiselect-token) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  height: auto !important;
  min-height: auto !important;
  white-space: normal !important;
  overflow: visible !important;
  padding: 0.35rem 0.5rem !important;
}

.p-multiselect-chip-item {
  display: inline-flex !important;
}

.p-multiselect-token,
.p-multiselect-chip,
.p-multiselect .p-chip {
  background-color: rgba(185, 148, 77, 0.2) !important;
  color: #f4f0e8 !important;
  border: 1px solid rgba(185, 148, 77, 0.4) !important;
  border-radius: 4px !important;
  max-width: 100% !important;
}

.p-multiselect .p-chip .p-chip-label {
  white-space: normal !important;
  word-break: break-word !important;
}

.p-multiselect .p-chip .p-chip-icon,
.p-multiselect .p-chip .p-chip-remove-icon,
.p-multiselect-chip-icon,
.p-multiselect-chip-item svg {
  color: #b9944d !important;
}

.p-multiselect-panel,
.p-multiselect-overlay {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.3) !important;
  color: #d9d5ce !important;
}

.p-multiselect-header {
  background-color: #0d0d0d !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.2) !important;
  color: #d6b86f !important;
}

.p-multiselect-item {
  color: #d9d5ce !important;
}

.p-multiselect-item:hover {
  background-color: rgba(185, 148, 77, 0.15) !important;
  color: #f4f0e8 !important;
}

.p-multiselect-item.p-highlight {
  background-color: rgba(185, 148, 77, 0.25) !important;
  color: #d6b86f !important;
}

/* p-inputnumber */
.p-inputnumber input {
  background-color: #101010 !important;
  border: 1px solid rgba(185, 148, 77, 0.28) !important;
  color: #f4f0e8 !important;
}

.p-inputnumber-button {
  background-color: #1a1a1a !important;
  border-color: rgba(185, 148, 77, 0.28) !important;
  color: #b9944d !important;
}

.p-inputnumber-button:hover {
  background-color: #242424 !important;
  color: #d6b86f !important;
}

/* ================================================================
   19.1 COMPONENTE DE SUBIDA DE ARCHIVOS (P-FILEUPLOAD) - DARK LUXURY GOLD
   ================================================================ */
p-fileupload:not(.p-fileupload-basic):not(.topProfileUpload):not(.profileAvatarUpload),
.p-fileupload-advanced {
  display: block;
  width: 100%;
}

.p-fileupload-advanced {
  background-color: #0a0a0a !important;
  background: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.28) !important;
  border-radius: 10px !important;
  color: #d9d5ce !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.p-fileupload-header,
.p-fileupload-buttonbar {
  background: linear-gradient(135deg, #0f0f0f, #080808) !important;
  background-color: #0d0d0d !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.22) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 0.75rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

/* Botón Elegir / Archivos a cargar */
.p-fileupload-choose-button,
.p-fileupload-choose,
.p-fileupload-header .p-fileupload-choose-button,
p-button.p-fileupload-choose-button .p-button {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  border: 1px solid #b9944d !important;
  color: #080705 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0.55rem 1rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
}

.p-fileupload-choose-button:hover,
.p-fileupload-choose:hover,
.p-fileupload-header .p-fileupload-choose-button:hover,
p-button.p-fileupload-choose-button .p-button:hover {
  background: linear-gradient(115deg, #e2c57e, #bd954d) !important;
  border-color: #d6b86f !important;
  color: #080705 !important;
  transform: translateY(-1px);
}

.p-fileupload-choose-button .p-button-icon,
.p-fileupload-choose .p-button-icon,
.p-fileupload-choose-button svg,
.p-fileupload-choose svg,
.p-fileupload-choose-button .p-button-label,
.p-fileupload-choose .p-button-label {
  color: #080705 !important;
  fill: #080705 !important;
}

/* Botón Cargar / Upload */
.p-fileupload-upload-button,
.p-fileupload-header .p-fileupload-upload-button,
p-button.p-fileupload-upload-button .p-button {
  background: rgba(185, 148, 77, 0.2) !important;
  border: 1px solid #b9944d !important;
  color: #f4f0e8 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0.55rem 1rem !important;
  transition: all 0.2s ease !important;
}

.p-fileupload-upload-button:not(:disabled):not(.p-disabled):hover,
.p-fileupload-header .p-fileupload-upload-button:not(:disabled):not(.p-disabled):hover,
p-button.p-fileupload-upload-button .p-button:not(:disabled):not(.p-disabled):hover {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  border-color: #d6b86f !important;
  color: #080705 !important;
  transform: translateY(-1px);
}

.p-fileupload-upload-button:not(:disabled):not(.p-disabled):hover .p-button-icon,
.p-fileupload-upload-button:not(:disabled):not(.p-disabled):hover svg,
.p-fileupload-upload-button:not(:disabled):not(.p-disabled):hover .p-button-label {
  color: #080705 !important;
  fill: #080705 !important;
}

.p-fileupload-upload-button:disabled,
.p-fileupload-upload-button.p-disabled,
.p-fileupload-header .p-fileupload-upload-button:disabled,
.p-fileupload-header .p-fileupload-upload-button.p-disabled,
p-button.p-fileupload-upload-button .p-button:disabled,
p-button.p-fileupload-upload-button .p-button.p-disabled {
  background: #141414 !important;
  border: 1px solid rgba(185, 148, 77, 0.18) !important;
  color: #8c8880 !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

.p-fileupload-upload-button:disabled .p-button-icon,
.p-fileupload-upload-button.p-disabled .p-button-icon,
.p-fileupload-upload-button:disabled svg,
.p-fileupload-upload-button.p-disabled svg,
.p-fileupload-upload-button:disabled .p-button-label,
.p-fileupload-upload-button.p-disabled .p-button-label {
  color: #8c8880 !important;
  fill: #8c8880 !important;
}

/* Botón Cancelar */
.p-fileupload-cancel-button,
.p-fileupload-header .p-fileupload-cancel-button,
p-button.p-fileupload-cancel-button .p-button {
  background: rgba(220, 38, 38, 0.12) !important;
  border: 1px solid rgba(220, 38, 38, 0.4) !important;
  color: #fca5a5 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0.55rem 1rem !important;
  transition: all 0.2s ease !important;
}

.p-fileupload-cancel-button:not(:disabled):not(.p-disabled):hover,
.p-fileupload-header .p-fileupload-cancel-button:not(:disabled):not(.p-disabled):hover,
p-button.p-fileupload-cancel-button .p-button:not(:disabled):not(.p-disabled):hover {
  background: rgba(220, 38, 38, 0.25) !important;
  border-color: #ef4444 !important;
  color: #fee2e2 !important;
  transform: translateY(-1px);
}

.p-fileupload-cancel-button:disabled,
.p-fileupload-cancel-button.p-disabled,
.p-fileupload-header .p-fileupload-cancel-button:disabled,
.p-fileupload-header .p-fileupload-cancel-button.p-disabled,
p-button.p-fileupload-cancel-button .p-button:disabled,
p-button.p-fileupload-cancel-button .p-button.p-disabled {
  background: #141414 !important;
  border: 1px solid rgba(185, 148, 77, 0.18) !important;
  color: #8c8880 !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

.p-fileupload-cancel-button:disabled .p-button-icon,
.p-fileupload-cancel-button.p-disabled .p-button-icon,
.p-fileupload-cancel-button:disabled svg,
.p-fileupload-cancel-button.p-disabled svg,
.p-fileupload-cancel-button:disabled .p-button-label,
.p-fileupload-cancel-button.p-disabled .p-button-label {
  color: #8c8880 !important;
  fill: #8c8880 !important;
}

/* Área de Contenido de Archivos */
.p-fileupload-content {
  background-color: #0a0a0a !important;
  background: #0a0a0a !important;
  border: none !important;
  color: #d9d5ce !important;
  padding: 1rem !important;
  min-height: 120px !important;
}

.p-fileupload-highlight {
  border: 2px dashed #b9944d !important;
  background-color: rgba(185, 148, 77, 0.08) !important;
  border-radius: 8px !important;
}

/* Lista de Archivos */
.p-fileupload-file-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.p-fileupload-file {
  background-color: #0d0d0d !important;
  border: 1px solid rgba(185, 148, 77, 0.18) !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.18) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  color: #f4f0e8 !important;
  margin-bottom: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
}

.p-fileupload-file > div[style*="background-color"] {
  background-color: #141414 !important;
}

.p-fileupload-file-name {
  color: #f4f0e8 !important;
  font-weight: 500 !important;
}

.p-fileupload-file-size {
  color: #9a9690 !important;
  font-size: 0.85rem !important;
}

.p-fileupload-file-remove-button,
.p-fileupload-file-remove-button.p-button {
  color: #ef4444 !important;
  border-radius: 50% !important;
}

.p-fileupload-file-remove-button:hover,
.p-fileupload-file-remove-button.p-button:hover {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #f87171 !important;
}

.p-fileupload-empty {
  color: #9a9690 !important;
  font-style: italic;
}

/* Barra de progreso de subida */
.p-fileupload .p-progressbar {
  background: #141414 !important;
  border: 1px solid rgba(185, 148, 77, 0.25) !important;
  height: 0.4rem !important;
  border-radius: 4px !important;
}

.p-fileupload .p-progressbar-value {
  background: linear-gradient(90deg, #b9944d, #d6b86f) !important;
}

/* ================================================================
   20. FOOTER DEL SISTEMA
   ================================================================ */
cmp-systeminfo.systeminfo-footer {
  display: block;
  background-color: #000000 !important;
  color: #69655f !important;
  font-size: 0.72rem !important;
  padding: 0.5rem 1rem !important;
  border-top: 1px solid rgba(185, 148, 77, 0.1) !important;
}

cmp-systeminfo.systeminfo-footer .domain-info-a {
  color: #9a9690 !important;
}

cmp-systeminfo.systeminfo-footer .domain-info-a:hover {
  color: #d6b86f !important;
  text-decoration: underline !important;
}

/* ================================================================
   21. SCROLLBARS PERSONALIZADAS
   ================================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #030303;
}

::-webkit-scrollbar-thumb {
  background: rgba(185, 148, 77, 0.35);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(185, 148, 77, 0.6);
}

/* ================================================================
   22. ANIMACIONES (LOADER & FONT)
   ================================================================ */
.qloader {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}

.qloader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #b9944d;
  border-right-color: #d6b86f;
  animation: q-spin 1s linear infinite;
  z-index: 1;
}

.qloader::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: rgba(185, 148, 77, 0.35);
  animation: q-spin 2s linear infinite reverse;
}

.qloader img {
  width: 60%;
  height: auto;
  z-index: 0;
  animation: q-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes q-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes q-pulse {
  0% { transform: scale(0.95); opacity: 0.85; }
  100% { transform: scale(1.05); opacity: 1; }
}

.qw {
  font-family: "QuetzalWeb";
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}

.qw-fontbig {
  font-size: 22px;
}

.qw-docalizame::before {
  content: "\\f0000";
}

/* ================================================================
   23. EDITOR DE TEXTO ENRIQUECIDO (CKEDITOR) - DARK LUXURY GOLD
   ================================================================ */
.cke_chrome {
  background: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
}

.cke_inner {
  background: #0a0a0a !important;
}

.cke_top {
  background: linear-gradient(135deg, #0e0e0e, #060606) !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.22) !important;
  padding: 6px 8px !important;
}

.cke_bottom {
  background: #060606 !important;
  border-top: 1px solid rgba(185, 148, 77, 0.18) !important;
  padding: 4px 8px !important;
}

.cke_toolgroup {
  background: #141414 !important;
  border: 1px solid rgba(185, 148, 77, 0.25) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin-bottom: 4px !important;
  background-image: none !important;
}

.cke_combo_button {
  background: #141414 !important;
  border: 1px solid rgba(185, 148, 77, 0.25) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin-bottom: 4px !important;
  background-image: none !important;
}

.cke_button {
  background: transparent !important;
  border-radius: 3px !important;
}

.cke_button:hover,
.cke_button_on,
.cke_button_off:hover {
  background: rgba(185, 148, 77, 0.2) !important;
  box-shadow: none !important;
}

.cke_button_icon {
  filter: invert(0.85) brightness(1.2);
}

.cke_button_label {
  color: #d9d5ce !important;
  text-shadow: none !important;
}

.cke_combo_button:hover {
  background: rgba(185, 148, 77, 0.2) !important;
  border-color: #b9944d !important;
}

.cke_combo_text {
  color: #d9d5ce !important;
  text-shadow: none !important;
}

.cke_combo_open {
  border-left: 1px solid rgba(185, 148, 77, 0.2) !important;
}

.cke_combo_arrow {
  border-top-color: #b9944d !important;
}

.cke_toolbar_separator {
  background-color: rgba(185, 148, 77, 0.25) !important;
  box-shadow: none !important;
  margin: 5px 4px 0 4px !important;
}

/* Área de contenido / Editable */
.cke_contents {
  background-color: #101010 !important;
  background: #101010 !important;
}

.cke_editable,
.cke_editable_themed,
div.cke_editable,
.cke_contents_ltr,
.cke_contents iframe {
  background-color: #101010 !important;
  background: #101010 !important;
  color: #f4f0e8 !important;
  font-family: var(--global-font-family) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  padding: 12px 16px !important;
  min-height: 140px;
}

.cke_editable:focus,
div.cke_editable:focus {
  outline: none !important;
}

.cke_editable p,
.cke_editable span,
.cke_editable div,
.cke_editable h1,
.cke_editable h2,
.cke_editable h3,
.cke_editable h4,
.cke_editable h5,
.cke_editable h6,
.cke_editable li {
  color: #f4f0e8 !important;
}

.cke_editable a {
  color: #d6b86f !important;
}

.cke_path_item {
  color: #9a9690 !important;
  text-shadow: none !important;
}

.cke_path_item:hover {
  color: #d6b86f !important;
}

.cke_resizer {
  border-color: transparent rgba(185, 148, 77, 0.5) transparent transparent !important;
}

/* Dropdowns / Menús y Paneles de CKEditor */
.cke_panel,
.cke_combopanel,
.cke_menupanel {
  background: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.3) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9) !important;
}

.cke_panel_listItem a {
  color: #d9d5ce !important;
  text-shadow: none !important;
}

.cke_panel_listItem a:hover,
.cke_panel_listItem.cke_selected a {
  background: rgba(185, 148, 77, 0.2) !important;
  color: #f4f0e8 !important;
}

.cke_panel_grouptitle {
  background: #141414 !important;
  color: #d6b86f !important;
  text-shadow: none !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.2) !important;
}

/* Diálogos de CKEditor */
.cke_dialog {
  background: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.35) !important;
  border-radius: 12px !important;
  color: #d9d5ce !important;
}

.cke_dialog_title {
  background: linear-gradient(135deg, #0d0d0d, #070707) !important;
  color: #f4f0e8 !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.2) !important;
}

.cke_dialog_body {
  background: #0a0a0a !important;
  color: #d9d5ce !important;
}

.cke_dialog_footer {
  background: #070707 !important;
  border-top: 1px solid rgba(185, 148, 77, 0.2) !important;
}

.cke_dialog_ui_button {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  border: 1px solid #b9944d !important;
  color: #080705 !important;
  font-weight: 600 !important;
}

/* ================================================================
   24. BOTONES SUCCESS (DARK LUXURY GOLD)
   ================================================================ */
.p-button.p-button-success,
.p-button-success {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  border: 1px solid #b9944d !important;
  color: #080705 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.p-button.p-button-success:hover,
.p-button-success:hover {
  background: linear-gradient(115deg, #e2c57e, #bd954d) !important;
  border-color: #d6b86f !important;
  color: #080705 !important;
}

.p-button.p-button-success .p-button-icon,
.p-button.p-button-success .p-button-label,
.p-button-success .p-button-icon,
.p-button-success .p-button-label {
  color: #080705 !important;
}

/* ================================================================
   25. FORO / SOCIALNET FORUM (DARK LUXURY GOLD)
   ================================================================ */
.forumPanel {
  background-color: #0a0a0a !important;
  border: 1px solid rgba(185, 148, 77, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

.forumPanelTitle {
  color: #d6b86f !important;
  font-family: var(--global-font-family) !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

a:hover .forumPanelTitle,
.forumPanelTitle:hover {
  color: #f4f0e8 !important;
}

.forumPanelTopicInfo {
  color: #d9d5ce !important;
}

.forumPanelTopicCreator span {
  color: #f4f0e8 !important;
  font-weight: 600 !important;
}

.forumPanelFontData {
  color: #9a9690 !important;
}

.text-primary {
  color: #d6b86f !important;
}

/* ================================================================
   26. NOTIFICACIONES / CENTRO DE ALERTAS (DARK LUXURY GOLD)
   ================================================================ */
.minimize,
.minimize svg,
.minimize svg path,
.minimize .b2p-notification-svg {
  fill: #b9944d !important;
  color: #b9944d !important;
}

.vg-base-notification,
.vg-base-notification .vgbn-body,
.vg-base-notification .vgbn-title,
.vg-base-notification .vgbn-content,
.vg-base-notification a,
.vg-base-notification a.notification,
.vg-base-notification.info,
.vg-base-notification.info a,
.vg-base-notification.info a.notification {
  color: #f4f0e8 !important;
}

.vg-base-notification a.notification.routerlink span,
.vg-base-notification a.routerlink span {
  background-color: var(--notification-info-profile-background, #b9944d) !important;
  color: #080705 !important;
  border: 1px solid var(--notification-info-profile-border, #d6b86f) !important;
  font-weight: 600 !important;
}

.vg-base-notification.info {
  background: var(--notification-info-background, #101010) !important;
  border: 1px solid rgba(185, 148, 77, 0.35) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.75) !important;
}

.vg-base-notification {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.75) !important;
}

.notification-center_button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

.notification-center_button .ui-button--info.ui-button--solid,
.ui-button--info.ui-button--solid {
  background: #b9944d !important;
  border-color: #b9944d !important;
}

.notification-center_button .ui-button--info.ui-button--lined,
.ui-button--info.ui-button--lined {
  color: #b9944d !important;
  border-color: #b9944d !important;
}

/* ================================================================
   27. COMPONENTE DE MENCIONES (NGX-MENTIONS / AUTOCOMPLETE) (DARK LUXURY GOLD)
   ================================================================ */
.menu-template-container {
  z-index: 1050 !important;
}

.ngx-selectable-list {
  background-color: #0d0d0d !important;
  border: 1px solid rgba(185, 148, 77, 0.35) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85) !important;
  max-height: 250px !important;
  overflow-y: auto !important;
  padding: 4px 0 !important;
  margin: 4px 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(185, 148, 77, 0.4) #0d0d0d !important;
}

.ngx-selectable-list::-webkit-scrollbar {
  width: 6px !important;
}

.ngx-selectable-list::-webkit-scrollbar-track {
  background: #0d0d0d !important;
}

.ngx-selectable-list::-webkit-scrollbar-thumb {
  background: rgba(185, 148, 77, 0.4) !important;
  border-radius: 4px !important;
}

.ngx-selectable-list::-webkit-scrollbar-thumb:hover {
  background: #b9944d !important;
}

.ngx-selectable-list .ngx-selectable-list-item {
  background-color: #0d0d0d !important;
  color: #d9d5ce !important;
  padding: 8px 16px !important;
  min-height: 34px !important;
  font-family: var(--global-font-family) !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
  border-bottom: 1px solid rgba(185, 148, 77, 0.08) !important;
}

.ngx-selectable-list .ngx-selectable-list-item:last-child {
  border-bottom: none !important;
}

.ngx-selectable-list .ngx-selectable-list-item:hover {
  background-color: rgba(185, 148, 77, 0.15) !important;
  color: #f4f0e8 !important;
}

.ngx-selectable-list .ngx-selectable-list-item.active {
  background: linear-gradient(115deg, #d7b66c, #a8813c) !important;
  color: #080705 !important;
  font-weight: 600 !important;
}

.ngx-selectable-list .ngx-selectable-list-item .additional-info {
  color: #9a9690 !important;
  font-size: 0.78rem !important;
}

.ngx-selectable-list .ngx-selectable-list-item:hover .additional-info {
  color: #d6b86f !important;
}

.ngx-selectable-list .ngx-selectable-list-item.active .additional-info,
.ngx-selectable-list .ngx-selectable-list-item:has(.additional-info).active .additional-info {
  color: #2a251a !important;
}

/* Tag de mención dentro del textarea / editor de texto */
.ngx-text-highlight-tag,
.relative-block-container .ngx-text-highlight-tag {
  background-color: rgba(185, 148, 77, 0.35) !important;
  color: #d6b86f !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

.ngx-text-highlight-tag.ngx-text-highlight-tag-hovered {
  background-color: rgba(185, 148, 77, 0.6) !important;
  color: #f4f0e8 !important;
  opacity: 1 !important;
}

/* Menciones de usuarios en comentarios publicados */
a.routerlink span,
.commentTextDiv a.routerlink span {
  background-color: var(--toolbar-comment-hover-color, #d6b86f) !important;
  color: #080705 !important;
  border: 1px solid var(--toolbar-comment-color, #b9944d) !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
  transition: all 0.2s ease !important;
}

a.routerlink:hover span,
.commentTextDiv a.routerlink:hover span {
  background-color: #b9944d !important;
  color: #080705 !important;
  border-color: #d6b86f !important;
}