:root {
  /* Sidebar: azul pizarra suave (antes navy oscuro) */
  --sgp-sidebar: #33475B;
  --sgp-sidebar-light: #435A72;

  /* Acento secundario (tabs, badges de rol, auth) */
  --sgp-accent: #2F6690;
  --sgp-accent-dark: #274F70;

  /* Acento primario de marca: ámbar (antes azul acero en botones) */
  --sgp-amber: #E8A33D;
  --sgp-amber-dark: #D6922E;
  --sgp-amber-soft: #FBF0DD;

  /* Superficies */
  --sgp-bg: #F4F6F8;
  --sgp-surface: #FFFFFF;
  --sgp-border: #E2E8F0;

  /* Pleca de título de paneles/acordeones (Panel principal) */
  --sgp-panel-header-bg: #EBEFF3;
  --sgp-panel-header-border: #D8E0E8;

  /* Texto */
  --sgp-text: #33475B;
  --sgp-text-muted: #6B7785;

  /* Compatibilidad con nombres anteriores (por si quedara alguna referencia suelta) */
  --sgp-navy: #33475B;
  --sgp-navy-light: #435A72;
  --sgp-steel: #2F6690;

  /* Pares suaves (fondo pastel + texto saturado) por color de estado */
  --sgp-soft-yellow-bg: #FDF3D6;
  --sgp-soft-yellow-text: #8A6D14;
  --sgp-soft-cyan-bg: #D9EFF5;
  --sgp-soft-cyan-text: #0E7490;
  --sgp-soft-green-bg: #E1F5E5;
  --sgp-soft-green-text: #2F9E44;
  --sgp-soft-red-bg: #FBE1E3;
  --sgp-soft-red-text: #C0293B;
  --sgp-soft-purple-bg: #EDE6F9;
  --sgp-soft-purple-text: #7048B0;
  --sgp-soft-orange-bg: #FBEADA;
  --sgp-soft-orange-text: #B5651D;
  --sgp-soft-gray-bg: #E9ECEF;
  --sgp-soft-gray-text: #5A6472;
}

body {
  background-color: var(--sgp-bg);
  color: var(--sgp-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.sgp-sidebar {
  min-height: 100vh;
}

/* El sidebar es un offcanvas-md: Bootstrap lo vuelve "transparente" con
   !important en pantallas >= md para que actúe como contenedor normal.
   Forzamos el fondo por id, que tiene más especificidad. */
#sidebarOffcanvas {
  background-color: var(--sgp-sidebar) !important;
  color: #fff;
}

#sidebarOffcanvas .offcanvas-header {
  background-color: var(--sgp-sidebar);
}

@media (max-width: 767.98px) {
  #sidebarOffcanvas {
    max-width: 280px;
  }
}

.sgp-topbar-mobile {
  background-color: var(--sgp-sidebar);
}

.sgp-hamburger-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.sgp-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #C9D2DC;
  font-size: 0.95rem;
  padding: .6rem 1rem;
  border-radius: 6px;
  margin-bottom: 2px;
}

.sgp-sidebar .nav-link i.bi {
  font-size: 1rem;
  width: 1.1rem;
  text-align: center;
  flex-shrink: 0;
}

.sgp-sidebar .nav-link:hover {
  background-color: var(--sgp-sidebar-light);
  color: #fff;
}

/* El item de la página actual se distingue en ámbar (marca) del simple hover */
.sgp-sidebar .nav-link.active {
  background-color: var(--sgp-amber);
  color: #2A2E35;
  font-weight: 600;
}

.sgp-sidebar .navbar-brand {
  color: #fff;
  font-weight: 600;
  letter-spacing: .3px;
}

.sgp-role-badge {
  background-color: var(--sgp-accent);
  color: #fff;
  font-size: .7rem;
  padding: .2rem .55rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.btn-sgp {
  background-color: var(--sgp-amber);
  border-color: var(--sgp-amber);
  color: #2A2E35;
  font-weight: 600;
}
.btn-sgp:hover {
  background-color: var(--sgp-amber-dark);
  border-color: var(--sgp-amber-dark);
  color: #2A2E35;
}

/* Botones "Cancelar": deben verse como botón, nunca como link de texto */
.btn-cancelar {
  border: 1px solid #ADB5BD;
  color: #495057;
  background-color: #fff;
}
.btn-cancelar:hover {
  background-color: #F1F3F5;
  border-color: #ADB5BD;
  color: #495057;
}

/* Botón de acción "peligrosa" (Rechazar OC, Desactivar, Eliminar): relleno
   rojo por default, se vacía (outline) en hover */
.btn-accion-peligro {
  background-color: #DC3545;
  border-color: #DC3545;
  color: #fff;
}
.btn-accion-peligro:hover {
  background-color: transparent;
  border-color: #DC3545;
  color: #DC3545;
}

/* Botones de icono de acción (Editar/Ver/PDF/Historial/Activar, etc.) en
   tablas: relleno por default, se vacía (outline) en hover */
.btn-accion {
  background-color: var(--sgp-accent-dark);
  border-color: var(--sgp-accent-dark);
  color: #fff;
}
.btn-accion:hover {
  background-color: transparent;
  border-color: var(--sgp-accent-dark);
  color: var(--sgp-accent-dark);
}

/* Tabs con apariencia de botón (en vez de links de texto/pills planos) */
.sgp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.sgp-tabs .nav-link {
  border: 1px solid var(--sgp-accent);
  border-radius: 6px;
  color: var(--sgp-accent);
  background-color: #fff;
  padding: .4rem .9rem;
  font-size: .9rem;
}
.sgp-tabs .nav-link:hover {
  background-color: #EAF1F6;
}
.sgp-tabs .nav-link.active {
  background-color: var(--sgp-accent);
  border-color: var(--sgp-accent);
  color: #fff;
}

/* Paginación (Asignaciones, Cotizaciones, OC, OP, Pagos, Catálogos de
   Insumos/Materiales/generales, Proveedores, Almacén): mismos colores de
   marca que el resto de la interfaz, en vez del azul por default de
   Bootstrap. Un solo bloque de reglas cubre todos los módulos porque todos
   comparten el mismo marcado .pagination/.page-item/.page-link, ya sea
   pintado por PHP (renderizarPaginacion()) o por JS en las tablas que se
   sincronizan solas. */
.pagination .page-link {
  color: var(--sgp-accent);
  border-color: var(--sgp-border);
}
.pagination .page-link:hover {
  background-color: #EAF1F6;
  border-color: var(--sgp-border);
  color: var(--sgp-accent-dark);
}
.pagination .page-link:focus {
  box-shadow: 0 0 0 .2rem rgba(232, 163, 61, .25);
}
.pagination .page-item.active .page-link {
  background-color: var(--sgp-amber);
  border-color: var(--sgp-amber);
  color: #2A2E35;
  font-weight: 600;
}
.pagination .page-item.disabled .page-link {
  color: var(--sgp-text-muted);
  background-color: #fff;
  border-color: var(--sgp-border);
}

/* Wrapper visual del contenido de un tab: deja claro qué controles
   pertenecen al tab activo cuando se cambia de uno a otro */
.sgp-tab-panel {
  border: 1px solid var(--sgp-border);
  border-radius: 8px;
  padding: 1.25rem;
  background-color: var(--sgp-surface);
}

/* Pleca de título de los paneles/acordeones colapsables (Panel principal):
   una franja de fondo que distingue el título del contenido, en el mismo
   tono suave de la paleta en vez del blanco liso de la tarjeta. */
.sgp-panel-header {
  background-color: var(--sgp-panel-header-bg);
  border: 1px solid var(--sgp-panel-header-border);
  border-radius: 8px;
  padding: .6rem 1rem !important;
}
.sgp-panel-header h6 {
  color: var(--sgp-text);
}

.sgp-auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sgp-sidebar) 0%, var(--sgp-accent) 100%);
}

.sgp-auth-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  max-width: 420px;
  width: 100%;
  padding: 2.5rem;
}

.sgp-auth-card .brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--sgp-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sgp-sidebar);
  font-weight: 700;
  font-size: 1.2rem;
}

.badge-estado {
  font-size: .75rem;
  padding: .35rem .6rem;
  font-weight: 600;
}

.badge-cot-borrador {
  background-color: var(--sgp-soft-yellow-bg) !important;
  color: var(--sgp-soft-yellow-text) !important;
}

.badge-cot-enviada {
  background-color: var(--sgp-soft-cyan-bg) !important;
  color: var(--sgp-soft-cyan-text) !important;
}

.badge-cot-convertida {
  background-color: var(--sgp-soft-green-bg) !important;
  color: var(--sgp-soft-green-text) !important;
}

.badge-op-creado {
  background-color: var(--sgp-soft-orange-bg) !important;
  color: var(--sgp-soft-orange-text) !important;
}

.badge-op-asignado {
  background-color: var(--sgp-soft-purple-bg) !important;
  color: var(--sgp-soft-purple-text) !important;
}

.badge-op-terminado {
  background-color: var(--sgp-soft-green-bg) !important;
  color: var(--sgp-soft-green-text) !important;
}

.badge-op-en_proceso {
  background-color: var(--sgp-soft-cyan-bg) !important;
  color: var(--sgp-soft-cyan-text) !important;
}

.badge-asig-pendiente {
  background-color: var(--sgp-soft-yellow-bg) !important;
  color: var(--sgp-soft-yellow-text) !important;
}
.badge-asig-proceso {
  background-color: var(--sgp-soft-cyan-bg) !important;
  color: var(--sgp-soft-cyan-text) !important;
}
.badge-asig-terminada {
  background-color: var(--sgp-soft-green-bg) !important;
  color: var(--sgp-soft-green-text) !important;
}
.badge-asig-excedida {
  background-color: var(--sgp-soft-red-bg) !important;
  color: var(--sgp-soft-red-text) !important;
}

.badge-oc-por_enviar {
  background-color: var(--sgp-soft-yellow-bg) !important;
  color: var(--sgp-soft-yellow-text) !important;
}

.badge-oc-autorizada {
  background-color: var(--sgp-soft-green-bg) !important;
  color: var(--sgp-soft-green-text) !important;
}

.badge-oc-enviada_correo {
  background-color: var(--sgp-soft-cyan-bg) !important;
  color: var(--sgp-soft-cyan-text) !important;
}

.badge-oc-rechazada {
  background-color: var(--sgp-soft-red-bg) !important;
  color: var(--sgp-soft-red-text) !important;
}

.badge-cpp-pendiente {
  background-color: var(--sgp-soft-yellow-bg) !important;
  color: var(--sgp-soft-yellow-text) !important;
}

.badge-cpp-pagando {
  background-color: var(--sgp-soft-purple-bg) !important;
  color: var(--sgp-soft-purple-text) !important;
}

.badge-cpp-pagada {
  background-color: var(--sgp-soft-green-bg) !important;
  color: var(--sgp-soft-green-text) !important;
}

.badge-cpp-proxima-vencer {
  background-color: var(--sgp-soft-yellow-bg) !important;
  color: var(--sgp-soft-yellow-text) !important;
}

.badge-cpp-vencida {
  background-color: var(--sgp-soft-red-bg) !important;
  color: var(--sgp-soft-red-text) !important;
}

/* Badges genéricos de Activo/Inactivo (Catálogos de Materiales/Insumos/
   generales, Proveedores, Usuarios) — mismo estilo "soft" que el resto */
.badge-activo {
  background-color: var(--sgp-soft-green-bg) !important;
  color: var(--sgp-soft-green-text) !important;
}
.badge-inactivo {
  background-color: var(--sgp-soft-gray-bg) !important;
  color: var(--sgp-soft-gray-text) !important;
}

/* Badges de Almacén: nivel de stock (index) y tipo de movimiento (historial) */
.badge-almacen-normal {
  background-color: var(--sgp-soft-green-bg) !important;
  color: var(--sgp-soft-green-text) !important;
}
.badge-almacen-bajo {
  background-color: var(--sgp-soft-red-bg) !important;
  color: var(--sgp-soft-red-text) !important;
}
.badge-almacen-entrada {
  background-color: var(--sgp-soft-green-bg) !important;
  color: var(--sgp-soft-green-text) !important;
}
.badge-almacen-salida {
  background-color: var(--sgp-soft-red-bg) !important;
  color: var(--sgp-soft-red-text) !important;
}

/* ---------------------------------------------------------
   Módulo Eficiencia: anillos, barras, ranking y mapa de calor
   --------------------------------------------------------- */
.sgp-efi-ring {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sgp-efi-ring .hole {
  position: absolute;
  inset: 7px;
  background: var(--sgp-surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--sgp-text);
  text-align: center;
  line-height: 1.1;
}
.sgp-efi-kpi-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--sgp-text-muted);
  margin-bottom: .15rem;
}
.sgp-efi-kpi-value {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.sgp-efi-empty {
  color: var(--sgp-text-muted);
  font-size: .85rem;
  margin: 0;
}

.sgp-efi-bar-row {
  display: grid;
  grid-template-columns: 150px 1fr 46px;
  align-items: center;
  gap: .6rem;
  margin-bottom: .65rem;
  font-size: .83rem;
}
.sgp-efi-bar-row:last-child { margin-bottom: 0; }
.sgp-efi-bar-track {
  background: #EEF1F4;
  border-radius: 5px;
  height: 14px;
  overflow: hidden;
}
.sgp-efi-bar-fill {
  height: 100%;
  border-radius: 5px;
}
.sgp-efi-bar-value {
  text-align: right;
  font-weight: 700;
}

.sgp-efi-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sgp-efi-rank-list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 0;
  border-bottom: 1px dashed var(--sgp-border);
  font-size: .85rem;
}
.sgp-efi-rank-list li:last-child { border-bottom: none; }
.sgp-efi-rank-badge {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--sgp-panel-header-bg);
  color: var(--sgp-text-muted);
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sgp-efi-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--sgp-text-muted);
  margin-right: .9rem;
}
.sgp-efi-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.sgp-efi-heatmap {
  display: grid;
  grid-template-columns: 150px repeat(7, 1fr);
  gap: 4px;
  font-size: .72rem;
}
.sgp-efi-heat-cell {
  border-radius: 4px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2A2E35;
  font-weight: 600;
}
.sgp-efi-heat-label {
  display: flex;
  align-items: center;
  color: var(--sgp-text);
  font-size: .78rem;
}
.sgp-efi-heat-day {
  text-align: center;
  color: var(--sgp-text-muted);
  font-weight: 600;
}

/* Punto pulsante para marcar actividades EN VIVO en el planning */
.punto-en-vivo {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #67BA6E;
  margin-right: 4px;
  animation: pulso-en-vivo 1.5s infinite;
}
@keyframes pulso-en-vivo {
  0% { box-shadow: 0 0 0 0 rgba(103, 186, 110, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(103, 186, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(103, 186, 110, 0); }
}

/* Ícono que gira al colapsar/expandir una sección (dashboard) */
.icono-colapso {
  display: inline-block;
  transition: transform 0.2s;
}
.btn[data-bs-toggle="collapse"].collapsed .icono-colapso {
  transform: rotate(-90deg);
}

/* Tooltips (planning): fondo claro con texto oscuro, en vez del negro por default de Bootstrap */
.tooltip .tooltip-inner {
  background-color: var(--sgp-accent);
  color: #ffffff;
  text-align: center;
  border: 1px solid var(--sgp-accent);
  box-shadow: 10px 10px 5px 0px #3333;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--sgp-accent);
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--sgp-accent);
}
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--sgp-accent);
}
.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--sgp-accent);
}

.bg-light {
  background-color: #EDF2F7 !important;
}

/* Refuerzo del scroll interno del modal de Pago: el header y el pie con los
   botones ("Registrar pago" / "Cerrar") siempre quedan visibles, sin
   importar qué tan largo crezca el contenido de en medio. */
#modalPagoCPP {
  padding-right: 0 !important;
}
#modalPagoCPP .modal-dialog {
  max-height: calc(100vh - 3.5rem);
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
  display: flex;
}
#modalPagoCPP .modal-content {
  max-height: calc(100vh - 3.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#modalPagoCPP .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#modalPagoCPP .modal-header,
#modalPagoCPP .modal-footer {
  flex: 0 0 auto;
}
#modalPagoCPP .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}