/* Vista panel-calidad (#sec-panel-calidad).
   Origen: <style id="panel-calidad-resumen"> de ui/figma 781453a (Figma «Resumen» 680:7749,
   commit 0538d2e «Panel de Calidad con el lenguaje del Resumen»), movido aquí y acotado a
   #sec-panel-calidad. Mismo vocabulario que el Panel de Operaciones ya migrado
   (assets/ui/panel-operaciones.css, pz-*): cabecera de obra, tarjeta con curva y lecturas,
   tarjetas de sección, sombras y grises. Las clases pcz-* son el contrato con
   movil/estilos.css («Panel de Calidad») y con calidad-cd1.js (ficha y «Descargar resumen»
   en .pcz-cab, D02).
   Cambios sobre el origen, por la norma (criterios-ui-esparq.md):
   · G02: colores con las variables de tokens.css; los que no tienen token van por valor
     con «sin token» al lado (lista en el reporte cal-panel-sig.md).
   · G01: fuera text-transform:uppercase del sobretítulo, de los rótulos de las lecturas y
     del rótulo de las tarjetas .r-kpi.
   · G03: rótulos que hay que leer pasan del gris claro (--gray-5) a --gray-6, como en
     Operaciones; el gris claro queda para filetes.
   · G04: los rótulos del eje de la curva (8 y 8,5 como atributo en pcalCurvaSig) suben a 10
     en escritorio y a 12 en el teléfono.
   · G09: la tarjeta de la curva y las de sección llevan la sombra suave de Operaciones. */

#sec-panel-calidad .pcz{ display:flex; flex-direction:column; gap:14px; padding:0 0 24px; font-family:'Inter',system-ui,sans-serif; color:var(--gray-8); }
#sec-panel-calidad .pcz b{ font-weight:inherit; }
#sec-panel-calidad .pcz h3{ margin:0; }
#sec-panel-calidad #pcAviso:empty{ display:none; }

/* el contenedor que lee el teléfono (movil/panel.js) no pinta nada en escritorio: se le quita
   el estilo del .r-banner viejo (fondo, borde, sombra, raya de color), que llega con !important */
#sec-panel-calidad .r-banner.pcz-banner{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:14px !important;
  padding:0 !important; margin:0 !important; border:0 !important; border-radius:0 !important; background:none !important;
  box-shadow:none !important; color:inherit !important; overflow:visible !important; position:static !important; min-height:0 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
#sec-panel-calidad .r-banner.pcz-banner::after,#sec-panel-calidad .r-banner.pcz-banner::before{ display:none !important; }

/* ── Cabecera · 680:7866 (D02: la del Resumen; = .pz-cab de Operaciones) ── */
#sec-panel-calidad .pcz-cab{ display:flex; align-items:center; justify-content:space-between; gap:16px 20px; min-height:70px; margin-bottom:-4px; flex-wrap:wrap; }
#sec-panel-calidad .pcz-id{ display:flex; flex-direction:column; gap:4px; min-width:0; }                                       /* 680:7867 */
#sec-panel-calidad .pcz-kick{ margin:0 !important; font:700 10px/12.1px 'Inter',sans-serif !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--blue-300) !important; opacity:1 !important; }                                      /* 680:7869 · G01 */
#sec-panel-calidad .pcz-title{ font:700 28px/normal 'Inter',sans-serif; color:var(--gray-9); letter-spacing:0; }               /* 680:7870 */
#sec-panel-calidad .pcz-title:empty::before{ content:'—'; }                                                                     /* como .pz-title */
#sec-panel-calidad .pcz-client{ margin:0 !important; font:400 14px/17px 'Inter',sans-serif !important; color:var(--gray-6) !important; } /* 680:7871 */
#sec-panel-calidad .pcz-client:empty{ display:none; }

/* ── Tarjetas ── */
#sec-panel-calidad .pcz-card{ background:var(--gray-1); border-radius:16px; min-width:0; }

/* curva y lecturas · 680:7894 · G09: la sombra suave de .pz-top */
#sec-panel-calidad .pcz-top{ border-radius:12px; padding:12px; display:flex; align-items:stretch; gap:28px; min-height:236px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05); }
#sec-panel-calidad .pcz-vl{ flex:none; width:0; border-left:1px dashed var(--gray-4); align-self:stretch; margin:24px 0; }
#sec-panel-calidad .pcz-curva{ flex:1 1 438px; min-width:0; display:flex; flex-direction:column; gap:6px; align-self:stretch; padding:4px 0 0 8px; }
#sec-panel-calidad .pcz-h2{ font:600 16px/19px 'Inter',sans-serif; color:var(--gray-6); }                                     /* 680:7897 */
/* título + «Ver»: los valores del de la curva de avance del Panel de Operaciones (panel-operaciones.css .pz-ver) */
#sec-panel-calidad .pcz-curva-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px; }
#sec-panel-calidad .pcz-ver{ display:inline-flex; align-items:center; gap:6px; flex:none; padding:6px 12px; border-radius:999px;
  border:1px solid var(--blue-75); background:var(--gray-1); color:var(--blue-300); font:600 12px/normal 'Inter',sans-serif; cursor:pointer; }
#sec-panel-calidad .pcz-ver svg{ width:16px; height:16px; }
#sec-panel-calidad .pcz-ver:hover{ background:var(--blue-50); }
#sec-panel-calidad .pcz-ver:focus-visible{ outline:2px solid var(--blue-300); outline-offset:2px; }
@media print{ body.pc-imprimiendo #sec-panel-calidad .pcz-ver{ display:none !important; } }
#sec-panel-calidad .pcz-curva-cmp{ font:400 12px/15px 'Inter',sans-serif; color:#4B5563; font-variant-numeric:tabular-nums; }  /* 680:7913 · sin token (= .pz-curva-cmp) */
#sec-panel-calidad .pcz-curva-cmp b{ font-weight:400; color:var(--gray-7); }
#sec-panel-calidad .pcz-curva-cmp b:is(.bad,.warn,.ok){ font:600 10px/12px 'Inter',sans-serif; margin-left:4px; }              /* 680:7914 · 10, igual que la curva del Resumen */
#sec-panel-calidad .pcz-curva-cmp b.bad{ color:#F92F2F; }                                                                       /* sin token */
#sec-panel-calidad .pcz-curva-cmp b.warn{ color:var(--orange-400); }
#sec-panel-calidad .pcz-curva-cmp b.ok{ color:var(--green-400); }                                                               /* G03: #05CC65 no llega a 4,5:1 sobre blanco */
/* el alto del dibujo lo fija pcalCurvaSig; la tarjeta la estira la columna de lecturas:
   la curva se centra en el hueco en vez de dejar un vacío entre ella y la leyenda */
#sec-panel-calidad .pcz-curva-svg{ flex:1 1 auto; min-height:152px; position:relative; display:flex; flex-direction:column; justify-content:center; }
#sec-panel-calidad .pcz-curva-svg svg{ display:block; width:100%; height:auto; max-height:none; }
#sec-panel-calidad .pcz-curva-svg .rhc-vacio{ font-size:12px; color:var(--gray-6); padding:14px 0; }
/* la curva la dibuja pcalCurvaSig ya con la tinta, los rótulos y el área de la curva del Resumen
   (renderRCurvaS): aquí no se repinta nada, para que las dos se vean idénticas. */
#sec-panel-calidad .rhc-tip{ position:absolute; z-index:5; pointer-events:none; background:rgba(38,38,38,.94); color:#fff; border-radius:6px; padding:8px 10px; font:400 12px/16px 'Inter',sans-serif; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.2); }
#sec-panel-calidad .rhc-tip b{ display:block; font-weight:700; margin-bottom:2px; }
#sec-panel-calidad .rhc-tip i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; border:1.5px solid #fff; }
#sec-panel-calidad .rhc-guia{ position:absolute; z-index:4; pointer-events:none; width:0; border-left:1px dashed #8E9093; }
#sec-panel-calidad .rhc-tip[hidden], #sec-panel-calidad .rhc-guia[hidden]{ display:none; }
#sec-panel-calidad .pcz-leg{ display:flex; gap:8px; align-items:center; }                                                     /* 680:7916 */
#sec-panel-calidad .pcz-leg span{ display:inline-flex; align-items:center; gap:2px; font:600 12px/22px 'Inter',sans-serif; color:var(--gray-6); }
#sec-panel-calidad .pcz-leg i{ display:inline-block; width:10.48px; height:1.95px; border-radius:999px; margin:0 2px 0 0; }
#sec-panel-calidad .pcz-leg i.lg-real{ background:var(--orange-400); }
#sec-panel-calidad .pcz-leg i.lg-prog{ background:var(--blue-300); }

/* las tres lecturas: la columna de 680:7925, sin caja, con filete entre filas */
#sec-panel-calidad .pcz-proy{ flex:0 0 332px; display:flex !important; flex-direction:column; justify-content:center; gap:0 !important;
  min-width:0; margin:0 !important; padding:0 8px 0 0; }
#sec-panel-calidad .pcz-proy .po-ins-i{ flex:none !important; display:flex; flex-direction:column; gap:4px; padding:17px 2px !important;
  margin:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; }
#sec-panel-calidad .pcz-proy .po-ins-i + .po-ins-i{ border-top:1px solid #EDF1F6 !important; }                                 /* sin token (filete) */
#sec-panel-calidad .pcz-proy .po-ins-l{ margin:0 !important; font:700 11px/13px 'Inter',sans-serif !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--gray-6) !important; }                                                              /* 680:7940 · G01 · G03 (= .pz-lec-l) */
#sec-panel-calidad .pcz-proy .po-ins-v{ margin:0 !important; font:400 20px/normal 'Inter',sans-serif !important; letter-spacing:0 !important;
  color:var(--gray-8) !important; white-space:nowrap; font-variant-numeric:tabular-nums; }                                        /* 680:7929 */
#sec-panel-calidad .pcz-proy .po-ins-i.ve .po-ins-v{ color:var(--green-400) !important; }                                      /* 680:7942 */
#sec-panel-calidad .pcz-proy .po-ins-i.am .po-ins-v{ color:var(--orange-400) !important; }
#sec-panel-calidad .pcz-proy .po-ins-i.ro .po-ins-v{ color:#F92F2F !important; }                                                /* sin token */
#sec-panel-calidad .pcz-proy .po-ins-s{ margin:0 !important; font:600 12px/15px 'Inter',sans-serif !important; color:var(--gray-8) !important; }   /* 680:7932 */

/* ── Tarjetas de sección · «Control de operaciones» 680:8076 ── */
#sec-panel-calidad .pcz-ctrl{ padding:10px 20px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05); }                                                     /* G09: la de .pz-sec */
#sec-panel-calidad .pcz-sec-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-height:32px; }
#sec-panel-calidad .pcz-sec-h h3{ font:700 16px/19px 'Inter',sans-serif; color:var(--gray-8); }                              /* 680:8076 */
#sec-panel-calidad .pcz-sec-der{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#sec-panel-calidad .pcz-sec-der > span{ font:400 12px/15px 'Inter',sans-serif; color:var(--gray-6); }                         /* 680:7967 · G03 */
/* «Ver indicadores ›»: la píldora de borde de la plataforma (788:4067) a escala de sección */
#sec-panel-calidad .pcz-sec-der .pc-ir{ position:static; display:inline-flex; align-items:center; gap:4px; width:auto; height:32px;
  padding:0 10px 0 14px; margin:0; border:1px solid var(--blue-300); border-radius:50px; background:var(--blue-50); box-shadow:none;
  font:500 12px/normal 'Inter',sans-serif; color:var(--blue-300); text-transform:none; letter-spacing:0; cursor:pointer; white-space:nowrap; }
#sec-panel-calidad .pcz-sec-der .pc-ir:hover{ background:#D6EAF7; }                                                             /* sin token */
#sec-panel-calidad .pcz-sec-der .pc-ir:focus-visible{ outline:2px solid var(--blue-300); outline-offset:2px; }
#sec-panel-calidad .pcz-sec-der .pc-ir svg{ width:14px; height:14px; flex:none; }

/* las cuatro tarjetas: la rejilla de 680:8078 (hueco 16, 10 abajo) */
#sec-panel-calidad .pcz-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding-bottom:10px; margin:0; align-items:stretch !important; }
#sec-panel-calidad .pcz-kpis > .r-kpi{ height:auto !important; align-self:stretch !important; }
/* la tarjeta ya es la del Resumen (poCard → .r-kpi); solo se le quita la pila de letra y la tinta base viejas */
#sec-panel-calidad .pcz-kpis .r-kpi{ font-family:'Inter',system-ui,sans-serif; color:var(--gray-8); }
/* en una fila de cuatro, el pie («▲ Meta · estado») cae a la misma altura en todas */
#sec-panel-calidad .pcz-kpis .r-kpi{ display:flex; flex-direction:column; }
#sec-panel-calidad .pcz-kpis .r-kpi > .kpi-meta-footer{ margin-top:auto !important; }   /* una regla vieja lo fija a 16 con !important */
/* G01: el rótulo de la tarjeta (regla global de .r-kpi-label en mayúsculas) va en tipo oración */
#sec-panel-calidad .pcz-kpis .r-kpi-label{ text-transform:none !important; letter-spacing:0 !important; }
/* G11: las cuatro tarjetas son PARTES de la tarjeta de sección (filete, sin sombra), como .pz-k en
   Operaciones; con sombra propia se leían como tarjetas dentro de otra (checkNestedCards: 16) */
#sec-panel-calidad .pcz-kpis .r-kpi{ box-shadow:none !important; border:1px solid var(--blue-50) !important; }

/* ── Pantallas estrechas: los cortes del Resumen ── */
@media (max-width:1250px){
  #sec-panel-calidad .pcz-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1180px){
  #sec-panel-calidad .pcz-top{ flex-wrap:wrap; align-items:flex-start; }
  #sec-panel-calidad .pcz-vl{ display:none; }
  #sec-panel-calidad .pcz-curva{ flex:1 1 320px; }
  #sec-panel-calidad .pcz-proy{ flex:1 1 300px; }
}
@media (max-width:700px){
  #sec-panel-calidad .pcz-kpis{ grid-template-columns:minmax(0,1fr); }
  #sec-panel-calidad .pcz-ctrl{ padding:12px 16px; }
}
/* G04 en el teléfono: ningún texto de la vista por debajo de 12. movil/estilos.css ya sube el
   sobretítulo y los rótulos de lectura a 12,5; aquí, el eje de la curva (allí 11) y el delta. */
@media (max-width:900px){
  html.mv #sec-panel-calidad .pcz-curva-svg text{ font-size:12px; }
  html.mv #sec-panel-calidad .pcz-curva-cmp b:is(.bad,.warn,.ok){ font-size:12px; }
  html.mv #sec-panel-calidad .pcz-kpis .kpi-meta-status{ font-size:12px !important; }   /* la píldora del pie salía a 11 */
}