/* ============================================================================
   SCRUM-2533 — Consulta pedidos al laboratorio · modo «sin laboratorio configurado»
   ----------------------------------------------------------------------------
   Acabado del mockup (softop-v5-front › pedidos-consulta.html) sobre Dore, con el
   mismo criterio de ordenes-v5.css: espaciado, radios, tipografía y piezas del
   mockup; colores de marca y superficies desde las variables del tema activo
   (claro/oscuro y variantes por óptica); colores de estado semánticos y fijos.

   Traducción de tokens del mockup:
     --brand      -> var(--theme-color-1)
     --brand-soft -> var(--theme-color-1-10)
     --surface    -> var(--foreground-color)
     --surface-2  -> var(--background-color)
     --line       -> var(--separator-color)
     --ink        -> var(--primary-color)

   Todo va acotado bajo .pc-screen y con prefijo pc- para no chocar con .btn,
   .card, .table ni .badge de Bootstrap. El ancho que manda es el de la página
   (container «pc-pagina»), no el de la ventana: el menú lateral de Dore resta.
   ============================================================================ */

.pc-screen {
    --pc-brand: var(--theme-color-1);
    --pc-brand-soft: var(--theme-color-1-10);
    --pc-surface: var(--foreground-color);
    --pc-surface-2: var(--background-color);
    --pc-line: var(--separator-color);
    --pc-line-2: rgba(127, 127, 127, .14);
    --pc-ink: var(--primary-color);
    --pc-ink-2: var(--primary-color);
    --pc-ink-3: rgba(127, 127, 127, 1);

    --pc-ok: #0f7b4f;
    --pc-ok-soft: #e7f5ee;
    --pc-warn: #9a6400;
    --pc-warn-soft: #fdf3e2;
    --pc-danger: #c0392f;
    --pc-danger-soft: #fcedeb;

    --pc-r1: 10px;
    --pc-r2: 16px;
    --pc-sh1: 0 1px 2px rgba(13, 23, 32, .05);
    --pc-sh2: 0 1px 3px rgba(13, 23, 32, .06), 0 10px 28px rgba(13, 23, 32, .12);
    --pc-t1: 12.5px;
    --pc-t2: 13.5px;
    --pc-t3: 14.5px;

    color: var(--pc-ink);
    font-size: var(--pc-t2);
}

.pc-screen .pc-pagina {
    container-type: inline-size;
    container-name: pc-pagina;
}

/* ══ Cabecera ═══════════════════════════════════════════════════════════ */

.pc-screen .pc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.pc-screen .pc-head h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    padding: 0;
    color: var(--pc-ink);
}

.pc-screen .pc-head p {
    color: var(--pc-ink-3);
    margin: 3px 0 0;
    max-width: 110ch;
    font-size: var(--pc-t2);
}

.pc-screen .pc-head-acts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ══ Piezas base ════════════════════════════════════════════════════════ */

.pc-screen .pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--pc-r1);
    font-size: var(--pc-t2);
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: -.01em;
    border: 1px solid transparent;
    background: none;
    color: var(--pc-ink);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.pc-screen .pc-btn:hover { text-decoration: none; }
.pc-screen .pc-btn:disabled { opacity: .45; cursor: not-allowed; }
.pc-screen .pc-btn--primary { background: var(--pc-brand); color: #fff; }
.pc-screen .pc-btn--primary:hover { filter: brightness(.93); }
.pc-screen .pc-btn--ghost { background: var(--pc-surface); color: var(--pc-ink); border-color: var(--pc-line); }
.pc-screen .pc-btn--ghost:hover { background: var(--pc-surface-2); }
.pc-screen .pc-btn--quiet { color: var(--pc-ink-3); padding: 0 8px; }
.pc-screen .pc-btn--quiet:hover { background: var(--pc-surface-2); color: var(--pc-ink); }
.pc-screen .pc-btn--xs { height: 26px; padding: 0 9px; font-size: var(--pc-t1); }
.pc-screen .pc-btn--block { width: 100%; }

.pc-screen .pc-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--pc-brand);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pc-screen .pc-link:hover { filter: brightness(.85); }

.pc-screen .pc-meta { font-size: var(--pc-t1); color: var(--pc-ink-3); }

.pc-screen .pc-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 23px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: var(--pc-t1);
    font-weight: 500;
    white-space: nowrap;
    background: var(--pc-line-2);
    color: var(--pc-ink-3);
}

.pc-screen .pc-tag::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    flex: none;
}

.pc-screen .pc-tag--ok { background: var(--pc-ok-soft); color: var(--pc-ok); }
.pc-screen .pc-tag--warn { background: var(--pc-warn-soft); color: var(--pc-warn); }
.pc-screen .pc-tag--danger { background: var(--pc-danger-soft); color: var(--pc-danger); }
.pc-screen .pc-tag--brand { background: var(--pc-brand-soft); color: var(--pc-brand); }

/* overflow-x: si aun con las columnas recortadas la tabla no cabe, se desplaza dentro
   del recuadro en vez de salirse de él. Por eso los menús de la fila son fixed (los
   posiciona consultaPedidosExternos.js) y no quedan recortados. */
.pc-screen .pc-card {
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r2);
    box-shadow: var(--pc-sh1);
    overflow-x: auto;
}

.pc-screen .pc-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--pc-line-2);
    font-size: var(--pc-t2);
}

.pc-screen .pc-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--pc-brand-soft);
    border: 1px solid var(--pc-brand);
    border-radius: var(--pc-r1);
    font-size: var(--pc-t2);
}

.pc-screen .pc-notice .pc-sec { font-size: var(--pc-t1); color: var(--pc-ink-3); margin-top: 1px; }
.pc-screen .pc-notice--warn { background: var(--pc-warn-soft); border-color: var(--pc-warn); }
.pc-screen .pc-notice--warn b { color: var(--pc-warn); }
.pc-screen .pc-notice--danger { background: var(--pc-danger-soft); border-color: var(--pc-danger); }
.pc-screen .pc-notice--danger b { color: var(--pc-danger); }
.pc-screen .pc-notice--ok { background: var(--pc-ok-soft); border-color: var(--pc-ok); }
.pc-screen .pc-notice[hidden] { display: none; }

/* ══ Filtros ════════════════════════════════════════════════════════════ */

.pc-screen .pc-filtros {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pc-screen .pc-buscar {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 360px;
    flex: 1 1 260px;
    height: 36px;
    padding: 0 10px;
    margin: 0;
    border-radius: var(--pc-r1);
    border: 1px solid var(--pc-line);
    background: var(--pc-surface);
    color: var(--pc-ink-3);
}

.pc-screen .pc-buscar:focus-within { border-color: var(--pc-brand); }
.pc-screen .pc-buscar svg { width: 16px; height: 16px; flex: none; }

.pc-screen .pc-buscar input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font-size: var(--pc-t2);
    color: var(--pc-ink);
}

.pc-screen .pc-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--pc-t2);
    color: var(--pc-ink-3);
}

.pc-screen .pc-inline input,
.pc-screen .pc-inline select,
.pc-screen .pc-field input,
.pc-screen .pc-field select,
.pc-screen .pc-field textarea {
    height: 36px;
    padding: 0 10px;
    font: inherit;
    font-size: 14px;
    color: var(--pc-ink);
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r1);
    outline: none;
}

.pc-screen .pc-inline select { min-width: 150px; }

.pc-screen .pc-inline input:focus,
.pc-screen .pc-inline select:focus,
.pc-screen .pc-field input:focus,
.pc-screen .pc-field textarea:focus {
    border-color: var(--pc-brand);
    box-shadow: 0 0 0 3px var(--pc-brand-soft);
}

/* ══ Tabla ══════════════════════════════════════════════════════════════ */

.pc-screen .pc-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pc-t2);
    color: var(--pc-ink);
    margin: 0;
}

.pc-screen .pc-tabla thead th {
    text-align: left;
    padding: 10px 7px;
    white-space: normal;
    line-height: 1.25;
    vertical-align: bottom;
    font-size: 12px;
    font-weight: 600;
    color: var(--pc-ink);
    background: var(--pc-surface-2);
    border-bottom: 1px solid var(--pc-line);
}

.pc-screen .pc-tabla thead th:first-child { border-top-left-radius: var(--pc-r2); }
.pc-screen .pc-tabla thead th:last-child { border-top-right-radius: var(--pc-r2); }

.pc-screen .pc-tabla tbody td {
    padding: 12px 7px;
    border-bottom: 1px solid var(--pc-line-2);
    vertical-align: middle;
}

.pc-screen .pc-tabla tbody tr:last-child td { border-bottom: 0; }
.pc-screen .pc-tabla tbody tr:hover { background: var(--pc-surface-2); }
.pc-screen .pc-tabla td:first-child,
.pc-screen .pc-tabla th:first-child { padding-left: 16px; }
.pc-screen .pc-tabla td:last-child,
.pc-screen .pc-tabla th:last-child { padding-right: 16px; }
.pc-screen .pc-tabla .td-actions { width: 1%; white-space: nowrap; text-align: right; }
.pc-screen .pc-tabla td.num,
.pc-screen .pc-tabla td.pc-c-ov,
.pc-screen .pc-tabla td.pc-c-id { white-space: nowrap; }
.pc-screen .pc-tabla td.num { font-variant-numeric: tabular-nums; }
.pc-screen .pc-tabla td.pc-c-est { min-width: 118px; max-width: 176px; }
/* «Sin pedir» y «✓ Revisado» caben en una línea; solo «Devolución a laboratorio» parte. */
.pc-screen .pc-tabla td.pc-c-est .pc-tag--warn,
.pc-screen .pc-tabla td.pc-c-est .pc-tag--ok { white-space: nowrap; }
.pc-screen .pc-tabla td.pc-c-est .pc-tag { white-space: normal; }
.pc-screen .pc-tabla td.pc-c-prod,
.pc-screen .pc-tabla td.pc-c-lab,
.pc-screen .pc-tabla td.pc-c-px { min-width: 112px; }
.pc-screen .pc-tabla .pc-empty { text-align: center; padding: 28px 16px; color: var(--pc-ink-3); }
.pc-screen .pc-tabla b { font-weight: 600; }

.pc-screen .pc-obs {
    display: block;
    max-width: 17ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El pedido cuya orden de venta ya no existe: se ve, no se cae. */
.pc-screen .pc-huerf { color: var(--pc-ink-3); }
.pc-screen .pc-sucio td:first-child { box-shadow: inset 3px 0 0 var(--pc-warn); }
.pc-screen .pc-mob,
.pc-screen .pc-m-cc,
.pc-screen .pc-m-prod,
.pc-screen .pc-m-lab,
.pc-screen .pc-m-fp,
.pc-screen .pc-m-obs { display: none; }

.pc-screen .pc-cargando tbody { opacity: .5; transition: opacity .15s; }

/* ══ Estado y menús de la fila ══════════════════════════════════════════ */

.pc-screen .pc-pop-wrap { position: relative; display: inline-block; }

.pc-screen .pc-est {
    gap: 6px;
    white-space: normal;
    height: auto;
    min-height: 26px;
    padding-block: 3px;
    text-align: left;
}

.pc-screen .pc-est i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--pc-ink-3);
    flex: none;
}

.pc-screen .pc-est[data-tono="brand"] i { background: var(--pc-brand); }
.pc-screen .pc-est[data-tono="warn"] i { background: var(--pc-warn); }
.pc-screen .pc-est[data-tono="danger"] i { background: var(--pc-danger); }
.pc-screen .pc-est[data-tono="ok"] i { background: var(--pc-ok); }

/* fixed: lo coloca posicionarMenu() de consultaPedidosExternos.js junto al botón. */
.pc-screen .pc-pop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r2);
    box-shadow: var(--pc-sh2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .14s, transform .14s, visibility .14s;
    text-align: left;
    white-space: normal;
}

.pc-screen .pc-pop.on { opacity: 1; visibility: visible; transform: none; }
.pc-screen .pc-est-pop { width: 248px; max-width: calc(100vw - 16px); }
.pc-screen .pc-acc-pop { width: 264px; max-width: calc(100vw - 16px); }
.pc-screen .pc-pop-body { padding: 8px; }

.pc-screen .pc-pop-grupo {
    padding: 4px 10px 4px;
    font-size: var(--pc-t1);
    font-weight: 600;
    color: var(--pc-ink-3);
}

.pc-screen .pc-pop-sep { height: 1px; background: var(--pc-line-2); margin: 4px 0; }

.pc-screen .pc-pop-body > button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--pc-r1);
    background: none;
    font-size: var(--pc-t2);
    color: var(--pc-ink);
    text-align: left;
    cursor: pointer;
}

.pc-screen .pc-pop-body > button:hover { background: var(--pc-brand-soft); color: var(--pc-brand); }
.pc-screen .pc-pop-body > button:disabled { opacity: .45; cursor: not-allowed; }
.pc-screen .pc-pop-body > button:disabled:hover { background: none; color: var(--pc-ink); }

.pc-screen .pc-sp-acts {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

/* ══ Resumen ════════════════════════════════════════════════════════════ */

.pc-screen .pc-resumen {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pc-screen .pc-resumen:empty { display: none; }

.pc-screen .pc-kpi {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r1);
    background: var(--pc-surface);
    box-shadow: var(--pc-sh1);
    color: var(--pc-ink);
    font-size: var(--pc-t2);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.pc-screen .pc-kpi:disabled { cursor: default; opacity: 1; }
.pc-screen .pc-kpi b { font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-screen .pc-kpi span { color: var(--pc-ink-3); }
.pc-screen .pc-kpi--brand b { color: var(--pc-brand); }
.pc-screen .pc-kpi--warn b { color: var(--pc-warn); }
.pc-screen .pc-kpi--warn:not(:disabled):hover { border-color: var(--pc-warn); }
.pc-screen .pc-kpi--warn.on { background: var(--pc-warn-soft); border-color: var(--pc-warn); }

/* La venta que falta por pedir se distingue de un vistazo. */
.pc-screen .pc-por-pedir td:first-child { box-shadow: inset 3px 0 0 var(--pc-warn); }

/* ══ Paginación ═════════════════════════════════════════════════════════ */

.pc-screen .pc-pag { display: flex; align-items: center; gap: 4px; }

.pc-screen .pc-pag button {
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--pc-line);
    border-radius: 8px;
    background: var(--pc-surface);
    color: var(--pc-ink);
    font-size: var(--pc-t1);
    cursor: pointer;
}

.pc-screen .pc-pag button.on { background: var(--pc-brand); border-color: var(--pc-brand); color: #fff; }
.pc-screen .pc-pag button:disabled { opacity: .4; cursor: default; }
.pc-screen .pc-pag span { padding: 0 4px; color: var(--pc-ink-3); }

/* ══ Panel lateral ══════════════════════════════════════════════════════ */

.pc-screen .pc-drawer { position: fixed; inset: 0; z-index: 1040; display: none; }
.pc-screen .pc-drawer.on { display: block; }

.pc-screen .pc-drawer-ov {
    position: absolute;
    inset: 0;
    background: rgba(13, 23, 32, .42);
    animation: pc-fade .18s ease;
}

.pc-screen .pc-drawer-p {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 480px;
    max-width: 94vw;
    background: var(--pc-surface);
    box-shadow: -14px 0 44px -14px rgba(13, 23, 32, .4);
    display: flex;
    flex-direction: column;
    animation: pc-slide .24s cubic-bezier(.2, .7, .3, 1);
}

@keyframes pc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pc-slide { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }

.pc-screen .pc-drawer-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pc-line);
}

.pc-screen .pc-drawer-h h3 { margin: 0; font-size: 17px; font-weight: 700; }

.pc-screen .pc-drawer-x {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: var(--pc-ink-3);
    cursor: pointer;
    padding: 2px 8px;
}

.pc-screen .pc-drawer-b { padding: 18px 20px 28px; overflow-y: auto; flex: 1; }
.pc-screen .pc-drawer-b h4 { font-size: var(--pc-t3); font-weight: 700; margin: 22px 0 8px; }

.pc-screen .pc-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.pc-screen .pc-field label { font-size: var(--pc-t1); font-weight: 500; margin: 0; }
.pc-screen .pc-field .pc-req { color: var(--pc-danger); }
.pc-screen .pc-field textarea { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; }
.pc-screen .pc-field input:disabled { opacity: .6; }
.pc-screen .pc-fila-btns { display: flex; gap: 8px; margin-top: 18px; }
.pc-screen .pc-fila-btns .pc-btn--primary { flex: 1; }

.pc-screen .pc-hist { list-style: none; margin: 0; padding: 0; }
.pc-screen .pc-hist li { padding: 10px 0; border-bottom: 1px solid var(--pc-line-2); }
.pc-screen .pc-hist li:last-child { border-bottom: 0; }

.pc-screen .pc-drawer-b p { margin: 0 0 8px; }

/* ══ Responsive por el ancho de la página ═══════════════════════════════
   A 1400 bajan cédula, orden lab y factura; a 1240, fecha de pedido y
   observaciones; a 1100, el producto. Lo que se oculta sigue visible como
   línea gris dentro de otra celda (pc-m-*). */

@container pc-pagina (max-width: 1400px) {
    .pc-screen .pc-tabla .pc-c-cc,
    .pc-screen .pc-tabla .pc-c-ol,
    .pc-screen .pc-tabla .pc-c-fac { display: none; }
    .pc-screen .pc-tabla .pc-m-cc,
    .pc-screen .pc-tabla .pc-m-lab { display: block; }
}

@container pc-pagina (max-width: 1240px) {
    .pc-screen .pc-tabla .pc-c-fp,
    .pc-screen .pc-tabla .pc-c-obs { display: none; }
    .pc-screen .pc-tabla .pc-m-fp { display: block; }
    .pc-screen .pc-tabla .pc-m-obs {
        display: block;
        max-width: 26ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pc-screen .pc-tabla .pc-m-obs:empty { display: none; }
}

@container pc-pagina (max-width: 1100px) {
    .pc-screen .pc-tabla .pc-c-prod { display: none; }
    .pc-screen .pc-tabla .pc-m-prod { display: block; }
}

/* ══ Modo tarjeta (celular y páginas angostas) ══════════════════════════
   Como la consulta de órdenes de venta (ordenes-v5.css): cada fila es una
   tarjeta. Arriba el ID del pedido (o la orden, si la venta está por pedir) y
   el estado; debajo el paciente con sus datos rotulados (.pc-mob) y al final
   las acciones. La clase pc-compacta la pone consultaPedidosExternos.js según
   el ancho real de la página, así funciona también en navegadores sin
   container queries. Las celdas se reordenan con `order`, nunca nth-child. */

.pc-screen.pc-compacta .pc-head h1 { font-size: 20px; }
.pc-screen.pc-compacta .pc-head-acts,
.pc-screen.pc-compacta .pc-head-acts .pc-btn { width: 100%; }
.pc-screen.pc-compacta .pc-kpi { flex: 1 1 140px; }

.pc-screen.pc-compacta .pc-filtros .pc-inline,
.pc-screen.pc-compacta .pc-filtros .pc-inline select,
.pc-screen.pc-compacta .pc-filtros .pc-inline input,
.pc-screen.pc-compacta .pc-buscar { width: 100%; max-width: none; flex: 1 1 100%; }
.pc-screen.pc-compacta .pc-filtros .pc-inline { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.pc-screen.pc-compacta .pc-filtros .pc-inline.pc-sin-rot { grid-template-columns: minmax(0, 1fr); }

.pc-screen.pc-compacta .pc-card {
    overflow-x: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.pc-screen.pc-compacta .pc-tabla,
.pc-screen.pc-compacta .pc-tabla tbody { display: block; width: 100%; }
.pc-screen.pc-compacta .pc-tabla thead { display: none; }

.pc-screen.pc-compacta .pc-tabla tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 10px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-r2);
    box-shadow: var(--pc-sh1);
    padding: 12px 14px;
    margin-bottom: 10px;
}

.pc-screen.pc-compacta .pc-tabla tbody tr:hover { background: var(--pc-surface); }

.pc-screen.pc-compacta .pc-tabla tbody td {
    display: none;
    padding: 0;
    border: 0;
    min-width: 0;
    max-width: none;
}

/* La marca de color de la fila pasa al borde izquierdo de la tarjeta. */
.pc-screen.pc-compacta .pc-tabla tbody tr.pc-por-pedir,
.pc-screen.pc-compacta .pc-tabla tbody tr.pc-sucio { border-left: 3px solid var(--pc-warn); }
.pc-screen.pc-compacta .pc-por-pedir td:first-child,
.pc-screen.pc-compacta .pc-sucio td:first-child { box-shadow: none; }

.pc-screen.pc-compacta .pc-tabla tbody td.pc-c-id,
.pc-screen.pc-compacta .pc-tabla tbody tr.pc-por-pedir td.pc-c-ov {
    display: block;
    order: 1;
    flex: 1 1 auto;
    font-size: var(--pc-t3);
    padding-top: 2px;
}

.pc-screen.pc-compacta .pc-tabla tbody td.pc-c-id::before { content: "ID pedido "; }
.pc-screen.pc-compacta .pc-tabla tbody tr.pc-por-pedir td.pc-c-ov::before { content: "ID orden pedido "; }
.pc-screen.pc-compacta .pc-tabla tbody td.pc-c-id::before,
.pc-screen.pc-compacta .pc-tabla tbody tr.pc-por-pedir td.pc-c-ov::before {
    color: var(--pc-ink-3);
    font-size: var(--pc-t1);
    font-weight: 600;
}

.pc-screen.pc-compacta .pc-tabla tbody tr.pc-por-pedir td.pc-c-id { display: none; }

.pc-screen.pc-compacta .pc-tabla tbody td.pc-c-est {
    display: block;
    order: 2;
    flex: 0 1 auto;
    max-width: 62%;
    margin-left: auto;
    text-align: right;
}

.pc-screen.pc-compacta .pc-tabla tbody td.pc-c-px {
    display: block;
    order: 3;
    flex: 1 1 100%;
}

.pc-screen.pc-compacta .pc-tabla tbody td.td-actions {
    display: block;
    order: 4;
    flex: 1 1 100%;
    width: auto;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--pc-line-2);
}

.pc-screen.pc-compacta .pc-tabla tbody td.pc-empty {
    display: block;
    flex: 1 1 100%;
    padding: 16px;
}

.pc-screen.pc-compacta .pc-tabla .pc-m-fp,
.pc-screen.pc-compacta .pc-tabla .pc-m-cc,
.pc-screen.pc-compacta .pc-tabla .pc-m-prod,
.pc-screen.pc-compacta .pc-tabla .pc-m-lab,
.pc-screen.pc-compacta .pc-tabla .pc-m-obs { display: none; }

.pc-screen.pc-compacta .pc-tabla .pc-mob { display: block; margin-top: 2px; }
.pc-screen.pc-compacta .pc-tabla td.pc-c-px > b { font-size: var(--pc-t3); }
.pc-screen.pc-compacta .pc-tabla td.pc-c-est .pc-meta { margin-top: 2px; }

/* Datos rotulados de la tarjeta: «Etiqueta: valor», uno por línea. */
.pc-screen .pc-ml {
    font-size: var(--pc-t1);
    line-height: 1.45;
    padding: 1px 0;
    color: var(--pc-ink);
    overflow-wrap: anywhere;
}

.pc-screen .pc-ml > span:first-child {
    color: var(--pc-ink-3);
    font-weight: 600;
}

.pc-screen .pc-ml > span:first-child::after { content: ": "; }
.pc-screen .pc-ml .pc-obs { display: inline; max-width: none; white-space: normal; }

.pc-screen.pc-compacta .pc-sp-acts,
.pc-screen.pc-compacta .td-actions > .pc-pop-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.pc-screen.pc-compacta .td-actions .pc-btn--xs { height: 32px; padding: 0 12px; }
.pc-screen.pc-compacta .pc-card-foot { flex-direction: column; align-items: flex-start; padding: 12px 4px; border-top: 0; }