/* =============================================================================
   LA OC DEL CLIENTE EN PDF — el clip de core/oc-cliente-ui.js (lámina 39, ganó A).
   Vive en dos identidades, como la condición de pago: la pre-carga (`.cm-ui`,
   acento azure) y los «Nuevo pedido» (`.vt-ui`, navy). El acento entra por
   `--oc-acc`. La hoja del teléfono cuelga de <body>, fuera de los dos scopes:
   va por id (#oc-hoja-velo), con sus colores escritos.
   ============================================================================= */
.cm-ui { --oc-acc: var(--azure); --oc-acc-050: var(--azure-050); }
.vt-ui { --oc-acc: var(--navy-500); --oc-acc-050: var(--navy-050); }

/* ── el campo + el clip ── */
:is(.cm-ui, .vt-ui) .oc-grupo { display: flex; min-width: 0; }
:is(.cm-ui, .vt-ui) .oc-grupo > input:not([type="file"]) {
    flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;
}
:is(.cm-ui, .vt-ui) .oc-clip {
    flex: 0 0 38px; display: grid; place-items: center; cursor: pointer; padding: 0;
    border: 1px solid var(--hair-strong); border-left: none; border-radius: 0 9px 9px 0;
    background: var(--surface); color: var(--oc-acc);
    transition: background-color .15s var(--curva, ease), color .15s var(--curva, ease);
}
:is(.cm-ui, .vt-ui) .oc-clip:hover { background: var(--oc-acc-050); }
:is(.cm-ui, .vt-ui) .oc-clip.on { background: var(--oc-acc); border-color: var(--oc-acc); color: #fff; }
:is(.cm-ui, .vt-ui) .oc-clip:focus-visible { outline: 2px solid var(--oc-acc); outline-offset: 1px; }
:is(.cm-ui, .vt-ui) .oc-clip .material-symbols-outlined { font-size: 19px; }

/* ── la tira, a lo ancho de los campos ── */
:is(.cm-ui, .vt-ui) .oc-tira {
    flex: 1 1 100%; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0;
    margin: 2px 0 6px; padding: 7px 8px 7px 11px; border-radius: 10px;
    background: var(--oc-acc-050); border: 1px solid var(--hair-strong); font-size: .76rem;
}
:is(.cm-ui, .vt-ui) .oc-tira > .material-symbols-outlined { color: #c0392b; font-size: 20px; flex: 0 0 auto; }
:is(.cm-ui, .vt-ui) .oc-tira .nom { font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
:is(.cm-ui, .vt-ui) .oc-tira .dat { color: var(--muted); }
:is(.cm-ui, .vt-ui) .oc-tira .oc-peso s { color: var(--faint); }
:is(.cm-ui, .vt-ui) .oc-tira .acc { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; }
:is(.cm-ui, .vt-ui) .oc-tira .oc-vence { flex: 1 1 100%; margin: -3px 0 0 29px; font-size: .68rem; color: var(--faint); }
:is(.cm-ui, .vt-ui) .oc-tira.trabaja { background: var(--surface); border-style: dashed; }
:is(.cm-ui, .vt-ui) .oc-tira.trabaja > .material-symbols-outlined { color: var(--oc-acc); }
:is(.cm-ui, .vt-ui) .oc-tira.trabaja .w { flex: 1 1 200px; min-width: 0; }
:is(.cm-ui, .vt-ui) .oc-tira.quitada { background: var(--surface); border-style: dashed; }
:is(.cm-ui, .vt-ui) .oc-tira.quitada > .material-symbols-outlined { color: var(--faint); }
:is(.cm-ui, .vt-ui) .oc-tira.quitada .nom { font-weight: 600; color: var(--muted); }
:is(.cm-ui, .vt-ui) .oc-barra { height: 5px; border-radius: 9px; background: var(--hair); overflow: hidden; margin-top: 5px; }
:is(.cm-ui, .vt-ui) .oc-barra i { display: block; height: 100%; background: var(--oc-acc); border-radius: 9px; transition: width .2s ease; }

:is(.cm-ui, .vt-ui) .oc-btn {
    font: inherit; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--hair-strong); background: var(--surface); color: var(--oc-acc);
}
:is(.cm-ui, .vt-ui) .oc-btn:hover { border-color: var(--oc-acc); }
:is(.cm-ui, .vt-ui) .oc-btn .material-symbols-outlined { font-size: 16px; }
:is(.cm-ui, .vt-ui) .oc-btn.quitar { color: var(--muted); }

/* En el teléfono los botones van debajo, con dedo de ancho. */
@media (max-width: 640px) {
    /* Una sola fila: los botones se reparten el ancho y el × queda cuadrado. */
    :is(.cm-ui, .vt-ui) .oc-tira .acc { margin-left: 0; flex: 1 1 100%; flex-wrap: nowrap; gap: 6px; }
    :is(.cm-ui, .vt-ui) .oc-tira .oc-btn { flex: 1 1 0; justify-content: center; padding: 8px 6px; font-size: .74rem; white-space: nowrap; }
    :is(.cm-ui, .vt-ui) .oc-tira .oc-btn.quitar { flex: 0 0 38px; padding: 8px 0; }
    :is(.cm-ui, .vt-ui) .oc-tira .oc-vence { order: 3; }
    :is(.cm-ui, .vt-ui) .oc-clip { flex-basis: 44px; }
}

/* ── la hoja del teléfono (cuelga de <body>) ── */
#oc-hoja-velo {
    position: fixed; inset: 0; z-index: 10050; background: rgba(11, 26, 51, .35);
    display: flex; align-items: flex-end; animation: oc-velo .18s ease-out;
}
#oc-hoja-velo .oc-hoja {
    width: 100%; background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(11, 42, 102, .25);
    padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px)); font-family: inherit;
    animation: oc-sube .22s cubic-bezier(.2, .8, .2, 1);
}
#oc-hoja-velo .asa { width: 40px; height: 4px; border-radius: 4px; background: #c9d2e0; margin: 0 auto 12px; }
#oc-hoja-velo h5 { margin: 0 0 2px; font-size: .95rem; font-weight: 800; color: #14223b; }
#oc-hoja-velo p { margin: 0 0 12px; font-size: .74rem; color: #55657f; }
#oc-hoja-velo button {
    width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; cursor: pointer;
    padding: 12px; margin-bottom: 8px; border-radius: 12px; border: 1px solid #d9e0ec; background: #fff;
}
#oc-hoja-velo button:active { background: #eaf2fd; }
#oc-hoja-velo button .material-symbols-outlined { font-size: 24px; color: #1668c4; }
#oc-hoja-velo button b { display: block; font-size: .86rem; color: #14223b; }
#oc-hoja-velo button .s { font-size: .7rem; color: #55657f; }
@keyframes oc-velo { from { opacity: 0; } }
@keyframes oc-sube { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { #oc-hoja-velo, #oc-hoja-velo .oc-hoja { animation: none; } }

/* ── el enlace «PDF» de las fichas y la bandeja (ocuEnlaceHTML) ── */
:is(.cm-ui, .vt-ui) .oc-pdf {
    display: inline-flex; align-items: center; gap: 3px; vertical-align: baseline; margin-left: 6px;
    font-size: .72em; font-weight: 800; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
    padding: 1px 8px 1px 5px; border-radius: 999px; border: 1px solid var(--hair-strong);
    background: var(--surface); color: var(--oc-acc);
}
:is(.cm-ui, .vt-ui) a.oc-pdf:hover { border-color: var(--oc-acc); background: var(--oc-acc-050); }
:is(.cm-ui, .vt-ui) .oc-pdf .material-symbols-outlined { font-size: 1.25em; color: #c0392b; }
:is(.cm-ui, .vt-ui) .oc-pdf.vencida { color: var(--faint); font-weight: 600; }
:is(.cm-ui, .vt-ui) .oc-pdf.vencida .material-symbols-outlined { color: var(--faint); }