:root{
  --primario:#0f766e;
  --primario-soft:#ccfbf1;
  --azul-edit:#3b82f6;
  --azul-soft:#eff6ff;
  --oscuro:#020617;
  --texto:#0f172a;
  --borde:#e5e7eb;
  --fondo:#f8fafc;
  --blanco:#ffffff;
  --ok:#16a34a;
  --pend:#dc2626;
  --naranja:#f97316;
  --gris-claro: #f1f5f9;
}

*{ box-sizing:border-box }

body{
  margin:0;
  padding:16px;
  background:var(--fondo);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  color:var(--texto);
}

.card{
  max-width:1200px;
  margin:auto;
  background:var(--blanco);
  border-radius:12px;
  padding:18px;
  border:1px solid var(--borde);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

h2{
  margin:0 0 12px;
  font-size:20px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
justify-content: space-between; /* Título <--- espacio ---> pone el logo a la derecha */
}

h3{
  margin:22px 0 10px;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#475569;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 5px;
}

/* ===== SPINNER & BUTTONS ===== */
button{
  background:var(--primario);
  color:white;
  border:none;
  border-radius:6px;
  padding:10px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition: filter 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button:hover{ filter:brightness(.9); }
button:disabled{ background: #94a3b8; cursor: not-allowed; }
.btn-sec{ background:#475569; }
.btn-blue{ background:var(--azul-edit); }
.btn-orange{ background:var(--naranja); } /* Estilo para boton Bajar */

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 0.8s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/*sección de tipo bulto,pallet, camara*/
select {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--borde);
  background: #f9fafb;
  font-size: 14px;
  width: 100%;
  cursor: pointer;
}
select:focus {
  outline: none;
  background: #fff;
  border-color: var(--primario);
  box-shadow: 0 0 0 2px rgba(15,118,110,.15);
}

/* ===== TABS ===== */
.tabs{
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  border-bottom: 2px solid var(--borde);
  padding-bottom: 10px;
  margin-top: 20px;
}

.tab-btn{
  background: transparent;
  color: #64748b;
  border: none;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.tab-btn:hover{ background: var(--gris-claro); color: var(--texto); }

.tab-btn.activo{
  background: var(--primario-soft);
  color: var(--primario);
  font-weight: 700;
}

/* ===== FORM ===== */
.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
  align-items: center; /* Alineación vertical para el checkbox */
}

input{
  padding:10px;
  border-radius:6px;
  border:1px solid var(--borde);
  background:#f9fafb;
  font-size:14px;
  width: 100%; /* Asegura que ocupen el ancho de la grilla */
}

input:focus{
  outline:none;
  background:#fff;
  border-color:var(--primario);
  box-shadow:0 0 0 2px rgba(15,118,110,.15);
}

/* Checkbox personalizado */
.check-box-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--primario);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    height: 42px; /* Misma altura aprox que inputs */
}
.check-box-container input {
    width: auto;
    margin: 0;
    accent-color: var(--primario);
    cursor: pointer;
}

/* ===== SECCION KPI ===== */
.kpi-section{
  background: var(--primario-soft);
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
  border: 1px solid #99f6e4;
}

.kpi-row{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}

.kpi-box strong{
  font-size: 13px;
  color: var(--primario);
  display: block;
  text-transform: uppercase;
}
.kpi-box span{
  font-size: 26px;
  font-weight: 800;
  color: var(--oscuro);
}

.kpi-global{
  border-right: 1px solid #99f6e4;
  padding-right: 20px;
  min-width: 120px;
}

.kpi-calc-area{
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.kpi-inputs{ display: flex; gap: 5px; flex-wrap: wrap; }
.kpi-inputs input{ padding: 8px; width: 135px; }

.kpi-results{
  display: flex;
  gap: 20px;
  margin-left: 10px;
  background: rgba(255,255,255,0.6);
  padding: 5px 15px;
  border-radius: 6px;
}

.res-ingreso { color: #0369a1 !important; }
.res-proceso { color: var(--ok) !important; }

/* ===== FILTROS TABLA ===== */
.filtros{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
  align-items: center;
}
/* Estilo para los tildes del filtro */
.filtro-check {
  display: flex;
  align-items: center;
  gap: 5px;
  background: white;
  border: 1px solid var(--borde);
  padding: 0 10px;
  height: 42px; /* Misma altura que los inputs */
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  user-select: none;
}
.filtro-check:hover {
  background: var(--gris-claro);
  border-color: var(--primario);
}
.filtro-check input {
  width: auto; /* Evita que ocupe todo el ancho */
  margin: 0;
  cursor: pointer;
}

/* ===== TABLA PC ===== */
.tabla-container{
  max-height: 55vh; 
  overflow-y: auto; 
  overflow-x: auto;
  border:1px solid var(--borde);
  border-radius:10px;
}

table{ width:100%; border-collapse:collapse; font-size:13px; }

th{
  background:#f1f5f9;
  color:#475569;
  font-weight:600;
  padding:12px 9px;
  text-align:left;
  position:sticky;
  top:0;
  z-index: 10;
}

td{
  padding:10px 9px;
  border-top:1px solid var(--borde);
  white-space:nowrap;
}

tbody tr:hover{ filter: brightness(0.97); }

.estado-ok{ color:var(--ok); font-weight:700; }
.estado-pend{ color:var(--pend); font-weight:700; }

/* =========================================
   ===== MODALES Y OVERLAYS =====
   ========================================= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 6, 23, 0.6);
  display: none; 
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

/* --- MODAL ESTANDAR (PROCESAR / MULTIPLE) --- */
.modal-box {
  background: var(--blanco);
  padding: 24px;
  border-radius: 12px;
  width: 90%;
  max-width: 450px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--borde);
  animation: fadeIn 0.2s ease-out;
  display: flex;
  flex-direction: column;
}

.modal-header {
  font-size: 18px;
  font-weight: 700;
  color: var(--primario);
  margin-bottom: 15px;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 10px;
}

/* --- MODAL ESPECIFICO PARA EDITAR ubicación --- */
.modal-box-edit {
  background: var(--blanco);
  padding: 24px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.25); /* Sombra azulada */
  border: 1px solid #bfdbfe; /* Borde azul claro */
  border-top: 5px solid var(--azul-edit); /* Borde superior grueso */
  animation: slideIn 0.2s ease-out;
  display: flex;
  flex-direction: column;
}

.modal-header-edit {
  font-size: 18px;
  font-weight: 700;
  color: var(--azul-edit); /* Titulo Azul */
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-body {
  margin-bottom: 15px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  flex-wrap: wrap; /* Para que baje si no hay espacio */
}

.step-indicator {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 8px;
  font-weight: 600;
}

/* ===== ANIMACION EXITO (TILDE VERDE) ===== */
.success-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    border: 2px solid var(--ok);
}
.success-icon {
    font-size: 32px;
    color: var(--ok);
    font-weight: bold;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   ===== MOBILE =====
   ========================================= */
@media(max-width:768px){
  body{ padding:10px }
  h2{ font-size:18px }
  .form-grid{ grid-template-columns:1fr; }
  
  .kpi-row{ flex-direction: column; gap: 15px; }
  .kpi-global{ border-right: none; border-bottom: 1px solid #99f6e4; padding-bottom: 15px; width: 100%; }
  
  .kpi-calc-area{ width: 100%; flex-direction: column; align-items: stretch; }
  .kpi-inputs{ width: 100%; }
  .kpi-inputs input{ flex: 1; }
  .kpi-results{ margin-left: 0; justify-content: space-around; margin-top: 10px; }

  .filtros{ flex-direction:column; align-items: stretch; }
  .filtros input, .filtros button{ width:100%; }
  
  button{ padding:12px; }

  thead { display: none; }
  .tabla-container { border: none; overflow: visible; }
  table { min-width: 100%; }

  tbody tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
  }
  
  tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: none;
    border-bottom: 1px solid #f1f5f9;
    white-space: normal;
    font-size: 14px;
  }
  
  tbody td:last-child { border-bottom: none; display: block; padding-top: 15px; text-align: center;}

  tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #475569;
    margin-right: 12px;
  }
  
  tbody td:last-child::before { display: none; }
  
  tbody td:last-child button { width: 100%; padding: 12px; font-size: 16px; }
}