/* ============================================================================= PARTE DIARIO DE PLANTA — identidad visual de la sección del hub ============================================================================= RUNBOOK-PARTE-DIARIO.md, etapa 2a (30/08/2026). Lo aprobado es el prototipo `docs/produccion/07-parte-diario-prototipo.html` (ronda 4): el documento del día en CUATRO ETAPAS —entró · salió · hay · resumen—, calendario del mes a la izquierda, y la lista de movimientos como un CONTROL del encargado. Scope `.pdp-ui`, que vive ADENTRO de `.prod-ui` (el hub dibuja la barra y la secnav). No hereda la base tipográfica de `.prod-ui` porque ésa no la declara (sus otras pantallas siguen en Tailwind): se declara acá, sobre la raíz. MÁS COLOR, y es un apartamiento escrito del §1.2 del manual (decisión 12 de Hernán: «no se ve dónde termina un sector y empieza otro»): cada sección lleva su BANDA — la que se audita en navy pleno, la que se controla en navy teñido, las que se leen sólo con trazo. Plano, no Capas: la vara de PdD y del hub. La paleta sale entera de core/tokens.css. El velo del informe cuelga del : por eso `.pdp-ui.pdp-velo` lleva el scope PEGADO (no hay ancestro del módulo que se lo preste). TRAMPAS QUE ESTE ARCHIVO YA PAGÓ EN OTROS · Un `flex` parte la oración: los textos con negritas van en UN elemento. · Un ítem flex/grid no se encoge sin `min-width: 0`. · `.hidden` de Tailwind pierde contra un `display` de autor: `.pdp-ui` está en las listas de tokens.css, y la sección oculta va con `[hidden]`. ========================================================================== */ .prod-ui .pdp-ui { font-family: 'Segoe UI', -apple-system, system-ui, Roboto, Arial, sans-serif; font-size: 13.5px; line-height: 1.45; color: var(--ink); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-width: 0; background: var(--canvas); } .pdp-ui *, .pdp-ui *::before, .pdp-ui *::after { box-sizing: border-box; } .pdp-ui p, .pdp-ui h2, .pdp-ui h4 { margin: 0; } .pdp-ui button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .pdp-ui button:disabled { cursor: not-allowed; } .pdp-ui input { font: inherit; color: inherit; } .pdp-ui :focus-visible { outline: 2px solid var(--navy-300); outline-offset: 2px; border-radius: 5px; } .pdp-ui [hidden] { display: none !important; } .pdp-ui .m { color: var(--muted); } .pdp-ui .f { color: var(--faint); } .pdp-ui .ok { color: var(--ok); } .pdp-ui .wrn { color: var(--warn); } .pdp-ui .crt { color: var(--crit); } .pdp-ui .vacio { color: var(--faint); font-style: italic; } .pdp-ui .sub { font-size: 11.5px; color: var(--muted); } .pdp-ui .material-symbols-outlined { font-size: 18px; line-height: 1; vertical-align: -4px; } @media (prefers-reduced-motion: reduce) { .pdp-ui *, .pdp-ui *::before, .pdp-ui *::after { transition-duration: 0s !important; animation-duration: 0s !important; } } /* ---- botones y chips ---- */ .pdp-ui .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13px; white-space: nowrap; transition: transform .18s var(--curva), box-shadow .18s var(--curva), background .14s ease, border-color .14s ease; } .pdp-ui .btn:hover:not(:disabled), .pdp-ui .btn:focus-visible { transform: translateY(-2px); box-shadow: var(--e2); } .pdp-ui .btn:active:not(:disabled) { transform: translateY(-1px); box-shadow: var(--e1); } .pdp-ui .btn.pri { background: var(--navy); border-color: var(--navy); color: #fff; } .pdp-ui .btn.pri:disabled, .pdp-ui .btn:disabled { background: var(--hair-strong); border-color: var(--hair-strong); color: var(--faint); transform: none; box-shadow: none; } .pdp-ui .btn.fant { border-color: transparent; color: var(--navy); background: transparent; } .pdp-ui .btn.sm { padding: 3px 9px; font-size: 12px; } .pdp-ui .btn.ok { border-color: var(--ok-hair); color: var(--ok); background: var(--ok-050); } .pdp-ui .btn.warn { border-color: var(--warn-hair); color: var(--warn); background: var(--warn-050); } .pdp-ui .btn .material-symbols-outlined { font-size: 16px; } .pdp-ui .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--ink); white-space: nowrap; transition: transform .18s var(--curva); } .pdp-ui .chip.ok { color: var(--ok); background: var(--ok-050); border-color: var(--ok-hair); } .pdp-ui .chip.warn { color: var(--warn); background: var(--warn-050); border-color: var(--warn-hair); } .pdp-ui .chip.crit { color: var(--crit); background: var(--crit-050); border-color: var(--crit-hair); } .pdp-ui .chip.navy { color: var(--navy); background: var(--navy-050); border-color: var(--navy-300); } .pdp-ui .chip.mute { color: var(--faint); font-style: italic; font-weight: 500; } .pdp-ui .chip.lg { font-size: 14px; padding: 5px 14px; } .pdp-ui .chip.filtro { cursor: pointer; } .pdp-ui .chip.filtro:hover, .pdp-ui .chip.filtro:focus-visible { transform: translateY(-2px); } .pdp-ui .chip.filtro[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--navy); } .pdp-ui .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; } /* ---- la cabecera del día ---- */ .pdp-ui .dia { display: flex; align-items: center; gap: 28px; padding: 14px 22px; background: var(--surface); border-bottom: 1px solid var(--hair); flex-wrap: wrap; min-width: 0; } .pdp-ui .dia .t { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; min-width: 0; } .pdp-ui .dia .t small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; } .pdp-ui .dia .st { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pdp-ui .dia .st .x { font-size: 12px; color: var(--muted); } .pdp-ui .prog { display: grid; grid-template-columns: repeat(3, auto); gap: 22px; margin-left: auto; } .pdp-ui .prog .p { min-width: 150px; } .pdp-ui .prog .lb { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .pdp-ui .prog .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; } .pdp-ui .prog .v small { font-size: 12px; font-weight: 500; color: var(--muted); } .pdp-ui .prog .v small.wrn { color: var(--warn); } .pdp-ui .prog .bar2 { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--hair); margin-top: 5px; } .pdp-ui .prog .bar2 i { display: block; height: 100%; transition: width .5s var(--curva); } .pdp-ui .prog .o { background: var(--ok); } .pdp-ui .prog .w { background: var(--warn); } .pdp-ui .prog .n { background: var(--navy-300); } .pdp-ui .prog .p.pend .v { color: var(--faint); font-weight: 500; font-size: 14px; } /* ---- LAS ETAPAS: la tira ---- */ .pdp-ui .pasos { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-bottom: 1px solid var(--hair); padding: 0 22px; } .pdp-ui .pasos.cinco { grid-template-columns: repeat(5, 1fr); } /* con la etapa adicional «Pendientes de días anteriores» */ .pdp-ui .mw.pend .hora small { color: var(--warn); font-weight: 700; } .pdp-ui .pasos button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; min-width: 0; border-bottom: 3px solid transparent; position: relative; transition: background .14s ease, border-color .18s var(--curva); } .pdp-ui .pasos button .n { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--hair-strong); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--muted); flex: none; transition: all .18s var(--curva); } .pdp-ui .pasos button .l { font-weight: 700; font-size: 13.5px; line-height: 1.15; min-width: 0; } .pdp-ui .pasos button .l small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdp-ui .pasos button:hover { background: var(--navy-050); } .pdp-ui .pasos button[aria-current="true"] { border-bottom-color: var(--navy); } .pdp-ui .pasos button[aria-current="true"] .n { background: var(--navy); border-color: var(--navy); color: #fff; } .pdp-ui .pasos button[aria-current="true"] .l { color: var(--navy); } .pdp-ui .pasos button.listo .n { background: var(--ok); border-color: var(--ok); color: #fff; } .pdp-ui .pasos button.pend .n { border-color: var(--warn); color: var(--warn); } .pdp-ui .pasos button.futura .l { color: var(--muted); font-weight: 600; } .pdp-ui .nav-pasos { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--hair); background: var(--canvas); flex-wrap: wrap; } .pdp-ui .nav-pasos .der { margin-left: auto; display: flex; gap: 8px; } /* ---- el cuerpo: calendario a la izquierda, el documento a la derecha ---- */ .pdp-ui .cuerpo { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 18px; padding: 18px 22px 40px; min-width: 0; } .pdp-ui .lateral { display: grid; gap: 12px; align-content: start; min-width: 0; } .pdp-ui .documento { display: grid; gap: 18px; min-width: 0; align-content: start; } .pdp-ui .pane { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--e1); min-width: 0; } .pdp-ui .pane.pad { padding: 12px 12px 10px; } .pdp-ui .sec { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--e1); background: var(--surface); border: 1px solid var(--hair); min-width: 0; } .pdp-ui .sec > .h { display: flex; align-items: center; gap: 14px; padding: 11px 18px; flex-wrap: wrap; min-width: 0; } .pdp-ui .sec > .h .num { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; white-space: nowrap; } .pdp-ui .sec > .h h2 { font-size: 16px; font-weight: 700; } .pdp-ui .sec > .h .q { font-size: 12.5px; min-width: 0; } .pdp-ui .sec > .h .der { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* la banda: la que se audita en navy pleno, la que se controla en navy teñido, las que se leen con trazo */ .pdp-ui .sec.audita > .h { background: var(--navy); color: #fff; } .pdp-ui .sec.audita > .h .num { background: rgba(255, 255, 255, .16); color: #fff; } .pdp-ui .sec.audita > .h .q { color: rgba(255, 255, 255, .72); } .pdp-ui .sec.controla > .h { background: var(--navy-050); border-bottom: 1px solid #cfdcef; } .pdp-ui .sec.controla > .h .num { background: var(--navy); color: #fff; } .pdp-ui .sec.controla > .h h2 { color: var(--navy); } .pdp-ui .sec.lee > .h { border-bottom: 2px solid var(--hair-strong); } .pdp-ui .sec.lee > .h .num { border: 1px solid var(--hair-strong); color: var(--muted); } .pdp-ui .sec > .b { padding: 16px 18px; } .pdp-ui .sec .futuro { padding: 22px 18px; color: var(--muted); font-size: 13px; } .pdp-ui .sec .futuro b { color: var(--ink); } /* ---- ETAPAS 1 y 2: la lista de movimientos, un control ---- */ .pdp-ui .filtros { display: flex; gap: 8px; align-items: center; padding: 12px 18px 0; flex-wrap: wrap; } .pdp-ui .filtros .cap { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-right: 4px; } .pdp-ui .mw { display: grid; grid-template-columns: 54px 92px 1.1fr 1.25fr 1.1fr 1fr .9fr 190px; gap: 10px 12px; padding: 11px 18px; border-bottom: 1px solid var(--hair); align-items: center; font-size: 12.5px; min-width: 0; box-shadow: inset 0 0 0 0 var(--navy); transition: box-shadow .18s var(--curva), background .14s ease; } .pdp-ui .mw > span { min-width: 0; } .pdp-ui .mw:hover { box-shadow: inset 3px 0 0 var(--navy); } .pdp-ui .mw.head { padding: 8px 18px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; border-bottom: 2px solid var(--hair-strong); } .pdp-ui .mw.ctrl { background: var(--ok-050); } .pdp-ui .mw.nada { color: var(--faint); font-style: italic; } .pdp-ui .mw .hora { font-variant-numeric: tabular-nums; font-weight: 600; } .pdp-ui .mw .id { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: 12px; color: var(--navy); font-weight: 600; } .pdp-ui .mw .id small { display: block; font-family: 'Segoe UI', -apple-system, system-ui, Roboto, Arial, sans-serif; font-size: 11px; color: var(--muted); font-weight: 500; } .pdp-ui .mw .l1 { font-weight: 700; } .pdp-ui .mw .l2 { font-size: 11.5px; color: var(--muted); margin-top: 1px; } /* Un número de comprobante no se parte en el guion: se lee entero o baja entero. */ .pdp-ui .mw .nro { white-space: nowrap; font-variant-numeric: tabular-nums; } .pdp-ui .mw .acc { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; } .pdp-ui .mw .tick { display: inline-flex; flex-direction: column; color: var(--ok); font-weight: 700; font-size: 12px; min-width: 0; } .pdp-ui .mw .tick small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .pdp-ui .clase { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--hair-strong); color: var(--muted); } .pdp-ui .tot { display: flex; gap: 26px; padding: 12px 18px; border-top: 1px solid var(--hair); align-items: baseline; flex-wrap: wrap; } .pdp-ui .tot .n { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .pdp-ui .tot .n small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; } .pdp-ui .ajustes { padding: 10px 18px; border-top: 1px dashed var(--hair-strong); font-size: 12.5px; color: var(--muted); } .pdp-ui .ajustes b { color: var(--ink); } /* ---- el calendario y el lateral ---- */ .pdp-ui .cal-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .pdp-ui .cal-cab b { font-size: 13px; } .pdp-ui .cal-cab .mes { display: inline-flex; gap: 2px; } .pdp-ui .cal-cab .mes button { width: 24px; height: 24px; border-radius: 6px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; transition: background .14s ease, transform .18s var(--curva); } .pdp-ui .cal-cab .mes button:hover:not(:disabled) { background: var(--navy-050); color: var(--navy); transform: translateY(-1px); } .pdp-ui .cal-cab .mes button:disabled { color: var(--hair-strong); } .pdp-ui .cal-cab .mes .material-symbols-outlined { font-size: 18px; vertical-align: middle; } .pdp-ui .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 11.5px; text-align: center; margin-top: 8px; } .pdp-ui .cal .h { color: var(--faint); font-weight: 700; font-size: 10px; } .pdp-ui .cal button.d { padding: 5px 0 3px; border-radius: 6px; border: 1px solid transparent; font-variant-numeric: tabular-nums; color: var(--ink); transition: transform .18s var(--curva), background .14s ease; } .pdp-ui .cal button.d:hover:not(:disabled) { transform: translateY(-2px); background: var(--navy-050); } .pdp-ui .cal .d small { display: block; height: 5px; width: 5px; border-radius: 50%; margin: 2px auto 0; background: transparent; } .pdp-ui .cal .d.aud small { background: var(--ok); } .pdp-ui .cal .d.sin small { background: var(--warn); } .pdp-ui .cal .d.viejo small { background: transparent; border: 1px solid var(--muted); } .pdp-ui .cal .d.act { color: var(--faint); } .pdp-ui .cal .d.hoy { border-color: var(--navy); color: var(--navy); font-weight: 700; } .pdp-ui .cal .d.hoy small { background: var(--navy); } .pdp-ui .cal .d.sel { background: var(--navy-050); } .pdp-ui .cal .d.fut { color: var(--hair-strong); } .pdp-ui .cal .d.fut:disabled { cursor: default; } .pdp-ui .leg { display: grid; gap: 4px; font-size: 11.5px; color: var(--muted); margin-top: 10px; } .pdp-ui .leg span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--faint); } .pdp-ui .leg .a::before { background: var(--ok); } .pdp-ui .leg .s::before { background: var(--warn); } .pdp-ui .leg .h::before { background: var(--navy); } .pdp-ui .leg .v::before { background: transparent; border: 1px solid var(--muted); width: 5px; height: 5px; } .pdp-ui .bloq { padding: 12px 14px; } .pdp-ui .bloq h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .pdp-ui .bloq ul { margin: 0; padding-left: 16px; font-size: 12.5px; } .pdp-ui .bloq li { margin: 3px 0; } .pdp-ui .bloq li.ok { color: var(--ok); list-style: "✓ "; } .pdp-ui .bloq li.futura { color: var(--faint); } /* ---- lo que todavía no está: el día sin parte, el parte viejo, el error ---- */ .pdp-ui .aviso-dia { padding: 26px 22px; display: grid; gap: 8px; justify-items: start; } .pdp-ui .aviso-dia h2 { font-size: 16px; } .pdp-ui .aviso-dia p { color: var(--muted); max-width: 60ch; } .pdp-ui .aviso-dia.error h2 { color: var(--crit); } /* ---- el velo del informe (cuelga del : scope pegado) ---- */ .pdp-ui.pdp-velo { position: fixed; inset: 0; background: rgba(10, 25, 60, .42); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: 'Segoe UI', -apple-system, system-ui, Roboto, Arial, sans-serif; font-size: 13.5px; color: var(--ink); animation: pdpVelo .2s ease; } @keyframes pdpVelo { from { opacity: 0; } to { opacity: 1; } } @keyframes pdpDlg { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } } .pdp-ui .dlg { width: min(1040px, 96vw); height: 92vh; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: 16px; box-shadow: var(--e3); animation: pdpDlg .28s var(--curva); min-width: 0; } .pdp-ui .dlg .hd { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--hair); } .pdp-ui .dlg .hd h3 { margin: 0; font-size: 17px; } .pdp-ui .dlg .hd h3 small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 2px; } .pdp-ui .dlg .hd .x { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: transform .18s var(--curva), background .14s ease; } .pdp-ui .dlg .hd .x:hover { background: var(--canvas); transform: scale(1.12); } .pdp-ui .dlg iframe { flex: 1; border: 0; width: 100%; background: #fff; min-height: 0; } .pdp-ui .dlg .cuerpo-espera { flex: 1; display: flex; align-items: center; justify-content: center; } .pdp-ui .dlg .ft { display: flex; gap: 8px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--hair); background: var(--canvas); } .pdp-ui .dlg .ft .der { margin-left: auto; display: flex; gap: 8px; } /* ---- el teléfono y las pantallas angostas (la etapa 4 trae el conteo desde la playa) ---- */ @media (max-width: 900px) { .pdp-ui .cuerpo { grid-template-columns: 1fr; padding: 14px 12px 32px; gap: 12px; } .pdp-ui .lateral { grid-template-columns: 1fr 1fr; } .pdp-ui .dia { padding: 12px 14px; gap: 14px; } .pdp-ui .prog { margin-left: 0; grid-template-columns: 1fr; gap: 8px; width: 100%; } .pdp-ui .prog .p { min-width: 0; } .pdp-ui .pasos { grid-template-columns: 1fr 1fr; padding: 0 8px; } .pdp-ui .pasos button { padding: 10px 8px; gap: 8px; } .pdp-ui .mw.head { display: none; } .pdp-ui .mw { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 14px; } .pdp-ui .mw > span[data-l]::before { content: attr(data-l); display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 1px; } .pdp-ui .mw .acc { grid-column: 1 / -1; justify-content: flex-start; } .pdp-ui .mw .tick small { max-width: none; white-space: normal; } .pdp-ui .tot { gap: 14px; } } @media (max-width: 520px) { .pdp-ui .lateral { grid-template-columns: 1fr; } .pdp-ui .dia .t { font-size: 20px; } .pdp-ui .sec > .h { padding: 10px 14px; gap: 10px; } .pdp-ui .sec > .h .der { margin-left: 0; width: 100%; } .pdp-ui .mw { grid-template-columns: 1fr; } .pdp-ui .filtros { padding: 10px 14px 0; } .pdp-ui .dlg { width: 100vw; height: 100vh; border-radius: 0; } } /* ============================================================================= ETAPA 3 · lo que hay en cada depósito (etapa 2b, 30/08/2026) ========================================================================== */ .pdp-ui .chip.claro { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; } .pdp-ui .aviso-turno { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: var(--warn-050); border: 1px solid var(--warn-hair); color: var(--warn); font-size: 12.5px; } .pdp-ui .aviso-turno p { min-width: 0; } .pdp-ui .aviso-turno .material-symbols-outlined { flex: none; margin-top: 1px; } /* las tarjetas de depósito: el número grande, y el estado con su chip */ .pdp-ui .deps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .pdp-ui .dep { text-align: left; background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 12px; padding: 14px 16px; box-shadow: var(--e1); display: grid; gap: 8px; position: relative; min-width: 0; transition: transform .18s var(--curva), box-shadow .18s var(--curva), border-color .14s ease; } .pdp-ui .dep:hover, .pdp-ui .dep:focus-visible { transform: translateY(-2px); box-shadow: var(--e2); } .pdp-ui .dep.on { border-color: var(--navy); box-shadow: inset 4px 0 0 var(--navy), var(--e2); } .pdp-ui .dep .nm { font-weight: 700; font-size: 14px; } .pdp-ui .dep .nm small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; } .pdp-ui .dep .big { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; } .pdp-ui .dep .big small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 4px; } .pdp-ui .dep .cnt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 0 4px; border-top: 1px solid var(--hair); font-size: 12.5px; } .pdp-ui .dep .cnt .lb { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .pdp-ui .dep .cnt .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .pdp-ui .dep .mv { font-size: 11.5px; color: var(--muted); } .pdp-ui .dep .ft { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; } .pdp-ui .dep .ft .btn { margin-left: auto; } .pdp-ui .noalc { margin-top: 12px; display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); border: 1px dashed var(--hair-strong); border-radius: 10px; padding: 10px 14px; } .pdp-ui .noalc b { color: var(--ink); } /* la tabla de contar */ .pdp-ui .conteo-wrap { padding: 0 18px 16px; } .pdp-ui .pane.conteo { overflow: hidden; } .pdp-ui .conteo-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px 8px; flex-wrap: wrap; } .pdp-ui .conteo-cab > b { font-size: 14px; } .pdp-ui .conteo-cab .der { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pdp-ui .tabla-wrap { max-height: 680px; overflow: auto; } .pdp-ui .t { width: 100%; border-collapse: collapse; font-size: 13px; } .pdp-ui .t th { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--hair-strong); font-weight: 700; background: var(--surface); position: sticky; top: 0; z-index: 1; } .pdp-ui .t td { padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: middle; transition: background .14s ease; } .pdp-ui .t tbody tr { box-shadow: inset 0 0 0 0 var(--navy); transition: box-shadow .18s var(--curva); } .pdp-ui .t tbody tr:hover { box-shadow: inset 3px 0 0 var(--navy); } .pdp-ui .t td.n, .pdp-ui .t th.n { text-align: right; font-variant-numeric: tabular-nums; } .pdp-ui .t tr.dif td { background: var(--warn-050); } .pdp-ui .t tr.dif.crit td { background: var(--crit-050); } .pdp-ui .t tr.grupo td { background: var(--canvas); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--navy); padding: 7px 10px; border-bottom: 1px solid var(--hair-strong); } .pdp-ui .t tr.mov td:first-child { box-shadow: inset 4px 0 0 var(--navy-300); } .pdp-ui .t tr.mov td { background: linear-gradient(90deg, var(--navy-050), transparent 40%); } .pdp-ui .t tr.lote td { background: var(--navy-050); font-size: 12.5px; padding: 5px 10px 5px 30px; border-bottom-color: #cfdcef; } .pdp-ui .t tr.lote td:first-child::before { content: ""; display: inline-block; width: 10px; border-top: 1px solid var(--hair-strong); margin-right: 8px; vertical-align: middle; } .pdp-ui .t tr.res-fila td { padding: 6px 10px 12px; } .pdp-ui .t .cod { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: 12px; color: var(--navy); font-weight: 600; margin-right: 6px; } .pdp-ui .t .hoy { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; } .pdp-ui .t .hoy span { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: var(--navy-050); color: var(--navy); border: 1px solid #cfdcef; } .pdp-ui .inp { width: 104px; padding: 4px 8px; border: 1px solid var(--hair-strong); border-radius: 6px; background: var(--surface); text-align: right; font-variant-numeric: tabular-nums; transition: border-color .14s ease, box-shadow .14s ease; } .pdp-ui .inp:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-050); } .pdp-ui .inp.lleno { border-color: var(--navy-300); } .pdp-ui .inp.acept { border-style: dashed; color: var(--muted); } .pdp-ui .inp.chica { width: 90px; } .pdp-ui .buscar { display: flex; align-items: center; gap: 8px; border: 1px solid var(--hair-strong); border-radius: 8px; padding: 4px 10px; background: var(--surface); min-width: 240px; transition: border-color .14s ease, box-shadow .14s ease; } .pdp-ui .buscar:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-050); } .pdp-ui .buscar input { border: 0; outline: none; flex: 1; min-width: 0; background: transparent; padding: 2px 0; } .pdp-ui .buscar .material-symbols-outlined { color: var(--muted); font-size: 18px; } /* el panel «Resolver» y sus tres salidas */ @keyframes pdpEntra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .pdp-ui .res { margin: 0; border: 1px solid var(--warn-hair); background: var(--warn-050); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 12px; align-items: start; animation: pdpEntra .28s var(--curva); } .pdp-ui .res .tt { font-weight: 700; font-size: 13px; min-width: 0; } .pdp-ui .res .tt small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 2px; } .pdp-ui .op { text-align: left; background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; display: grid; gap: 4px; cursor: pointer; min-width: 0; transition: transform .18s var(--curva), box-shadow .18s var(--curva), border-color .14s ease; } .pdp-ui .op:hover, .pdp-ui .op:focus-visible { transform: translateY(-2px); box-shadow: var(--e2); } .pdp-ui .op b { font-size: 13px; } .pdp-ui .op.sel { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy-050); } .pdp-ui .op .r { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--hair-strong); display: inline-block; vertical-align: -1px; margin-right: 6px; transition: border .14s ease; } .pdp-ui .op.sel .r { border: 4px solid var(--navy); } .pdp-ui .op .x { color: var(--muted); font-size: 12px; } .pdp-ui .res-fisica { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; animation: pdpEntra .25s var(--curva); } .pdp-ui .res-fisica label { display: grid; gap: 3px; min-width: 0; } .pdp-ui .res-fisica input, .pdp-ui .res-fisica select { padding: 5px 9px; border: 1px solid var(--hair-strong); border-radius: 7px; background: var(--surface); font: inherit; color: var(--ink); min-width: 0; } .pdp-ui .res-fisica input:focus, .pdp-ui .res-fisica select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-050); } .pdp-ui .res-fisica input { width: 100%; } @media (max-width: 900px) { .pdp-ui .res { grid-template-columns: 1fr; } .pdp-ui .conteo-cab .der { margin-left: 0; width: 100%; } .pdp-ui .buscar { min-width: 0; flex: 1; } .pdp-ui .conteo-wrap { padding: 0 10px 12px; } .pdp-ui .t { font-size: 12px; } .pdp-ui .t th, .pdp-ui .t td { padding: 6px 6px; } .pdp-ui .inp { width: 80px; } } /* ============================================================================= ETAPA 4 · resumen, lo que se produjo y cómo va el plan (etapa 2c, 30/08/2026) ============================================================================= Las tres secciones «se leen»: banda de trazo, nada que tipear. La única acción es el botón del cierre, que vive en el renglón `.cierre` al pie del resumen —el mismo lugar del prototipo aprobado (ronda 4)—, para que el que cierra vea arriba lo que está firmando. ========================================================================== */ /* ---- las tarjetas del resumen ---- */ .pdp-ui .resg { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pdp-ui .rescard { border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); overflow: hidden; min-width: 0; } .pdp-ui .rescard > .h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--navy-050); border-bottom: 1px solid #cfdcef; font-weight: 700; color: var(--navy); } .pdp-ui .rescard > .h > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdp-ui .rescard > .h .chip { margin-left: auto; flex: none; } .pdp-ui .rescard > .b { padding: 10px 14px; font-size: 12.5px; } .pdp-ui .rescard .fila { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--hair); } .pdp-ui .rescard .fila:last-child { border-bottom: 0; } .pdp-ui .rescard .fila .k { color: var(--muted); min-width: 0; } .pdp-ui .rescard .fila .v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } /* ---- el renglón del cierre ---- */ .pdp-ui .cierre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--canvas); border: 1px solid var(--hair); } .pdp-ui .cierre .tx { flex: 1 1 320px; min-width: 0; } .pdp-ui .cierre > .material-symbols-outlined { flex: none; color: var(--muted); } .pdp-ui .cierre.ok { background: var(--ok-050); border-color: var(--ok-hair); } .pdp-ui .cierre.ok > .material-symbols-outlined { color: var(--ok); } .pdp-ui .cierre.warn { background: var(--warn-050); border-color: var(--warn-hair); } .pdp-ui .cierre.warn > .material-symbols-outlined { color: var(--warn); } /* ---- lo que se produjo: los cuatro KPIs, los tres bloques y la calidad ---- */ .pdp-ui .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .pdp-ui .kpi { padding: 12px 14px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); min-width: 0; } .pdp-ui .kpi.plano { border: 0; padding: 0; background: none; } .pdp-ui .kpi .cap { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .pdp-ui .kpi .big { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; } .pdp-ui .kpi .big small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; } .pdp-ui .kpi .big.chico { font-size: 16px; line-height: 1.3; font-variant-numeric: normal; } .pdp-ui .kpi .sub { font-size: 12px; color: var(--muted); margin-top: 4px; } .pdp-ui .kpi.ok .big { color: var(--ok); } .pdp-ui .kpi.warn .big { color: var(--warn); } .pdp-ui .kpi.crit .big { color: var(--crit); } .pdp-ui .gauge .track { position: relative; height: 8px; border-radius: 4px; background: var(--hair); margin: 8px 0 4px; } .pdp-ui .gauge .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--ok); transition: width .6s var(--curva); } .pdp-ui .gauge .fill.w { background: var(--warn); } .pdp-ui .gauge .mark { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--navy); } .pdp-ui .gauge .scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); } .pdp-ui .prod3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; margin-top: 14px; } .pdp-ui .blk { border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; background: var(--surface); min-width: 0; } .pdp-ui .blk h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; } .pdp-ui .blk h4 small { font-weight: 500; color: var(--muted); margin-left: 6px; } .pdp-ui .lin { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; } .pdp-ui .lin:last-child { border-bottom: 0; } .pdp-ui .lin .n { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; } .pdp-ui .lin .a { font-size: 11.5px; color: var(--muted); } .pdp-ui .lin .c { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); white-space: nowrap; } .pdp-ui .lin .est { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: 6px; box-shadow: 0 0 0 3px var(--ok-050); } .pdp-ui .barra { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; } .pdp-ui .barra:last-child { border-bottom: 0; } .pdp-ui .barra > span:first-child { min-width: 0; } .pdp-ui .barra .tr { height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; margin-top: 4px; } .pdp-ui .barra .tr i { display: block; height: 100%; background: var(--navy-300); transition: width .6s var(--curva); } .pdp-ui .barra .kg { font-variant-numeric: tabular-nums; font-weight: 700; } .pdp-ui .sem { display: flex; gap: 16px; align-items: center; margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--canvas); font-size: 12.5px; flex-wrap: wrap; } .pdp-ui .sem b { font-variant-numeric: tabular-nums; } .pdp-ui .sem .der2 { margin-left: auto; } /* ---- cómo va el plan ---- */ .pdp-ui .plan-g { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; } .pdp-ui .plan-g .gauge { min-width: 0; } @media (max-width: 1100px) { .pdp-ui .kpis { grid-template-columns: 1fr 1fr; } .pdp-ui .prod3 { grid-template-columns: 1fr; } } @media (max-width: 900px) { .pdp-ui .resg { grid-template-columns: 1fr; } .pdp-ui .plan-g { grid-template-columns: 1fr; gap: 12px; align-items: start; } .pdp-ui .sem .der2 { margin-left: 0; } } @media (max-width: 520px) { .pdp-ui .kpis { grid-template-columns: 1fr; } .pdp-ui .cierre .btn { width: 100%; justify-content: center; } .pdp-ui .lin { grid-template-columns: 30px 1fr; } .pdp-ui .lin .c { grid-column: 2; } /* La columna `auto` del valor no se encoge: en una fila con una observacion larga («sin remito, tarifa $0 · controlado igual») el rotulo se queda sin ancho y los dos textos se montan. A 390 el renglon va en DOS lineas. */ .pdp-ui .rescard .fila { grid-template-columns: 1fr; gap: 1px; } .pdp-ui .rescard .fila .v { text-align: left; } } /* ============================================================================= EL VISOR DE LOS PARTES DEL SISTEMA ANTERIOR (v1) — etapa 4, 30/08/2026 ============================================================================= Es una seccion que SE LEE: banda de trazo, como el resumen y «lo que se produjo». No hay un solo control que escriba, asi que no lleva ni el navy pleno de lo que se audita ni el tenido de lo que se controla (§2.12). */ .pdp-ui .pdp-viejo .nota { color: var(--muted); max-width: 78ch; margin: 0 0 14px; line-height: 1.55; } .pdp-ui .pdp-viejo .sub-h { margin: 22px 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 800; } .pdp-ui .pdp-viejo .sub-h:first-of-type { margin-top: 18px; } .pdp-ui .pdp-viejo .tabla-wrap + .tabla-wrap { margin-top: 12px; } /* El pie del total: la unica fila que no es un articulo, y se tiene que ver. */ .pdp-ui .pdp-viejo .t tfoot td { border-top: 2px solid var(--hair-strong); background: var(--surface-2, var(--surface)); font-weight: 700; padding: 8px 10px; } .pdp-ui .pdp-viejo .t td small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; } .pdp-ui .pdp-viejo .cierre { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hair); }