/* =========================================================
   Broca Studio Theme — Horilla CSS Override
   Paleta: Slate Premium | Tipografía: DM Sans | Modo: Dark
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* Variables globales */
:root {
  /* Fondos */
  --bg-base:     #0a0f1e;
  --bg-surface:  #0f172a;
  --bg-elevated: #1e293b;
  --bg-subtle:   #0b1220;

  /* Bordes */
  --border-default: #1e293b;
  --border-strong:  #334155;

  /* Texto */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;
  --text-disabled:  #334155;

  /* Acentos */
  --accent:         #3b82f6;
  --accent-hover:   #2563eb;
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-danger:  #ef4444;
  --accent-rgb:     59, 130, 246;

  /* Badge backgrounds */
  --badge-bg-success: #052e16;
  --badge-bg-warning: #2d1f00;
  --badge-bg-danger:  #2d0a0a;
  --badge-bg-info:    #0c1a3a;

  /* Sidebar active */
  --accent-subtle:    #1e3a5f;
}

/* Tipografía global */
body,
.oh-wrapper,
.oh-sidebar,
.oh-navbar,
input, select, textarea, button {
  font-family: 'DM Sans', sans-serif !important;
}

/* Fondo base de la app */
body {
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
}

/* =========================================================
   NAVBAR
   ========================================================= */
.oh-navbar {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-default) !important;
  box-shadow: none !important;
}

.oh-navbar__wrapper {
  background-color: var(--bg-surface) !important;
}

.oh-navbar__page-title {
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
}

.oh-navbar__icon,
.oh-navbar__clock-icon {
  color: var(--text-muted) !important;
}

.oh-navbar__clock {
  color: var(--text-secondary) !important;
  border-color: var(--border-default) !important;
}

.oh-navbar__clock:hover {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

.oh-navbar__notification-tray {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

.oh-navbar__notification-head {
  border-bottom: 1px solid var(--border-default) !important;
}

.oh-navbar__notification-head-title {
  color: var(--text-primary) !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.oh-sidebar {
  background-color: var(--bg-surface) !important;
  border-right: 1px solid var(--border-default) !important;
}

.oh-sidebar__company {
  border-bottom: 1px solid var(--border-default) !important;
}

.oh-sidebar__company-title {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.oh-sidebar__company-link {
  color: var(--text-muted) !important;
}

.oh-sidebar__menu-link {
  color: var(--text-muted) !important;
  border-radius: 7px !important;
  font-weight: 400 !important;
}

.oh-sidebar__menu-link:hover {
  background-color: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
}

.oh-sidebar__menu-link--active,
.oh-sidebar__menu-link--active:hover {
  background-color: var(--accent-subtle) !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
}

.oh-sidebar__menu-icon {
  color: inherit !important;
}

.oh-sidebar__submenu-items {
  background-color: var(--bg-subtle) !important;
  border-left: 2px solid var(--border-default) !important;
}

.oh-sidebar__submenu-link {
  color: var(--text-muted) !important;
}

.oh-sidebar__submenu-link:hover,
.oh-sidebar__submenu-link--active {
  color: var(--accent) !important;
}

/* =========================================================
   TARJETAS Y PANELES
   ========================================================= */
.oh-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.oh-card__header {
  border-bottom: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

.oh-card__title--lg,
.oh-card__title--sm {
  color: var(--text-primary) !important;
}

.oh-main__container,
.oh-main {
  background-color: var(--bg-base) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
}

p, span, label, div {
  color: inherit;
}

.text-muted, .oh-card__subtitle {
  color: var(--text-secondary) !important;
}

/* =========================================================
   TABLAS
   ========================================================= */
.oh-table,
table {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
}

.oh-table th,
table thead th {
  background-color: var(--bg-subtle) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-top: none !important;
}

.oh-table td,
table tbody td {
  border-top: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.oh-table tbody tr:first-child td,
table tbody tr:first-child td {
  border-top: none !important;
}

.oh-table tbody tr:hover td,
table tbody tr:hover td {
  background-color: var(--bg-elevated) !important;
}

.oh-table td:first-child,
table tbody td:first-child {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* =========================================================
   BOTONES
   ========================================================= */
.oh-btn--secondary,
.btn-secondary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-family: 'DM Sans', sans-serif !important;
}

.oh-btn--secondary:hover,
.btn-secondary:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.oh-btn--danger,
.btn-danger {
  background-color: var(--accent-danger) !important;
  border-color: var(--accent-danger) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.oh-btn--light,
.btn-light,
.oh-btn--outline {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
}

.oh-btn--light:hover,
.btn-light:hover {
  background-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

/* =========================================================
   FORMULARIOS E INPUTS
   ========================================================= */
.oh-input,
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
select,
textarea {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.oh-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15) !important;
  outline: none !important;
  background-color: var(--bg-elevated) !important;
}

.oh-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

.oh-label,
label {
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

.select2-dropdown {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
}

.select2-container--default .select2-results__option {
  color: var(--text-secondary) !important;
}

.select2-container--default .select2-results__option--highlighted {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

.select2-container--default .select2-selection__rendered {
  color: var(--text-primary) !important;
}

/* =========================================================
   BADGES Y ESTADOS
   ========================================================= */
.oh-badge {
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 10px !important;
}

.oh-badge--success,
.badge-success,
.bg-success {
  background-color: var(--badge-bg-success) !important;
  color: var(--accent-success) !important;
  border: none !important;
}

.oh-badge--warning,
.badge-warning,
.bg-warning {
  background-color: var(--badge-bg-warning) !important;
  color: var(--accent-warning) !important;
  border: none !important;
}

.oh-badge--danger,
.badge-danger,
.bg-danger {
  background-color: var(--badge-bg-danger) !important;
  color: var(--accent-danger) !important;
  border: none !important;
}

.oh-badge--info,
.badge-info,
.bg-info {
  background-color: var(--badge-bg-info) !important;
  color: var(--accent) !important;
  border: none !important;
}

.oh-badge--secondary,
.badge-secondary {
  background-color: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border: none !important;
}

/* =========================================================
   LOGIN
   ========================================================= */
.oh-login,
.oh-auth,
.oh-auth__wrapper,
.oh-login__wrapper {
  background-color: var(--bg-base) !important;
  min-height: 100vh !important;
}

.oh-auth__card,
.oh-login__card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important;
}

.oh-auth__title,
.oh-login__title {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.oh-auth__subtitle,
.oh-login__subtitle {
  color: var(--text-muted) !important;
}

.oh-auth__logo img,
.oh-login__logo img {
  filter: brightness(1.1) !important;
}

/* Link de "Forgot password" */
.oh-auth a,
.oh-login a {
  color: var(--accent) !important;
}

.oh-auth a:hover,
.oh-login a:hover {
  color: var(--accent-hover) !important;
}

/* =========================================================
   MODALES
   ========================================================= */
.oh-modal,
.modal-content {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important;
  color: var(--text-primary) !important;
}

.oh-modal__header,
.modal-header {
  border-bottom: 1px solid var(--border-default) !important;
  background-color: var(--bg-surface) !important;
}

.oh-modal__title,
.modal-title {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.oh-modal__body,
.modal-body {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
}

.oh-modal__footer,
.modal-footer {
  border-top: 1px solid var(--border-default) !important;
  background-color: var(--bg-surface) !important;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

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

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* =========================================================
   TOOLTIPS Y POPOVERS
   ========================================================= */
.tooltip-inner {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--border-default) !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--border-default) !important;
}

.popover {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.popover-header {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-default) !important;
  font-family: 'DM Sans', sans-serif !important;
}

.popover-body {
  color: var(--text-secondary) !important;
  font-family: 'DM Sans', sans-serif !important;
}


/* =========================================================
   DASHBOARD — oh-card-dashboard
   ========================================================= */
.oh-card-dashboard {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}

.oh-card-dashboard__header {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-default) !important;
}

.oh-card-dashboard__title {
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

.oh-card-dashboard__count {
  color: var(--text-primary) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}

.oh-card-dashboard__body {
  background-color: var(--bg-surface) !important;
}

/* Variantes de color — conservan el borde superior de color */
.oh-card-dashboard--success { border-top: 3px solid var(--accent-success) !important; }
.oh-card-dashboard--warning { border-top: 3px solid var(--accent-warning) !important; }
.oh-card-dashboard--danger  { border-top: 3px solid var(--accent-danger)  !important; }
.oh-card-dashboard--neutral { border-top: 3px solid var(--border-strong)   !important; }

/* Dashboard contenedor */
.oh-dashboard {
  background-color: var(--bg-base) !important;
}

/* Sticky table del dashboard */
.oh-sticky-table,
.oh-sticky-table__table {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
}

.oh-sticky-table__th {
  background-color: var(--bg-subtle) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--border-default) !important;
}

.oh-sticky-table__td {
  border-top: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.oh-sticky-table__tr:first-child .oh-sticky-table__td {
  border-top: none !important;
}

/* Texto oscuro forzado por Horilla — override */
.oh-text--dark {
  color: var(--text-primary) !important;
}


/* =========================================================
   STICKY TABLE (divs — mini-tablas del dashboard)
   ========================================================= */
.oh-sticky-table {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
}

.oh-sticky-table__table {
  background-color: var(--bg-surface) !important;
}

.oh-sticky-table__thead,
.oh-sticky-table__top {
  background-color: var(--bg-subtle) !important;
}

.oh-sticky-table__th {
  background-color: var(--bg-subtle) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--border-default) !important;
}

.oh-sticky-table__tbody {
  background-color: var(--bg-surface) !important;
}

.oh-sticky-table__tr {
  background-color: var(--bg-surface) !important;
  border-top: 1px solid var(--border-default) !important;
}

.oh-sticky-table__tr:hover {
  background-color: var(--bg-elevated) !important;
}

.oh-sticky-table__sd,
.oh-sticky-table__td {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border: none !important;
}

.oh-sticky-table__sd:first-child,
.oh-sticky-table__td:first-child {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* Bootstrap .card y .card-body genéricos */
.card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
}

.card-header {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

.card-body {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
}

.card-title {
  color: var(--text-primary) !important;
}

.card-text {
  color: var(--text-secondary) !important;
}

/* Row-status (colores de filas del dashboard de asistencia) */
.row-status--green  { border-left: 3px solid var(--accent-success) !important; }
.row-status--yellow { border-left: 3px solid var(--accent-warning) !important; }
.row-status--orange { border-left: 3px solid #f97316 !important; }
.row-status--red    { border-left: 3px solid var(--accent-danger)  !important; }
.row-status--blue   { border-left: 3px solid var(--accent)         !important; }
.row-status--purple { border-left: 3px solid #a855f7 !important; }

/* Dropdown menú oscuro */
.oh-dropdown__menu {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

.oh-dropdown__item {
  color: var(--text-secondary) !important;
}

.oh-dropdown__item:hover {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* Pagination oscura */
.oh-pagination__link {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
}

.oh-pagination__link--active,
.oh-pagination__link:hover {
  background-color: var(--accent) !important;
  color: #fff !important;
}


/* =========================================================
   PANEL WORK INFO / PROGRESO DE EMPLEADOS
   ========================================================= */

/* Search bar del panel */
.oh-search-bar input {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
}

.oh-search-bar input::placeholder {
  color: var(--text-muted) !important;
}

/* Links dentro de tablas — heredan azul de Bootstrap */
table tbody td a,
.oh-sticky-table__sd a,
.oh-sticky-table__td a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

table tbody td a:hover,
.oh-sticky-table__sd a:hover {
  color: var(--accent) !important;
}

/* Barra de progreso */
.progress {
  background-color: var(--bg-elevated) !important;
  border-radius: 4px !important;
}

.progress-bar {
  background-color: var(--accent-success) !important;
}

.progress-text {
  color: var(--text-secondary) !important;
  font-size: 11px !important;
}

/* th con color:black inline — !important lo sobreescribe */
table thead th,
.oh-sticky-table__th {
  color: var(--text-muted) !important;
}

/* animated-background oscuro (skeleton loader) */
.animated-background {
  background: linear-gradient(
    to right,
    var(--bg-elevated) 8%,
    var(--bg-subtle) 18%,
    var(--bg-elevated) 33%
  ) !important;
  background-size: 800px 104px !important;
}


/* =========================================================
   TABS — oh-tabs
   ========================================================= */
.oh-tabs {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
}

.oh-tabs__tablist {
  background-color: var(--bg-subtle) !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-radius: 12px 12px 0 0 !important;
}

.oh-tabs__tab {
  color: var(--text-muted) !important;
  background-color: transparent !important;
  border-bottom: 2px solid transparent !important;
}

.oh-tabs__tab:hover {
  color: var(--text-secondary) !important;
  background-color: var(--bg-elevated) !important;
}

.oh-tabs__tab--active,
.oh-tabs__tab.active {
  color: var(--accent) !important;
  background-color: var(--bg-surface) !important;
  border-bottom: 2px solid var(--accent) !important;
  font-weight: 500 !important;
}

.oh-tabs__contents,
.oh-tabs__content {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-radius: 0 0 12px 12px !important;
}

.oh-tabs__content--active {
  background-color: var(--bg-surface) !important;
}

/* Paginación dentro del tab content */
.oh-tabs__contents .oh-pagination,
.oh-tabs__content .oh-pagination {
  background-color: var(--bg-surface) !important;
  border-top: 1px solid var(--border-default) !important;
  padding: 12px 20px !important;
  color: var(--text-secondary) !important;
}

/* Texto de paginación Pgina X de Y */
.oh-tabs__contents p,
.oh-tabs__contents span,
.oh-tabs__content p,
.oh-tabs__content span {
  color: var(--text-secondary) !important;
}

/* =========================================================
   BOTONES — oh-btn base y variantes sin cubrir
   ========================================================= */

.oh-btn {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
}

.oh-btn:hover {
  background-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.oh-btn--transparent {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--text-muted) !important;
}

.oh-btn--transparent:hover {
  background-color: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: transparent !important;
}

.oh-btn--primary, .btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.oh-btn--primary:hover, .btn-primary:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.oh-btn--success, .btn-success {
  background-color: var(--accent-success) !important;
  border-color: var(--accent-success) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.oh-btn--warning, .btn-warning {
  background-color: var(--accent-warning) !important;
  border-color: var(--accent-warning) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.oh-btn--info, .btn-info {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* Scrollbars dentro de tablas y tabs */
.oh-sticky-table ::-webkit-scrollbar,
.oh-tabs ::-webkit-scrollbar { height: 4px; width: 4px; }

.oh-sticky-table ::-webkit-scrollbar-track,
.oh-tabs ::-webkit-scrollbar-track { background: var(--bg-base); }

.oh-sticky-table ::-webkit-scrollbar-thumb,
.oh-tabs ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px;
}

/* Divisores */
hr, .oh-divider { border-color: var(--border-default) !important; opacity: 1 !important; }

/* =========================================================
   NAVBAR — separadores y iconos del lado derecho
   ========================================================= */
.oh-navbar__action-icons {
  border-left: 1px solid var(--border-default) !important;
  border-right: none !important;
}

.oh-navbar__action-icons:last-child {
  border-right: 1px solid var(--border-default) !important;
}

.oh-navbar__action-icons-link {
  color: var(--text-muted) !important;
}

.oh-navbar__action-icons-link:hover {
  color: var(--text-secondary) !important;
  background-color: var(--bg-elevated) !important;
}

.oh-navbar__icon {
  color: var(--text-muted) !important;
}

/* Avatar y nombre de usuario en navbar */
.oh-navbar__profile-link,
.oh-navbar__profile-name {
  color: var(--text-secondary) !important;
  border-left: 1px solid var(--border-default) !important;
}

.oh-navbar__profile-link:hover {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* Badge de notificaciones — conserva el rojo */
.oh-navbar__notification-count,
.oh-badge--notification {
  background-color: var(--accent-danger) !important;
  color: #fff !important;
}

/* =========================================================
   MODALES — oh-modal__dialog (detail view, bigModal)
   ========================================================= */
.oh-modal__dialog {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5) !important;
  color: var(--text-primary) !important;
}

.oh-modal__dialog-header {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-radius: 14px 14px 0 0 !important;
}

.oh-modal__dialog-title,
.oh-modal__dialog-title h5,
.oh-modal__dialog-title h2 {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.oh-modal__dialog-body,
.oh-modal__dialog-relative {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
}

.oh-modal__close {
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
}

.oh-modal__close:hover {
  color: var(--text-primary) !important;
}

/* Fondo oscuro detrás del modal */
.oh-modal {
  background-color: rgba(0,0,0,0.7) !important;
}

.oh-modal__dialog-footer,
.oh-modal__footer {
  background-color: var(--bg-surface) !important;
  border-top: 1px solid var(--border-default) !important;
  border-radius: 0 0 14px 14px !important;
}

/* Texto de labels dentro del detail modal */
.oh-modal__dialog-body label,
.oh-modal__dialog-relative label,
.oh-modal__dialog-body .oh-label {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Valores de los campos */
.oh-modal__dialog-body p,
.oh-modal__dialog-body span,
.oh-modal__dialog-body div {
  color: var(--text-secondary) !important;
}

/* Nombre del empleado en el modal */
.oh-modal__dialog-body h5,
.oh-modal__dialog-body h4,
.oh-modal__dialog-body h3,
.oh-modal__dialog-body h6,
.oh-modal__dialog-relative h5 {
  color: var(--text-primary) !important;
}

/* =========================================================
   DATE / MONTH INPUTS Y OH-SELECT
   ========================================================= */
input[type=date],
input[type=month],
input[type=week],
input[type=datetime-local],
.oh-select {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
}

input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) !important;
  cursor: pointer !important;
}

input[type=date]:focus,
input[type=month]:focus,
.oh-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15) !important;
  outline: none !important;
}

/* =========================================================
   SCROLLBAR DEL SIDEBAR Y CONTENIDO PRINCIPAL
   ========================================================= */
.oh-sidebar::-webkit-scrollbar { width: 4px; }
.oh-sidebar::-webkit-scrollbar-track { background: var(--bg-surface); }
.oh-sidebar::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px;
}

.oh-main::-webkit-scrollbar,
.oh-main__container::-webkit-scrollbar { width: 4px; }
.oh-main::-webkit-scrollbar-track,
.oh-main__container::-webkit-scrollbar-track { background: var(--bg-base); }
.oh-main::-webkit-scrollbar-thumb,
.oh-main__container::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px;
}

/* Scrollbar global para el body */
html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: var(--bg-base); }
html::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

/* ============================================================
   EMPLOYEE PROFILE SECTION — formulario edición empleado
   ============================================================ */
.oh-profile-section__card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
}
.oh-profile-section {
  background-color: var(--bg-surface) !important;
}
.oh-profile-section__topbar {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-default) !important;
}
.oh-profile-section__edit-photo {
  background-color: var(--bg-elevated) !important;
  border-right: 1px solid var(--border-default) !important;
}
.oh-profile-section__avatar {
  border: 2px solid var(--border-strong) !important;
}

/* GENERAL TABS — barra de pestañas del formulario de empleado */
.oh-general__tabs {
  background-color: transparent !important;
  border-bottom: 1px solid var(--border-default) !important;
}
.oh-general__tab-link {
  color: var(--text-muted) !important;
  border-bottom: 2px solid transparent !important;
  background-color: transparent !important;
}
.oh-general__tab-link:hover {
  color: var(--text-secondary) !important;
  background-color: var(--bg-elevated) !important;
}
.oh-general__tab-link--active,
.oh-general__tab-link.active {
  color: var(--accent) !important;
  border-bottom: 2px solid var(--accent) !important;
  font-weight: 500 !important;
  background-color: transparent !important;
}
.oh-general__tab-target {
  background-color: var(--bg-surface) !important;
}
.oh-general__tab-target .card-body {
  background-color: var(--bg-surface) !important;
}

/* ============================================================
   KANBAN CARDS — vista de empleados en modo tarjeta
   ============================================================ */
.oh-kanban-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
}
.oh-kanban-card:hover {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-strong) !important;
}
.oh-kanban-card__title {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}
.oh-kanban-card__subtitle {
  color: var(--text-secondary) !important;
}
.oh-kanban-card__avatar {
  background-color: var(--bg-elevated) !important;
}
.oh-kanban-card__profile-image {
  border: 2px solid var(--border-strong) !important;
}

/* LAYOUT GRID */
.oh-layout--grid-3 {
  background-color: transparent !important;
}

/* PAGE TITLE — .text-dark sobrescrito por Bootstrap */
.oh-main__titlebar-title,
.oh-main__titlebar-title.text-dark {
  color: var(--text-primary) !important;
}
.oh-main__topbar {
  background-color: transparent !important;
}

/* VIEW TYPE BUTTONS — list/card toggle */
.oh-btn--view {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-muted) !important;
}
.oh-btn--view-active {
  background-color: var(--accent-subtle) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* PAGINATION */
.oh-pagination__page,
.oh-pagination__label {
  color: var(--text-secondary) !important;
}
.oh-pagination__input {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}
.oh-pagination__link {
  color: var(--accent) !important;
}
.oh-pagination__link:hover {
  color: var(--accent-primary-hover) !important;
}

/* CHECKPOINT BADGE — "Empleados seleccionados" */
.oh-checkpoint-badge {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   EMPLOYEE INDIVIDUAL VIEW — vista detalle de empleado
   ============================================================ */
.oh-profile__info-name {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}
.oh-profile__info-designation {
  color: var(--text-secondary) !important;
}
.oh-profile__info-label {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}
.oh-profile__info-value {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}
.oh-profile__info-list {
  background-color: transparent !important;
}
.oh-profile__info-list-item {
  border-color: var(--border-default) !important;
}
.oh-profile__info-container {
  background-color: transparent !important;
}
.oh-profile__avatar {
  background-color: var(--bg-elevated) !important;
  border: 2px solid var(--border-strong) !important;
}
.oh-profile__active-badge {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
}
.oh-profile__active-badge--secondary {
  background-color: var(--bg-elevated) !important;
}

/* PROFILE TABS — barra horizontal debajo del encabezado */
.oh-general__tabs--profile,
.oh-general__tabs--border {
  border-bottom: 1px solid var(--border-default) !important;
  background-color: transparent !important;
}
.oh-profile__info-tab {
  background-color: transparent !important;
}

/* STICKY TABLE right column — tiene background-color: #fff hardcodeado en inline style */
.oh-sticky-table__right {
  background-color: var(--bg-surface) !important;
}
.oh-sticky-table__top {
  background-color: var(--bg-subtle) !important;
}

/* ============================================================
   FORM LABELS — mayor contraste en formularios de edición
   ============================================================ */
/* Sobrescribe el oh-label global para que los labels dentro
   de formularios sean más legibles (anterior: text-secondary #94a3b8) */
.oh-profile-section__card .oh-label,
.oh-profile-section__card label,
.oh-general__tab-target .oh-label,
.oh-general__tab-target label,
.card-body .oh-label,
.card-body label {
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}

/* GENERAL TABS inactive — más visibles en vista editar empleado */
.oh-general__tab-link:not(.oh-general__tab-link--active):not(.active) {
  color: #94a3b8 !important;
}

/* ============================================================
   BREADCRUMB — links oscuros originales, invisibles en dark mode
   ============================================================ */
.oh-navbar__breadcrumb-link {
  color: var(--text-muted) !important;
}
.oh-navbar__breadcrumb-link:hover {
  color: var(--text-secondary) !important;
}
.oh-navbar__breadcrumb-link.active {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}