/* ===============================================
   Estilos generales para toda la pantalla de Picking
   =============================================== */

/* La sección .pantalla-panel ya define el fondo claro, borde redondeado, etc.
   (Hereda de rutas.css o de la hoja común). Aquí solo añadimos reglas específicas. */

/* ===============================================
   CUERPO: GRID RESPONSIVE DE PRODUCTOS
   =============================================== */
   
/* Que el panel de picking también llene su contenedor */
#picking-screen {
  flex: 1;                  /* crecer al máximo dentro de main-contenedor */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* alinea al inicio verticalmente */ 
  margin-top: 2%; /* un poco de margen superior para separar del header */
}

/* ===============================================
   CABECERA DE PICKING
   =============================================== */
.header-picking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #c8ddc4; /* línea sutil para separar del cuerpo */
}

/* Parte izquierda: ruta + comanda */
.picking-header-left {
  display: flex;
  flex-direction: column;
}
.picking-ruta {
  font-size: 1.3rem;
  font-weight: bold;
  color: #2f5d3a;    /* verde oscuro, contraste sobre fondo claro */
  margin-bottom: 0.25rem;
}
.picking-comanda {
  font-size: 1rem;
  color: #3a3a3a;    /* gris oscuro, contraste suave sobre fondo claro */
}

/* Parte central: navegación entre comandes */
.picking-navegacion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.btn-nav {
  background-color: #2f5d3a;    /* verde oscuro, contraste sobre fondo claro */
  border: none;
  border-radius: 4px;
  color: #f0f0f0;    /* texto casi blanco */
  font-size: 1.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-nav:hover {
  background-color: #375f40;;
}
.btn-nav:disabled {
  background-color: #494949; /* gris más oscuro para el botón deshabilitado */
  color: #888888; /* texto gris claro */
  font-weight: bold;
  cursor: not-allowed;
}
.texto-indice {
  font-size: 1rem;
  font-weight: bold;
  color: #3a3a3a;    /* gris oscuro, contraste suave sobre fondo claro */
}

/* Parte derecha: botones “Rutas” e “Incidencias” */
.picking-header-right {
  display: flex;
  gap: 0.5rem;
}
/* Botones del header de picking (Rutas e Incidencias) */
.btn-header {
  background-color: #2e4d1e;  /* mismo verde musgo oscuro de estado confirmado */
  color: #f0f0f0;             /* texto claro */
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1.25rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-header:hover {
  background-color: #3a5c28;  /* un poco más brillante para hover */
}

/* Icono de “Incidencias” (triángulo con exclamación) */
.btn-header:last-child {
  font-size: 1.3rem;  /* para hacer más visible el símbolo ⚠ */
  /* padding: 0.4rem 0.6rem; */
  padding: 0.5rem 1.5rem;
}

/* color rojo para el texto “CERRADA” */
.cerrada {
  color: #9e2b35; /* rojo intenso; ajusta si quieres otro tono */
  margin-left: 0.5rem; /* un pequeño espaciado tras “#123” */
}
/* ===============================================
   CUERPO: GRID RESPONSIVE DE PRODUCTOS
   =============================================== */
.picking-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  /* Cada celda mide al menos 120px, y crece para llenar el ancho */
  gap: 1rem; /* separación entre productos */
  margin-top: 1rem;
}

/* ===============================================
    “GLOBO DE PRODUCTO” (botón táctil)
   =============================================== */
.producto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #333333; /* gris muy oscuro — estado inicial */
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  min-height: 120px;    /* altura mínima para consistencia */
}

/* Mostrar el icono de estado (candado o check) en la esquina superior derecha */
.producto .icono-estado {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;  /* por defecto invisible; se hace visible según estado */
  transition: opacity 0.2s;
}

/* Contenido (nombre y detalle) */
.producto .contenido-producto {
  text-align: center;
}
.producto .prod-nombre {
  font-size: 1rem;
  font-weight: bold;
  color: #e0e0e0;  /* texto claro */
  margin-bottom: 0.25rem;
}
.producto .prod-detalle {
  font-size: 1rem;
  color: #c0c0c0;  /* gris claro */
  opacity: 0.8;
}

/* Botones internos: “Peso” e “Incidencia” */
.producto .acciones-producto {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 0.5rem;
}
.producto .btn-peso {
  background-color: #555555;  /* gris medio */
  color: #f0f0f0; /* texto casi blanco */
  border: none;
  border-radius: 4px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.producto .btn-incidencia {
  background-color: #555555;  /* gris medio */
  color: #f0f0f0; /* texto casi blanco */
  border: none;
  border-radius: 4px;
  padding: 0.8rem 1.9rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.producto .btn-peso:hover,
.producto .btn-incidencia:hover {
  background-color: #666666; /* gris más claro al pasar el ratón */
}

/* ===============================================
   ESTADOS VISUALES DE CADA PRODUCTO
   =============================================== */

/* Estado inicial (verde muy claro) */
.estado-inicial {
  background-color: #2e4d1e;  /* verde musgo oscuro */
  border-color: #1f350f; /* verde más oscuro */
}
.estado-inicial .icono-estado {
  opacity: 0;  /* Sin icono inicialmente */
}

/* Estado bloqueado (naranja) */
.estado-bloqueado {
  background-color: #b45a1e;  /* naranja oscuro */
  border-color: #8a3e12; /* marrón oscuro */
}
/* Candado naranja brillante en estado-bloqueado */
.estado-bloqueado .icono-estado {
  background-image: none !important;
  font-size: 1.3rem; /* tamaño del icono */
  color: #ff1e00;       /* naranja vivo */
  opacity: 1;
}

/* Estado confirmado (gris verdoso) */
.estado-confirmado {
  background-color: #717e71; /* verde musgo muy oscuro */
  border-color: #b8bbb5;     /* verde aún más oscuro para contorno */
}
/* Check verde brillante en estado-confirmado */
.estado-confirmado .icono-estado {
  background-image: none !important;
  font-size: 1.3rem; /* tamaño del icono */
  color: #00cc66;       /* verde brillante */
  opacity: 1;
}

/* Deshabilitado: gris atenuado y cursor no permitido */
.btn-peso:disabled,
.btn-incidencia:disabled {
  background-color: #727c72;;
  color: #999999;
  cursor: not-allowed;
  opacity: 0.5;
}
/* ===============================================
   MEDIA QUERIES (RESPONSIVE)
   =============================================== */

/* En pantallas estrechas (< 768px), mostrar menos columnas */
@media (max-width: 768px) {
  .picking-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .header-picking {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .picking-navegacion {
    margin-top: 0.5rem;
  }
}

/* En móviles muy estrechos (< 480px), ajustar tamaños */
@media (max-width: 480px) {
  .header-picking {
    font-size: 0.9rem;
  }
  .picking-header-left .picking-ruta {
    font-size: 1.1rem;
  }
  .picking-header-left .picking-comanda {
    font-size: 0.9rem;
  }
  .btn-nav, .btn-header {
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
  }
  .picking-grid {
    grid-template-columns: 1fr; /* Una sola columna */
  }
  .producto {
    min-height: 100px;
    padding: 0.5rem;
  }
  .producto .prod-nombre {
    font-size: 0.95rem;
  }
  .producto .prod-detalle {
    font-size: 0.85rem;
  }
  .producto .btn-peso,
  .producto .btn-incidencia {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
  }
}
/* ================================
   NUEVO PESO: pantalla modal
   ================================ */


.np-campo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.np-campo label {
  color: #e0e0e0;
  font-size: 1rem;
}

#np-peso-input {
  width: 4rem;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #555555;
  background-color: #3a3a3a;
  color: #f0f0f0;
  text-align: center;
}

#np-peso-input:focus {
  outline: 2px solid #2e4d1e; /* verde musgo al enfocar */
}

#np-unidad-text {
  color: #d0d0d0;
  font-size: 1rem;
}

/* Nuevo bloque para agrupar Aceptar + Cancelar */
.np-botones {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

#np-btn-aceptar,
#np-btn-cancelar {
  background-color: #2e4d1e;
  color: #f0f0f0;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

#np-btn-aceptar:hover,
#np-btn-cancelar:hover {
  background-color: #3a5c28;
}

/* Campos del formulario de Incidencia */
.in-campo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.in-campo label {
  color: #e0e0e0;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* Estilo del select grande (para tablet táctil) */
#in-tipo-incidencia {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #555555;
  background-color: #3a3a3a;
  color: #f0f0f0;
  appearance: none; /* quita flecha por defecto en algunos navegadores */
}

/* Ajuste para flecha interna (si el dispositivo la necesita) */
#in-tipo-incidencia::after {
  content: "▼";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
} 

#in-tipo-incidencia:focus {
  outline: 2px solid #2e4d1e;
}

/* Estilo del textarea de observaciones */
#in-observaciones {
  width: 100%;
  min-height: 6rem;
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #555555;
  background-color: #3a3a3a;
  color: #f0f0f0;
  resize: vertical; /* permitir solo cambio vertical */
}

/* Contenedor de botones “Aceptar” y “Cancelar” */
.in-botones {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* Reusa el mismo estilo que .btn-header para ambos botones */
#in-btn-aceptar,
#in-btn-cancelar {
  background-color: #2e4d1e;
  color: #f0f0f0;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

#in-btn-aceptar:hover,
#in-btn-cancelar:hover {
  background-color: #3a5c28;
}
/* ================================
   Incidencia: información del producto
   ================================ */
.in-info {
  margin-bottom: 1rem;
  color: #e0e0e0;            /* texto claro sobre fondo gris oscuro */
  text-align: left;
}

.in-prod-nombre {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.in-prod-detalle {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* Línea horizontal para separar */
.in-info hr {
  border: none;
  border-top: 1px solid #555555;
  margin: 0.5rem 0 1rem 0;
}
/* Cuando un producto tiene incidencia, el botón “!” se pinta de rojo */
.btn-incidencia.has-incidencia {
  background-color: #e63946;  /* rojo intenso */
  color: #ffffff;
  opacity: 0.5;                /* eliminar cualquier atenuación previa */
}

/* Ajuste al pasar el ratón sobre un botón con incidencia (si quieres efecto hover) */
.btn-incidencia.has-incidencia:hover {
  background-color: #d62828;
}
/* TOOLTIP DE INCIDENCIA EN PRODUCTO*/
.tooltip-inc {
  position: absolute;
  background-color: #2a2a2a;
  border: 1px solid #c0c0c0;
  box-shadow: 0 0 10px rgba(192, 192, 192, 0.5);
  padding: 0.75rem;
  border-radius: 6px;
  color: #e0e0e0;
  z-index: 200;
  width: 220px;
}

#tooltip-contenido {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.3;
}