/* =========================
   MOBILE ESTILOS
   ========================= */

.mi-popup {
  background: linear-gradient(180deg, #0b1f3a, #1e2022) !important;
  border-radius: 20px !important;
  padding: 25px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
  border: 1px solid rgba(255,255,255,0.05);
}

/* Botón principal (igual que tus cards / azul sistema) */
.mi-btn-confirm {
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 600;
  color: white;
}

/* Botón secundario */
.mi-btn-cancel {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 18px;
  color: #cfd8dc;
}

/* BASE (desktop) */
.mobile-dashboard {
  display: none;
}

.bottom-nav {
  display: none;
}


.mobile-header .right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-header .right i {
  font-size: 18px;
  color: #cbd5f5;
}

.avatar-icon {
  font-size: 22px;
  margin-right: 8px;
  color: #60a5fa;
}

.avatar-circle i {
  color: #ffffff;
  font-size: 16px;
}

@media (max-width: 768px) {

  /* BODY */
  body {
    background: linear-gradient(
      180deg,
      #0b1f3a 0%,
      #081a33 40%,
      #050b18 100%
    ) !important;
    min-height: 100vh;
    font-family: 'Segoe UI', sans-serif;
  }

  body.menu-page {
    display: block;
  }

  /* OCULTAR DESKTOP */
  body.menu-page .sidebar,
  body.menu-page .menu-home {
    display: none;
  }

  /* DASHBOARD */
  .mobile-dashboard {
    display: block;
    width: 100%;
	  padding: 12px;
	  padding-bottom: 110px;
  }

  .resumen-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .card > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* HEADER */
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(11, 31, 58, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5px;
  }

  .mobile-header .left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-header span {
    font-weight: 600;
    font-size: 16px;
  }

  .mobile-title {
    margin-bottom: 15px;
  }

  .mobile-title h2 {
    text-align: left;
    font-size: 26px;
    font-weight: 700;
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 12px 0;
  }

  .mobile-title p {
    margin-bottom: 12px;
    color: #9ca3af;
    font-size: 13px;
  }

	.filtro-dashboard {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  margin-bottom: 20px;	
  font-size: 12px;
  color: #b8c5d6;
}

.filtro-dashboard .label {
  opacity: 0.7;
}

.select-responsable {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  outline: none;
}

  /* =========================
     CARDS 
     ========================= */

  .card {
    background: linear-gradient(145deg, #0f223f, #0b1a33);
    border-radius: 20px;
    padding: 18px;
    position: relative;
    box-shadow: 
      0 10px 30px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,255,255,0.05);
    margin-bottom: 15px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .card-desc {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
  }

  .card span {
    font-size: 12px;
    letter-spacing: 1px;
  }

  .card.red span { color: #ff4d4d; font-weight: bold; }
  .card.green span { color: #00e676; font-weight: bold; }
  .card.yellow span { color: #ffb300; font-weight: bold; }
  .card.orange span { color: #ff9100; font-weight: bold; }
  .card.blue span { color: #2979ff; font-weight: bold; }

  .card h2 {
    font-size: 32px;
    font-weight: 700;
    margin-top: 8px;
  }

  .card.red {
    border-left: 4px solid #ff4d4d;
    box-shadow: 0 0 15px rgba(255,77,77,0.2);
  }

  .card.green {
    border-left: 4px solid #00e676;
    box-shadow: 0 0 15px rgba(0,230,118,0.2);
  }

.card.yellow {
  border-left: 4px solid #ffd600;
  box-shadow: 0 0 15px rgba(255,214,0,0.25);
}

.card.yellow span {
  color: #ffe082;
  font-weight: bold;
}

	/* 🟠 RIESGO */
	.card.orange {
	  border-left: 4px solid #ff9100;
	  box-shadow: 0 0 15px rgba(255,145,0,0.2);
	}


  .card-icon {
    font-size: 22px;
    opacity: 0.15;
    margin-left: 10px;
  }

  .card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent);
    border-radius: 50%;
  }

.stocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: 13px;
  margin-top: 15px;
}

.stocks span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 10px 0;
}

.coberturas {
  display: flex;
  gap: 10px;
}

.bloque {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bloque .titulo {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bloque .valor {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bloque .sub {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.titulo {
  font-size: 11px;
  opacity: 0.6;
}

.valor {
  font-weight: bold;
  font-size: 14px;
}

.sub {
  font-size: 10px;
  opacity: 0.5;
}

	.rojo {
  color: #ff4d4d;
}

.verde {
  color: #00e676;
}

.amarillo {
  color: #ffb300;
}

.estado-filtro {
  margin: 12px 16px;
  padding: 10px 14px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 13px;
  font-weight: 500;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(6px);
}

/* ICONO */
.estado-filtro i {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;

  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: hidden; 
}
	
.hidden {
  display: none;
}

.card-dim {
  opacity: 0.65;
  transform: scale(0.98);
}

.card-active {
  transform: scale(1.02);
  box-shadow: 0 0 18px rgba(255,255,255,0.08);
}

.extra-info {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.extra-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 10px;
}

.extra-card .icon {
  font-size: 20px;
  color: #4da3ff;
}

.extra-card .titulo {
  font-size: 12px;
  opacity: 0.7;
}

.extra-card .valor {
  font-size: 13px;
  font-weight: bold;
}

.verde { color: #00e676; }
.naranja { color: #ffa726; }
	
  /* =========================
     INVENTARIO MOBILE
     ========================= */

  .card-item {
    background: linear-gradient(145deg, #0f2a4a, #0b1f3a);
    border-radius: 14px;
    padding: 14px;
    margin: 10px 0;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.15s ease;
  }

  .card-item:active {
    transform: scale(0.97);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .codigo {
    color: #7ab8ff;
    font-weight: 600;
    font-size: 13px;
  }

  .descripcion {
    font-size: 13px;
    margin: 4px 0 8px;
    opacity: 0.9;
  }

  .cobertura {
    font-weight: bold;
    font-size: 14px;
  }

  .rojo { color: #ff4d4d; }
  .verde { color: #00e676; }
  .amarillo { color: #ffb300; }

  .card-footer {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    opacity: 0.7;
  }

  .fab {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.5);
    transition: transform 0.2s ease;
  }

  .fab:active {
    transform: scale(0.9);
  }

  /* NAVBAR */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    justify-content: space-around;
    padding: 10px 0;
    background: rgba(11, 31, 58, 0.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.05);
    z-index: 999;
  }
	
  #detalle-materiales {
  margin-bottom: 20px;
}

  .bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 11px;
    opacity: 0.7;
  }

  .bottom-nav a.active {
    opacity: 1;
    color: #60a5fa;
  }

  .bottom-nav i {
    font-size: 18px;
    margin-bottom: 4px;
  }


	#detalle-materiales::after {
	  content: "";
	  display: block;
	  height: 95px;
	}
	
	.fab {
	  z-index: 10;
	}
	
	.bottom-nav {
	  z-index: 20;
	}

	.fab {
  display: none;
	}

	
/* =========================
   DETALLE SKU
   ========================= */

.detalle-wrapper {
  padding: 16px;
  padding-bottom: 100px;
}

.detalle-topbar {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 10px;
}

.detalle-card-principal {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 22px;

  color: white;

  box-shadow: 
    0 20px 40px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.detalle-container {
    color: #ffffff;
  padding: 16px;
}

.detalle-titulo {
  font-size: 18px;
  font-weight: 700;
  margin: 6px 0;
}

.detalle-sub {
  font-size: 11px;
  opacity: 0.5;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.detalle-section-title span {
  font-size: 12px;
  opacity: 0.6;
}
	
.detalle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.detalle-mini {
  background: rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 12px;
}

.detalle-section {
  margin-top: 20px;
}

.detalle-section-title {
  font-size: 14px;
  font-weight: 600;
  margin: 18px 0 10px;
  color: #cbd5f5;
}

.detalle-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 10px;
  font-weight: 600;
  color: #cbd5f5;
}

.stock-total {
  font-size: 12px;
  opacity: 0.7;
}
	
.detalle-item {
  background: linear-gradient(145deg, #0f223f, #0b1a33);
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 12px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}

	.detalle-item span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detalle-item span:last-child {
  font-weight: 600;
  font-size: 14px;
}
	
.detalle-item i {
  margin-right: 6px;
}

.detalle-label {
  font-size: 12px;
  opacity: 0.6;
}

.detalle-value {
  font-weight: bold;
}

.detalle-boton {
  text-align: center;
  margin-top: 20px;
}

.detalle-boton button {
  background: #3b82f6;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  color: white;
}
	
  /* =========================
     INVENTARIO
     ========================= */
	
/* ICONOS  */
.icon-disponible {
  color: #22c55e; /* verde */
}

.icon-desmontaje {
  color: #f59e0b; /* amarillo */
}

.icon-bloqueado {
  color: #ef4444; /* rojo */
}

.icon-neutral {
  color: #94a3b8; /* gris azulado */
}

.detalle-topbar {
  font-size: 18px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 14px;
}

}

.filtros-container {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.buscador-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: #0e2a4d;
  border-radius: 12px;
  padding: 8px 10px;
}

.buscador-box i {
  margin-right: 6px;
  opacity: 0.7;
}

.buscador-box input {
  background: transparent;
  border: none;
  outline: none;
  color: white;
  width: 100%;
}

.filtro-select {
  background: #0e2a4d;
  border-radius: 10px;
  border: none;
  color: white;
  padding: 8px;
}

/* CARD */
.card-item {
  position: relative;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(145deg, #0b223f, #0a1c33);
}

/* BORDE POR ESTADO */
.card-item.rojo {
  border-left: 4px solid #ff4d4f;
  box-shadow: 0 0 12px rgba(255,77,79,0.2);
}

.card-item.verde {
  border-left: 4px solid #2ecc71;
  box-shadow: 0 0 12px rgba(46,204,113,0.2);
}

.card-item.amarillo {
  border-left: 4px solid #f1c40f;
  box-shadow: 0 0 12px rgba(241,196,15,0.2);
}

.card-item.naranja {
  border-left: 4px solid #ff9100;
  box-shadow: 0 0 12px rgba(255,145,0,0.2);
}

.card-item.azul {
  border-left: 4px solid #2979ff;
  box-shadow: 0 0 12px rgba(41,121,255,0.2);
}

/* HEADER */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* CODIGO */
.codigo-row {
  align-items: center; 
  display: flex;
  gap: 6px;
  font-size: 13px;
}

.codigo-row .label {
  min-width: 55px;
  color: #6fa8ff;
  font-weight: bold;
  font-size: 13px;
}

.codigo {
  font-weight: bold;
  color: #6fa8ff;
}

/* DESCRIPCIÓN */
.descripcion {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
}

/* BADGE */
.badge {
  background: #111;
  color: #ccc;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 10px;
  font-weight: 600;
}

/* METRICS */
.metrics {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  text-align: center;
}

.metric {
  display: flex;
  flex-direction: column;
}

/* LABELS (GRIS) */
.label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

/* VALORES */
.value {
  font-size: 14px;
  font-weight: bold;
  margin-top: 4px;
  color: #ffffff;
}


.warn {
  font-size: 11px;
  margin-left: 4px;
  vertical-align: middle;
}

/* COBERTURA (ALINEADA) */
.cobertura-linea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.cobertura-text {
  font-weight: bold;
  font-size: 14px;
}

/* BARRA */
.barra-cobertura {
  margin-top: 8px;
  height: 6px;
  background: #1a2f4d;
  border-radius: 10px;
  overflow: hidden;
}

.barra-fill {
  height: 100%;
  border-radius: 10px;
}

/* COLORES */
.rojo { color: #ff4d4f; }
.amarillo { color: #f1c40f; }
.verde { color: #2ecc71; }

/* 🔴 CRITICO */
.barra-fill.rojo {
  background: #ff4d4f;
}

/* 🟢 OPTIMO */
.barra-fill.verde {
  background: #2ecc71;
}

/* 🟡 SOBRESTOCK */
.barra-fill.amarillo {
  background: #f1c40f;
}

/* 🟠 RIESGO */
.barra-fill.naranja {
  background: #ff9100;
}

/* 🔵 EN REPOSICION */
.barra-fill.azul {
  background: #2979ff;
}

/* ALERTA */
.alerta {
  margin-top: 10px;
  font-size: 11px;
  color: #ffb300;
}

.orden-container {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  opacity: 0.85;
  cursor: pointer;
}

.orden-valor {
  font-weight: 600;
  color: #6fa8ff;
}

.orden-container:hover {
  opacity: 1;
}

#lista::after {
  content: "";
  display: block;
  height: 95px;
}

/* =========================
   COMPRAS MOBILE 
   ========================= */

.compras-resumen {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.resumen-box {
  flex: 1;
  background: linear-gradient(145deg, #0f223f, #0b1a33);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.resumen-box i {
  font-size: 20px;
  opacity: 0.8;
}

.resumen-box span {
  font-size: 11px;
  opacity: 0.6;
  letter-spacing: 0.5px;
}

.resumen-box h3 {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 700;
}

/* FILTROS*/

.filtros-chips {
  display: flex;
  gap: 8px;
  margin: 14px 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.chip {
  padding: 6px 12px;
  border-radius: 20px;
  background: #0e2a4d;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.2s;
}

.chip:hover {
  background: #163a66;
}

.chip.active {
  background: #2563eb;
  font-weight: 600;
}

/* =========================
   CARD COMPRAS (STITCH STYLE)
   ========================= */

.compra-card {
  background: linear-gradient(145deg, #0b223f, #0a1c33);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

/* borde lateral como Stitch */
.compra-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 10px;
  background: #2563eb;
}

/* HEADER */
.compra-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compra-proveedor {
  font-weight: 600;
  font-size: 14px;
}

/* BADGE ESTADO */
.estado-badge {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.estado-IN_TRANSIT { 
  background: #1d4ed8; 
}

.estado-PROCESSING { 
  background: #475569; 
}

.estado-DELAYED { 
  background: #dc2626; 
}

.estado-PENDIENTE { 
  background: #facc15;
  color: #1e293b;
}

/* DETALLE */
.compra-detalle {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.9;
}

/* FECHA */
.compra-fecha {
  margin-top: 8px;
  font-size: 11px;
  opacity: 0.6;
}

/*EFECTO HOVER*/

.compra-card:active {
  transform: scale(0.98);
}

#listaCompras::after {
  content: "";
  display: block;
  height: 80px;
}

/* PROVEEDOR */
.compra-proveedor {
  font-weight: 600;
  font-size: 14px;
  margin-top: 6px;
}

/* GRID */
.compra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.compra-grid .label {
  font-size: 11px;
  opacity: 0.6;
}

.compra-grid .value {
  font-weight: 600;
  margin-top: 2px;
}

/*  (OC + PROVEEDOR) */
.meta-top {
  font-size: 13px;
  color: #6fa8ff;
  font-weight: bold;
}

.proveedor {
  margin-top: 2px;
}

/* DESCRIPCIÓN */
.descripcion {
  font-size: 14px;
  font-weight: 700;
  margin-top: 6px;
}

/* GRID */
.compra-grid {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.label {
  font-size: 11px;
  opacity: 0.6;
}

.value {
  font-weight: 600;
  margin-top: 2px;
}

/* ETA */
.compra-fecha {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 6px;
}

/*BACKLOG DISEÑO MOBILE*/
.estado-VENCIDO { background: #dc2626; }
.estado-POR\ VENCER { background: #f59e0b; }
.estado-EN\ PLAZO { background: #16a34a; }
.top-clientes-box {
  background: linear-gradient(145deg, #0f223f, #0b1a33);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

/* HEADER */
.top-header {
  margin-bottom: 12px;
}

.top-title {
  font-size: 14px;
  font-weight: 700;
}

.top-subtitle {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 2px;
}

/* CONTENEDOR INTERNO (ESTILO FIGMA) */
.top-clientes-inner {
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 14px;
}

/* ITEM */
.top-item {
  margin-bottom: 14px;
}

.top-item:last-child {
  margin-bottom: 0;
}

/* TEXTO */
.top-item span {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.top-item strong {
  font-weight: 600;
  opacity: 0.9;
}

/* BARRA (CLAVE) */
.top-bar {
  height: 8px; /* 🔥 más gruesa */
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

/* PROGRESS */
.top-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 20px;
  transition: width 0.4s ease;
}

.top-clientes-inner {
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.05);
}

.backlog-page .mobile-dashboard > * {
  margin-bottom: 14px;
}

.backlog-page .top-clientes-box {
  margin-top: 10px;
  margin-bottom: 18px;
}

.backlog-page .compra-card {
  margin-bottom: 18px;
}

.backlog-page .top-item {
  margin-bottom: 16px;
}

#listaBacklog::after {
  content: "";
  display: block;
  height: 95px;
}

/* =========================
   KPI BACKLOG
   ========================= */

.resumen-box:nth-child(1) {
  border-left: 4px solid #3b82f6; /* total (azul) */
}

.compras-resumen .resumen-box:nth-child(1) {
  border-left: 4px solid #ef4444; /* VENCIDO */
}

.compras-resumen .resumen-box:nth-child(2) {
  border-left: 4px solid #f59e0b; /* POR VENCER */
}

.compras-resumen .resumen-box:nth-child(3) {
  border-left: 4px solid #22c55e; /* EN PLAZO */
}

.compras-resumen .resumen-box:nth-child(1) {
  box-shadow: 0 0 12px rgba(239,68,68,0.25);
}

.compras-resumen .resumen-box:nth-child(2) {
  box-shadow: 0 0 12px rgba(245,158,11,0.25);
}

.compras-resumen .resumen-box:nth-child(3) {
  box-shadow: 0 0 12px rgba(34,197,94,0.25);
}

.chart-box {
  margin-top: 16px;
  background: linear-gradient(145deg, #0b223f, #0a1c33);
  border-radius: 18px;
  padding: 12px;
}

.chart-box canvas {
  max-height: 220px;
}

.compras-page .compras-resumen .resumen-box:nth-child(1) {
  border-left: 4px solid #3b82f6; /* azul */
}

.compras-page .compras-resumen .resumen-box:nth-child(2) {
  border-left: 4px solid #f59e0b; /* amarillo */
}

.backlog-extra {
  margin-top: 8px;
  font-size: 11px;
  opacity: 0.75;
  color: #9ca3af;
  display: flex;
  justify-content: space-between;
}

* 🔹 Bloque compromisos */
.compromisos-box {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.compromisos-title {
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 4px;
margin-top: 6px;
}

.compromisos-valores {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #e5e7eb;
}

/* 🔹 Mejora visual opcional */
.compra-grid {
  margin-top: 6px;
}

/* 🔥 Colores por cobertura (prepárate para lo siguiente) */
.cobertura-critica {
  color: #ef4444;
}

.cobertura-riesgo {
  color: #f59e0b;
}

.cobertura-ok {
  color: #22c55e;
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.cliente-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-weight: bold;
}

.cliente-total {
  flex-shrink: 0;
}

.resumen-main {
  background: #0f1f35;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.resumen-total span {
  font-size: 12px;
  opacity: 0.7;
}

.resumen-total h2 {
  font-size: 32px;
  margin: 5px 0 15px;
}

.resumen-mini {
  display: flex;
  gap: 12px;
}

.mini-card {
  flex: 1;
  background: #0b1728;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

.mini-card span {
  font-size: 10px;
  opacity: 0.6;
}

.mini-card h3 {
  margin-top: 6px;
  font-size: 18px;
}

.resumen-top {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: 0.7;
}

.barra-box {
  height: 6px;
  background: #1e293b;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 6px;
}

.barra-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.4s ease;
}

.barra-fill.vencido { background: #ef4444; }
.barra-fill.porvencer { background: #f59e0b; }
.barra-fill.enplazo { background: #3b82f6; }

.resumen-foot {
  font-size: 10px;
  opacity: 0.6;
  margin-top: 6px;
}

.backlog-page .compras-resumen .resumen-box {
  border: none !important;
  box-shadow: none !important;
  background: #0b1728;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.backlog-page .resumen-box h3 {
  font-size: 20px;
  margin: 6px 0;
}

.backlog-page .resumen-foot {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 6px;
}

.backlog-page .resumen-top span {
  font-size: 11px;
  opacity: 0.7;
}

.backlog-page .resumen-box {
  position: relative;
  overflow: hidden;
}

/* línea superior */
.backlog-page .resumen-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  border-radius: 12px 12px 0 0;
}

/* colores */
.backlog-page .resumen-box.vencido::before {
  background: #ef4444;
}

.backlog-page .resumen-box.porvencer::before {
  background: #f59e0b;
}

.backlog-page .resumen-box.enplazo::before {
  background: #3b82f6;
}

.backlog-page .resumen-box.vencido h3 {
  color: #f87171;
}

.backlog-page .resumen-box.porvencer h3 {
  color: #fbbf24;
}

.backlog-page .resumen-box.enplazo h3 {
  color: #60a5fa;
}

.resumen-lista-backlog {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin: 6px 8px 10px;
  font-weight: 400;
}

.resumen-lista-backlog strong {
  color: #4ea1ff;
  font-weight: 600;
}


.top-item .cliente-adp {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
  margin-bottom: 4px;
  font-weight: 400;
}

.top-item .cliente-total {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
}
  /* =========================
     FIN DISEÑO MOBILE
     ========================= */


/*LOGIN DISEÑO ACTUALIZADO*/

body.login-page {
  margin: 0;
  font-family: 'Arial', sans-serif;
  background-color: #1a2b3c;
  display: flex;
  justify-content: center;
  align-items: center; 
  min-height: 100vh;
}

@media (max-width: 480px) {
  .login-container {
    width: 95%;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 25px;
  }
}

@media (max-width: 480px) {
  .copyright {
    left: 0;
    right: 0;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .options {
    flex-direction: column;
    gap: 10px;
  }

  .login-btn {
    width: 100%;
  }
}

.login-container {
  background-color: #2c3e50;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  width: 90%;
  max-width: 340px;
  color: #ecf0f1;
}

.link-recuperacion {
  font-size: 0.8em;
  color: #ccc;
  text-decoration: underline;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  font-weight: normal;
  letter-spacing: 1px;
  color: #ecf0f1;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
}

.input-group input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: none;
  border-radius: 4px;
  background-color: #ecf0f1;
  color: #2c3e50;
  font-size: 14px;
  box-sizing: border-box;
}

.input-group img.icon-left {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  opacity: 0.6;
}

.input-group img.icon-right {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}

.options {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.options label {
  font-size: 13px;
  color: #ecf0f1;
}

.login-btn {
  background-color: #11a24e;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
}

.login-btn:hover {
  background-color: #2ecc71;
}

.copyright {
  position: fixed;
  bottom: 10px;
  right: 15px;
  font-size: 12px;
  color: #bdc3c7;
  font-family: 'Arial', sans-serif;
  opacity: 0.7;
}

/*ESTILOS POP UP RECUPERAR CONTRASEÑA*/

.swal-popup-reducido {
  font-size: 0.95em; /* texto general */
}

.swal-titulo-pequeno {
  font-size: 1.4em; /* título */
}

.swal-footer-pequeno {
  font-size: 1em; /* correo/teléfono */
}

/*FIN DE ESTILOS LOGIN*/


/* ===== MENU PRINCIPAL ===== */
body.menu-page .page {
  min-height: 100vh;
  background-color: #1e2022; /* mismo dark que usas en popups */
}

body.menu-page .content {
  width: 100%;
  min-height: 100vh;
  padding: 20px 24px;
  box-sizing: border-box;
  background-color: #2b3a4a;
  color: #ffffff;
}

/* Oculta todo el contenido del body al inicio */
body:not(.login-page):not(.mostrar) {
  display: none;
}

.oculto-rol {
  display: none !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body.menu-page {
  display: flex;
  height: 100vh;
  overflow-x: hidden;
  background-color: #3b4a59;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 220px;
  background-color: #002147;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
  padding: 20px 0;
  z-index: 100;
}

.sidebar .logo {
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 16px;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu a {
  text-decoration: none;
  color: white;
  padding: 10px 20px;
  display: flex;
  gap: 12px;
  transition: background 0.3s;
}

.menu a:hover {
  background-color: #003366;
}

.menu a i {
  min-width: 24px;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}

.logout {
  text-align: center;
  padding: 10px 0;
  margin-top: 30px;
}

.logout a {
  color: #bdc3c7;
  font-size: 20px;
}

.logout a:hover {
  color: #ff4d4d;
}
/*
.topbar {
  width: 90%;
  background-color: #0051ba;
  color: white;
  padding: 15px;
  font-size: 18px;
  margin-left: 5%;
}


.content {
  width: 98%;
  box-sizing: border-box;
}
*/
/* === MÓDULO DE VISUALIZACIÓN DE STOCK === */

.content {
  padding: 40px 30px;
  color: white;
}

.search-bar {
  width: 90%;
  margin-bottom: 20px;
}

.search-bar input {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: none;
}

body:not([data-modulo="compras"]) table {
  width: 95%;
  background-color: white;
  border-collapse: collapse;
  color: black;
}

table, th, td {
  border: 1px solid #ccc;
}

th, td {
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

input[type="number"] {
  width: 80px;
}

/* Ocultar flechas de input number en Chrome y Firefox (opcional estético) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Centrado de columnas clave */
td:nth-child(3),  /* Centro */
td:nth-child(4),  /* Almacén */
td:nth-child(5),  /* Cantidad */
td:nth-child(7),  
td:nth-child(8),  /* Empresa */
td:nth-child(9),  /* Zona */
td:nth-child(10), /* Stock físico */
td:nth-child(11), /* Reservado */
td:nth-child(12)  /* Disponible */ {
  text-align: center;
}

/* Centrado de encabezados: */
th:nth-child(5),
th:nth-child(8),
th:nth-child(9),
th:nth-child(10),
td:nth-child(5),
td:nth-child(8) input,
td:nth-child(9) input,
td:nth-child(10) {
  text-align: center;

}

/* Reducción de tamaño de texto en toda la tabla */

#tablaStock th {
  font-size: 13px;
  color: black;
  background: #f1f1f1;	
}

#tablaStock td {
  font-size: 12px;
  }
  
.encabezado-stock {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.encabezado-stock h2 {
  margin: 0;
  font-size: 24px;
  color: white;
  display: flex;
  gap: 10px;
}

	
.acciones-tabla button {
	  background-color: #11a24e;
  color: white;
  border: none;
  padding: 10px 18px;
  margin-left: 10px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.acciones-tabla button:hover {
  background-color: #27ae60;
}

/* Centrado total del contenido editable (cursor incluido) */
td[contenteditable="true"] {
  vertical-align: middle;
  padding: 6px; /* Puedes ajustar esto para que no se vea pegado */
  line-height: 1.5;
}

td[contenteditable="true"]:empty::before {
  content: "\200B"; /* espacio invisible */
}

td:nth-child(10) {
  text-align: center;
}

td, th {
  word-wrap: break-word;
  white-space: normal;
}

td:nth-child(2), th:nth-child(2) {
  max-width: 240px; /* ajusta según tu diseño */
}

.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center; /* ESTA LÍNEA CENTRA VERTICALMENTE */
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #ccc;
  border-top: 6px solid #007bff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.search-bar-paginacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.search-bar-paginacion input[type="text"] {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 20px;
}

.paginacion button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 6px 12px;
  margin-left: 4px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.paginacion button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.paginacion span {
  font-size: 14px;
  color: #fff;
  margin: 0 8px;
}
/* === FIN MÓDULO DE VISUALIZACIÓN DE STOCK === */

/* ===ALERTA LOGIN INCORRECTO=== */
.swal2-title-custom {
  font-size: 1.3em;
  margin-top: 0.5em;
  font-weight: 600;
}

.swal2-popup-clean {
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}

.swal2-btn-rounded {
  border-radius: 6px !important;
  font-weight: bold;
  padding: 8px 20px;
  font-size: 0.9em;
}

/* Forzar que SweetAlert2 use la fuente del sistema */
.swal2-popup,
.swal2-title,
.swal2-html-container,
.swal2-confirm {
  font-family: 'Arial', sans-serif !important;
}

/* ===FIN ALERTA LOGIN INCORRECTO=== */

/* FONDO BLANCO PARA EL CONTENIDO PRINCIPAL */
/* 
.main-content {
  background-color: white;
  width: 90%;
  padding: 20px;
  margin-left: 5%;
  color: black;
  box-sizing: border-box;
}
*/

/* Título alineado arriba separado */
.titulo-principal {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: bold;
}

/* FIN FONDO BLANCO PARA EL CONTENIDO PRINCIPAL */

/* --- ESTILOS GENERALES PARA MÓDULO PERFIL CENTRADO Y COMPACTO --- */


.perfil-box {
  background-color: #1a2b3c;
  width: 95%;
  max-width: 900px;
  color: white;
  font-size: 14px;
  padding: 20px;
}

.perfil-box .encabezado-stock {
  display: flex;
  margin-bottom: 25px;
}

.perfil-box .encabezado-stock h2 {
  font-size: 22px;
  color: white;
  display: flex;
  gap: 10px;
}

.perfil-box .formulario-perfil {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
  margin-bottom: 30px;	
    margin-left: 15px;
}

.perfil-box .grupo-form {
  flex: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.perfil-box .grupo-form label {
  display: inline-block;
  font-weight: normal;
  font-size: 11.5px;
  margin-bottom: 3px;
  color: #bdc3c7;
}

.perfil-box .grupo-form input {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #bbb;
  border-radius: 4px;
  color: #4d4c4c;	
}

.perfil-box .form-boton {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

.perfil-box .form-boton button {
  background-color: #11a24e;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.perfil-box .form-boton button:hover {
  background-color: #2ecc71;
}

.perfil-box .subtitulo {
  font-size: 16px;
  margin: 15px 0 8px;
  color: #ecf0f1;
}

/* --- ESTILOS GENERALES PARA MÓDULO CENTRO AYUDA --- */
.soporte-box {
  background-color: #1a2b3c;
  width: 40%;
  max-width: 900px;
  color: white;
  font-size: 14px;
  padding: 20px;
}

.soporte-box .encabezado-stock {
  display: flex;
  margin-bottom: 25px;
}

.soporte-box .encabezado-stock h2 {
  font-size: 22px;
  color: white;
  display: flex;
  gap: 10px;
}

.soporte-box .formulario-perfil {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
  margin-bottom: 30px;	
    margin-left: 15px;
}

.soporte-box .grupo-form {
  flex: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.soporte-box .grupo-form label {
  display: inline-block;
  font-weight: normal;
  font-size: 11.5px;
  margin-bottom: 3px;
  color: #bdc3c7;
}

.soporte-box .grupo-form input {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #bbb;
  border-radius: 4px;
  color: #4d4c4c;	
}

.soporte-box .form-boton {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

.soporte-box .form-boton button {
  background-color: #11a24e;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.soporte-box .form-boton button:hover {
  background-color: #2ecc71;
}

.soporte-box .subtitulo {
  font-size: 16px;
  margin: 15px 0 8px;
  color: #ecf0f1;
}

/* --- ESTILOS GENERALES PARA MÓDULO STOCK --- */

.tabla-contenedor {
  max-height: 480px;
  overflow: auto;   /* ← vertical y horizontal juntos */
  position: relative;
}
.tabla-contenedor table {
  width: 100%;
  border-collapse: collapse;
}

/* Header sticky */
#tablaStock thead th {
  position: sticky;
  top: 0;
  background: #f1f1f1;
  z-index: 30;
}

.tabla-contenedor th,
.tabla-contenedor td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.tabla-contenedor th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 2;
}

/* ---PARA GRABAR DATOS EN MODULO STOCK CONTRATAS --- */
.fila-editada {
  background-color: #fff3cd !important; /* amarillo suave */
}

#tablaStock tr.fila-editada:hover {
  background-color: #ffe69c !important;
}
/* --- FIN ESTILOS GENERALES PARA MÓDULO STOCK --- */

/* --- ESTILOS GENERALES PARA MÓDULO TRASPASOS --- */

#tablaTraspasos thead th {
  font-size: 13px; /* o el tamaño que prefieras */
  padding: 6px 8px;
    text-align: center;
}

#tablaTraspasos td {
  text-align: center;
}


/* Inputs solo lectura: look "plomo" como los campos de abajo */
#tablaSolicitud input[readonly]{
  background-color: #a9b0b7;   /* plomo */
  color: #1e2022;
  border: 1px solid #7f8c8d;
  cursor: not-allowed;
}

#tablaSolicitud input[readonly]:focus{
  outline: none;
  box-shadow: none;
}

/* --- ESTILOS  PARA EL SUBMODULO SERIES --- */

/* Asegura que el body y html no permitan scroll horizontal innecesario */
body, html {
  overflow-x: hidden;
}

#tablaSeries td {
  font-size: 12px;
}

#tablaSeries th {
  font-size: 13px;
  color: black;
  background: #f1f1f1;	
}

.tabla-series-container {
  max-width: 95vw;
  overflow-x: auto;
  margin: 0 auto;
  background-color: #fff;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  min-height: 100px;
  font-size: 15px;
  box-sizing: border-box;
}

body.menu-page .search-bar input {
  width: 90%;
  margin: 20px auto;
  display: block;
}

.encabezado-series {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.acciones-series {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.acciones-series button {
  background-color: #11a24e;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.acciones-series button:hover {
  background-color: #27ae60;
}

.encabezado-series h2 {
  margin-left: 10px;
  font-size: 24px;
  color:white;
  flex: 1;
}

/* Contenedor para scroll horizontal en tablas anchas */


.rojo-suave {
  background-color: #f8d7da !important;
}
.naranja-suave {
  background-color: #fff3cd !important;
}
.verde-suave {
  background-color: #d4edda !important;
}

/* --- FIN DE ESTILOS  PARA EL SUBMODULO SERIES --- */

/* --- ESTILOS  PARA EL SUBMODULO FORMULARIO DE TRASPASOS --- */
.campos-unicos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 15px;
  margin-bottom: 15px;
  max-width: 500px; /* Opcional, para evitar que se estire demasiado */
}

.campos-unicos label {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  color: #ffffff;
}
.campos-unicos input,
.campos-unicos select {
  width: 70%;
  padding: 6px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* --- FORMULARIO DE TRASPASOs --- */
table input,
table select {
  width: 100%;
  box-sizing: border-box;
}

.volver {
  display: inline-block;
  margin: 15px 0;
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
  font-size: 16px;
}

.volver i {
  margin-right: 6px;
}

#tablaSolicitud th:nth-child(1),
#tablaSolicitud td:nth-child(1) { /* Código */
  min-width: 70px;
  width: 8%;
}

#tablaSolicitud th:nth-child(2),
#tablaSolicitud td:nth-child(2) { /* Descripción */
  min-width: 130px;
  width: 12%;
}

#tablaSolicitud th:nth-child(3),
#tablaSolicitud td:nth-child(3) { /* Cantidad */
  min-width: 50px;
  width: 5%;
}

#tablaSolicitud th:nth-child(4),
#tablaSolicitud td:nth-child(4) { /* Serie */
  min-width: 130px;
  width: 11%;
}

#tablaSolicitud th:nth-child(5),
#tablaSolicitud td:nth-child(5) { /* Lote */
  min-width: 120px;
  width: 10%;
}

#tablaSolicitud th:nth-child(6),
#tablaSolicitud td:nth-child(6) { /* UMB */
  min-width: 50px;
  width: 5%;
}

#tablaSolicitud th:nth-child(7),
#tablaSolicitud td:nth-child(7) { /* Almacén Origen */
  min-width: 70px;
  width: 7%;
}

#tablaSolicitud th:nth-child(8),
#tablaSolicitud td:nth-child(8) { /* Centro Origen */
  min-width: 70px;
  width: 7%;
}

#tablaSolicitud th:nth-child(9),
#tablaSolicitud td:nth-child(9) { /* Contrata que entrega */
  min-width: 110px;
  width: 10%;
}

#tablaSolicitud th:nth-child(10),
#tablaSolicitud td:nth-child(10) { /* Almacén Destino */
  min-width: 70px;
  width: 7%;
}

#tablaSolicitud th:nth-child(11),
#tablaSolicitud td:nth-child(11) { /* Centro Destino */
  min-width: 70px;
  width: 7%;
}

#tablaSolicitud th:nth-child(12),
#tablaSolicitud td:nth-child(12) { /* Contrata que entrega */
  min-width: 110px;
  width: 10%;
}

#tablaSolicitud th:nth-child(13),
#tablaSolicitud td:nth-child(13) { /* Contrata que entrega */
  min-width: 110px;
  width: 10%;
}

#tablaSolicitud input,
#tablaSolicitud select {
  text-transform: uppercase;
}

/* FORMULARIO TRASPASO: centrar inputs en columnas específicas */
#tablaSolicitud td:nth-child(3)  input,  /* Cantidad */
#tablaSolicitud td:nth-child(5)  input,  /* Lote */
#tablaSolicitud td:nth-child(6)  input,  /* UMB */
#tablaSolicitud td:nth-child(7)  input,  /* Almacén Origen */
#tablaSolicitud td:nth-child(8)  input,  /* Centro Origen */
#tablaSolicitud td:nth-child(10) input,  /* Almacén Destino */
#tablaSolicitud td:nth-child(11) input,  /* Centro Destino */
#tablaSolicitud td:nth-child(12) input { /* Contrata que recibe */
  text-align: center !important;
}

body.formulario-traspaso.menu-page .content {
  padding: 20px 30px !important;
  color: white;
}

	
body.formulario-traspaso .acciones-tabla button {
	  background-color: #11a24e;
  color: white;
  border: none;
  padding: 10px 18px;
  margin-left: 10px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 10px;
}

/* --- FIN ESTILOS  PARA EL SUBMODULO FORMULARIO DE TRASPASOS --- */

/* ---  ESTILOS PARA EL MODULO DE TRASPASOS --- */
#tablaTraspasos td {
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #333;
}
/* --- FIN ESTILOS PARA EL MODULO DE TRASPASOS --- */


/* ---  ESTILOS PARA EL SUBMODULO DE DETALLE SOLICITUD --- */

#tablaDetalle {
  width: 100% !important;
  border-collapse: collapse; /* opcional para que las celdas no tengan espacios */
}

.detalle-solicitud .tabla-scroll {
  width: 100% !important;
  overflow-x: auto;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#tablaDetalle td,
#tablaDetalle th {
  font-size: 12px !important;
}

/* Aplica solo a la columna Descripción de la tabla de DetalleSolicitud */
#tablaDetalle td:nth-child(2),
#tablaDetalle th:nth-child(2) {
  max-width: 300px; /* Ajusta este valor si deseas más o menos ancho */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.td-descripcion {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.detalle-solicitud.menu-page {
  overflow-x: hidden;         /* Evita scroll lateral */
  width: 100vw;               /* Limita al ancho de la ventana */
}

body.detalle-solicitud .content {
  width: calc(100vw - 200px); /* 220px es el ancho de la sidebar */
  max-width: calc(100vw - 150px);
  padding: 20px 15px;
  box-sizing: border-box;
  overflow-x: auto;           /* Solo la tabla hará scroll si necesita */
}

.td-center {
  text-align: center;
}

.td-left {
  text-align: left !important; 
}

.swal2-modal-custom {
  width: 550px !important; /* ⬅️ Ajustado para mejor proporción */
  padding: 20px !important;
  font-size: 14px !important;
  border-radius: 10px;
}

.swal2-input {
  font-size: 13px;
  padding: 8px 10px;
  height: 38px;
  border-radius: 6px;
  background-color: #2b2d30;
  color: #ffffff;
  border: 1px solid #555;
  box-sizing: border-box;

  width: auto !important;      /* ⬅️ Menos estirado */
  min-width: 280px;            /* ⬅️ Ancho mínimo razonable */
  max-width: 340px;            /* ⬅️ Evita que se vea gigante */
  display: block;
  margin: 12px auto 0 auto;  /* ⬅️ Espaciado superior agregado */
}
/* Ya tienes esto, solo ajusta si deseas alinear más con el input */
.swal2-textarea {
  font-size: 13px;
  padding: 8px;
  resize: none !important;
  height: 80px;
  border-radius: 6px;
  background-color: #2b2d30;
  color: #ffffff;
  border: 1px solid #555;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 400px;
}

.input-edicion {
  width: 95%;
  max-width: 180px;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #fdfdfd;
  color: #000000;
  box-sizing: border-box;
}

.boton-edicion {
  background-color: #df914b !important;
  border-color: #f39c12 !important;
  color: white !important;
  padding: 8px 16px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.boton-edicion:hover {
  background-color: #f39c12 !important;
}

#tablaDetalle input[type="text"],
#tablaDetalle input[type="number"] {
  width: 100%;
  padding: 2px 4px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#tablaDetalle td input {
  max-width: 120px;
}
/* --- FIN ESTILOS PARA EL SUBMODULO DE DETALLE SOLICITUD --- */

/* Solo para el formulario de Centro de Ayuda */
.formulario-ayuda input,
.formulario-ayuda select,
.formulario-ayuda textarea {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

.formulario-ayuda select {
  background-color: #fff;
  cursor: pointer;
}

.formulario-ayuda textarea {
  resize: both;
  max-width: 100%;
  max-height: 300px;
  min-height: 100px;
  min-width: 100%;
}

.formulario-ayuda .grupo-form {
  margin-bottom: 15px;
}

/* --- ESTILOS PARA EL MODULO DE COMPRAS --- */


body.cargando-compras #tablaStock {
  visibility: hidden;
}


th.sortable { cursor: pointer; }

th.sortable .th-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: normal;
  line-height: 1.05;
  max-width: 100%;
text-align: center;
}

th.sortable .sort-icon{
  flex: 0 0 12px;
  width: 12px;
  text-align: center;
  font-size: 11px;
  opacity: .55;
}
th.sortable.active .sort-icon{ opacity: 1; }


#tablaStock tbody td{
  padding: 6px 8px;
  font-size: 12px;
}

.swal-titulo-pequeno {
  font-size: 18px !important;
  font-weight: normal !important;
}

.td-mini {
  font-size: 14px;
  padding: 5px;
  border: 1px solid #ccc;
  text-align: left !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #fff;
  color: black;
}

.th-popup {
  padding: 5px;
  border: 1px solid #ccc;
  background: #f2f2f2;
  font-weight: bold;
  text-align: left !important;
  color: black;
}

#mensajeFechaStock {
  margin-top: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #ffffffcc;
  font-style: italic;
}

.td-cantidad {
  text-align: center;
}
/* --- ESTILOS PARA EL SUBMóDULO DE BACKLOG --- */
.backlog-page td.estado_sot,
.backlog-page td.cliente,
.backlog-page td.descripcion,
.backlog-page td.tipotrabajo,
.backlog-page td.sede {
  text-align: left !important;
}
#tablaBacklog {
  width: 100% !important;
}

#tablaBacklog td {
  font-size: 12px;
}

#tablaBacklog th {
  font-size: 13px;
  color: black;
  background: #f1f1f1;	
}

.resumen-resultados {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 500;
  color: #ffffff;
}

.backlog-page th.descripcion,
.backlog-page th.tipotrabajo {
  text-align: left !important;
}

.backlog-page td,
.backlog-page th {
  padding: 8px 8px !important; /* más compacto */
}

/* === CORTE DE TEXTO EN LA DESCRIPCION SIN ROMPER ALTURA === */

/* Aplica solo al modulo COMPRAS y solo a la columna Descripcion */
body[data-modulo="compras"] #tablaStock td.descripcion {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


body[data-modulo="compras"] #tablaStock tbody tr {
  height: auto;
}


body[data-modulo="compras"] #tablaStock td.descripcion {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* Evita herencia que rompa el corte */
body[data-modulo="compras"] #tablaStock td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  padding: 6px;
}

#tablaStock td.columna-consumo {
  text-align: center !important;
}

#tablaStock td.tipo-producto {
  text-align: left !important;
}

#tablaStock th.consumo-mensual {
  text-align: center !important;
}

#tablaStock th.center {
  text-align: center !important;
}

#tablaStock td.center {
  text-align: center !important;
}

.tbl-entregas th, .tbl-entregas td {
  border: 1px solid #444;
  padding: 4px 6px;
  font-size: 12px;
}

.tbl-entregas th {
  background:#2b2f36;
  color:#ffffff;
  text-align: center;
}

/* >>> Aquí el cambio importante */
.tbl-entregas td {
  background:#181a1f;
  color:#ffffff;            /* fuerza texto blanco, tapa .td-mini */
}

/* opcional: si quieres que SOLO la OC sea clara */
.tbl-entregas td:first-child {
  background:#f0f0f0;
  color:#000000;
}

/* --- ESTILOS PARA EL SUBMóDULO DE REGISTRAR INSTALACIONES --- */
td.cantidad,
td.responsable,
td.diasPendientes {
  text-align: center;
  vertical-align: middle;
}

#botonActualizarContabilizados {
  display: none;
}

#tablaSeries {
  width: 100% !important;
  border-collapse: collapse; /* evita espacios entre celdas */
}

/* --- ESTILOS PARA EL SUBMóDULO DE COMPRAS PROYECCIONES --- */

.stock-bar-container {
  margin: 18px 0 8px;
  padding: 14px;
  background: #1e2022;
  border-radius: 12px;
}

.stock-bar-title {
  font-size: 14px;
  margin-bottom: 6px;
  opacity: 0.9;
}

.stock-bar {
  height: 20px;
  background: #2a2d30;
  border-radius: 12px;
  overflow: hidden;
}

.stock-bar-fill {
  height: 100%;
  width: 0%;
  background: #2ecc71;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  padding-right: 8px;
  text-align: right;
  transition: width .4s ease;
}

.stock-bar-note {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
}

.swal-proy table{
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.swal-proy th,
.swal-proy td{
  border: 1px solid #e3e6ea;      /* rejilla suave */
}

/* Primera columna sticky + mismo ancho en th/td */
.swal-proy .first-col{
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ffffff;
  color: #000;
  width: 140px;                    /* ajusta si quieres */
  min-width: 140px;
  max-width: 140px;
  box-sizing: border-box;
}
.swal-proy thead .first-col{ z-index: 3; }

/* Línea vertical gruesa tipo Excel entre Concepto y meses */
.swal-proy .first-col{
  border-right: 2px solid #222 !important;
}

/* Línea horizontal gruesa antes de Cobertura */
.swal-proy .coverage-sep td{
  border-top: 2px solid #222 !important;
}

/* (opcional) colores suaves como tu Excel */
.swal-proy .row-ingreso    td{ background:#eaf3e7; }  /* verdoso claro */
.swal-proy .row-consumo    td{ background:#fdecea; }  /* rojizo claro */


/* Proyecciones Modulo */
.menu-page { background:#1e2022; color:#fff; }
.content { padding:14px 18px; }
.encabezado-stock { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.encabezado-stock h2 { margin:0; display:flex; align-items:center; gap:8px; }

.btn, .mini-btn {
  border-radius:10px; padding:9px 12px; cursor:pointer;
  background:#0f1113; color:#fff; border:1px solid #2a2d31;
}
.btn.primary { background:#f39c12; color:#000; border-color:#f39c12; font-weight:700; }
.muted { color:#cfd3d7; font-size:12px; }

body.menu-page.page-ef .panel-proy {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  gap: 12px;
  max-width: 900px; 
  margin-left: 0;
}

/* contenedor input + select */
body.menu-page.page-ef .code-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* input */
body.menu-page.page-ef #codeSearch {
  width: 100%;
  background: #15171a;
  border: 1px solid #2a2d31;
  color: #e6e9ed;
  border-radius: 8px;
  padding: 6px;
}

/* select */
body.menu-page.page-ef #codesInput {
  background: #15171a;
  color: #ffffff;
  border: 1px solid #2a2d31;
  border-radius: 6px;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.kpi { background:#15171a; border:1px solid #2a2d31; border-radius:12px; padding:12px; }
.kpi .ttl { font-size:12px; color:#cfd3d7; }
.kpi .val { font-size:22px; font-weight:800; margin-top:6px; }

.cards { display:grid; grid-template-columns:repeat(var(--cols,2), minmax(420px,1fr)); gap:14px; margin-top:16px; }
.cards.onecol { --cols:1; }
.card { background:#16181b; border:1px solid #2a2d31; border-radius:12px; overflow:hidden; }
.card-header { display:flex; justify-content:space-between; align-items:center; padding: 10px 0px 12px 0px; border-bottom:1px solid #2a2d31; }
.card-title { font-weight:700; }
.card-sub { font-size:12px; color:#cfd3d7; }
.table-wrap { overflow:auto; max-height:320px; padding-left: 10px; }


.tbl { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:13px; background:#ffffff; color:#000; }
.tbl th, .tbl td { border:1px solid #e3e6ea; padding:6px 8px; text-align:center; }
.tbl .sticky { position:sticky; left:0; background:#ffffff; color:#000; z-index:2; }
.first { font-weight:600; }
.footer { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:8px 10px; border-top:1px solid #2a2d31; color:#cfd3d7; }
.chart-box { padding:8px 10px; display:none; background:#0f1113; }

.badge-ok { margin-left:8px; background:#2ecc71; color:#000; padding:2px 6px; border-radius:6px; font-size:11px; }


.heatmap { margin-top:16px; background:#15171a; border:1px solid #2a2d31; border-radius:12px; overflow:auto; display:none; }
.hm { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:13px; }
.hm th, .hm td { border:1px solid #2b2f34; padding:6px 8px; text-align:center; background:#16181b; color:#fff; }
.hm .sticky { position:sticky; left:0; background:#0f1113; z-index:2; }
.desc-cell { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:360px; text-align:left; }
.col-fixed-360 { width:360px; }
.col-fixed-90  { width:90px; }

/* Colores de cobertura */
.cov-red  { background:#e74c3c !important; color:#fff !important; font-weight:700; }
.cov-amber{ background:#f39c12 !important; color:#fff !important; font-weight:700; }
.cov-green{ background:#2ecc71 !important; color:#fff !important; font-weight:700; }
.cov-gray { background:#95a5a6 !important; color:#000 !important; font-weight:700; }

/* Pintado especial de “Ingreso” según compra_realizada */
.td-ingreso-si { background:#d9f2d9 !important; }
.td-ingreso-no { background:#ffe9cc !important; }


.btn.success{
  background:#11a24e;
  border:1px solid #1f8f4b;
  color:#fff;
  padding:10px 16px;
  border-radius:8px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.btn.success:hover{ background:#2ecc71; border-color:#229954; }
.btn.success:active{ transform:translateY(1px); }

body.menu-page.page-ef .select-codes{
  width: 100%;
  min-width: 260px;
}

.editable{ outline:2px solid transparent; }
.editable:focus{ outline:2px solid #f39c12; background:#fff4e0 !important; }


/* Contenedor que no cambia de tamaño */
.card .card-body {
  position: relative;
  height: 280px;          /* <- ajusta el alto que quieras (200–280 va bien) */
  overflow: hidden;
  border-radius: 10px;
}

/* Dos “caras” superpuestas */
.card .pane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.footer {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

.table-wrap {
  overflow-y: auto;
  max-height: 100%;
  padding-bottom: 8px;
}

.card .pane-table {
  overflow: hidden;   /* 👈 importante */
  padding-bottom: 0;
}

/* estado visible/oculto */
.card .pane.is-active {
  opacity: 1; transform: none; pointer-events: auto;
}
.card .pane:not(.is-active) {
  opacity: 0; transform: scale(.98); pointer-events: none;
}

/* Canvas se adapta al panel */
.card .pane-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

/* =======================================================================
   Análisis EF 
   ======================================================================= */

body.menu-page.page-ef{
  /* permite que la página crezca y tenga scroll normal */
  min-height: 100vh;
  height: auto;
  overflow-y: auto;
}

/* =================== Variables (alturas) =================== */
body.menu-page.page-ef{
  --ef-card-h:   560px;  /* alto total card de barras + top5 */
  --ef-chart-h:  320px;  /* alto del canvas de barras        */
  --ef-donut-h:  400px;  /* alto útil para la donut           */
}

/* Puedes dar un poco más de aire en pantallas grandes */
@media (min-width: 1440px){
  body.menu-page.page-ef{
    --ef-card-h:  620px;
    --ef-chart-h: 340px;
    --ef-donut-h: 420px;
  }
}

/* =================== Grid: barras (izq) + donut (der) =================== */
body.menu-page.page-ef .cards-ef{
  display: grid;
  grid-template-columns: minmax(600px, 2fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}

/* Responsive: una columna */
@media (max-width:1100px){
  body.menu-page.page-ef .cards-ef{ grid-template-columns: 1fr; }
  body.menu-page.page-ef #cardPairs{ order: 2; } /* donut debajo */
}

/* =================== Card de BARRAS (#cardEF) =================== */
body.menu-page.page-ef #cardEF.card.ef .card-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: var(--ef-card-h);
  overflow: hidden; /* mantiene todo dentro de la card */
}

/* Canvas de barras con altura fija */
body.menu-page.page-ef #cardEF .chart-wrap{
  position: relative;
  flex: 0 0 var(--ef-chart-h);
  min-height: var(--ef-chart-h);
}
body.menu-page.page-ef #cardEF .chart-wrap canvas{
  position: absolute; inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Top 5 bajo el gráfico — ocupa el resto y hace scroll si se pasa */
body.menu-page.page-ef #cardEF .top5{
  flex: 1 1 auto;
  overflow: auto;
}

/* =================== Card de DONUT (#cardPairs) =================== */
/* La card tiene la misma altura total que la de barras para cuadrar la fila */
body.menu-page.page-ef #cardPairs.card.ef-side .card-body{
  height: var(--ef-card-h);
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  gap: 10px; 
  padding: 8px 12px;
}

/* Tamaño controlado de la donut: no crece más allá de --ef-donut-h */
body.menu-page.page-ef #cardPairs .card-body > canvas{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  max-width: var(--ef-donut-h);
  max-height: var(--ef-donut-h);
  display: block;
  background: #EAEDF0;
  border: 5px solid #CBD5E1; 
 border-radius: 25px;  
}
/* =================== Tabla Top 5 — estilos visuales =================== */
body.menu-page.page-ef .top5{
  margin-top: 12px;
  background: #1c1f23;
  border: 2px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 10px 12px;
}
body.menu-page.page-ef .top5-title{
  font-weight: 600;
  margin-bottom: 8px;
  opacity: .9;
}
body.menu-page.page-ef .top5-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
body.menu-page.page-ef .top5-table th,
body.menu-page.page-ef .top5-table td{
  border-bottom: 1px solid #2a2d31;
  padding: 6px 8px;
}
body.menu-page.page-ef .top5-table thead th{ font-weight: 600; opacity: .9; }
body.menu-page.page-ef .top5-table tfoot td{ border-top: 1px solid #2a2d31; }
body.menu-page.page-ef .top5-table td.num,
body.menu-page.page-ef .top5-table th.num{ text-align: right; }
body.menu-page.page-ef .top5-table td.label{ text-align: left; }
body.menu-page.page-ef .top5-table td.strong{ font-weight: 600; }

.chart-legend {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #e6e6e6;                /* texto claro */
  font: 500 12px/1.4 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.chart-legend .item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  opacity: .95;
}

.chart-legend .swatch {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;
  flex: 0 0 auto;
}

.chart-legend .text {
  user-select: none;
  white-space: nowrap;
}

.chart-legend .hidden { opacity: .4; text-decoration: line-through; }

#cardPairs canvas, #cardEF canvas {
  opacity: 1 !important;
  filter: none !important;
}

.outlier{
margin-top: 10px;
}

.mini-btn.alt { background:#2b3440; border:1px solid #3b4654; border-radius: 5px; font-weight: bold; font-size:13px; padding: 10px 18px; margin-left: 10px; border:none;}
.mini-btn.on  { background:#1e7e34; border-color:#1e7e34; }

.acciones-tabla a.btn,
.acciones-tabla a.mini-btn {
  text-decoration: none;      /* quita el subrayado */
  display: inline-flex;       /* igual que los botones */
  align-items: center;
  gap: .5rem;
}


.top5-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.top5-header .top5-title {
  margin: 0;
}

.top5-header .mini-btn.small {
  flex-shrink: 0;
}

.kpi .note {
  margin-top: 4px;
  font-size: 0.75rem;
  color: #cfd3d7;
}


/* KPI – Fecha límite de compra VENCIDA */
.kpi--deadline-vencida{
  background:#7b0202 !important;   /* rojo oscuro */
  border-color:#aa0000 !important;
}

.kpi--deadline-vencida .ttl,
.kpi--deadline-vencida .val,
.kpi--deadline-vencida .note{
  color:#ffffff !important;
}

.swal-estado-gestion select {
  background-color: #111827;
  color: #ffffff;
}

.swal-estado-gestion select option {
  color: #111827; /* texto oscuro sobre fondo claro del menú */
}

/* Popup de estado de gestión */
.swal-estado-gestion {
  font-size: 13px;                /* texto general del popup */
}

/* Título un poco más chico que el default de SweetAlert */
.swal-estado-title {
  font-size: 20px;
}

/* Select y opciones más pequeñas */
.swal-estado-gestion .swal2-select {
  font-size: 13px;
}

.swal-estado-gestion .swal2-select option {
  font-size: 13px;
}


/* 4ª fila = Abastecimiento */
.tbl tbody tr:nth-child(4) td {
  background: #f4f6fb;
}

/* 6ª fila = Factibilidad */
.tbl tbody tr:nth-child(6) td {
  background: #f4f4f8;        
}

/* 7ª fila = Consumo */
.tbl tbody tr:nth-child(7) td {
  background: #ffe6ea;
}

.col-excel-only {
  display: none;  
}

/* Popup específico de notas */
.swal-notas-popup {
  width: 620px !important;
}

.swal-notas-popup .swal2-textarea {
  width: 90%;
  margin: 8px auto 0 auto;
  box-sizing: border-box;
  padding: 10px 12px;
  text-align: left;
}

.swal-notas-popup .swal2-textarea::placeholder {
  text-align: left;
}

.swal-notas-popup .nota-item > div:first-child {
  font-size: 13px;
  line-height: 1.4;
}

/* Botones de notas (Editar, Eliminar, Agregar nota) */
.swal-notas-popup .mini-btn-nota {
  background: #111827;
  border: 1px solid #4b5563;
  color: #e5e7eb;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.swal-notas-popup .mini-btn-nota:hover {
  background: #1f2937;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.swal-notas-popup .mini-btn-nota:active {
  transform: translateY(0);
  background: #0b1120;
}


/* ===== LAYOUT CON SIDEBAR ===== */

body.menu-page {
  overflow-x: hidden;
}

/* Contenedor principal (reemplaza márgenes viejos) */
.page {
  margin-left: 220px;
  width: calc(100vw - 220px);
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Topbar ocupa todo el ancho disponible */
.page .topbar {
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Content normal */
.page .content {
  width: 100%;
  margin: 0 !important;
  padding: 20px 24px;
  box-sizing: border-box;
  /*overflow-x: hidden;*/
}


/* PERFIL: */
body.menu-page .perfil-content {
  width: 100%;
  max-width: 1100px; 
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}


/* ===== MENU PRINCIPAL  ===== */

.menu-home {
  margin-left: 220px;      /* sidebar */
  padding: 20px 24px;
  background-color: #3b4a59;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Contenedor real del contenido (ANTES era más angosto) */
.menu-home > .topbar,
.menu-panel {
  max-width: 900px; 
}

/* Topbar */
.menu-home .topbar {
  background-color: #0051ba;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* Panel del saludo */
.menu-panel {
  background-color: white;
  color: #000;
  padding: 14px 16px;
  border-radius: 4px;
}

/* ===== COMPRAS ===== */

body.cargando-compras #tablaStock {
  visibility: hidden;
}

body.cargando-compras .tabla-contenedor {
  background-color: #f8f9fa;   /* blanco roto, no tan plano */
  border: 1px solid #dee2e6;   /* borde limpio tipo Excel */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* MODULO STOCK CONTRATAS  */
/* Centrar Stock Instalado y Stock Total */
#tablaStock th:nth-child(13),
#tablaStock td:nth-child(13),
#tablaStock th:nth-child(14),
#tablaStock td:nth-child(14) {
  text-align: center !important;
}

.estado-ok {
  background-color: #d4edda !important;   /* verde suave */
}

.estado-pendiente {
  background-color: #fff3cd !important;   /* amarillo suave */
}

.estado-critico {
  background-color: #f8d7da !important;   /* rojo suave */
}

.estado-inconsistente {
  background-color: #ffe5d0 !important;   /* naranja suave */
}


.acciones-edicion {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 10px 0;
}

.btn-editar {
  background: transparent;
  color: #f39c12;
  border: 1px solid #f39c12;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-editar:hover {
  background: #f39c12;
  color: #1e2022;
}

.btn-guardar {
  background: #f39c12;
  color: #ffffff;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-guardar:hover {
  background: #e08e0b;
}

.btn-cancelar {
  background: #6c757d;
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-cancelar:hover {
  background: #5a6268;
}
/* Estados */
.estado-inconsistente {
  background-color: #ffe2e2 !important;
}

.input-stock {
  text-align: center;
  width: 90%;
  margin: 0 auto;
  display: block;
}

/* Analisis EF */
body.menu-page.page-ef .content {
  width: 100%;
  max-width: 100%;
  padding: 20px 24px;
  box-sizing: border-box;
}

/* ===============================
   FIX SELECT CODES – ANALISIS EF
   =============================== */


/* Input de búsqueda */
body.menu-page.page-ef #codeSearch {
  width: 100%;
  height: auto;
  min-height: auto;
  background: rgb(21, 23, 26);
  border: 1px solid rgb(42, 46, 51);
  color: rgb(230, 233, 237);
  border-radius: 8px;
  padding: 6px;
}

/* Lista de códigos */
body.menu-page.page-ef #codesInput {
  max-height: 220px;
  overflow-y: auto;
  background: #15171a;
  color: #fff;
  border-radius: 6px;
}

/* Opciones más compactas */
body.menu-page.page-ef #codesInput option {
  padding: 4px 8px;
  font-size: 13px;
}

body.menu-page.page-ef #btnCargar i {
  color: #ffffff;
}

/* ===============================
   PROYECCIÓN DE COMPRAS
   =============================== */

body.page-proy .panel-proy {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  gap: 12px;
  align-items: start;
  max-width: 900px;
}

body.page-proy .code-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.page-proy #btnCargar {
  align-self: flex-start;
  min-width: 160px;
}


/* EF */
body.menu-page.page-ef .select-codes option {
  padding: 4px 8px;
  font-size: 13px;
}

/* PROYECCIÓN */
body.page-proy .select-codes option {
  padding: 6px 8px;
  font-size: 13px;
}


body.page-proy #codeSearch {
  width: 100%;
  background: #15171a;
  border: 1px solid #2a2d31;
  color: #e6e9ed;
  border-radius: 8px;
  padding: 6px;
}

/* Select de códigos */
body.page-proy #codesInput {
  max-height: 220px;
  overflow-y: auto;
  background: #15171a;
  color: #ffffff;
  border: 1px solid #2a2d31;
  border-radius: 6px;
}

/* Opciones */
body.page-proy #codesInput option {
  background: #15171a;
  color: #ffffff;
}

/* Hover / seleccionado */
body.page-proy #codesInput option:hover,
body.page-proy #codesInput option:checked {
  background: #2b2f36;
}

body.page-proy #btnCargar i {
  color: #ffffff;
}


/* === BOTÓN VISTA SERIES  === */
.btn-vista {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff55;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.btn-vista:hover {
  background: #ffffff;
  color: #1e2022;
}

.fila-error {
  background-color: #eef2f6 !important;
  outline: 1px dashed #9aa7b2;
}

#tablaStock tr.fila-error:hover {
  background-color: #e6ebf1 !important;
}

.fila-editada.fila-error {
  background-color: #eef2f6 !important;
}

.fila-error input,
.fila-error select {
  border: 1px solid #adb5bd !important;
  background-color: #ffffff !important;
}

#tablaStock td input {
  width: 90%;
  box-sizing: border-box;
  text-align: center;
}


#tablaStock td {
  text-align: center;
}

th:nth-child(12) {
  text-align: center;
}

.input-sot {
  min-width: 80px;
  max-width: 90px;
  text-align: center;
}

.input-cliente {
  min-width: 130px;
  max-width: 150px;
}

.input-rq {
  min-width: 80px;
  max-width: 90px;
}

/* Descripción SIEMPRE a la izquierda */
#tablaStock td:nth-child(2),
#tablaStock th:nth-child(2) {
  text-align: left !important;
}

/* COLUMNA ESTADO SIEMPRE a la izquierda */
#tablaStock td:last-child,
#tablaStock th:last-child {
  text-align: left !important;
}


body.menu-page.page-ef .code-picker,
body.menu-page.page-ef #codeSearch,
body.menu-page.page-ef #codesInput {
  width: 100%;
}


/* =====================================================
   ANALISIS EF 
   ===================================================== */

/* Lista de códigos */
body.menu-page.page-ef #codesInput {
  background: #15171a;
  color: #ffffff;
  border: 1px solid #2a2d31;
  border-radius: 6px;
}

/* Opciones */
body.menu-page.page-ef #codesInput option {
  background: #15171a;
  color: #ffffff;
  padding: 6px 8px;
  font-size: 13px;
  cursor: pointer;
}

/* Hover (cuando pasas el mouse) */
body.menu-page.page-ef #codesInput option:hover {
  background: #2b2f36;   /* MISMO hover que Proyección */
  color: #ffffff;
}

/* Selección activa (click / teclado) */
body.menu-page.page-ef #codesInput option:checked,
body.menu-page.page-ef #codesInput option:focus {
  background: #0d6efd;   /* azul selección */
  color: #ffffff;
}
body.menu-page.page-ef #codesInput:focus {
  outline: none;
}

/* =====================================================
   FIX ALINEACIÓN BOTÓN CARGAR – ANALISIS EF
   ===================================================== */

body.menu-page.page-ef #btnCargar {
  align-self: flex-start;
  min-width: 160px;
}


/* =====================================================
   FIX: Cards de Proyección
   ===================================================== */

body.page-proy .cards.onecol {
  grid-template-columns: 1fr;
}

body.page-proy .cards.onecol .card {
  width: 100%;
  max-width: 100%;
}


/* =====================================================
   ESTILO CELDA BLOQUEADA PROYECCION
   ===================================================== */

.cell-locked {
  background-color: #1f2933;
  color: #9ca3af;
  cursor: not-allowed;
}



/* === ESTÁNDAR POPUPS DE TABLAS === */
.swal2-popup table {
  font-size: 12px;
}

.swal2-popup th {
  font-size: 13px;
}

.td-num {
  text-align: right !important;
}

.th-num {
  text-align: right !important;
}

/* =========================================
   CONTENEDORES DE SCROLL
   ========================================= */

/* =========================================
   TABLA STOCK COMPRAS
   ========================================= */

/* HEADER sticky */
body[data-modulo="compras"] #tablaStock thead th {
  position: sticky !important;
  top: 0 !important;
  background-color: #f1f1f1 !important;
  z-index: 40 !important; /* debajo de columnas fijas */
  padding: 6px 8px !important;
  text-align: center !important;
}

/* Código */
body[data-modulo="compras"] #tablaStock th:first-child,
body[data-modulo="compras"] #tablaStock td:first-child {
  position: sticky;
  left: 0;
  z-index: 52;
  background: #fff;
}

/* Descripción */
body[data-modulo="compras"] #tablaStock th:nth-child(2),
body[data-modulo="compras"] #tablaStock td:nth-child(2) {
  position: sticky;
  left: 110px;
  z-index: 51;
  background: #fff;
}

body[data-modulo="compras"] #tablaStock {
  table-layout: fixed;
  border-collapse: collapse;
  min-width: 1600px;
  width: 100%;
}

body[data-modulo="compras"] #tablaStock thead th:nth-child(1) {
  width: 110px;
}

body[data-modulo="compras"] #tablaStock thead th:nth-child(2) {
  width: 300px;
}

/* =========================================
   CELDAS NORMALES
   ========================================= */
body[data-modulo="compras"] #tablaStock td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
  padding: 6px !important;
}

/* Descripción alineada a la izquierda */
body[data-modulo="compras"] #tablaStock td.descripcion {
  text-align: left !important;
  max-width: 200px !important;
}

/* =========================================
   HOVER FILAS
   ========================================= */
/* Hover solo en columnas normales */
body[data-modulo="compras"] #tablaStock tbody tr:hover td {
  filter: brightness(0.98);
}

body[data-modulo="compras"] #tablaStock tbody tr:hover td:first-child,
body[data-modulo="compras"] #tablaStock tbody tr:hover td:nth-child(2) {
  background-color: #ffffff !important;
}

/* =========================================
   EVITAR CONFLICTOS CON TRANSFORM/GRID/CARDS
   ========================================= */
body[data-modulo="compras"] .content,
body[data-modulo="compras"] .page,
body[data-modulo="compras"] .card-body,
body[data-modulo="compras"] .pane {
  transform: none !important;
  perspective: none !important;
  filter: none !important;
  backface-visibility: visible !important;
}

/* 
.tabla-scroll { padding-bottom: 8px !important; }
Padding extra para scroll horizontal */


body[data-modulo="compras"] #tablaStock {
  background-color: #ffffff !important;
}

body[data-modulo="compras"] #tablaStock tbody td {
  background-color: #ffffff;
}

body[data-modulo="compras"] #tablaStock {
  color: #000000 !important;
}

body[data-modulo="compras"] #tablaStock td {
  color: #000000 !important;
}

body[data-modulo="compras"] #tablaStock thead th {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* ===== INTERSECCIÓN (Header + Columnas fijas) ===== */

/* Código header */
body[data-modulo="compras"] #tablaStock thead th:first-child {
  left: 0 !important;
  top: 0 !important;
  z-index: 60 !important;
}

/* Descripción header */
body[data-modulo="compras"] #tablaStock thead th:nth-child(2) {
  left: 110px !important;
  top: 0 !important;
  z-index: 59 !important;
}

/* Tipo Producto */
body[data-modulo="compras"] #tablaStock td:nth-child(3) {
  text-align: left !important;
}

/* Tipo Compra */
body[data-modulo="compras"] #tablaStock td:nth-child(4) {
  text-align: left !important;
}

/* Proveedor Última Compra */
body[data-modulo="compras"] #tablaStock td:nth-child(5) {
  text-align: left !important;
}


body[data-modulo="compras"] #tablaStock th {
  text-align: center !important;
}

body[data-modulo="compras"] #tablaStock th .th-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Centrar headers específicos */
body[data-modulo="compras"] #tablaStock thead th:nth-child(11),
body[data-modulo="compras"] #tablaStock thead th:nth-child(13),
body[data-modulo="compras"] #tablaStock thead th:nth-child(15),
body[data-modulo="compras"] #tablaStock thead th:nth-child(17) {
  text-align: center !important;
}

body[data-modulo="compras"] .tabla-scroll {
  padding-bottom: 10px;
}



.swal2-popup {
  background: #1e2022 !important;
  color: #ffffff !important;
  border-radius: 10px;
}



.tipo-producto {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =====================================================
   DASHBOARD BACKLOG 
   ===================================================== */

body.menu-page.page-backlog-dashboard .cards-ef{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:16px;
  align-items:stretch;
}

@media (max-width:1100px){
  body.menu-page.page-backlog-dashboard .cards-ef{
    grid-template-columns:1fr;
  }
}

/* === CARD TOP CLIENTES === */
body.page-backlog-dashboard .card.ef .card-body{
  height: 420px;
  padding: 16px;
}

body.page-backlog-dashboard .card.ef .chart-wrap{
  position: relative;
  height: 100%;
}

body.page-backlog-dashboard #chartClientes{
  width: 100% !important;
  height: 100% !important;
}

/* === CARD DONUT === */
body.page-backlog-dashboard .card.ef-side .card-body{
  height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}

body.page-backlog-dashboard #chartEstado{
  width: 100% !important;
  height: 100% !important;
}

body.page-backlog-dashboard .cards:last-of-type .chart-wrap{
  height:100%;
}


body.page-backlog-dashboard .checklist-box{
  display:block !important;
  max-height:200px;
  overflow-y:auto;
  overflow-x:hidden;
  white-space:normal !important;
}

body.page-backlog-dashboard .checklist-box label{
  display:flex !important;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
  white-space:normal !important;
  word-break:break-word;
}

body.page-backlog-dashboard .checklist-box input{
  flex-shrink:0;
}

body.page-backlog-dashboard .card-title{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .3px;
}

/* ======================================
   BACKLOG – ESTILO CÓDIGOS TIPO EF
   ====================================== */

body.page-backlog-dashboard .panel-codigos-backlog{
  margin-top:14px;
  max-width:900px;
}

body.page-backlog-dashboard #buscarCodigo{
  width:100%;
  background:#15171a;
  border:1px solid #2a2d31;
  color:#e6e9ed;
  border-radius:8px;
  padding:8px 10px;
  margin-bottom:6px;
  font-size:13px;
}

body.page-backlog-dashboard .lista-codigos-backlog{
  background:#15171a;
  border:1px solid #2a2d31;
  border-radius:8px;
  max-height:200px;
  overflow-y:auto;
  padding:6px 0;
}

body.page-backlog-dashboard .lista-codigos-backlog label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  font-size:13px;
  color:#ffffff;
  cursor:pointer;
  transition:background .15s ease;
}

body.page-backlog-dashboard .lista-codigos-backlog label:hover{
  background:#2b2f36;
}

body.page-backlog-dashboard .lista-codigos-backlog input{
  accent-color:#0d6efd;
}

.item-codigo {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #1f2937;
  font-size: 13px;
}

.item-codigo:hover {
  background-color: #1f2937;
}

.item-codigo.activo {
  background-color: #2563eb;
  color: white;
}

.acciones-backlog {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}


/* =====================================================
   BACKLOG – PANEL SUPERIOR 
   ===================================================== */

body.menu-page.page-backlog-dashboard .panel-proy{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  gap:12px;
  align-items:start;
  max-width:900px;
  margin-top:12px;
}

body.menu-page.page-backlog-dashboard .code-picker{
  display:flex;
  flex-direction:column;
  gap:6px;
}

body.menu-page.page-backlog-dashboard #btnCargarBacklog{
  align-self:flex-start;
  min-width:160px;
}