/* =====================================================================
   PAQUETERÍA – Unificación visual con Cuadro de Registro
   - Se replica tipografía, radios, colores y controles del registro
   - No se altera el HTML ni la lógica JS
   ===================================================================== */
/* Paleta / tokens locales (copiados de registro con prefijo paq) */
#paqueteria-view {
  --paq-bg: #FFFFFF;
  --paq-border: #E2E8F0;
  --paq-border-strong: #D5DEE8;
  --paq-accent: #132A48;
  --paq-row-hover: #F6F8FC;
  --paq-row-zebra: #FAFBFD;
  --paq-key-text: #1E346A;
  --paq-secondary-text: #5B6475;
  --paq-control-height: 36px;
  --paq-control-radius: 20px;
  --paq-control-font-size: 13px;
  --paq-control-padding-x: 16px;
  --paq-control-bg: #F5F7FA;
  --paq-control-bg-hover: #EDF1F5;
  --paq-control-border: var(--paq-border);
  --paq-control-border-focus: var(--paq-accent);
  --paq-radius: 22px;
  --paq-radius-sm: 8px;
  --paq-transition: 120ms ease;
  --paq-primary-bg: var(--brand-600);
  --paq-primary-bg-hover: var(--brand-700);
}

#paqueteria-view .card {
  border-radius: var(--paq-radius);
  box-shadow: none;
  border: 1px solid var(--paq-border);
  background: var(--paq-bg);
  margin-bottom: var(--space-24,24px);
  overflow: hidden;
}

#paqueteria-view .card-header {
  background: #F5F7FA;
  border-bottom: 1px solid var(--paq-border);
  border-radius: 0;
  padding: 14px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  text-align:left;
}

#paqueteria-view .card-header h2 {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--paq-key-text);
  margin:0;
  text-align:left;
}

#paqueteria-view .card-header-info {
  font-size: 12px;
  line-height: 1.2;
  color: var(--paq-secondary-text);
  margin-top:2px;
}
/* Page header principal */
#paqueteria-view .page-header h1 { text-align:left; }
#paqueteria-view .page-header .page-subtitle { text-align:left; }
#paqueteria-view .page-header-content { flex-direction:column; align-items:flex-start; }
#paqueteria-view .page-header-actions { align-self:flex-start; }

#paqueteria-view .card-body {
  width:100%;
  text-align:left;
  background: var(--paq-bg);
  padding: 16px 20px;
}

#paqueteria-view .search-filters { display:flex; flex-wrap:wrap; gap: var(--space-16); align-items:center; }

#paqueteria-view .search-input-container { flex:1 1 220px; }

#paqueteria-view .filter-buttons { display:flex; gap: var(--space-8); }

#paqueteria-view .directory-list { 
  display:flex; flex-direction:column; gap:0; 
  background: var(--paq-bg); 
  /* Se quita el borde y radio internos para que el redondeo visible sea el del card */
  border:none; 
  border-top:1px solid var(--paq-border); /* línea divisoria bajo el header */
  border-radius:0;
}
/* Último item hereda el redondeo del card exterior; quitamos overflow para no recortar */
/* (El card ya tiene overflow:hidden y radio) */

#paqueteria-view .directory-item { display:flex; align-items:center; justify-content:space-between; padding: 10px 16px; border-bottom:1px solid var(--paq-border); transition:background var(--paq-transition), color var(--paq-transition); font-size:14px; background: var(--paq-bg); }
#paqueteria-view .directory-item:nth-child(odd) { background: var(--paq-row-zebra); }
#paqueteria-view .directory-item:last-child { border-bottom:none; }
#paqueteria-view .directory-item:hover { background: var(--paq-row-hover); }

#paqueteria-view .directory-item-content { display:flex; flex-direction:column; gap:2px; }
#paqueteria-view .directory-item .fw-medium { font-size: 14px; font-weight:600; color: var(--paq-key-text); }
#paqueteria-view .directory-item .text-muted { font-size: 12px; color: var(--paq-secondary-text); }

#paqueteria-view .directory-item-actions { display:flex; gap: 8px; }
#paqueteria-view .directory-item .btn { font-size: 13px; padding:0 var(--paq-control-padding-x); height: var(--paq-control-height); line-height:1; border-radius: var(--paq-control-radius); border:1px solid var(--paq-control-border); background: var(--paq-control-bg); color:#39495F; font-weight:500; box-shadow:none; }
#paqueteria-view .directory-item .btn:hover { background: var(--paq-control-bg-hover); }
#paqueteria-view .directory-item .btn.btn-primary { background: var(--paq-primary-bg); border-color: var(--paq-primary-bg); color:#FFF; font-weight:600; border-radius: 9999px !important; }
#paqueteria-view .directory-item .btn.btn-primary:hover { background: var(--paq-primary-bg-hover); }

#notifyPanel .notify-list { display:flex; flex-direction:column; gap: 10px; }
#notifyPanel .notify-item { display:flex; flex-direction: column; align-items:stretch; gap:8px; padding:10px 0; border-bottom:1px solid var(--paq-border, #E2E8F0); }
#notifyPanel .notify-item:last-child { border-bottom:none; }
#notifyPanel .notify-item-main { display:flex; flex-direction:column; gap:2px; width:100%; }
/* Botones debajo, en fila */
#notifyPanel .notify-item-actions { display:flex; flex-direction:row; gap:6px; margin-top: 4px; align-self:flex-start; }

#paqueteria-view .pagination-container { padding: 16px 0 0 0; text-align:center; }

#paqueteria-view .results-count { font-size: 12px; color: var(--paq-secondary-text); }

/* Controles (inputs / botones generales) */
#paqueteria-view input.form-control {
  height: var(--paq-control-height) !important;
  padding:0 var(--paq-control-padding-x) !important;
  font-size: var(--paq-control-font-size) !important;
  border-radius: var(--paq-control-radius) !important;
  background: var(--paq-control-bg) !important;
  border:1px solid var(--paq-control-border) !important;
  box-shadow:none !important;
  transition: background-color var(--paq-transition), border-color var(--paq-transition);
}
#paqueteria-view input.form-control:focus {
  border-color: var(--paq-control-border-focus) !important;
  background:#FFF !important;
  box-shadow:0 0 0 2px rgba(19,42,72,0.15) !important;
}
#paqueteria-view .filter-buttons .btn {
  height: var(--paq-control-height) !important;
  padding:0 18px !important;
  font-size: var(--paq-control-font-size) !important;
  border-radius: var(--paq-control-radius) !important;
  border:1px solid var(--paq-control-border) !important;
  background: var(--paq-control-bg) !important;
  font-weight:500;
}
#paqueteria-view .filter-buttons .btn.active { 
  background: var(--paq-primary-bg) !important; 
  border-color: var(--paq-primary-bg) !important; 
  color:#FFF !important; 
  font-weight:600; 
}
#paqueteria-view .filter-buttons .btn:focus { 
  border-color: var(--paq-primary-bg) !important; 
  box-shadow:0 0 0 2px rgba(19,42,72,0.2); 
}

/* Ajuste header acciones */
#paqueteria-view .page-header-actions .btn { height: var(--paq-control-height); line-height:1; padding:0 18px; font-size: var(--paq-control-font-size); border-radius: var(--paq-control-radius); border:1px solid var(--paq-control-border); background: var(--paq-control-bg); font-weight:500; }
#paqueteria-view .page-header-actions .btn:hover { background: var(--paq-control-bg-hover); }

/* Evitar doble padding en card list (ya se da en items) */
#paqueteria-view .card-body.p-0 { padding:0 !important; }

@media (max-width: 700px) {
  #paqueteria-view .card-body { padding:12px 10px; }
  #paqueteria-view .card-header { padding:12px 14px; }
  #paqueteria-view .directory-item { padding:9px 12px; }
  #paqueteria-view .directory-item .btn { height:34px; padding:0 14px; }
}