/* Vista rfis (#sec-rfis). Hoja de la vista RFI / SIG › Registros.

   ORIGEN. Es el <style id="rfi-figma"> de ui/figma (dfffecd, Figma «RFI -
   Registros» 684:8745, más 28607d4 y el grosor de la barra del 24-sep) movido
   aquí y acotado a #sec-rfis. Cada regla cita el nodo del que sale.
   .rfi-table, .rfi-list-head y .rfi-table-wrap las comparten SAME,
   Inspecciones y No Conformidades: por eso TODO va bajo #sec-rfis.

   QUÉ NO SE TRAJO. El bloque «Estatus / Gráficas · 632:1220» (KPI, curva y
   distribución por especialidad): Fabrizio decidió que la pestaña sigue
   llevando a Control documentario (`setTab('control-rfi')`), como en main.
   Sin la pestaña interna esas reglas no pintan nada.

   QUÉ CAMBIA RESPECTO DE LA UI (norma, no estructura; la estructura es §5):
     · G01: la cabecera de la tabla va en tipo oración. Una regla global de la
       plataforma pone los <th> en mayúsculas, así que hace falta
       `text-transform:none` explícito.
     · G02: todo hex con token pasa a su variable de assets/ui/tokens.css. Los
       que no tienen token quedan por valor, marcados «sin token», y se listan
       en el reporte (lote3-rfis.md › Variables nuevas).
     · El estado vacío de main (RFIS sin cargar) va dentro de la tarjeta de la
       tabla: .rfi-vacio. */

#sec-rfis .rfi-cab,
#sec-rfis .rfi-card-tabla{ font-family:'Inter',system-ui,sans-serif; }
#sec-rfis .rfi-cab *,
#sec-rfis .rfi-card-tabla *{ box-sizing:border-box; }

/* ── Cabecera · 684:8864 · 12 hasta la tabla (684:8863) ── */
#sec-rfis .rfi-cab{ flex:0 0 auto; display:flex; align-items:center; gap:19px; padding:10px 0; margin-bottom:12px;
  background:var(--gray-1); border-radius:12px; }
#sec-rfis .rfi-cab-izq{ flex:0 0 411px; min-width:0; display:flex; flex-direction:column; gap:14px; }           /* 684:8865 */
#sec-rfis .rfi-cab-tit{ padding-left:20px; display:flex; flex-direction:column; gap:4px; }                      /* 684:8866-8868 */
#sec-rfis .rfi-cab-h{ margin:0; font:700 24px/28px 'Inter',sans-serif; color:#111827; letter-spacing:0; }      /* 684:8869 · sin token */
#sec-rfis .rfi-cab-sub{ margin:0; font:400 14px/22px 'Inter',sans-serif; color:#4B5563; }                      /* 684:8870 · sin token */
#sec-rfis .rfi-cab-tabs{ padding:8px 20px; }                                                                    /* 684:8871 */
#sec-rfis .rfi-cab .rfi-tabs{ display:flex; gap:0; margin:0; border-bottom:2px solid var(--blue-50); }         /* 684:8872 */
#sec-rfis .rfi-cab .rfi-tab{ padding:8px 12px; margin:0 0 -2px; border:0; border-bottom:2px solid #ECEEF2;    /* 684:8873 · sin token */
  background:none; font:400 16px/24px 'Inter',sans-serif; color:#677790; cursor:pointer; }                       /* 684:8875 · sin token */
#sec-rfis .rfi-cab .rfi-tab.active{ border-bottom-color:var(--blue-300); font-weight:600; color:var(--blue-300); cursor:default; } /* 684:8876-8878 */
#sec-rfis .rfi-cab .rfi-tab:not(.active):hover{ color:var(--gray-7); }
/* 684:8880 · «Line 8»: 1px neutro/6 punteada 2-2 */
#sec-rfis .rfi-cab-div{ align-self:stretch; flex:0 0 1px;
  background:repeating-linear-gradient(to bottom,var(--gray-4) 0 2px,transparent 2px 4px); }
#sec-rfis .rfi-resumen{ flex:1 1 0; min-width:0; padding:10px; display:flex; flex-direction:column; gap:32px; } /* 684:8881-8882 */
#sec-rfis .rfi-resumen-h{ margin:0; font:700 18px/28px 'Inter',sans-serif; color:var(--gray-7); }              /* 684:8883 */
#sec-rfis .rfi-resumen-barra{ display:flex; gap:3px; }                                                          /* 684:8885 */
#sec-rfis .rfi-tramo{ display:flex; flex-direction:column; align-items:center; }
#sec-rfis .rfi-tramo-b{ align-self:stretch; height:24px;   /* 18.29 en el frame; más grueso, pedido de Emanuel (24-sep) */
  display:flex; align-items:center; justify-content:center;                                                      /* 684:8886-8889 */
  font:400 12px/1 'Inter',sans-serif; color:#FCFDFD; }                                                           /* % · 684:8905 · sin token */
#sec-rfis .rfi-tramo:first-child .rfi-tramo-b{ border-radius:10px 0 0 10px; }
#sec-rfis .rfi-tramo:last-child .rfi-tramo-b{ border-radius:0 10px 10px 0; }
#sec-rfis .rfi-tramo:only-child .rfi-tramo-b{ border-radius:10px; }
#sec-rfis .rfi-tramo-l{ display:flex; align-items:center; gap:8px; white-space:nowrap;                          /* 684:8892 */
  font:400 14px/28px 'Inter',sans-serif; color:var(--gray-7); }                                                  /* 684:8894 */
#sec-rfis .rfi-tramo-l i{ flex:none; width:13.084px; height:13.084px; border-radius:50%; }                     /* 684:8893 */
#sec-rfis .rfi-tramo-abierta .rfi-tramo-b,    #sec-rfis .rfi-tramo-abierta i{ background:var(--orange-400); }
#sec-rfis .rfi-tramo-respondida .rfi-tramo-b, #sec-rfis .rfi-tramo-respondida i{ background:var(--blue-300); }
#sec-rfis .rfi-tramo-cerrada .rfi-tramo-b,    #sec-rfis .rfi-tramo-cerrada i{ background:var(--green-400); }
#sec-rfis .rfi-tramo-borrador .rfi-tramo-b,   #sec-rfis .rfi-tramo-borrador i{ background:var(--gray-4); }
#sec-rfis .rfi-tramo-borrador .rfi-tramo-b{ color:var(--gray-7); }                                             /* 684:8908 */
#sec-rfis .rfi-resumen-vacio{ margin:0; font:400 14px/22px 'Inter',sans-serif; color:#6B7280; }                /* sin token */

/* ── Tarjeta de la tabla · 684:8909 ── */
#sec-rfis .rfi-card-tabla{ flex:0 1 auto; min-height:0; display:flex; flex-direction:column; gap:20px; padding:20px 0;
  background:var(--gray-1); border-radius:12px; box-shadow:0 0 3.25px rgba(0,0,0,.09); }
#sec-rfis .rfi-toolbar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px 16px;
  flex-wrap:wrap; padding:0 20px; }                                                                               /* 684:8910 */
#sec-rfis .rfi-toolbar-izq{ display:flex; align-items:center; gap:10px; }                                       /* 684:8911 */
#sec-rfis .rfi-toolbar-der{ display:flex; align-items:center; gap:37px; }                                       /* 684:8934 */
#sec-rfis .rfi-toolbar-btns{ display:flex; align-items:center; gap:24px; }                                      /* 684:8953 */
#sec-rfis .rfi-buscar{ display:flex; align-items:center; gap:8px; width:276px; height:40px; padding:10px 12px;   /* 684:8912 */
  margin:0; background:var(--gray-1); border:1px solid var(--blue-50); border-radius:6px; cursor:text; }
#sec-rfis .rfi-buscar svg{ flex:none; }                                                                          /* 684:8913 */
#sec-rfis .rfi-buscar input{ flex:1 1 auto; min-width:0; width:auto; height:auto; margin:0; padding:0; border:0; outline:0;
  background:transparent; box-shadow:none; font:400 13px/normal 'Inter',sans-serif; color:var(--gray-7); }      /* 684:8915 */
#sec-rfis .rfi-buscar input::placeholder{ color:#484B51; opacity:1; }                                           /* sin token */
#sec-rfis .rfi-buscar:focus-within{ border-color:var(--blue-300); }
/* 684:8921 y 684:8940 · la flecha es la de «Icon-right» (blue/200, 1.67). Va en un data-URI:
   ahí no entra una variable, así que el hex (#3195D7 = --blue-200) se queda escrito. */
#sec-rfis .rfi-sel{ width:176px; height:40px; margin:0; padding:8px 32px 8px 12px;
  background:var(--gray-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15 8L10 13L5 8' stroke='%233195D7' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--blue-50); border-radius:6px; -webkit-appearance:none; appearance:none; box-shadow:none;
  font:400 14px/20px 'Inter',sans-serif; color:var(--gray-7); cursor:pointer; }                                  /* 684:8925 */
#sec-rfis .rfi-sel:focus-visible{ outline:2px solid var(--blue-300); outline-offset:1px; }
#sec-rfis .rfi-pub{ padding:12px 14px; margin:0; border:1px solid var(--blue-300); border-radius:50px; background:var(--blue-50); /* 684:8954 */
  font:500 14px/normal 'Inter',sans-serif; color:var(--blue-300); cursor:pointer; white-space:nowrap; }         /* 684:8955 */
#sec-rfis .rfi-pub:hover{ background:#D6EAF7; }                                                                  /* sin token */
#sec-rfis .rfi-pub:disabled{ opacity:.6; cursor:default; }
#sec-rfis .rfi-crear{ display:inline-flex; align-items:center; gap:8px; padding:12px 14px; margin:0; border:0;     /* 684:8956 */
  border-radius:50px; background:var(--blue-300); font:500 14px/normal 'Inter',sans-serif; color:var(--gray-1);   /* 684:8960 */
  cursor:pointer; white-space:nowrap; }
#sec-rfis .rfi-crear:hover{ background:#066BB0; }                                                                /* sin token */

/* ── Tabla · 684:8961 · columnas 90/50/resto/180/100/160/200 + 16 entre ellas ── */
#sec-rfis .rfi-card-tabla .rfi-table-wrap{ flex:0 1 auto; min-height:0; overflow:auto; margin:0; padding:0;
  border:0; border-radius:0; background:var(--gray-1); box-shadow:none; }   /* el Figma le da 0 4 12 .02: sombra dentro de la tarjeta = tarjeta anidada (checkNestedCards), se quita */
#sec-rfis .rfi-card-tabla .rfi-table{ width:100%; table-layout:fixed; border-collapse:collapse; margin:0; }
#sec-rfis .rfi-card-tabla col.c-est{ width:114px; }
#sec-rfis .rfi-card-tabla col.c-id{ width:66px; }
#sec-rfis .rfi-card-tabla col.c-dest{ width:196px; }
#sec-rfis .rfi-card-tabla col.c-vence{ width:116px; }
#sec-rfis .rfi-card-tabla col.c-tipo{ width:176px; }
#sec-rfis .rfi-card-tabla col.c-ubic{ width:224px; }
/* G01: tipo oración. El Figma los dibuja en mayúsculas; la norma manda. */
#sec-rfis .rfi-card-tabla .rfi-table th{ padding:12px 8px; background:var(--gray-1); border:0; border-bottom:1px solid #E5E7EB; /* 684:8962 */
  font:700 14px/normal 'Inter',sans-serif; color:#6B7280; text-transform:none; letter-spacing:0;
  text-align:left; white-space:nowrap; }
#sec-rfis .rfi-card-tabla .rfi-table td{ padding:14px 8px; background:var(--gray-1); border:0; border-bottom:1px dashed #E5E7EB; /* 684:8970 */
  font:400 13px/normal 'Inter',sans-serif; color:#6B7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  vertical-align:middle; }
#sec-rfis .rfi-card-tabla .rfi-table th:first-child,
#sec-rfis .rfi-card-tabla .rfi-table td:first-child{ padding-left:16px; }
#sec-rfis .rfi-card-tabla .rfi-table th:last-child,
#sec-rfis .rfi-card-tabla .rfi-table td:last-child{ padding-right:16px; }
#sec-rfis .rfi-card-tabla .rfi-table tbody tr:last-child td{ border-bottom:0; }                                     /* 684:9098 */
#sec-rfis .rfi-card-tabla .rfi-table tbody tr{ cursor:pointer; }
#sec-rfis .rfi-card-tabla .rfi-table tbody tr:hover td{ background:#F8FAFC; }                                       /* sin token */
#sec-rfis .rfi-card-tabla .rfi-table td.rfi-id{ font-weight:600; color:#1E2229; }                                    /* 684:8975 */
#sec-rfis .rfi-card-tabla .rfi-table td.rfi-titulo{ font-weight:500; color:#1E2229; }                                /* 684:8977 */
#sec-rfis .rfi-card-tabla .rfi-table td.rfi-vence{ font-weight:500; }                                                /* 684:8981 */
#sec-rfis .rfi-card-tabla .rfi-table td.rfi-vence.vencida{ color:#EF4444; }                                          /* 684:9029 */
#sec-rfis .rfi-card-tabla .rfi-badge{ display:inline-block; padding:4px 8px; border:0; border-radius:12px;           /* 684:8972 */
  font:700 11px/normal 'Inter',sans-serif; letter-spacing:0; text-transform:none; }
#sec-rfis .rfi-card-tabla .rfi-badge.rfi-st-abierta{ background:#FFF1EB; color:#E05E1A; }                           /* 684:8972-8973 */
#sec-rfis .rfi-card-tabla .rfi-badge.rfi-st-cerrada,
#sec-rfis .rfi-card-tabla .rfi-badge.rfi-st-borrador{ background:#F3F4F6; color:#6B7280; }                          /* 684:8988 · 684:9052 */
#sec-rfis .rfi-card-tabla .rfi-badge.rfi-st-respondida{ background:#E0F2FE; color:#0369A1; }                        /* 684:9004 */
#sec-rfis .rfi-card-tabla .rfi-table td.rfi-empty{ text-align:center; white-space:normal; padding:28px 16px; }

/* ── Estado vacío de main (RFIS sin cargar), dentro de la tarjeta ──
   Sin diseño en la UI. Se viste con la fila vacía de la propia tabla
   (td.rfi-empty: mismo color, centrado y relleno) y con el botón «Crear RFI»
   de la barra, que es el modelo del «+ Crear» (§1, D-125). */
#sec-rfis .rfi-vacio{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:28px 20px; text-align:center; }
#sec-rfis .rfi-vacio-txt{ margin:0; max-width:620px; font:400 13px/20px 'Inter',sans-serif; color:#6B7280; }
#sec-rfis .rfi-vacio-txt b{ display:block; margin-bottom:4px; font-weight:600; font-size:14px; color:var(--gray-7); }

/* ── Pie · 684:9114 ── */
/* Se aparta del Figma (16 a la derecha) por pedido de Emanuel, 21-sep: la burbuja de Nova (60x60 fija a 20 del
   borde) tapaba el boton de pagina siguiente a 1366 y 1600. Con 56 queda a 12 de la burbuja. */
#sec-rfis .rfi-pie{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 56px 0 16px; }
#sec-rfis .rfi-pie-txt{ font:400 12px/normal 'Inter',sans-serif; color:#9CA3AF; }                                   /* 684:9115 · sin token */
#sec-rfis .rfi-pag{ display:flex; align-items:center; gap:8px; }                                                     /* 684:9116 */
#sec-rfis .rfi-pag-b{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; padding:0; margin:0; /* 684:9122 */
  border:1px solid #E2E8F0; border-radius:8px; background:#F8FAFC; font:600 13px/normal 'Inter',sans-serif; color:#64748B;
  cursor:pointer; }
#sec-rfis .rfi-pag-b.on{ border-color:transparent; background:var(--degrade);                                        /* 684:9120 */
  font-weight:700; color:var(--gray-1); cursor:default; }
#sec-rfis .rfi-pag-b:disabled{ border-color:transparent; color:#CBD5E1; cursor:default; }                           /* 684:9117 */
#sec-rfis .rfi-pag-b:not(.on):not(:disabled):hover{ border-color:var(--blue-300); color:var(--blue-300); }
#sec-rfis .rfi-pag-sep{ padding:0 2px; font:600 13px/1 'Inter',sans-serif; color:#94A3B8; }

/* ── Pantallas angostas: el resumen baja bajo el título y la tabla se desplaza de lado ── */
@media (max-width:1100px){
  #sec-rfis .rfi-cab{ flex-wrap:wrap; }
  #sec-rfis .rfi-cab-izq{ flex:1 1 100%; }
  #sec-rfis .rfi-cab-div{ display:none; }
  #sec-rfis .rfi-resumen{ flex:1 1 100%; padding:0 20px 10px; gap:16px; }
  #sec-rfis .rfi-toolbar-der{ gap:12px; flex-wrap:wrap; }
}
@media (max-width:700px){
  #sec-rfis .rfi-toolbar-izq{ flex-wrap:wrap; width:100%; }
  #sec-rfis .rfi-buscar{ width:100%; }
  #sec-rfis .rfi-card-tabla .rfi-table{ min-width:900px; }
}