/* ==========================================================
   Nueva Mente – Theme bridge (Tailwind + Bootstrap + Custom)
   Versión C – Organizado, con fixes responsive y modo oscuro
   ========================================================== */

/* ==========================================
   1. Variables globales
   ========================================== */
:root {
  --nm-bg: #f1f5f9;
  --nm-surface: #ffffff;
  --nm-surface-2: #f8fafc;
  --nm-text: #0f172a;
  --nm-muted: #64748b;
  --nm-primary: #06b6d4;
  --nm-primary-600: #0891b2;
  --nm-success: #22c55e;
  --nm-danger: #ef4444;
  --nm-warning: #eab308;
  --nm-info: #3b82f6;
  --nm-accent: #2C526A;
  --nm-accent-900: #1D3645;
  --nm-border: #e2e8f0;
  --nm-ring: #06b6d4;
  --radius: .75rem;

  /* Bridge Bootstrap */
  --bs-primary: var(--nm-primary);
  --bs-body-color: var(--nm-text);
  --bs-body-bg: var(--nm-bg);
  --bs-border-color: var(--nm-border);
}

/* Modo oscuro – variables base */
html.dark {
  --nm-bg: #0b0b0b;
  --nm-surface: #111214;
  --nm-surface-2: #191b1e;
  --nm-text: #e5e7eb;
  --nm-muted: #9ca3af;
  --nm-primary: #06b6d4;
  --nm-primary-600: #22d3ee;
  --nm-success: #4ade80;
  --nm-danger: #f87171;
  --nm-warning: #facc15;
  --nm-info: #60a5fa;
  --nm-border: #1f2937;
  --nm-ring: #22d3ee;
}

/* ==========================================
   2. Base: body, tipografía, scrollbar
   ========================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--nm-bg);
}
::-webkit-scrollbar-thumb {
  background: #47556933;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #47556966;
}

body {
  background: var(--nm-bg);
  color: var(--nm-text);
  font-family: "Inter", sans-serif;
  transition: .3s background ease, color ease;
  /* overflow-x: hidden; <-- Quitar de aquí */
}

/* Agrega al final de la sección 2 */
.main-content-wrap {
    overflow-x: hidden;
}

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

a {
  color: var(--nm-primary);
  text-decoration: none;
}
a:hover {
  color: var(--nm-primary-600);
}

/* ==========================================
   3. Cards, widgets, skeleton, timeline
   ========================================== */
.nm-card {
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  padding: 1.25rem;
  transition: all .3s ease;
}
.nm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.widget-box {
  border: 1px solid var(--nm-border);
  background: var(--nm-surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 8px 25px rgba(0,0,0,.06);
}
.widget-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: .5rem;
}
.widget-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--nm-primary);
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg,#e2e8f0 25%,#f8fafc 50%,#e2e8f0 75%);
  background-size: 200% 100%;
  animation: skeleton 1.6s infinite ease-in-out;
  border-radius: 6px;
}
@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Timeline */
.timeline {
  border-left: 2px solid var(--nm-border);
  padding-left: 1.25rem;
}
.timeline-item {
  margin-bottom: 1.25rem;
}
.timeline-item:before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--nm-primary);
  border-radius: 50%;
  display: block;
  position: relative;
  left: -1.85rem;
  top: 6px;
}

/* ==========================================
   4. Botones
   ========================================== */
.btn-nm {
  background: var(--nm-primary);
  border-color: var(--nm-primary);
  color: #fff;
  border-radius: var(--radius);
}
.btn-nm:hover {
  background: var(--nm-primary-600);
  border-color: var(--nm-primary-600);
}

.btn-outline-nm {
  color: var(--nm-primary);
  border-color: var(--nm-primary);
}
.btn-outline-nm:hover {
  background: var(--nm-primary);
  color: #fff;
}

.btn-soft {
  background: rgba(6,182,212,.15);
  color: var(--nm-primary);
  border-radius: var(--radius);
}
.btn-soft:hover {
  background: var(--nm-primary);
  color: #fff;
}

.btn-success {
  background: var(--nm-success);
  border-color: var(--nm-success);
  color: #fff;
}
.btn-danger {
  background: var(--nm-danger);
  border-color: var(--nm-danger);
  color: #fff;
}
.btn-warning {
  background: var(--nm-warning);
  border-color: var(--nm-warning);
  color: #000;
}
.btn-info {
  background: var(--nm-info);
  border-color: var(--nm-info);
  color: #fff;
}

/* ==========================================
   5. Formularios, inputs, switches, radios
   ========================================== */
input,
select,
textarea {
  background: var(--nm-surface);
  color: var(--nm-text);
  border: 1px solid var(--nm-border);
  border-radius: .6rem;
  padding: .55rem .85rem;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--nm-ring);
  box-shadow: 0 0 0 .25rem rgba(6,182,212,.3);
  outline: none;
}

.form-group {
  margin-bottom: 1.25rem;
}
.form-label {
  font-weight: 600;
  color: var(--nm-text);
  margin-bottom: .35rem;
  display: block;
}

/* Inputs con clases nm- */
.nm-input {
  width: 100%;
  padding: .65rem 1rem;
  border-radius: .65rem;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  color: var(--nm-text);
  transition: all .25s ease;
}
.nm-input:focus {
  border-color: var(--nm-primary);
  box-shadow: 0 0 0 .25rem rgba(6,182,212,.25);
}

/* Con icono dentro */
.nm-input-icon {
  position: relative;
}
.nm-input-icon i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nm-muted);
  font-size: 1rem;
}
.nm-input-icon input {
  padding-left: 2.4rem;
}

/* Estados de validación nm-input */
.nm-input.is-valid {
  border-color: #22c55e;
  box-shadow: 0 0 0 .2rem rgba(34,197,94,.25);
}
.nm-input.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 .2rem rgba(239,68,68,.25);
}

/* Feedback */
.nm-feedback {
  font-size: .85rem;
  margin-top: .35rem;
  display: none;
}
.nm-feedback.valid {
  color: #22c55e;
}
.nm-feedback.invalid {
  color: #ef4444;
}
.nm-input.is-valid + .nm-feedback.valid {
  display: block;
}
.nm-input.is-invalid + .nm-feedback.invalid {
  display: block;
}

/* Switch */
.nm-switch {
  position: relative;
  width: 46px;
  height: 24px;
}
.nm-switch input {
  display: none;
}
.nm-switch span {
  position: absolute;
  background: var(--nm-border);
  border-radius: 24px;
  inset: 0;
  cursor: pointer;
  transition: background .25s;
}
.nm-switch span::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--nm-surface);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: .25s;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.nm-switch input:checked + span {
  background: var(--nm-primary);
}
.nm-switch input:checked + span::before {
  transform: translateX(22px);
}

/* Checkbox / Radio estilo nm */
.nm-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
}
.nm-check input {
  width: 18px;
  height: 18px;
}

.nm-radio {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}
.nm-radio input {
  accent-color: var(--nm-primary);
  width: 18px;
  height: 18px;
}

.nm-textarea {
  min-height: 100px;
  resize: vertical;
}

.nm-select {
  width: 100%;
  padding: .65rem 1rem;
  border-radius: .65rem;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  color: var(--nm-text);
}

.nm-input:disabled {
  background: #cbd5e130;
  cursor: not-allowed;
}

/* ==========================================
   6. Chips, badges, alerts
   ========================================== */
.chip {
  display: inline-flex;
  background: var(--nm-surface-2);
  padding: .35rem .75rem;
  border-radius: 2rem;
  border: 1px solid var(--nm-border);
  color: var(--nm-muted);
  font-size: .75rem;
}

.badge-success { background: var(--nm-success); color: #fff; }
.badge-danger  { background: var(--nm-danger);  color: #fff; }
.badge-warning { background: var(--nm-warning); color: #000; }
.badge-info    { background: var(--nm-info);    color: #fff; }

.alert-nm {
  border-radius: var(--radius);
  border: 1px solid var(--nm-border);
  padding: 1rem 1.25rem;
  display: flex;
  gap: .75rem;
  align-items: center;
}
.alert-nm i {
  font-size: 1.25rem;
}
.alert-success {
  background: rgba(34,197,94,.12);
  color: var(--nm-success);
}
.alert-danger {
  background: rgba(239,68,68,.12);
  color: var(--nm-danger);
}
.alert-warning {
  background: rgba(234,179,8,.12);
  color: var(--nm-warning);
}
.alert-info {
  background: rgba(59,130,246,.12);
  color: var(--nm-info);
}

/* ==========================================
   7. Tooltip, avatar, colapsables
   ========================================== */
.tooltip-nm {
  background: var(--nm-accent-900);
  color: #fff;
  padding: .4rem .7rem;
  border-radius: .4rem;
  font-size: .75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.card-collapse {
  background: var(--nm-surface);
  border-radius: var(--radius);
  border: 1px solid var(--nm-border);
}
.card-collapse-header {
  padding: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.card-collapse-body {
  padding: 1rem;
  display: none;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--nm-primary);
}

/* ==========================================
   8. Validaciones tipo Bootstrap (has-*)
   ========================================== */
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
  color: #3c763d;
}
.has-success .form-control {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-success .form-control:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;
}
.has-success .input-group-addon {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #3c763d;
}
.has-success .form-control-feedback {
  color: #3c763d;
}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
  color: #8a6d3b;
}
.has-warning .form-control {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-warning .form-control:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;
}
.has-warning .input-group-addon {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #8a6d3b;
}
.has-warning .form-control-feedback {
  color: #8a6d3b;
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}
.has-error .form-control-feedback {
  color: #a94442;
}
.has-error label {
  color: #a94442;
  font-size: .8rem;
}

.has-feedback label ~ .form-control-feedback {
  top: 25px;
}
.has-feedback label.sr-only ~ .form-control-feedback {
  top: 0;
}
.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}

/* ==========================================
   9. Sidebar & menú multinivel
   ========================================== */
html.dark .sidebar {
  background: var(--nm-accent-900) !important;
}
html.dark .sidebar a {
  color: #cbd5e1 !important;
}

/* Menú sin bullets */
.nav-item,
.nav-item ul li,
.nav-link,
.submenu-link,
.nm-menu,
.nm-submenu {
  list-style: none !important;
}

/* Submenus */
.nm-submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-left: 0;
  border-left: 1px solid var(--nm-border);
  transition: all .25s ease;
  border-left: none !important;
  margin-left: 0 !important;
  padding-left: 1rem !important;
}

/* cuando el item está abierto */
.nav-item.open > .nm-submenu {
  max-height: 600px;
  opacity: 1;
}

.submenu-link {
  display: block;
  padding: .55rem .75rem;
  border-radius: .35rem;
  color: #cbd5e1;
  font-size: .95rem;
  transition: .25s;
}
.submenu-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

.nm-submenu li {
  padding-left: .25rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
}

/* Menú multinivel usando Bootstrap collapse + estilo propio */
.nm-submenu.collapse {
  max-height: 0;
  opacity: 0;
  transition: max-height .25s ease, opacity .25s ease;
}

.nm-submenu.collapse.show {
  max-height: 600px;   /* sube si tienes muchos ítems */
  opacity: 1;
}

/* Flecha de los items con hijos */
.nm-arrow {
  transition: transform .25s ease;
}

/* Rotar flecha cuando el collapse está abierto */
a[aria-expanded="true"] > .nm-arrow {
  transform: rotate(90deg);
}

/* Reset de bullets / indentación en todo el menú */
.nm-menu,
.nm-menu .nav-item,
.nm-menu .nm-submenu,
.nm-menu .nm-submenu li {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.nm-submenu li {
  padding-left: .25rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
}

/* En dark mode mantener legibilidad */
html.dark .submenu-link {
  color: var(--nm-text);
}
html.dark .submenu-link:hover {
  background: rgba(255,255,255,.08);
}

/* Header de categoría en el sidebar */
.menu-header {
    position: relative;
    padding: .75rem 1rem;
    font-size: .80rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #cbd5e1; /* gris suave */
    opacity: .7;
    cursor: default;
    list-style: none !important;
    /* Línea separadora opcional */
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: .75rem;
}

.menu-header::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 1px;
    background: rgba(255,255,255,.08);
}

/* Ajuste para modo oscuro */
html.dark .menu-header {
    color: var(--nm-muted) !important;
    border-color: var(--nm-border) !important;
    opacity: .9;
}

/* Flecha giratoria */
.nm-arrow {
  transition: transform .25s ease;
}
.nav-item.open > button .nm-arrow,
.nav-item.open > .submenu-link .nm-arrow {
  transform: rotate(90deg);
}

/* ==========================================
   10. Dropdown usuario
   ========================================== */
#nm-user-menu {
  min-width: 11rem;
  animation: fadeUser .25s ease;
}
@keyframes fadeUser {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  font-size: .9rem;
  border-radius: .35rem;
  display: flex;
  align-items: center;
  transition: .25s ease;
}
.dropdown-item i {
  margin-right: .5rem;
  font-size: 1.1rem;
}
.dropdown-item:hover {
  background: rgba(6,182,212,.1);
  color: var(--nm-text);
}
.dark .dropdown-item {
  color: var(--nm-text);
}

/* ==========================================
   11. DataTables & tablas
   ========================================== */
.table-hover tbody tr:hover {
  background-color: rgba(6,182,212,0.05);
}

/* Puedes ajustar estos estilos si usas DataTables */
table.dataTable > thead > tr > th {
  background: color-mix(in oklab, var(--nm-surface), #94a3b8 10%);
  color: var(--nm-muted);
  border-bottom-color: var(--nm-border);
}
table.dataTable tbody tr:hover {
  background: color-mix(in oklab, var(--nm-surface), #94a3b8 8%);
}
table.dataTable tbody tr {
  font-size: 0.7rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--nm-primary) !important;
  color: #fff !important;
  border-radius: .5rem !important;
}

.dt-info {
  margin-top: .7rem !important;
  margin-bottom: .7rem !important;
  font-size: .85rem !important;
  color: var(--nm-muted) !important;
}
/* ==========================================
   12. FullCalendar (si lo usas)
   ========================================== */
.fc .fc-toolbar-title {
  font-weight: 700;
  color: var(--nm-text);
}
.fc-theme-standard .fc-scrollgrid,
.fc .fc-daygrid-day {
  border-color: var(--nm-border) !important;
}
.fc .fc-button {
  background: var(--nm-primary);
  border-color: var(--nm-primary);
}
.fc .fc-button:hover {
  background: var(--nm-primary-600);
  border-color: var(--nm-primary-600);
}
.fc .fc-daygrid-day-number {
  color: var(--nm-text);
}

/* ==========================================
   13. Chart.js
   ========================================== */
canvas {
  background: transparent;
}
.chartjs-render-monitor {
  transition: transform .3s ease;
}

/* ==========================================
   14. Animaciones globales
   ========================================== */
.fade-in {
  animation: fadeIn .4s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   15. DARK MODE – Overrides detallados
   ========================================== */

/* Texto base en oscuro */
html.dark body,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark p,
html.dark span,
html.dark label,
html.dark a {
  color: var(--nm-text) !important;
}

/* Placeholder en oscuro */
html.dark ::placeholder {
  color: var(--nm-muted) !important;
  opacity: .8;
}

/* Cards & contenedores */
html.dark .nm-card,
html.dark .widget-box,
html.dark .card-collapse,
html.dark .timeline,
html.dark .skeleton {
  background: var(--nm-surface) !important;
  border-color: var(--nm-border) !important;
  color: var(--nm-text) !important;
}

/* Botones */
html.dark .btn-nm,
html.dark .btn-success,
html.dark .btn-danger,
html.dark .btn-info {
  color: #fff !important;
}
html.dark .btn-warning {
  color: #000 !important;
}
html.dark .btn-outline-nm {
  color: var(--nm-primary) !important;
  border-color: var(--nm-primary) !important;
}
html.dark .btn-soft {
  background: rgba(6,182,212,.2) !important;
  color: var(--nm-primary) !important;
}

/* Inputs y selects */
html.dark input,
html.dark select,
html.dark textarea,
html.dark .nm-input,
html.dark .nm-select {
  background: var(--nm-surface-2) !important;
  color: var(--nm-text) !important;
  border-color: var(--nm-border) !important;
}
html.dark input:disabled,
html.dark textarea:disabled,
html.dark select:disabled {
  background: rgba(255,255,255,.06) !important;
  color: var(--nm-muted) !important;
}

/* Feedback valid/invalid */
html.dark .nm-feedback.invalid {
  color: var(--nm-danger) !important;
}
html.dark .nm-feedback.valid {
  color: var(--nm-success) !important;
}

/* Checkboxes y radios */
html.dark input[type="checkbox"],
html.dark input[type="radio"] {
  accent-color: var(--nm-primary) !important;
}

/* Switch */
html.dark .nm-switch span {
  background: var(--nm-border) !important;
}
html.dark .nm-switch input:checked + span {
  background: var(--nm-primary) !important;
}

/* Chips & badges */
html.dark .chip {
  background: var(--nm-surface-2) !important;
  border-color: var(--nm-border) !important;
  color: var(--nm-text) !important;
}
html.dark .badge-warning {
  color: #000 !important;
}
html.dark .badge-success,
html.dark .badge-info,
html.dark .badge-danger {
  color: #fff !important;
}

/* Alertas nm */
html.dark .alert-nm {
  border-color: var(--nm-border) !important;
  background: var(--nm-surface-2) !important;
  color: var(--nm-text) !important;
}
html.dark .alert-success {
  color: var(--nm-success) !important;
}
html.dark .alert-danger {
  color: var(--nm-danger) !important;
}
html.dark .alert-warning {
  color: var(--nm-warning) !important;
}
html.dark .alert-info {
  color: var(--nm-info) !important;
}

/* Header en dark (si lo usas como card) */
html.dark header {
  background: var(--nm-surface) !important;
  color: var(--nm-text) !important;
  border-radius: 10px !important;
}

/* DataTables en dark */
html.dark table.dataTable,
html.dark table.dataTable tbody td,
html.dark table.dataTable thead th {
  background: var(--nm-surface) !important;
  color: var(--nm-text) !important;
  border-color: var(--nm-border) !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--nm-text) !important;
}

/* FullCalendar en dark */
html.dark .fc-theme-standard .fc-scrollgrid,
html.dark .fc .fc-daygrid-day {
  background: var(--nm-surface) !important;
  border-color: var(--nm-border) !important;
}
html.dark .fc .fc-daygrid-day-number {
  color: var(--nm-text) !important;
}
html.dark .fc .fc-toolbar-title {
  color: var(--nm-text) !important;
}

/* Chart.js en dark */
html.dark .chartjs-render-monitor {
  filter: brightness(.85) !important;
}

/* Dropdowns & tooltips en dark */
html.dark .dropdown-menu {
  background: var(--nm-surface) !important;
  border-color: var(--nm-border) !important;
  color: var(--nm-text) !important;
}
html.dark .dropdown-item:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--nm-text) !important;
}
html.dark .tooltip-nm {
  background: var(--nm-surface-2) !important;
  color: var(--nm-text) !important;
}

/* Tipografía en timeline en dark */
html.dark .timeline-item h4,
html.dark .timeline-item p {
  color: var(--nm-text) !important;
}

/* ==========================================
   16. Responsive & sidebar fade/slide
   ========================================== */

/* Contenedor principal – Aseguramos que el contenido principal siempre tenga un margen izquierdo
   igual al ancho del sidebar (w-64 = 16rem) cuando el sidebar está fijo en escritorio */
@media (min-width: 1024px) {
    .main-content-wrap {
        margin-left: 16rem; /* 64px de w-64 en Tailwind es 16rem */
    }
}

/* Animación del sidebar sólo en móviles (max-width: 1023px) */
@media (max-width: 1023px) {
  .sidebar-animate {
    transition: transform .35s ease, opacity .35s ease;
    opacity: 0;
    /* Aseguramos que el sidebar sea un overlay en móviles */
    position: fixed;
    height: 100%;
    z-index: 50; /* Z-index alto para estar encima del contenido */
  }

  .sidebar-show {
    opacity: 1 !important;
    z-index: 300 !important;
    transform: translateX(0) !important;
  }
  
  /* Capa de overlay cuando el menú está abierto en móvil */
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  
  /* Cuando el HTML tiene la clase 'sidebar-active', muestra el overlay */
  html.sidebar-active .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Ocultar el scroll horizontal del contenido principal en móvil */
  .main-content-wrap {
      margin-left: 0;
  }
}

/* En escritorio, sidebar siempre visible y estable (min-width: 1024px) */
@media (min-width: 1024px) {
  #sidebar {
    transform: translateX(0) !important;
    opacity: 1 !important;
    position: fixed; /* Mejor usar fixed en lugar de sticky para evitar problemas de scroll */
    top: 0;
    height: 100vh; /* Ocupa toda la altura de la vista */
    z-index: 30; /* Debe estar por debajo del z-index del overlay, pero no del contenido */
  }
}

/* Los bloques extra aceptan el mismo comportamiento de menú */
.nm-sidebar-extra .nav-item,
.nm-sidebar-extra .nm-submenu,
.nm-sidebar-extra .submenu-link {
    list-style: none !important;
}

/* Ajustes visuales para integrarlo al sidebar */
.nm-sidebar-extra .nav-link,
.nm-sidebar-extra .submenu-link {
    color: #cbd5e1;
    transition: .25s;
}

.nm-sidebar-extra .nav-link:hover,
.nm-sidebar-extra .submenu-link:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

/* Encabezado */
.menu-header {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 1rem;
    letter-spacing: .04rem;
    color: #cbd5e1;
    margin-top: 1rem;
    opacity: .7;
}

/* Modo Oscuro */
html.dark .nm-sidebar-extra .nav-link,
html.dark .nm-sidebar-extra .submenu-link,
html.dark .menu-header {
    color: var(--nm-text) !important;
}

.card-hover{ transition:.3s; }
.card-hover:hover{ transform: translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,.08); }
.nm-card-header{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--nm-border); }
.nm-card-title{ margin:0; font-weight:600; }
.dots-btn{ border:none; background:transparent; color:#94a3b8; padding:.35rem .5rem; border-radius:.5rem; }
.dots-btn:hover{ background:rgba(148,163,184,.2); color:#0ea5e9; }
.fc .fc-toolbar-title{ font-weight:700; }
.fc-theme-standard .fc-scrollgrid, .fc .fc-daygrid-day{ border-color: var(--nm-border) !important; }
.fc .fc-button{ background: var(--nm-primary); border-color: var(--nm-primary); }
.fc .fc-button:hover{ background: var(--nm-primary-600); border-color: var(--nm-primary-600); }
.dark .fc .fc-button{ background: var(--nm-primary); border-color: var(--nm-primary); }

/* -------------------------------
   Breadcrumb – Nueva Mente UI
--------------------------------*/
.nm-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.nm-breadcrumb .bc-item {
  color: var(--nm-muted);
  display: flex;
  align-items: center;
  gap: .35rem;
}

.nm-breadcrumb .bc-item a {
  color: var(--nm-primary);
  font-weight: 600;
}

.nm-breadcrumb .bc-item a:hover {
  text-decoration: underline;
}

.nm-breadcrumb .bc-item.active {
  color: var(--nm-text);
  font-weight: 700;
}

.nm-breadcrumb .separator {
  color: var(--nm-muted);
  font-size: .8rem;
}

/* Badges personalizados */
.badge-success {
    background: #34d399;
    color: #fff;
}
.badge-danger {
    background: #f87171;
    color: #fff;
}
.badge-warning {
    background: #fbbf24;
    color: #000;
}
.badge-info {
    background: #629bf7;
    color: #fff;
}

/* --- Modo oscuro --- */
html.dark .nm-breadcrumb {
  background: var(--nm-surface-2);
  border-color: var(--nm-border);
}

html.dark .nm-breadcrumb .bc-item a {
  color: var(--nm-primary-600);
}

html.dark .nm-breadcrumb .separator {
  color: var(--nm-muted);
}

/* 1.17 Profile */
.profile-widget {
  margin-top: 35px;
}
.profile-widget .profile-widget-picture {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
  float: left;
  width: 100px;
  margin: -35px -5px 0 30px;
  /* position: relative; */
  position: absolute;
  z-index: 1000;
}
.profile-widget .profile-widget-header {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
}
.profile-widget .profile-widget-items {
  display: flex;
  position: relative;
}
.profile-widget .profile-widget-items:after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: -25px;
  right: 0;
  height: 1px;
  background-color: #f2f2f2;
}
.profile-widget .profile-widget-items .profile-widget-item {
  flex: 1;
  text-align: center;
  border-right: 1px solid #f2f2f2;
  padding: 10px 0;
}
.profile-widget .profile-widget-items .profile-widget-item:last-child {
  border-right: none;
}
.profile-widget .profile-widget-items .profile-widget-item .profile-widget-item-label {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #34395e;
}
.profile-widget .profile-widget-items .profile-widget-item .profile-widget-item-value {
  color: #000;
  font-weight: 600;
  font-size: 16px;
}
.profile-widget .profile-widget-description {
  padding: 20px;
  line-height: 26px;
}
.profile-widget .profile-widget-description .profile-widget-name {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .profile-widget .profile-widget-picture {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin: 40px 0;
    float: none;
  }
  .profile-widget .profile-widget-items .profile-widget-item {
    border-top: 1px solid #f2f2f2;
  }
}

.filters {
  margin-top: 3px;
}

.dark .filters  {
    background: var(--nm-surface-2) !important;
    border: 1px solid #e2e8f0 !important;
}

.dark .filters .nm-card-title {
    background: var(--nm-surface-2) !important;
}