:root {
    --main-color: #374151;
    --secondary-color: #f4f5f7;
    --primary-color: #374151;
    --primary-hover: #4b5563;
    --primary-active: #1f2937;
    --primary-light: #f1f2f4;
    --second-color: #5f6368;
    --bs-primary: #374151;
    --bs-primary-rgb: 55, 65, 81;
    --bs-link-color: #374151;
    --bs-link-hover-color: #1f2937;
    --bs-link-color-rgb: 55, 65, 81;
    --bg-body: #f5f6f8;
    --bg-white: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --text-dark: #262626;
    --text-heading: #0a0a0a;
    --text-muted: #6f7378;
    --border-color: #e5e7eb;
}

body.page,
body {
    background: var(--bg-body) !important;
    color: var(--text-dark);
}

a,
.text-primary {
    color: var(--primary-color) !important;
}

.header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

.header .toggle-sidebar-btn,
.header-nav .nav-icon,
.header-nav .nav-profile {
    color: var(--primary-color) !important;
}

.jjh-header-logo {
    width: 90%;
    max-height: 52px;
    object-fit: contain;
    object-position: left center;
    transform: scale(1.18);
    transform-origin: left center;
}

.sidebar {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-color);
    box-shadow: 10px 0 28px rgba(15, 23, 42, 0.04) !important;
}

.sidebar-nav .nav-heading {
    color: #8a8f98 !important;
    letter-spacing: 0.05rem;
}

.sidebar-nav .nav-link,
.sidebar-nav .nav-content a {
    color: #374151 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.sidebar-nav .nav-link span,
.sidebar-nav .nav-link.collapsed span,
.sidebar-nav .nav-content a span {
    color: #111111 !important;
}

.sidebar-nav .nav-link i,
.sidebar-nav .nav-link.collapsed i,
.sidebar-nav .nav-link .bi-chevron-down,
.sidebar-nav .nav-content a i,
.sidebar-nav .nav-content a .bi {
    color: #374151 !important;
}

#sidebar.sidebar .sidebar-nav .nav-link:hover,
#sidebar.sidebar .sidebar-nav .nav-content a:hover {
    color: #ffffff !important;
    background: #374151 !important;
    border-color: #374151 !important;
    box-shadow: 0 10px 20px rgba(55, 65, 81, 0.2) !important;
}

.sidebar-nav .nav-link:hover span,
.sidebar-nav .nav-content a:hover span {
    color: #ffffff !important;
}

.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-content a:hover i,
.sidebar-nav .nav-link:hover .bi-chevron-down,
.sidebar-nav .nav-content a:hover .bi {
    color: #ffffff !important;
}

.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link.collapsed.active,
.sidebar-nav .nav-content a.active {
    color: #ffffff !important;
    background: #374151 !important;
    border-color: #374151 !important;
    box-shadow: 0 10px 20px rgba(55, 65, 81, 0.2);
}

.sidebar-nav .nav-link.active i,
.sidebar-nav .nav-link.collapsed.active i,
.sidebar-nav .nav-content a.active i,
.sidebar-nav .nav-link.active .bi-chevron-down,
.sidebar-nav .nav-link.active span,
.sidebar-nav .nav-link.collapsed.active span,
.sidebar-nav .nav-content a.active span {
    color: #ffffff !important;
}

/* El CSS base aplica fucsia a algunos enlaces simples del sidebar. */
#sidebar.sidebar .sidebar-nav .nav-link,
#sidebar.sidebar .sidebar-nav .nav-link.collapsed,
#sidebar.sidebar .sidebar-nav .nav-content a,
#sidebar.sidebar .sidebar-nav .nav-link span,
#sidebar.sidebar .sidebar-nav .nav-link i,
#sidebar.sidebar .sidebar-nav .nav-link .bi,
#sidebar.sidebar .sidebar-nav .nav-link .bi-chevron-down,
#sidebar.sidebar .sidebar-nav .nav-content a span,
#sidebar.sidebar .sidebar-nav .nav-content a i {
    color: #374151 !important;
}

#sidebar.sidebar .sidebar-nav .nav-link.active,
#sidebar.sidebar .sidebar-nav .nav-link.collapsed.active,
#sidebar.sidebar .sidebar-nav .nav-content a.active {
    color: #ffffff !important;
    background: #374151 !important;
    border-color: #374151 !important;
}

#sidebar.sidebar .sidebar-nav .nav-link:hover span,
#sidebar.sidebar .sidebar-nav .nav-link:hover i,
#sidebar.sidebar .sidebar-nav .nav-link:hover .bi,
#sidebar.sidebar .sidebar-nav .nav-link:hover .bi-chevron-down,
#sidebar.sidebar .sidebar-nav .nav-content a:hover span,
#sidebar.sidebar .sidebar-nav .nav-content a:hover i,
#sidebar.sidebar .sidebar-nav .nav-link.active span,
#sidebar.sidebar .sidebar-nav .nav-link.active i,
#sidebar.sidebar .sidebar-nav .nav-link.active .bi,
#sidebar.sidebar .sidebar-nav .nav-link.active .bi-chevron-down,
#sidebar.sidebar .sidebar-nav .nav-content a.active span,
#sidebar.sidebar .sidebar-nav .nav-content a.active i {
    color: #ffffff !important;
}

.card,
.card-body,
.card-header,
.card-footer,
.borde-section,
.table-container,
.dataTables_wrapper,
.modal-content {
    background-color: #ffffff !important;
    border-color: var(--border-color) !important;
    color: var(--text-dark) !important;
}

.card,
.borde-section,
.table-container {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
}

.pagetitle h1,
.card-title,
.card-title-crm,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-heading) !important;
}

.btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
    background-color: #374151 !important;
    border-color: #374151 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(55, 65, 81, 0.2);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.22) !important;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
}

.btn-outline-primary {
    color: #111111 !important;
    border-color: #111111 !important;
}

.btn-outline-primary:hover {
    background-color: #111111 !important;
    color: #ffffff !important;
}

.form-control:focus,
.form-select:focus,
.login-input:focus {
    border-color: #111111 !important;
    box-shadow: 0 0 0 0.2rem rgba(17, 17, 17, 0.12) !important;
}

.table thead th,
table.dataTable thead th {
    background-color: #f4f5f7 !important;
    color: #111111 !important;
    border-bottom-color: var(--border-color) !important;
}

.table-hover > tbody > tr:hover > *,
table.dataTable tbody tr:hover > * {
    background-color: #f7f8fa !important;
}

.pagination .page-item.active .page-link {
    background-color: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
}

main .view-tabs {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

main .view-tabs label,
main .view-tabs label span,
main .view-tabs label i {
    color: #5f6368 !important;
}

main .view-tabs label:hover,
main .view-tabs label:hover span,
main .view-tabs label:hover i {
    color: #111111 !important;
}

main .view-tabs input[type="radio"]:checked + label {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.22) !important;
}

main .view-tabs input[type="radio"]:checked + label span,
main .view-tabs input[type="radio"]:checked + label i {
    color: #ffffff !important;
}

.fc .fc-button-primary,
.fc .fc-button-primary:disabled {
    background-color: #374151 !important;
    border-color: #374151 !important;
    color: #ffffff !important;
}

.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(17, 17, 17, 0.12) !important;
}

.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
    background-color: #f1f2f4 !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    background: #374151 !important;
    color: #ffffff !important;
}

.chat-float-btn,
.send-btn {
    background: #111111 !important;
}

.chat-float-btn {
    box-shadow: 0 12px 26px rgba(17, 17, 17, 0.22) !important;
}

.login-container {
    --login-primary: #111111;
    --login-primary-light: #2b2b2b;
    --login-primary-dark: #000000;
    --login-primary-rgb: 17, 17, 17;
    --login-ink: #ffffff;
    --login-bg: #f0f1f3;
    --login-panel: #ffffff;
    --login-text: #111111;
    --login-muted: rgba(17, 17, 17, 0.56);
    --login-input-bg: #f7f8fa;
    --login-input-bg-focus: #ffffff;
    --login-input-border: #d7dbe0;
    --login-input-text: #111111;
    --login-glow: rgba(17, 17, 17, 0.05);
}

.login-overlay {
    background:
        radial-gradient(circle at 24% 34%, rgba(17, 17, 17, 0.08) 0%, rgba(17, 17, 17, 0) 44%),
        radial-gradient(circle at 82% 78%, rgba(17, 17, 17, 0.04) 0%, rgba(17, 17, 17, 0) 50%) !important;
}

.login-main-image,
.login-brand-image {
    filter: drop-shadow(0 18px 42px rgba(17, 17, 17, 0.16)) !important;
}

.login-button {
    background: linear-gradient(135deg, #4b5563 0%, #374151 48%, #1f2937 100%) !important;
    box-shadow: 0 12px 26px rgba(17, 17, 17, 0.24) !important;
}

/* La vista Home define después del layout una paleta fucsia fija para FullCalendar.
   Estos selectores más específicos mantienen el tema carbón de JJH. */
html body .fc .fc-button-primary,
html body .fc .fc-button-primary:disabled {
    background-color: #374151 !important;
    border-color: #374151 !important;
    color: #ffffff !important;
}

html body .fc .fc-button-primary:hover {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(55, 65, 81, 0.28) !important;
}

html body .fc .fc-button-primary:focus,
html body .fc .fc-button-primary:not(:disabled):active,
html body .fc .fc-button-primary:not(:disabled).fc-button-active,
html body .fc .fc-button-active {
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(55, 65, 81, 0.22) !important;
}

html body .fc .fc-more-link,
html body .fc .fc-daygrid-day-number:hover,
html body .fc .fc-col-header-cell-cushion:hover {
    color: #374151 !important;
}

html body .fc .fc-popover {
    border-color: #374151 !important;
}

html body .fc .fc-popover-header {
    background-color: #374151 !important;
    color: #ffffff !important;
}

html body .fc .fc-day-today {
    background-color: rgba(55, 65, 81, 0.08) !important;
}

html body .fc .fc-day-today .fc-daygrid-day-number {
    background-color: #374151 !important;
    color: #ffffff !important;
}

/* =============================================
   FIX #1: Título de página bajo la barra fija
   Empuja todo el contenido de @RenderBody()
   60 px hacia abajo para liberar el header fijo.
   ============================================= */
body.page > main {
    padding-top: 60px;
}

/* =============================================
   FIX #2: Iconos rojos al expandir un item
   Cuando un nav-link padre pierde la clase
   .collapsed (submenu abierto), style.css lo
   fuerza a color fucsia (#c6164f). Aquí lo
   reestablecemos al gris JJH.
   ============================================= */
#sidebar.sidebar .sidebar-nav .nav-link:not(.collapsed),
#sidebar.sidebar .sidebar-nav .nav-link:not(.collapsed):not(:hover) {
    color: #374151 !important;
    background: transparent !important;
}

#sidebar.sidebar .sidebar-nav .nav-link:not(.collapsed) i,
#sidebar.sidebar .sidebar-nav .nav-link:not(.collapsed) .bi,
#sidebar.sidebar .sidebar-nav .nav-link:not(.collapsed) span,
#sidebar.sidebar .sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    color: #374151 !important;
}

/* =============================================
   FIX #3: Ocultar el toggle claro/oscuro en JJH
   ============================================= */
li.nav-icon {
    display: none !important;
}

/* =============================================
   FIX #6: background-color fucsia en el <i> del ítem activo
   style.css aplica background-color: #c6164f al elemento <i>
   dentro de los enlaces activos del submenú. JJH solo
   sobreescribía color, no el fondo del ícono.
   ============================================= */
#sidebar.sidebar .sidebar-nav .nav-content a.active i,
#sidebar.sidebar .sidebar-nav .nav-content a.active .bi {
    background-color: transparent !important;
}

/* =============================================
   FIX #5: Iconos de redes sociales (PanelUsuario)
   La regla `a { color: var(--primary-color) !important }` pisa
   el color: white de los botones .btn-linkedin, .btn-instagram,
   etc. Se restaura el texto/ícono blanco con mayor especificidad.
   ============================================= */
.social-icons a.btn,
.social-icons a.btn i {
    color: #ffffff !important;
}

/* =============================================
   FIX #4: ID de usuario invisible en la tabla
   La regla `a { color: var(--primary-color) !important }`
   sobreescribe el color blanco del badge con gris
   oscuro (#374151), idéntico al fondo del badge.
   ============================================= */
.editable-user-id,
a.editable-user-id {
    color: #ffffff !important;
    background-color: #374151 !important;
}