/* Presupuestos por cliente. Tokens de marca de style.css; clases con prefijo pc- para
   no chocar con el resto del portal. Los tokens van en :root porque el cajón, el aviso
   del paso 1 y el panel de envío se pintan fuera de #presupuestos-root. */
:root {
    --pc-accent: #0b6b45;
    --pc-action: #17231d;
    --pc-action-hover: #244a37;
    --pc-dto: #8a4b00;
    --pc-dto-bg: #fff1e0;
    --pc-grey: #f1f3f2;
    --pc-amber: #8a5a00;
    --pc-amber-bg: #fff4dc;
    --pc-amber-line: #f0c56a;
    --pc-alert: #a12632;
}

.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.pc-chip {
    min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 13px;
    border: 1px solid var(--brand-border); border-radius: 999px; background: #fff;
    color: var(--brand-muted); font: inherit; font-size: 0.7812rem; font-weight: 600; cursor: pointer;
}
.pc-chip:hover { border-color: var(--brand-green-dark); color: var(--brand-green-dark); }
.pc-chip[aria-pressed="true"] { background: var(--brand-green-soft); border-color: transparent; color: var(--pc-accent); }
.pc-chip-n:empty { display: none; }
.pc-chip-n { font-weight: 700; }

.pc-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.pc-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pc-list > li { min-width: 0; }

.pc-card {
    display: grid; gap: 6px; width: 100%; padding: 12px 14px; text-align: left;
    border: 1px solid var(--brand-border); border-radius: 12px; background: #fff; color: var(--brand-ink);
    font: inherit; cursor: pointer;
}
.pc-card:hover { border-color: var(--brand-green-dark); }
.pc-card.is-selected { border: 2px solid var(--brand-green-dark); padding: 11px 13px; }
/* 15/10 («Bandeja clara»): el foco de todo el CRM, visible (antes, verde al 30 %). */
.pc-card:focus-visible, .pc-btn:focus-visible, .pc-chip:focus-visible { outline: 3px solid var(--m-focus); outline-offset: 2px; }
.pc-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pc-card-name { display: grid; min-width: 0; flex: 1 1 auto; }
.pc-card-name strong { font-size: 0.875rem; font-weight: 700; overflow-wrap: anywhere; }
.pc-card-name small { color: var(--brand-muted); font-size: 0.75rem; }
.pc-avatar {
    width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%;
    background: var(--brand-green-soft); color: var(--pc-accent); font-weight: 700; font-size: 0.75rem;
}
.pc-avatar--grande { width: 44px; height: 44px; font-size: 0.875rem; }
.pc-pill {
    flex: none; display: inline-flex; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    background: var(--pc-grey); color: var(--brand-muted); font-size: 0.75rem; font-weight: 700;
}
.pc-pill--enviado { background: var(--brand-green-soft); color: var(--pc-accent); }
.pc-pill--aceptado { background: var(--pc-action); color: #fff; }
.pc-mini { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 0.75rem; }
.pc-mini-que { min-width: 0; overflow-wrap: anywhere; }
.pc-mini-tot { font-weight: 700; white-space: nowrap; }
.pc-dto {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
    background: var(--pc-dto-bg); color: var(--pc-dto); font-size: 0.75rem; font-style: normal; font-weight: 700;
}
.pc-dto--cero { background: var(--pc-grey); color: var(--brand-muted); }
.pc-warn { color: var(--pc-amber); font-size: 0.75rem; }

.pc-detail { padding: 20px 22px; border: 1px solid var(--brand-border); border-radius: 14px; background: #fff; min-width: 0; }
.pc-dhead { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--brand-border); flex-wrap: wrap; }
.pc-dname { flex: 1 1 220px; min-width: 0; }
.pc-dname h4 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.pc-dname p { margin: 2px 0 0; color: var(--brand-muted); font-size: 0.75rem; overflow-wrap: anywhere; }
.pc-sec {
    margin: 18px 0 8px; color: #59675f; font-size: 0.75rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
}
.pc-nota { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--pc-grey); color: var(--brand-muted); font-size: 0.7812rem; }
.pc-nota--error { background: #fdecea; color: var(--pc-alert); }

.pc-rows { display: grid; }
.pc-row {
    display: grid; grid-template-columns: 9.375rem minmax(7rem, 1fr) 8rem 6.5rem; gap: 6px 14px;
    padding: 13px 4px; border-bottom: 1px solid var(--brand-border); align-items: start;
}
.pc-row--head {
    padding-top: 0; color: #7d8b83; font-size: 0.75rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
}
.pc-row--head span:last-child { text-align: right; }
.pc-row { position: relative; }
/* Sin opacity: crearía una capa por fila y el menú «¿Por dónde?» quedaría debajo de la siguiente. */
.pc-row--otro .pc-c1 strong, .pc-row--otro .pc-c2 strong, .pc-row--otro .pc-c4 { color: #3b4a42; }
.pc-row:has(details[open]) { z-index: 40; }
.pc-c1, .pc-c2, .pc-c3 { display: grid; min-width: 0; align-content: start; gap: 1px; }
.pc-c1 strong, .pc-c2 strong { font-size: 0.8125rem; font-weight: 700; overflow-wrap: anywhere; }
.pc-c1 small, .pc-c2 small, .pc-c3 small { color: var(--brand-muted); font-size: 0.75rem; }
.pc-c3 b { color: var(--pc-dto); font-size: 0.8125rem; }
.pc-c3 .pc-cero { color: var(--brand-muted); font-weight: 600; font-size: 0.75rem; }
.pc-c4 { text-align: right; font-weight: 700; white-space: nowrap; }
.pc-badge {
    justify-self: start; margin-bottom: 3px; padding: 1px 8px; border-radius: 999px;
    background: var(--brand-green-soft); color: var(--pc-accent); font-size: 0.75rem; font-weight: 700;
}
.pc-badge--aceptado { background: var(--pc-action); color: #fff; }
.pc-badge--gris { background: var(--pc-grey); color: var(--brand-muted); }
.pc-visto {
    justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
    background: #eef4ff; color: #1d4f91; font-size: 0.75rem; font-weight: 700;
}
.pc-row-acts { grid-column: 2 / -1; justify-content: flex-end; }

.pc-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px;
    border: 1px solid var(--brand-border); border-radius: 9px; background: #fff; color: var(--brand-ink);
    font: inherit; font-size: 0.75rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.pc-btn:hover { border-color: var(--brand-green-dark); color: var(--brand-green-dark); text-decoration: none; }
.pc-btn--pri { background: var(--pc-action); border-color: var(--pc-action); color: #fff; }
.pc-btn--pri:hover { background: var(--pc-action-hover); border-color: var(--pc-action-hover); color: #fff; }
.pc-btn--wa { background: #e7f7ec; border-color: #bfe9d4; color: var(--pc-accent); }
.pc-btn--peligro { color: var(--pc-alert); border-color: #e6b8bd; }
.pc-btn--peligro:hover { color: var(--pc-alert); border-color: var(--pc-alert); background: #fdecea; }
.pc-btn--suave { color: var(--brand-muted); }
.pc-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.pc-marcar { position: relative; }
.pc-marcar > summary { list-style: none; }
.pc-marcar > summary::-webkit-details-marker { display: none; }
.pc-marcar-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-wrap: wrap; gap: 6px;
    width: 260px; padding: 10px; border: 1px solid var(--brand-border); border-radius: 12px; background: #fff;
    box-shadow: 0 12px 30px rgba(6, 21, 13, .12);
}
.pc-marcar-menu span { width: 100%; color: var(--brand-muted); font-size: 0.75rem; font-weight: 600; }

.pc-aviso {
    grid-column: 1 / -1; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--pc-amber-line);
    border-left: 3px solid #e0a019; border-radius: 0 10px 10px 0; background: var(--pc-amber-bg);
    color: var(--pc-amber); font-size: 0.7812rem;
}
.pc-aviso b { color: #5f3d00; }
.pc-aviso .pc-acts { margin-top: 8px; }

.pc-hist { margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--brand-border); font-size: 0.75rem; color: var(--brand-muted); }
.pc-hist li { position: relative; margin: 0 0 8px; }
.pc-hist li::before {
    content: ""; position: absolute; left: -19px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #c9d3ce;
}
.pc-hist li.is-envio::before { background: var(--brand-green-dark); }
.pc-hist li.is-hoy { color: var(--pc-amber); }
.pc-hist b { color: var(--brand-ink); font-weight: 600; }

/* Cajón «lo que recibió el cliente» */
.pc-veil { position: fixed; inset: 0; z-index: 80; background: rgba(6, 21, 13, .38); }
.pc-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(600px, 100vw);
    display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--brand-border);
}
.pc-drawer-head { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--brand-border); }
.pc-drawer-head b { font-size: 0.9375rem; }
.pc-x { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 1.375rem; color: var(--brand-muted); cursor: pointer; }
.pc-x:hover { background: var(--pc-grey); }
.pc-drawer-body { padding: 18px 22px 28px; overflow: auto; }
.pc-banda { padding: 12px 14px; border: 1px solid #bfe9d4; border-radius: 12px; background: var(--brand-green-soft); color: #0b3b28; font-size: 0.8125rem; }
.pc-banda b { color: var(--pc-accent); }
.pc-banda-dto { margin-top: 6px; padding-top: 6px; border-top: 1px solid #bfe9d4; }
.pc-versiones { margin: 10px 0 0; color: var(--brand-muted); font-size: 0.75rem; }
.pc-hoja { margin: 14px 0 16px; padding: 20px 22px; border: 1px solid var(--brand-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(6, 21, 13, .06); }
.pc-hoja-head { display: flex; justify-content: space-between; gap: 10px; font-size: 0.75rem; color: var(--brand-muted); }
.pc-hoja-head b { color: var(--brand-ink); font-size: 0.875rem; }
.pc-hoja-que { margin: 6px 0 12px; font-weight: 600; font-size: 0.8125rem; }
.pc-lineas { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.pc-lineas td { padding: 6px 0; border-top: 1px solid var(--brand-border); vertical-align: top; }
.pc-lineas .pc-num, .pc-num { text-align: right; white-space: nowrap; padding-left: 10px; }
.pc-lineas th { padding: 0 0 6px; color: #7d8b83; font-size: 0.75rem; font-weight: 600; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.pc-lineas th.pc-num { text-align: right; }
.pc-lin-dto td { color: var(--pc-dto); font-weight: 700; background: var(--pc-dto-bg); }
.pc-lin-tot td { border-top: 2px solid var(--brand-ink); font-weight: 800; font-size: 0.875rem; }
.pc-regalo { color: var(--pc-accent); font-style: normal; font-size: 0.75rem; }

/* Panel tras generar el PDF */
.pc-envio {
    margin: 18px 0 8px; padding: 16px 18px; border: 1px solid var(--brand-border);
    border-left: 3px solid var(--brand-green); border-radius: 0 14px 14px 0; background: #fff;
}
.pc-envio h4 { margin: 2px 0 4px; font-size: 0.9375rem; font-weight: 700; }
.pc-envio p { margin: 0 0 12px; color: var(--brand-muted); font-size: 0.8125rem; }
.pc-etq { margin: 0 !important; color: var(--brand-green-dark) !important; font-size: 0.75rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pc-envio-estado { margin: 10px 0 0 !important; font-weight: 600; }
.pc-envio-estado.is-ok { color: var(--pc-accent) !important; }
.pc-envio-estado.is-error { color: var(--pc-alert) !important; }

/* Aviso en el paso 1 */
.pc-aviso--form { margin: 14px 0 4px; }
.pc-aviso-tit { margin-bottom: 8px; color: #5f3d00; font-size: 0.875rem; font-weight: 700; }
.pc-aviso-fila {
    display: grid; grid-template-columns: 8.125rem minmax(6rem, 1fr) 5rem 6rem auto; gap: 10px; align-items: center;
    padding: 8px 0; border-top: 1px solid #f3dcaa; color: #4d3300; font-size: 0.7812rem;
}
.pc-dto-txt { color: var(--pc-dto); font-weight: 700; }
.pc-aviso-nota { margin: 8px 0 0; font-size: 0.75rem; }

.pc-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translateX(-50%);
    padding: 10px 16px; border-radius: 10px; background: var(--pc-action, #17231d); color: #fff;
    font-size: 0.8125rem; font-weight: 600; box-shadow: 0 10px 30px rgba(6, 21, 13, .2); transition: opacity .3s;
}
.pc-toast--error { background: #a12632; }
.pc-toast.is-oculto { opacity: 0; pointer-events: none; }

@media (max-width: 980px) {
    .pc-layout { grid-template-columns: minmax(0, 1fr); }
    .pc-row { grid-template-columns: minmax(0, 1fr) auto; }
    .pc-row--head { display: none; }
    .pc-c1 { grid-column: 1 / 2; }
    .pc-c4 { grid-column: 2 / 3; grid-row: 1; }
    .pc-c2, .pc-c3 { grid-column: 1 / -1; }
    .pc-row-acts { grid-column: 1 / -1; justify-content: flex-start; }
    .pc-aviso-fila { grid-template-columns: minmax(0, 1fr) auto; }
    .pc-detail { padding: 16px; }
}
.pc-row--descartado { background: #f6f7f8; }
/* C14 (10/10): la ficha del cliente (CL-00123) en el paso 1, la tarjeta y la ficha. */
.pc-code { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pc-ficha { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--pc-line, #dfe5e2); border-radius: 10px; background: #f7faf8; display: flex; flex-direction: column; gap: 8px; }
.pc-ficha--elegida { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pc-ficha-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.pc-ficha-fila > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-ficha-fila small { color: var(--brand-muted, #526176); }
.pc-ficha-ojo { margin: 0; color: #6b4a00; font-weight: 600; }
.pc-envio-ficha { margin: 4px 0 8px; }
.pc-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* C14: una ficha con varias obras (direcciones). */
.pc-obra { margin: 14px 0 6px; padding: 10px 12px 4px; border: 1px solid var(--pc-line, #dfe5e2); border-radius: 12px; }
.pc-obra-tit { margin: 0 0 4px; font-weight: 700; }
.pc-obra--duda { border-style: dashed; background: #fffbf0; }
.pc-obra-una { margin: 2px 0 0; color: var(--brand-muted, #526176); font-size: .85rem; }