/* ============================================================
   TopoApp — Tarjetas de pedido «pro»
   Un solo lenguaje visual para todas las vistas de pedidos:
   lista, dashboard, confirmaciones, guías, empaque, enviados,
   tránsito y seguimientos. «:not(#pp)» sube la especificidad
   para imponerse a los estilos antiguos de cada vista.
   ============================================================ */
:root {
    --pp-tinta: #1C1917;
    --pp-texto: #44403C;
    --pp-suave: #78716C;
    --pp-linea: #ECE8E3;
    --pp-linea-2: #E2DCD5;
    --pp-fondo: #FFFFFF;
    --pp-chip: #F5F3F0;
    --pp-acento: #D96A2B;
}

/* ── Superficie ─────────────────────────────────────────── */
:is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card, .guias-card, .empaque-card, .order-card):not(#pp) {
    position: relative;
    background: var(--pp-fondo);
    border: 1px solid var(--pp-linea);
    border-left-width: 1px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
    overflow: hidden;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s, border-color .18s;
    margin-bottom: 12px;
}
:is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card, .guias-card, .empaque-card, .order-card):not(#pp)::before { display: none; }
:is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card, .guias-card, .empaque-card, .order-card):not(#pp):hover {
    transform: translateY(-2px);
    border-color: var(--pp-linea-2);
    box-shadow: 0 16px 36px -16px rgba(28, 25, 23, .22), 0 2px 6px rgba(28, 25, 23, .04);
}
:is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card, .guias-card, .empaque-card, .order-card):not(#pp):active { transform: translateY(0) scale(.995); }
:is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card, .guias-card, .empaque-card, .order-card):not(#pp):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 106, 43, .35), 0 12px 30px -14px rgba(28, 25, 23, .2);
}
.pp-clic:not(#pp) { cursor: pointer; }

/* Acento lateral fino según el momento del pedido (reemplaza los bordes gruesos) */
.pp-acento { position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pp-ac, transparent); }

/* ── Cabecera / cuerpo / pie ─────────────────────────────── */
:is(.pedido-header, .tr-card-header, .env-card-header, .seg-card-header, .conf-card-header):not(#pp) {
    background: transparent;
    border: 0;
    padding: 14px 18px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
:is(.pedido-body, .tr-card-body, .env-card-body, .seg-card-body, .conf-card-body):not(#pp) {
    background: transparent;
    padding: 6px 18px 12px;
}
:is(.pedido-footer, .tr-card-footer, .env-card-footer, .seg-card-footer, .conf-card-footer):not(#pp) {
    background: #FBFAF8;
    border-top: 1px solid #F1EEEA;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ── Tipografía ──────────────────────────────────────────── */
:is(.pedido-numero, .tr-order-num, .env-order-num, .seg-order-num, .conf-order-num, .guias-num, .empaque-numero, .order-number):not(#pp) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--pp-suave);
    text-decoration: none;
    background: transparent;
    padding: 0;
}
:is(.tr-order-num, .env-order-num, .seg-order-num, .conf-order-num):not(#pp):hover { color: var(--pp-acento); }
:is(.pedido-cliente, .tr-client, .env-client, .seg-client, .conf-client-name, .guias-client, .empaque-cliente):not(#pp) {
    font-size: 1.02rem;
    font-weight: 750;
    color: var(--pp-tinta);
    letter-spacing: -.01em;
}
:is(.pedido-total, .env-total, .conf-total, .empaque-total, .order-total, .tr-total, .seg-total):not(#pp) {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--pp-tinta);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
:is(.pedido-productos, .tr-products, .env-products, .seg-products, .guias-products, .order-products):not(#pp) {
    font-size: .84rem;
    color: var(--pp-suave);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Chips de datos ──────────────────────────────────────── */
:is(.pedido-meta-chip, .tr-chip, .env-chip, .seg-chip, .guias-chip, .pp-chip):not(#pp) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--pp-chip);
    border: 0;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .76rem;
    font-weight: 600;
    color: #57534E;
    line-height: 1.2;
}
:is(.pedido-meta-chip, .tr-chip, .env-chip, .seg-chip, .guias-chip, .pp-chip):not(#pp) .bi { color: #A8A29E; margin: 0 !important; }
:is(.tr-chip--pagado, .env-chip--pagado, .guias-chip--pagado):not(#pp) { background: #EFF6FF; color: #1D4ED8; }
:is(.tr-chip--pagado, .env-chip--pagado, .guias-chip--pagado):not(#pp) .bi { color: #3B82F6; }

/* Pills de aviso (urgente, nota, reserva, catálogo, cupón) */
:is(.pedido-pill-alert, .tr-badge-urgente, .tr-badge-nota, .pedido-pill-origen, .pedido-pill-cupon):not(#pp) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.3;
}
:is(.pedido-pill-alert, .tr-badge-urgente):not(#pp) { background: #FEF3C7; color: #92400E; }
.tr-badge-nota:not(#pp) { background: #FEE2E2; color: #B91C1C; }
.pedido-pill-origen:not(#pp) { background: #F3E8FF; color: #7E22CE; }
.pedido-pill-cupon:not(#pp) { background: #DCFCE7; color: #15803D; }

/* ── Estado: pill con punto ──────────────────────────────── */
:is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card, .guias-card, .empaque-card, .order-card) .badge-estado:not(#pp) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 10px 4px 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
    border: 0;
}
:is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card, .guias-card, .empaque-card, .order-card) .badge-estado:not(#pp)::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

/* ── Avatar del cliente ──────────────────────────────────── */
.pp-avatar {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--av) 14%, #fff);
    color: var(--av);
    font-weight: 800;
    font-size: .88rem;
    letter-spacing: .02em;
}
.pp-ident { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pp-ident-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pp-ident-txt > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Barra de avance del pedido ──────────────────────────── */
.pp-prog { display: flex; gap: 4px; width: 100%; max-width: 220px; }
.pp-prog span { flex: 1; height: 5px; border-radius: 99px; background: #EEEAE5; transition: background .3s; }
.pp-prog span.is-on { background: var(--pp-prog, #16A34A); }
.pp-prog span.is-now { background: var(--pp-prog, #16A34A); animation: pp-latido 1.8s ease-in-out infinite; }
.pp-prog span.is-x { background: #FCA5A5; }
.pp-prog--pendiente { --pp-prog: #D97706; }
.pp-prog--confirmado { --pp-prog: #2563EB; }
.pp-prog--preparado { --pp-prog: #7C3AED; }
.pp-prog--enviado, .pp-prog--en_ruta { --pp-prog: #0891B2; }
.pp-prog--entregado, .pp-prog--liquidado { --pp-prog: #16A34A; }
@keyframes pp-latido { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.pp-prog-fila { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pp-prog-fila small { font-size: .72rem; color: var(--pp-suave); font-weight: 600; white-space: nowrap; }

/* ── Botones dentro de las tarjetas ─────────────────────── */
:is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card, .guias-card, .empaque-card) :is(.btn-sm, .btn):not(#pp) {
    border-radius: 10px;
    font-weight: 650;
    transition: transform .12s, box-shadow .12s, background .12s;
}
:is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card, .guias-card, .empaque-card) :is(.btn-sm, .btn):not(#pp):active { transform: scale(.96); }
:is(.tr-wa-btn, .env-wa-btn, .seg-wa-btn):not(#pp) { border-radius: 12px; width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; }
.pedido-open-link:not(#pp) { font-size: .8rem; font-weight: 700; color: var(--pp-acento); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.pedido-open-link:not(#pp) .bi { transition: transform .18s; }
.pedido-card:hover .pedido-open-link .bi { transform: translateX(3px); }

/* Copiar guía: el chip de guía se vuelve botón */
.pp-copiable { cursor: copy; }
.pp-copiable.is-copiado { background: #DCFCE7 !important; color: #15803D !important; }

/* ── Entrada escalonada ──────────────────────────────────── */
.pp-entra { animation: pp-entra .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--pp-i, 0) * 35ms); }
@keyframes pp-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .pp-entra, .pp-prog span.is-now { animation: none; }
    :is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card, .guias-card, .empaque-card, .order-card):not(#pp) { transition: none; }
}

/* ── Celular ─────────────────────────────────────────────── */
@media (max-width: 575px) {
    :is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card, .guias-card, .empaque-card, .order-card):not(#pp) { border-radius: 16px; }
    :is(.pedido-header, .tr-card-header, .env-card-header, .seg-card-header, .conf-card-header):not(#pp) { padding: 12px 14px 2px; }
    :is(.pedido-body, .tr-card-body, .env-card-body, .seg-card-body, .conf-card-body):not(#pp) { padding: 6px 14px 10px; }
    :is(.pedido-footer, .tr-card-footer, .env-card-footer, .seg-card-footer, .conf-card-footer):not(#pp) { padding: 10px 14px; }
    .pp-avatar { width: 36px; height: 36px; border-radius: 12px; font-size: .8rem; }
    .pp-prog { max-width: none; }
}

/* ── Piezas nuevas dentro de cada tarjeta ───────────────── */
:is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card):not(#pp) > .pp-prog-fila { padding: 0 18px 12px; margin: 0; }
.guias-card .pp-prog-fila { margin-top: 8px; }
.pedido-ident { margin: 2px 0 6px; }
.pedido-ident .pedido-cliente { font-size: 1.05rem; }
:is(.tr-row, .env-row, .seg-row, .conf-row):not(#pp) { align-items: center; gap: 12px; }
:is(.tr-row-info, .env-row-info, .seg-row-info):not(#pp) { gap: 2px 10px; }

/* Dashboard: pedidos recientes en filas con avatar */
.order-card:not(#pp) { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; color: inherit; }
.order-card-left:not(#pp) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.order-card-right:not(#pp) { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.order-card .order-client:not(#pp):first-of-type { font-weight: 750; color: var(--pp-tinta); font-size: .98rem; }
.order-card .order-products:not(#pp) { -webkit-line-clamp: 1; }
.order-card .dashboard-order-meta:not(#pp) { font-size: .76rem; color: var(--pp-suave); font-weight: 500; }
@media (max-width: 575px) {
    :is(.pedido-card, .tr-card, .env-card, .seg-card, .conf-card):not(#pp) > .pp-prog-fila { padding: 0 14px 10px; }
    .order-card:not(#pp) { padding: 12px; gap: 10px; }
}
/* La tarjeta de la lista traía relleno y fondo propios */
.pedido-card:not(#pp) { padding: 0; gap: 0; background: var(--pp-fondo); }
.pedido-card .pedido-footer:not(#pp) { margin: 0; border-radius: 0; }
.pedido-card .pedido-tel:not(#pp), .pedido-card .pedido-productos:not(#pp) { display: flex; align-items: center; gap: 4px; font-size: .84rem; }
/* Lista de pedidos compacta */
.pedido-fila-principal { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 2px 0 8px; }
.pedido-fila-principal .pedido-total:not(#pp) { font-size: 1.22rem; white-space: nowrap; }
.pedido-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-size: .8rem; color: var(--pp-suave); }
.pedido-sub .bi { color: #A8A29E; }
.pedido-sep { color: #D6D3D1; }
.pedido-card .pedido-productos:not(#pp) { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 8px; }
.pedido-card .pedido-productos .bi { color: #A8A29E; margin-top: 2px; }
.pedido-card .pedido-meta-row:not(#pp) { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pedido-card > .pedido-prog:not(#pp) { padding: 10px 18px 12px; border-top: 1px solid #F1EEEA; background: #FBFAF8; }
:is(.tr-meta, .env-meta, .seg-meta, .tr-products, .env-products, .tr-guide, .env-guide):not(#pp) { padding-left: 0; margin-left: 0; }
:is(.tr-meta, .env-meta, .seg-meta):not(#pp) { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
:is(.tr-products, .env-products):not(#pp) { display: flex; gap: 6px; align-items: flex-start; color: var(--pp-suave); font-size: .84rem; }
.order-card-left > span:nth-child(2):not(#pp) { font-weight: 750; color: var(--pp-tinta); font-size: .98rem; }
@media (max-width: 575px) {
    .pedido-ident .pedido-cliente:not(#pp) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .98rem; }
    .pedido-fila-principal .pedido-total:not(#pp) { font-size: 1.08rem; }
}

/* «Ver detalle» y la fila de avance nunca se parten */
.pedido-open-link:not(#pp) { white-space: nowrap; flex-shrink: 0; }
.pp-prog-fila small { flex-shrink: 0; }
.pedido-fila-principal:has(> .pedido-total:only-child) { justify-content: flex-start; }
@media (max-width: 575px) {
    .pp-prog-fila { flex-wrap: wrap; row-gap: 8px; }
    .pp-prog-fila > .pp-prog { flex: 1 0 100%; }
    .pedido-prog .pedido-open-link:not(#pp) { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #FFF7F0; }
    .pedido-sub { font-size: .78rem; }
}
:is(.pedido-card):not(#pp) > :is(.pedido-header, .pedido-body, .pp-prog-fila) { align-self: stretch; text-align: left; }
.pedido-body.pedido-fila-principal:not(#pp) { flex-direction: row; align-items: center; justify-content: flex-start; }