/* Modern UI: tokens y componentes compartidos (admin y portal) */

:root {
  --mui-primary: #1f4a7a;
  --mui-radius: 6px;
  --mui-accent: #d9772f;
  --mui-accent-strong: #b9531a;
  --mui-accent-soft: color-mix(in srgb, var(--mui-accent) 13%, transparent);
  --mui-primary-soft: color-mix(in srgb, var(--mui-primary) 9%, transparent);
  --mui-primary-hover: color-mix(in srgb, var(--mui-primary) 82%, #000);
  --mui-link: var(--mui-primary);

  --mui-bg: #f5f6f8;
  --mui-surface: #ffffff;
  --mui-surface-2: #eef1f5;
  --mui-border: #e1e5ec;
  --mui-text: #1b2536;
  --mui-text-muted: #637087;
  --mui-shadow: 0 1px 2px rgba(20, 35, 60, .05), 0 1px 3px rgba(20, 35, 60, .06);
  --mui-shadow-lg: 0 12px 32px rgba(20, 35, 60, .14);

  --mui-success: #3f9b72;
  --mui-warning: #d9972f;
  --mui-danger: #c9514b;
  --mui-info: #4a82c2;
  --mui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

:root[data-mui-theme="dark"] {
  --mui-bg: #0e1522;
  --mui-surface: #141d2d;
  --mui-surface-2: #1b2639;
  --mui-border: #2a364b;
  --mui-text: #e4e9f2;
  --mui-text-muted: #98a5ba;
  --mui-accent: #e08a4a;
  --mui-accent-strong: #eea068;
  --mui-accent-soft: color-mix(in srgb, #e08a4a 15%, transparent);
  --mui-primary-soft: color-mix(in srgb, #6f9bd6 14%, transparent);
  --mui-link: #8db4e8;
  --mui-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --mui-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

body {
  font-family: var(--mui-font);
  background: var(--mui-bg);
  color: var(--mui-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--mui-font);
  color: var(--mui-text);
  font-weight: 600;
  letter-spacing: -.01em;
}

a { color: var(--mui-link); }
a:hover, a:focus { color: var(--mui-accent-strong); }
.text-muted, .text-dark { color: var(--mui-text-muted) !important; }
hr, .hr-panel-heading, .hr-10 { border-color: var(--mui-border) !important; }

/* Paneles y tarjetas */
.panel_s, .panel, .well, .card {
  background: var(--mui-surface);
  border: 1px solid var(--mui-border) !important;
  border-radius: var(--mui-radius) !important;
  box-shadow: var(--mui-shadow) !important;
  color: var(--mui-text);
}
.panel_s > .panel-body, .panel-body { background: transparent; }
.panel-heading, .panel_s .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--mui-border) !important;
  color: var(--mui-text) !important;
}

/* Botones */
.btn {
  font-family: var(--mui-font);
  font-weight: 500;
  border-radius: calc(var(--mui-radius) - 2px);
  box-shadow: none;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-info {
  background: var(--mui-primary) !important;
  border-color: var(--mui-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus {
  background: var(--mui-primary-hover) !important;
  border-color: var(--mui-primary-hover) !important;
}
.btn-default {
  background: var(--mui-surface) !important;
  border: 1px solid var(--mui-border) !important;
  color: var(--mui-text) !important;
}
.btn-default:hover { background: var(--mui-surface-2) !important; }
.btn-success { background: var(--mui-success) !important; border-color: var(--mui-success) !important; }
.btn-danger  { background: var(--mui-danger) !important;  border-color: var(--mui-danger) !important; }
.btn-warning { background: var(--mui-warning) !important; border-color: var(--mui-warning) !important; }
.btn:focus-visible, a:focus-visible, .form-control:focus-visible {
  outline: 2px solid var(--mui-primary);
  outline-offset: 2px;
}

/* Formularios */
.form-control, .bootstrap-select .btn, .select2-container--default .select2-selection--single {
  background: var(--mui-surface) !important;
  color: var(--mui-text) !important;
  border: 1px solid var(--mui-border) !important;
  border-radius: calc(var(--mui-radius) - 2px) !important;
  box-shadow: none !important;
  font-family: var(--mui-font);
}
.form-control:focus {
  border-color: var(--mui-primary) !important;
  box-shadow: 0 0 0 3px var(--mui-primary-soft) !important;
}
.form-control[disabled], .form-control[readonly] { background: var(--mui-surface-2) !important; }
label, .control-label { color: var(--mui-text); font-weight: 500; }
.input-group-addon {
  background: var(--mui-surface-2);
  border-color: var(--mui-border);
  color: var(--mui-text-muted);
}

/* Tablas */
.table { color: var(--mui-text); background: transparent; }
.table > thead > tr > th {
  background: var(--mui-surface-2);
  color: var(--mui-text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--mui-border) !important;
  border-top: 0;
}
.table > tbody > tr > td { border-top: 1px solid var(--mui-border); vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.table-hover > tbody > tr:hover, .table > tbody > tr:hover { background: var(--mui-primary-soft); }
table.dataTable thead th, table.dataTable thead td { border-bottom: 1px solid var(--mui-border) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--mui-surface); color: var(--mui-text); border: 1px solid var(--mui-border);
  border-radius: calc(var(--mui-radius) - 2px);
}
.pagination > li > a, .pagination > li > span {
  background: var(--mui-surface); color: var(--mui-text); border-color: var(--mui-border);
}
.pagination > .active > a, .pagination > .active > span {
  background: var(--mui-primary) !important; border-color: var(--mui-primary) !important; color: #fff;
}

/* Menús, modales, alertas */
.dropdown-menu, .popover, .tooltip-inner {
  background: var(--mui-surface);
  color: var(--mui-text);
  border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius);
  box-shadow: var(--mui-shadow-lg);
}
.dropdown-menu > li > a { color: var(--mui-text); border-radius: 6px; margin: 0 4px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--mui-primary-soft); color: var(--mui-primary); }
.modal-content {
  background: var(--mui-surface); color: var(--mui-text);
  border: 1px solid var(--mui-border); border-radius: calc(var(--mui-radius) + 4px); box-shadow: var(--mui-shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--mui-border); }
.close { color: var(--mui-text); text-shadow: none; }
.alert { border-radius: var(--mui-radius); border: 1px solid transparent; }
.label, .badge { border-radius: 999px; font-weight: 500; }
.nav-tabs { border-bottom: 1px solid var(--mui-border); }
.nav-tabs > li > a { color: var(--mui-text-muted); border-radius: var(--mui-radius) var(--mui-radius) 0 0; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  background: var(--mui-surface); color: var(--mui-primary);
  border-color: var(--mui-border); border-bottom-color: var(--mui-surface);
}
.progress { background: var(--mui-surface-2); border-radius: 999px; box-shadow: none; }
.progress-bar { background: var(--mui-primary); }

/* Scrollbars discretos */
* { scrollbar-width: thin; scrollbar-color: var(--mui-border) transparent; }

/* Botón claro/oscuro */
#mui-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--mui-border);
  background: var(--mui-surface); color: var(--mui-text);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
#mui-toggle:hover { background: var(--mui-surface-2); }
.mui-toggle-item { display: flex; align-items: center; padding: 0 6px; list-style: none; }
#mui-toggle.mui-floating { position: fixed; right: 16px; bottom: 16px; z-index: 9999; box-shadow: var(--mui-shadow-lg); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Botón principal en modo oscuro: azul medio, legible sobre fondo marino */
:root[data-mui-theme="dark"] .btn-primary,
:root[data-mui-theme="dark"] .btn-info {
  background: #3d6aa6 !important; border-color: #3d6aa6 !important;
}
:root[data-mui-theme="dark"] .btn-primary:hover,
:root[data-mui-theme="dark"] .btn-info:hover { background: #4a78b6 !important; border-color: #4a78b6 !important; }
:root[data-mui-theme="dark"] .progress-bar, :root[data-mui-theme="dark"] .pagination > .active > a { background: #3d6aa6 !important; }

/* Acento naranja: elemento activo y foco */
.btn:focus-visible, a:focus-visible, .form-control:focus-visible { outline-color: var(--mui-accent); }
.form-control:focus { border-color: var(--mui-accent) !important; box-shadow: 0 0 0 3px var(--mui-accent-soft) !important; }
.nav-tabs > li.active > a { color: var(--mui-accent-strong); border-top: 2px solid var(--mui-accent); }

/* ===== Diseño plano y ejecutivo: bordes finos, sin sombras ===== */
:root {
  --mui-shadow: none;
  --mui-shadow-lg: 0 0 0 1px var(--mui-border);
}
:root[data-mui-theme="dark"] {
  --mui-shadow: none;
  --mui-shadow-lg: 0 0 0 1px var(--mui-border);
}
*, *::before, *::after { text-shadow: none !important; }
.panel_s, .panel, .well, .card, .widget, .top_stats_wrapper,
.dropdown-menu, .popover, .modal-content, .form-control, .btn,
.bootstrap-select .dropdown-menu, #mui-toggle, .navbar, #header {
  box-shadow: none !important;
}
.btn:active, .btn.active { box-shadow: none !important; transform: none; }
.modal-content { border-radius: var(--mui-radius) !important; }
.dropdown-menu { box-shadow: 0 6px 16px rgba(20, 35, 60, .08) !important; } /* única separación del contenido que queda */
:root[data-mui-theme="dark"] .dropdown-menu { box-shadow: 0 6px 16px rgba(0, 0, 0, .35) !important; }
.panel-heading, .panel_s .panel-heading { padding-top: 14px; padding-bottom: 14px; }
.table > thead > tr > th { font-size: 11px; letter-spacing: .06em; }
.label, .badge { border-radius: 4px; }
.progress { border-radius: 4px; }
.btn { border-radius: var(--mui-radius); }
.form-control:focus { box-shadow: none !important; }

/* ===== Etiquetas sobrias: texto limpio, sin cápsulas de color ===== */
td [class*="badge"], td [class*="pill"], td [class*="chip"], td [class*="tag"]:not(.bootstrap-tagsinput),
.panel_s [class*="-badge"], .panel_s [class*="-pill"], .panel_s [class*="-chip"],
td .label, td .badge {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  font-weight: 500 !important;
  font-size: inherit !important;
  color: var(--mui-text) !important;
}
/* Contadores (el "0" en círculo) en tono atenuado */
td [class*="count"], td [class*="badge"][class*="num"] { color: var(--mui-text-muted) !important; }
/* Estados: solo cambia el color del texto, apagado */
td [class*="success"], td [class*="active"], td [class*="activo"] { color: var(--mui-success) !important; }
td [class*="danger"], td [class*="inactive"], td [class*="inactivo"] { color: var(--mui-danger) !important; }
td [class*="warning"], td [class*="pending"] { color: var(--mui-warning) !important; }