/* ===== Night Shadz Theme (FPQRS) ===== */

/* Paleta */
:root {
  --brand-50:  #FDF2F7;
  --brand-100: #FBE8F2;
  --brand-200: #F9D1E5;
  --brand-300: #F5ACCF;
  --brand-400: #EE78AE;
  --brand-500: #E54F8E;
  --brand-600: #D32F6C; /* primary base */
  --brand-700: #AF1E50;
  --brand-800: #971D45;
  --brand-900: #7E1D3D;
  --brand-950: #4D0A20;
  --brand-white: #FFFFFF;

  /* Bootstrap overrides */
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 211, 47, 108; /* D32F6C */
  --bs-primary-bg-subtle: var(--brand-100);
  --bs-primary-border-subtle: var(--brand-300);

  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--brand-700);

  --bs-body-bg: var(--brand-white);
  --bs-body-color: #2b2b2b;

  --bs-border-color: #e9e9ef;
  --bs-focus-ring-color: rgba(211, 47, 108, 0.25);
}

.bg-auth {
  min-height: 100vh;
  background:
linear-gradient(180deg, var(--brand-white) 10%, var(--brand-white) 20%, var(--brand-100) 100%);
}


/* ===== Tarjetas y bordes sutiles con la paleta ===== */
.card-surface {
  border: 1px solid var(--brand-200);
  border-radius: 14px;
}
.card-surface .card-header {
  background-color: var(--brand-50);
  border-bottom: 1px solid var(--brand-200);
}

/* ===== Botones primarios en todos los estados ===== */
.btn-primary {
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-800);
  --bs-btn-active-border-color: var(--brand-800);
  --bs-btn-disabled-bg: var(--brand-300);
  --bs-btn-disabled-border-color: var(--brand-300);
  --bs-btn-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-700);
  --bs-btn-border-color: var(--brand-300);
  --bs-btn-hover-bg: var(--brand-100);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-200);
  --bs-btn-active-border-color: var(--brand-700);
}

/* ===== Badges con escala ===== */
.badge.bg-brand-100 { background-color: var(--brand-100) !important; color: var(--brand-700) !important; }
.badge.bg-brand-200 { background-color: var(--brand-200) !important; color: var(--brand-700) !important; }
.badge.bg-brand-600 { background-color: var(--brand-600) !important; color: #fff !important; }
.badge.bg-brand-800 { background-color: var(--brand-800) !important; color: #fff !important; }

/* Utilidades de texto */
.text-brand { color: var(--brand-600) !important; }
.text-brand-800 { color: var(--brand-800) !important; }

/* ===== Inputs y focus ===== */
.form-control:focus, .form-select:focus {
  border-color: var(--brand-300);
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
.input-group-text {
  color: var(--brand-800);
}

/* Enlaces de acción */
.link-primary {
  color: var(--brand-600);
  text-decoration: none;
}
.link-primary:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

/* Separador social */
.login-separater span {
  background: var(--brand-white);
  padding: 0 .75rem;
  color: var(--brand-800);
  font-weight: 500;
}
.login-separater hr {
  margin-top: -0.8rem;
  border-top: 1px dashed var(--brand-200);
  opacity: 1;
}

/* Icon buttons sociales ya existen en la plantilla:
   si quieres un hover más acorde a la paleta, aplica esto: */
.contacts-social .list-inline-item:hover {
  filter: brightness(1.05) saturate(1.05);
}

/* ===== Helpers opcionales por si los quieres reutilizar en otras pantallas ===== */
.bg-brand-50  { background-color: var(--brand-50) !important; }
.bg-brand-100 { background-color: var(--brand-100) !important; }
.bg-brand-200 { background-color: var(--brand-200) !important; }
.bg-brand-300 { background-color: var(--brand-300) !important; }
.bg-brand-400 { background-color: var(--brand-400) !important; }
.bg-brand-500 { background-color: var(--brand-500) !important; }
.bg-brand-600 { background-color: var(--brand-600) !important; }
.bg-brand-700 { background-color: var(--brand-700) !important; }
.bg-brand-800 { background-color: var(--brand-800) !important; }
.bg-brand-900 { background-color: var(--brand-900) !important; }
.bg-brand-950 { background-color: var(--brand-950) !important; }

.text-on-brand { color: #fff !important; }

/* Sombras suaves en elementos clave */
.shadow-sm { box-shadow: 0 .25rem .75rem rgba(77,10,32,.06) !important; }

/* ===== Botón principal ===== */
.btn-primary {
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  color: #fff !important;
  font-weight: 500;
  border-radius: 8px;
  padding: 0.65rem 1rem;
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(211, 47, 108, 0.2);
}

.btn-primary:hover {
  background-color: var(--brand-700) !important;
  border-color: var(--brand-700) !important;
  box-shadow: 0 6px 14px rgba(175, 30, 80, 0.25);
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: var(--brand-800) !important;
  border-color: var(--brand-800) !important;
  box-shadow: 0 3px 6px rgba(151, 29, 69, 0.3);
  transform: translateY(0);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(211, 47, 108, 0.3);
}

.btn:focus,
.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(211, 47, 108, 0.25) !important;
  border-color: var(--brand-300) !important;
}

/* ===== HEADER ===== */

/* Fondo y sombra principal */
.topbar {
  background: linear-gradient(
    90deg,
    var(--brand-800) 0%,
    var(--brand-700) 45%,
    var(--brand-700) 55%,
    var(--brand-800) 100%
  );
  border-bottom: none !important;
  
}

/* Logo y texto principal */
.topbar .logo-text {
  color: #fff !important;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Íconos y enlaces del header */
.nav-link-brand {
  color: rgba(255,255,255,0.9) !important;
  transition: all 0.2s ease-in-out;
}
.nav-link-brand:hover {
  color: #fff !important;
  background-color: rgba(255,255,255,0.12) !important;
}
.nav-link-brand:active {
  background-color: rgba(255,255,255,0.2) !important;
}

/* Contador de notificaciones */
.alert-count,
.alert-pill {
  background-color: #fff !important;
  color: var(--brand-700) !important;
  box-shadow: 0 0 0 2px var(--brand-700);
  font-weight: 600;
}

/* Dropdowns */
.dropdown-menu.dropdown-surface {
  background-color: #fff !important;
  border: 1px solid var(--brand-200);
  box-shadow: 0 8px 24px rgba(151, 29, 69, 0.2);
}
.dropdown-item.notify-item:hover {
  background-color: var(--brand-50) !important;
}

/* Nombre y rol del usuario */
.user-box .user-name {
  color: #fff !important;
  font-weight: 600;
}
.user-box .designattion {
  color: rgba(255,255,255,0.8) !important;
}

/* Boton del bloque usuario sin estilo nativo de button */
.btn-unstyled {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  appearance: none;
}

.btn-unstyled:hover,
.btn-unstyled:focus,
.btn-unstyled:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.topbar .user-box .btn-unstyled {
  width: auto;
  height: auto;
  min-height: 42px;
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
}

.topbar .user-box .btn-unstyled:hover,
.topbar .user-box .btn-unstyled:focus {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.topbar .user-box .btn-unstyled.show {
  background-color: rgba(255, 255, 255, 0.18) !important;
}

.topbar .user-box .user-info {
  background: transparent !important;
  border: 0 !important;
  line-height: 1.2;
}

/* Botón hamburguesa (mobile) */
.mobile-toggle-menu {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background-color: transparent !important;
  transition: all 0.2s ease;
}
.mobile-toggle-menu:hover {
  background-color: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* Ajuste del borde inferior si lo usas */
.border-bottom-brand {
  border-bottom: 2px solid var(--brand-700) !important;
}

/* ===== PRIMARY MENU  ===== */

.primary-menu .navbar {
  background: linear-gradient(
    90deg,
    var(--brand-800) 0%,
    var(--brand-700) 45%,
    var(--brand-700) 55%,
    var(--brand-800) 100%
  ) !important;
  color: #fff;
}

/* Asegura que la navbar NO tape el fondo */
.primary-menu .navbar .offcanvas{
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;


  --bs-navbar-color: rgba(255,255,255,0.92);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
}


.primary-menu .nav-link {
  color: rgba(255,255,255,0.92) !important;
  transition: background-color .2s ease, color .2s ease;
}
.primary-menu .nav-link:hover,
.primary-menu .nav-link:focus {
  color: #fff !important;
  background-color: rgba(255,255,255,0.12) !important;
}
.primary-menu .nav-link:active {
  background-color: rgba(255,255,255,0.18) !important;
}

.primary-menu .parent-icon i,
.primary-menu .dropy-icon i {
  color: inherit !important;
  opacity: .95;
}
.primary-menu .menu-title { color: inherit !important; }


.primary-menu .nav-link.active,
.primary-menu .nav-link[aria-expanded="true"] {
  color: #fff !important;
  background-color: rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.35);
}

/* Dropdowns claros*/
.primary-menu .dropdown-menu {
  background-color: #fff !important;
  border: 1px solid var(--brand-200) !important;
  box-shadow: 0 12px 28px rgba(151, 29, 69, 0.22);
}
.primary-menu .dropdown-item {
  color: var(--brand-800) !important;
  transition: background-color .15s ease, color .15s ease;
}
.primary-menu .dropdown-item i { color: var(--brand-700) !important; }
.primary-menu .dropdown-item:hover,
.primary-menu .dropdown-item:focus {
  background-color: var(--brand-50) !important;
  color: var(--brand-800) !important;
}
.primary-menu .dropdown-item.active,
.primary-menu .dropdown-item:active {
  background-color: var(--brand-100) !important;
  color: var(--brand-800) !important;
}

/* Submenús (dropend/scroll) */
.primary-menu .dropdown-menu.submenu,
.primary-menu .dropdown-menu.scroll-menu {
  background-color: #fff !important;
  border-color: var(--brand-200) !important;
  box-shadow: 0 10px 24px rgba(151, 29, 69, 0.18);
}


.primary-menu .offcanvas {
  background: linear-gradient(180deg, var(--brand-800) 0%, var(--brand-700) 100%) !important;
  color: #fff;
}
.primary-menu .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,0.15) !important; }
.primary-menu .offcanvas .logo-text { color: #fff !important; }
.primary-menu .offcanvas .btn-close { filter: invert(1) opacity(.8); }
.primary-menu .offcanvas .nav-link { color: rgba(255,255,255,0.92) !important; }
.primary-menu .offcanvas .nav-link:hover {
  background-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}


.card-left-scroll {
    max-height: calc(100vh - 170px); 
}

.card-left-scroll .card-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;          
}

.card-left-scroll .tab-content {
    flex: 1 1 auto;
    overflow-y: auto;         
    padding-right: 4px;        
}


.card-right-scroll {
    max-height: calc(100vh - 170px);
}

.card-right-scroll .card-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card-right-scroll .scroll-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 4px;
}

.rich-editor {
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.rich-editor-toolbar {
    border-bottom: 1px solid #dee2e6;
    padding: .25rem .5rem;
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
}

.rich-editor-toolbar button {
    border: none;
    background: transparent;
    padding: .25rem .5rem;
    font-size: .9rem;
    cursor: pointer;
}

.rich-editor-toolbar button:hover {
    background-color: #f1f3f5;
    border-radius: .25rem;
}

.rich-editor-area {
    padding: .5rem .75rem;
    min-height: 80px;
}