/* ═══════════════════════════════════════════════════════════════════════
   PERSONAL (#sec-personal) · diseño del Figma «PERSONAL» (740:686)
   ───────────────────────────────────────────────────────────────────────
   Sale del bloque <style id="personal-figma"> de ui/figma (781453a), acotado a
   #sec-personal, con la norma aplicada encima (criterios-ui-esparq.md):
     G01 sin mayúsculas · G02 solo tokens (este archivo no tiene hex) ·
     G04 ≥ 10 px (≥ 12 a 446) · G05 botones pastilla con icono · G06 Excel del
     alto de los demás · G09 tarjeta blanca con sombra suave · G12 sin
     números delante de los títulos.
   Lo que main tiene y el Figma no dibujó se viste con los modelos de §1:
     pestañas Dashboard / Registro → las de Mano de Obra (784:3432), que
       siguen el modelo Cronograma (D-040);
     tareo de Bildin (#moTareo, lo pinta moPintar) → tarjeta de bloque como
       las cuatro del Figma, cifras en la tira de métricas de 740:966, tabla
       como la de dimensionamiento, chips de estado tenues (G02);
     Registro de tareo (#moRegistro) → Lista de registros (Registro de
       Inspecciones): título + contador, buscador, tabla con scroll interno.
   La cabecera lleva `section-header` para que el botón «Guía» (bloque global
   E140Guia) caiga dentro de ella: aquí se neutraliza el estilo de esa clase.
   ═══════════════════════════════════════════════════════════════════════ */

#sec-personal{
  --perf-sup: var(--bg-card, var(--gray-1));
  --perf-sombra: 0 1px 4px color-mix(in srgb, var(--gray-9) 8%, transparent);
  --perf-filete: var(--gray-3);
  --perf-suave: var(--gray-2);
}
#sec-personal .perf-vista{ display:flex; flex-direction:column; gap:16px; line-height:normal; color:var(--gray-7);
  font-family:'Inter',system-ui,sans-serif; font-variant-numeric:normal; }
#sec-personal .perf-vista *{ box-sizing:border-box; }
#sec-personal .perf-vista h2, #sec-personal .perf-vista h3, #sec-personal .perf-vista p{ margin:0; letter-spacing:0; }
#sec-personal svg{ flex:none; }

/* ── Cabecera (740:806) ── */
#sec-personal .perf-cab.section-header{ font-size:inherit !important; font-weight:inherit !important; letter-spacing:0 !important;
  text-transform:none !important; margin:0 !important; color:inherit; }
#sec-personal .perf-cab.section-header::before{ display:none !important; content:none !important; }
#sec-personal .perf-cab{ background:var(--perf-sup); border-radius:12px; box-shadow:var(--perf-sombra);
  display:flex; align-items:center; gap:16px; padding:10px 20px 10px 0; }
#sec-personal .perf-cab-tit{ flex:1 1 auto; min-width:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; }
#sec-personal .perf-cab-h{ font-size:24px !important; font-weight:700 !important; line-height:28px !important; color:var(--gray-9) !important; }
#sec-personal .perf-cab-sub{ font-size:14px !important; font-weight:400 !important; line-height:22px !important; color:var(--gray-6) !important; }
#sec-personal .perf-cab-sub b{ font-weight:600; color:var(--gray-7); }
#sec-personal .perf-cab-div{ align-self:stretch; width:1px; flex:none;                                   /* 740:813 */
  background:repeating-linear-gradient(180deg,var(--gray-4) 0 2px,transparent 2px 4px); }
/* 781:2399 · la descarga: pastilla con el degradé de la casa y su icono */
#sec-personal .perf-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:36px; padding:8px 18px; border:0; border-radius:100px; background:var(--degrade); color:var(--gray-1);
  font:700 14px/normal 'Inter',sans-serif; white-space:nowrap; cursor:pointer; }                /* 781:2401 */
#sec-personal .perf-btn svg{ width:16px; height:16px; }
#sec-personal .perf-btn:hover{ filter:brightness(.95); }
#sec-personal .perf-btn:focus-visible{ outline:2px solid var(--blue-300); outline-offset:2px; }
/* el botón «Guía» que el bloque E140Guia cuelga de la cabecera: pastilla
   secundaria del mismo alto, a la derecha de la descarga */
#sec-personal .perf-cab .e140-guia-btn{ margin-left:0; min-height:36px; padding:0 14px; font-size:13px; font-weight:600;
  color:var(--gray-7); border-color:var(--perf-filete); }
#sec-personal .perf-cab .e140-guia-btn:hover{ color:var(--blue-300); border-color:var(--blue-300); background:var(--blue-50); }

/* ── Pestañas: las de Mano de Obra (784:3432), en su barra blanca ── */
#sec-personal .perf-card-tabs{ display:flex; flex-direction:column; gap:16px; }
#sec-personal .presup-subtabs.perf-tabs{ display:flex; flex-wrap:nowrap; gap:0; margin:0; padding:8px 20px;
  border:0; border-radius:12px; overflow-x:auto; scrollbar-width:none; box-shadow:var(--perf-sombra);
  background:linear-gradient(var(--blue-50),var(--blue-50)) 20px calc(100% - 8px)/calc(100% - 40px) 2px no-repeat, var(--perf-sup); }
#sec-personal .perf-tabs::-webkit-scrollbar{ display:none; }
#sec-personal .perf-tabs .presup-subtab{ flex:none; padding:8px 12px; margin:0; border:0; background:none;
  border-radius:0; box-shadow:inset 0 -2px 0 var(--perf-filete); white-space:nowrap;
  font:400 14px/17px 'Inter',sans-serif; color:var(--gray-6); cursor:pointer; }
#sec-personal .perf-tabs .presup-subtab.active{ box-shadow:inset 0 -2px 0 var(--blue-300); color:var(--blue-300); font-weight:600; }
#sec-personal .perf-tabs .presup-subtab:not(.active):hover{ color:var(--gray-7); }
#sec-personal .perf-tabs .presup-subtab:focus-visible{ outline:2px solid var(--blue-300); outline-offset:-2px; }
#sec-personal #personalDashView{ display:flex; flex-direction:column; gap:16px; }
#sec-personal #personalDashView[style*="none"], #sec-personal #personalRegView[style*="none"]{ display:none !important; }

/* ── Las cuatro tarjetas, dos por fila (740:819) ── */
#sec-personal .perf-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#sec-personal .perf-card{ background:var(--perf-sup); border-radius:16px; padding:24px; box-shadow:var(--perf-sombra);
  display:flex; flex-direction:column; gap:16px; min-width:0; }
#sec-personal .perf-card-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#sec-personal .perf-card-cab h3{ font-size:16px !important; font-weight:700 !important; line-height:normal !important;  /* 740:824, sin mayúsculas */
  text-transform:none; color:var(--gray-7) !important; }
#sec-personal .perf-card-sub{ font-size:12px !important; font-weight:400 !important; line-height:1.4 !important;      /* 740:829 */
  color:var(--gray-6) !important; margin-top:-8px !important; }
/* G06 · el Excel de la tarjeta, del alto de los demás botones y con los verdes
   de tokens (el mismo de Mano de Obra, Adquisiciones y Presupuestos) */
#sec-personal .perf-excel{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px;
  padding:0 16px; border:1px solid var(--green-400); border-radius:100px; background:var(--green-50);
  font:600 13px/16px 'Inter',sans-serif; color:var(--green-500); cursor:pointer; white-space:nowrap; }
#sec-personal .perf-excel svg{ width:16px; height:16px; }
#sec-personal .perf-excel:hover{ background:var(--green-75); }
#sec-personal .perf-excel:focus-visible{ outline:2px solid var(--green-400); outline-offset:2px; }
#sec-personal .perf-chart{ position:relative; }
#sec-personal .perf-chart-evo{ height:220px; }
#sec-personal .perf-chart-hh{ height:150px; }
#sec-personal .perf-chart-dim{ height:170px; }
/* Leyendas propias (740:1027 y 740:913): las escribe renderPersonal() */
#sec-personal .perf-leyenda{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
#sec-personal .perf-leyenda:empty{ display:none; }
#sec-personal .perf-leyenda span{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--gray-6); white-space:nowrap; }
#sec-personal .perf-leyenda i{ width:10px; height:10px; border-radius:2px; flex:none; }

/* Tira de métricas del HH préstamo (740:966): el total delante */
#sec-personal .perf-metricas{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:8px 12px;
  background:var(--blue-50); border-radius:8px; padding:12px; }
#sec-personal .perf-metricas:empty{ display:none; }
#sec-personal .perf-metricas div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
#sec-personal .perf-metricas span{ font-size:11px; font-weight:600; color:var(--gray-6); white-space:nowrap; }
#sec-personal .perf-metricas b{ font-size:14px; font-weight:600; color:var(--gray-7); white-space:nowrap; }
#sec-personal .perf-metricas .total span{ color:var(--blue-400); }
#sec-personal .perf-metricas .total b{ font-size:18px; font-weight:700; color:var(--blue-300); }

/* Tabla de dimensionamiento (740:830) */
#sec-personal .perf-tabla-caja{ overflow-x:auto; }
#sec-personal .perf-tabla{ width:100%; border-collapse:separate; border-spacing:0; }
#sec-personal .perf-tabla th{ background:var(--perf-suave); font-size:12px !important; font-weight:700 !important;         /* 740:831 */
  letter-spacing:0 !important; text-transform:none !important; color:var(--gray-6) !important; text-align:left; padding:8px 12px; border:0; }
#sec-personal .perf-tabla th:first-child{ border-radius:4px 0 0 4px; }
#sec-personal .perf-tabla th:last-child{ border-radius:0 4px 4px 0; }
#sec-personal .perf-tabla th.c{ text-align:center; width:76px; } #sec-personal .perf-tabla th.d{ text-align:right; width:64px; }
#sec-personal .perf-tabla td.c, #sec-personal .perf-tabla td.d{ white-space:nowrap; }
#sec-personal .perf-tabla td{ padding:12px; font-size:13px; border:1px solid var(--perf-suave); border-top:0; background:var(--perf-sup); } /* 740:836 */
#sec-personal .perf-tabla tr td:first-child{ color:var(--gray-6); font-weight:500; }
#sec-personal .perf-tabla td.c{ text-align:center; font-weight:600; color:var(--gray-7); }
#sec-personal .perf-tabla td.d{ text-align:right; font-weight:700; color:var(--green-500); }
#sec-personal .perf-tabla tr.total td{ background:var(--blue-50); border-color:var(--blue-50); font-weight:700; color:var(--blue-400); } /* 740:846 */
#sec-personal .perf-tabla tr.total td:first-child{ color:var(--blue-400); border-radius:4px 0 0 4px; }
#sec-personal .perf-tabla tr.total td:last-child{ border-radius:0 4px 4px 0; }
#sec-personal .perf-tabla tr.actual td{ border-color:transparent; }                                                    /* 740:851 */
#sec-personal .perf-tabla td.mudo{ color:var(--gray-5); }
#sec-personal .perf-tabla td.alerta{ color:var(--orange-400); font-weight:700; }
/* «· del tareo»: de dónde sale la dotación real, en medio tono */
#sec-personal .perf-origen{ font-size:11px; font-weight:400; color:var(--gray-6); }

/* ═══ Tareo de Bildin (#moTareo) y Registro de tareo (#moRegistro) ═══
   El marcado lo escriben moPintar() y moPintarRegistro() —la tarjeta es un
   .chart-card—; aquí toma la forma de las tarjetas del Figma. Las reglas
   globales de .chart-title / .chart-subtitle llevan !important. */
#sec-personal .mo-zona:empty{ display:none; }
#sec-personal .mo-zona > .chart-card{ margin:0 !important; background:var(--perf-sup); border:0; border-radius:16px;
  padding:24px; box-shadow:var(--perf-sombra); }
#sec-personal .mo-zona > .chart-card > .chart-title{ display:block; margin:0 0 4px !important; font:700 16px/1.3 'Inter',sans-serif !important;
  letter-spacing:0 !important; text-transform:none !important; color:var(--gray-7) !important; }
#sec-personal .mo-zona > .chart-card > .chart-subtitle{ margin:0 0 4px !important; font:400 12px/1.4 'Inter',sans-serif !important;
  font-style:normal; color:var(--gray-6) !important; padding:0 !important; }
/* barra de estado: de cuándo es el dato y cuánto cubre */
#sec-personal .mo-zona .mo-sync{ gap:8px 12px; }
#sec-personal .mo-zona .mo-sync-d{ font-size:12px; color:var(--gray-6); }
/* chips de estado: fondo tenue y texto de color (G02) */
#sec-personal .mo-zona .mo-chip, #sec-personal .mo-zona .mo-et{ display:inline-flex; align-items:center; border:0; border-radius:12px;
  padding:4px 8px; font-size:12px; font-weight:500; white-space:nowrap; }
#sec-personal .mo-zona .mo-chip.ok, #sec-personal .mo-zona .mo-et.ok{ background:var(--green-50); color:var(--green-500); }
#sec-personal .mo-zona .mo-chip.avi, #sec-personal .mo-zona .mo-et.pen{ background:color-mix(in srgb, var(--orange-400) 12%, var(--gray-1)); color:var(--orange-500); }
#sec-personal .mo-zona .mo-chip.mal{ background:var(--red-50); color:var(--red-400); }
#sec-personal .mo-zona .mo-et.aus{ background:var(--perf-suave); color:var(--gray-6); }
/* avisos del tareo: el componente de aviso de la casa (tenue, con borde blanco);
   `.cr-aviso` solo tenía estilo dentro de Avance, aquí salía como texto suelto */
#sec-personal .mo-zona .cr-aviso{ display:block; margin-top:12px !important; padding:12px 16px; border-radius:12px;
  border:1px solid var(--gray-1); font-size:12px; line-height:18px; }
#sec-personal .mo-zona .cr-aviso b{ font-weight:700; }
#sec-personal .mo-zona .cr-aviso.warn{ background:color-mix(in srgb, var(--orange-400) 10%, var(--gray-1)); color:var(--orange-500); }
#sec-personal .mo-zona .cr-aviso.bad{ background:var(--red-50); color:var(--red-400); }
/* botones del tareo (Actualizar, semanas con tareo, Ver más, Quitar filtro):
   pastilla secundaria con icono. `.cr-btn` tampoco tenía estilo fuera de Avance. */
#sec-personal .mo-zona .cr-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px;
  margin:0; padding:0 14px; border:1px solid var(--perf-filete); border-radius:100px; background:var(--perf-sup);
  font:600 13px/16px 'Inter',sans-serif; color:var(--gray-7); cursor:pointer; white-space:nowrap; }
#sec-personal .mo-zona .cr-btn svg{ width:16px; height:16px; }
#sec-personal .mo-zona .cr-btn:hover{ border-color:var(--blue-300); color:var(--blue-300); background:var(--blue-50); }
#sec-personal .mo-zona .cr-btn:disabled{ opacity:.55; cursor:default; }
#sec-personal .mo-zona .cr-btn:focus-visible{ outline:2px solid var(--blue-300); outline-offset:2px; }
/* las tres cifras del tareo: la tira de métricas del HH préstamo (G08),
   repartidas a lo ancho (G20) */
#sec-personal .mo-zona .mini-row{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)) !important;
  gap:8px 24px !important; margin:12px 0 4px !important; padding:12px; border-radius:8px; background:var(--blue-50); }
/* G06 · el «Excel» que el inyector global pone sobre la tabla del tareo: del
   alto de los demás botones, pastilla verde de tokens (como Presupuestos) */
#sec-personal .tbl-tools{ margin:12px 0 8px; }
#sec-personal .tbl-xlsx-btn{ height:36px; padding:0 16px; gap:6px; border-radius:100px; font-size:13px; font-weight:600;
  color:var(--green-500); background:var(--green-50); border:1px solid var(--green-400); }
#sec-personal .tbl-xlsx-btn:hover{ background:var(--green-75); }
#sec-personal .tbl-xlsx-btn svg{ width:16px; height:16px; }
#sec-personal .mo-zona .mini{ border:0; background:none; padding:0; box-shadow:none; min-width:0; }
#sec-personal .mo-zona .mini-lbl{ font-size:11px !important; font-weight:600 !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--gray-6); }
#sec-personal .mo-zona .mini-val{ font-size:18px; font-weight:700; color:var(--blue-300); }
/* categorías y semanas con tareo */
#sec-personal .mo-zona .mo-cat{ border-color:var(--perf-filete); font-size:12px; }
#sec-personal .mo-zona .mo-cat b{ color:var(--blue-300); }
#sec-personal .mo-zona .mo-cat em, #sec-personal .mo-zona .mo-donde-no em{ font-size:12px; color:var(--gray-6); }
#sec-personal .mo-zona .mo-donde-no{ border-color:var(--perf-filete); font-size:12px; color:var(--gray-6); }
#sec-personal .mo-zona .mo-vacio{ border:1px dashed var(--perf-filete); border-radius:12px; font-size:13px; color:var(--gray-6); }
/* las tablas del tareo: la de dimensionamiento (740:830), sin mayúsculas */
#sec-personal .mo-zona table.mo-tab{ font-size:13px; }
#sec-personal .mo-zona table.mo-tab th, #sec-personal .mo-zona table.mo-sub th{ background:var(--perf-suave); font-size:12px !important;
  font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--gray-6) !important;
  padding:8px 12px; border-bottom:0; }
#sec-personal .mo-zona table.mo-tab td{ padding:10px 12px; border-bottom:1px solid var(--perf-suave); color:var(--gray-7); }
#sec-personal .mo-zona tr.mo-fila:hover{ background:var(--blue-50); }
#sec-personal .mo-zona tr.mo-fila.sinres td,
#sec-personal .mo-zona table.mo-reg tr.sinres td{ background:color-mix(in srgb, var(--orange-400) 8%, var(--gray-1)); color:var(--orange-500); }
#sec-personal .mo-zona .mo-cod{ font-size:11px; color:var(--gray-6); }
/* Registro de tareo: buscador en pastilla y tabla con scroll interno (G21) */
#sec-personal .mo-zona .mo-busca{ flex-wrap:wrap; }
#sec-personal .mo-zona .mo-busca input{ min-height:36px; padding:0 16px; border:1px solid var(--perf-filete); border-radius:100px;
  background:var(--perf-sup); font:400 13px/16px 'Inter',sans-serif; color:var(--gray-9); }
#sec-personal .mo-zona .mo-busca input:focus{ border-color:var(--blue-300); box-shadow:0 0 0 2px var(--blue-50); }
#sec-personal .mo-zona .mo-tabla-alta{ border-color:var(--perf-filete); border-radius:8px; }
#sec-personal .mo-zona table.mo-reg thead th{ background:var(--perf-suave); }
#sec-personal .mo-zona table.mo-reg td{ font-size:12px; }
#sec-personal .mo-zona table.mo-reg th.hh, #sec-personal .mo-zona table.mo-reg td.hh{ background:var(--blue-50); }
#sec-personal .mo-zona table.mo-reg td.hh .cero{ color:var(--gray-6); }
#sec-personal .mo-zona table.mo-reg tfoot td{ background:var(--blue-50); color:var(--blue-400); }
#sec-personal .mo-zona .mo-pie{ font-size:12px; color:var(--gray-6); }

/* ── Oscuro: superficies en --bg-card, textos en --text ── */
:root[data-theme="dark"] #sec-personal{ --perf-suave: color-mix(in srgb, var(--text) 6%, transparent);
  --perf-filete: color-mix(in srgb, var(--text) 16%, transparent); }
:root[data-theme="dark"] #sec-personal .perf-cab-h,
:root[data-theme="dark"] #sec-personal .perf-card-cab h3,
:root[data-theme="dark"] #sec-personal .perf-metricas b,
:root[data-theme="dark"] #sec-personal .perf-tabla td.c,
:root[data-theme="dark"] #sec-personal .mo-zona > .chart-card > .chart-title,
:root[data-theme="dark"] #sec-personal .mo-zona table.mo-tab td{ color:var(--text) !important; }
:root[data-theme="dark"] #sec-personal .perf-cab-sub,
:root[data-theme="dark"] #sec-personal .perf-card-sub,
:root[data-theme="dark"] #sec-personal .perf-leyenda span,
:root[data-theme="dark"] #sec-personal .perf-metricas span,
:root[data-theme="dark"] #sec-personal .perf-tabla th,
:root[data-theme="dark"] #sec-personal .perf-tabla tr td:first-child,
:root[data-theme="dark"] #sec-personal .mo-zona > .chart-card > .chart-subtitle,
:root[data-theme="dark"] #sec-personal .mo-zona .mo-sync-d,
:root[data-theme="dark"] #sec-personal .mo-zona .mini-lbl{ color:var(--text-muted) !important; }
:root[data-theme="dark"] #sec-personal .perf-metricas,
:root[data-theme="dark"] #sec-personal .perf-tabla tr.total td,
:root[data-theme="dark"] #sec-personal .mo-zona .mini-row{ background:color-mix(in srgb, var(--blue-300) 16%, var(--bg-card)); }

@media (max-width:1100px){
  #sec-personal .perf-grid{ grid-template-columns:minmax(0,1fr); }
  #sec-personal .perf-cab{ flex-wrap:wrap; }
  #sec-personal .perf-cab-div{ display:none; }
  #sec-personal .perf-btn{ margin-left:20px; }
}
@media (max-width:700px){
  #sec-personal .perf-card, #sec-personal .mo-zona > .chart-card{ padding:16px; }
  #sec-personal .perf-metricas div{ flex:1 1 30%; }
}
/* G04 · en el teléfono nada por debajo de 12 */
@media (max-width:900px){
  #sec-personal .perf-cab-h{ font-size:20px !important; line-height:24px !important; }
  #sec-personal .perf-leyenda span, #sec-personal .perf-metricas span, #sec-personal .perf-origen,
  #sec-personal .mo-zona .mini-lbl, #sec-personal .mo-zona .mo-cod,
  #sec-personal .mo-zona .mo-cat em, #sec-personal .mo-zona .mo-donde-no em{ font-size:12px !important; }
}
@media (pointer:coarse){
  #sec-personal .perf-btn, #sec-personal .perf-excel, #sec-personal .mo-zona .cr-btn, #sec-personal .tbl-xlsx-btn{ min-height:44px; }
  #sec-personal .perf-tabs .presup-subtab{ min-height:44px; }
}

/* Capa móvil · las tarjetas que compone movil/hojas.js (componente común, no se
   toca) con la tabla del tareo: rótulos a 12 px y sin mayúsculas (G01, G04) */
html.mv #sec-personal .mv-eyebrow,
html.mv #sec-personal .mv-calc-cuenta,
html.mv #sec-personal .mv-calc-cuenta b,
html.mv #sec-personal .mv-calc-meta{ font-size:12px !important; text-transform:none !important; letter-spacing:0 !important; }
/* la capa móvil aplana las .chart-card; la del tareo es tarjeta de bloque (G09) */
html.mv #sec-personal .mo-zona > .chart-card{ background:var(--perf-sup) !important; border-radius:16px !important;
  padding:16px !important; box-shadow:var(--perf-sombra) !important; }