/* Vista calidad-sig · Registro de Inspecciones (#sec-calidad-sig).
   VISTA MODELO aprobada (norma §1 «Lista de registros» y §5): su estructura se trae tal cual.
   Origen: <style id="inspecciones-figma"> de ui/figma 781453a (commit 0279f1a, Figma
   «RFI / SIG - Registros», sección 782:2691, contenido 788:4087), movido aquí y acotado a
   #sec-calidad-sig. Lo común con NC y con las pestañas de Indicadores (calidad-figma,
   calidad-indicadores) vive en assets/ui/calidad-comun.css y carga ANTES: aquí va solo lo que
   este frame pide distinto, y gana a igual especificidad.
   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: sin text-transform:uppercase en cabeceras de tabla, pastillas de estado ni en los
     rótulos de las tarjetas de Indicadores (una regla global y calidad-comun los ponían en
     mayúsculas: hace falta text-transform:none explícito).
   · G03: el pie «Mostrando X de Y» y el detalle de celda pasan del gris claro a --gray-6.
   · G05: «Crear registro» y «Reintentar» llevan Heroicon (lo pinta renderInspLista).
   · G04: a ≤ 900 px ningún texto de la vista baja de 12. */

/* ── Cabecera · 788:4061 ── */
#sec-calidad-sig .insp-cab{ display:flex; align-items:center; gap:44px;
  padding:12px 12px 0; background:var(--gray-1); border-radius:12px 12px 0 0;
  font-family:'Inter',system-ui,sans-serif; }                                       /* 788:4062 */
#sec-calidad-sig .insp-cab *, #sec-calidad-sig .insp-cab-tabs *{ box-sizing:border-box; }
#sec-calidad-sig .insp-cab-tit{ flex:1 1 0; min-width:0; display:flex;
  flex-direction:column; gap:4px; }                                                 /* 788:4063 */
#sec-calidad-sig .insp-cab-h{ margin:0; font:700 24px/28px 'Inter',sans-serif;
  color:#111827; letter-spacing:0; text-transform:none; }                           /* 788:4064 · sin token (= APU's, Adquisiciones) */
#sec-calidad-sig .insp-cab-sub{ margin:0; font:400 14px/22px 'Inter',sans-serif;
  color:#4B5563; }                                                                  /* 788:4065 · sin token */

/* Las dos acciones, ya en la cabecera (788:4066). Llegan con las clases del motor, así que
   aquí solo toman la píldora del Figma: 788:4067 la de borde y 788:4069 la azul llena. */
#sec-calidad-sig .insp-cab-acc{ display:flex; align-items:center; gap:24px; }       /* 788:4066 */
#sec-calidad-sig .insp-cab-acc:empty{ display:none; }
#sec-calidad-sig .insp-cab-acc .rfi-btn{ display:inline-flex; align-items:center; gap:8px; height:auto; padding:12px 14px; }   /* 788:4067 */
#sec-calidad-sig .rfi-btn svg{ width:18px; height:18px; flex:none; }               /* G05: Heroicon, como .pz-dl */
#sec-calidad-sig .insp-cab-acc .rfi-draft-badge{ height:auto; padding:8px 12px; }

/* ── Pestañas · 788:4074 ── */
#sec-calidad-sig .insp-cab-tabs{ padding:8px 20px 12px; margin-bottom:12px;
  background:var(--gray-1); border-radius:0 0 12px 12px; }
#sec-calidad-sig .insp-cab-tabs .rfi-tabs{ display:flex; gap:0; margin:0;
  border-bottom:2px solid var(--blue-50); }                                         /* 788:4075 */
#sec-calidad-sig .insp-cab-tabs .rfi-tab{ padding:8px 12px; margin:0 0 -2px; border:0;
  border-bottom:2px solid #ECEEF2; background:none;
  font:400 16px/24px 'Inter',sans-serif; color:#677790; cursor:pointer; }           /* 788:4079-4081 · sin token */
#sec-calidad-sig .insp-cab-tabs .rfi-tab.active{ border-bottom-color:var(--blue-300);
  font-weight:600; color:var(--blue-300); cursor:default; }                         /* 788:4076-4078 */
#sec-calidad-sig .insp-cab-tabs .rfi-tab:not(.active):hover{ color:var(--gray-7); }

/* ── Los tres desplegables · 788:3765 · 176 de ancho, no 196 ── */
#sec-calidad-sig .insp-sel{ width:176px; }                                          /* 788:3765 */
#sec-calidad-sig .insp-sel[style]{ max-width:none !important; }   /* el 2º traía un tope en línea */

/* ── La tabla, con los valores de SU frame · 788:3835 y 788:3845 ──
   La lista heredó el lenguaje de RFI, que es de otra escala. Este frame la fija: la
   cabecera baja a 11 bold --gray-6, la celda sube a 14 y el filete pasa a #EAECEF. */
#sec-calidad-sig .rfi-table th{ padding:16px 8px; border-bottom:1px solid #EAECEF;
  font:700 11px/normal 'Inter',sans-serif; color:var(--gray-6); text-transform:none; } /* 788:3835 · G01 · filete sin token */
#sec-calidad-sig .rfi-table td{ padding:14px 8px; border-bottom:1px solid #EAECEF;
  font:400 14px/normal 'Inter',sans-serif; color:var(--gray-7); }                  /* 788:3845 */
#sec-calidad-sig .rfi-table th:first-child,
#sec-calidad-sig .rfi-table td:first-child{ padding-left:24px; }
#sec-calidad-sig .rfi-table th:last-child,
#sec-calidad-sig .rfi-table td:last-child{ padding-right:24px; }
/* el dato manda y el detalle acompaña: 14 semibold arriba, 11 regular debajo */
#sec-calidad-sig .rfi-table td b{ font:600 14px/normal 'Inter',sans-serif;
  color:var(--gray-7); }                                                           /* 788:3855 */
#sec-calidad-sig .rfi-table td.nc-tit{ font:600 14px/normal 'Inter',sans-serif;
  color:var(--gray-7); }
#sec-calidad-sig .nc-tit small,
#sec-calidad-sig .nc-pend small,
#sec-calidad-sig .nc-tiempo small{ margin-top:2px; font-size:11px; font-weight:400;
  color:var(--gray-6); }                                                           /* 788:3856 · G03 (#8C9199 → --gray-6) */
/* la cadena, en medium gris */
#sec-calidad-sig .rfi-table td:nth-child(7){ font-weight:500; color:var(--gray-6); } /* 788:3864 */

/* ── La pastilla de estado · 788:3847 ──
   El frame dibuja uno solo, «Por revisar» en ámbar. Los otros tres siguen su patrón con
   los tokens de la paleta. G01: tipo oración (el texto ya viene así; el uppercase lo ponía el CSS). */
#sec-calidad-sig .insp-est{ padding:4px 10px; border-radius:12px;
  font:700 11px/normal 'Inter',sans-serif; text-transform:none; }                  /* 788:3848 · G01 */
#sec-calidad-sig .insp-e-borrador{ background:var(--gray-2); color:var(--gray-6); } /* neutro/3 + neutro/8 */
#sec-calidad-sig .insp-e-curso{ background:#FFF4E6; color:#D97706; }               /* 788:3847 · sin token */
#sec-calidad-sig .insp-e-observado{ background:#FFD699; color:var(--orange-500); } /* orange/75 (sin token) + orange/500 */
#sec-calidad-sig .insp-e-ok{ background:var(--green-50); color:var(--green-400); } /* green/50 + green/400 */

/* ── La categoría, que era texto suelto, pasa a pastilla · 788:3852 ── */
#sec-calidad-sig .insp-cat{ display:inline-flex; align-items:center; justify-content:center;
  padding:4px 8px; border-radius:6px; background:var(--blue-50);
  font:600 12px/normal 'Inter',sans-serif; color:var(--blue-300); }                /* 788:3853 */
/* ── Pie de la lista · 788:3819 ── */
#sec-calidad-sig .rfi-pie{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 16px; }
#sec-calidad-sig .rfi-pie-txt{ font:400 12px/normal 'Inter',sans-serif; color:var(--gray-6); }  /* 788:3820 · G03 */
#sec-calidad-sig .rfi-pie-txt:empty{ display:none; }
/* G04: la flecha de orden de las cabeceras (inspTh, del motor compartido) salía a 9 px */
#sec-calidad-sig .insp-ord .fl{ font-size:10px; }

/* ── Indicadores · G08: ≡ Capacitaciones › Indicadores (el componente vive en calidad-comun) ──
   G01: rótulo de tarjeta, cabeceras de la tabla de detalle y pastillas en tipo oración. */
#sec-calidad-sig #inspPane-indicadores .kpi-label,
#sec-calidad-sig #inspPane-indicadores .table-wrap table thead th,
#sec-calidad-sig #inspPane-indicadores .insp-est{ text-transform:none !important; letter-spacing:0 !important; }

@media (max-width:1100px){
  #sec-calidad-sig .insp-cab{ gap:20px; }
  #sec-calidad-sig .insp-sel{ width:160px; }
}
@media (max-width:820px){
  #sec-calidad-sig .insp-cab{ flex-direction:column; align-items:stretch; gap:12px; }
  #sec-calidad-sig .insp-cab-acc{ flex-wrap:wrap; gap:8px; }
  #sec-calidad-sig .insp-cab-acc .rfi-btn{ flex:1 1 auto; justify-content:center; min-height:44px; }  /* M07 · toque de 44 */
  #sec-calidad-sig .insp-cab-h{ font-size:20px; line-height:26px; }
  #sec-calidad-sig .insp-cab-tabs{ padding:8px 16px 12px; }
  #sec-calidad-sig .insp-cab-tabs .rfi-tab{ font-size:14px; }
  #sec-calidad-sig .insp-sel{ width:auto; }
}
/* G04 en el teléfono: ≥ 12 */
@media (max-width:900px){
  html.mv #sec-calidad-sig :is(.insp-est,.rfi-table th,.insp-ord,.nc-tit small,.nc-pend small,.nc-tiempo small,.insp-cat,.insp-ord .fl){ font-size:12px; }
  /* el 2º desplegable mide su opción más larga (quitado su tope en línea): no pasa del ancho de la lista */
  #sec-calidad-sig .insp-sel{ max-width:100% !important; min-width:0; }
}