/* frontend/src/assets/css/mas-custom.css */
/* ✅ SOLO sobreescrituras de COLOR corporativo MAS+ */
/* NO tocar layout, spacing, transitions globales, ni resets */

:root {
  --mas-primary: #038D81;
  --mas-primary-dark: #026B62;
  --mas-primary-light: #04A594;
  --mas-accent: #05C9B4;
  --mas-light-bg: #E8F5F4;
}

/* ========================================
   GRADIENTES PRIMARIOS
   ======================================== */
.bg-gradient-primary {
  background: linear-gradient(87deg, #038D81 0, #04A594 100%) !important;
}

.bg-primary {
  background-color: #038D81 !important;
}

/* ========================================
   TEXTOS
   ======================================== */
.text-primary {
  color: #038D81 !important;
}

/* ========================================
   BORDES
   ======================================== */
.border-primary {
  border-color: #038D81 !important;
}

/* ========================================
   BOTONES PRIMARIOS
   ======================================== */
.btn-primary,
.btn.bg-gradient-primary {
  background: linear-gradient(87deg, #038D81 0, #04A594 100%) !important;
  border-color: #038D81 !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn.bg-gradient-primary:hover {
  background: linear-gradient(87deg, #026B62 0, #038D81 100%) !important;
  box-shadow: 0 7px 14px rgba(3, 141, 129, 0.4), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.btn-primary:focus,
.btn.bg-gradient-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(3, 141, 129, 0.5);
}

/* ========================================
   BOTONES INFO (corporativo)
   ======================================== */
.btn-info,
.btn.bg-gradient-info {
  background: linear-gradient(87deg, #038D81 0, #05C9B4 100%) !important;
}

/* ========================================
   BADGES
   ======================================== */
.badge-primary,
.badge.bg-gradient-primary {
  background: linear-gradient(87deg, #038D81 0, #04A594 100%) !important;
  color: #ffffff !important;
}

/* ========================================
   ICON SHAPES
   ======================================== */
.icon-shape.bg-gradient-primary {
  background: linear-gradient(87deg, #038D81 0, #04A594 100%) !important;
}

.icon-shape.bg-gradient-info {
  background: linear-gradient(87deg, #038D81 0, #05C9B4 100%) !important;
}

.shadow-primary {
  box-shadow: 0 0 2rem 0 rgba(3, 141, 129, 0.15) !important;
}

/* ========================================
   SIDEBAR NAV ACTIVO
   ======================================== */
.navbar-vertical .navbar-nav .nav-link.active {
  background: linear-gradient(87deg, #038D81 0, #04A594 100%) !important;
  color: #ffffff !important;
}

.navbar-vertical .navbar-nav .nav-link:hover {
  color: #038D81;
}

/* ========================================
   INPUTS FOCUS
   ======================================== */
.form-control:focus {
  border-color: #04A594;
  box-shadow: 0 0 0 0.2rem rgba(3, 141, 129, 0.25);
}

/* ========================================
   MODALES
   ======================================== */
.modal-header {
  background: linear-gradient(87deg, #038D81 0, #04A594 100%);
  color: white;
  border-bottom: none;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1);
}

/* ========================================
   TABS / PILLS
   ======================================== */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: linear-gradient(87deg, #038D81 0, #04A594 100%);
  color: #ffffff;
}

/* ========================================
   PAGINATION
   ======================================== */
.pagination .page-item.active .page-link {
  background-color: #038D81;
  border-color: #038D81;
}

.pagination .page-link:hover {
  color: #038D81;
  background-color: #E8F5F4;
}

/* ========================================
   LINKS
   ======================================== */
a {
  color: #038D81;
}

a:hover {
  color: #026B62;
  text-decoration: none;
}

/* ========================================
   DROPDOWN
   ======================================== */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: rgba(3, 141, 129, 0.1);
  color: #038D81;
}

/* ========================================
   SCROLLBAR CORPORATIVA
   ======================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #038D81;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #026B62;
}

/* ========================================
   PRINT
   ======================================== */
@media print {
  .bg-gradient-primary {
    background: #038D81 !important;
  }
}
/* ========================================
   AJUSTES PARA IGUALAR A MAS+
   ======================================== */

/* ✅ Sidebar más ancho y con mejor spacing */
.navbar-vertical.navbar-expand-xs {
  max-width: 17rem !important; /* 272px en vez de 250px */
}

/* ✅ Nav items con más padding */
.navbar-vertical.navbar-expand-xs .navbar-nav .nav-link {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  margin: 0.125rem 0.75rem !important;
  font-size: 0.875rem !important;
}

/* ✅ Iconos más grandes */
.navbar-vertical .navbar-nav .nav-link .icon {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
}

.navbar-vertical .navbar-nav .nav-link .icon i {
  font-size: 1rem !important;
}

/* ✅ Texto del nav-link más legible */
.navbar-vertical .navbar-nav .nav-link .nav-link-text {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* ✅ Sidebar header con más padding */
.sidenav-header {
  padding: 0.5rem 0 !important;
}

/* ✅ Sidebar footer fijo abajo */
.sidenav-footer {
  position: sticky !important;
  bottom: 0 !important;
  background: white !important;
  z-index: 10 !important;
  padding-bottom: 1rem !important;
}

/* ✅ Main content con margen correcto */
@media (min-width: 1200px) {
  .g-sidenav-show .main-content {
    margin-left: 17rem !important; /* Coincide con el ancho del sidebar */
  }
}

/* ✅ Botón cerrar sesión estilo MAS+ */
.btn-outline-danger {
  border-width: 1.5px !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.5px !important;
}

.btn-outline-danger:hover {
  background-color: #f5365c !important;
  border-color: #f5365c !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(245, 54, 92, 0.3);
}