/* =========================================================================
   PANEL DE ENVÍOS (TABLA + SELECCIÓN) · Mi Cuenta / WooCommerce
   Wanderlust Codes · estilo "manifiesto" · acento hi-vis naranja
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.wlc-envios {
  --paper:   #f3f5f9;
  --card:    #ffffff;
  --ink:     #10151f;
  --muted:   #5a6472;
  --dim:     #93a0b0;
  --line:    #e2e7ef;
  --line-2:  #eef1f6;
  --signal:  #f2560a;
  --signal-d:#cf4506;
  --done:    #12805c;
  --fail:    #c0362c;
  --sel:     #fff4ee;

  --ui:   "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  font-family: var(--ui);
  color: var(--ink);
  accent-color: var(--signal);
}

.wlc-envios > h3 {
  font-family: var(--ui);
  font-size: .74rem !important; font-weight: 800 !important; letter-spacing: .16em !important;
  line-height: 1.2 !important; text-transform: uppercase !important; color: var(--muted);
  margin: 0 0 1.1rem !important; display: flex; align-items: center; gap: .5rem;
}
.wlc-envios > h3::before { content:""; width:10px; height:3px; background:var(--signal); }

/* Cabecera: usuario + métricas del mes */
.wlc-head { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin:-.3rem 0 1.1rem; }
.wlc-user { font-size:.9rem; color:var(--muted); }
.wlc-user b { color:var(--ink); font-family:var(--mono); }
.wlc-metrics { display:flex; gap:.7rem; margin-left:auto; flex-wrap:wrap; }
.wlc-metric { display:flex; flex-direction:column; gap:.15rem; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:.5rem .9rem; min-width:132px; }
.wlc-metric__label { font-family:var(--mono); font-size:.58rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.wlc-metric__value { font-family:var(--mono); font-size:1.05rem; font-weight:700; color:var(--ink); }
.wlc-metric__value .amount { font-family:var(--mono); }

.wlc-empty {
  font-family: var(--mono); font-size: .85rem; color: var(--muted);
  background: var(--paper); border: 1px dashed var(--line);
  border-radius: 10px; padding: 1.2rem 1.1rem;
}

/* ----------------------------- Barra de acciones ----------------------------- */
.wlc-bulk {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem .9rem; margin-bottom: .8rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
}
.wlc-selcount {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.wlc-selcount b { color: var(--ink); font-weight: 700; }
.wlc-bulk__actions { margin-left: auto; display: flex; gap: .55rem; }

.wlc-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--signal);
  border: 1px solid var(--signal); border-radius: 7px;
  padding: .5rem .9rem; text-decoration: none; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease, opacity .12s ease;
}
.wlc-btn:hover:not(:disabled) { background: var(--signal-d); border-color: var(--signal-d); }
.wlc-btn:disabled { opacity: .4; cursor: not-allowed; }
.wlc-btn--danger { color: var(--fail); background: transparent; border-color: var(--line); }
.wlc-btn--danger:hover:not(:disabled) { background: var(--fail); color: #fff; border-color: var(--fail); }
.wlc-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Aviso post-acción */
.wlc-notice {
  font-family: var(--mono); font-size: .74rem;
  padding: .6rem .9rem; border-radius: 8px; margin-bottom: .8rem;
  border: 1px solid var(--line);
}
.wlc-notice.is-ok  { color: var(--done); border-color: #bfe6d6; background: #f0faf6; }
.wlc-notice.is-err { color: var(--fail); border-color: #f0cfcc; background: #fdf3f2; }

/* ----------------------------- Tabla ----------------------------- */
.wlc-tablewrap { overflow-x: auto; }
.wlc-envios-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  font-size: .88rem;
}
.wlc-envios-table thead th {
  background: var(--paper); color: var(--dim);
  font-family: var(--mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.wlc-envios-table thead th.wlc-col-total { text-align: right; }

.wlc-envios-table tbody td {
  padding: .85rem 1rem; border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.wlc-envios-table tbody tr:last-child td { border-bottom: 0; }
.wlc-envios-table tbody tr { transition: background .1s ease; }
.wlc-envios-table tbody tr:hover { background: #fafbfd; }
.wlc-envios-table tbody tr.is-selected { background: var(--sel); }

.wlc-col-check { width: 40px; text-align: center; }
.wlc-col-check input { width: 16px; height: 16px; cursor: pointer; }
.wlc-col-check input:disabled { cursor: not-allowed; opacity: .4; }

.wlc-code-sm {
  font-family: var(--mono); font-weight: 600; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.wlc-code-sm:hover { color: var(--signal); }
.wlc-code--empty { color: var(--dim); }
.wlc-envios-table time { font-family: var(--mono); font-size: .8rem; color: var(--muted); white-space: nowrap; }
.wlc-destino { color: var(--muted); min-width: 200px; }
.wlc-col-total { text-align: right; white-space: nowrap; }
.wlc-total { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.wlc-total .amount { font-family: var(--mono); }

/* Pills */
.wlc-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .28rem .6rem;
  white-space: nowrap;
}
.wlc-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--dim); }
.wlc-pill.is-proc::before { background: var(--signal); }
.wlc-pill.is-done::before { background: var(--done); }
.wlc-pill.is-fail::before { background: var(--fail); }

/* Candado: fila que ya no se puede cancelar */
.wlc-lock { display:inline-flex; align-items:center; color:var(--dim); margin-left:.4rem; vertical-align:middle; cursor:help; }
.wlc-lock svg { width:12px; height:12px; }
.wlc-lock:hover { color:var(--muted); }

/* ----------------------------- Responsive (stack) ----------------------------- */
@media (max-width: 760px) {
  .wlc-envios-table, .wlc-envios-table tbody, .wlc-envios-table tr, .wlc-envios-table td { display: block; width: 100%; }
  .wlc-envios-table thead { display: none; }
  .wlc-tablewrap { overflow: visible; }
  .wlc-envios-table { border: 0; }
  .wlc-envios-table tbody tr {
    border: 1px solid var(--line); border-radius: 10px;
    margin-bottom: .8rem; padding: .3rem .2rem; position: relative;
  }
  .wlc-envios-table tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    text-align: right; border-bottom: 1px solid var(--line-2); padding: .65rem .9rem;
  }
  .wlc-envios-table tbody tr td:last-child { border-bottom: 0; }
  .wlc-envios-table tbody td::before {
    content: attr(data-title);
    font-family: var(--mono); font-size: .6rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
    text-align: left;
  }
  .wlc-col-total { text-align: right; }
  /* el checkbox arriba a la derecha de la tarjeta */
  .wlc-col-check { position: absolute; top: .5rem; right: .5rem; border: 0 !important; padding: 0; }
  .wlc-col-check::before { content: none !important; }
  .wlc-destino { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) { .wlc-envios * { transition: none !important; } }


/* ----------------------------- Paginación ----------------------------- */
.wlc-paginacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1rem; padding: .7rem 0;
}
.wlc-paginacion__info {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .06em; color: var(--muted);
}
.wlc-paginacion__nav {
  display: flex; align-items: center; gap: .3rem;
}
.wlc-paginacion__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 .5rem;
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 7px;
  text-decoration: none; cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.wlc-paginacion__btn:hover {
  border-color: var(--signal); color: var(--signal);
}
.wlc-paginacion__btn.is-current {
  background: var(--signal); color: #fff;
  border-color: var(--signal); pointer-events: none;
}
.wlc-paginacion__dots {
  font-family: var(--mono); font-size: .78rem; color: var(--dim);
  padding: 0 .2rem;
}

@media (max-width: 760px) {
  .wlc-paginacion { flex-direction: column; gap: .6rem; align-items: stretch; }
  .wlc-paginacion__info { text-align: center; }
  .wlc-paginacion__nav { justify-content: center; flex-wrap: wrap; }
}

/* Leyenda de cuenta pausada */
.wlc-paused { display:flex; align-items:center; gap:.6rem; background:#fdf3f2; border:1px solid #f0cfcc; color:#b32d2e; border-radius:10px; padding:.8rem 1rem; margin:0 0 1rem; font-size:.9rem; }
.wlc-paused svg { width:18px; height:18px; flex:0 0 auto; }
.wlc-paused b { font-weight:700; }
