/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Medigo · base visual única del panel
   Se carga al final (después de xonia-theme.css). Diseñado primero para el modo claro —el de las apps— y derivado al
   modo oscuro con los mismos componentes y otra paleta. Colores de marca: marino #2A3C58 · turquesa #51BFD1 · naranja #E5631A.
   Regla de color: marino = estructura y acción principal · turquesa = acento/selección · naranja = atención.
   Las etiquetas de estado usan fondo suave + texto del mismo tono oscuro (como en las apps), nunca blanco sobre color.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --mg-marino: #2A3C58;  --mg-marino-2: #1F2D44;  --mg-turq: #51BFD1;  --mg-turq-2: #2E93A6;  --mg-naranja: #E5631A;
  --mg-fondo: #E9EEF4;   --mg-sup: #FFFFFF;       --mg-sup-2: #F4F7FA; --mg-borde: #D5DDE7;   --mg-borde-2: #E4EAF1;
  --mg-texto: #1B2A41;   --mg-texto-2: #4A5B73;   --mg-texto-3: #6B7A90;
  --mg-ok: #15803D;      --mg-ok-bg: #DDF5E6;     --mg-aviso: #B45309; --mg-aviso-bg: #FDEFD3;
  --mg-mal: #B91C1C;     --mg-mal-bg: #FCE1E1;    --mg-info: #1F6F80;  --mg-info-bg: #D9F1F5;
  --mg-neutro: #44546B;  --mg-neutro-bg: #E4EAF1;
  --mg-radio: 12px;      --mg-sombra: 0 1px 2px rgba(27,42,65,.06), 0 4px 14px rgba(27,42,65,.06);
  --theme-deafult: #2A3C58; --theme-secondary: #51BFD1;
}
body.dark-only {
  --mg-fondo: #0E1726;   --mg-sup: #18243A;       --mg-sup-2: #1F2E48; --mg-borde: #2D3F5C;   --mg-borde-2: #26364F;
  --mg-texto: #EEF3F9;   --mg-texto-2: #C3CFDF;   --mg-texto-3: #94A5BC;
  --mg-ok: #6EE7A0;      --mg-ok-bg: #123524;     --mg-aviso: #FBC56A; --mg-aviso-bg: #3A2A0E;
  --mg-mal: #FCA5A5;     --mg-mal-bg: #3D1717;    --mg-info: #8EDDEA;  --mg-info-bg: #123540;
  --mg-neutro: #C3CFDF;  --mg-neutro-bg: #26364F;
  --mg-sombra: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.25);
}

/* ── Lienzo y tipografía ── */
body, body.dark-only { background: var(--mg-fondo) !important; color: var(--mg-texto) !important; font-size: 13.5px; }
.page-wrapper .page-body-wrapper, .page-wrapper .page-body-wrapper .page-body,
body.dark-only .page-body, body.dark-only .page-body-wrapper { background: var(--mg-fondo) !important; }
p, span, label, li, td, th, div { letter-spacing: 0 !important; }
h1, h2, h3, h4, h5, h6, .page-title h3,
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(--mg-texto) !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.page-title h3 { font-size: 19px !important; text-transform: none !important; }
.text-muted, .f-light, small, body.dark-only .text-muted, body.dark-only .f-light { color: var(--mg-texto-3) !important; }
a, body.dark-only a { color: var(--mg-turq-2); }
body.dark-only a { color: var(--mg-turq); }
.page-title .breadcrumb, .breadcrumb { background: transparent !important; }
.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active { color: var(--mg-texto-3) !important; font-size: 12.5px !important; }
.breadcrumb-item.active { color: var(--mg-texto-2) !important; font-weight: 600; }

/* ── Cabecera superior ── */
.page-header, .page-header .header-wrapper, body.dark-only .page-header, body.dark-only .page-header .header-wrapper {
  background: var(--mg-sup) !important; box-shadow: 0 1px 0 var(--mg-borde-2) !important; }
.page-header .header-wrapper svg, .page-header .header-wrapper i { color: var(--mg-texto-2) !important; stroke: var(--mg-texto-2); }

/* ── Tarjetas ── */
.card, .page-wrapper .page-body-wrapper .page-body .card,
body.dark-only .card, 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) {
  background: var(--mg-sup) !important; border: 1px solid var(--mg-borde-2) !important; border-radius: var(--mg-radio) !important;
  box-shadow: var(--mg-sombra) !important; color: var(--mg-texto) !important; margin-bottom: 18px !important; }
.card .card-header, .card .card-footer, .card .card-body,
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 .card-header,
body.dark-only .page-wrapper .page-body-wrapper .page-body .card .card-footer {
  background: transparent !important; color: var(--mg-texto) !important; border-color: var(--mg-borde-2) !important; }
.card .card-header { padding: 16px 20px !important; border-bottom: 1px solid var(--mg-borde-2) !important; }
.card .card-header h4, .card .card-header h5, .card .card-header h6 { font-size: 14.5px !important; margin: 0 !important; }
.card .card-body { padding: 20px !important; }
hr, .border-bottom, .border-bottom-dark, .border-top { border-color: var(--mg-borde-2) !important; opacity: 1 !important; }
.border-bottom-dark { border-bottom-width: 1px !important; }

/* ── Tablas ── */
.table-responsive { border: 1px solid var(--mg-borde-2); border-radius: 10px; background: var(--mg-sup); }
.table, body.dark-only .table { width: 100% !important; margin: 0 !important; color: var(--mg-texto) !important; border-color: var(--mg-borde-2) !important; }
.table thead th, .table > thead > tr > th, body.dark-only .table thead th {
  background: var(--mg-sup-2) !important; color: var(--mg-texto-2) !important; font-size: 11.5px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .03em !important; padding: 11px 14px !important; white-space: nowrap;
  border-bottom: 1px solid var(--mg-borde) !important; border-top: 0 !important; vertical-align: middle !important; }
.table tbody td, .table > tbody > tr > td, .table tbody th, body.dark-only .table td, body.dark-only .table th {
  padding: 11px 14px !important; vertical-align: middle !important; color: var(--mg-texto) !important; font-size: 13px !important;
  border-color: var(--mg-borde-2) !important; background: transparent !important; }
.table tbody tr:hover > td { background: var(--mg-sup-2) !important; }
.table tbody tr:last-child > td { border-bottom: 0 !important; }
.table td .btn, .table td .badge { white-space: nowrap; }
.table td:last-child { white-space: nowrap; }

/* ── Etiquetas de estado: fondo suave + texto del mismo tono ── */
.badge { font-weight: 700 !important; font-size: 11.5px !important; padding: 5px 10px !important; border-radius: 20px !important; letter-spacing: 0 !important; line-height: 1.2 !important; }
.badge-success, .badge.bg-success, .badge-light-success { background: var(--mg-ok-bg) !important; color: var(--mg-ok) !important; }
.badge-danger, .badge.bg-danger, .badge-light-danger { background: var(--mg-mal-bg) !important; color: var(--mg-mal) !important; }
.badge-warning, .badge.bg-warning, .badge-light-warning { background: var(--mg-aviso-bg) !important; color: var(--mg-aviso) !important; }
.badge-info, .badge.bg-info, .badge-light-info, .badge-primary, .badge.bg-primary, .badge-light-primary { background: var(--mg-info-bg) !important; color: var(--mg-info) !important; }
.badge-secondary, .badge.bg-secondary, .badge-light, .badge-dark, .badge-light-secondary { background: var(--mg-neutro-bg) !important; color: var(--mg-neutro) !important; }

/* ── Botones ── */
.btn { border-radius: 9px !important; font-weight: 600 !important; font-size: 13px !important; padding: 8px 16px !important; letter-spacing: 0 !important;
  box-shadow: none !important; line-height: 1.35 !important; text-transform: none !important; }
.btn-sm, .btn-xs { padding: 5px 11px !important; font-size: 12.5px !important; border-radius: 8px !important; }
.btn-primary, .btn-primary:focus { background: var(--mg-marino) !important; border-color: var(--mg-marino) !important; color: #fff !important; }
.btn-primary:hover { background: var(--mg-marino-2) !important; border-color: var(--mg-marino-2) !important; }
body.dark-only .btn-primary, body.dark-only .btn-primary:focus { background: var(--mg-turq) !important; border-color: var(--mg-turq) !important; color: #0E1726 !important; }
.btn-secondary, .btn-secondary:focus { background: var(--mg-sup) !important; border: 1px solid var(--mg-borde) !important; color: var(--mg-texto) !important; }
.btn-secondary:hover { background: var(--mg-sup-2) !important; }
.btn-success { background: var(--mg-ok-bg) !important; border-color: transparent !important; color: var(--mg-ok) !important; }
.btn-danger { background: var(--mg-mal-bg) !important; border-color: transparent !important; color: var(--mg-mal) !important; }
.btn-warning { background: var(--mg-aviso-bg) !important; border-color: transparent !important; color: var(--mg-aviso) !important; }
.btn-info { background: var(--mg-info-bg) !important; border-color: transparent !important; color: var(--mg-info) !important; }
.btn-light { background: var(--mg-sup-2) !important; border: 1px solid var(--mg-borde-2) !important; color: var(--mg-texto) !important; }
.btn-outline-primary, .btn-outline-primary-2x, body.dark-only .btn-outline-primary, body.dark-only .btn-outline-primary-2x {
  background: transparent !important; border: 1px solid var(--mg-turq-2) !important; color: var(--mg-turq-2) !important; }
body.dark-only .btn-outline-primary, body.dark-only .btn-outline-primary-2x { border-color: var(--mg-turq) !important; color: var(--mg-turq) !important; }
.btn-outline-danger { background: transparent !important; border: 1px solid var(--mg-mal) !important; color: var(--mg-mal) !important; }
.btn-outline-secondary { background: transparent !important; border: 1px solid var(--mg-borde) !important; color: var(--mg-texto-2) !important; }
.btn:hover { filter: brightness(.97); }
.btn-air-primary, .btn-air-secondary { box-shadow: none !important; }

/* ── Formularios ── */
label, .col-form-label, .form-label, body.dark-only label { color: var(--mg-texto-2) !important; font-weight: 600 !important; font-size: 12.5px !important; margin-bottom: 5px !important; padding: 0 !important; }
.form-control, .form-select, select.form-control, textarea.form-control, .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple, body.dark-only .form-control, body.dark-only .form-select {
  background: var(--mg-sup) !important; border: 1px solid var(--mg-borde) !important; border-radius: 9px !important; color: var(--mg-texto) !important;
  font-size: 13.5px !important; min-height: 40px !important; box-shadow: none !important; }
.form-control, .form-select { padding: 8px 12px !important; }
.form-control:focus, .form-select:focus { border-color: var(--mg-turq-2) !important; box-shadow: 0 0 0 3px rgba(81,191,209,.25) !important; }
.form-control::placeholder, body.dark-only .form-control::placeholder { color: var(--mg-texto-3) !important; opacity: .8; }
.form-control:disabled, .form-control[readonly] { background: var(--mg-sup-2) !important; color: var(--mg-texto-2) !important; }
select:not(.form-control):not(.form-select) { background: var(--mg-sup); color: var(--mg-texto); border: 1px solid var(--mg-borde); border-radius: 9px; min-height: 40px; padding: 6px 10px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--mg-texto) !important; line-height: 38px !important; padding-left: 12px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-dropdown { background: var(--mg-sup) !important; border-color: var(--mg-borde) !important; color: var(--mg-texto) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--mg-turq-2) !important; color: #fff !important; }
.select2-search--dropdown .select2-search__field { background: var(--mg-sup) !important; color: var(--mg-texto) !important; border-color: var(--mg-borde) !important; }
.input-group-text { background: var(--mg-sup-2) !important; border-color: var(--mg-borde) !important; color: var(--mg-texto-2) !important; }
.form-group, .mb-3 { margin-bottom: 14px !important; }

/* ── Pestañas ── */
.nav-tabs { border-bottom: 1px solid var(--mg-borde) !important; }
.nav-tabs .nav-link, .nav-pills .nav-link { color: var(--mg-texto-2) !important; font-weight: 600 !important; border: 0 !important; border-radius: 0 !important; padding: 9px 14px !important; background: transparent !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: var(--mg-turq-2) !important; box-shadow: inset 0 -2px 0 var(--mg-turq-2) !important; }
body.dark-only .nav-tabs .nav-link.active, body.dark-only .nav-tabs .nav-link:hover { color: var(--mg-turq) !important; box-shadow: inset 0 -2px 0 var(--mg-turq) !important; }
.nav-pills .nav-link { border-radius: 20px !important; }
.nav-pills .nav-link.active { background: var(--mg-marino) !important; color: #fff !important; }

/* ── Avisos, modales, menús ── */
.alert { border: 0 !important; border-radius: 10px !important; border-left: 4px solid transparent !important; padding: 10px 14px !important; font-size: 13px !important; }
.alert-info, .alert-primary { background: var(--mg-info-bg) !important; color: var(--mg-info) !important; border-left-color: var(--mg-turq-2) !important; }
.alert-success { background: var(--mg-ok-bg) !important; color: var(--mg-ok) !important; border-left-color: var(--mg-ok) !important; }
.alert-danger { background: var(--mg-mal-bg) !important; color: var(--mg-mal) !important; border-left-color: var(--mg-mal) !important; }
.alert-warning { background: var(--mg-aviso-bg) !important; color: var(--mg-aviso) !important; border-left-color: var(--mg-naranja) !important; }
.alert b, .alert strong { color: inherit !important; }
.modal-content, .dropdown-menu, .offcanvas { background: var(--mg-sup) !important; color: var(--mg-texto) !important; border: 1px solid var(--mg-borde-2) !important; border-radius: var(--mg-radio) !important; box-shadow: var(--mg-sombra) !important; }
.modal-header, .modal-footer { border-color: var(--mg-borde-2) !important; }
.modal-title { color: var(--mg-texto) !important; font-size: 16px !important; }
.dropdown-item { color: var(--mg-texto) !important; }
.dropdown-item:hover { background: var(--mg-sup-2) !important; }
.bg-white, .bg-light { background: var(--mg-sup) !important; color: var(--mg-texto) !important; }
.text-dark, .text-black { color: var(--mg-texto) !important; }
.text-white-on-color { color: #fff !important; }
.list-group-item { background: var(--mg-sup) !important; color: var(--mg-texto) !important; border-color: var(--mg-borde-2) !important; }

/* ── Menú lateral (marino en ambos modos) ── */
.page-wrapper .page-body-wrapper div.sidebar-wrapper, body.dark-only .page-wrapper .page-body-wrapper div.sidebar-wrapper { background: var(--mg-marino-2) !important; }
.sidebar-wrapper .sidebar-link, .sidebar-wrapper .link-nav { border-radius: 9px !important; margin: 1px 10px !important; }
.sidebar-wrapper .sidebar-link span, .sidebar-wrapper .link-nav span, .sidebar-wrapper .sidebar-title { color: #D6DEE9 !important; }
.sidebar-wrapper .sidebar-link svg, .sidebar-wrapper .link-nav svg { color: var(--mg-turq) !important; stroke: var(--mg-turq) !important; }
.sidebar-wrapper .sidebar-link.active, .sidebar-wrapper .sidebar-link:hover, .sidebar-wrapper .link-nav.active, .sidebar-wrapper .link-nav:hover { background: rgba(81,191,209,.16) !important; }
.sidebar-wrapper .sidebar-link.active span, .sidebar-wrapper .link-nav.active span { color: #fff !important; font-weight: 600 !important; }
.sidebar-wrapper .sidebar-submenu li a { color: #B9C5D6 !important; }
.sidebar-wrapper .sidebar-submenu li a:hover, .sidebar-wrapper .sidebar-submenu li a.active { color: var(--mg-turq) !important; }

/* ── Paginador y pie ── */
.pagination .page-link { background: var(--mg-sup) !important; border-color: var(--mg-borde) !important; color: var(--mg-texto-2) !important; border-radius: 8px !important; margin: 0 2px; font-size: 12.5px; }
.pagination .page-item.active .page-link { background: var(--mg-marino) !important; border-color: var(--mg-marino) !important; color: #fff !important; }
.footer, body.dark-only .footer { background: transparent !important; box-shadow: none !important; color: var(--mg-texto-3) !important; }
.footer p { color: var(--mg-texto-3) !important; }

/* ── Personalizador del tema de fábrica: no forma parte del producto ── */
.customizer-links, .customizer-contain { display: none !important; }

/* ── Tablas de listado del panel (63 pantallas usan table.display#basic-1; más las propias de seguros, reparto, negocio…) ── */
table.display, table.seg-t, table.rp-t, table.ng-t, table.um-t { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; color: var(--mg-texto) !important; }
table.display thead th, table.seg-t thead th, table.rp-t thead th, table.ng-t thead th, table.um-t thead th,
body.dark-only table.display thead th {
  background: var(--mg-sup-2) !important; color: var(--mg-texto-2) !important; font-size: 11.5px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .03em !important; padding: 11px 14px !important; text-align: left !important;
  border: 0 !important; border-bottom: 1px solid var(--mg-borde) !important; vertical-align: middle !important; line-height: 1.3 !important; }
table.display tbody td, table.seg-t tbody td, table.rp-t tbody td, table.ng-t tbody td, table.um-t tbody td,
body.dark-only table.display tbody td {
  padding: 11px 14px !important; vertical-align: middle !important; color: var(--mg-texto) !important; font-size: 13px !important;
  border: 0 !important; border-bottom: 1px solid var(--mg-borde-2) !important; background: transparent !important; line-height: 1.4 !important; }
table.display tbody tr, body.dark-only table.display tbody tr { background: transparent !important; }
table.display tbody tr:hover > td, table.seg-t tbody tr:hover > td, table.rp-t tbody tr:hover > td, table.ng-t tbody tr:hover > td { background: var(--mg-sup-2) !important; }
table.display tbody tr:last-child > td { border-bottom: 0 !important; }
table.display td:last-child, table.display th:last-child { white-space: nowrap; text-align: right !important; }
table.display td:last-child .btn, table.display td:last-child a.btn { margin-left: 4px; }
.table-responsive.theme-scrollbar { overflow-x: auto; }
/* Imágenes en miniatura dentro de listas: discretas y uniformes */
table.display td img, .table td img { width: 34px !important; height: 34px !important; border-radius: 8px !important; object-fit: cover; }
/* Las dos primeras columnas (N.º y fecha) no se parten en varias líneas */
table.display td:nth-child(-n+2), table.display th:nth-child(-n+2) { white-space: nowrap; }
table.display td { max-width: 260px; }

/* ── Estados pintados como «botón» (span.btn-xxx sin .btn): pasan a etiqueta suave, igual que en las apps ── */
span.btn-secondary:not(.btn), span.btn-warning:not(.btn), span.btn-success:not(.btn), span.btn-danger:not(.btn),
span.btn-info:not(.btn), span.btn-primary:not(.btn), span.btn-light:not(.btn), span.btn-dark:not(.btn) {
  display: inline-block !important; border: 0 !important; border-radius: 20px !important; padding: 4px 11px !important;
  font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.25 !important; white-space: nowrap; box-shadow: none !important; }
span.btn-secondary:not(.btn), span.btn-warning:not(.btn) { background: var(--mg-aviso-bg) !important; color: var(--mg-aviso) !important; }   /* pendiente */
span.btn-success:not(.btn) { background: var(--mg-ok-bg) !important; color: var(--mg-ok) !important; }
span.btn-danger:not(.btn) { background: var(--mg-mal-bg) !important; color: var(--mg-mal) !important; }
span.btn-info:not(.btn), span.btn-primary:not(.btn) { background: var(--mg-info-bg) !important; color: var(--mg-info) !important; }
span.btn-light:not(.btn), span.btn-dark:not(.btn) { background: var(--mg-neutro-bg) !important; color: var(--mg-neutro) !important; }
/* Acciones de fila escritas como enlace (a.btn-primary sin .btn) */
a.btn-primary:not(.btn), a.dropbtn.btn-primary, button.dropbtn {
  display: inline-block !important; background: transparent !important; border: 1px solid var(--mg-turq-2) !important; color: var(--mg-turq-2) !important;
  border-radius: 8px !important; padding: 4px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; text-decoration: none !important; }
a.btn-primary:not(.btn):hover, a.dropbtn.btn-primary:hover { background: var(--mg-info-bg) !important; }
body.dark-only a.btn-primary:not(.btn), body.dark-only a.dropbtn.btn-primary { border-color: var(--mg-turq) !important; color: var(--mg-turq) !important; }
a.btn-danger:not(.btn) { display: inline-block !important; background: transparent !important; border: 1px solid var(--mg-mal) !important; color: var(--mg-mal) !important; border-radius: 8px !important; padding: 4px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; }
a.btn-success:not(.btn) { display: inline-block !important; background: var(--mg-ok-bg) !important; border: 0 !important; color: var(--mg-ok) !important; border-radius: 8px !important; padding: 5px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; }

/* ── Detalles (cita, pedido, laboratorio): sin imágenes decorativas; manda la información ──
   Se ocultan las ilustraciones, fotos de producto y marcadores de posición. Se conservan las miniaturas enlazadas
   (recetas, adjuntos) porque abren el archivo. */
.page-body .card img.b-r-5[height], .page-body .card img.b-r-10[height], .page-body .card img.b-r-25[height],
.page-body .card img[width="250"][height="250"], .page-body .card img[src*="default_pic"], .page-body .card img[src*="dashboard/default"],
.page-body .card img[src*="images/profile.png"] { display: none !important; }
.page-body .card a > img.b-r-5[height], .page-body .card a > img.b-r-10[height] { display: inline-block !important; width: 84px !important; height: 84px !important; object-fit: cover; border: 1px solid var(--mg-borde); border-radius: 10px !important; }

/* ── Detalle de la cita / registro de atención (estilos propios de la vista, que fijaban blanco) ── */
body .page-body .checklist-item-box, body .page-body .disabled .checklist-item-box {
  background: var(--mg-sup-2) !important; border: 1px solid var(--mg-borde) !important; box-shadow: none !important; border-radius: 10px !important; }
body .page-body .checklist-item-box:hover { border-color: var(--mg-turq-2) !important; transform: none !important; }
body .page-body .checklist-item-title { color: var(--mg-texto) !important; font-size: 13px !important; }
body .page-body .checklist-item-desc { color: var(--mg-texto-3) !important; font-size: 11.5px !important; }
body .page-body .status-check-icon, body .page-body .action-plus-icon { color: var(--mg-turq-2) !important; }
body .page-body .premium-stepper-container { background: var(--mg-sup-2) !important; border: 1px solid var(--mg-borde-2) !important; border-radius: 12px !important; padding: 18px 16px !important; }
body .page-body .step-circle { background: var(--mg-sup) !important; border-color: var(--mg-borde) !important; color: var(--mg-texto-3) !important; box-shadow: none !important; width: 38px !important; height: 38px !important; font-size: 14px !important; }
body .page-body .stepper-step.active .step-circle { background: var(--mg-marino) !important; border-color: var(--mg-turq) !important; color: #fff !important; }
body .page-body .stepper-step.completed .step-circle { background: var(--mg-turq-2) !important; border-color: var(--mg-turq-2) !important; color: #fff !important; }
body .page-body .stepper-step.cancelled .step-circle { background: var(--mg-mal-bg) !important; border-color: var(--mg-mal) !important; color: var(--mg-mal) !important; }
body .page-body .step-label { color: var(--mg-texto-3) !important; font-size: 12px !important; }
body .page-body .stepper-step.active .step-label, body .page-body .stepper-step.completed .step-label { color: var(--mg-texto) !important; font-weight: 700 !important; }
body .page-body .stepper-progress-bar { background: var(--mg-borde) !important; }
body .page-body .stepper-progress-fill { background: var(--mg-turq-2) !important; }
body .page-body .dafm { background: var(--mg-sup-2) !important; border-color: var(--mg-borde) !important; box-shadow: none !important; }
body .page-body .digital-card-btn-premium { background: var(--mg-marino) !important; color: #fff !important; box-shadow: none !important; border-radius: 9px !important; }
body .page-body .premium-select { background: var(--mg-sup) !important; color: var(--mg-texto) !important; border-color: var(--mg-borde) !important; }
body .page-body .active-action-panel { background: var(--mg-info-bg) !important; border-color: var(--mg-turq-2) !important; }
body .page-body .action-panel-title { color: var(--mg-texto) !important; }
body .page-body .action-panel-desc { color: var(--mg-texto-2) !important; }
/* Bloques de datos «Etiqueta : valor» de los detalles */
.page-body .card .f-w-500, .page-body .card .f-16, .page-body .card .f-14 { color: var(--mg-texto) !important; }
.page-body .card h6 { font-size: 13.5px !important; }
.timeline-content p, .timeline-content span { color: var(--mg-texto-2) !important; }
body .page-body .digital-card-btn-premium, body .page-body .digital-card-btn-premium * { color: #fff !important; }
body .page-body .digital-card-btn-premium .checklist-item-desc { color: #C9D6E6 !important; }

/* ── Sin imágenes de medicamentos / exámenes en listas, tarjetas de producto y formularios de alta ── */
table.display td img, .page-body .table td img, .product-box .product-img, .product-box img, .page-body .card .card-body > .text-center > img,
.page-body form img[src*="uploads/"], .page-body .card img[src*="product"], .page-body .card img[src*="lab_package"], .page-body .card img[src*="medicine"] { display: none !important; }
/* Tarjetas del inicio: sin círculos decorativos */
.page-body .card .bg-gradient, .page-body .widget-1 .f-w-500 svg, .page-body .widget-round { display: none !important; }
.page-body .widget-1 { background-image: none !important; }

/* ── Listas a todo el ancho: datos agrupados en dos líneas (principal + detalle), sin desplazamiento horizontal ── */
.page-body > .container-fluid { max-width: none !important; padding-left: 22px !important; padding-right: 22px !important; }
.mg-sub { display: inline-block; color: var(--mg-texto-3); font-size: 12px; line-height: 1.35; }
.mg-nw { white-space: nowrap; }
td.mg-ancha { min-width: 220px; max-width: 360px !important; white-space: normal !important; }
td.mg-pila a.badge { display: block; width: fit-content; margin: 2px 0; }
table.display td b { font-weight: 600; color: var(--mg-texto); }
table.display td { max-width: none; }
table.display td small { font-size: 12px; color: var(--mg-texto-3); }
table.display td .select2-container { min-width: 150px; }
/* Acciones de fila: apiladas y del mismo ancho, para que la tabla quepa sin desplazamiento */
table.display td:last-child a.dropbtn { display: block !important; width: 112px; margin: 3px 0 3px auto !important; text-align: center; padding: 4px 8px !important; background: transparent !important;
  border: 1px solid var(--mg-turq-2) !important; color: var(--mg-turq-2) !important; border-radius: 8px !important; font-size: 12.5px !important; font-weight: 600 !important; }
table.display td:last-child a.dropbtn[onclick*="ancel"], table.display td:last-child a.dropbtn[style*="E1222C"], table.display td:last-child a.dropbtn[style*="e1222c"],
table.display td:last-child a.dropbtn[style*="dc3545"] { border-color: var(--mg-mal) !important; color: var(--mg-mal) !important; }
body.dark-only table.display td:last-child a.dropbtn { border-color: var(--mg-turq) !important; color: var(--mg-turq) !important; }
/* Ajuste fino de densidad en listas: caben completas en el ancho disponible */
table.display thead th, body.dark-only table.display thead th { padding: 10px 9px !important; white-space: normal !important; }
table.display tbody td, body.dark-only table.display tbody td { padding: 10px 9px !important; }
td.mg-ancha { min-width: 170px; }
table.display td:last-child a.dropbtn { width: 86px; padding: 3px 4px !important; font-size: 12px !important; }
.page-body > .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
.card .card-body:has(> .table-responsive) { padding: 14px !important; }

/* ════════ Ronda 2: acentos, botones redondeados, rol en la cabecera, menú plegable, tarjetas del inicio ════════ */
:root { --mg-verde: #1E9E5A; }
/* Botones redondeados (píldora); en listas y grillas quedan cuadrados suaves */
.btn, .btn.btn-square, .btn.b-r-10, .btn.b-r-5 { border-radius: 24px !important; padding: 8px 20px !important; }
.btn-sm, .btn-xs { border-radius: 20px !important; padding: 5px 14px !important; }
table .btn, .table .btn, table.display .btn, .input-group .btn { border-radius: 8px !important; padding: 5px 11px !important; }
/* Acentos: naranja para la acción que crea/guarda, verde para confirmar */
.btn.add_detail_btn, .btn.btn-air-primary, button[type=submit].btn-primary, body.dark-only .btn.add_detail_btn, body.dark-only button[type=submit].btn-primary {
  background: var(--mg-naranja) !important; border-color: var(--mg-naranja) !important; color: #fff !important; }
.btn.add_detail_btn:hover, button[type=submit].btn-primary:hover { background: #CC5512 !important; border-color: #CC5512 !important; }
.btn-success, .btn-success:focus { background: var(--mg-verde) !important; border-color: var(--mg-verde) !important; color: #fff !important; }
.btn-warning, .btn-warning:focus { background: var(--mg-naranja) !important; border-color: var(--mg-naranja) !important; color: #fff !important; }
.btn-info, .btn-info:focus { background: var(--mg-turq-2) !important; border-color: var(--mg-turq-2) !important; color: #fff !important; }
.btn-danger, .btn-danger:focus { background: #D63B3B !important; border-color: #D63B3B !important; color: #fff !important; }
/* Etiquetas un punto más vivas en claro */
:root { --mg-ok-bg: #CFF1DD; --mg-aviso-bg: #FCE3C4; --mg-aviso: #A84A0A; --mg-info-bg: #CDEDF2; --mg-mal-bg: #FAD4D4; }
body.dark-only { --mg-ok-bg: #123524; --mg-aviso-bg: #3A2A0E; --mg-aviso: #FBC56A; --mg-info-bg: #123540; --mg-mal-bg: #3D1717; }
.switch input:checked + .switch-state { background-color: var(--mg-verde) !important; }

/* Rol de la sesión en la barra superior */
.mg-rol { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding-left: 6px; font-size: 13.5px; color: var(--mg-texto-2); }
.mg-rol b { color: var(--mg-texto); font-weight: 700; }
.mg-rol-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--mg-naranja); box-shadow: 0 0 0 4px rgba(229,99,26,.18); }

/* Menú lateral: iconos de línea con los colores de la app, sin recuadros de color */
.sidebar-wrapper .sidebar-link svg, .sidebar-wrapper .link-nav svg, .sidebar-wrapper .sidebar-link i, .sidebar-wrapper .link-nav i {
  fill: none !important; background: transparent !important; box-shadow: none !important; stroke-width: 1.8 !important; width: 19px !important; height: 19px !important; }
.sidebar-wrapper .sidebar-link:hover svg, .sidebar-wrapper .sidebar-link.active svg, .sidebar-wrapper .link-nav:hover svg, .sidebar-wrapper .link-nav.active svg {
  stroke: var(--mg-naranja) !important; color: var(--mg-naranja) !important; }
.sidebar-wrapper .sidebar-link::before, .sidebar-wrapper .sidebar-link::after, .sidebar-wrapper .link-nav::before { display: none !important; }
.sidebar-wrapper .sidebar-link.active, .sidebar-wrapper .link-nav.active { box-shadow: inset 3px 0 0 var(--mg-naranja) !important; }
.sidebar-wrapper .toggle-sidebar, .sidebar-wrapper .back-btn { background: rgba(255,255,255,.10) !important; border-radius: 9px !important; cursor: pointer; }
.sidebar-wrapper .toggle-sidebar svg, .sidebar-wrapper .toggle-sidebar i { color: #fff !important; stroke: #fff !important; }

/* Menú plegado: solo iconos, 76 px; el contenido ocupa el resto. Al pasar el cursor se despliega encima sin mover la página */
.sidebar-wrapper { transition: width .22s ease !important; }
.sidebar-wrapper.close_icon { width: 76px !important; overflow: hidden !important; }
.sidebar-wrapper.close_icon .sidebar-link span, .sidebar-wrapper.close_icon .link-nav span, .sidebar-wrapper.close_icon .sidebar-submenu,
.sidebar-wrapper.close_icon .according-menu, .sidebar-wrapper.close_icon .logo-wrapper img, .sidebar-wrapper.close_icon .logo-wrapper > a,
.sidebar-wrapper.close_icon .sidebar-main-title, .sidebar-wrapper.close_icon .logo-icon-wrapper { display: none !important; }
.sidebar-wrapper.close_icon .sidebar-link, .sidebar-wrapper.close_icon .link-nav { justify-content: center !important; margin: 2px 12px !important; padding: 11px 0 !important; text-align: center !important; }
.sidebar-wrapper.close_icon .sidebar-link svg, .sidebar-wrapper.close_icon .link-nav svg { margin: 0 !important; float: none !important; }
.sidebar-wrapper.close_icon .logo-wrapper { justify-content: center !important; padding: 18px 0 !important; text-align: center !important; }
.sidebar-wrapper.close_icon .toggle-sidebar { position: static !important; margin: 0 auto !important; }
.sidebar-wrapper.close_icon:hover { width: 255px !important; box-shadow: 8px 0 28px rgba(0,0,0,.28) !important; z-index: 20 !important; }
.sidebar-wrapper.close_icon:hover .sidebar-link span, .sidebar-wrapper.close_icon:hover .link-nav span { display: inline !important; }
.sidebar-wrapper.close_icon:hover .according-menu { display: block !important; }
.sidebar-wrapper.close_icon:hover .sidebar-link, .sidebar-wrapper.close_icon:hover .link-nav { justify-content: flex-start !important; padding: 11px 14px !important; text-align: left !important; }
.sidebar-wrapper.close_icon:hover .sidebar-link svg, .sidebar-wrapper.close_icon:hover .link-nav svg { margin-right: 10px !important; }
.sidebar-wrapper.close_icon:hover .logo-wrapper img, .sidebar-wrapper.close_icon:hover .logo-wrapper > a { display: inline-block !important; }
.page-wrapper.sidebar-collapsed .page-body-wrapper .page-body, .page-wrapper.sidebar-collapsed .page-body-wrapper footer.footer, .page-wrapper.sidebar-collapsed .page-header {
  margin-left: 76px !important; width: calc(100% - 76px) !important; }

/* Tarjetas del inicio: indicador limpio con acento de color, sin adornos */
.dashboard-2 a.card { display: block; text-decoration: none !important; border-left: 4px solid var(--mg-turq-2) !important; margin-bottom: 14px !important; min-height: 0 !important; }
.dashboard-2 .row > div:nth-child(2) a.card { border-left-color: var(--mg-naranja) !important; }
.dashboard-2 .row > div:nth-child(3) a.card { border-left-color: var(--mg-marino) !important; }
.dashboard-2 .row > div:nth-child(4) a.card { border-left-color: var(--mg-verde) !important; }
.dashboard-2 .row > div:nth-child(5) a.card { border-left-color: #7C5CD6 !important; }
.dashboard-2 .row > div:nth-child(6) a.card { border-left-color: #D63B3B !important; }
.dashboard-2 a.card .card-header { border: 0 !important; padding: 16px 18px !important; }
.dashboard-2 a.card .card-body, .dashboard-2 a.card .right-side, .dashboard-2 a.card .shap-block, .dashboard-2 a.card p .fa { display: none !important; }
.dashboard-2 a.card p, .dashboard-2 a.card p.square-after { color: var(--mg-texto-2) !important; background: transparent !important; font-size: 12.5px !important; font-weight: 600 !important; margin: 0 0 6px !important; padding: 0 !important; text-transform: none !important; }
.dashboard-2 a.card p::after, .dashboard-2 a.card p::before { display: none !important; }
.dashboard-2 a.card h4 { font-size: 28px !important; line-height: 1.1 !important; color: var(--mg-texto) !important; }
.dashboard-2 a.card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(27,42,65,.12) !important; }
/* Login */
.login-card { background: var(--mg-fondo) !important; }
.login-card .login-main { border-radius: 16px !important; box-shadow: var(--mg-sombra) !important; border-top: 4px solid var(--mg-turq) !important; }
.login-card .login-main .theme-form p { color: var(--mg-texto-3) !important; font-size: 12.5px !important; }
/* Botón de plegar/desplegar siempre visible */
.sidebar-wrapper .logo-wrapper { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.sidebar-wrapper .toggle-sidebar { display: flex !important; align-items: center; justify-content: center; width: 34px !important; height: 34px !important; position: static !important; }
.sidebar-wrapper.close_icon .logo-wrapper { display: flex !important; justify-content: center !important; }
.sidebar-wrapper.close_icon .toggle-sidebar { display: flex !important; }
.sidebar-wrapper.close_icon:hover .logo-wrapper { justify-content: space-between !important; padding: 18px 16px !important; }
.sidebar-wrapper .back-btn { display: none !important; }
/* Acento de color de las tarjetas del inicio (borde izquierdo firme) */
.dashboard-2 a.card { border-left-width: 5px !important; border-left-style: solid !important; }
/* Plegado: botón de despliegue propio (icono de cuadrícula) siempre a la vista */
.page-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-icon-wrapper { display: flex !important; justify-content: center !important; padding: 18px 0 10px !important; text-align: center !important; }
.page-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-icon-wrapper .icon-box-sidebar { display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.12); cursor: pointer; }
.page-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-icon-wrapper svg { stroke: #fff !important; color: #fff !important; width: 18px; height: 18px; }
.page-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-wrapper,
.page-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-wrapper { display: none !important; }

/* Inicio: barra de color a la izquierda de cada indicador (franja propia, no depende del borde) */
.dashboard-2 a.card { position: relative !important; overflow: hidden !important; border-left: 1px solid var(--mg-borde-2) !important; padding-left: 6px !important; }
.dashboard-2 a.card::before { content: "" !important; display: block !important; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--mg-turq-2); border-radius: 12px 0 0 12px; }
.dashboard-2 .row > div:nth-child(6n+1) a.card::before { background: var(--mg-turq-2); }
.dashboard-2 .row > div:nth-child(6n+2) a.card::before { background: var(--mg-naranja); }
.dashboard-2 .row > div:nth-child(6n+3) a.card::before { background: var(--mg-marino); }
.dashboard-2 .row > div:nth-child(6n+4) a.card::before { background: var(--mg-verde); }
.dashboard-2 .row > div:nth-child(6n+5) a.card::before { background: #7C5CD6; }
.dashboard-2 .row > div:nth-child(6n+6) a.card::before { background: #D63B3B; }
body.dark-only .dashboard-2 .row > div:nth-child(6n+3) a.card::before { background: var(--mg-turq); }
.dashboard-2 a.card.mg-kpi h4 { font-size: 24px !important; }
.dashboard-2 a.card .mg-sub { display: block; margin-top: 3px; }

/* ════════ Ronda 5: tarjetas y campos de formulario siempre de esquina recta; selección múltiple con casillas ════════ */
:root { --mg-radio: 0px; }
.card, .page-wrapper .page-body-wrapper .page-body .card, body.dark-only .card, .modal-content, .dropdown-menu, .offcanvas, .alert,
.table-responsive, .login-card .login-main, .dashboard-2 a.card, .dashboard-2 a.card::before,
body .page-body .checklist-item-box, body .page-body .premium-stepper-container, .list-group-item { border-radius: 0 !important; }
.form-control, .form-select, select.form-control, textarea.form-control, select:not(.form-control):not(.form-select), .input-group-text,
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .select2-dropdown,
body.dark-only .form-control, body.dark-only .form-select, .mg-pag-top input, .bootstrap-tagsinput, input[type=file].form-control { border-radius: 0 !important; }
/* Casillas de selección múltiple */
select.mg-oculto { position: absolute !important; opacity: 0 !important; pointer-events: none !important; height: 1px !important; width: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
.mg-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 14px; border: 1px solid var(--mg-borde); background: var(--mg-sup); padding: 10px 12px; max-height: 230px; overflow-y: auto; }
.mg-casilla { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 4px 2px !important; cursor: pointer; font-weight: 500 !important; font-size: 13px !important; color: var(--mg-texto) !important; }
.mg-casilla input { width: 16px; height: 16px; margin: 0; accent-color: var(--mg-turq-2); flex: none; }
.mg-casilla:hover { background: var(--mg-sup-2); }

/* ── Formularios por secciones (patrón único de altas y ediciones): título y ayuda a la izquierda, campos a la derecha ── */
.mg-form .mg-sec { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 10px 36px; padding: 24px 0; border-top: 1px solid var(--mg-borde-2); }
.mg-form .mg-sec:first-child { border-top: 0; padding-top: 4px; }
.mg-sec-t h5 { font-size: 14.5px !important; margin: 0 0 4px !important; display: flex; align-items: center; gap: 8px; }
.mg-sec-t h5::before { content: ""; width: 4px; height: 16px; background: var(--mg-turq); flex: none; }
.mg-sec-t p { color: var(--mg-texto-3); font-size: 12.5px; line-height: 1.45; margin: 0; }
.mg-campos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; align-content: start; }
.mg-c-3 { grid-column: span 3; } .mg-c-4 { grid-column: span 4; } .mg-c-6 { grid-column: span 6; } .mg-c-8 { grid-column: span 8; } .mg-c-12 { grid-column: span 12; }
.mg-campo label { display: block; }
.mg-campo label .mg-opc { color: var(--mg-texto-3); font-weight: 500; }
.mg-campo select, .mg-campo .form-control, .mg-campo .form-select { width: 100% !important; min-height: 40px; }
.mg-campo textarea.form-control { min-height: 84px; resize: vertical; }
.mg-campo .mg-ayuda { display: block; color: var(--mg-texto-3); font-size: 12px; margin-top: 4px; }
.mg-tel { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px; }
.mg-marca { display: flex !important; align-items: center; gap: 9px; min-height: 40px; margin: 0 !important; cursor: pointer; color: var(--mg-texto) !important; font-weight: 500 !important; font-size: 13px !important; }
.mg-marca input { width: 16px; height: 16px; margin: 0; accent-color: var(--mg-turq-2); flex: none; }
.mg-mapa { height: 320px; width: 100%; border: 1px solid var(--mg-borde); background: var(--mg-sup-2); }
.mg-nota { border-left: 3px solid var(--mg-turq); background: var(--mg-info-bg); color: var(--mg-info); padding: 10px 14px; font-size: 13px; line-height: 1.45; }
.mg-form-pie { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; padding: 16px 0 2px; border-top: 1px solid var(--mg-borde-2); position: sticky; bottom: 0; background: var(--mg-sup); z-index: 3; }
.mg-form-pie .mg-errores { margin-right: auto; text-align: left; }
.mg-form-pie .mg-errores p { margin: 0 !important; font-size: 13px; font-weight: 600; color: var(--mg-mal) !important; }
.mg-falta, .mg-casillas.mg-falta { border-color: var(--mg-mal) !important; box-shadow: 0 0 0 3px rgba(185,28,28,.12) !important; }
@media (max-width: 1100px) { .mg-form .mg-sec { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .mg-c-3, .mg-c-4, .mg-c-6, .mg-c-8 { grid-column: span 12; } }

/* Menú lateral: los textos se muestran tal como están escritos (el tema de fábrica ponía Mayúscula En Cada Palabra) */
.sidebar-wrapper .sidebar-main .sidebar-links li a, .sidebar-wrapper .sidebar-main .sidebar-links li a span,
.sidebar-wrapper .sidebar-submenu li a { text-transform: none !important; }

/* Pestañas simples del panel */
.mg-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--mg-borde); }
.mg-pestana { border: 0; background: transparent; padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--mg-texto-2); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.mg-pestana span { display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 6px; font-size: 11.5px; background: var(--mg-neutro-bg); color: var(--mg-neutro); border-radius: 20px; }
.mg-pestana:hover { color: var(--mg-texto); }
.mg-pestana.activa { color: var(--mg-marino); border-bottom-color: var(--mg-turq); }
body.dark-only .mg-pestana.activa { color: var(--mg-texto); }

/* ── Inicio de médico, laboratorio y farmacia (views/partials/tablero.ejs) ── */
.mg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.mg-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 15px 22px; background: var(--mg-sup); border: 1px solid var(--mg-borde-2); box-shadow: var(--mg-sombra); position: relative; text-decoration: none !important; }
.mg-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--mg-turq-2); }
.mg-kpi:nth-child(4n+2)::before { background: var(--mg-naranja); }
.mg-kpi:nth-child(4n+3)::before { background: var(--mg-marino); }
.mg-kpi:nth-child(4n+4)::before { background: var(--mg-ok); }
body.dark-only .mg-kpi:nth-child(4n+3)::before { background: var(--mg-turq); }
.mg-kpi:hover { border-color: var(--mg-borde); }
.mg-kpi-t { font-size: 12.5px; font-weight: 600; color: var(--mg-texto-2); }
.mg-kpi-v { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--mg-texto); }
.mg-kpi-s { font-size: 12px; color: var(--mg-texto-3); }
.mg-tablero-fila { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; }
.mg-tablero-fila > .card { margin-bottom: 18px !important; }
.mg-barras { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; height: 220px; }
.mg-barra { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.mg-barra-n { font-size: 12.5px; font-weight: 700; color: var(--mg-texto); }
.mg-barra-c { flex: 1; width: 100%; max-width: 46px; display: flex; align-items: flex-end; background: var(--mg-sup-2); }
.mg-barra-c i { display: block; width: 100%; min-height: 2px; background: var(--mg-turq-2); }
.mg-barra:last-child .mg-barra-c i { background: var(--mg-naranja); }
.mg-barra-e { font-size: 12px; font-weight: 600; color: var(--mg-texto-2); text-align: center; line-height: 1.25; }
.mg-barra-e small { display: block; font-weight: 400; font-size: 11px; }
.mg-estado { display: grid; grid-template-columns: 130px minmax(0, 1fr) 34px; align-items: center; gap: 10px; padding: 7px 0; }
.mg-estado-n { font-size: 13px; color: var(--mg-texto); }
.mg-estado-b { height: 10px; background: var(--mg-sup-2); }
.mg-estado-b i { display: block; height: 100%; min-width: 2px; }
.mg-estado-v { font-size: 13px; font-weight: 700; text-align: right; color: var(--mg-texto); }
.mg-estado-b i.mg-t-ok { background: var(--mg-ok); } .mg-estado-b i.mg-t-aviso { background: var(--mg-naranja); } .mg-estado-b i.mg-t-mal { background: var(--mg-mal); }
.mg-estado-b i.mg-t-info { background: var(--mg-turq-2); } .mg-estado-b i.mg-t-neutro { background: var(--mg-neutro); }
.mg-chip { display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 600; border-radius: 20px; white-space: nowrap; }
.mg-chip.mg-t-ok { background: var(--mg-ok-bg); color: var(--mg-ok); } .mg-chip.mg-t-aviso { background: var(--mg-aviso-bg); color: var(--mg-aviso); }
.mg-chip.mg-t-mal { background: var(--mg-mal-bg); color: var(--mg-mal); } .mg-chip.mg-t-info { background: var(--mg-info-bg); color: var(--mg-info); }
.mg-chip.mg-t-neutro { background: var(--mg-neutro-bg); color: var(--mg-neutro); }
@media (max-width: 1100px) { .mg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mg-tablero-fila { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .mg-kpis { grid-template-columns: minmax(0, 1fr); } }
#toast-container .toast-message, #toast-container .toast-title { text-transform: none !important; }

/* ════════ 2026-10-16 · Cabeceras de grillas en marino con texto blanco (claro y oscuro) y ventanas flotantes con cabecera marino ════════ */
:root { --mg-cab: #2A3C58; --mg-cab-borde: #1F2D44; --mg-cab-texto: #FFFFFF; }
body.dark-only { --mg-cab: #2B4A73; --mg-cab-borde: #3A5B87; --mg-cab-texto: #FFFFFF; }
.page-body table thead th, .page-body table > thead > tr > th, .modal table thead th,
body.dark-only .page-body table thead th, body.dark-only .modal table thead th,
table.display thead th, table.seg-t thead th, table.rp-t thead th, table.ng-t thead th, table.um-t thead th,
body.dark-only table.display thead th, .dataTables_wrapper table.dataTable thead th {
  background: var(--mg-cab) !important; color: var(--mg-cab-texto) !important; border-color: var(--mg-cab-borde) !important;
  border-bottom: 1px solid var(--mg-cab-borde) !important; }
.page-body table thead th *, .modal table thead th *, table.dataTable thead th * { color: var(--mg-cab-texto) !important; }
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after { color: #FFFFFF !important; opacity: .55; }
.page-body table thead th input[type=checkbox] { accent-color: #FFFFFF; }

/* Ventanas flotantes */
.modal-content, body.dark-only .modal-content { background: var(--mg-sup) !important; color: var(--mg-texto) !important; border: 1px solid var(--mg-borde) !important; }
.modal-header, body.dark-only .modal-header { background: var(--mg-cab) !important; border-bottom: 1px solid var(--mg-cab-borde) !important; }
.modal-header .modal-title, .modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6,
body.dark-only .modal-header .modal-title, body.dark-only .modal-header h5 { color: #FFFFFF !important; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .85; }
.modal-body, .modal-footer, body.dark-only .modal-body, body.dark-only .modal-footer { background: var(--mg-sup) !important; color: var(--mg-texto) !important; }
.modal-body label, body.dark-only .modal-body label { color: var(--mg-texto-2) !important; }

/* Todo lo que use el marino de fondo lleva texto blanco */
.btn-primary, .btn-primary:hover, .btn-primary:focus, .badge-primary, .bg-primary, .mg-pestana.activa span { color: #FFFFFF !important; }

/* Modo oscuro: más contraste en listas y textos secundarios */
body.dark-only {
  --mg-fondo: #0B1322; --mg-sup: #152238; --mg-sup-2: #1C2C47; --mg-borde: #34496B; --mg-borde-2: #2A3D5C;
  --mg-texto: #F3F6FB; --mg-texto-2: #D2DCEA; --mg-texto-3: #A9B8CD; }
body.dark-only .page-body table tbody td, body.dark-only .page-body table tbody td *:not(.badge):not(.btn):not(.mg-chip):not(a) { color: var(--mg-texto) !important; }
body.dark-only .page-body table tbody td .mg-sub, body.dark-only .page-body table tbody td small { color: var(--mg-texto-3) !important; }
body.dark-only .page-body table tbody tr:nth-child(even) > td { background: rgba(255,255,255,.025) !important; }
body.dark-only .page-body table tbody tr:hover > td { background: var(--mg-sup-2) !important; }
body.dark-only .page-body table tbody td a:not(.btn) { color: var(--mg-turq) !important; }
body.dark-only .card .card-header h5, body.dark-only .card .card-header h4, body.dark-only .card .card-header h6 { color: var(--mg-texto) !important; }
body.dark-only .form-control, body.dark-only .form-select, body.dark-only select { color: var(--mg-texto) !important; background-color: var(--mg-sup-2) !important; }
body.dark-only .text-dark, body.dark-only .txt-dark { color: var(--mg-texto) !important; }
body.dark-only .badge-light, body.dark-only .bg-light { background: var(--mg-neutro-bg) !important; color: var(--mg-texto) !important; }
html body .page-wrapper .page-title .breadcrumb .breadcrumb-item, html body .page-wrapper .page-title .breadcrumb .breadcrumb-item a { text-transform: none !important; }

/* Acciones compactas de una fila (citas): Ver · Reprogramar · Cancelar · Pagada — como el deslizar de la app */
.mg-acc { display: flex; flex-wrap: wrap; gap: 4px; min-width: 150px; }
.mg-acc-b { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: 12px; font-weight: 600; border: 1px solid var(--mg-borde); color: var(--mg-texto) !important; background: var(--mg-sup); text-decoration: none !important; white-space: nowrap; }
.mg-acc-b i { font-size: 12px; }
.mg-acc-b:hover { background: var(--mg-sup-2); }
.mg-acc-turq { border-color: var(--mg-turq-2); color: var(--mg-info) !important; background: var(--mg-info-bg); }
.mg-acc-mal { border-color: var(--mg-mal); color: var(--mg-mal) !important; background: var(--mg-mal-bg); }
.mg-acc-ok { border-color: var(--mg-ok); color: var(--mg-ok) !important; background: var(--mg-ok-bg); }
body.dark-only .page-body table tbody td .mg-acc-b { color: var(--mg-texto) !important; }
body.dark-only .page-body table tbody td .mg-acc-turq { color: var(--mg-info) !important; }
body.dark-only .page-body table tbody td .mg-acc-mal { color: var(--mg-mal) !important; }
body.dark-only .page-body table tbody td .mg-acc-ok { color: var(--mg-ok) !important; }

/* Filtros de lista, paginador del servidor y documentos (módulo Pacientes y siguientes) */
.mg-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.mg-filtros input[type=search] { flex: 1 1 320px; min-width: 220px; }
.mg-filtros .form-select { width: auto !important; min-width: 170px; }
.mg-filtros-der { margin-left: auto; }
.mg-pag-srv { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; }
.mg-pag-srv-n { display: flex; flex-wrap: wrap; gap: 4px; }
.mg-pag-srv-n a, .mg-pag-srv-n span { min-width: 34px; padding: 6px 10px; text-align: center; font-size: 13px; border: 1px solid var(--mg-borde); color: var(--mg-texto) !important; background: var(--mg-sup); text-decoration: none !important; }
.mg-pag-srv-n a.activo { background: var(--mg-cab); border-color: var(--mg-cab); color: #FFFFFF !important; font-weight: 700; }
.mg-pag-srv-n a.inactivo { opacity: .45; pointer-events: none; }
.mg-pag-srv-n span { border-color: transparent; background: transparent; }
.mg-enlace-fuerte { font-weight: 700; color: var(--mg-texto) !important; }
.mg-enlace-fuerte:hover { color: var(--mg-turq-2) !important; }
.mg-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mg-doc { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--mg-borde-2); background: var(--mg-sup-2); color: var(--mg-texto) !important; text-decoration: none !important; }
.mg-doc i { font-size: 20px; color: var(--mg-turq-2); }
a.mg-doc:hover { border-color: var(--mg-turq-2); }
.page-title .mg-sub { display: block; margin-top: 2px; }

/* Pantallas donde la imagen ES el dato (iconos de especialidades que muestran las apps en su barra superior) */
html body .page-body .mg-con-imagenes img { display: inline-block !important; }
html body .page-body .mg-con-imagenes table td img { width: 44px !important; height: 44px !important; object-fit: contain !important; background: var(--mg-sup-2); padding: 5px; border-radius: 10px !important; border: 1px solid var(--mg-borde-2); }
html body .page-body .mg-con-imagenes #file-preview { width: 112px !important; height: 112px !important; object-fit: contain !important; padding: 10px; background: var(--mg-sup-2); border: 1px dashed var(--mg-borde); border-radius: 12px !important; }

/* Selector con buscador (public/js/mg-combo.js) */
.mg-cb { position: relative; width: 100%; min-width: 160px; }
.mg-cb-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 7px 12px; text-align: left;
  background: var(--mg-sup); color: var(--mg-texto); border: 1px solid var(--mg-borde); font-size: 13.5px; cursor: pointer; }
.mg-cb-btn .mg-cb-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-cb-btn i { font-size: 11px; color: var(--mg-texto-3); flex: none; }
.mg-cb.abierto .mg-cb-btn, .mg-cb-btn:focus { border-color: var(--mg-turq-2); box-shadow: 0 0 0 3px rgba(81,191,209,.25); outline: 0; }
.mg-cb.inactivo { pointer-events: none; opacity: .6; }
.mg-cb-panel { position: absolute; z-index: 1060; top: calc(100% + 2px); left: 0; right: 0; min-width: 260px; background: var(--mg-sup); border: 1px solid var(--mg-borde); box-shadow: var(--mg-sombra); }
.mg-cb-q { width: 100%; border: 0; border-bottom: 1px solid var(--mg-borde-2); padding: 9px 12px; font-size: 13.5px; background: var(--mg-sup-2); color: var(--mg-texto); outline: 0; }
.mg-cb-res { max-height: 290px; overflow-y: auto; }
.mg-cb-op { padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--mg-texto); display: flex; flex-direction: column; }
.mg-cb-op small { color: var(--mg-texto-3); font-size: 11.5px; }
.mg-cb-op.marca, .mg-cb-op:hover { background: var(--mg-info-bg); }
.mg-cb-op.sel { font-weight: 700; }
.mg-cb-vacio { padding: 10px 12px; color: var(--mg-texto-3); font-size: 12.5px; }
input.mg-oculto-inp { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; }
.mg-tel .mg-cb { min-width: 0; }

/* Comprobante estilo ERP (pedido de farmacia) */
.mg-doc-cab { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 18px; padding: 14px 16px; margin-bottom: 14px; background: var(--mg-info-bg); border-left: 4px solid var(--mg-turq-2); }
.mg-doc-cab > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mg-doc-et { font-size: 11.5px; font-weight: 600; color: var(--mg-texto-2); text-transform: uppercase; letter-spacing: .03em !important; }
.mg-doc-cab b { font-size: 14px; color: var(--mg-texto); }
.mg-doc-num { font-size: 18px !important; }
.mg-doc-grilla td { vertical-align: top !important; }
.mg-doc-pie { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; margin-top: 14px; align-items: start; }
.mg-doc-notas { display: flex; flex-direction: column; gap: 10px; }
.mg-doc-tot { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mg-doc-tot td { padding: 7px 12px; border-bottom: 1px solid var(--mg-borde-2); color: var(--mg-texto); }
.mg-doc-tot td:last-child { text-align: right; white-space: nowrap; }
.mg-doc-tot .mg-doc-total td { font-weight: 700; font-size: 15px; background: var(--mg-sup-2); border-top: 2px solid var(--mg-borde); }
.mg-doc-tot .mg-doc-pagar td { font-weight: 700; font-size: 16px; background: var(--mg-cab); color: #FFFFFF; }
@media (max-width: 900px) { .mg-doc-pie { grid-template-columns: minmax(0, 1fr); } }
.mg-matriz-def td { background: var(--mg-info-bg) !important; }

/* Detalles (cita, reserva de laboratorio, pedido): tarjetas compactas, sin imágenes, con tintes suaves de la gama */
:root { --mg-nar-bg: #FDEDE3; --mg-mar-bg: #E4EAF3; --mg-cian-bg: #E0F4F7; }
body.dark-only { --mg-nar-bg: #3A2416; --mg-mar-bg: #1E2D47; --mg-cian-bg: #123540; }
.mg-detalle .card { margin-bottom: 14px !important; }
.mg-detalle .card .card-header { padding: 10px 14px !important; }
.mg-detalle .card .card-body { padding: 14px !important; }
.mg-detalle .card .card-body p, .mg-detalle .card .card-body span, .mg-detalle .card .card-body li { font-size: 13px; line-height: 1.45; }
.mg-detalle .card h5, .mg-detalle .card h6 { font-size: 14px !important; margin-bottom: 8px !important; }
.mg-detalle .card:nth-of-type(3n+1) > .card-header, .mg-detalle .card:nth-of-type(3n+1) > .card-body > h6:first-child { background: var(--mg-cian-bg) !important; }
.mg-detalle .card:nth-of-type(3n+2) > .card-header, .mg-detalle .card:nth-of-type(3n+2) > .card-body > h6:first-child { background: var(--mg-mar-bg) !important; }
.mg-detalle .card:nth-of-type(3n+3) > .card-header, .mg-detalle .card:nth-of-type(3n+3) > .card-body > h6:first-child { background: var(--mg-nar-bg) !important; }
.mg-detalle .card > .card-body > h6:first-child { margin: -14px -14px 10px !important; padding: 9px 14px; color: var(--mg-texto) !important; }
/* Solo fotos decorativas (perfil, clínica, especialidad, producto); las láminas del diagrama, el odontograma y las imágenes clínicas se ven */
.mg-detalle .card img[src*="profile"], .mg-detalle .card img[src*="default"], .mg-detalle .card img[src*="uploads/hospital"], .mg-detalle .card img[src*="uploads/department"],
.mg-detalle .card img[src*="uploads/doctor"], .mg-detalle .card img[src*="uploads/customer"], .mg-detalle .card img[src*="product"], .mg-detalle .card img[src*="images/Group"] { display: none !important; }
.mg-detalle [class*="mgat"] img { display: block !important; }
.mg-detalle .mg-det-t { display: block; width: 100%; padding: 8px 12px; margin: 0 0 10px !important; font-weight: 700 !important; border-left: 4px solid var(--mg-turq-2); background: var(--mg-cian-bg); color: var(--mg-texto) !important; }
.mg-detalle .mg-tono-1 .mg-det-t { border-left-color: var(--mg-marino); background: var(--mg-mar-bg); }
.mg-detalle .mg-tono-2 .mg-det-t { border-left-color: var(--mg-naranja); background: var(--mg-nar-bg); }
body.dark-only .mg-detalle .mg-tono-1 .mg-det-t { border-left-color: var(--mg-turq); }
.mg-detalle .mg-col-full { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }

/* «Operar como» y «Cambiar rol de acceso» en la barra superior */
.mg-rol { flex-wrap: wrap; row-gap: 4px; }
.mg-rol-btn { padding: 4px 12px !important; font-size: 12.5px !important; margin-left: 6px; white-space: nowrap; }
.mg-operando { display: inline-flex; flex-direction: column; line-height: 1.25; }
.mg-operando > span { font-size: 12.5px; color: var(--mg-texto-2); }
.mg-operando b { color: var(--mg-texto); }
.mg-operando-sub { font-size: 12.5px; color: var(--mg-naranja) !important; font-weight: 700; }
.mg-rol-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; }
.mg-rol-op { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; text-align: left; border: 1px solid var(--mg-borde); background: var(--mg-sup); color: var(--mg-texto); cursor: pointer; }
.mg-rol-op span { font-size: 12px; color: var(--mg-texto-3); }
.mg-rol-op em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--mg-naranja); }
.mg-rol-op:hover { border-color: var(--mg-turq-2); background: var(--mg-info-bg); }
.mg-rol-op.actual { border-color: var(--mg-naranja); }
.mg-rol-cli { cursor: default; gap: 6px !important; }
.mg-rol-cli select { width: 100% !important; min-height: 32px; }
.mg-rol-cli .btn { align-self: stretch; }
.mg-rol-medicos { width: auto !important; min-width: 200px; max-width: 280px; min-height: 30px !important; padding: 3px 10px !important; font-size: 12.5px !important; margin-left: 6px; }
.mg-pestana.activa span { background: var(--mg-cab) !important; color: #FFFFFF !important; }
/* Barra superior en una sola fila aunque se esté operando como otro rol */
.page-header .header-wrapper .left-header { flex: 1 1 auto !important; max-width: none !important; min-width: 0; }
.page-header .header-wrapper .nav-right { flex: 0 0 auto !important; width: auto !important; }
.mg-rol { flex-wrap: nowrap !important; gap: 8px; min-width: 0; }
.mg-rol form { display: inline-flex; }
.mg-operando { min-width: 0; max-width: 420px; }
.mg-operando > span, .mg-operando-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .mg-rol-btn span, .mg-rol-btn { font-size: 11.5px !important; } .mg-rol-medicos { min-width: 150px; } }
.page-header .header-wrapper { flex-wrap: nowrap !important; align-items: center; }
.mg-operando { flex: 0 0 auto !important; } .mg-rol-medicos { flex: 0 1 auto; min-width: 140px !important; }