/* ═══════════════════════════════════════════════════════════════════════
   MANO DE OBRA (#sec-mo) · diseño del Figma «MANO DE OBRA» (784:3295)
   ───────────────────────────────────────────────────────────────────────
   Sale del bloque <style id="mo-figma"> de ui/figma (781453a), acotado a
   #sec-mo, 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 · G19/G23 subtítulo largo plegado con «Ver más».
   §5 APROBADO y NO se toca: las gráficas del Dashboard y el tipo de indicador
   de «Estado de mano de obra» (la banda de seis cifras con filete punteado),
   y el selector «Semana» de Registros (#moFSemana).
   Lo que main tiene y el Figma no dibujó se viste con el mismo lenguaje:
     fila «Soporte» → variante de la fila de la tabla, en medio tono por
     color (no por opacity, G03); nota del saldo total → texto de pie;
     Registro semanal (formato) → tokens, botones pastilla y el foco estándar
     de campo (G02: nada de marino ni de amarillo).
   La vista es modelo de «Encabezado de vista» (§1): .mof-cab es la plantilla.
   ═══════════════════════════════════════════════════════════════════════ */

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

/* ── Cabecera · 784:3414 ──
   Lleva también `section-header` (el recorrido guiado la busca por esa clase):
   se neutraliza el estilo global de la clase —tamaño, peso y margen con
   !important, y la barra azul de ::before—. */
#sec-mo .mof-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-mo .mof-cab.section-header::before{ display:none !important; content:none !important; }
/* 784:3415 · tarjeta blanca propia, radio 12; la sombra suave de G09 */
#sec-mo .mof-cab{ display:flex; align-items:center; gap:19px; padding:10px 20px 10px 0;
  background:var(--mof-sup); border-radius:12px; box-shadow:var(--mof-sombra); }
#sec-mo .mof-cab-tit{ flex:1 1 320px; min-width:0; padding-left:20px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
#sec-mo .mof-cab-h{ margin:0; font:700 24px/28px 'Inter',sans-serif; color:var(--gray-9); }      /* 784:3420 */
#sec-mo .mof-cab-sub{ margin:0; font:400 14px/22px 'Inter',sans-serif; color:var(--gray-6); }    /* 784:3421 */
#sec-mo .mof-cab-sub b{ font-weight:600; color:var(--gray-7); }
/* G23 · dos líneas y «Ver más». La clase .abierto la pone moSubAlternar(). */
#sec-mo .mof-cab-sub{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
#sec-mo .mof-cab-sub.abierto{ display:block; -webkit-line-clamp:unset; line-clamp:none; overflow:visible; }
#sec-mo .mof-sub-mas{ display:inline-flex; align-items:center; gap:4px; margin:0; padding:2px 0; border:0; background:none;
  font:600 12px/16px 'Inter',sans-serif; color:var(--blue-300); cursor:pointer; }
#sec-mo .mof-sub-mas[hidden]{ display:none; }
#sec-mo .mof-sub-mas svg{ width:14px; height:14px; transition:transform .15s ease; }
#sec-mo .mof-sub-mas[aria-expanded="true"] svg{ transform:rotate(180deg); }
#sec-mo .mof-sub-mas:focus-visible{ outline:2px solid var(--blue-300); outline-offset:2px; border-radius:4px; }
/* 784:3422 · el filete entre el título y las dos cifras */
#sec-mo .mof-cab-div{ align-self:stretch; flex:0 0 1px; margin:0;
  background:repeating-linear-gradient(to bottom,var(--gray-4) 0 2px,transparent 2px 4px); }
/* Las dos cifras (784:3424/3427): caja de radio 12 con trazo por dentro, rótulo
   y cifra debajo; el monto va en medio tono. Las arma renderMO() (moCifra). */
/* las cifras no ceden ante el subtítulo de main, que es más largo que el del
   frame: el subtítulo se pliega (G23) y las cifras se leen enteras */
#sec-mo .mof-cab-cifras{ flex:0 0 auto; min-width:0; display:flex; justify-content:flex-end; gap:16px; }
#sec-mo .mof-cab-cifras:empty{ display:none; }
#sec-mo .mof-cifra{ flex:0 0 auto; min-width:0; display:flex; flex-direction:column; gap:4px; padding:12px;
  border-radius:12px; background:none; box-shadow:inset 0 0 0 1px var(--mof-filete); white-space:nowrap; overflow:hidden; }
/* sin fondo propio: el de la cabecera. Con fondo + trazo contaba como tarjeta
   dentro de la tarjeta de cabecera (G11, checkNestedCards) */
#sec-mo .mof-cifra > div{ overflow:hidden; text-overflow:ellipsis; }
#sec-mo .mof-cifra:first-child{ min-width:200px; }                                        /* 784:3424 */
#sec-mo .mof-cifra:last-child{ min-width:200px; }                                         /* 784:3427 */
#sec-mo .mof-cifra-l{ font:600 12px/15px 'Inter',sans-serif; color:var(--gray-6); }       /* 784:3425, sin mayúsculas (G01) */
#sec-mo .mof-cifra-v{ font:700 15px/18px 'Inter',sans-serif; color:var(--gray-7); }       /* 784:3429 */
#sec-mo .mof-cifra:first-child .mof-cifra-v b{ color:var(--blue-300); }                   /* 784:3426 */
#sec-mo .mof-cifra-v b{ font-weight:700; }
#sec-mo .mof-cifra-v span{ font-weight:500; color:var(--gray-6); }

/* ── Tarjetas y pestañas ──
   Los bloques viven dentro de #moDashView para que setMoView() los oculte
   juntos, así que .mof-card-tabs no pinta nada: la primera tarjeta la forman
   la tira de pestañas y la caja del estado (o el Registro). */
#sec-mo .mof-card{ background:var(--mof-sup); border-radius:12px; box-shadow:var(--mof-sombra); }
#sec-mo .mof-card-tabs{ background:none; box-shadow:none; border-radius:0; padding:0; }
/* 784:3432 · 8 arriba y abajo, 20 a los lados; la raya de 2 (784:3433). Doble
   clase para ganarle a la regla global #sec-mo .presup-subtabs de main. */
#sec-mo .presup-subtabs.mof-tabs{ display:flex; flex-wrap:nowrap; gap:0; margin:0; padding:8px 20px;
  border:0; border-radius:12px 12px 0 0; overflow-x:auto; scrollbar-width:none;
  background:linear-gradient(var(--blue-50),var(--blue-50)) 20px calc(100% - 8px)/calc(100% - 40px) 2px no-repeat, var(--mof-sup); }
#sec-mo .mof-tabs::-webkit-scrollbar{ display:none; }
/* 784:3434/3437 · 14 regular, 8/12, raya de 2 por dentro */
#sec-mo .mof-tabs .presup-subtab{ flex:none; padding:8px 12px; margin:0; border:0; background:none;
  border-radius:0; box-shadow:inset 0 -2px 0 var(--mof-filete); white-space:nowrap;
  font:400 14px/17px 'Inter',sans-serif; color:var(--gray-6); cursor:pointer; }                  /* 784:3439 */
#sec-mo .mof-tabs .presup-subtab.active{ box-shadow:inset 0 -2px 0 var(--blue-300); color:var(--blue-300); font-weight:600; }   /* 784:3436 */
#sec-mo .mof-tabs .presup-subtab:not(.active):hover{ color:var(--gray-7); }
#sec-mo .mof-tabs .presup-subtab:focus-visible{ outline:2px solid var(--blue-300); outline-offset:-2px; }
/* el Registro cierra la tarjeta como la caja del estado en el Dashboard */
#sec-mo #moRegView{ background:var(--mof-sup); border-radius:0 0 12px 12px; padding:8px 20px 20px; }
/* 784:3431 · 8 bajo las pestañas, la caja centrada (10 a cada lado) y 6 abajo */
#sec-mo .mof-estado-caja{ padding:8px 10px 6px; background:var(--mof-sup); border-radius:0 0 12px 12px; }

/* ── Banda de estado · 784:3441 · §5: el tipo de indicador se conserva ── */
#sec-mo .mof-estado{ margin:0; padding:20px; border:0; box-shadow:inset 0 0 0 1px var(--mof-suave); border-radius:16px; }
#sec-mo .mof-estado-h{ margin-bottom:16px; font:700 13px/16px 'Inter',sans-serif;
  letter-spacing:0; text-transform:none; color:var(--gray-6); }                              /* 784:3442, sin mayúsculas */
#sec-mo .mof-minis{ display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:0 !important; margin:0 !important; }
/* 784:3447 · «Line 12»: 1 px punteado 2-2 y 44.8 de alto, con 16 a cada lado */
#sec-mo .mof-minis .mini{ min-height:44.83px; padding:0 16px; border:0; border-radius:0; box-shadow:none;
  background:repeating-linear-gradient(180deg,var(--gray-4) 0 2px,transparent 2px 4px) left top/1px 44.83px no-repeat; }
#sec-mo .mof-minis .mini:first-child{ padding-left:0; background:none; }
/* el rótulo global de KPI fija tamaño, tracking y mayúsculas por variable y con
   !important: se ajustan las variables y se gana con la misma arma */
#sec-mo .mof-minis{ --kpi-label-size:12px; --kpi-label-ls:0; }
#sec-mo .mof-minis .mini-lbl{ font:600 12px/15px 'Inter',sans-serif !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--gray-6) !important; }                         /* 784:3445 */
#sec-mo .mof-minis .mini-val{ margin-top:4px; font:700 18px/22px 'Inter',sans-serif;
  white-space:nowrap; color:var(--gray-7); }                                                 /* 784:3450 */
#sec-mo .mof-minis .mini-val.v-blue{ color:var(--blue-300); }                                /* 784:3446 */
#sec-mo .mof-minis .mini-val.v-ok{ color:var(--green-500); }                                 /* 784:3454 */

/* ── Bloques con gráfico o tabla · 784:3467/3528/3574 (§5) ── */
#sec-mo .mof-bloque{ margin:12px 0 0; padding:24px; border-radius:16px;
  box-shadow:var(--mof-sombra), inset 0 0 0 1px var(--mof-filete); }
#sec-mo .mof-b-cab{ display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:16px; }                                          /* 784:3468 */
#sec-mo .mof-b-cab h3{ margin:0; font:700 16px/19px 'Inter',sans-serif; color:var(--gray-7); }  /* 784:3470 */
#sec-mo .mof-b-cab p{ margin:4px 0 0; font:400 12px/15px 'Inter',sans-serif; color:var(--gray-6); } /* 784:3471 */
#sec-mo .mof-par .mof-b-cab h3{ font-size:14px; line-height:17px; }                       /* 784:3529 */
#sec-mo .mof-leyenda{ display:flex; align-items:center; gap:16px;
  font:400 11px/13px 'Inter',sans-serif; color:var(--gray-6); }                            /* 784:3472 */
#sec-mo .mof-leyenda span{ display:inline-flex; align-items:center; gap:6px; }
#sec-mo .mof-lg-barra{ width:12px; height:12px; border-radius:2px; background:var(--blue-300); }  /* 784:3474 */
#sec-mo .mof-lg-punto{ width:8px; height:8px; border-radius:50%; background:var(--green-500); }   /* 784:3477 */
#sec-mo .mof-grafico{ position:relative; height:260px; }                                   /* 784:3479 */
#sec-mo .mof-grafico-alto{ height:300px; }
#sec-mo .mof-par{ display:flex; gap:20px; margin-top:12px; }                              /* 784:3527 */
#sec-mo .mof-par > .mof-bloque{ flex:1 1 0; min-width:0; margin:0; }

/* ── Excel · G06: del alto de los demás botones, pastilla verde de tokens,
   como en Adquisiciones y Presupuestos ── */
#sec-mo .mof-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-mo .mof-excel svg{ width:16px; height:16px; }
#sec-mo .mof-excel:hover{ background:var(--green-75); }
#sec-mo .mof-excel:focus-visible{ outline:2px solid var(--green-400); outline-offset:2px; }

/* G06 · si el inyector global pone su «Excel» sobre una tabla de la vista, del
   alto de los demás botones y con los verdes de tokens */
#sec-mo .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-mo .tbl-xlsx-btn svg{ width:16px; height:16px; }

/* ── Tabla del detalle · 784:3582 ── */
#sec-mo .mof-tabla{ overflow:auto; }
#sec-mo .mof-tabla table{ width:100%; border-collapse:collapse; }
/* 784:3583 · cabecera suave, filete punteado. `text-transform:none` con
   !important porque una regla global pone los <th> en mayúsculas. */
#sec-mo .mof-tabla th{ padding:12px 8px; background:var(--mof-suave); border:0;
  border-bottom:1px dashed var(--gray-4); font:700 12px/15px 'Inter',sans-serif !important;
  letter-spacing:0 !important; text-transform:none !important; color:var(--gray-6) !important; text-align:left;
  white-space:nowrap; }
/* 784:3592 · filas de 44: letra de 13 en medio tono y el mismo filete punteado */
#sec-mo .mof-tabla td{ padding:14px 8px 13px; background:var(--mof-sup); border:0;
  border-bottom:1px dashed var(--gray-4); font:400 13px/16px 'Inter',sans-serif; color:var(--gray-6);
  white-space:nowrap; font-variant-numeric:tabular-nums; }
#sec-mo .mof-tabla th:first-child, #sec-mo .mof-tabla td:first-child{ padding-left:16px; }
#sec-mo .mof-tabla th:last-child, #sec-mo .mof-tabla td:last-child{ padding-right:16px; }
#sec-mo .mof-tabla td:first-child{ font-weight:700; color:var(--gray-7); }               /* 784:3593 */
#sec-mo .mof-tabla th:not(:first-child),
#sec-mo .mof-tabla td:not(:first-child){ text-align:right; }
/* La fila del total la marca el motor con .row-total (784:3628); el estilo
   global de tr.row-total td pinta su fondo con !important */
#sec-mo .mof-tabla tr.row-total td{ border-bottom:0; background:var(--blue-50) !important; color:var(--gray-7);
  font-weight:700; }
/* La fila «Soporte» (capataces sin bolsa propia) que main escribe con lo que
   publica Dimensionamiento: fila secundaria entre las cuadrillas y el TOTAL,
   en el fondo suave y con la nota en medio tono. Contraste por color y peso,
   no por opacity (G03). */
#sec-mo .mof-tabla tr.row-soporte td{ background:var(--mof-suave); }
#sec-mo .mof-tabla tr.row-soporte td:first-child{ font-weight:600; color:var(--gray-7); }
#sec-mo .mof-tabla .mof-sop-nota{ font-weight:400; color:var(--gray-6); }
/* El «por qué» del saldo total en guion: el title de la celda no existe en un
   teléfono, así que se escribe debajo (G19) */
#sec-mo .mof-nota{ margin:12px 0 0; font:400 12px/18px 'Inter',sans-serif; color:var(--gray-6); }
#sec-mo .mof-nota[hidden]{ display:none; }

/* ═══ Registro semanal (formato «Resumen costo de planilla por cuadrillas») ═══
   El marcado y la lógica son de main (renderMoRegistro). Aquí solo cambia la
   piel: tokens en lugar del marino, el foco estándar de campo en lugar del
   amarillo, rótulos en tipo oración y letra de 10 px o más. El selector
   «Semana» (#moFSemana, .mo-f-sel) está aprobado (§5): no se toca. */
#sec-mo .mo-tools{ align-items:flex-end; gap:12px; margin:8px 0 14px; }
#sec-mo .mo-f-lbl{ font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--gray-6); }
#sec-mo .mo-cont{ font-size:12px; color:var(--gray-6); }
#sec-mo .mo-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px;
  padding:0 16px; border:1px solid var(--blue-300); border-radius:100px; background:var(--blue-300); color:var(--gray-1);
  font:600 13px/16px 'Inter',sans-serif; }
#sec-mo .mo-btn svg{ width:16px; height:16px; }
#sec-mo .mo-btn:hover{ filter:none; background:var(--blue-400); border-color:var(--blue-400); }
#sec-mo .mo-btn.gris{ background:var(--mof-sup); color:var(--gray-7); border-color:var(--mof-filete); }
#sec-mo .mo-btn.gris:hover{ background:var(--blue-50); border-color:var(--blue-300); color:var(--blue-300); }
#sec-mo .mo-btn.peligro{ color:var(--red-400); border-color:var(--red-75); }
#sec-mo .mo-btn.peligro:hover{ background:var(--red-50); border-color:var(--red-400); color:var(--red-400); }
#sec-mo .mo-btn.sm{ min-height:32px; padding:0 12px; font-size:12px; }
#sec-mo .mo-btn:focus-visible, #sec-mo .mo-ra:focus-visible{ outline:2px solid var(--blue-300); outline-offset:2px; }
#sec-mo .mo-draft{ font-size:12px; color:var(--orange-500); background:color-mix(in srgb, var(--orange-400) 10%, var(--gray-1));
  border-color:color-mix(in srgb, var(--orange-400) 30%, var(--gray-1)); }
#sec-mo .mo-chip-ok{ font-size:12px; color:var(--green-500); background:var(--green-50); border-color:var(--green-75); }
/* el marco del formato: cabecera en azul de la casa y no en marino */
#sec-mo .mo-doc{ border-color:var(--mof-filete); border-radius:12px; background:var(--mof-sup); }
#sec-mo .mo-doc-cab{ background:var(--blue-50); border-bottom:1px solid var(--mof-filete); }
#sec-mo .mo-doc-t{ font-size:14px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--gray-9); }
#sec-mo .mo-doc-m{ font-size:12px; color:var(--gray-6); }
#sec-mo .mo-doc-obra{ background:var(--mof-sup); border-bottom-color:var(--mof-filete); font-size:12px; color:var(--gray-7); }
#sec-mo .mo-lock{ background:var(--blue-50); border-bottom-color:var(--mof-filete); font-size:12px; color:var(--gray-7); }
#sec-mo .mo-lock svg{ color:var(--blue-300); }
#sec-mo .mo-tbl{ font-size:12px; }
#sec-mo .mo-tbl th{ background:var(--mof-suave) !important; color:var(--gray-6) !important; font-size:11px !important;
  font-weight:700; text-transform:none !important; letter-spacing:0 !important; border-bottom-color:var(--mof-filete); }
#sec-mo .mo-tbl th.mo-th-calc{ background:var(--blue-50) !important; color:var(--gray-9) !important; }
#sec-mo .mo-tbl td{ border-bottom-color:var(--mof-filete); color:var(--gray-7); }
#sec-mo .mo-tbl td.mo-td-n{ font-size:11px; color:var(--gray-6); }
#sec-mo .mo-tbl tbody tr:hover td{ background:var(--mof-suave); }
#sec-mo .mo-tbl td.mo-td-calc{ font-size:11px; background:var(--blue-50); color:var(--gray-9); }
#sec-mo .mo-vacio{ font-size:12px; font-style:normal; color:var(--gray-6); }
#sec-mo .mo-in{ border-color:var(--mof-filete); border-radius:6px; background:var(--mof-sup); font-size:12px; color:var(--gray-9); }
#sec-mo .mo-in.num, #sec-mo .mo-in.cod{ font-size:11px; }
#sec-mo .mo-in:hover{ border-color:var(--gray-4); }
/* G02 · el foco es el estándar de campo, no un fondo amarillo */
#sec-mo .mo-in:focus{ border-color:var(--blue-300); background:var(--mof-sup); box-shadow:0 0 0 2px var(--blue-50); }
#sec-mo .mo-ro, #sec-mo .mo-ro.num{ font-size:11px; }
/* + / − : el mismo componente, con significado claro (G05) */
#sec-mo .mo-ra{ width:28px; height:28px; border-radius:100px; }
#sec-mo .mo-ra svg{ width:14px; height:14px; }
#sec-mo .mo-ra.mas{ border:1px solid var(--blue-300); background:var(--blue-300); color:var(--gray-1); }
#sec-mo .mo-ra.mas:hover{ filter:none; background:var(--blue-400); }
#sec-mo .mo-ra.menos{ border:1px solid var(--red-75); background:var(--mof-sup); color:var(--red-400); }
#sec-mo .mo-ra.menos:hover{ background:var(--red-50); }
#sec-mo .mo-tbl tfoot .mo-total td{ background:var(--blue-50); border-top-color:var(--mof-filete); }
#sec-mo .mo-tbl tfoot .mo-total td:first-child{ font-size:12px; letter-spacing:0; text-transform:none; color:var(--gray-7); }
#sec-mo .mo-tbl tfoot .mo-total td.mo-td-calc{ background:var(--blue-50); }
#sec-mo .mo-tbl tfoot .mo-total td.mo-td-calc.fuerte{ color:var(--blue-400); font-size:12px; }
#sec-mo .mo-pie{ border-top-color:var(--mof-filete); font-size:12px; color:var(--gray-6); }

/* ── Oscuro: las superficies siguen --bg-card y los textos --text ── */
:root[data-theme="dark"] #sec-mo{ --mof-suave: color-mix(in srgb, var(--text) 6%, transparent);
  --mof-filete: color-mix(in srgb, var(--text) 16%, transparent); }
:root[data-theme="dark"] #sec-mo .mof-cab-h,
:root[data-theme="dark"] #sec-mo .mof-cab-sub b,
:root[data-theme="dark"] #sec-mo .mof-cifra-v,
:root[data-theme="dark"] #sec-mo .mof-b-cab h3,
:root[data-theme="dark"] #sec-mo .mof-minis .mini-val,
:root[data-theme="dark"] #sec-mo .mof-tabla td:first-child,
:root[data-theme="dark"] #sec-mo .mof-tabla tr.row-total td,
:root[data-theme="dark"] #sec-mo .mo-doc-t,
:root[data-theme="dark"] #sec-mo .mo-tbl td,
:root[data-theme="dark"] #sec-mo .mo-in{ color:var(--text); }
:root[data-theme="dark"] #sec-mo .mof-cab-sub,
:root[data-theme="dark"] #sec-mo .mof-cifra-l,
:root[data-theme="dark"] #sec-mo .mof-cifra-v span,
:root[data-theme="dark"] #sec-mo .mof-b-cab p,
:root[data-theme="dark"] #sec-mo .mof-leyenda,
:root[data-theme="dark"] #sec-mo .mof-estado-h,
:root[data-theme="dark"] #sec-mo .mof-minis .mini-lbl,
:root[data-theme="dark"] #sec-mo .mof-tabla th,
:root[data-theme="dark"] #sec-mo .mof-tabla td,
:root[data-theme="dark"] #sec-mo .mof-nota,
:root[data-theme="dark"] #sec-mo .mo-pie{ color:var(--text-muted) !important; }
:root[data-theme="dark"] #sec-mo .mof-tabla tr.row-total td,
:root[data-theme="dark"] #sec-mo .mo-doc-cab,
:root[data-theme="dark"] #sec-mo .mo-lock,
:root[data-theme="dark"] #sec-mo .mo-tbl td.mo-td-calc,
:root[data-theme="dark"] #sec-mo .mo-tbl th.mo-th-calc,
:root[data-theme="dark"] #sec-mo .mo-tbl tfoot .mo-total td{ background:color-mix(in srgb, var(--blue-300) 16%, var(--bg-card)) !important; }

@media (max-width:1100px){
  #sec-mo .mof-cab{ flex-wrap:wrap; }
  #sec-mo .mof-cab-div{ display:none; }
  #sec-mo .mof-cab-cifras{ flex:1 1 100%; padding:0 0 0 20px; justify-content:flex-start; }
  #sec-mo .mof-minis{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px 0 !important; }
  #sec-mo .mof-minis .mini:nth-child(3n+1){ padding-left:0; background:none; }
  #sec-mo .mof-par{ flex-wrap:wrap; gap:12px; }
  #sec-mo .mof-par > .mof-bloque{ flex:1 1 100%; }
}
@media (max-width:820px){
  #sec-mo .mof-minis{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #sec-mo .mof-minis .mini:nth-child(3n+1){ padding-left:16px;
    background:repeating-linear-gradient(180deg,var(--gray-4) 0 2px,transparent 2px 4px) left top/1px 44.83px no-repeat; }
  #sec-mo .mof-minis .mini:nth-child(2n+1){ padding-left:0; background:none; }
  #sec-mo .mof-cab-cifras{ flex-direction:column; }
  #sec-mo .mof-cifra:first-child, #sec-mo .mof-cifra:last-child{ flex:none; }
  #sec-mo .mof-bloque{ margin:12px 0 0; padding:16px; }
  #sec-mo .mof-estado{ padding:16px; }
  #sec-mo .mof-tabla table{ min-width:760px; }
  #sec-mo #moRegView{ padding:8px 12px 16px; }
}
/* G04 · en el teléfono nada por debajo de 12 */
@media (max-width:900px){
  #sec-mo .mof-leyenda{ font-size:12px; line-height:15px; flex-wrap:wrap; }
  #sec-mo .mof-cab-h{ font-size:20px; line-height:24px; }
  #sec-mo .mo-tbl, #sec-mo .mo-tbl th, #sec-mo .mo-tbl td, #sec-mo .mo-tbl td.mo-td-n, #sec-mo .mo-tbl td.mo-td-calc,
  #sec-mo .mo-in, #sec-mo .mo-in.num, #sec-mo .mo-in.cod, #sec-mo .mo-ro, #sec-mo .mo-ro.num{ font-size:12px !important; }
}
@media (pointer:coarse){
  #sec-mo .mof-tabs .presup-subtab{ min-height:44px; }
  #sec-mo .mof-sub-mas{ min-height:32px; }
  #sec-mo .mo-btn{ min-height:44px; }
}

/* Capa móvil · las tarjetas que compone movil/hojas.js (componente común, no se
   toca) dentro de esta vista: rótulos a 12 px y sin mayúsculas (G01, G04) */
html.mv #sec-mo .mv-eyebrow,
html.mv #sec-mo .mv-calc-cuenta,
html.mv #sec-mo .mv-calc-cuenta b,
html.mv #sec-mo .mv-calc-meta{ font-size:12px !important; text-transform:none !important; letter-spacing:0 !important; }