:root {
      --verde-oscuro: #255c3a;
      --verde-claro: #6bbf7a;
      --crema: #f5f3e8;
      --gris-claro: #f5f5f5;
      --gris-borde: #dddddd;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin: 0;
      padding: 0;
      background: var(--gris-claro);
    }

    header {
      background: linear-gradient(90deg, var(--verde-oscuro), #1f4730);
      color: white;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 3px solid var(--verde-claro);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand-logo {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
      flex: 0 0 auto;
    }

    .brand-text {
      display: flex;
      flex-direction: column;
    }

    .brand-text-main {
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: 0.02em;
      line-height: 1.1;
    }

    .brand-text-sub {
      font-size: 0.8rem;
      opacity: 0.9;
    }

    main {
      padding: 20px;
      max-width: 1280px;
      margin: 0 auto;
    }

    .card {
      background: white;
      border-radius: 14px;
      padding: 18px;
      margin-bottom: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      border: 1px solid rgba(0,0,0,0.03);
    }

    h2 {
      margin: 0 0 10px 0;
      font-size: 1.15rem;
    }

    p { color: #566; }

    label {
      display: block;
      margin-top: 8px;
      font-size: 0.9rem;
    }

    input, select, textarea, button {
      padding: 6px 8px;
      margin-top: 3px;
      font-size: 0.9rem;
      font-family: inherit;
    }

    input, select, textarea {
      width: 100%;
      box-sizing: border-box;
      border-radius: 8px;
      border: 1px solid var(--gris-borde);
      background: #fff;
    }

    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: var(--verde-claro);
      box-shadow: 0 0 0 2px rgba(107,191,122,0.25);
    }

    button {
      cursor: pointer;
      border-radius: 8px;
      border: none;
      background: var(--verde-oscuro);
      color: white;
      padding: 7px 12px;
      font-weight: 600;
    }

    button:hover {
      background: #1b472b;
    }

    .hidden { display: none !important; }

    /* Dashboard */
    .stats {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .stat-box {
      background: var(--crema);
      padding: 10px;
      border-radius: 10px;
      flex: 1;
      text-align: center;
      border: 1px solid rgba(0,0,0,0.04);
      min-width: 120px;
    }

    .stat-label {
      font-size: 0.8rem;
      color: #555;
    }

    .stat-value {
      font-size: 1.4rem;
      font-weight: bold;
      color: var(--verde-oscuro);
    }

    .flex {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .flex > div {
      flex: 1;
      min-width: 360px;
    }

    /* Tabla "pro" */
    .table-wrap{
      width:100%;
      overflow-x:auto;
      border:1px solid rgba(0,0,0,.08);
      border-radius:12px;
      background:#fff;
    }

    #tabla-paquetes{
      width:100%;
      min-width: 980px;
      border-collapse: separate;
      border-spacing: 0;
    }

    #tabla-paquetes thead th{
      position: sticky;
      top: 0;
      z-index: 2;
      background: #f3f6f4;
      border-bottom: 1px solid rgba(0,0,0,.08);
      font-weight: 650;
      white-space: nowrap;
      vertical-align: middle;
    }

    #tabla-paquetes th, #tabla-paquetes td{
      padding: 10px 10px;
      border-right: 1px solid rgba(0,0,0,.06);
      white-space: nowrap;
      vertical-align: middle;
    }

    #tabla-paquetes th:last-child, #tabla-paquetes td:last-child{
      border-right: none;
    }

    #tabla-paquetes thead .filter-row th{
      background: #ffffff;
      border-bottom: 1px solid rgba(0,0,0,.08);
    }

    #tabla-paquetes thead .filter-row input,
    #tabla-paquetes thead .filter-row select{
      width: 100%;
      height: 34px;
      border-radius: 8px;
      border: 1px solid rgba(0,0,0,.14);
      padding: 6px 8px;
      font-size: .88rem;
      background: #fff;
      box-sizing: border-box;
    }

    #tabla-paquetes thead .filter-row input:focus,
    #tabla-paquetes thead .filter-row select:focus{
      border-color: rgba(107,191,122,.9);
      box-shadow: 0 0 0 3px rgba(107,191,122,.18);
      outline: none;
    }

    #tabla-paquetes tbody tr{
      border-bottom: 1px solid rgba(0,0,0,.06);
    }

    #tabla-paquetes tbody tr:nth-child(even){
      background: #fafbfa;
    }

    #tabla-paquetes tbody tr:hover{
      background: #cfe5d8;
    }

    #tabla-paquetes tbody tr.is-selected{
      background: #bddcc9;
    }

    td.col-nombre{
      white-space: normal;
      max-width: 320px;
      line-height: 1.2;
    }

    .btn-small{
      background: #1f5a38;
      border-radius: 10px;
      padding: 7px 12px;
      font-weight: 600;
    }
    .btn-small:hover{ background:#184a2f; }
    .btn-edit{
      background:#406b8a;
      border-radius:10px;
      padding:7px 12px;
      font-weight:600;
    }
    .btn-edit:hover{ background:#325870; }

    th.sortable { cursor: pointer; }
    th.sortable::after { content: ""; }

    th.col-accion, td.col-accion { width: 190px; }
    th.col-fecha, td.col-fecha { width: 120px; }
    th.col-empresa, td.col-empresa { width: 140px; }
    th.col-ubicacion, td.col-ubicacion { width: 170px; }
    th.col-tracking, td.col-tracking { width: 140px; }
    th.col-numero, td.col-numero {width: 140px;}

    /* Header user-info */
    #user-info {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    #user-name { opacity: 0.95; font-weight: 600; }
    /* Sticky a la derecha: columna Accion siempre visible */
#tabla-paquetes th.col-accion,
#tabla-paquetes td.col-accion{
  position: sticky;
  right: 0;
  z-index: 3;
  background: #fff;
  box-shadow: -10px 0 12px rgba(0,0,0,0.06);
}

/* En cabecera usamos el fondo de cabecera */
#tabla-paquetes thead th.col-accion{
  background: #f3f6f4;
  z-index: 4;
}

/* Sticky a la izquierda para ID (opcional, muy comodo) */
#tabla-paquetes th.col-numero,
#tabla-paquetes td.col-numero{
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
  box-shadow: 10px 0 12px rgba(0,0,0,0.04);
}

#tabla-paquetes thead th.col-numero{
  background: #f3f6f4;
  z-index: 4;
}

/* Para que la sticky no "herede" el zebra raro */
#tabla-paquetes tbody tr:nth-child(even) td.col-accion,
#tabla-paquetes tbody tr:nth-child(even) td.col-numero{
  background: #fafbfa;
}
#tabla-paquetes tbody tr:hover td.col-accion,
#tabla-paquetes tbody tr:hover td.col-numero{
  background: #cfe5d8;
}
#tabla-paquetes tbody tr.is-selected td.col-accion,
#tabla-paquetes tbody tr.is-selected td.col-numero{
  background: #bddcc9;
}
#tabla-paquetes tbody tr.is-selected td.col-numero{
  box-shadow: inset 4px 0 0 #1f5a38, 10px 0 12px rgba(0,0,0,0.04);
}
/* Tabs */
#tabs { display:flex; gap:10px; align-items:center; }
.tab-btn{
  background:#e9f1ec;
  color:#1f4730;
  border:1px solid rgba(0,0,0,.06);
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
}
.tab-btn:hover{ background:#dfeee5; }
.tab-btn.active{
  background: var(--verde-oscuro);
  color:#fff;
}

.pager{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

.pager-info{
  font-size:.88rem;
  color:#334;
}

.muted-status{
  margin-left:8px;
  font-size:.85rem;
  color:#4a5;
}

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
  margin:10px 0;
}

.kpi{
  background:#f3f6f4;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  padding:10px;
}

.kpi-label{
  font-size:.8rem;
  color:#566;
}

.kpi-value{
  font-size:1.35rem;
  font-weight:700;
  color:#1f5a38;
}

.bars{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

.bar-row{
  display:grid;
  grid-template-columns: 140px 1fr 64px;
  gap:8px;
  align-items:center;
}

.bar-track{
  height:12px;
  border-radius:999px;
  background:#e7ece9;
  overflow:hidden;
}

.bar-fill{
  height:100%;
  background:#1f5a38;
}

.inv-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}

.inv-actions button{
  padding:7px 10px;
}

.inv-count{
  font-size:.9rem;
  color:#355;
}

	/* Full width recoger */
	.fullwidth-card{
	  padding: 18px;
	}

	@media (max-width: 900px) {
	  header {
	    padding: 10px 12px;
	  }
	  .brand-logo {
	    width: 38px;
	    height: 38px;
	  }
	  .brand-text-main {
	    font-size: 1rem;
	  }
	  main {
	    padding: 12px;
	  }
	  .card {
	    padding: 12px;
	    margin-bottom: 12px;
	  }
	  #tabs {
	    overflow-x: auto;
	    padding-bottom: 4px;
	  }
	  .tab-btn {
	    white-space: nowrap;
	    padding: 8px 12px;
	  }
	  .flex > div {
	    min-width: 100%;
	  }
	  #tabla-paquetes,
	  #tabla-entregados,
	  #tabla-reporte-recibidos,
	  #tabla-reporte-diario,
	  #tabla-inventario-detalle {
	    min-width: 880px;
	  }
	  #tabla-paquetes th,
	  #tabla-paquetes td {
	    padding: 8px 8px;
	    font-size: 0.86rem;
	  }
	  .bar-row {
	    grid-template-columns: 110px 1fr 56px;
	  }
	}