/* P10 · componentes comunes (Fase 1, John 08/11/2026). Ver p10-comun.js.
   Usa los tokens v7 de t25-unificado.css; con respaldo por si una pantalla no los tiene. */
:root {
  --p10-bien: var(--bien, #15803D); --p10-bien-fondo: var(--bien-fondo, #DCFCE7);
  --p10-mal: var(--problema, #B91C1C); --p10-mal-fondo: var(--problema-fondo, #FEE2E2);
  --p10-atn: var(--atencion, #B45309); --p10-atn-fondo: var(--atencion-fondo, #FEF3C7);
}

/* R3: herramientas sobre la tabla */
.p10-herram { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin: 0 0 8px; font-size: 13px; color: var(--tinta-2, #475467); }
.p10-herram select { font: inherit; padding: 6px 10px; border: 1px solid var(--linea, #E7E9EE); border-radius: 8px; background: #fff; margin-left: 6px; }

/* Tabla: UNA rejilla, bloques por agencia dentro (R1) */
.p10-tabla-wrap { overflow-x: auto; border: 1px solid var(--linea, #E7E9EE); border-radius: 12px; background: #fff; }
.p10-tabla { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--tinta, #0F172A); }
.p10-tabla th, .p10-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--linea, #E7E9EE); text-align: left; vertical-align: middle; }
.p10-tabla th { font-size: 12px; font-weight: 500; color: var(--tinta-3, #667085); background: #fff; position: sticky; top: 0; z-index: 1; }
.p10-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p10-tabla .p10-chk { width: 34px; text-align: center; }
.p10-tabla input[type=checkbox] { accent-color: var(--marca, #3B5BFD); margin: 0; width: 16px; height: 16px; }
.p10-orden { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.p10-orden span { color: var(--apagado, #A0A7B4); font-size: 11px; }
.p10-tabla th.num .p10-orden { width: 100%; text-align: right; }
.p10-tabla tr[data-id] { cursor: pointer; }
.p10-tabla tr[data-id]:hover td { background: #F8FAFC; }
.p10-tabla tr.p10-sel td { background: var(--marca-suave, #ECF0FF); }
.p10-cab-ag td { background: #F3F5F9; font-size: 13px; color: var(--tinta-2, #475467); }
.p10-cab-ag b { color: var(--tinta, #0F172A); font-size: 14px; }
.p10-sub td { background: #FAFBFC; font-size: 12px; color: var(--tinta-3, #667085); font-weight: 500; }
.p10-subtotal td { font-weight: 600; font-size: 13px; color: var(--tinta-2, #475467); background: #FAFBFC; }
.p10-total td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--linea, #E7E9EE); }
.p10-subtotal small, .p10-total small { font-weight: 400; color: var(--tinta-3, #667085); }
.p10-vacio { padding: 18px; border: 1px dashed var(--linea, #E7E9EE); border-radius: 12px; color: var(--tinta-3, #667085); background: #fff; }

/* R2 + R4: barra fija de seleccionados con Acciones */
.p10-barra { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 14px; background: var(--marino, #0F172A); color: #fff; border-radius: 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
.p10-barra-bot { display: flex; gap: 8px; align-items: center; }
.p10-limpiar { font: inherit; font-size: 13px; background: none; border: 0; color: #CBD5E1; cursor: pointer; }
.p10-menu-acc { position: relative; }
.p10-btn-acc { font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 10px; border: 0; background: var(--marca, #3B5BFD); color: #fff; cursor: pointer; }
.p10-acc-lista { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 260px; max-height: 70vh; overflow: auto; background: #fff; color: var(--tinta, #0F172A);
  border: 1px solid var(--linea, #E7E9EE); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); padding: 6px; }
.p10-acc-grupo + .p10-acc-grupo { border-top: 1px solid var(--linea, #E7E9EE); margin-top: 4px; padding-top: 4px; }
.p10-acc-titulo { font-size: 12px; color: var(--tinta-3, #667085); padding: 6px 10px 2px; }
.p10-acc-lista button { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: inherit; }
.p10-acc-lista button:hover, .p10-acc-lista button:focus-visible { background: var(--marca-suave, #ECF0FF); }
.p10-acc-lista small { color: var(--tinta-3, #667085); font-size: 11px; margin-left: 4px; }

/* Aviso flotante */
.p10-aviso { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 9999; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 10px; background: var(--marino, #0F172A); color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, .25); }
.p10-aviso.mal { background: var(--p10-mal); }
.p10-aviso.atencion { background: var(--p10-atn); }

/* R5: pistola */
.p10-tabla tr.p10-ok td, tr.p10-ok td { background: var(--p10-bien-fondo) !important; }
.p10-tabla tr.p10-ok td:first-child::before, tr.p10-ok td:first-child::before { content: '✓ '; color: var(--p10-bien); font-weight: 700; }
tr.p10-mal td { animation: p10-destello 1.2s ease-out; }
@keyframes p10-destello { 0%, 40% { background: var(--p10-mal-fondo); } 100% { background: transparent; } }
.p10-mudo { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea, #E7E9EE); background: #fff; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { tr.p10-mal td { animation: none; background: var(--p10-mal-fondo); } }

/* Celular: las columnas secundarias se esconden; la barra ocupa el ancho */
@media (max-width: 720px) {
  .p10-tabla .sec { display: none; }
  .p10-tabla th, .p10-tabla td { padding: 8px 6px; font-size: 13px; }
  .p10-barra { border-radius: 0; margin: 10px -16px 0; }
  .p10-acc-lista { position: fixed; left: 8px; right: 8px; bottom: 64px; min-width: 0; }
}
.p10-acc-lista button.p10-pronto { color: var(--apagado, #A0A7B4); cursor: default; }
.p10-acc-lista button.p10-pronto:hover { background: none; }

/* R7 · colores por estatus (John 09/11): los tonos de EPS en PASTEL, suaves pero visibles, para TODO el bloque.
   Almacén origen rojo · Embarcado/Línea aérea lila · Aduana azul cielo · Centro de distribución amarillo crema · Tránsito oficina gris ·
   Disponible verde menta · Entregado turquesa · Notificado durazno · Retenido rosa. Texto oscuro: contraste AA en todos. */
.r7-origen { --r7:#F9D7D7; --r7-cab:#F3BDBD; --r7-borde:#E58C8C; }
.r7-embarcado { --r7:#DCDDF8; --r7-cab:#C3C6F0; --r7-borde:#7F86D8; }
.r7-aire { --r7:#E2D9F7; --r7-cab:#CDBFF0; --r7-borde:#9F88DE; }
.r7-aduana { --r7:#D3E8FB; --r7-cab:#B6D8F7; --r7-borde:#6FAEE8; }
.r7-cd { --r7:#FBF1C6; --r7-cab:#F5E49C; --r7-borde:#D9B93A; }
.r7-transito { --r7:#E7EAEE; --r7-cab:#D3D8DF; --r7-borde:#9AA3B0; }
.r7-disp { --r7:#D3F0DF; --r7-cab:#B5E5C9; --r7-borde:#5DBB86; }
.r7-entregado { --r7:#CDEEEE; --r7-cab:#ABE1E1; --r7-borde:#4FB7B7; }
.r7-notificado { --r7:#FCE0C9; --r7-cab:#F8CBA6; --r7-borde:#E8975A; }
.r7-retenido { --r7:#F9D6E5; --r7-cab:#F2B9D1; --r7-borde:#DB7AA5; }
.p10-tabla tr[class*="r7-"] td { background:var(--r7) !important; }
.p10-tabla tr.p10-est td { background:var(--r7-cab, #EEF0F3) !important; border-top:8px solid #fff; padding-top:9px; padding-bottom:9px; }
.p10-tabla tr.p10-est td:first-child { box-shadow:inset 4px 0 0 var(--r7-borde, #A0A7B4); }
.p10-tabla tr.p10-subest td { background:var(--r7-cab, #EEF0F3) !important; font-weight:600; font-size:13px; color:var(--tinta, #0F172A); border-bottom:0; }
.p10-tabla tr.p10-sel td { background:var(--marca-suave, #ECF0FF) !important; }
.p10-plegar { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.p10-plegar:focus-visible { outline:2px solid var(--marca, #3B5BFD); outline-offset:2px; border-radius:4px; }
.p10-flecha { display:inline-block; width:12px; color:var(--tinta-2, #475467); }
.p10-est-res { margin-left:12px; font-size:13px; color:var(--tinta-2, #475467); font-variant-numeric:tabular-nums; }
/* Días hábiles en el estatus: insignia roja llamativa cuando pasa lo normal */
.p10-dh { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.75); color:var(--tinta-2, #475467); white-space:nowrap; }
.p10-dh i { font-style:normal; font-weight:800; }
.p10-dh.atencion { background:#F79009; color:#1D1300; }
.p10-dh.problema { background:#D92D20; color:#fff; box-shadow:0 0 0 2px rgba(217,45,32,.25); }
.p10-dh.grave { background:#7A1209; color:#fff; box-shadow:0 0 0 2px rgba(122,18,9,.3); }
.p10-dtot { display:block; font-size:11px; color:var(--tinta-3, #667085); margin-top:2px; white-space:nowrap; }
.p10-tabla td.p10-txt { white-space:normal; font-size:12px; max-width:190px; overflow-wrap:anywhere; }
@media (max-width: 900px) { .p10-est-res { display:block; margin:4px 0 0 20px; } }

.r7-leyenda { display:flex; flex-wrap:wrap; gap:6px 12px; margin:8px 2px 0; font-size:12px; color:var(--tinta-2, #475467); }
.r7-ley { display:inline-flex; align-items:center; gap:6px; } .r7-ley::before { content:''; width:14px; height:14px; border-radius:4px; border:1px solid rgba(15,23,42,.12); }
.r7-ley::before { background:var(--r7-cab, #fff); border-color:var(--r7-borde, rgba(15,23,42,.12)) !important; }
.p10-tabla td.p10-rotulo { white-space:nowrap; }
.p10-cli-cas { display:block; font-size:12px; color:var(--tinta-3, #667085); white-space:nowrap; }
.p10-rot-cel { display:none; }
@media (max-width: 900px) { .p10-rot-cel { display:block; font-weight:500; font-size:12px; color:var(--tinta-2, #475467); } }
/* K2 (09/11): Copiar / Exportar arriba de la lista */
.p10-herram { flex-wrap:wrap; }
.p10-exp { display:flex; gap:6px; flex-wrap:wrap; margin-right:auto; }
.p10-exp-btn { font:inherit; font-size:13px; font-weight:600; padding:6px 12px; border-radius:10px; border:1px solid var(--linea, #E7E9EE); background:#fff; color:var(--tinta, #0F172A); cursor:pointer; }
.p10-exp-btn:hover { background:var(--marca-suave, #ECF0FF); }
.p10-exp-btn:focus-visible { outline:2px solid var(--marca, #3B5BFD); outline-offset:1px; }

/* John 09/11 noche: las advertencias son etiquetas pequeñas al lado del paquete; el color de la fila es solo del estatus. */
.p10-tags { display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:4px; vertical-align:middle; }
.p10-tag { display:inline-block; font-size:11px; font-weight:700; line-height:1.4; padding:1px 7px; border-radius:999px; white-space:nowrap; }
.p10-tag.pendfact { background:#B42318; color:#fff; }                       /* destacada: hay que pedir la factura */
.p10-tag.restr { background:#FEF0C7; color:#7A2E0E; border:1px solid #F5C26B; }
.p10-tag.ret { background:#FCE7F0; color:#9F1A4F; border:1px solid #E7A1C0; }
.p10-tag.atr { background:#FEE4E2; color:#B42318; border:1px solid #F4A39C; }
/* Días: arriba los de calendario («23 días»), abajo la insignia de este estatus («17 en este estatus»). */
.la-c-dias .p10-dtot, td .p10-dtot { display:block; font-size:12px; font-weight:600; color:var(--tinta, #101828); margin:0 0 3px; }
.p10-dest { display:block; white-space:normal; text-align:center; font-size:11px; line-height:1.3; color:var(--tinta-3, #667085); max-width:92px; margin:0 auto; }
.p10-dest .p10-dh { font-size:11px; padding:1px 6px; }
.p10-tag { white-space:normal; }
/* Celular: la columna Días necesita un mínimo para «23 días / !17 en este estatus» sin desbordar. */
td.la-c-dias { min-width:84px; }
@media (max-width: 720px) { td.la-c-dias { min-width:72px; } .la-c-dias .p10-dtot { white-space:normal; } .p10-dest { max-width:none; } }