/* ── MST — Metronic v4.7.5 custom overrides ───────────────────────────── */

/* ── FONT ─────────────────────────────────────────────────────────────── */
body { font-family: "Open Sans", sans-serif !important; }

/* ── LAYOUT COMPLETO — flexbox, sin depender de Metronic layout.css ─────── */
.page-header.navbar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 50px !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.page-container {
    position: fixed !important;
    top: 50px !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    display: flex !important;
    margin: 0 !important; padding: 0 !important;
    background: #eef1f5 !important;
    z-index: 1 !important;
}
.page-sidebar-wrapper {
    position: relative !important;
    width: 235px !important; min-width: 235px !important;
    height: 100% !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    flex-shrink: 0 !important;
    top: auto !important; left: auto !important;
    bottom: auto !important; z-index: auto !important;
}
.page-sidebar {
    min-height: 100% !important;
    height: 100% !important;
    position: relative !important;
}
.page-content-wrapper {
    flex: 1 !important;
    overflow-y: auto !important;
    margin: 0 !important; padding: 0 !important;
    float: none !important; width: auto !important;
}
.page-content-wrapper .page-content {
    margin: 0 !important;
    padding: 25px 20px !important;
    background: #eef1f5 !important;
    min-height: 100% !important;
}

/* ── LOGO ESTILO MFI ──────────────────────────────────────────────────── */
.mst-logo-link,
.mst-logo-link:hover,
.mst-logo-link:focus,
.mst-logo-link:active {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  margin-top: 8px !important;
}
.mst-logo-box {
  background: #1a2942;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.15;
  flex-shrink: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* s misma negrita que M y T, solo más pequeña */
.mst-logo-s {
  font-size: 18px;
  font-weight: 800;
  vertical-align: 1px;
}
/* Eliminar borde celeste que agrega Metronic/Bootstrap al link */
.page-header .page-logo a,
.page-header .page-logo a:hover,
.page-header .page-logo a:focus,
.page-header .page-logo a:active,
.page-header .page-logo a:visited {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.mst-logo-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.mst-logo-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.mst-logo-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,0.85) !important;
  font-weight: 700 !important;
}

/* ── SIDEBAR THEME ────────────────────────────────────────────────────── */
.page-header {
  background: #1a2942 !important;
  border-bottom: 1px solid #152235 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
.page-sidebar,
.page-sidebar-wrapper .page-sidebar {
  background: #1a2942 !important;
}
.page-sidebar-menu > li > a {
  color: #b8c7d9 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.page-sidebar-menu > li > a:hover,
.page-sidebar-menu > li:hover > a {
  background: rgba(255,255,255,0.07) !important;
  color: #fff !important;
}
.page-sidebar-menu > li.active > a {
  background: #2878b5 !important;
  color: #fff !important;
  border-left: 3px solid #5aa8e0 !important;
}
.page-sidebar-menu > li > a > i { color: rgba(255,255,255,0.4) !important; }
.page-sidebar-menu > li.active > a > i,
.page-sidebar-menu > li:hover > a > i { color: #fff !important; }
.page-sidebar-menu .heading > h3 {
  color: rgba(255,255,255,0.3) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
}

/* Logo */
.mst-logo-text {
  font-size: 16px; font-weight: 700; color: #fff !important; letter-spacing: -0.3px; line-height: 1.2;
}
.page-logo a { text-decoration: none !important; }

/* Avatar header */
.mst-header-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  vertical-align: middle; margin-right: 5px;
}
.page-header .dropdown-user .dropdown-toggle .username { color: #c8d8e8 !important; }

/* Quitar fondo gris del hover en el botón del avatar */
.page-header .dropdown-user > .dropdown-toggle,
.page-header .dropdown-user > .dropdown-toggle:hover,
.page-header .dropdown-user > .dropdown-toggle:focus,
.page-header .dropdown-user > .dropdown-toggle:active,
.page-header .dropdown-user.open > .dropdown-toggle {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Dropdown avatar — fondo azul oscuro */
.page-header .dropdown-user .dropdown-menu {
  background: #1a2942 !important;
  border: 1px solid #0f1b2d !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
  border-radius: 4px !important;
  min-width: 160px !important;
}
.page-header .dropdown-user .dropdown-menu > li > a {
  color: #c8d8e8 !important;
  padding: 9px 18px !important;
}
.page-header .dropdown-user .dropdown-menu > li > a:hover,
.page-header .dropdown-user .dropdown-menu > li > a:focus {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
.page-header .dropdown-user .dropdown-menu > li > a > i {
  color: rgba(255,255,255,0.45) !important;
  margin-right: 7px;
}
.page-header .dropdown-user .dropdown-menu > li.divider {
  background: rgba(255,255,255,0.1) !important;
  margin: 4px 0 !important;
}

/* ── PAGE BAR SPACING ─────────────────────────────────────────────────── */
.page-bar { margin-bottom: 10px !important; }
.page-title { margin-bottom: 20px !important; }
.page-title small { font-size: 14px; color: #8d9299; margin-left: 6px; }

/* ── TICKET BADGE LABELS ──────────────────────────────────────────────── */
.label-critical { background: #e53935 !important; }
.label-alta     { background: #ef6c00 !important; }
.label-media    { background: #1976d2 !important; }
.label-baja     { background: #388e3c !important; }

/* ── PRIORITY DOT ANIMATION ───────────────────────────────────────────── */
.dot-critical {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #e53935;
  box-shadow: 0 0 0 rgba(229,57,53,0.6);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(229,57,53,0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(229,57,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}

/* ── COUNTER ANIMATION ────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in   { animation: fadeInUp 0.35s ease both; }
.fade-in-1 { animation-delay: 0.05s; }
.fade-in-2 { animation-delay: 0.10s; }
.fade-in-3 { animation-delay: 0.15s; }
.fade-in-4 { animation-delay: 0.20s; }

/* ── DASHBOARD STAT TWEAKS ────────────────────────────────────────────── */
.dashboard-stat { border-radius: 6px !important; }
.dashboard-stat .number { font-size: 34px !important; }

/* ── TABLE HEADER COLOR ───────────────────────────────────────────────── */
.portlet .table thead th {
  background: #2878b5 !important;
  color: #fff !important;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 0 !important;
}

/* ── PORTLET LIGHT TWEAKS ─────────────────────────────────────────────── */
.portlet.light { border-radius: 6px; }
.portlet.light .portlet-title { border-radius: 6px 6px 0 0; }

/* ── AVATAR INICIALES ─────────────────────────────────────────────────── */
.avatar-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #f79e2a, #2878b5);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0; vertical-align: middle;
}
.avatar-circle-lg {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #2878b5, #1a2942);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #fff; margin: 0 auto 10px;
}

/* ── MODALES CENTRADOS VERTICALMENTE ──────────────────────────────────── */
.modal-dialog {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}
.modal.fade .modal-dialog {
  transform: translate(-50%, -65%) !important;
  transition: transform 0.25s ease-out !important;
}
.modal.fade.in .modal-dialog {
  transform: translate(-50%, -50%) !important;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-content { padding: 15px !important; }
}