/* ===============================
   RESET BASE
================================*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing: antialiased;
}

/* ===============================
   VARIABLES CLÍNICA (DEFAULT)
================================*/
:root {
  --mg-primary: #2b7fff;
  --mg-primary-soft: #eaf3ff;
  --mg-text: #1f2a37;
  --mg-text-soft: #5b6b7b;
  --mg-border: #e5edf5;
  --mg-surface: #ffffff;
  --mg-bg: #f7fbff;
}

/* ===============================
   APLICACIÓN GLOBAL
================================*/
body {
  background: var(--mg-bg) !important;
  color: var(--mg-text);
}

main.container-fluid {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: calc(100vh - 70px);
}

/* ===============================
   TOPBAR CLÍNICO
================================*/
.mg-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--mg-border);
  height: 70px;
  display: flex;
  align-items: center;
}

.mg-topbar .mg-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mg-topbar img { height: 34px; }

.mg-topbar-title {
  font-weight: 600;
  font-size: 18px;
  color: #1f2a37;
}

.mg-topbar-sub {
  font-size: 12px;
  color: #7b8a9a;
}

.mg-nav-btn {
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 14px;
}

.mg-nav-btn-outline {
  border: 1px solid var(--mg-border);
  background: white;
  color: #334155;
}

.mg-nav-btn-primary {
  background: var(--mg-primary);
  color: white;
  border: none;
}

/* ===============================
   CONTENEDORES GENERALES
================================*/
.mg-page {
  padding: 30px 0 50px 0;
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease-in-out;
}

.mg-card {
  background: var(--mg-surface);
  border-radius: 16px;
  border: 1px solid var(--mg-border);
  padding: 24px;
}

/* ===============================
   FORMULARIOS
================================*/
.mg-input {
  border: 1px solid var(--mg-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  background: white;
}

.mg-input:focus {
  outline: none;
  border-color: var(--mg-primary);
  box-shadow: 0 0 0 3px rgba(43, 127, 255, .12);
}

.mg-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #334155;
}

.mg-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.mg-input-icon {
  position: absolute;
  left: 14px;
  color: var(--mg-text-soft);
  font-size: 14px;
  z-index: 5;
}

.mg-input-with-icon {
  padding-left: 40px !important;
  padding-right: 40px !important;
  width: 100%;
}

.mg-password-toggle {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  color: var(--mg-text-soft);
  cursor: pointer;
  padding: 0;
  z-index: 5;
  transition: color 0.2s;
}

.mg-password-toggle:hover { color: var(--mg-primary); }

/* ===============================
   BOTONES
================================*/
.mg-btn {
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
}

.mg-btn-primary {
  background: var(--mg-primary);
  color: white;
  border: none;
}

.mg-btn-primary:hover { filter: brightness(.95); }

.mg-btn-outline {
  border: 1px solid var(--mg-border);
  background: white;
  color: #334155;
}

/* ===============================
   TABLAS CLÍNICAS
================================*/
.mg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.mg-table th {
  text-align: left;
  font-size: 13px;
  color: #64748b;
  padding: 14px 12px;
  border-bottom: 1px solid var(--mg-border);
}

.mg-table td {
  padding: 16px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}

/* ===============================
   LAYOUT
================================*/
.mg-main {
  background-color: var(--mg-bg);
  min-height: calc(100vh - 70px - 56px);
  padding: 24px 0 40px;
}

.mg-main--login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mg-bg);
}

.mg-footer {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(2, 6, 23, .08);
}

.mg-footer-left { color: #475569; font-size: 13px; }
.mg-footer-right { color: #64748b; }

/* ===============================
   LOGIN
================================*/
.login-container {
  min-height: calc(100vh - 130px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-hero {
  height: 520px;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

@media (min-width: 1200px) {
  .login-hero {
    height: 560px;
    max-height: 560px;
  }
}

.mg-login-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 60%);
  padding: 40px;
}

.mg-glass-panel {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
}

/* ===============================
   UTILIDADES
================================*/
.mg-muted { color: var(--mg-text-soft); }
.mg-title { font-size: 22px; font-weight: 700; }
.mg-subtitle { font-size: 14px; color: var(--mg-text-soft); }

.bg-dark, .bg-black { background: transparent !important; }

.bg-success-soft { background-color: rgba(46, 204, 113, 0.1) !important; color: #27ae60; }
.bg-primary-soft { background-color: var(--mg-primary-soft) !important; color: var(--mg-primary); }

.tracking-wider { letter-spacing: 0.05em; }

.status-pulse {
  width: 12px;
  height: 12px;
  background: #2ecc71;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.2);
  animation: pulse 2s infinite;
}

.text-dark { color: #1f2a37 !important; }
.text-secondary { color: #6b7280 !important; }
.text-muted { color: #9ca3af !important; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===============================
   MODO OSCURO
================================*/
[data-theme="dark"] {
  --mg-bg:       #0f1117;
  --mg-surface:  #1a1d27;
  --mg-text:     #e2e8f0;
  --mg-text-soft:#94a3b8;
  --mg-border:   #2d3148;
  --bs-body-bg:  #0f1117;
  --bs-body-color:#e2e8f0;
  --bs-card-bg:  #1a1d27;
  --bs-border-color:#2d3148;
}

[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] #appShell,
[data-theme="dark"] .mg-main,
[data-theme="dark"] .mg-main--login,
[data-theme="dark"] main.container-fluid {
  background-color: #0f1117 !important;
  background:       #0f1117 !important;
  color: #e2e8f0;
}

[data-theme="dark"] .mg-topbar {
  background: #1a1d27 !important;
  border-color: #2d3148 !important;
}

[data-theme="dark"] .mg-topbar-title { color: #e2e8f0; }
[data-theme="dark"] .mg-topbar-sub   { color: #94a3b8; }

[data-theme="dark"] .mg-navbtn,
[data-theme="dark"] .mg-nav-btn {
  color: #94a3b8 !important;
}

[data-theme="dark"] .mg-navbtn:hover,
[data-theme="dark"] .mg-navbtn.active {
  background-color: #1e2535 !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .mg-card {
  background: #1a1d27 !important;
  border-color: #2d3148 !important;
}

[data-theme="dark"] .card {
  background-color: #1a1d27 !important;
  border-color: #2d3148 !important;
}

[data-theme="dark"] .card-header {
  background-color: #1a1d27 !important;
  border-color: #2d3148 !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: #1a1d27 !important;
  border-color: #2d3148 !important;
}

[data-theme="dark"] .dropdown-item       { color: #e2e8f0 !important; }
[data-theme="dark"] .dropdown-item:hover { background-color: #2d3148 !important; }
[data-theme="dark"] .dropdown-header     { color: #60a5fa !important; }

[data-theme="dark"] .table {
  --bs-table-bg:       transparent;
  --bs-table-color:    #e2e8f0;
  --bs-table-border-color: #2d3148;
  --bs-table-hover-bg: #2d3148;
}

[data-theme="dark"] .table-light {
  --bs-table-bg:    #2d3148;
  --bs-table-color: #e2e8f0;
}

[data-theme="dark"] .mg-table th { color: #94a3b8; border-color: #2d3148; }
[data-theme="dark"] .mg-table td { border-color: #2d3148; }

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #0f1117 !important;
  border-color: #2d3148 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .form-control::placeholder { color: #64748b !important; }

[data-theme="dark"] .mg-input {
  background: #0f1117 !important;
  border-color: #2d3148 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .mg-label { color: #cbd5e1; }

[data-theme="dark"] .btn-light {
  background-color: #2d3148 !important;
  border-color: #3d4265 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .btn-light:hover { background-color: #3d4265 !important; }

[data-theme="dark"] .mg-btn-outline {
  background: #2d3148 !important;
  border-color: #3d4265 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .rounded-pill,
[data-theme="dark"] .border.rounded-pill {
  background-color: #2d3148 !important;
  border-color: #3d4265 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .text-dark      { color: #e2e8f0 !important; }
[data-theme="dark"] .text-muted     { color: #94a3b8 !important; }
[data-theme="dark"] .text-secondary { color: #94a3b8 !important; }
[data-theme="dark"] .bg-white       { background-color: #1a1d27 !important; }
[data-theme="dark"] .bg-light       { background-color: #1e2535 !important; }
[data-theme="dark"] .border-bottom  { border-color: #2d3148 !important; }
[data-theme="dark"] .shadow-sm      { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }

[data-theme="dark"] hr,
[data-theme="dark"] .dropdown-divider { border-color: #2d3148 !important; }

[data-theme="dark"] .alert-info {
  background-color: #1e3a5f !important;
  border-color: #2563eb !important;
  color: #93c5fd !important;
}

[data-theme="dark"] .alert-success {
  background-color: #14532d !important;
  border-color: #16a34a !important;
  color: #86efac !important;
}

[data-theme="dark"] .alert-danger {
  background-color: #450a0a !important;
  border-color: #dc2626 !important;
  color: #fca5a5 !important;
}

[data-theme="dark"] .mg-footer {
  background: rgba(26, 29, 39, 0.9) !important;
  border-color: #2d3148 !important;
}

[data-theme="dark"] .mg-footer-left,
[data-theme="dark"] .mg-footer-right { color: #94a3b8; }