/* ═══════════════════════════════════════════════════════════════════════
   APU's (#sec-apus) · diseño del Figma «APU's» (740:371)
   ───────────────────────────────────────────────────────────────────────
   Antes lo inyectaba `apuInjectStyles()` desde index.html (ui/figma,
   ccddc09 y 8169cf2). Se mueve aquí tal cual, con dos cambios:

   1. COLOR: cada hex que tiene token en assets/ui/tokens.css pasa a su
      variable. Los que no tienen token se quedan en valor, marcados con
      «sin token», y se listan en el reporte lote3-apus.md.
   2. NORMA en el CUERPO de la vista (no en el encabezado, que está
      aprobado, §5):
      - G01: fuera el `text-transform:uppercase` de rótulos, cabecera de
        tabla, grupos y subtotales; la jerarquía queda en el peso.
      - G04: en el teléfono ningún texto por debajo de 12 px.
   Todo va acotado a #sec-apus: esta hoja no toca otra vista.
   ═══════════════════════════════════════════════════════════════════════ */

/* El interlineado del Figma es el normal de Inter (1.21); la plataforma hereda 1.5
   y las filas crecían 4 px cada una. */
#sec-apus .apuf-vista{ display:flex; flex-direction:column; gap:36px; color:var(--gray-7); line-height:normal; }
#sec-apus .apuf-vista h2, #sec-apus .apuf-vista h3, #sec-apus .apuf-vista p{ margin:0; letter-spacing:0; }

/* ── Cabecera (740:489) · APROBADA (§5): se copia sin cambiar ─────────── */
/* Alto de cabecera (C4, 01/10): esta era la franja más baja de las cuatro —
   Lili la numeró entre las 1-7 que señaló como «frankenstein» en esta misma
   pantalla—, por su padding vertical de 10px contra los 16px de las demás.
   --ic-cab-h vive en #sec-infocon (assets/ui/informacion-contractual.css) y
   llega acá por herencia porque #sec-apus es un .ic-panel DENTRO de
   #sec-infocon (ver index.html); min-height la sube al mismo número que
   Dashboard, Contrato y Presupuesto sin tocar el padding/layout aprobado
   (§5, comentario de arriba). Cambiar la altura del bloque es editar esa
   única variable, no esta hoja. */
#sec-apus .apuf-cab{ background:var(--gray-1); border-radius:12px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 20px 10px 0; min-height:var(--ic-cab-h); box-sizing:border-box; }
#sec-apus .apuf-cab-tit{ padding-left:20px; min-width:0; display:flex; flex-direction:column; gap:4px; }
#sec-apus .apuf-cab-h{ font-size:24px; font-weight:700; line-height:28px; color:#111827; }            /* 740:494 · sin token */
#sec-apus .apuf-cab-sub{ font-size:14px; font-weight:400; line-height:22px; color:#4B5563; }          /* 740:495 · sin token */
#sec-apus .apuf-cab-div{ align-self:stretch; width:1px; flex:none;                                    /* 740:496 */
  background:repeating-linear-gradient(180deg,var(--gray-4) 0 2px,transparent 2px 4px); }
#sec-apus .apuf-cab-btns{ display:flex; align-items:center; gap:24px; flex:none; }                    /* 740:498 */
#sec-apus .apuf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px;
  border-radius:50px; border:1px solid transparent; background:none; font:inherit; font-size:14px; font-weight:500;
  line-height:normal; white-space:nowrap; cursor:pointer; }
#sec-apus .apuf-btn-pri{ background:var(--blue-300); border-color:var(--blue-300); color:var(--gray-1); }      /* 740:501 */
#sec-apus .apuf-btn-sec{ background:var(--blue-50); border-color:var(--blue-300); color:var(--blue-300); }     /* 740:499 */
#sec-apus .apuf-btn-lin{ background:var(--gray-1); border-color:var(--gray-3); color:var(--gray-6); }
#sec-apus .apuf-btn:hover{ filter:brightness(.95); }
/* El desplegable de acciones se ve como el botón del Figma, sin flecha */
#sec-apus .apuf-acc{ -webkit-appearance:none; appearance:none; text-align:center; text-align-last:center; }
#sec-apus .apuf-borrador{ font-size:12px; font-weight:700; color:var(--orange-400); white-space:nowrap; }

/* ── El cuerpo: barra, resumen y tabla en una tarjeta (740:507) ───────
   En el Figma son tres marcos pegados; en una sola tarjeta con separadores
   no se duplican los bordes donde se tocan. */
#sec-apus .apuf-panel{ background:var(--gray-1); border:1px solid var(--gray-3); border-radius:12px; overflow:hidden;
  box-shadow:0 4px 6px rgba(0,0,0,.05); }
#sec-apus .apuf-barra{ display:flex; align-items:center; gap:10px; padding:20px; border-bottom:1px solid var(--gray-3); } /* 740:508 */
#sec-apus .apuf-buscar{ display:inline-flex; align-items:center; gap:8px; width:276px; height:40px; flex:none;      /* 740:509 */
  padding:10px 12px; border:1px solid var(--blue-50); border-radius:6px; background:var(--gray-1); color:var(--gray-6); }
#sec-apus .apuf-buscar svg{ flex:none; }
#sec-apus .apuf-buscar input{ flex:1; min-width:0; border:0; background:none; font:inherit; font-size:13px; color:var(--gray-7); outline:none; }
#sec-apus .apuf-buscar input::placeholder{ color:#484B51; }                                            /* sin token */
#sec-apus .apuf-sel{ flex:1; min-width:0; height:40px; padding:8px 12px; border:1px solid var(--blue-50); border-radius:6px;  /* 740:518 */
  background:var(--gray-1); font:inherit; font-size:14px; line-height:20px; color:var(--gray-7); }

/* ── Resumen del APU (740:531) ──────────────────────────────────────── */
#sec-apus .apuf-resumen{ display:flex; align-items:center; gap:16px; padding:16px; border-bottom:1px solid var(--gray-3); }
#sec-apus .apuf-res-part{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px; }
#sec-apus .apuf-res-part>span{ font-size:11px; font-weight:700; color:var(--gray-5); }                  /* 740:533 · G01 */
#sec-apus .apuf-res-dato{ flex:none; width:150px; display:flex; flex-direction:column; gap:2px; }       /* 740:536 */
#sec-apus .apuf-res-corto{ width:100px; }
#sec-apus .apuf-res-dato>span{ font-size:11px; font-weight:700; color:var(--gray-5); white-space:nowrap; }  /* G01 */
#sec-apus .apuf-res-part .apuf-in, #sec-apus .apuf-res-dato .apuf-in{ font-size:16px; font-weight:700; color:var(--gray-7); }
#sec-apus .apuf-res-div{ align-self:center; width:1px; height:40px; flex:none; background:var(--gray-3); }  /* 740:535 */
#sec-apus .apuf-res-cu{ flex:none; width:180px; display:flex; flex-direction:column; align-items:center; gap:2px;  /* 740:547 */
  background:#E6F4FF; border-radius:8px; padding:12px 24px; text-align:center; }                      /* sin token */
#sec-apus .apuf-res-cu span{ font-size:11px; font-weight:700; color:var(--blue-400); white-space:nowrap; }
#sec-apus .apuf-res-cu b{ font-size:24px; font-weight:800; color:var(--blue-300); font-variant-numeric:tabular-nums; }

/* ── Tabla de recursos (740:550) ────────────────────────────────────── */
#sec-apus .apuf-tabla-card{ padding:16px; display:flex; flex-direction:column; gap:12px; }
#sec-apus .apuf-tabla-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#sec-apus .apuf-tabla-cab h3{ font-size:15px; font-weight:800; color:var(--gray-7); }                  /* 740:552 · G01 */
#sec-apus .apuf-tabla-cab span{ font-size:11px; font-weight:600; color:var(--gray-5); }                /* 740:553 */
#sec-apus .apuf-t{ width:100%; border-collapse:collapse; table-layout:fixed; }
#sec-apus .apuf-t .c-cod{ width:116px } #sec-apus .apuf-t .c-und{ width:88px } #sec-apus .apuf-t .c-cua{ width:88px }
#sec-apus .apuf-t .c-can{ width:98px } #sec-apus .apuf-t .c-pre{ width:108px } #sec-apus .apuf-t .c-par{ width:108px }
#sec-apus .apuf-t .c-acc{ width:40px }
/* text-transform:none explícito: una regla global de la plataforma pone los <th> en mayúsculas
   (medido: 7 «th» seguían en mayúsculas con solo quitar la línea del Figma). */
#sec-apus .apuf-t th{ font-size:11px; font-weight:700; color:var(--gray-6); text-align:left; text-transform:none; /* 740:555 · G01 */
  padding:8px; border-bottom:1px solid var(--gray-3); background:none; }
#sec-apus .apuf-t th:first-child{ padding-left:16px; }
#sec-apus .apuf-t td{ padding:6px 8px; border-bottom:1px solid var(--gray-3); vertical-align:middle; }  /* 740:576 */
#sec-apus .apuf-t td:first-child{ padding-left:16px; }
#sec-apus .apuf-t .apuf-n, #sec-apus .apuf-t th.apuf-n{ text-align:right; font-variant-numeric:tabular-nums; }
#sec-apus .apuf-t .apuf-cod .apuf-in{ font-size:12px; color:var(--gray-5); }                           /* 740:577 */
#sec-apus .apuf-t .apuf-desc .apuf-in{ font-size:13px; font-weight:500; color:var(--gray-7); }         /* 740:578 */
#sec-apus .apuf-t .apuf-und .apuf-in, #sec-apus .apuf-t td.apuf-n .apuf-in{ font-size:13px; color:var(--gray-6); }
#sec-apus .apuf-t .apuf-parcial{ font-size:13px; font-weight:600; color:var(--gray-7); }               /* 740:584 */
/* Grupo (740:564): franja celeste con su barra azul y «Añadir fila» */
#sec-apus .apuf-t .apuf-grupo td{ background:#F1FBFF; padding:0; border-bottom:0; border-left:3px solid var(--blue-200); } /* sin token */
/* El flex va en un div: un td en display:flex deja de ser celda y la franja se encogía a la primera columna. */
#sec-apus .apuf-grupo-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; }
#sec-apus .apuf-t .apuf-grupo span{ font-size:12px; font-weight:700; color:var(--blue-400); }          /* G01 */
#sec-apus .apuf-mas{ display:inline-flex; align-items:center; gap:4px;                                  /* 740:566 · G05 */
  border:1px solid var(--blue-200); border-radius:12px; padding:4px 8px; background:none;
  font:inherit; font-size:11px; font-weight:600; color:var(--blue-300); cursor:pointer; white-space:nowrap; }
#sec-apus .apuf-mas svg{ flex:none; }
#sec-apus .apuf-mas:hover{ background:var(--blue-50); }
/* Subtotal (740:568) */
#sec-apus .apuf-t .apuf-subtot td{ background:#FAFAFA; padding:10px 8px; font-size:12px; font-weight:700;  /* sin token · G01 */
  color:var(--gray-6); }
#sec-apus .apuf-t .apuf-subtot td:first-child{ padding-left:16px; }
#sec-apus .apuf-t .apuf-subtot td.apuf-n{ font-size:13px; color:var(--gray-7); padding-right:40px; }
#sec-apus .apuf-t .apuf-acc-col{ padding-right:16px; text-align:center; }
/* Quitar fila (740:586): el «•••» del Figma se lee como un menú y borraba
   la fila de un toque; ahora el icono dice lo que hace (G05, G19). */
#sec-apus .apuf-quitar{ display:inline-flex; align-items:center; justify-content:center; border:0; background:none;
  color:var(--gray-5); line-height:1; padding:4px; cursor:pointer; border-radius:6px; }
#sec-apus .apuf-quitar:hover{ background:#FDECEB; color:#A8293B; }                                    /* sin token */
/* Lo editable se ve como el texto del Figma y enseña su caja al pasar o al entrar */
#sec-apus .apuf-in{ width:100%; border:0; border-radius:6px; padding:4px; background:transparent; font:inherit;
  color:inherit; outline:none; }
#sec-apus .apuf-in:hover:not([readonly]){ background:#F8FAFC; }                                         /* sin token */
#sec-apus .apuf-in:focus:not([readonly]){ background:var(--gray-1); box-shadow:0 0 0 1px var(--blue-300); }  /* 740:581 */
#sec-apus .apuf-in-num{ text-align:right; font-variant-numeric:tabular-nums; }
#sec-apus .apuf-vacio{ padding:48px 24px; text-align:center; font-size:13px; color:var(--gray-6); }

@media (max-width:1100px){
  #sec-apus .apuf-cab{ flex-wrap:wrap; }
  #sec-apus .apuf-cab-div{ display:none; }
  #sec-apus .apuf-cab-btns{ width:100%; justify-content:flex-end; gap:12px; padding-left:20px; }
  #sec-apus .apuf-resumen{ flex-wrap:wrap; row-gap:12px; }
  #sec-apus .apuf-res-part{ flex-basis:100%; }
  #sec-apus .apuf-res-div{ display:none; }
  #sec-apus .apuf-res-cu{ margin-left:auto; }
}
@media (max-width:700px){
  #sec-apus .apuf-vista{ gap:16px; }
  #sec-apus .apuf-barra{ flex-wrap:wrap; }
  #sec-apus .apuf-buscar{ width:100%; }
  #sec-apus .apuf-tabla-card{ padding:16px 0; }
  #sec-apus .apuf-t{ table-layout:auto; min-width:820px; }
  #sec-apus .apuf-panel{ overflow-x:auto; }
}
@media (pointer:coarse){ #sec-apus .apuf-btn, #sec-apus .apuf-sel{ min-height:44px; } }

/* ── Teléfono (capa html.mv) · G04: nada por debajo de 12 px ──────────
   La capa móvil trata esta vista «en sitio» (movil/estilos.css, bloque
   «APU's · una hoja que SE EDITA»): columna fija y toque de 44. Aquí solo
   se suben los rótulos de 11 px, que en la mano no se leen. */
@media (max-width:900px){
  html.mv #sec-apus .apuf-res-part>span,
  html.mv #sec-apus .apuf-res-dato>span,
  html.mv #sec-apus .apuf-res-cu span,
  html.mv #sec-apus .apuf-tabla-cab span,
  html.mv #sec-apus .apuf-t th,
  html.mv #sec-apus .apuf-mas,
  html.mv #sec-apus .apuf-t .apuf-cod .apuf-in{ font-size:12px; }
}