/* =====================================================================
   MediGo — Estandarización visual al sistema de diseño de Xonia
   Override sobre el theme "Cuba". Se carga al final del <head>.

   Marca:  marino #2a3c58 · marino hondo #1e2b40 · rojo #e1222c · rojo claro #e9646b
   Grises: escala slate de Tailwind
   Fuente: de sistema (ui-sans-serif / system-ui / Segoe UI)
   ===================================================================== */

:root {
  --theme-deafult: #2a3c58;   /* primario (typo original del theme) */
  --theme-secondary: #e1222c; /* acento */
  --xn-marino: #2a3c58;
  --xn-marino-hondo: #1e2b40;
  --xn-rojo: #e1222c;
  --xn-rojo-claro: #e9646b;
  --xn-s50:#f8fafc; --xn-s100:#f1f5f9; --xn-s200:#e2e8f0; --xn-s300:#cbd5e1;
  --xn-s400:#94a3b8; --xn-s500:#64748b; --xn-s600:#475569; --xn-s700:#334155;
  --xn-s800:#1e293b; --xn-s900:#0f172a; --xn-s950:#020617;
}

/* ------------------------- Tipografía ------------------------- */
body,
.btn, .form-control, .form-select, input, select, textarea, button,
h1, h2, h3, h4, h5, h6,
.sidebar-wrapper, .page-header, .card, .table {
  font-family: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial,
               'Apple Color Emoji', sans-serif !important;
}
body { font-size: 13px !important; line-height: 1.5 !important; }

h1 { font-size: 22px !important; }
h2 { font-size: 20px !important; }
h3 { font-size: 18px !important; }
h4 { font-size: 15px !important; }
h5 { font-size: 14px !important; }
h6 { font-size: 13px !important; }

.page-title h3, .page-header h3 { font-size: 18px !important; font-weight: 600 !important; }
.breadcrumb, .breadcrumb-item, .breadcrumb-item a { font-size: 12px !important; }

.sidebar-wrapper .sidebar-links > li .sidebar-link span,
.sidebar-wrapper .sidebar-submenu li a,
.sidebar-wrapper .sidebar-list .sidebar-link span { font-size: 13px !important; }
.sidebar-wrapper .sidebar-main-title h6 { font-size: 11px !important; letter-spacing: .04em; }

/* Listas, tablas y grillas (incluye DataTables y sus controles) */
.table, .table th, .table td,
table, table th, table td,
.dataTables_wrapper, .dataTables_wrapper *,
.dataTables_filter input, .dataTables_length select,
.dataTables_info, .paginate_button, .page-link,
.dataTable, .dataTable th, .dataTable td {
  font-family: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
.table, .table th, .table td,
.dataTable, .dataTable th, .dataTable td { font-size: 13px !important; }
.table th, .dataTable th { font-weight: 600 !important; }
.btn { font-size: 13px !important; padding: .40rem .9rem !important; }
.form-control, .form-select { font-size: 13px !important; }
.card-header h5 { font-size: 14px !important; font-weight: 600 !important; }

/* ------------------------- Color primario (marino) ------------------------- */
.btn-primary,
.btn-primary.active,
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--xn-marino) !important;
  border-color: var(--xn-marino) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: var(--xn-marino-hondo) !important;
  border-color: var(--xn-marino-hondo) !important;
}
.bg-primary { background-color: var(--xn-marino) !important; }
.text-primary, .txt-primary, .font-primary { color: var(--xn-marino) !important; }
.badge.badge-primary, .badge-primary { background-color: var(--xn-marino) !important; }

.btn-outline-primary, .btn-outline-primary-2x {
  color: var(--xn-marino) !important;
  border-color: var(--xn-marino) !important;
}
.btn-outline-primary:hover, .btn-outline-primary-2x:hover {
  background-color: var(--xn-marino) !important;
  color: #fff !important;
}
a { color: var(--xn-marino); }
a:hover { color: var(--xn-marino-hondo); }

/* Acento rojo para elementos secundarios/peligro suaves ya cubiertos por Bootstrap */
.btn-secondary { background-color: var(--xn-rojo) !important; border-color: var(--xn-rojo) !important; }
.text-secondary-brand { color: var(--xn-rojo) !important; }

/* ------------------------- Barra lateral (marino) ------------------------- */
.page-wrapper .sidebar-wrapper,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper,
.page-wrapper.horizontal-wrapper .page-body-wrapper div.sidebar-wrapper {
  background-color: var(--xn-marino) !important;
}
.sidebar-wrapper .logo-wrapper, .sidebar-wrapper .logo-icon-wrapper {
  background-color: var(--xn-marino) !important;
}
/* Fuente de sistema en toda la barra lateral (vence a Montserrat del theme) */
.sidebar-wrapper, .sidebar-wrapper a, .sidebar-wrapper span,
.sidebar-wrapper .sidebar-link, .sidebar-wrapper .sidebar-title,
.sidebar-wrapper .lan-3, .sidebar-wrapper .lan-4 {
  font-family: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
/* Texto de los items de menú: 13px, sin negrita, slate-300 */
.sidebar-wrapper a.sidebar-link,
.sidebar-wrapper .sidebar-link,
.sidebar-wrapper .sidebar-link span,
.sidebar-wrapper .sidebar-title {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--xn-s300) !important;
}
.sidebar-wrapper .sidebar-link.active,
.sidebar-wrapper .sidebar-link.active span,
.sidebar-wrapper .sidebar-link:hover,
.sidebar-wrapper .sidebar-link:hover span { color: #fff !important; font-weight: 500 !important; }
/* Submenús: un punto más pequeños y tenues */
.sidebar-wrapper .sidebar-submenu a,
.sidebar-wrapper .sidebar-submenu li a,
.sidebar-wrapper .lan-4 {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--xn-s400) !important;
}
.sidebar-wrapper .sidebar-submenu a.active,
.sidebar-wrapper .sidebar-submenu a:hover,
.sidebar-wrapper .sidebar-submenu li a.active { color: #fff !important; }
/* Iconos del menú en rojo claro (los SVG usan stroke="currentColor") */
.sidebar-wrapper a svg,
.sidebar-wrapper .sidebar-link svg { color: var(--xn-rojo-claro) !important; stroke: var(--xn-rojo-claro) !important; }
.sidebar-wrapper .sidebar-link.active svg { color: #fff !important; stroke: #fff !important; }
/* Encabezados de sección del menú, tenues */
.sidebar-wrapper .sidebar-main-title h6,
.sidebar-wrapper .sidebar-main-title p { color: var(--xn-s500) !important; }

/* ------------------------- Cabecera de tabla (marino/blanco) ------------------------- */
/* Cubre .table, table.display (DataTables) y cualquier <table> del panel */
.table thead th, .table > thead > tr > th,
table thead th, table.display thead th, .dataTable thead th {
  background-color: var(--xn-marino) !important;
  color: #fff !important;
  border-color: var(--xn-marino) !important;
  font-weight: 600 !important;
}

/* ------------------------- Colapso del sidebar ------------------------- */
/* Al colapsar, el sidebar pasa a modo icono (~90px). El theme solo reajustaba el
   header, dejando un hueco vacío bajo el contenido. Se controla con la clase
   `sidebar-collapsed` (la añade el JS del panel a .page-wrapper): un estado en un
   ancestro común permite reajustar contenido, cabecera y pie sin depender del
   combinador de hermanos ni pelear con las media queries del theme. */
html body .page-wrapper.sidebar-collapsed .page-body-wrapper .page-body,
html body .page-wrapper.sidebar-collapsed .page-body-wrapper footer.footer,
html body .page-wrapper.sidebar-collapsed .page-header {
  margin-left: 90px !important;
  width: calc(100% - 90px) !important;
}
.page-wrapper .page-body-wrapper .page-body,
.page-wrapper .page-body-wrapper footer.footer,
.page-wrapper .page-header {
  transition: margin-left .3s ease, width .3s ease;
}

/* ------------------------- Fondo y tarjetas (claro) ------------------------- */
body { background-color: var(--xn-s50) !important; }
.card { border: 1px solid var(--xn-s200) !important; border-radius: .5rem !important; }
.card-header { border-bottom: 1px solid var(--xn-s200) !important; }

/* ===================================================================
   MODO OSCURO — slate suave (no negro), tarjetas visibles
   =================================================================== */
body.dark-only { background-color: var(--xn-s900) !important; color: var(--xn-s200) !important; }
body.dark-only .page-body,
body.dark-only .page-body-wrapper { background-color: var(--xn-s900) !important; }

body.dark-only .card,
body.dark-only .card-header,
body.dark-only .card-body,
body.dark-only .card-footer,
body.dark-only .page-wrapper .page-body-wrapper .page-body .card,
body.dark-only .page-wrapper .page-body-wrapper .page-body .card:not(.email-body),
body.dark-only .page-wrapper .page-body-wrapper .page-body .card .card-header,
body.dark-only .page-wrapper .page-body-wrapper .page-body .card .card-footer {
  background-color: var(--xn-s800) !important;
  color: var(--xn-s200) !important;
  border-color: var(--xn-s700) !important;
}
body.dark-only .page-wrapper .page-body-wrapper div.sidebar-wrapper { background-color: var(--xn-marino-hondo) !important; }
body.dark-only .page-header .header-wrapper { background-color: var(--xn-s800) !important; }
body.dark-only .page-header { background-color: var(--xn-s800) !important; }

body.dark-only h1, body.dark-only h2, body.dark-only h3,
body.dark-only h4, body.dark-only h5, body.dark-only h6,
body.dark-only .page-title h3 { color: var(--xn-s100) !important; }

body.dark-only .table,
body.dark-only .table td,
body.dark-only .table th { color: var(--xn-s200) !important; border-color: var(--xn-s700) !important; }
body.dark-only .table thead th { background-color: var(--xn-s300) !important; color: var(--xn-marino-hondo) !important; }

body.dark-only .form-control,
body.dark-only .form-select {
  background-color: var(--xn-s900) !important;
  color: var(--xn-s100) !important;
  border-color: var(--xn-s700) !important;
}
body.dark-only .form-control::placeholder { color: var(--xn-s500) !important; }

body.dark-only .btn-outline-primary,
body.dark-only .btn-outline-primary-2x { color: var(--xn-s200) !important; border-color: var(--xn-s600) !important; }
body.dark-only a { color: var(--xn-s300); }
body.dark-only .text-muted, body.dark-only .f-light { color: var(--xn-s400) !important; }