/* CIMO · cimo.css · v1.0 · 24/10/2026
   Generado con sistema.py desde tokens.json: no se edita a mano, se cambia el token y se regenera.
   Tema: html[data-tema="oscuro"] | "claro" | sin atributo = sigue al sistema. Letra grande: html[data-letra="grande"].
   Densidad compacta (desde 900px): html[data-densidad="compacta"]. Al imprimir pasa al tema claro y esconde el armazón.
   Las fuentes van aparte, en cimo-fuentes.css (autoalojadas: la app copia también la carpeta fuentes/ junto a la
   hoja), que se enlaza ANTES de esta. Sin ella se usan las fuentes del sistema. */
:root{--fondo:#F4F6FA;--superficie:#FFFFFF;--superficie-hundida:#EEF2F8;--campo:#FFFFFF;--linea:#E2E7F0;--linea-control:#8591A6;--tinta:#0A1A33;--tinta-suave:#4F5B70;--marcador:#66728A;--azul:#1846C7;--noche:#0A1A33;--logo:#1846C7;--logo-clave:#13A463;--menta:#7DE3A8;--logo-sobre-marca:#FFFFFF;--en-noche:#FFFFFF;--marca:#13A463;--marca-tinta:#0B7A47;--marca-suave:#E3F6EC;--accion:#1846C7;--accion-presionado:#1238A6;--en-accion:#FFFFFF;--activo-fondo:#DFE7FA;--activo-tinta:#1846C7;--activo-filo:#13A463;--enlace:#1846C7;--foco:#1846C7;--info:#1846C7;--info-suave:#E6EEFB;--alerta:#C98A12;--alerta-suave:#FAF0D6;--alerta-tinta:#7A5600;--en-alerta:#3A2C00;--peligro:#B42318;--peligro-suave:#FDE9E9;--en-peligro:#FFFFFF;--estado-borrador:#E3E8F0;--estado-borrador-tinta:#0A1A33;--estado-enviado:#F6E8D2;--estado-enviado-tinta:#8A5A00;--estado-aprobado:#D5EEE0;--estado-aprobado-tinta:#0B6B3E;--estado-recibido:#DFE7FA;--estado-recibido-tinta:#1846C7;--estado-devuelto:#FAE4E2;--estado-devuelto-tinta:#B42318;--modulo-obra:#0B7A47;--modulo-contabilidad:#1C5D9B;--modulo-inventarios:#0F6E68;--modulo-maquinaria:#7A5600;--modulo-personas:#6A3D9A;--modulo-gestion:#5E6167;--modulo-contratos:#9A3412;--modulo-automatizaciones:#A21CAF;--modulo-licitaciones:#4338CA;--modulo-chatbot:#4D7C0F;--en-modulo:#FFFFFF;--modulo-datamart:#0A1A33;--en-modulo-datamart:#7DE3A8;--menu-titulo:#1846C7;--menu-icono:#4A6FD8;--velo:rgba(10,26,51,0.48);--toast-icono:#7DE3A8;--toast-enlace:#8FB3F0;--toast-alerta:#FAC775;--toast-peligro:#F49A92;--papel:#FFFFFF;--papel-tinta:#0A1A33;--papel-suave:#4F5B70;--papel-linea:#D5DBE5;--papel-clave:#13A463;--serie-1:#1565C0;--serie-2:#2F9E57;--serie-3:#7A3FB0;--serie-4:#C2620A;--serie-5:#0B8F87;--serie-costo:#C0392B;--serie-pendiente:#D4A017;--serie-pendiente-borde:#8F6A0B;--nat-neutro:#5B6675;--plan-tinta:#1846C7;--positivo-tinta:#0A6B3F;--titulo-franja:#EAF0FD;--titulo-tinta:#1846C7;--titulo-raya:#1846C7;--tenue-ingreso:#4C7F68;--celda-ingreso:#F5FAF7;--barra-ingreso:#B2DBC1;--cifra-ingreso:#1A5730;--texto-ingreso:#237641;--tenue-costo:#91585A;--celda-costo:#FCF5F4;--barra-costo:#E8B5B0;--cifra-costo:#6A1F18;--texto-costo:#BC382A;--tenue-pendiente:#867546;--celda-pendiente:#FDFAF3;--barra-pendiente:#EFDBA8;--cifra-pendiente:#75580D;--texto-pendiente:#83630E;--tenue-plan:#446C9D;--celda-plan:#F3F7FC;--barra-plan:#A8C5E8;--cifra-plan:#0C386A;--texto-plan:#1565C0;--tenue-neutro:#646D7B;--celda-neutro:#F7F7F8;--barra-neutro:#C2C6CB;--cifra-neutro:#323840;--texto-neutro:#5B6675;--tenue-referencia:#3F4A5D;--celda-referencia:#F3F4F5;--barra-referencia:#A4AAB3;--cifra-referencia:#060E1C;--texto-referencia:#0A1A33;--en-tenue:#FFFFFF;--semaforo-malo:#E09C95;--semaforo-medio:#EAD08B;--semaforo-bueno:#97CEAB;--edad-1:#2E8B57;--edad-1-suave:#D5E8DD;--edad-2:#7A8C00;--edad-2-suave:#E4E8CC;--edad-3:#B8860B;--edad-3-suave:#F1E7CE;--edad-4:#D0650F;--edad-4-suave:#F6E0CF;--edad-5:#C2381A;--edad-5-suave:#F3D7D1;--edad-6:#8F1A10;--edad-6-suave:#E9D1CF;--edad-sin-fecha:#8591A6;--edad-sin-fecha-suave:#E7E9ED;--sombra-nav:0 1px 3px rgba(10,26,51,.07);--sombra:0 1px 2px rgba(10,26,51,.05), 0 4px 14px rgba(10,26,51,.07);--sombra-alta:0 8px 26px rgba(10,26,51,.13);--espacio-1:4px;--espacio-2:8px;--espacio-3:12px;--espacio-4:16px;--espacio-6:24px;--espacio-8:32px;--radio-control:4px;--radio-tarjeta:6px;--radio-pastilla:999px;--tactil:44px;--tactil-grande:48px;--campo-alto:52px;--celda-relleno:10px 14px;--tarjeta-relleno:16px;--encabezado-alto:56px;--menu-ancho:248px;--corte-armazon:900px;--ico-tam:24px;--ico-menu:20px;--ico-encabezado:18px;--ico-barra:22px;--font-display:"Plus Jakarta Sans", system-ui, sans-serif;--font-texto:Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;--font-datos:"IBM Plex Mono", ui-monospace, Consolas, monospace;color-scheme:light}
html[data-tema="oscuro"]{--fondo:#08101F;--superficie:#0F1A2E;--superficie-hundida:#0B1426;--campo:#0B1426;--linea:#22304A;--linea-control:#7486A6;--tinta:#E9EEF7;--tinta-suave:#A3AFC4;--marcador:#8A97AE;--logo:#FFFFFF;--logo-clave:#7DE3A8;--marca:#3FC27F;--marca-tinta:#7DE3A8;--marca-suave:#0F2E21;--accion:#8FB3F0;--accion-presionado:#B3CBF6;--en-accion:#08101F;--activo-fondo:#203459;--activo-tinta:#BCD0F5;--activo-filo:#3FC27F;--enlace:#8FB3F0;--foco:#8FB3F0;--info:#6F9BEF;--info-suave:#13254A;--alerta:#D89A1E;--alerta-suave:#33270D;--alerta-tinta:#FAC775;--en-alerta:#2B1F00;--peligro:#F07A72;--peligro-suave:#3A1A1F;--en-peligro:#08101F;--estado-borrador:#25324A;--estado-borrador-tinta:#E9EEF7;--estado-enviado:#4B3A14;--estado-enviado-tinta:#FAC775;--estado-aprobado:#173B2A;--estado-aprobado-tinta:#7DE3A8;--estado-recibido:#203459;--estado-recibido-tinta:#A9C5F5;--estado-devuelto:#4E2427;--estado-devuelto-tinta:#F2A9A3;--modulo-obra:#7DE3A8;--modulo-contabilidad:#8FC6F5;--modulo-inventarios:#5FD3CB;--modulo-maquinaria:#FAC775;--modulo-personas:#C9A7F0;--modulo-gestion:#BCBEC2;--modulo-contratos:#F4A27A;--modulo-automatizaciones:#F0ABFC;--modulo-licitaciones:#A5B4FC;--modulo-chatbot:#BEF264;--en-modulo:#08101F;--modulo-datamart:#13A463;--en-modulo-datamart:#0A1A33;--menu-titulo:#8FB3F0;--menu-icono:#7FA3EC;--velo:rgba(0,0,0,0.62);--toast-icono:#0B7A47;--toast-enlace:#1846C7;--toast-alerta:#7A5600;--toast-peligro:#B42318;--serie-1:#5B9BEA;--serie-2:#4CBF77;--serie-3:#9A6FE0;--serie-4:#D2722A;--serie-5:#1C9F96;--serie-costo:#E8695C;--serie-pendiente:#E6B33A;--serie-pendiente-borde:#E6B33A;--nat-neutro:#A3ADBA;--plan-tinta:#8FB3F0;--positivo-tinta:#7DE3A8;--titulo-franja:#16264A;--titulo-tinta:#8FB3F0;--titulo-raya:#4F86F0;--tenue-ingreso:#2A644F;--celda-ingreso:#142734;--barra-ingreso:#2A644F;--cifra-ingreso:#C0E9CF;--texto-ingreso:#4CBF77;--tenue-costo:#713E43;--celda-costo:#202032;--barra-costo:#703D43;--cifra-costo:#F7CAC6;--texto-costo:#EB7C71;--tenue-pendiente:#705F33;--celda-pendiente:#20262F;--barra-pendiente:#6F5E33;--cifra-pendiente:#F6E4BA;--texto-pendiente:#E6B33A;--tenue-plan:#315483;--celda-plan:#15243D;--barra-plan:#315482;--cifra-plan:#C6DCF8;--texto-plan:#629FEB;--tenue-neutro:#525C6D;--celda-neutro:#1B2639;--barra-neutro:#515C6D;--cifra-neutro:#DFE2E7;--texto-neutro:#A3ADBA;--tenue-referencia:#6F7785;--celda-referencia:#202B3E;--barra-referencia:#6A7383;--cifra-referencia:#F7F9FC;--texto-referencia:#E9EEF7;--semaforo-malo:#7C4245;--semaforo-medio:#7A6634;--semaforo-bueno:#2E6C52;--edad-1:#28A862;--edad-1-suave:#184D41;--edad-2:#8DB33A;--edad-2-suave:#3C5132;--edad-3:#E8B83A;--edad-3-suave:#5D5332;--edad-4:#EE8A2E;--edad-4-suave:#5F422E;--edad-5:#E8603F;--edad-5-suave:#5D3334;--edad-6:#C83020;--edad-6-suave:#522229;--edad-sin-fecha:#7486A6;--edad-sin-fecha-suave:#334159;--sombra-nav:0 1px 3px rgba(0,0,0,.35);--sombra:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.30);--sombra-alta:0 8px 26px rgba(0,0,0,.45);color-scheme:dark}
@media (prefers-color-scheme:dark){html:not([data-tema]){--fondo:#08101F;--superficie:#0F1A2E;--superficie-hundida:#0B1426;--campo:#0B1426;--linea:#22304A;--linea-control:#7486A6;--tinta:#E9EEF7;--tinta-suave:#A3AFC4;--marcador:#8A97AE;--logo:#FFFFFF;--logo-clave:#7DE3A8;--marca:#3FC27F;--marca-tinta:#7DE3A8;--marca-suave:#0F2E21;--accion:#8FB3F0;--accion-presionado:#B3CBF6;--en-accion:#08101F;--activo-fondo:#203459;--activo-tinta:#BCD0F5;--activo-filo:#3FC27F;--enlace:#8FB3F0;--foco:#8FB3F0;--info:#6F9BEF;--info-suave:#13254A;--alerta:#D89A1E;--alerta-suave:#33270D;--alerta-tinta:#FAC775;--en-alerta:#2B1F00;--peligro:#F07A72;--peligro-suave:#3A1A1F;--en-peligro:#08101F;--estado-borrador:#25324A;--estado-borrador-tinta:#E9EEF7;--estado-enviado:#4B3A14;--estado-enviado-tinta:#FAC775;--estado-aprobado:#173B2A;--estado-aprobado-tinta:#7DE3A8;--estado-recibido:#203459;--estado-recibido-tinta:#A9C5F5;--estado-devuelto:#4E2427;--estado-devuelto-tinta:#F2A9A3;--modulo-obra:#7DE3A8;--modulo-contabilidad:#8FC6F5;--modulo-inventarios:#5FD3CB;--modulo-maquinaria:#FAC775;--modulo-personas:#C9A7F0;--modulo-gestion:#BCBEC2;--modulo-contratos:#F4A27A;--modulo-automatizaciones:#F0ABFC;--modulo-licitaciones:#A5B4FC;--modulo-chatbot:#BEF264;--en-modulo:#08101F;--modulo-datamart:#13A463;--en-modulo-datamart:#0A1A33;--menu-titulo:#8FB3F0;--menu-icono:#7FA3EC;--velo:rgba(0,0,0,0.62);--toast-icono:#0B7A47;--toast-enlace:#1846C7;--toast-alerta:#7A5600;--toast-peligro:#B42318;--serie-1:#5B9BEA;--serie-2:#4CBF77;--serie-3:#9A6FE0;--serie-4:#D2722A;--serie-5:#1C9F96;--serie-costo:#E8695C;--serie-pendiente:#E6B33A;--serie-pendiente-borde:#E6B33A;--nat-neutro:#A3ADBA;--plan-tinta:#8FB3F0;--positivo-tinta:#7DE3A8;--titulo-franja:#16264A;--titulo-tinta:#8FB3F0;--titulo-raya:#4F86F0;--tenue-ingreso:#2A644F;--celda-ingreso:#142734;--barra-ingreso:#2A644F;--cifra-ingreso:#C0E9CF;--texto-ingreso:#4CBF77;--tenue-costo:#713E43;--celda-costo:#202032;--barra-costo:#703D43;--cifra-costo:#F7CAC6;--texto-costo:#EB7C71;--tenue-pendiente:#705F33;--celda-pendiente:#20262F;--barra-pendiente:#6F5E33;--cifra-pendiente:#F6E4BA;--texto-pendiente:#E6B33A;--tenue-plan:#315483;--celda-plan:#15243D;--barra-plan:#315482;--cifra-plan:#C6DCF8;--texto-plan:#629FEB;--tenue-neutro:#525C6D;--celda-neutro:#1B2639;--barra-neutro:#515C6D;--cifra-neutro:#DFE2E7;--texto-neutro:#A3ADBA;--tenue-referencia:#6F7785;--celda-referencia:#202B3E;--barra-referencia:#6A7383;--cifra-referencia:#F7F9FC;--texto-referencia:#E9EEF7;--semaforo-malo:#7C4245;--semaforo-medio:#7A6634;--semaforo-bueno:#2E6C52;--edad-1:#28A862;--edad-1-suave:#184D41;--edad-2:#8DB33A;--edad-2-suave:#3C5132;--edad-3:#E8B83A;--edad-3-suave:#5D5332;--edad-4:#EE8A2E;--edad-4-suave:#5F422E;--edad-5:#E8603F;--edad-5-suave:#5D3334;--edad-6:#C83020;--edad-6-suave:#522229;--edad-sin-fecha:#7486A6;--edad-sin-fecha-suave:#334159;--sombra-nav:0 1px 3px rgba(0,0,0,.35);--sombra:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.30);--sombra-alta:0 8px 26px rgba(0,0,0,.45);color-scheme:dark}}
html[data-letra="grande"]{--tactil:var(--tactil-grande)}
@media (min-width:900px){html[data-densidad="compacta"]{--celda-relleno:6px 10px;--tarjeta-relleno:10px 12px;--campo-alto:44px}html[data-densidad="compacta"] .cimo-tabla{font-size:13px}}
.cimo-t-titulo-1{font-family:var(--font-display);font-size:28px;line-height:34px;font-weight:800;letter-spacing:-0.015em;}
.cimo-t-titulo-2{font-family:var(--font-display);font-size:22px;line-height:28px;font-weight:700;}
.cimo-t-titulo-3{font-family:var(--font-display);font-size:18px;line-height:24px;font-weight:700;}
.cimo-t-cuerpo{font-family:var(--font-texto);font-size:15px;line-height:22px;font-weight:400;}
.cimo-t-cuerpo-fuerte{font-family:var(--font-texto);font-size:15px;line-height:22px;font-weight:600;}
.cimo-t-campo-texto{font-family:var(--font-texto);font-size:16px;line-height:22px;font-weight:400;}
.cimo-t-etiqueta{font-family:var(--font-texto);font-size:13px;line-height:18px;font-weight:600;}
.cimo-t-pie{font-family:var(--font-texto);font-size:12px;line-height:16px;font-weight:400;}
.cimo-t-cifra{font-family:var(--font-display);font-size:28px;line-height:32px;font-weight:700;}
.cimo-t-cifra-tabla{font-family:var(--font-texto);font-size:14px;line-height:20px;font-weight:500;}
.cimo-t-codigo{font-family:var(--font-datos);font-size:13px;line-height:18px;font-weight:400;}
.cimo-t-doc-titulo{font-family:var(--font-display);font-size:40px;line-height:44px;font-weight:800;letter-spacing:-0.02em;}
.cimo-t-doc-subtitulo{font-family:var(--font-display);font-size:28px;line-height:34px;font-weight:700;}
.cimo-t-doc-seccion{font-family:var(--font-display);font-size:20px;line-height:26px;font-weight:700;}
.cimo-t-doc-texto{font-family:var(--font-texto);font-size:16px;line-height:24px;font-weight:400;}
.cimo-t-doc-nota{font-family:var(--font-texto);font-size:13px;line-height:18px;font-weight:500;}
/* CIMO — componentes. Todo color sale de un token: ningún valor a pelo y ningún var() con reserva.
   Los valores viven en tokens.json; esta hoja solo los usa. Cortes en pareja: 899.98 / 900. */

body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--font-texto);font-size:15px;line-height:1.47}
a{color:var(--enlace)}
.cimo-num{font-variant-numeric:tabular-nums}
.cimo-codigo{font-family:var(--font-datos);font-size:13px;line-height:18px}

/* ---- Logo en línea: un solo SVG sirve en los dos temas ---- */
.cimo-logo{display:block;height:26px;width:auto}
.cimo-logo .p{fill:var(--logo)}
.cimo-logo .a{fill:var(--logo-clave)}
.cimo-logo--marca .p{fill:var(--logo-sobre-marca)}
.cimo-logo--marca .a{fill:var(--menta)}

/* ---- Iconos: piezas macizas separadas por juntas, en cuadrícula de 24. La pieza clave (k) se pinta con
   --ico-clave: el color del texto, salvo en la variante --clave, que la pinta con el verde de marca ---- */
.cimo-ico{width:var(--ico-tam);height:var(--ico-tam);flex:none;fill:currentColor;--ico-clave:currentColor}
.cimo-ico--clave{--ico-clave:var(--marca)}

/* ---- Botón ---- */
/* box-sizing: el <a> medía 2 px más que el <button> (el borde se sumaba al alto: 30 contra 28 en la escala densa; lo halló la app
   Licitaciones, 26/10/2026) */
.cimo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tactil);box-sizing:border-box;
  padding:0 18px;border-radius:var(--radio-control);border:1px solid transparent;cursor:pointer;
  font:600 15px/1.2 var(--font-texto);text-decoration:none;max-width:100%;text-align:center;text-wrap:balance}
.cimo-btn .cimo-ico{width:18px;height:18px}
.cimo-btn:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-btn--principal{background:var(--accion);color:var(--en-accion)}
.cimo-btn--principal:active{background:var(--accion-presionado)}
.cimo-btn--secundario{background:var(--superficie);color:var(--tinta);border-color:var(--linea-control)}
.cimo-btn--secundario:active{background:var(--superficie-hundida)}
.cimo-btn--peligro{background:var(--peligro);color:var(--en-peligro)}
.cimo-btn--discreto{background:transparent;color:var(--enlace);padding:0 10px}
.cimo-btn:disabled,.cimo-btn[aria-disabled="true"]{background:var(--superficie-hundida);color:var(--tinta-suave);
  border-color:var(--linea);cursor:not-allowed}

/* ---- Estado: la pastilla dice dónde está el documento, nunca lo que va a pasar ---- */
.cimo-estado{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radio-pastilla);
  font:600 12.5px/1 var(--font-texto);white-space:nowrap}
.cimo-estado::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.cimo-estado--borrador{background:var(--estado-borrador);color:var(--estado-borrador-tinta)}
.cimo-estado--enviado{background:var(--estado-enviado);color:var(--estado-enviado-tinta)}
.cimo-estado--aprobado{background:var(--estado-aprobado);color:var(--estado-aprobado-tinta)}
.cimo-estado--recibido{background:var(--estado-recibido);color:var(--estado-recibido-tinta)}
.cimo-estado--devuelto{background:var(--estado-devuelto);color:var(--estado-devuelto-tinta)}

/* ---- Módulo: cuadro de color + icono + nombre. El color nunca va solo ---- */
.cimo-modulo{display:inline-flex;align-items:center;gap:10px;font:600 14px/1.2 var(--font-texto);color:var(--tinta)}
/* El módulo es una dovela del arco CIMO: un trapecio más ancho arriba, de esquinas vivas */
.cimo-modulo__icono{display:grid;place-items:center;width:44px;height:44px;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);
  color:var(--en-modulo);flex:none}
.cimo-modulo__icono .cimo-ico{width:24px;height:24px;margin-top:-3px}
.cimo-modulo--obra .cimo-modulo__icono,.mod-obra{background:var(--modulo-obra)}
.cimo-modulo--contabilidad .cimo-modulo__icono,.mod-contabilidad{background:var(--modulo-contabilidad)}
.cimo-modulo--inventarios .cimo-modulo__icono,.mod-inventarios{background:var(--modulo-inventarios)}
.cimo-modulo--maquinaria .cimo-modulo__icono,.mod-maquinaria{background:var(--modulo-maquinaria)}
.cimo-modulo--personas .cimo-modulo__icono,.mod-personas{background:var(--modulo-personas)}
.cimo-modulo--gestion .cimo-modulo__icono,.mod-gestion{background:var(--modulo-gestion)}
.cimo-modulo--contratos .cimo-modulo__icono,.mod-contratos{background:var(--modulo-contratos)}
.cimo-modulo--automatizaciones .cimo-modulo__icono,.mod-automatizaciones{background:var(--modulo-automatizaciones)}
.cimo-modulo--licitaciones .cimo-modulo__icono,.mod-licitaciones{background:var(--modulo-licitaciones)}
.cimo-modulo--chatbot .cimo-modulo__icono,.mod-chatbot{background:var(--modulo-chatbot)}
.cimo-modulo--datamart .cimo-modulo__icono,.mod-datamart{background:var(--modulo-datamart);color:var(--en-modulo-datamart)}
/* Inicio y Configuración no son módulos de negocio: su dovela va en el azul de la acción (sin esto, el ícono blanco de Configuración quedaba
   sin fondo en el pie del riel de toda app que lo usa; lo halló la app Licitaciones, 26/10/2026) */
.mod-inicio,.mod-ajustes{background:var(--accion)}

/* ---- Campo ---- */
.cimo-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.cimo-campo label{font:600 13px/18px var(--font-texto);color:var(--tinta)}
.cimo-campo input,.cimo-campo select,.cimo-campo textarea{box-sizing:border-box;width:100%;height:var(--campo-alto);
  padding:0 14px;border:1px solid var(--linea-control);border-radius:var(--radio-control);background:var(--campo);
  color:var(--tinta);font:400 16px/22px var(--font-texto)}
.cimo-campo textarea{height:auto;min-height:96px;padding:12px 14px}
.cimo-campo ::placeholder{color:var(--marcador);opacity:1}
.cimo-campo input:focus-visible,.cimo-campo select:focus-visible,.cimo-campo textarea:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-campo input:disabled,.cimo-campo select:disabled{background:var(--superficie-hundida);color:var(--tinta-suave)}
.cimo-campo input:disabled::placeholder{color:var(--tinta-suave)}
.cimo-campo__ayuda{font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}
/* El error engrosa el borde con una sombra interior, no con border-width: así el campo no salta 1px */
.cimo-campo--error input,.cimo-campo--error select,.cimo-campo--error textarea{border-color:var(--peligro);box-shadow:inset 0 0 0 1px var(--peligro)}
.cimo-campo__error{display:flex;align-items:center;gap:6px;font:600 13px/18px var(--font-texto);color:var(--peligro)}
.cimo-campo__error .cimo-ico{width:16px;height:16px}

/* ---- Tabla: los números a la derecha y en cifras tabulares ---- */
/* Desvanecido en el borde mientras quede algo fuera: las capas «local» tapan la sombra cuando no hay más que ver */
.cimo-tabla-marco{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio-tarjeta);background-color:var(--superficie);
  background-image:linear-gradient(to right,var(--superficie) 40%,transparent),linear-gradient(to left,var(--superficie) 40%,transparent),
    radial-gradient(farthest-side at 0 50%,var(--linea-control),transparent),radial-gradient(farthest-side at 100% 50%,var(--linea-control),transparent);
  background-position:left center,right center,left center,right center;background-size:32px 100%,32px 100%,12px 100%,12px 100%;
  background-repeat:no-repeat;background-attachment:local,local,scroll,scroll}
.cimo-tabla{width:100%;border-collapse:collapse;font:400 14px/20px var(--font-texto);color:var(--tinta)}
.cimo-tabla th{padding:var(--celda-relleno);border-bottom:1px solid var(--linea);text-align:left;white-space:nowrap;
  font:600 12.5px/16px var(--font-texto);letter-spacing:.02em;text-transform:uppercase;color:var(--tinta-suave)}
.cimo-tabla td{padding:var(--celda-relleno);border-bottom:1px solid var(--linea);vertical-align:middle}
.cimo-tabla tbody tr:last-child td{border-bottom:0}
.cimo-tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cimo-tabla tfoot td{font-weight:700;background:var(--superficie-hundida);border-top:2px solid var(--tinta);border-bottom:0}

/* ---- Cifra ---- */
/* Una sola fila (decisión del dueño del 25/10/2026). Sin cimo-cifras.js, cada tarjeta mide al menos lo que su cifra y la fila se
   desplaza de lado; con él, toda la fila lleva una sola letra (de 28 a 16px) y un solo relleno (GRAFICOS-NAVEGACION.md §2). */
.cimo-cifras{display:flex;gap:12px;min-width:0;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:2px}
.cimo-cifras > .cimo-cifra{flex:1 1 0;min-width:min-content;scroll-snap-align:start}
.cimo-cifra{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;padding:var(--tarjeta-relleno);background:var(--superficie);
  border:1px solid var(--linea);border-radius:var(--radio-tarjeta)}
.cimo-cifra__etiqueta{font:600 13px/18px var(--font-texto);color:var(--tinta-suave)}
/* La cifra nunca se parte ni se corta. */
.cimo-cifra__valor{font:700 28px/1.15 var(--font-display);font-size:var(--cifra-letra,28px);font-variant-numeric:tabular-nums;color:var(--tinta);white-space:nowrap;letter-spacing:-.01em}
.cimo-cifra__nota{font:500 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-cifra__nota--favorable{color:var(--marca-tinta)}
.cimo-cifra__nota--desfavorable{color:var(--peligro)}
.cimo-avance{height:8px;border-radius:var(--radio-pastilla);background:var(--superficie-hundida);overflow:hidden;margin-top:6px}
.cimo-avance i{display:block;height:100%;background:var(--marca-tinta);border-radius:inherit}

/* ---- Aviso: fondo suave, borde e icono del mismo tono, texto en tinta ---- */
.cimo-aviso{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--linea);
  border-radius:var(--radio-control);color:var(--tinta);font:400 14px/20px var(--font-texto)}
.cimo-aviso .cimo-ico{width:20px;height:20px}
.cimo-aviso strong{font-weight:600}
.cimo-aviso--info{background:var(--info-suave);border-color:var(--info)}
.cimo-aviso--info .cimo-ico{color:var(--info)}
.cimo-aviso--exito{background:var(--marca-suave);border-color:var(--marca)}
.cimo-aviso--exito .cimo-ico{color:var(--marca-tinta)}
.cimo-aviso--alerta{background:var(--alerta-suave);border-color:var(--alerta-tinta)}
.cimo-aviso--alerta .cimo-ico{color:var(--alerta-tinta)}
.cimo-aviso--peligro{background:var(--peligro-suave);border-color:var(--peligro)}
.cimo-aviso--peligro .cimo-ico{color:var(--peligro)}

/* ---- Armazón: encabezado + menú lateral desde 900px; encabezado + barra inferior por debajo.
   Un solo mapa de navegación alimenta el menú y la barra. ---- */
.cimo-armazon{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;min-height:100%;background:var(--fondo)}
.cimo-encabezado{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;min-height:var(--encabezado-alto);
  padding:0 16px;background:var(--superficie);border-bottom:1px solid var(--linea);box-shadow:var(--sombra-nav)}
.cimo-encabezado .cimo-logo{height:26px}
.cimo-encabezado__titulo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding-left:12px;border-left:1px solid var(--linea)}
.cimo-encabezado__titulo b{font:700 16px/20px var(--font-display);overflow-wrap:anywhere}
.cimo-encabezado__titulo span{font:500 12px/16px var(--font-texto);color:var(--tinta-suave);overflow-wrap:anywhere}
.cimo-hbtn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:var(--radio-pastilla);
  background:var(--superficie-hundida);border:1px solid var(--linea);color:var(--tinta);cursor:pointer;padding:0}
.cimo-hbtn::after{content:"";position:absolute;inset:-2px}
.cimo-hbtn .cimo-ico{width:var(--ico-encabezado);height:var(--ico-encabezado)}
.cimo-hbtn:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-menu{display:none;padding:8px;background:var(--superficie);border-right:1px solid var(--linea)}
.cimo-menu__grupo{display:flex;align-items:center;gap:8px;padding:14px 12px 6px;
  font:600 12px/16px var(--font-texto);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave)}
.cimo-menu__grupo i{display:block;width:12px;height:11px;clip-path:polygon(0 0,100% 0,85% 100%,15% 100%);flex:none}
.cimo-menu a{position:relative;display:flex;align-items:center;gap:10px;min-height:var(--tactil);padding:0 12px;
  border-radius:var(--radio-control);color:var(--tinta);text-decoration:none;font:500 15px/1.2 var(--font-texto)}
.cimo-menu a .cimo-ico{width:var(--ico-menu);height:var(--ico-menu);color:var(--tinta-suave)}
.cimo-menu a:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-menu a[aria-current="page"]{background:var(--activo-fondo);color:var(--activo-tinta);font-weight:600}
.cimo-menu a[aria-current="page"] .cimo-ico{color:var(--activo-tinta)}
.cimo-menu a[aria-current="page"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--activo-filo)}
.cimo-contenido{display:flex;flex-direction:column;gap:16px;min-width:0;padding:16px}
.cimo-contenido__titulo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.cimo-contenido__titulo h1{margin:0;font:800 28px/34px var(--font-display);letter-spacing:-.015em;color:var(--tinta)}
.cimo-barra{position:sticky;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  background:var(--superficie);border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom,0px)}
.cimo-barra a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;
  color:var(--tinta-suave);text-decoration:none;font:600 12px/14px var(--font-texto)}
.cimo-barra a .cimo-ico{width:var(--ico-barra);height:var(--ico-barra)}
.cimo-barra a[aria-current="page"]{background:var(--activo-fondo);color:var(--activo-tinta)}
.cimo-barra a:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
@media (max-width:899.98px){
  .cimo-encabezado__titulo{border-left:0;padding-left:0}
  .cimo-encabezado .cimo-logo--firma{display:none}
}
@media (min-width:900px){
  .cimo-armazon{grid-template-columns:var(--menu-ancho) minmax(0,1fr);grid-template-rows:auto 1fr}
  .cimo-encabezado{grid-column:1 / -1}
  .cimo-encabezado .cimo-logo--simbolo{display:none}
  .cimo-menu{display:block}
  .cimo-barra{display:none}
  .cimo-contenido{padding:24px}
}

/* CIMO — componentes de interacción. Mismas reglas: todo color por token, sin var() con reserva, nada translúcido
   para foco, estado o selección, tocables de 44px (o su área agrandada con ::after), cortes en pareja 899.98 / 900. */

/* ---- Controles de elección: casilla, radio e interruptor ---- */
.cimo-eleccion{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:var(--tactil);cursor:pointer;
  font:400 15px/1.3 var(--font-texto);color:var(--tinta)}
.cimo-eleccion input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cimo-eleccion__marca{position:relative;display:grid;place-items:center;width:22px;height:22px;flex:none;background:var(--campo);
  border:2px solid var(--linea-control);color:var(--en-accion)}
.cimo-eleccion--casilla .cimo-eleccion__marca{border-radius:4px}
.cimo-eleccion--casilla .cimo-eleccion__marca .cimo-ico{width:16px;height:16px;opacity:0}
.cimo-eleccion--casilla input:checked + .cimo-eleccion__marca{background:var(--accion);border-color:var(--accion)}
.cimo-eleccion--casilla input:checked + .cimo-eleccion__marca .cimo-ico{opacity:1}
.cimo-eleccion--radio .cimo-eleccion__marca{border-radius:50%}
.cimo-eleccion--radio input:checked + .cimo-eleccion__marca{border-color:var(--accion)}
.cimo-eleccion--radio input:checked + .cimo-eleccion__marca::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accion)}
.cimo-eleccion--interruptor .cimo-eleccion__marca{width:44px;height:26px;border-radius:var(--radio-pastilla);place-items:center start;padding:0 2px;box-sizing:border-box}
.cimo-eleccion--interruptor .cimo-eleccion__marca::after{content:"";width:18px;height:18px;border-radius:50%;background:var(--linea-control)}
.cimo-eleccion--interruptor input:checked + .cimo-eleccion__marca{background:var(--accion);border-color:var(--accion);place-items:center end}
.cimo-eleccion--interruptor input:checked + .cimo-eleccion__marca::after{background:var(--en-accion)}
.cimo-eleccion input:focus-visible + .cimo-eleccion__marca{outline:3px solid var(--foco);outline-offset:2px}
.cimo-eleccion input:disabled + .cimo-eleccion__marca{background:var(--superficie-hundida);border-color:var(--linea)}
.cimo-eleccion__ayuda{display:block;font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}

/* ---- Segmentado: elegir una vista entre pocas (Tabla / Tarjetas, Por insumo / Por actividad) ---- */
/* las opciones miden lo mismo (H18 del DataMart, 26/10/2026: «Pesos» 48 px y «Millones» 61): botones de una fila, del mismo ancho */
.cimo-segmentado{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;gap:2px;background:var(--superficie-hundida);border:1px solid var(--linea);border-radius:var(--radio-control)}
.cimo-segmentado button{position:relative;min-height:38px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--tinta-suave);
  font:600 14px/1 var(--font-texto);cursor:pointer}
.cimo-segmentado button::after{content:"";position:absolute;inset:-3px 0}
.cimo-segmentado button[aria-pressed="true"]{background:var(--superficie);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea-control)}
.cimo-segmentado button:focus-visible{outline:3px solid var(--foco);outline-offset:1px}

/* ---- Pestañas: secciones de una misma ficha; la activa lleva el filo verde, como el menú ---- */
/* Si no caben, se desplazan con un desvanecido en el borde (las capas local tapan la sombra cuando no hay más).
   --pestanas-fondo es el fondo sobre el que van: fondo de página, o superficie dentro de una tarjeta o un cajón. */
.cimo-pestanas{--pestanas-fondo:var(--fondo);display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--linea);scrollbar-width:none;background-color:var(--pestanas-fondo);background-image:linear-gradient(to right,var(--pestanas-fondo) 40%,transparent),linear-gradient(to left,var(--pestanas-fondo) 40%,transparent),radial-gradient(farthest-side at 0 50%,var(--linea-control),transparent),radial-gradient(farthest-side at 100% 50%,var(--linea-control),transparent);background-position:left center,right center,left center,right center;background-size:32px 100%,32px 100%,10px 100%,10px 100%;background-repeat:no-repeat;background-attachment:local,local,scroll,scroll}
.cimo-cajon .cimo-pestanas,.cimo-ajustes .cimo-pestanas,.cimo-documento__cabeza .cimo-pestanas{--pestanas-fondo:var(--superficie)}
.cimo-pestanas [role="tab"]{position:relative;flex:none;min-height:var(--tactil);padding:0 14px;border:0;background:transparent;color:var(--tinta-suave);
  font:600 14.5px/1 var(--font-texto);cursor:pointer;white-space:nowrap}
.cimo-pestanas [role="tab"][aria-selected="true"]{color:var(--tinta)}
.cimo-pestanas [role="tab"][aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;background:var(--activo-filo)}
.cimo-pestanas [role="tab"]:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-pestanas .cimo-insignia{margin-left:6px}

/* ---- Insignia: un número que cuenta, siempre dentro del nombre accesible de su control ---- */
.cimo-insignia{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radio-pastilla);
  background:var(--accion);color:var(--en-accion);font:700 12px/1 var(--font-texto);font-variant-numeric:tabular-nums;box-sizing:border-box}
.cimo-hbtn .cimo-insignia{position:absolute;top:-4px;right:-4px;border:2px solid var(--superficie)}

/* ---- Chips de filtro: el filtro activo se ve y se quita con un toque ---- */
.cimo-chips{display:flex;flex-wrap:wrap;gap:8px}
.cimo-chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:var(--radio-pastilla);
  border:1px solid var(--linea-control);background:var(--superficie);color:var(--tinta);font:500 14px/1 var(--font-texto);cursor:pointer}
.cimo-chip::after{content:"";position:absolute;inset:-4px 0}
.cimo-chip[aria-pressed="true"]{background:var(--activo-fondo);border-color:var(--activo-tinta);color:var(--activo-tinta);font-weight:600}
.cimo-chip .cimo-ico{width:16px;height:16px}
.cimo-chip:focus-visible{outline:3px solid var(--foco);outline-offset:2px}

/* ---- Menú desplegable y menú de más acciones ---- */
.cimo-desplegable{position:relative;display:inline-block;align-self:flex-start;vertical-align:top}
.cimo-desplegable__panel{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:220px;max-width:min(320px,calc(100vw - 32px));padding:6px;
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra)}
.cimo-desplegable__panel[hidden]{display:none}
.cimo-desplegable--izquierda .cimo-desplegable__panel{right:auto;left:0}
.cimo-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tactil);padding:0 12px;border:0;border-radius:8px;background:transparent;
  color:var(--tinta);font:500 15px/1.2 var(--font-texto);text-align:left;text-decoration:none;cursor:pointer;box-sizing:border-box}
.cimo-menu-item .cimo-ico{width:20px;height:20px;color:var(--tinta-suave)}
.cimo-menu-item:hover,.cimo-menu-item:focus-visible{background:var(--superficie-hundida);outline:none}
.cimo-menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--foco)}
.cimo-menu-item--peligro,.cimo-menu-item--peligro .cimo-ico{color:var(--peligro)}
.cimo-menu-item[aria-checked="true"]{font-weight:600}
.cimo-menu-item[aria-checked="true"]::after{content:"";margin-left:auto;width:8px;height:8px;background:var(--activo-filo);clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}
.cimo-menu-separador{height:1px;margin:6px 4px;background:var(--linea)}
.cimo-menu-titulo{padding:10px 12px 4px;font:600 12px/16px var(--font-texto);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave)}

/* ---- Selector de proyecto: el contexto de trabajo (empresa · proyecto) siempre a la vista ---- */
.cimo-contexto{display:inline-flex;align-items:center;gap:8px;min-height:var(--tactil);max-width:100%;padding:0 12px;border:1px solid var(--linea-control);
  border-radius:var(--radio-control);background:var(--superficie);color:var(--tinta);cursor:pointer;font:600 14px/1.2 var(--font-texto)}
.cimo-contexto small{display:block;font:500 12px/16px var(--font-texto);color:var(--tinta-suave)}
.cimo-contexto span{min-width:0;text-align:left;overflow-wrap:anywhere}
.cimo-contexto:focus-visible{outline:3px solid var(--foco);outline-offset:2px}

/* ---- Pasos: el asistente se arma como un arco, dovela por dovela; el último paso es la clave ---- */
.cimo-pasos{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin:0;padding:0;list-style:none;counter-reset:paso}
.cimo-pasos li{display:flex;flex-direction:column;gap:8px;min-width:0;counter-increment:paso;font:500 13px/18px var(--font-texto);color:var(--tinta-suave)}
/* cada dovela lleva su numero, siempre (tambien en el telefono, donde el nombre se esconde): pedido del usuario 25/10/2026 */
.cimo-pasos li::before{content:counter(paso);display:grid;place-items:center;height:22px;font:700 12px/1 var(--font-datos);color:var(--tinta-suave);background:var(--superficie-hundida);border:1px solid var(--linea-control);clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}
.cimo-pasos li:last-child::before{clip-path:polygon(0 0,100% 0,88% 100%,12% 100%)}
.cimo-pasos li[data-estado="hecho"]::before{background:var(--accion);border-color:var(--accion);color:var(--en-accion)}
.cimo-pasos li[aria-current="step"]{color:var(--tinta);font-weight:700}
.cimo-pasos li[aria-current="step"]::before{background:var(--marca);border-color:var(--marca);color:var(--noche)}
.cimo-pasos li b{display:block;font:700 12px/16px var(--font-datos);color:var(--tinta-suave)}
.cimo-pasos li b:empty{display:none}
@media (max-width:899.98px){
  .cimo-pasos li span{display:none}
  .cimo-pasos li[aria-current="step"] span{display:block}
}

/* ---- Ventana (modal) y confirmación: lo irreversible se confirma dentro de la propia pantalla ---- */
.cimo-velo{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:var(--velo)}
.cimo-velo[hidden]{display:none}
.cimo-ventana{display:flex;flex-direction:column;gap:16px;width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;box-sizing:border-box;
  background:var(--superficie);color:var(--tinta);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra-alta)}
.cimo-ventana h2{margin:0;font:700 22px/28px var(--font-display)}
.cimo-ventana p{margin:0;color:var(--tinta-suave)}
.cimo-ventana__acciones{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
@media (max-width:899.98px){
  .cimo-velo{place-items:end stretch;padding:0}
  .cimo-ventana{width:100%;border-radius:var(--radio-tarjeta) var(--radio-tarjeta) 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .cimo-ventana__acciones{flex-direction:column}
  .cimo-ventana__acciones .cimo-btn{width:100%}
}

/* ---- Cajón lateral: filtros, detalle y aprobación sin salir de la lista ---- */
.cimo-cajon{position:fixed;top:0;right:0;bottom:0;z-index:50;display:flex;flex-direction:column;width:min(440px,100%);background:var(--superficie);
  border-left:1px solid var(--linea);box-shadow:var(--sombra-alta)}
.cimo-cajon[hidden]{display:none}
.cimo-cajon__cabeza{display:flex;align-items:center;gap:12px;min-height:var(--encabezado-alto);padding:0 8px 0 20px;border-bottom:1px solid var(--linea)}
.cimo-cajon__cabeza h2{flex:1;margin:0;font:700 18px/24px var(--font-display);min-width:0}
.cimo-cajon__cuerpo{flex:1;overflow:auto;display:flex;flex-direction:column;gap:16px;padding:20px}
.cimo-cajon__pie{display:flex;gap:10px;justify-content:flex-end;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linea)}
.cimo-cajon__pie .cimo-btn{flex:1}

/* ---- Notificación pasajera (toast): confirma algo que pasó; lo que exige acción va en un Aviso ---- */
.cimo-toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  width:max-content;max-width:calc(100vw - 32px);min-height:var(--tactil);padding:8px 8px 8px 16px;box-sizing:border-box;border-radius:var(--radio-control);
  background:var(--tinta);color:var(--superficie);box-shadow:var(--sombra-alta);font:500 14.5px/1.35 var(--font-texto)}
.cimo-toast .cimo-ico{width:20px;height:20px;color:var(--toast-icono)}
.cimo-toast .cimo-btn--discreto{color:var(--toast-enlace);min-height:36px}
@media (min-width:900px){.cimo-toast{bottom:24px}}

/* ---- Estado vacío: dice qué va a aparecer aquí y cómo agregar lo primero ---- */
.cimo-vacio{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px;text-align:center;color:var(--tinta-suave)}
.cimo-vacio > .cimo-ico{width:48px;height:48px;color:var(--tinta-suave)}
.cimo-vacio h3{margin:6px 0 0;font:700 18px/24px var(--font-display);color:var(--tinta)}
.cimo-vacio p{margin:0;max-width:44ch}

/* ---- Cargando: esqueletos con la forma de lo que viene; sin animación si la persona la desactivó ---- */
.cimo-esqueleto{display:block;height:14px;border-radius:4px;background:var(--superficie-hundida)}
.cimo-esqueleto--titulo{height:24px;width:40%}
.cimo-esqueleto--cifra{height:32px;width:60%}
@media (prefers-reduced-motion:no-preference){.cimo-esqueleto{animation:cimo-latido 1.4s ease-in-out infinite}}
@keyframes cimo-latido{50%{background:var(--linea)}}

/* ---- Paginación ---- */
.cimo-paginas{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cimo-paginas a,.cimo-paginas button{display:inline-grid;place-items:center;min-width:var(--tactil);min-height:var(--tactil);padding:0 8px;box-sizing:border-box;
  border:1px solid var(--linea);border-radius:var(--radio-control);background:var(--superficie);color:var(--tinta);font:600 14px/1 var(--font-texto);
  font-variant-numeric:tabular-nums;text-decoration:none;cursor:pointer}
.cimo-paginas [aria-current="page"]{background:var(--activo-fondo);border-color:var(--activo-tinta);color:var(--activo-tinta)}
.cimo-paginas__resumen{margin-right:auto;font:500 13px/18px var(--font-texto);color:var(--tinta-suave)}

/* ---- Barra de acciones masivas: aparece al seleccionar filas y dice cuántas ---- */
.cimo-masivo{position:sticky;bottom:12px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radio-tarjeta);
  background:var(--tinta);color:var(--superficie);box-shadow:var(--sombra-alta)}
.cimo-masivo[hidden]{display:none}
.cimo-masivo b{margin-right:auto;font:700 15px/1.2 var(--font-texto)}
.cimo-masivo .cimo-btn--secundario{background:transparent;color:var(--superficie);border-color:var(--superficie)}

/* ---- Subir archivos: zona de arrastre que también es un botón ---- */
.cimo-subir{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 16px;border:2px dashed var(--linea-control);
  border-radius:var(--radio-tarjeta);background:var(--superficie);color:var(--tinta-suave);text-align:center;font:400 14px/20px var(--font-texto)}
.cimo-subir b{color:var(--tinta)}
.cimo-subir input{position:absolute;inset:0;opacity:0;cursor:pointer}
.cimo-subir:focus-within{outline:3px solid var(--foco);outline-offset:2px}
.cimo-subir--encima{border-color:var(--accion);background:var(--activo-fondo)}
.cimo-archivo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--linea);
  border-radius:var(--radio-control);background:var(--superficie);font:400 14px/20px var(--font-texto)}
.cimo-archivo span{min-width:0;overflow-wrap:anywhere}
.cimo-archivo small{grid-column:2;font-size:12.5px;color:var(--tinta-suave)}

/* ---- Línea de tiempo: el recorrido de un documento (creado, enviado, aprobado) con quién y cuándo ---- */
.cimo-linea-tiempo{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.cimo-linea-tiempo li{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding-bottom:18px;font:400 14px/20px var(--font-texto);color:var(--tinta)}
.cimo-linea-tiempo li::before{content:"";grid-row:1 / span 2;width:14px;height:12px;margin:4px 3px 0;background:var(--linea-control);clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}
.cimo-linea-tiempo li::after{content:"";position:absolute;left:9px;top:20px;bottom:0;width:2px;background:var(--linea)}
.cimo-linea-tiempo li:last-child::after{display:none}
.cimo-linea-tiempo li[data-estado="hecho"]::before{background:var(--accion)}
.cimo-linea-tiempo li[data-estado="actual"]::before{background:var(--marca)}
.cimo-linea-tiempo li[data-estado="devuelto"]::before{background:var(--peligro)}
.cimo-linea-tiempo small{grid-column:2;font-size:12.5px;line-height:18px;color:var(--tinta-suave)}

/* ---- Autocompletar: buscar un tercero o un insumo por NIT, código o nombre ---- */
.cimo-autocompletar{position:relative}
.cimo-autocompletar__lista{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;max-height:300px;overflow:auto;margin:0;padding:6px;list-style:none;
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra)}
.cimo-autocompletar__lista[hidden]{display:none}
.cimo-autocompletar__lista li{display:flex;flex-direction:column;justify-content:center;min-height:var(--tactil);padding:6px 12px;border-radius:8px;cursor:pointer;font:500 15px/20px var(--font-texto);color:var(--tinta)}
.cimo-autocompletar__lista li small{font:400 13px/18px var(--font-datos);color:var(--tinta-suave)}
.cimo-autocompletar__lista li[aria-selected="true"]{background:var(--activo-fondo);color:var(--activo-tinta)}
.cimo-autocompletar__lista mark{background:transparent;color:inherit;font-weight:700}

/* ---- Acordeón: secciones que se pliegan (con details/summary nativo) ---- */
.cimo-acordeon{border:1px solid var(--linea);border-radius:var(--radio-tarjeta);background:var(--superficie);overflow:hidden}
.cimo-acordeon details + details{border-top:1px solid var(--linea)}
.cimo-acordeon summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;cursor:pointer;list-style:none;font:600 15px/1.3 var(--font-texto);color:var(--tinta)}
.cimo-acordeon summary::-webkit-details-marker{display:none}
.cimo-acordeon summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2px solid var(--tinta-suave);border-bottom:2px solid var(--tinta-suave);transform:rotate(45deg) translate(-2px,-2px)}
.cimo-acordeon details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.cimo-acordeon summary:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-acordeon__cuerpo{padding:0 16px 16px;color:var(--tinta-suave);font:400 14.5px/21px var(--font-texto)}

/* ---- Ajustes: renglones de configuración con su control a la derecha ---- */
.cimo-ajustes{border:1px solid var(--linea);border-radius:var(--radio-tarjeta);background:var(--superficie)}
.cimo-ajustes h3{margin:0;padding:16px 16px 4px;font:700 16px/22px var(--font-display);color:var(--tinta)}
.cimo-ajuste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;border-top:1px solid var(--linea)}
.cimo-ajustes h3 + .cimo-ajuste{border-top:0}
.cimo-ajuste__texto{flex:1 1 220px;min-width:0}
.cimo-ajuste__texto b{display:block;font:600 15px/20px var(--font-texto);color:var(--tinta)}
.cimo-ajuste__texto span{display:block;font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}

/* CIMO — componentes de trabajo diario (salen de lo que SINCO hace bien y de lo que hace mal).
   Mismas reglas: color por token, sin var() con reserva, tocables de 44px, cortes en pareja 899.98 / 900. */

/* ---- Barra de filtros plegable: se recoge al consultar y deja los filtros como chips ---- */
.cimo-filtros{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-tarjeta)}
.cimo-filtros__cabeza{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:56px;padding:6px 8px 6px 16px}
.cimo-filtros__cabeza > b{font:700 15px/20px var(--font-texto);color:var(--tinta)}
.cimo-filtros__cabeza .cimo-chips{flex:1 1 240px}
.cimo-filtros__cuerpo{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 16px;padding:12px 16px 16px;border-top:1px solid var(--linea)}
.cimo-filtros__cuerpo[hidden]{display:none}
.cimo-filtros__acciones{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}

/* ---- Grilla: barra de herramientas, grupos plegables y tarjetas por debajo de 900px ---- */
.cimo-grilla{display:flex;flex-direction:column;gap:10px;min-width:0}
.cimo-grilla__barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cimo-grilla__barra > b{margin-right:auto;font:700 16px/22px var(--font-display);color:var(--tinta)}
.cimo-grilla__barra > b small{font:500 13px/18px var(--font-texto);color:var(--tinta-suave);margin-left:6px}
.cimo-tabla .cimo-grupo td{background:var(--superficie-hundida);font-weight:600;padding:0 14px}
.cimo-grupo button{display:inline-flex;align-items:center;gap:8px;min-height:var(--tactil);padding:0;border:0;background:transparent;color:var(--tinta);font:600 14px/1.2 var(--font-texto);cursor:pointer}
.cimo-grupo button::before{content:"";width:8px;height:8px;border-right:2px solid var(--tinta-suave);border-bottom:2px solid var(--tinta-suave);transform:rotate(45deg) translate(-2px,-2px)}
.cimo-grupo button[aria-expanded="false"]::before{transform:rotate(-45deg)}
.cimo-grupo button:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-tabla td.cimo-celda-codigo{font-family:var(--font-datos);font-size:13px}
@media screen and (max-width:899.98px){
  .cimo-tabla--tarjetas thead{display:none}
  .cimo-tabla--tarjetas,.cimo-tabla--tarjetas tbody,.cimo-tabla--tarjetas tfoot,.cimo-tabla--tarjetas tr,.cimo-tabla--tarjetas td{display:block;width:auto}
  .cimo-tabla--tarjetas tbody tr{padding:12px 14px;border-bottom:1px solid var(--linea)}
  .cimo-tabla--tarjetas tbody tr:last-child{border-bottom:0}
  .cimo-tabla--tarjetas td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 0;border:0;text-align:right}
  .cimo-tabla--tarjetas td::before{content:attr(data-etiqueta);font:500 13px/18px var(--font-texto);color:var(--tinta-suave);text-align:left}
  .cimo-tabla--tarjetas td:first-child{font:700 15px/20px var(--font-texto);padding-bottom:6px}
  .cimo-tabla--tarjetas td:first-child::before{content:none}
  .cimo-tabla--tarjetas .cimo-grupo td{padding:0 14px}
  .cimo-tabla--tarjetas tfoot td{display:flex;justify-content:space-between;padding:10px 14px}
  .cimo-tabla--tarjetas tfoot td[colspan]{display:none}
  .cimo-tabla--tarjetas tfoot td::before{content:attr(data-etiqueta);font-weight:700;color:var(--tinta)}
}

/* ---- Documento: encabezado + detalle editable; el detalle se guarda línea por línea ---- */
.cimo-documento{display:flex;flex-direction:column;gap:16px;min-width:0}
.cimo-documento__cabeza{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;padding:16px;background:var(--superficie);
  border:1px solid var(--linea);border-radius:var(--radio-tarjeta)}
.cimo-documento__titulo{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cimo-documento__titulo h2{margin:0;font:700 20px/26px var(--font-display);color:var(--tinta)}
.cimo-documento__numero{font:500 13px/18px var(--font-datos);color:var(--tinta-suave)}
.cimo-detalle td{padding:6px 8px}
.cimo-detalle td .cimo-celda{box-sizing:border-box;width:100%;min-width:72px;height:var(--tactil);padding:0 10px;border:1px solid var(--linea-control);
  border-radius:8px;background:var(--campo);color:var(--tinta);font:400 15px/20px var(--font-texto)}
.cimo-detalle td .cimo-celda.num{text-align:right;font-variant-numeric:tabular-nums}
.cimo-detalle td .cimo-celda:focus-visible{outline:3px solid var(--foco);outline-offset:1px}
/* un mensaje bajo un campo NO mueve la linea de la fila: las celdas se alinean arriba y el estado se centra
   sobre la altura del campo (25/10/2026: con vertical-align:middle, Cantidad y Estado quedaban torcidos) */
.cimo-detalle td{vertical-align:top}
.cimo-detalle td .cimo-linea-estado{min-height:var(--tactil)}
.cimo-detalle tr[data-estado="error"] td{background:var(--peligro-suave)}
.cimo-detalle tr[data-estado="error"] .cimo-celda{border-color:var(--peligro);box-shadow:inset 0 0 0 1px var(--peligro)}
.cimo-linea-estado{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1.2 var(--font-texto);white-space:nowrap}
.cimo-linea-estado::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.cimo-linea-estado--sin-guardar{color:var(--alerta-tinta)}
.cimo-linea-estado--guardada{color:var(--marca-tinta)}
.cimo-linea-estado--error{color:var(--peligro)}
.cimo-detalle__bloqueado{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px dashed var(--linea-control);border-radius:var(--radio-tarjeta);
  color:var(--tinta-suave);font:400 14px/20px var(--font-texto)}
.cimo-detalle__bloqueado .cimo-ico{width:20px;height:20px}

/* ---- Presupuesto: el saldo donde se decide (presupuestado, comprometido, ejecutado, disponible) ---- */
.cimo-presupuesto{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-tarjeta);min-width:0}
.cimo-presupuesto > b{font:700 15px/20px var(--font-texto);color:var(--tinta)}
.cimo-presupuesto__barra{display:flex;height:12px;border-radius:var(--radio-pastilla);overflow:hidden;background:var(--superficie-hundida)}
.cimo-presupuesto__barra i{display:block;height:100%}
.cimo-presupuesto__barra .ejecutado{background:var(--accion)}
.cimo-presupuesto__barra .comprometido{background:var(--alerta-tinta)}
.cimo-presupuesto dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;margin:0}
.cimo-presupuesto dt{display:flex;align-items:center;gap:8px;font:500 13.5px/20px var(--font-texto);color:var(--tinta-suave)}
.cimo-presupuesto dt i{width:10px;height:10px;border-radius:2px;flex:none;background:var(--superficie-hundida);border:1px solid var(--linea-control)}
.cimo-presupuesto dt i.ejecutado{background:var(--accion);border-color:var(--accion)}
.cimo-presupuesto dt i.comprometido{background:var(--alerta-tinta);border-color:var(--alerta-tinta)}
.cimo-presupuesto dd{margin:0;font:500 14px/20px var(--font-texto);color:var(--tinta);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cimo-presupuesto .saldo{font-weight:700}
.cimo-presupuesto .saldo--negativo{color:var(--peligro)}

/* ---- Bloqueo: lo que no se puede hacer se muestra con su causa y con quién lo activa ---- */
.cimo-bloqueo{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--radio-control);background:var(--superficie-hundida);
  color:var(--tinta);font:400 14px/20px var(--font-texto)}
.cimo-bloqueo .cimo-ico{width:18px;height:18px;margin-top:1px;color:var(--tinta-suave)}
.cimo-bloqueo strong{font-weight:600}
.cimo-motivo{display:block;margin-top:6px;font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-motivo a{color:var(--enlace)}
/* El enlace de la causa queda en la frase, pero su área tocable llega a 44px */
.cimo-bloqueo a,.cimo-motivo a{position:relative}
.cimo-bloqueo a::after,.cimo-motivo a::after{content:"";position:absolute;inset:-14px -2px}

/* ---- Importar: plantilla → subir → validar → confirmar; la validación muestra cada error por fila ---- */
.cimo-validacion{display:flex;flex-direction:column;gap:10px;min-width:0}
.cimo-validacion__resumen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font:500 14px/20px var(--font-texto);color:var(--tinta)}
.cimo-validacion__resumen b{font-weight:700}
.cimo-validacion__resumen .con-error{color:var(--peligro);font-weight:700}
.cimo-validacion__resumen .cimo-segmentado{margin-left:auto}
.cimo-tabla tr[data-estado="error"] td{background:var(--peligro-suave)}
.cimo-tabla td.cimo-celda-error{box-shadow:inset 0 0 0 2px var(--peligro);font-weight:600}
.cimo-error-fila{display:block;margin-top:6px;font:600 13px/18px var(--font-texto);color:var(--peligro)}

/* ---- Maestro: alta en la primera fila, edición en la celda e historial de antes y después ---- */
.cimo-maestro .cimo-alta td{background:var(--superficie-hundida)}
.cimo-historial{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font:400 14px/20px var(--font-texto);color:var(--tinta)}
.cimo-historial li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px;border:1px solid var(--linea);border-radius:var(--radio-control);background:var(--superficie)}
.cimo-historial del{color:var(--tinta-suave);text-decoration-thickness:1px}
.cimo-historial ins{text-decoration:none;font-weight:600}
.cimo-historial small{grid-column:1 / -1;font-size:12.5px;line-height:18px;color:var(--tinta-suave)}

/* ---- Informes: elegir el tipo, filtrar, ver antes de bajar ---- */
.cimo-informes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cimo-informe{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;padding:14px;border:1px solid var(--linea-control);
  border-radius:var(--radio-tarjeta);background:var(--superficie);cursor:pointer}
.cimo-informe input{position:absolute;opacity:0;width:1px;height:1px}
.cimo-informe .cimo-ico{grid-row:1 / span 2;width:28px;height:28px;color:var(--tinta-suave)}
.cimo-informe b{font:700 15px/20px var(--font-texto);color:var(--tinta)}
.cimo-informe span{font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-informe:has(input:checked){background:var(--activo-fondo);border-color:var(--activo-tinta);box-shadow:inset 0 3px 0 var(--activo-filo)}
.cimo-informe:has(input:checked) .cimo-ico{color:var(--activo-tinta)}
.cimo-informe:has(input:focus-visible){outline:3px solid var(--foco);outline-offset:2px}
.cimo-vista-previa{min-height:160px;max-height:360px;overflow:auto;padding:16px;border:1px solid var(--linea);border-radius:var(--radio-tarjeta);background:var(--superficie)}
.cimo-descargas{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}

/* ---- Requisitos: lo que falta configurar, revisado al abrir la pantalla, con su enlace ---- */
.cimo-requisitos{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--alerta-tinta);border-radius:var(--radio-tarjeta);background:var(--alerta-suave);color:var(--tinta)}
.cimo-requisitos > b{font:700 15px/20px var(--font-texto)}
.cimo-requisitos ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.cimo-requisitos li{display:flex;align-items:center;gap:10px;min-height:var(--tactil);font:400 14px/20px var(--font-texto)}
.cimo-requisitos li .cimo-ico{width:20px;height:20px}
.cimo-requisitos li[data-estado="listo"] .cimo-ico{color:var(--marca-tinta)}
.cimo-requisitos li[data-estado="falta"] .cimo-ico{color:var(--alerta-tinta)}
.cimo-requisitos li a{margin-left:auto;color:var(--enlace);font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;min-height:var(--tactil)}

/* CIMO — lo que pidieron los inventarios de las apps de operación y de los paneles. Mismas reglas que el resto:
   color solo por token, sin var() con reserva, nada translúcido para foco, estado o selección, tocables de 44px
   (o agrandados con ::after) y cortes en pareja 899.98 / 900. */

/* ---- Estado: cinco tonos para cualquier estado, y Anulado ---- */
/* Las apps tienen más estados que las cinco pastillas (vigente, por vencer, en revisión, vencido, en cola…).
   Cada uno toma uno de los cinco tonos y siempre lleva su palabra. */
.cimo-estado--neutro{background:var(--estado-borrador);color:var(--estado-borrador-tinta)}
.cimo-estado--espera{background:var(--estado-enviado);color:var(--estado-enviado-tinta)}
.cimo-estado--bien{background:var(--estado-aprobado);color:var(--estado-aprobado-tinta)}
.cimo-estado--informado{background:var(--estado-recibido);color:var(--estado-recibido-tinta)}
.cimo-estado--problema{background:var(--estado-devuelto);color:var(--estado-devuelto-tinta)}
.cimo-estado--anulado{background:var(--superficie);color:var(--tinta-suave);box-shadow:inset 0 0 0 1px var(--linea-control)}

/* ---- Botón ocupado: dice lo que hace («Enviando…») y una dovela gira; quieta si la persona pidió menos movimiento ---- */
.cimo-btn[aria-busy="true"]{pointer-events:none}
.cimo-btn[aria-busy="true"]::before{content:"";width:16px;height:16px;flex:none;box-sizing:border-box;border-radius:50%;
  border:2.5px solid currentColor;border-right-color:transparent;border-bottom-color:transparent}
@media (prefers-reduced-motion:no-preference){.cimo-btn[aria-busy="true"]::before{animation:cimo-giro .8s linear infinite}}
@keyframes cimo-giro{to{transform:rotate(1turn)}}

/* ---- Botón de solo icono, cuadrado de 44px (barras de herramientas, visor) ---- */
.cimo-icobtn{display:inline-grid;place-items:center;width:var(--tactil);height:var(--tactil);flex:none;padding:0;border:0;border-radius:var(--radio-control);
  background:transparent;color:var(--tinta);cursor:pointer}
.cimo-icobtn .cimo-ico{width:20px;height:20px}
.cimo-icobtn:hover{background:var(--superficie-hundida)}
.cimo-icobtn:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-icobtn:disabled{color:var(--marcador);cursor:default;background:transparent}

/* ---- Notificación: tipos y tiempo visible para deshacer ---- */
.cimo-toast{overflow:hidden}
.cimo-toast--alerta .cimo-ico{color:var(--toast-alerta)}
.cimo-toast--peligro .cimo-ico{color:var(--toast-peligro)}
.cimo-toast__tiempo{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--toast-enlace);transform-origin:left}
@media (prefers-reduced-motion:no-preference){.cimo-toast__tiempo{animation:cimo-tiempo 8s linear forwards}}
@keyframes cimo-tiempo{to{transform:scaleX(0)}}

/* ---- Ventana con <dialog>: showModal() atrapa el foco y Escape la cierra sin código ---- */
dialog.cimo-ventana{margin:auto;border:0;max-width:none}
dialog.cimo-ventana:not([open]){display:none}
dialog.cimo-ventana::backdrop{background:var(--velo)}
@media (max-width:899.98px){dialog.cimo-ventana{margin:auto 0 0;width:100%;max-height:92dvh}}

/* ---- Pestañas: subpestañas dentro de una pestaña ---- */
.cimo-pestanas--sub{gap:6px;padding:6px 0;border-bottom:0}
.cimo-pestanas--sub [role="tab"]{min-height:36px;padding:0 12px;border-radius:var(--radio-pastilla);font-size:14px}
.cimo-pestanas--sub [role="tab"]::after,.cimo-pestanas--sub [role="tab"][aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px;height:auto;background:none}
.cimo-pestanas--sub [role="tab"][aria-selected="true"]{background:var(--activo-fondo);color:var(--activo-tinta)}

/* ---- Pasos: estados de cada paso, pasos que se tocan y versión lateral ---- */
.cimo-pasos li > a,.cimo-pasos li > button{display:flex;flex-direction:column;gap:2px;min-height:var(--tactil);padding:0;border:0;background:none;color:inherit;
  font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.cimo-pasos li > a:focus-visible,.cimo-pasos li > button:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-pasos li small{font:500 12px/16px var(--font-texto);color:var(--tinta-suave)}
.cimo-pasos li[data-estado="falta"]::before{background:var(--peligro-suave);border-color:var(--peligro);color:var(--peligro)}
.cimo-pasos li[data-estado="falta"] small{color:var(--peligro);font-weight:700}
.cimo-pasos li[data-estado="no-aplica"]::before,.cimo-pasos li[data-estado="omitido"]::before{background:var(--superficie);border-style:dashed}
.cimo-pasos--lateral{grid-auto-flow:row;grid-auto-columns:auto;gap:2px}
.cimo-pasos--lateral li{flex-direction:row;align-items:stretch;gap:12px}
.cimo-pasos--lateral li::before{width:26px;height:auto;flex:none;clip-path:polygon(0 0,100% 8%,100% 92%,0 100%)}
.cimo-pasos--lateral li:last-child::before{clip-path:polygon(0 0,100% 14%,100% 86%,0 100%)}
.cimo-pasos--lateral li > a,.cimo-pasos--lateral li > button{flex:1;justify-content:center;padding:4px 0}
@media (max-width:899.98px){.cimo-pasos--lateral li span{display:block}}
.cimo-asistente{display:grid;gap:20px}
.cimo-asistente__pie{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:16px;border-top:1px solid var(--linea)}
.cimo-asistente__cuenta{margin-right:auto;font:600 14px/20px var(--font-texto);color:var(--tinta-suave)}

/* ---- Elección: «todas / algunas» y tarjeta de opción ---- */
.cimo-eleccion--casilla input:indeterminate + .cimo-eleccion__marca{background:var(--accion);border-color:var(--accion)}
.cimo-eleccion--casilla input:indeterminate + .cimo-eleccion__marca::after{content:"";width:10px;height:3px;background:var(--en-accion)}
.cimo-eleccion--casilla input:indeterminate + .cimo-eleccion__marca .cimo-ico{display:none}
.cimo-eleccion-grupo{display:flex;flex-direction:column;margin:0;padding:0;border:0;min-width:0}
.cimo-eleccion-grupo__hijos{display:flex;flex-direction:column;padding-left:32px}
.cimo-opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.cimo-opcion{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:2px 12px;padding:14px 16px;
  border:1px solid var(--linea-control);border-radius:var(--radio-tarjeta);background:var(--superficie);cursor:pointer}
.cimo-opcion input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cimo-opcion .cimo-eleccion__marca{grid-row:span 2;margin-top:1px;border-radius:50%}
.cimo-opcion input:checked + .cimo-eleccion__marca{border-color:var(--accion)}
.cimo-opcion input:checked + .cimo-eleccion__marca::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accion)}
.cimo-opcion b{font:600 15px/20px var(--font-texto);color:var(--tinta)}
.cimo-opcion > span:last-child{font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-opcion:has(input:checked){border-color:var(--activo-tinta);background:var(--activo-fondo);box-shadow:inset 0 3px 0 var(--activo-filo)}
.cimo-opcion:has(input:focus-visible){outline:3px solid var(--foco);outline-offset:2px}

/* ---- Subir: cámara o archivo, avance, miniatura y error en la propia fila ---- */
.cimo-subir__botones{display:flex;flex-wrap:wrap;gap:10px}
.cimo-subir__botones label{position:relative}
.cimo-subir__botones input{position:absolute;inset:0;opacity:0;cursor:pointer}
.cimo-archivo img{width:44px;height:44px;border-radius:6px;object-fit:cover}
.cimo-archivo .cimo-progreso__barra{grid-column:2}
.cimo-archivo--error{border-color:var(--peligro)}
.cimo-archivo--error small{color:var(--peligro);font-weight:600}

/* ---- Progreso: barra con su cifra, y aro para lo que cabe en poco espacio ---- */
.cimo-progreso{display:grid;gap:6px;min-width:0}
.cimo-progreso__fila{display:flex;justify-content:space-between;gap:12px;font:600 13px/18px var(--font-texto);color:var(--tinta)}
.cimo-progreso__fila span:last-child{font-weight:500;font-variant-numeric:tabular-nums;color:var(--tinta-suave)}
.cimo-progreso__barra{height:8px;border-radius:var(--radio-pastilla);background:var(--superficie-hundida);overflow:hidden}
.cimo-progreso__barra i{display:block;height:100%;background:var(--accion);border-radius:inherit}
.cimo-aro{--valor:0;position:relative;display:inline-grid;place-items:center;width:56px;height:56px;flex:none;border-radius:50%;
  background:conic-gradient(var(--accion) calc(var(--valor) * 1%),var(--superficie-hundida) 0);font:700 13px/1 var(--font-texto);color:var(--tinta);font-variant-numeric:tabular-nums}
.cimo-aro::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--superficie)}
.cimo-aro span{position:relative}

/* ---- Cajón: en el teléfono sube desde abajo como una hoja ---- */
@media (max-width:899.98px){
  .cimo-cajon{top:auto;left:0;width:100%;max-height:88dvh;border-left:0;border-top:1px solid var(--linea);border-radius:var(--radio-tarjeta) var(--radio-tarjeta) 0 0}
}

/* ---- Tabla avanzada: ordenar por columna, selección y «Ver más» ---- */
.cimo-tabla th:has(> button){padding-top:0;padding-bottom:0}
.cimo-tabla th button{display:inline-flex;align-items:center;gap:6px;min-height:var(--tactil);margin:0 -8px;padding:0 8px;border:0;border-radius:6px;
  background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.cimo-tabla th button .cimo-ico{width:14px;height:14px}
.cimo-tabla th[aria-sort="ascending"] button,.cimo-tabla th[aria-sort="descending"] button{color:var(--tinta)}
.cimo-tabla th button:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-tabla .cimo-col-sel{width:44px;padding-top:0;padding-bottom:0}
.cimo-tabla .cimo-col-sel .cimo-eleccion{min-height:var(--tactil)}
.cimo-tabla tbody tr[aria-selected="true"] td{background:var(--activo-fondo)}
.cimo-ver-mas{display:flex;justify-content:center;padding:10px}

/* ---- Barra de lista: buscar, chips con conteo, ordenar, exportar y la acción principal; se monta una vez ---- */
.cimo-barra-lista{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cimo-barra-lista__fin{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.cimo-buscador{position:relative;flex:1 1 260px;min-width:0}
.cimo-buscador .cimo-ico{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--tinta-suave);pointer-events:none}
.cimo-buscador input{box-sizing:border-box;width:100%;min-height:var(--tactil);padding:0 14px 0 42px;border:1px solid var(--linea-control);border-radius:var(--radio-control);
  background:var(--campo);color:var(--tinta);font:400 16px/22px var(--font-texto)}
.cimo-buscador input::placeholder{color:var(--marcador);opacity:1}
.cimo-buscador input:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-chip__n{font:700 12px/1 var(--font-texto);font-variant-numeric:tabular-nums;color:var(--tinta-suave)}
.cimo-chip[aria-pressed="true"] .cimo-chip__n{color:inherit}
.cimo-barra-lista .cimo-chips{flex-basis:100%}

/* ---- Rango de fechas con atajos de periodo ---- */
.cimo-rango{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px}
.cimo-rango > .cimo-campo{flex:1 1 150px}
.cimo-rango > .cimo-chips{flex-basis:100%}

/* ---- Campana: el panel de avisos ---- */
.cimo-avisos{width:min(380px,100%);box-sizing:border-box;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-tarjeta);box-shadow:var(--sombra)}
.cimo-avisos__cabeza{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-bottom:1px solid var(--linea)}
.cimo-avisos__cabeza b{flex:1;font:700 16px/22px var(--font-display);color:var(--tinta)}
.cimo-avisos ul{margin:0;padding:6px;list-style:none;max-height:420px;overflow:auto}
.cimo-avisos li a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;min-height:var(--tactil);padding:10px;border-radius:8px;color:var(--tinta);text-decoration:none}
.cimo-avisos li a:hover,.cimo-avisos li a:focus-visible{background:var(--superficie-hundida);outline:none}
.cimo-avisos li a:focus-visible{box-shadow:inset 0 0 0 2px var(--foco)}
.cimo-avisos li a .cimo-ico{grid-row:span 2;width:20px;height:20px;margin-top:2px;color:var(--tinta-suave)}
.cimo-avisos li a span{font:500 14px/20px var(--font-texto)}
.cimo-avisos li a small{font:400 12.5px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-avisos li[data-leido="no"] a{box-shadow:inset 3px 0 0 var(--activo-filo)}
.cimo-avisos li[data-leido="no"] a span{font-weight:700}
.cimo-avisos__pie{padding:6px;border-top:1px solid var(--linea);text-align:center}

/* ---- Visor de documentos y fotos ---- */
.cimo-visor{display:flex;flex-direction:column;min-width:0;border:1px solid var(--linea);border-radius:var(--radio-tarjeta);background:var(--superficie);overflow:hidden}
.cimo-visor__barra{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:4px 6px;border-bottom:1px solid var(--linea)}
.cimo-visor__barra b{flex:1 1 160px;min-width:0;padding:0 8px;font:600 14px/20px var(--font-texto);color:var(--tinta);overflow-wrap:anywhere}
.cimo-visor__dato{min-width:52px;text-align:center;font:600 13px/18px var(--font-texto);font-variant-numeric:tabular-nums;color:var(--tinta-suave)}
.cimo-visor__lienzo{display:grid;place-items:center;min-height:240px;padding:20px;background:var(--superficie-hundida);overflow:auto}
.cimo-visor__hoja{display:flex;flex-direction:column;gap:8px;width:min(100%,260px);aspect-ratio:1 / 1.414;padding:22px;box-sizing:border-box;background:var(--papel);box-shadow:var(--sombra)}
.cimo-visor__hoja i{display:block;height:6px;border-radius:2px;background:var(--papel-linea)}

/* ---- Evidencia: firma, foto y ubicación ---- */
.cimo-firma{display:grid;gap:8px}
.cimo-firma__lienzo{position:relative;height:160px;border:1px solid var(--linea-control);border-radius:var(--radio-control);background:var(--papel);touch-action:none;overflow:hidden}
.cimo-firma__lienzo canvas,.cimo-firma__lienzo svg{display:block;width:100%;height:100%}
.cimo-firma__lienzo::after{content:"";position:absolute;left:24px;right:24px;bottom:36px;border-bottom:1px solid var(--papel-linea)}
.cimo-firma__trazo{fill:none;stroke:var(--papel-tinta);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cimo-firma__pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-ubicacion{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--linea);border-radius:var(--radio-control);background:var(--superficie);font:500 14px/20px var(--font-texto);color:var(--tinta)}
.cimo-ubicacion > span{flex:1 1 180px;min-width:0}
.cimo-ubicacion small{display:block;font:400 12.5px/18px var(--font-texto);color:var(--tinta-suave)}

/* ---- Avatar y menú de usuario ---- */
.cimo-avatar{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--activo-fondo);color:var(--activo-tinta);
  font:700 15px/1 var(--font-texto);letter-spacing:.02em;overflow:hidden}
.cimo-avatar--chico{width:32px;height:32px;font-size:13px}
.cimo-avatar--grande{width:56px;height:56px;font-size:20px}
.cimo-avatar img{width:100%;height:100%;object-fit:cover}
.cimo-usuario{display:flex;align-items:center;gap:12px;padding:10px 12px}
.cimo-usuario b{display:block;font:600 15px/20px var(--font-texto);color:var(--tinta)}
.cimo-usuario small{display:block;font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-avatar-btn{position:relative;display:inline-grid;place-items:center;width:var(--tactil);height:var(--tactil);padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.cimo-avatar-btn:focus-visible{outline:3px solid var(--foco);outline-offset:0}

/* ---- Conexión: en línea, sin señal o enviando lo guardado ---- */
.cimo-conexion{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--radio-pastilla);font:600 12.5px/1 var(--font-texto);white-space:nowrap}
.cimo-conexion .cimo-ico{width:14px;height:14px}
.cimo-conexion--en-linea{background:var(--estado-aprobado);color:var(--estado-aprobado-tinta)}
.cimo-conexion--sin-senal{background:var(--estado-devuelto);color:var(--estado-devuelto-tinta)}
.cimo-conexion--enviando{background:var(--estado-enviado);color:var(--estado-enviado-tinta)}

/* ---- Ayuda: explica un concepto del negocio en una frase; no explica cómo se usa un control ---- */
.cimo-ayuda{position:relative;display:inline-flex;vertical-align:middle}
.cimo-ayuda > button{position:relative;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--tinta-suave);cursor:pointer}
.cimo-ayuda > button::after{content:"";position:absolute;inset:-8px}
.cimo-ayuda > button .cimo-ico{width:18px;height:18px}
.cimo-ayuda > button:focus-visible{outline:3px solid var(--foco);outline-offset:0}
.cimo-ayuda__globo{position:absolute;top:calc(100% + 8px);left:-8px;z-index:30;width:max-content;max-width:min(300px,calc(100vw - 48px));padding:12px 14px;
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-control);box-shadow:var(--sombra);font:400 14px/20px var(--font-texto);color:var(--tinta)}
.cimo-ayuda__globo[hidden]{display:none}
.cimo-ayuda__globo a{display:inline-block;margin-top:6px;font-weight:600}
@media (max-width:899.98px){.cimo-ayuda__globo{position:fixed;left:16px;right:16px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;box-shadow:var(--sombra-alta)}}

/* ---- Corridas: estado de un proceso automático, su modo, su horario y su registro ---- */
.cimo-corridas{display:grid;gap:16px}
.cimo-corridas__lista{display:grid;gap:8px}
.cimo-corridas__control{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cimo-dias-semana{display:flex;flex-wrap:wrap;gap:6px}
.cimo-dias-semana button{width:var(--tactil);height:var(--tactil);padding:0;border:1px solid var(--linea-control);border-radius:var(--radio-control);background:var(--superficie);
  color:var(--tinta);font:600 14px/1 var(--font-texto);cursor:pointer}
.cimo-dias-semana button[aria-pressed="true"]{background:var(--activo-fondo);border-color:var(--activo-tinta);color:var(--activo-tinta)}
.cimo-dias-semana button:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-corrida{border:1px solid var(--linea);border-radius:var(--radio-control);background:var(--superficie)}
.cimo-corrida summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 12px;min-height:52px;padding:8px 14px;cursor:pointer;list-style:none}
.cimo-corrida summary::-webkit-details-marker{display:none}
.cimo-corrida summary .cimo-estado{grid-row:span 2}
.cimo-corrida summary b{font:600 14.5px/20px var(--font-texto);color:var(--tinta)}
.cimo-corrida summary small{grid-column:2;font:400 12.5px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-corrida summary .cimo-num{grid-column:3;grid-row:1 / span 2;font:500 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-corrida summary:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-registro{margin:0;padding:12px 14px;border-top:1px solid var(--linea);background:var(--superficie-hundida);font:400 12.5px/18px var(--font-datos);color:var(--tinta);
  white-space:pre-wrap;overflow-x:auto;max-height:240px}
.cimo-actualizado{font:400 12.5px/18px var(--font-texto);color:var(--tinta-suave)}

/* ---- Accesos: persona por área o empresa, con su rol ---- */
.cimo-accesos th:first-child,.cimo-accesos td:first-child{position:sticky;left:0;z-index:1;background:var(--superficie);box-shadow:inset -1px 0 0 var(--linea)}
.cimo-accesos td:first-child small{display:block;font:400 12.5px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-accesos select{min-height:var(--tactil);padding:0 8px;border:1px solid var(--linea-control);border-radius:8px;background:var(--campo);color:var(--tinta);font:500 14px/1 var(--font-texto)}
.cimo-accesos select:focus-visible{outline:3px solid var(--foco);outline-offset:2px}

/* ---- Entrada: con la cuenta de Microsoft, o con un código al correo, en pasos ---- */
.cimo-entrada{display:grid;gap:16px;width:min(400px,100%);padding:28px 24px;box-sizing:border-box;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-tarjeta)}
.cimo-entrada h1{margin:0;font:800 24px/30px var(--font-display);color:var(--tinta)}
.cimo-entrada p{margin:0;font:400 14.5px/21px var(--font-texto);color:var(--tinta-suave)}
.cimo-entrada .cimo-btn{width:100%}
.cimo-separador{display:flex;align-items:center;gap:12px;font:500 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-separador::before,.cimo-separador::after{content:"";flex:1;height:1px;background:var(--linea)}
.cimo-campo input.cimo-codigo-entrada{height:60px;text-align:center;letter-spacing:.45em;font:500 26px/1 var(--font-datos)}

/* ---- Gráficas: barras, curva S, dona, minibarras; texto en tinta, color solo en las marcas ---- */
.cimo-grafica{position:relative;display:grid;gap:10px;min-width:0;padding:16px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-tarjeta)}
.cimo-grafica__cabeza{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.cimo-grafica__titulo{flex:1 1 200px;margin:0;font:700 16px/22px var(--font-display);color:var(--tinta)}
.cimo-grafica__nota{font:400 12.5px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-grafica svg{display:block;width:100%;height:auto;overflow:visible}
.cimo-grafica .rejilla{stroke:var(--linea);stroke-width:1}
.cimo-grafica .base{stroke:var(--linea-control);stroke-width:1}
.cimo-grafica .eje{fill:var(--tinta-suave);font:400 12px var(--font-texto)}
.cimo-grafica .valor{fill:var(--tinta);font:600 12px var(--font-texto)}
.cimo-grafica .trazo{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cimo-grafica .mira{stroke:var(--linea-control);stroke-width:1}
.cimo-grafica .punto{stroke:var(--superficie);stroke-width:2}
.cimo-s1{fill:var(--serie-1);stroke:var(--serie-1)}.cimo-s2{fill:var(--serie-2);stroke:var(--serie-2)}.cimo-s3{fill:var(--serie-3);stroke:var(--serie-3)}
.cimo-s4{fill:var(--serie-4);stroke:var(--serie-4)}.cimo-s5{fill:var(--serie-5);stroke:var(--serie-5)}
.cimo-grafica .trazo.cimo-s1,.cimo-grafica .trazo.cimo-s2{fill:none}
.cimo-leyenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none;font:500 13px/18px var(--font-texto);color:var(--tinta)}
.cimo-leyenda li{display:inline-flex;align-items:center;gap:6px}
.cimo-leyenda i{display:inline-block;width:12px;height:12px;border-radius:3px}
.cimo-leyenda i.cimo-s1{background:var(--serie-1)}.cimo-leyenda i.cimo-s2{background:var(--serie-2)}.cimo-leyenda i.cimo-s3{background:var(--serie-3)}
.cimo-leyenda i.cimo-s4{background:var(--serie-4)}.cimo-leyenda i.cimo-s5{background:var(--serie-5)}
.cimo-grafica__tip{position:absolute;z-index:5;min-width:140px;padding:8px 10px;background:var(--superficie);border:1px solid var(--linea);border-radius:8px;box-shadow:var(--sombra);
  font:500 13px/18px var(--font-texto);color:var(--tinta);pointer-events:none}
.cimo-grafica__tip[hidden]{display:none}
.cimo-grafica__tip b{display:block;font-weight:700}
.cimo-grafica__tip span{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.cimo-riesgos{display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));gap:3px;font:600 13px/18px var(--font-texto)}
.cimo-riesgos > span{display:grid;place-items:center;min-height:40px;border-radius:6px;font-variant-numeric:tabular-nums}
.cimo-riesgos > .eje{min-height:0;padding:0 6px;color:var(--tinta-suave);font-weight:500;font-size:12px}
.cimo-riesgos [data-nivel="bajo"]{background:var(--estado-aprobado);color:var(--estado-aprobado-tinta)}
.cimo-riesgos [data-nivel="medio"]{background:var(--estado-enviado);color:var(--estado-enviado-tinta)}
.cimo-riesgos [data-nivel="alto"]{background:var(--estado-devuelto);color:var(--estado-devuelto-tinta)}

/* ---- Impresión: la hoja que sale del navegador (el bloque @media print está al final de cimo.css) ---- */
.cimo-solo-impresion{display:none}
.cimo-hoja-impresion{display:grid;gap:14px;overflow-x:auto;padding:28px 30px;background:var(--papel);color:var(--papel-tinta);border:1px solid var(--linea);font:400 12.5px/18px var(--font-texto)}
.cimo-hoja-impresion__cabeza{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:12px;border-bottom:2px solid var(--papel-tinta)}
.cimo-hoja-impresion__cabeza h2{margin:0;font:800 20px/26px var(--font-display);color:var(--papel-tinta)}
.cimo-hoja-impresion small,.cimo-hoja-impresion__pie{color:var(--papel-suave)}
.cimo-hoja-impresion table{width:100%;border-collapse:collapse}
.cimo-hoja-impresion th{padding:6px 8px;border-bottom:1px solid var(--papel-tinta);text-align:left;font:700 11.5px/16px var(--font-texto);text-transform:uppercase;letter-spacing:.03em;color:var(--papel-tinta)}
.cimo-hoja-impresion td{padding:6px 8px;border-bottom:1px solid var(--papel-linea);color:var(--papel-tinta)}
.cimo-hoja-impresion .num{text-align:right;font-variant-numeric:tabular-nums}
.cimo-hoja-impresion tfoot td{font-weight:700;border-top:2px solid var(--papel-tinta);border-bottom:0}
.cimo-hoja-impresion__pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid var(--papel-linea);font-size:12px}
.cimo-hoja-impresion .cimo-logo .p{fill:var(--azul)}.cimo-hoja-impresion .cimo-logo .a{fill:var(--papel-clave)}

/* ---- Paneles: lista y detalle con separador que se arrastra; en el teléfono, uno a la vez ---- */
.cimo-paneles{--panel-lista:340px;display:grid;grid-template-columns:var(--panel-lista) auto minmax(0,1fr);min-height:380px;
  border:1px solid var(--linea);border-radius:var(--radio-tarjeta);background:var(--superficie);overflow:hidden}
.cimo-paneles__lista{min-width:0;overflow:auto}
.cimo-paneles__detalle{min-width:0;overflow:auto;padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cimo-separador-panel{position:relative;width:1px;background:var(--linea);cursor:col-resize}
.cimo-separador-panel::after{content:"";position:absolute;top:0;bottom:0;left:-22px;width:45px}
.cimo-separador-panel::before{content:"";position:absolute;top:50%;left:-3px;width:7px;height:28px;margin-top:-14px;border-radius:3px;background:var(--linea-control)}
.cimo-separador-panel:focus-visible{outline:3px solid var(--foco);outline-offset:0}
.cimo-lista-item{position:relative;display:grid;gap:2px;min-height:var(--tactil);padding:12px 16px;border-bottom:1px solid var(--linea);color:var(--tinta);text-decoration:none;font:600 14.5px/20px var(--font-texto)}
.cimo-lista-item small{font:400 12.5px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-lista-item:hover{background:var(--superficie-hundida)}
.cimo-lista-item[aria-current="true"]{background:var(--activo-fondo);box-shadow:inset 3px 0 0 var(--activo-filo)}
.cimo-lista-item:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
@media (max-width:899.98px){
  .cimo-paneles{grid-template-columns:minmax(0,1fr)}
  .cimo-separador-panel,.cimo-paneles__detalle{display:none}
  .cimo-paneles--detalle .cimo-paneles__lista{display:none}
  .cimo-paneles--detalle .cimo-paneles__detalle{display:flex}
}

/* ---- Correo: vista previa del correo HTML (el correo real va con estilos en línea, ver apps/correo-plantilla.html) ---- */
.cimo-correo{width:min(600px,100%);margin:0 auto;background:var(--papel);color:var(--papel-tinta);border:1px solid var(--papel-linea);font:400 15px/22px var(--font-texto)}
.cimo-correo__cabeza{padding:18px 24px;background:var(--azul)}
.cimo-correo__cuerpo{display:grid;gap:12px;padding:24px}
.cimo-correo__cuerpo h2{margin:0;font:800 22px/28px var(--font-display);color:var(--papel-tinta)}
.cimo-correo__cuerpo p{margin:0}
.cimo-correo__boton{justify-self:start;display:inline-block;padding:12px 20px;border-radius:8px;background:var(--azul);color:var(--logo-sobre-marca);font-weight:700;text-decoration:none}
.cimo-correo__pie{padding:14px 24px;border-top:1px solid var(--papel-linea);font-size:12.5px;line-height:18px;color:var(--papel-suave)}
.cimo-correo .cimo-logo .p,.cimo-correo .cimo-logo .a{fill:var(--logo-sobre-marca)}
.cimo-correo .cimo-logo .a{fill:var(--menta)}

/* ---- Barra de cambios sin guardar ---- */
.cimo-sin-guardar{position:sticky;bottom:12px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radio-tarjeta);
  background:var(--tinta);color:var(--superficie);box-shadow:var(--sombra-alta)}
.cimo-sin-guardar[hidden]{display:none}
.cimo-sin-guardar b{margin-right:auto;font:600 15px/1.3 var(--font-texto)}
.cimo-sin-guardar .cimo-btn--discreto{color:var(--toast-enlace)}

/* ---- Hilo de comentarios con menciones ---- */
.cimo-hilo{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.cimo-hilo > li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px}
.cimo-hilo > li > .cimo-avatar{grid-row:span 2}
.cimo-hilo b{font:600 14px/20px var(--font-texto);color:var(--tinta)}
.cimo-hilo time{margin-left:8px;font:400 12.5px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-hilo p{margin:0;font:400 14.5px/21px var(--font-texto);color:var(--tinta)}
.cimo-mencion{padding:0 4px;border-radius:4px;background:var(--activo-fondo);color:var(--activo-tinta);font-weight:600}
.cimo-responder{display:grid;gap:10px}
.cimo-responder__acciones{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}

/* ---- Árbol plegable (capítulos y subcapítulos del presupuesto, carpetas) ---- */
.cimo-arbol,.cimo-arbol ul{margin:0;padding:0;list-style:none}
.cimo-arbol ul{margin-left:19px;padding-left:12px;border-left:1px solid var(--linea)}
.cimo-arbol summary,.cimo-arbol__hoja{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:var(--tactil);padding:0 10px;
  border-radius:8px;font:500 14.5px/20px var(--font-texto);color:var(--tinta)}
.cimo-arbol summary{cursor:pointer;list-style:none}
.cimo-arbol summary::-webkit-details-marker{display:none}
.cimo-arbol summary::before{content:"";width:7px;height:7px;margin-left:2px;border-right:2px solid var(--tinta-suave);border-bottom:2px solid var(--tinta-suave);transform:rotate(-45deg)}
.cimo-arbol details[open] > summary::before{transform:rotate(45deg)}
.cimo-arbol__hoja::before{content:""}
.cimo-arbol summary:hover{background:var(--superficie-hundida)}
.cimo-arbol summary:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-arbol .cimo-codigo{color:var(--tinta-suave);margin-right:8px}
.cimo-arbol .num{font-variant-numeric:tabular-nums;font-size:14px}

/* ---- Multiselección con buscador ---- */
.cimo-multi{position:relative}
.cimo-multi__campo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:var(--campo-alto);padding:6px 10px;box-sizing:border-box;
  border:1px solid var(--linea-control);border-radius:var(--radio-control);background:var(--campo)}
.cimo-multi__campo:focus-within{outline:3px solid var(--foco);outline-offset:2px}
.cimo-multi__campo input{flex:1 1 120px;min-width:0;min-height:36px;padding:0 4px;border:0;background:transparent;color:var(--tinta);font:400 16px/22px var(--font-texto);outline:none}
.cimo-multi__campo input::placeholder{color:var(--marcador);opacity:1}
.cimo-multi__campo .cimo-chip{min-height:32px}
.cimo-multi__campo .cimo-chip::after{inset:-6px 0}
.cimo-multi .cimo-autocompletar__lista li{position:relative;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}
.cimo-multi .cimo-autocompletar__lista li::before{content:"";width:18px;height:18px;flex:none;box-sizing:border-box;border:2px solid var(--linea-control);border-radius:4px;background:var(--campo)}
.cimo-multi .cimo-autocompletar__lista li[aria-selected="true"]{background:transparent;color:var(--tinta)}
.cimo-multi .cimo-autocompletar__lista li[aria-selected="true"]::before{background:var(--accion);border-color:var(--accion)}
.cimo-multi .cimo-autocompletar__lista li[aria-selected="true"]::after{content:"";position:absolute;left:16px;top:50%;width:12px;height:10px;margin-top:-5px;background:var(--en-accion);
  clip-path:polygon(0 52%,16% 36%,40% 60%,84% 8%,100% 24%,40% 92%)}
.cimo-multi .cimo-autocompletar__lista li.activa{background:var(--superficie-hundida)}
.cimo-multi .cimo-autocompletar__lista li.cimo-multi__pie{cursor:default;justify-content:space-between}
.cimo-multi .cimo-autocompletar__lista li.cimo-multi__pie::before{display:none}
.cimo-multi__pie{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 6px 2px;border-top:1px solid var(--linea);margin-top:4px;font:500 13px/18px var(--font-texto);color:var(--tinta-suave)}

/* ---- Ajuste que dice qué es, cómo está y deja cambiarlo ---- */
.cimo-ajuste__valor{font:600 14px/20px var(--font-texto);color:var(--tinta)}

/* ---- Acciones: fila de botones con orden y medidas fijas ----
   Escritorio: a la derecha, «Más acciones» primero y la principal de última. Teléfono: los botones reparten el renglón
   en partes iguales y la principal queda abajo, más cerca del pulgar. Todos miden `tactil` de alto. */
.cimo-acciones{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.cimo-acciones--inicio{justify-content:flex-start}
@media screen and (max-width:899.98px){
  .cimo-acciones{width:100%}
  .cimo-acciones > .cimo-btn,.cimo-acciones > .cimo-desplegable{flex:1 1 0;min-width:0}
  .cimo-acciones > .cimo-desplegable > .cimo-btn{width:100%}
  .cimo-acciones > .cimo-btn--principal{flex-basis:100%;order:2}
}
.cimo-fila-acciones{display:flex;justify-content:flex-end;gap:4px}

/* CIMO — navegación de un ERP con muchos módulos y la interacción fina que hace fluir el trabajo:
   buscador global, migas, lanzador de módulos, pendientes, atajos, encabezado de ficha, herencia de parámetros,
   alertas de fila, cifras con detalle y columnas que se ensanchan. Mismas reglas que el resto. */

/* ---- Tecla: cómo se escribe un atajo ---- */
.cimo-tecla{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border:1px solid var(--linea-control);border-bottom-width:2px;
  border-radius:5px;background:var(--superficie-hundida);color:var(--tinta);font:500 12px/1 var(--font-datos);white-space:nowrap}

/* ---- Buscador rápido (BuscadorGlobal; GRAFICOS-NAVEGACION.md §3): un campo fijo en el encabezado, arriba a la derecha. Se escribe y
   las sugerencias salen debajo al instante; flechas, Enter y Esc; Ctrl+K o «/» lo enfocan. Lo monta cimo-navegacion.js.
   YA NO APLICA la ventana del buscador (la paleta en un <dialog> con velo): pedido del dueño, 25/10/2026, noche, «el buscador debe
   ser un buscador rápido, no de ventana». Sobre el encabezado oscuro toma sus colores (--enc-*); sin ellos, los del tema. ---- */
.cimo-busca{position:relative;flex:0 1 380px;min-width:0;margin-left:auto}
/* el borde va por dentro (box-shadow): así el input ocupa todo el alto del campo y lo tocable mide --tactil */
.cimo-busca__campo{position:relative;display:flex;align-items:center;gap:8px;height:var(--tactil);box-sizing:border-box;padding:0 10px;
  border:0;box-shadow:inset 0 0 0 1px var(--enc-linea,var(--linea));border-radius:var(--radio-control);background:var(--enc-campo,var(--superficie-hundida));
  color:var(--enc-suave,var(--tinta-suave));cursor:text}
.cimo-busca__campo:focus-within{outline:3px solid var(--foco);outline-offset:2px}
.cimo-busca__campo .cimo-ico{--ico-tam:16px}
.cimo-busca__campo input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--enc-tinta,var(--tinta));
  font:400 14px/1.2 var(--font-texto);outline:none;-webkit-appearance:none;appearance:none}
.cimo-busca__campo input::placeholder{color:var(--enc-suave,var(--tinta-suave));opacity:1}
.cimo-busca__campo input::-webkit-search-cancel-button{display:none}
.cimo-busca__campo .cimo-tecla{flex:none;color:var(--enc-suave,var(--tinta-suave))}
/* Las sugerencias: debajo del campo, sobre la superficie; nada se corta (la ruta larga parte en dos renglones) */
.cimo-busca__lista{position:absolute;z-index:40;top:calc(100% + 4px);right:0;width:max(100%,440px);max-width:calc(100vw - 24px);max-height:min(70vh,460px);
  box-sizing:border-box;overflow:auto;overscroll-behavior:contain;margin:0;padding:4px;list-style:none;text-align:left;
  background:var(--superficie);color:var(--tinta);border:1px solid var(--linea-control);border-radius:var(--radio-control);box-shadow:var(--sombra-alta)}
.cimo-busca__lista[hidden]{display:none}
.cimo-busca__lista ul{margin:0;padding:0;list-style:none}
.cimo-busca__rotulo{display:block;padding:6px 8px 2px;font:600 12px/16px var(--font-texto);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave)}
.cimo-busca__lista [role="option"]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:var(--tactil);
  box-sizing:border-box;padding:4px 8px;border-radius:var(--radio-control);font:500 14px/18px var(--font-texto);cursor:pointer}
.cimo-busca__lista [role="option"] > .cimo-ico{grid-row:1 / span 2;--ico-tam:16px;color:var(--tinta-suave)}
.cimo-busca__titulo{grid-column:2;min-width:0;overflow-wrap:anywhere}
.cimo-busca__lista [role="option"] small{grid-column:2;min-width:0;font:400 12.5px/16px var(--font-texto);color:var(--tinta-suave);overflow-wrap:anywhere}
.cimo-busca__tipo{grid-column:3;grid-row:1 / span 2;font:500 12px/16px var(--font-texto);color:var(--tinta-suave);white-space:nowrap}
.cimo-busca__lista [role="option"][aria-selected="true"]{background:var(--activo-fondo);color:var(--activo-tinta)}
.cimo-busca__lista mark{background:none;color:inherit;font-weight:700}
.cimo-busca__vacio{padding:8px;font:400 14px/18px var(--font-texto);color:var(--tinta-suave)}
/* PC con mouse: la escala densa (B), campo de 28 px con --tactil, letra de 12,5 y la ruta de 12 */
@media (min-width:900px) and (pointer:fine){
  .cimo-busca__campo input,.cimo-busca__lista [role="option"],.cimo-busca__vacio{font-size:12.5px}
  .cimo-busca__lista [role="option"]{padding:3px 8px;line-height:16px}
  .cimo-busca__lista [role="option"] small{font-size:12px;line-height:15px}
}
/* Teléfono: una lupa en el encabezado; al tocarla, el campo se abre a lo ancho del encabezado con las sugerencias debajo, a todo el
   ancho. Esc o tocar fuera lo cierran. Tampoco es una ventana. (YA NO APLICA el campo arriba del menú; el `:not(.cimo-busca--menu)` solo guarda la especificidad.) */
@media (max-width:899.98px){
  .cimo-busca .cimo-tecla{display:none}
  .cimo-busca__campo input{font-size:16px}
  .cimo-busca:not(.cimo-busca--menu){flex:none}
  .cimo-busca:not(.cimo-busca--menu):not(.cimo-busca--abierta) .cimo-busca__campo{width:var(--tactil);padding:0;justify-content:center;box-shadow:none;
    background:transparent;color:var(--enc-tinta,var(--tinta));cursor:pointer}
  .cimo-busca:not(.cimo-busca--menu):not(.cimo-busca--abierta) .cimo-busca__campo .cimo-ico{--ico-tam:20px}
  .cimo-busca:not(.cimo-busca--menu):not(.cimo-busca--abierta) .cimo-busca__campo input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
  .cimo-busca--abierta:not(.cimo-busca--menu){position:absolute;z-index:31;inset:0;display:flex;align-items:center;margin:0;padding:0 8px;visibility:visible;
    background:var(--enc-fondo,var(--superficie))}
  .cimo-busca--abierta:not(.cimo-busca--menu) .cimo-busca__campo{flex:1}
  .cimo-busca--abierta:not(.cimo-busca--menu) .cimo-busca__lista{top:100%;left:0;right:0;width:auto;max-width:none;max-height:calc(100dvh - var(--encabezado-alto));
    border-width:0 0 1px;border-radius:0}
  .cimo-encabezado:has(.cimo-busca--abierta:not(.cimo-busca--menu)) > :not(.cimo-busca){visibility:hidden}
}
.cimo-teclas{display:inline-flex;align-items:center;gap:4px}

/* ---- Migas: dónde estoy dentro del módulo; en el teléfono, solo volver al nivel de arriba ---- */
.cimo-migas ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;font:500 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-migas li{display:inline-flex;align-items:center}
.cimo-migas li + li::before{content:"›";margin:0 8px;color:var(--tinta-suave)}
.cimo-migas a{position:relative;color:var(--enlace);text-decoration:none}
.cimo-migas a::after{content:"";position:absolute;left:-4px;right:-4px;top:-13px;bottom:-13px}
.cimo-migas a:hover{text-decoration:underline}
.cimo-migas a:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-migas [aria-current="page"]{color:var(--tinta)}
@media screen and (max-width:899.98px){
  .cimo-migas li{display:none}
  .cimo-migas li:nth-last-child(2){display:inline-flex}
  .cimo-migas li:nth-last-child(2)::before{content:"‹";margin:0 6px 0 0}
}

/* ---- Lanzador de módulos: la pantalla de inicio con las dovelas y sus accesos ---- */
.cimo-lanzador{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.cimo-lanzador__modulo{display:grid;gap:10px;padding:var(--tarjeta-relleno);background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-tarjeta)}
.cimo-lanzador__modulo ul{display:grid;margin:0;padding:0;list-style:none}
.cimo-lanzador__modulo li a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--tactil);padding:0 8px;margin:0 -8px;border-radius:8px;
  color:var(--tinta);text-decoration:none;font:500 14.5px/20px var(--font-texto)}
.cimo-lanzador__modulo li a:hover{background:var(--superficie-hundida)}
.cimo-lanzador__modulo li a:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-lanzador__modulo li a .cimo-insignia{flex:none}
.cimo-lanzador__todos{font:600 13px/18px var(--font-texto)}

/* ---- Pendientes: todo lo que espera a la persona, de cualquier módulo ---- */
.cimo-pendientes{margin:0;padding:0;list-style:none;border:1px solid var(--linea);border-radius:var(--radio-tarjeta);background:var(--superficie);overflow:hidden}
.cimo-pendiente{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:12px 14px;border-top:1px solid var(--linea)}
.cimo-pendientes > .cimo-pendiente:first-child{border-top:0}
.cimo-pendiente > i{grid-row:span 2;width:12px;height:28px;clip-path:polygon(0 0,100% 0,82% 100%,18% 100%)}
.cimo-pendiente b{font:600 14.5px/20px var(--font-texto);color:var(--tinta)}
.cimo-pendiente small{grid-column:2;font:400 12.5px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-pendiente .cimo-btn{grid-column:3;grid-row:1 / span 2}
.cimo-pendiente .mod-obra{background:var(--modulo-obra)}.cimo-pendiente .mod-contabilidad{background:var(--modulo-contabilidad)}
.cimo-pendiente .mod-inventarios{background:var(--modulo-inventarios)}.cimo-pendiente .mod-maquinaria{background:var(--modulo-maquinaria)}
.cimo-pendiente .mod-personas{background:var(--modulo-personas)}.cimo-pendiente .mod-gestion{background:var(--modulo-gestion)}
.cimo-pendiente .mod-contratos{background:var(--modulo-contratos)}.cimo-pendiente .mod-automatizaciones{background:var(--modulo-automatizaciones)}
.cimo-pendiente .mod-licitaciones{background:var(--modulo-licitaciones)}.cimo-pendiente .mod-chatbot{background:var(--modulo-chatbot)}
.cimo-pendiente .mod-datamart{background:var(--modulo-datamart);color:var(--en-modulo-datamart)}

/* ---- Atajos: la hoja que abre «?» ---- */
.cimo-atajos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 24px;margin:0}
.cimo-atajos div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:36px;border-bottom:1px solid var(--linea)}
.cimo-atajos dt{display:flex;gap:4px;order:2}
.cimo-atajos dd{margin:0;font:400 14px/20px var(--font-texto);color:var(--tinta)}

/* ---- Encabezado de ficha: el registro, su estado, sus datos clave y sus acciones ---- */
.cimo-ficha__cabeza{display:grid;gap:14px;padding:var(--tarjeta-relleno);background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-tarjeta)}
.cimo-ficha__titulo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cimo-ficha__titulo h1{margin:0;font:800 24px/30px var(--font-display);letter-spacing:-.01em;color:var(--tinta)}
.cimo-ficha__titulo .cimo-acciones{margin-left:auto}
.cimo-ficha__datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 20px;margin:0}
.cimo-ficha__datos dt{font:600 12.5px/16px var(--font-texto);color:var(--tinta-suave)}
.cimo-ficha__datos dd{margin:2px 0 0;font:500 14.5px/20px var(--font-texto);color:var(--tinta);overflow-wrap:anywhere}

/* ---- Herencia de un parámetro: de dónde viene el valor y si se puede cambiar aquí ---- */
.cimo-nivel{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radio-pastilla);box-shadow:inset 0 0 0 1px var(--linea-control);
  font:600 12px/1 var(--font-texto);color:var(--tinta-suave);white-space:nowrap}
.cimo-herencia{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:500 12.5px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-herencia b{font-weight:600;color:var(--tinta)}
.cimo-herencia > span:not(.cimo-nivel){flex:0 0 auto;max-width:100%}
.cimo-herencia .cimo-btn--discreto{min-height:36px;padding:0 6px;font-size:13px;position:relative}
.cimo-herencia .cimo-btn--discreto::after{content:"";position:absolute;inset:-4px 0}
.cimo-herencia--propio{padding-left:10px;box-shadow:inset 3px 0 0 var(--activo-filo)}

/* ---- Alerta de fila: un control que encontró algo en esa línea, con su palabra ---- */
.cimo-alerta-fila{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 8px;border-radius:6px;background:var(--alerta-suave);color:var(--alerta-tinta);
  font:600 12.5px/16px var(--font-texto)}
.cimo-alerta-fila .cimo-ico{width:14px;height:14px;flex:none}
.cimo-alerta-fila--peligro{background:var(--peligro-suave);color:var(--peligro)}

/* ---- Cifra con detalle: la tarjeta lleva a las filas que la forman ---- */
a.cimo-cifra,button.cimo-cifra{position:relative;text-align:left;text-decoration:none;color:inherit;font:inherit;cursor:pointer}
a.cimo-cifra:hover,button.cimo-cifra:hover{border-color:var(--linea-control)}
a.cimo-cifra:focus-visible,button.cimo-cifra:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-cifra__ver{font:600 12.5px/18px var(--font-texto);color:var(--enlace)}

/* ---- Columnas que se ensanchan, se fijan y se ordenan (solo con puntero fino) ---- */
.cimo-tabla th{position:relative}
.cimo-tirador{display:none}
@media (pointer:fine){
  .cimo-tirador{display:block;position:absolute;top:0;bottom:0;right:-5px;z-index:2;width:10px;cursor:col-resize}
  .cimo-tirador::before{content:"";position:absolute;top:25%;bottom:25%;left:4px;width:2px;border-radius:1px;background:var(--linea)}
  .cimo-tirador:hover::before,.cimo-tirador:focus-visible::before{background:var(--accion)}
  .cimo-tirador:focus-visible{outline:3px solid var(--foco);outline-offset:-2px}
}
.cimo-tabla .cimo-col-fija{position:sticky;left:0;z-index:1;background:var(--superficie);box-shadow:inset -1px 0 0 var(--linea)}
.cimo-tabla thead .cimo-col-fija{z-index:3}

/* ---- Menú contextual: el mismo panel del Desplegable, abierto donde se tocó ---- */
.cimo-desplegable__panel--contexto{position:fixed;top:auto;right:auto}

/* ---- Esperas y animaciones: el movimiento explica qué pasa; todo queda quieto si la persona pidió menos movimiento ---- */
/* Barra de carga de la pantalla: una dovela que recorre el borde de arriba mientras llega la página. */
.cimo-carga-pagina{position:relative;height:3px;overflow:hidden;background:var(--superficie-hundida)}
.cimo-carga-pagina::before{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--accion)}
@media (prefers-reduced-motion:no-preference){.cimo-carga-pagina::before{animation:cimo-recorre 1.2s ease-in-out infinite}}
@keyframes cimo-recorre{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
/* Cargador de la marca, Encaje (decisión del dueño del 25/10/2026): la clave baja, asienta con un golpe corto y el arco lo
   recibe. Para las cargas cortas; quieto y con su palabra si la persona pidió menos movimiento. */
.cimo-cargador{display:grid;justify-items:center;gap:12px;padding:32px 16px;font:500 14px/20px var(--font-texto);color:var(--tinta-suave)}
.cimo-cargador svg{width:64px;height:auto;overflow:visible}
.cimo-cargador .p{fill:var(--logo)}.cimo-cargador .a{fill:var(--logo-clave)}
@media (prefers-reduced-motion:no-preference){
  .cimo-cargador .a{animation:cimo-encaje calc(1.6s * var(--cimo-vel,1)) cubic-bezier(.2,.8,.2,1) infinite}
  .cimo-cargador .p{transform-box:view-box;transform-origin:50% 50%;animation:cimo-asiento calc(1.6s * var(--cimo-vel,1)) ease-out infinite}
}
@keyframes cimo-encaje{0%{transform:translateY(-18px);opacity:0}25%{opacity:1}42%{transform:translateY(0)}48%{transform:translateY(-1.8px)}55%,82%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
@keyframes cimo-asiento{0%,41%{transform:scale(1)}46%{transform:scale(1.03)}55%,100%{transform:scale(1)}}
/* Entradas: ventana, cajón, notificación y menús aparecen con un movimiento corto (150 a 200 ms). */
@media (prefers-reduced-motion:no-preference){
  dialog.cimo-ventana[open],.cimo-velo:not([hidden]) .cimo-ventana{animation:cimo-sube .18s ease-out}
  .cimo-cajon:not([hidden]){animation:cimo-entra-lado .2s ease-out}
  .cimo-desplegable__panel:not([hidden]),.cimo-ayuda__globo:not([hidden]){animation:cimo-aparece .12s ease-out}
}
@keyframes cimo-sube{from{opacity:0;transform:translateY(10px)}}
@keyframes cimo-entra-lado{from{transform:translateX(24px);opacity:0}}
@keyframes cimo-aparece{from{opacity:0;transform:translateY(-4px)}}
@media screen and (max-width:899.98px) and (prefers-reduced-motion:no-preference){.cimo-cajon:not([hidden]){animation:cimo-sube .2s ease-out}}
/* Fila recién guardada o recién llegada: un destello de activo-fondo que se apaga en 1,2 s. */
@media (prefers-reduced-motion:no-preference){.cimo-recien{animation:cimo-destello 1.2s ease-out}}
@keyframes cimo-destello{from{background-color:var(--activo-fondo)}}

/* ---- Tabla CIMO (cimo-tabla.js): el comportamiento único de tablas y filtros (TABLA-FILTROS.md) ---- */
.cimo-tablac{gap:12px}
.cimo-tablac[hidden],.cimo-aviso[hidden]{display:none}
.cimo-tablac__aplicados{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cimo-tablac__aplicados[hidden]{display:none}
.cimo-tablac__aplicados .cimo-chips{flex:1 1 240px}
.cimo-tablac__avisos{display:flex;flex-direction:column;gap:8px}
.cimo-tablac__avisos:empty{display:none}
.cimo-tablac__error-q{flex-basis:100%;margin-top:-4px}
.cimo-tablac__error-q[hidden]{display:none}

/* Encabezado fijo al desplazarse dentro del marco y el TOTAL pegado abajo. El marco llega hasta el borde de la ventana. */
.cimo-tablac .cimo-tabla-marco{max-height:max(320px,calc(100dvh - var(--tablac-arriba,180px)));overflow:auto}
.cimo-tablac .cimo-tabla-marco[hidden]{display:none}
.cimo-tablac .cimo-tabla{table-layout:fixed;border-collapse:separate;border-spacing:0}
.cimo-tablac .cimo-tabla thead th{position:sticky;top:0;z-index:2;background:var(--superficie);white-space:normal}
.cimo-tablac .cimo-tabla thead .cimo-col-fija{z-index:4}
.cimo-tablac .cimo-tabla tfoot td{position:sticky;bottom:0;z-index:2}
.cimo-tablac .cimo-tabla tfoot .cimo-col-fija{z-index:4}
.cimo-tablac .cimo-tabla td{overflow-wrap:break-word}

/* Encabezado: ordenar, filtrar la columna y «+N», en una fila; el área tocable llega a 44 con ::after */
.cimo-tablac__th{display:flex;align-items:center;gap:2px;min-width:0}
.cimo-tablac th.num .cimo-tablac__th{justify-content:flex-end}
.cimo-tablac .cimo-tablac__th .cimo-tablac__orden{margin:0 -4px;padding:0 4px;text-align:left;white-space:normal}
.cimo-tablac th.num .cimo-tablac__orden{text-align:right}
.cimo-tablac .cimo-tabla th .cimo-tablac__embudo,.cimo-tablac .cimo-tabla th .cimo-tablac__mas{position:relative;justify-content:center;flex:none;min-width:32px;margin:0;padding:0 6px}
.cimo-tablac .cimo-tabla th .cimo-tablac__embudo::after,.cimo-tablac .cimo-tabla th .cimo-tablac__mas::after{content:"";position:absolute;inset:0 -6px}
.cimo-tablac .cimo-tabla th .cimo-tablac__mas::after{inset:-8px -6px}
.cimo-tablac .cimo-tabla .cimo-col-sel{padding:0}
.cimo-tablac .cimo-col-sel .cimo-eleccion{display:flex;justify-content:center;width:100%;min-width:var(--tactil)}
.cimo-tablac .cimo-tabla th .cimo-tablac__embudo[aria-pressed="true"]{background:var(--activo-fondo);color:var(--activo-tinta);border-radius:var(--radio-control)}
.cimo-tablac .cimo-tabla th .cimo-tablac__mas{border:1px solid var(--linea);border-radius:var(--radio-pastilla);min-height:28px;
  font:700 12.5px/1 var(--font-texto);color:var(--tinta);letter-spacing:0;text-transform:none}

/* Filas que abren su ficha */
.cimo-tablac__abre{cursor:pointer}
.cimo-tablac__abre:hover td{background:var(--superficie-hundida)}
.cimo-tablac__abre:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-tablac__nada{color:var(--tinta-suave)}

/* Texto largo: dos renglones y «· ver todo» (nunca puntos suspensivos sin forma de leer el resto) */
.cimo-tablac__largo{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.cimo-tablac__largo--abierto{display:block;-webkit-line-clamp:unset;overflow:visible}
.cimo-tablac__ver-todo{position:relative;padding:0;border:0;background:none;color:var(--enlace);font:600 13px/18px var(--font-texto);cursor:pointer}
.cimo-tablac__ver-todo::after{content:"";position:absolute;inset:-13px -4px}
.cimo-tablac__ver-todo:focus-visible{outline:3px solid var(--foco);outline-offset:2px}

/* Grupo con su subtotal */
.cimo-tablac .cimo-grupo td{display:table-cell}
.cimo-tablac__grupo{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;min-width:0}
.cimo-tablac__subtotal{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Cargando, vacío y error */
.cimo-tablac__esqueleto td .cimo-esqueleto{width:72%}
.cimo-tablac__estado:empty{display:none}
.cimo-tablac__estado .cimo-vacio{border:1px solid var(--linea);border-radius:var(--radio-tarjeta);background:var(--superficie)}
.cimo-tablac__detalle{align-self:stretch;max-width:100%;text-align:left}
.cimo-tablac__detalle summary{display:flex;align-items:center;min-height:var(--tactil);cursor:pointer;color:var(--enlace);font-weight:600}
.cimo-tablac__detalle pre{margin:0;padding:12px;max-height:200px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;
  border-radius:var(--radio-control);background:var(--superficie-hundida);font:400 12.5px/18px var(--font-datos);color:var(--tinta)}

/* Páginas: el salto «…» y el tamaño de página */
.cimo-paginas[hidden],.cimo-ver-mas[hidden]{display:none}
.cimo-paginas button:disabled{cursor:default;color:var(--tinta-suave);background:var(--superficie-hundida)}
.cimo-paginas button:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-paginas__salto{display:inline-grid;place-items:center;min-width:20px;color:var(--tinta-suave)}
.cimo-paginas__tam select{box-sizing:border-box;height:var(--tactil);padding:0 10px;border:1px solid var(--linea-control);border-radius:var(--radio-control);
  background:var(--superficie);color:var(--tinta);font:500 14px/1 var(--font-texto)}
.cimo-paginas__tam select:focus-visible{outline:3px solid var(--foco);outline-offset:2px}

/* Tarjetas por espacio: lo decide cimo-tabla.js midiendo su marco, no el ancho de la ventana */
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla-marco{max-height:none;overflow:visible}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla thead{display:none}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla,.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tbody,.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tfoot,
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tr,.cimo-tablac[data-vista="tarjetas"] .cimo-tabla td{display:block;width:auto}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla colgroup{display:none}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tbody tr{position:relative;padding:12px 14px;border-bottom:1px solid var(--linea)}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tbody tr:last-child{border-bottom:0}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 0;border:0;text-align:right;position:static}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla td::before{content:attr(data-etiqueta);flex:none;max-width:45%;font:500 13px/18px var(--font-texto);color:var(--tinta-suave);text-align:left}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tbody td:first-child:not(.cimo-col-sel),.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tbody td.cimo-col-sel + td{font:700 15px/20px var(--font-texto);padding-bottom:6px;text-align:left}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tbody td:first-child:not(.cimo-col-sel)::before,.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tbody td.cimo-col-sel + td::before{content:none}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tbody tr:has(> .cimo-col-sel){padding-right:56px}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla td.cimo-col-sel{position:absolute;top:2px;right:6px;width:44px;padding:0}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla td.cimo-col-sel::before{content:none}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla .cimo-grupo td{display:block;padding:0 14px}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tfoot td{display:flex;justify-content:space-between;padding:10px 14px;position:static}
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tfoot td[data-vacia]{display:none}
.cimo-tablac[data-vista="tarjetas"] .cimo-tablac__largo{display:inline;-webkit-line-clamp:unset}

/* Las ventanitas: filtro de columna, «+N» y Columnas */
.cimo-tablac__pop{display:flex;flex-direction:column;gap:12px;width:min(320px,calc(100vw - 16px));max-height:min(70dvh,520px);overflow:auto;padding:12px;box-sizing:border-box;z-index:40}
.cimo-tablac__pop-pie{display:flex;gap:8px;justify-content:flex-end}
.cimo-tablac__pop-pie .cimo-btn{flex:1}
.cimo-tablac__pop-lista{margin:0;padding-left:20px;color:var(--tinta)}
.cimo-tablac__pop-nota{margin:0;font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-tablac__pop-campos{display:flex;flex-direction:column}
.cimo-tablac__pop-col{display:flex;align-items:center;gap:2px}
.cimo-tablac__pop-col > .cimo-eleccion{flex:1;min-width:0}
.cimo-tablac__mover .cimo-ico{--ico-tam:20px}
.cimo-tablac__mover--subir .cimo-ico{transform:rotate(180deg)}
.cimo-tablac__mover[disabled]{opacity:.35;cursor:default}
.cimo-tablac__pop-fija{min-width:88px;text-align:right;font:500 12px/16px var(--font-texto);color:var(--tinta-suave)}

/* Campos de filtro (embudo, cajón y panel de consulta) */
.cimo-tablac fieldset.cimo-campo,.cimo-tablac__pop fieldset.cimo-campo,.cimo-tablac__cajon fieldset.cimo-campo{min-width:0;margin:0;padding:0;border:0}
fieldset.cimo-campo > legend{padding:0;margin:0 0 6px;font:600 13px/18px var(--font-texto);color:var(--tinta)}
.cimo-tablac__opciones{display:flex;flex-direction:column;max-height:280px;overflow:auto}
.cimo-tablac__opciones .cimo-eleccion{display:flex;width:100%;box-sizing:border-box}
.cimo-tablac__opciones .cimo-eleccion[hidden]{display:none}
.cimo-tablac__op-texto{flex:1;min-width:0;overflow-wrap:anywhere}
.cimo-tablac__buscar-op{box-sizing:border-box;width:100%;height:var(--tactil);margin-bottom:6px;padding:0 12px;border:1px solid var(--linea-control);
  border-radius:var(--radio-control);background:var(--superficie);color:var(--tinta);font:400 15px/1 var(--font-texto)}
.cimo-tablac__buscar-op::placeholder{color:var(--marcador);opacity:1}
.cimo-tablac__buscar-op:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-rango > .cimo-campo__error,.cimo-rango > .cimo-motivo{flex-basis:100%}
.cimo-filtros__acciones .cimo-motivo{margin:0 auto 0 0;align-self:center}

/* Cajón de filtros con <dialog>: atrapa el foco y Escape lo cierra; en el teléfono sube desde abajo */
dialog.cimo-cajon{margin:0 0 0 auto;padding:0;border-width:0 0 0 1px;max-width:100%;max-height:100%;height:auto;color:var(--tinta)}
dialog.cimo-cajon:not([open]){display:none}
dialog.cimo-cajon::backdrop{background:var(--velo)}
@media screen and (max-width:899.98px){dialog.cimo-cajon{margin:auto 0 0;border-width:1px 0 0}}

/* ---- Los 7 componentes que pedían 4 o más apps (decisión 11 del dueño, 25/10/2026; levantamiento/FALTANTES.md) ---- */

/* ---- Matriz: fila × columna con casillas que se tocan, mapa de calor, leyenda, total y primera columna fija ---- */
.cimo-matriz{border-collapse:separate;border-spacing:0;font:400 14px/20px var(--font-texto);color:var(--tinta)}
.cimo-matriz th,.cimo-matriz td{padding:0;border-bottom:1px solid var(--linea);border-right:1px solid var(--linea);text-align:center;vertical-align:middle}
.cimo-matriz tr > :last-child{border-right:0}
.cimo-matriz tbody tr:last-child > *{border-bottom:0}
.cimo-matriz thead th{padding:8px 6px;min-width:var(--tactil);font:600 12.5px/16px var(--font-texto);color:var(--tinta-suave);vertical-align:bottom}
.cimo-matriz--vertical thead th:not(:first-child) span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.cimo-matriz th:first-child{position:sticky;left:0;z-index:1;padding:0 14px;min-width:120px;background:var(--superficie);text-align:left;box-shadow:inset -1px 0 0 var(--linea)}
.cimo-matriz thead th:first-child{z-index:2}
.cimo-matriz tbody th{font-weight:600}
.cimo-matriz__celda{position:relative;display:grid;place-items:center;width:100%;min-width:var(--tactil);height:var(--tactil);margin:0;padding:0 6px;box-sizing:border-box;
  border:0;background:transparent;color:var(--tinta);font:600 13px/1 var(--font-texto);font-variant-numeric:tabular-nums;cursor:pointer}
.cimo-matriz__celda .cimo-ico{width:18px;height:18px}
.cimo-matriz__celda:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-matriz [data-estado="tiene"],.cimo-matriz__muestra[data-estado="tiene"]{background:var(--estado-aprobado);color:var(--estado-aprobado-tinta)}
.cimo-matriz [data-estado="falta"],.cimo-matriz__muestra[data-estado="falta"]{background:var(--estado-devuelto);color:var(--estado-devuelto-tinta)}
.cimo-matriz [data-estado="alerta"],.cimo-matriz__muestra[data-estado="alerta"]{background:var(--alerta-suave);color:var(--alerta-tinta)}
.cimo-matriz [data-estado="pronto"],.cimo-matriz__muestra[data-estado="pronto"]{background:var(--estado-enviado);color:var(--estado-enviado-tinta)}
.cimo-matriz [data-estado="no-aplica"],.cimo-matriz__muestra[data-estado="no-aplica"]{background:var(--superficie-hundida);color:var(--tinta-suave)}
/* Mapa de calor: cuatro niveles de la cantidad, del mismo azul de acción; la cifra va siempre escrita */
.cimo-matriz [data-nivel="1"]{background:color-mix(in srgb,var(--accion) 10%,var(--superficie))}
.cimo-matriz [data-nivel="2"]{background:color-mix(in srgb,var(--accion) 20%,var(--superficie))}
.cimo-matriz [data-nivel="3"]{background:color-mix(in srgb,var(--accion) 32%,var(--superficie))}
.cimo-matriz [data-nivel="4"]{background:color-mix(in srgb,var(--accion) 44%,var(--superficie))}
.cimo-matriz__total,.cimo-matriz tfoot th,.cimo-matriz tfoot td{background:var(--superficie-hundida);font-weight:700}
.cimo-matriz tfoot th,.cimo-matriz tfoot td{border-top:2px solid var(--tinta);border-bottom:0}
.cimo-matriz tfoot th:first-child{background:var(--superficie-hundida)}
.cimo-matriz__leyenda{display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0 0;padding:0;list-style:none;font:500 13px/18px var(--font-texto);color:var(--tinta)}
.cimo-matriz__leyenda li{display:inline-flex;align-items:center;gap:8px}
.cimo-matriz__muestra{display:inline-grid;place-items:center;width:24px;height:24px;flex:none;border-radius:4px;font:700 12px/1 var(--font-texto)}
.cimo-matriz__muestra .cimo-ico{width:14px;height:14px}

/* ---- Procedencia: de dónde sale el dato y de cuándo es ---- */
.cimo-procedencia{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:0;font:400 12.5px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-procedencia > span:not(:last-child)::after{content:"·";margin-left:8px}
.cimo-procedencia__punto{display:inline-block;width:8px;height:8px;flex:none;margin-right:-2px;border-radius:50%;background:var(--estado-aprobado-tinta)}
.cimo-procedencia__punto::after{content:none!important}
.cimo-procedencia[data-frescura="vieja"] .cimo-procedencia__punto{background:var(--alerta)}
.cimo-procedencia[data-frescura="vieja"] .cimo-procedencia__edad{color:var(--alerta-tinta);font-weight:600}
.cimo-procedencia[data-frescura="sin-dato"] .cimo-procedencia__punto{background:var(--peligro)}
.cimo-origen{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radio-pastilla);background:var(--superficie-hundida);
  color:var(--tinta-suave);font:600 12px/1 var(--font-texto);white-space:nowrap;vertical-align:middle}
.cimo-origen--falta{background:var(--peligro-suave);color:var(--peligro)}
.cimo-origen--confirmar{background:var(--alerta-suave);color:var(--alerta-tinta)}
.cimo-campo label .cimo-origen{margin-left:8px}
details.cimo-procedencia-detalle{font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}
details.cimo-procedencia-detalle > summary{display:flex;align-items:center;gap:8px;min-height:var(--tactil);cursor:pointer;list-style:none}
details.cimo-procedencia-detalle > summary::-webkit-details-marker{display:none}
details.cimo-procedencia-detalle > summary:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
details.cimo-procedencia-detalle ul{margin:0 0 8px;padding-left:20px;color:var(--tinta)}

/* ---- Bloque: una sección con título, etiquetas y acciones, que se amplía a pantalla completa ---- */
.cimo-bloque{display:flex;flex-direction:column;min-width:0;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-tarjeta)}
.cimo-bloque__cabeza{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:56px;padding:6px 6px 6px 16px;border-bottom:1px solid var(--linea)}
.cimo-bloque__cabeza h2,.cimo-bloque__cabeza h3{margin:0;font:700 16px/22px var(--font-display);color:var(--tinta)}
.cimo-bloque__titulo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;flex:1 1 200px;min-width:0}
.cimo-bloque__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cimo-bloque__cuerpo{padding:var(--tarjeta-relleno);min-width:0}
.cimo-bloque__cuerpo--lleno{padding:0}
.cimo-bloque--ampliado{position:fixed;inset:0;z-index:55;border-radius:0;border:0;overflow:auto}
.cimo-bloque--ampliado .cimo-bloque__cabeza{position:sticky;top:0;z-index:1;background:var(--superficie)}

/* ---- Secreto: la llave o clave que se ve una sola vez, enmascarada después ---- */
.cimo-secreto{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--alerta);border-radius:var(--radio-tarjeta);background:var(--alerta-suave);color:var(--alerta-tinta)}
.cimo-secreto__aviso{display:flex;align-items:flex-start;gap:8px;margin:0;font:600 14px/20px var(--font-texto)}
.cimo-secreto__aviso .cimo-ico{width:18px;height:18px;flex:none;margin-top:1px}
.cimo-secreto__valor{display:block;margin:0;padding:10px 12px;border-radius:var(--radio-control);background:var(--superficie);color:var(--tinta);
  font:500 15px/22px var(--font-datos);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.cimo-secreto__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cimo-secreto--guardado{border-color:var(--linea);background:var(--superficie);color:var(--tinta)}
.cimo-secreto__fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cimo-secreto__mascara{font:600 15px/22px var(--font-datos);letter-spacing:.12em;color:var(--tinta)}
.cimo-secreto__final{font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-secreto__final b{font-family:var(--font-datos);font-weight:600;color:var(--tinta)}
.cimo-secreto__cuenta{font:600 13px/18px var(--font-texto);color:var(--tinta-suave);font-variant-numeric:tabular-nums}

/* ---- Copiar: copia y lo confirma en el mismo botón, sin moverlo ---- */
.cimo-copiar{min-width:9.5em;justify-content:center}
.cimo-copiar[data-copiado="si"]{background:var(--estado-aprobado);border-color:var(--estado-aprobado);color:var(--estado-aprobado-tinta)}
.cimo-copiar--celda{position:relative;width:32px;height:32px;min-width:0;opacity:0}
.cimo-copiar--celda::after{content:"";position:absolute;inset:-6px}
.cimo-copiar--celda .cimo-ico{width:16px;height:16px}
td:hover > .cimo-copiar--celda,td:focus-within > .cimo-copiar--celda,.cimo-copiar--celda[data-copiado="si"]{opacity:1}
@media (hover:none){.cimo-copiar--celda{opacity:1}}
.cimo-copiar__no{display:block;margin-top:6px;font:400 13px/18px var(--font-texto);color:var(--peligro)}
.cimo-copiar__no[hidden]{display:none}

/* ---- Instalar la app: ofrecerla sin estorbar, con los pasos de cada aparato ---- */
.cimo-instalar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 16px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-tarjeta)}
.cimo-instalar__icono{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:12px;background:var(--azul)}
.cimo-instalar__icono svg{width:30px;height:30px}
.cimo-instalar__texto{flex:1 1 220px;min-width:0}
.cimo-instalar__texto b{display:block;font:700 15px/20px var(--font-texto);color:var(--tinta)}
.cimo-instalar__texto span{display:block;font:400 13px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-instalar__acciones{display:flex;flex-wrap:wrap;gap:8px}
.cimo-instalar__pasos{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:paso}
.cimo-instalar__pasos li{display:flex;align-items:flex-start;gap:10px;font:400 14px/20px var(--font-texto);color:var(--tinta);counter-increment:paso}
.cimo-instalar__pasos li::before{content:counter(paso);display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;
  background:var(--accion);color:var(--en-accion);font:700 12px/1 var(--font-texto)}
.cimo-punto-nuevo{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--marca)}

/* ---- Logo de la empresa: el de cada cliente, o sus iniciales si no hay archivo ---- */
.cimo-logo-empresa{display:inline-grid;place-items:center;min-width:56px;height:32px;flex:none;box-sizing:border-box;padding:2px 4px;overflow:hidden;
  border:1px solid var(--linea);border-radius:6px;background:var(--papel);vertical-align:middle}
.cimo-logo-empresa img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.cimo-logo-empresa--iniciales{padding:0 8px;background:var(--superficie-hundida);color:var(--tinta);font:700 12px/1 var(--font-texto);letter-spacing:.04em}
.cimo-logo-empresa--chico{min-width:40px;height:24px}
.cimo-logo-empresa--chico.cimo-logo-empresa--iniciales{padding:0 6px}

/* ---- Texto solo para lectores de pantalla: no se ve, se lee ---- */
.cimo-oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Gráficas del motor (cimo-graficas.js; GRAFICOS-NAVEGACION.md §1). Color por rol o por categoría; el texto en tinta ---- */
/* En una fila de tarjetas de igual alto, el contenido va arriba: sin esto la grilla repartía el alto sobrante entre cabeza,
   leyenda, lienzo y pie (el título se separaba de su nota y el aviso de vacío se estiraba) */
.cimo-grafica{align-content:start}
.cimo-grafica .cimo-grafica__svg{width:auto;max-width:none;height:auto;overflow:hidden}
.cimo-grafica__lienzo{position:relative;min-width:0;border-radius:6px}
.cimo-grafica__lienzo:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-grafica__fila{display:flex;min-width:0}
.cimo-grafica__eje{flex:none}
/* En el teléfono el eje queda quieto y los periodos se deslizan; la sombra del borde dice que hay más */
.cimo-grafica__desliza{flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;
  background-color:var(--superficie);background-image:linear-gradient(to right,var(--superficie) 40%,transparent),linear-gradient(to left,var(--superficie) 40%,transparent),radial-gradient(farthest-side at 0 50%,var(--linea-control),transparent),radial-gradient(farthest-side at 100% 50%,var(--linea-control),transparent);
  background-position:left center,right center,left center,right center;background-size:32px 100%,32px 100%,10px 100%,10px 100%;background-repeat:no-repeat;background-attachment:local,local,scroll,scroll}
.cimo-grafica__desliza .cimo-grafica__svg{background:transparent}
.cimo-grafica .zona{fill:transparent;cursor:pointer}
.cimo-grafica .marca{transition:opacity .15s}
.cimo-grafica .atenuada{opacity:.3}
.cimo-grafica .meta{stroke:var(--tinta);stroke-width:1.5;stroke-dasharray:5 4}
.cimo-grafica .valor{paint-order:stroke;stroke:var(--superficie);stroke-width:3px;stroke-linejoin:round}
.cimo-grafica .valor--centro{font:700 16px var(--font-display)}
.cimo-grafica .eje--nombre{fill:var(--tinta);font-weight:500}
.cimo-grafica path.trazo{fill:none;stroke-width:2.5}
.cimo-grafica .porcion{stroke:var(--superficie);stroke-width:2}
.cimo-s0{fill:var(--linea-control);stroke:var(--linea-control)}
.cimo-grafica i[class^="cimo-s"],.cimo-leyenda i[class^="cimo-s"]{display:inline-block;flex:none;width:12px;height:12px;border-radius:3px}
.cimo-grafica__tip i[class^="cimo-s"]{width:8px;height:8px;border-radius:2px}
i.cimo-s0{background:var(--linea-control)}i.cimo-s1{background:var(--serie-1)}i.cimo-s2{background:var(--serie-2)}
i.cimo-s3{background:var(--serie-3)}i.cimo-s4{background:var(--serie-4)}i.cimo-s5{background:var(--serie-5)}
.cimo-grafica__leyenda button{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 4px;border:0;background:none;color:var(--tinta);font:500 13px/1 var(--font-texto);cursor:pointer}
.cimo-grafica__leyenda button::after{content:"";position:absolute;inset:-6px 0}
.cimo-grafica__leyenda button[aria-pressed="false"]{color:var(--tinta-suave);text-decoration:line-through}
.cimo-grafica__leyenda button[aria-pressed="false"] i{opacity:.35}
.cimo-grafica__leyenda button:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-grafica__leyenda li{min-height:32px}
.cimo-grafica__raya{display:inline-block;width:14px;height:0;border-top:2px dashed var(--tinta)}
.cimo-grafica__pie{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cimo-grafica__tabla:empty{display:none}
.cimo-grafica__vacio{display:grid;gap:4px;padding:28px 16px;text-align:center;border:1px dashed var(--linea-control);border-radius:var(--radio-control);font:400 14px/20px var(--font-texto);color:var(--tinta-suave)}
.cimo-grafica__vacio b{font-weight:600;color:var(--tinta)}
.cimo-grafica__silueta path{fill:var(--superficie-hundida)}
@media (prefers-reduced-motion:no-preference){.cimo-grafica__silueta{animation:cimo-pulso 1.4s ease-in-out infinite}}
@keyframes cimo-pulso{50%{opacity:.55}}

/* ---- Cifras: una fila medida (cimo-cifras.js; GRAFICOS-NAVEGACION.md §2). El color de la naturaleza va en el filo Y en la cifra
   (componentes13.css, decisión del dueño del 26/10/2026; YA NO APLICA «la cifra siempre en tinta») ---- */
.cimo-cifras--medida > .cimo-cifra{flex:1 1 0;min-width:0;padding:var(--cifra-relleno) var(--cifra-relleno) var(--cifra-relleno) calc(var(--cifra-relleno) + 4px)}
.cimo-cifras--desplaza > .cimo-cifra{flex:0 0 auto;width:min-content;min-width:160px}
.cimo-cifras--medida:not(.cimo-cifras--desplaza){overflow:visible}
.cimo-cifras--desplaza[data-desliza="inicio"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.cimo-cifras--desplaza[data-desliza="medio"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.cimo-cifras--desplaza[data-desliza="fin"]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}
.cimo-cifra--ingreso::before,.cimo-cifra--costo::before,.cimo-cifra--plan::before,.cimo-cifra--alerta::before,.cimo-cifra--neutro::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--linea-control)}
.cimo-cifra--ingreso::before{background:var(--serie-2)}.cimo-cifra--costo::before{background:var(--serie-costo)}.cimo-cifra--plan::before{background:var(--serie-1)}
.cimo-cifra--alerta::before{background:var(--serie-pendiente)}
.cimo-cifra__unidad{margin-left:6px;font:600 14px/1 var(--font-texto);color:var(--tinta-suave);letter-spacing:0}
.cimo-cifra__meta{position:relative;display:block;height:6px;margin-top:4px;border-radius:3px;background:var(--superficie-hundida)}
.cimo-cifra__meta > span{display:block;height:100%;border-radius:3px;background:var(--accion)}
.cimo-cifra__meta > i{position:absolute;top:-3px;width:2px;height:12px;background:var(--tinta)}
.cimo-cifra__mini{display:block;width:60px;height:16px}
.cimo-cifra__valor[data-exacto]{cursor:help}
.cimo-cifra__globo{position:absolute;z-index:5;left:8px;right:8px;bottom:8px;padding:6px 10px;border:1px solid var(--linea);border-radius:8px;background:var(--superficie);box-shadow:var(--sombra);
  font:600 13px/18px var(--font-texto);font-variant-numeric:tabular-nums;color:var(--tinta);overflow-wrap:anywhere;pointer-events:none}
button.cimo-cifra{min-height:var(--tactil)}
button.cimo-cifra[aria-pressed="true"]{background:var(--activo-fondo);border-color:var(--activo-tinta)}

/* ---- El menú (riel de módulos y hoja del módulo) va en componentes10.css: YA NO APLICA el acordeón de dos niveles, el riel
   plegable con Ctrl+B ni el cajón del teléfono (decisión del dueño, 26/10/2026, «B · Hoja del módulo»). ---- */

/* ---- Animación de CIMO (GRAFICOS-NAVEGACION.md §4): el arco se arma dovela por dovela y la clave lo cierra.
   Sin movimiento (prefers-reduced-motion), todo queda en su estado final: el símbolo completo ---- */
.cimo-arco{display:block;width:100%;height:auto;overflow:visible}
.cimo-arco .p{fill:var(--logo)}.cimo-arco .a{fill:var(--logo-clave)}
.cimo-arco .cimbra{fill:none;stroke:var(--linea-control);stroke-width:.8;stroke-dasharray:2 2}
.cimo-arco .dov,.cimo-arco .clave{transform-box:view-box;transform-origin:50px 50px}
/* Arco en dovelas: el arranque de la app y la portada de una presentación, una sola vez (1,7 s) */
.cimo-arco--arranque .dov,.cimo-arco--arranque .clave{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .cimo-arco--arranque .dov{animation:cimo-dovela calc(.42s * var(--cimo-vel,1)) cubic-bezier(.2,.9,.25,1) calc(var(--i) * 130ms * var(--cimo-vel,1)) both}
  .cimo-arco--arranque .clave{animation:cimo-cae calc(.5s * var(--cimo-vel,1)) cubic-bezier(.3,1.5,.5,1) calc(900ms * var(--cimo-vel,1)) both}
  .cimo-arco--arranque .oficial{animation:cimo-junta calc(.35s * var(--cimo-vel,1)) ease-out calc(1340ms * var(--cimo-vel,1)) both}
}
@keyframes cimo-dovela{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}to{opacity:1;transform:none}}
@keyframes cimo-cae{0%{opacity:0;transform:translateY(-22px)}40%{opacity:1}to{opacity:1;transform:none}}
@keyframes cimo-junta{from{opacity:0}to{opacity:1}}
/* Cimbra: el proceso con avance pone dovela por dovela sobre su molde; al 100 % baja la clave y las juntas se cierran */
.cimo-cimbra{display:grid;justify-items:center;gap:8px}
.cimo-cimbra .cimo-arco{width:132px}
.cimo-cimbra__cifra{font:700 28px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--tinta)}
.cimo-cimbra__pie{max-width:36ch;font:400 13px/18px var(--font-texto);color:var(--tinta-suave);text-align:center}
.cimo-cimbra__pie:empty{display:none}
.cimo-arco--cimbra .dov,.cimo-arco--cimbra .oficial{opacity:0}
.cimo-arco--cimbra .dov.puesta,.cimo-arco--cimbra.lista .oficial{opacity:1}
.cimo-arco--cimbra .clave{opacity:0;transform:translateY(-16px)}
.cimo-arco--cimbra .clave.puesta{opacity:1;transform:none}
.cimo-arco--cimbra.lista .cimbra{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .cimo-arco--cimbra .dov{transition:opacity calc(.25s * var(--cimo-vel,1)) ease-out}
  .cimo-arco--cimbra .clave{transition:transform calc(.45s * var(--cimo-vel,1)) cubic-bezier(.3,1.5,.5,1),opacity calc(.2s * var(--cimo-vel,1))}
  .cimo-arco--cimbra .oficial{transition:opacity calc(.35s * var(--cimo-vel,1)) ease-out calc(.45s * var(--cimo-vel,1))}
  .cimo-arco--cimbra .cimbra{transition:opacity .3s}
}

/* CIMO · escala densa (la «B · Denso» que escogió el dueño el 25/10/2026, noche, entre tres propuestas: apps/propuestas-densidad.html).
   Sus palabras: «todo es muy grande, no se aprovecha el espacio, tarjetas gigantes, letras muy grandes»; «la ERP maneja mucha
   información»; «una línea gigante solo para un título no puede ser»; «todos los encabezados arriba»; «simetría en los botones».
   En el PC con mouse CIMO trabaja como SINCO o una hoja de cálculo: controles de 28 px, letra de 12,5, filas de 26 con rejilla y
   cebra, títulos que son la ruta (13,5 en negrita), encabezado oscuro con empresa y proyecto fijos y sin tarjetas gigantes.
   Con el dedo (teléfono o tableta) los controles siguen de 44 px, pero con la misma cara: encabezado oscuro, radios cortos, letra de 14.
   YA NO APLICA: controles 52/44 en el PC, el título de 28 px, la tecla dibujada en los atajos. */

/* ---- El encabezado: BLANCO con una raya azul abajo y el logo a color (el dueño escogió la «2 · Blanco y azul» el 27/10/2026, tarde,
   viendo apps/_rev/imagen_erp.html: «no me gusta mucho el negro del encabezado del ERP, me parece muy oscuro»). En el tema oscuro sigue
   oscuro para no encandilar. YA NO APLICA el encabezado oscuro (`noche`) del 25/10/2026. ---- */
:root{--enc-fondo:#FFFFFF;--enc-tinta:#0A1A33;--enc-suave:#4F5B70;--enc-linea:#8591A6;--enc-campo:#EEF2F8;--enc-raya:#1846C7;--enc-logo:#1846C7;--enc-clave:#13A463}
html[data-tema="oscuro"],[data-theme="oscuro"]{--enc-fondo:#0F1A2E;--enc-tinta:#E9EEF7;--enc-suave:#A3AFC4;--enc-linea:#3A4A66;--enc-campo:#16233B;--enc-raya:#4F86F0;--enc-logo:#FFFFFF;--enc-clave:#7DE3A8}
@media (prefers-color-scheme:dark){html:not([data-tema]){--enc-fondo:#0F1A2E;--enc-tinta:#E9EEF7;--enc-suave:#A3AFC4;--enc-linea:#3A4A66;--enc-campo:#16233B;--enc-raya:#4F86F0;--enc-logo:#FFFFFF;--enc-clave:#7DE3A8}}
.cimo-encabezado{--logo:var(--enc-logo);--logo-clave:var(--enc-clave);background:var(--enc-fondo);color:var(--enc-tinta);border-bottom-color:transparent;box-shadow:inset 0 -2px 0 var(--enc-raya)}
.cimo-encabezado__titulo b{color:var(--enc-tinta)}
.cimo-encabezado__titulo span{color:var(--enc-suave)}
.cimo-encabezado .cimo-hbtn{background:transparent;border-color:transparent;color:var(--enc-tinta)}
.cimo-encabezado .cimo-hbtn:hover{background:var(--enc-campo)}
.cimo-encabezado .cimo-hbtn .cimo-insignia{border-color:var(--enc-fondo)}
.cimo-encabezado .cimo-contexto{border-color:var(--enc-linea);background:transparent;color:var(--enc-tinta)}
.cimo-encabezado .cimo-contexto small{color:var(--enc-suave)}
.cimo-encabezado .cimo-contexto:hover{background:var(--enc-campo)}
.cimo-encabezado .cimo-tecla{color:var(--enc-suave)}
.cimo-encabezado a:not(.cimo-btn):not(.cimo-menu-item){color:var(--enc-tinta)}
.cimo-encabezado .cimo-desplegable__panel{color:var(--tinta)}
.cimo-encabezado .cimo-desplegable__panel a:not(.cimo-btn):not(.cimo-menu-item){color:var(--enlace)}
/* los botones del encabezado y el avatar miden lo mismo y van en la misma línea («esto está torcido») */
.cimo-encabezado .cimo-hbtn,.cimo-encabezado .cimo-avatar-btn{width:var(--tactil);height:var(--tactil);border-radius:var(--radio-control)}
.cimo-encabezado .cimo-avatar{width:calc(var(--tactil) - 6px);height:calc(var(--tactil) - 6px);font-size:12px}
/* el desplegable del avatar va al centro del encabezado como los demás botones: `.cimo-desplegable` lleva align-self:flex-start y
   lo dejaba 8 px más arriba (lo hallaron las revisiones del Chatbot y de Licitaciones, 26/10/2026; geometria.cjs lo mide ahora) */
.cimo-encabezado .cimo-desplegable{align-self:center}
/* el contexto (empresa, proyecto) dentro del encabezado: el rótulo arriba y el valor abajo, en el alto de un control */
.cimo-encabezado .cimo-contexto{min-height:var(--tactil);gap:6px;padding:0 8px;line-height:1.15}
.cimo-encabezado .cimo-contexto small{font-size:12px;line-height:14px}
.cimo-encabezado .cimo-contexto span{white-space:nowrap}
/* en el PC el selector de empresa o proyecto no se aprieta por debajo de su texto: la flecha se montaba sobre el nombre a 900 px
   (revisión del DataMart, 26/10/2026); lo que cede es el buscador. En el teléfono va el botón único de D7, que sí se ajusta */
@media (min-width:900px){.cimo-encabezado .cimo-contexto,.cimo-encabezado .cimo-desplegable:has(> .cimo-contexto){flex:none}}

/* ---- Radios cortos y tablas con rejilla y cebra (las dos escalas) ---- */
.cimo-tabla tbody tr:nth-child(even) > td{background:var(--superficie-hundida)}
.cimo-tabla td + td,.cimo-tabla th + th{border-left:1px solid var(--linea)}
/* las columnas de texto (descriptores) en el azul claro de la franja de títulos con la letra en el azul de la marca (el dueño, 27/10/2026,
   «2 · Blanco y azul»: «tampoco me gusta cómo se ven en negro las columnas de los descriptores»); las de valor llevan su color (componentes13) */
.cimo-tabla thead th,.cimo-tablac .cimo-tabla thead th{background:var(--titulo-franja);color:var(--titulo-tinta)}
.cimo-tabla thead th:not([data-naturaleza]) .cimo-tablac__orden,.cimo-tabla thead th:not([data-naturaleza]) > button{color:var(--titulo-tinta)}
/* la cebra no tapa el rojo de una fila con error (lo vio la maqueta de Planoteca en .cimo-detalle) */
.cimo-tabla tbody tr[data-estado="error"] > td,.cimo-detalle tbody tr[data-estado="error"] > td{background:var(--peligro-suave)}

/* ---- La ruta orienta: en vez de un título grande, la cabeza de la página es la ruta con su último tramo en negrita ---- */
.cimo-migas [aria-current="page"]{font-weight:700;color:var(--tinta)}
.cimo-contenido__titulo h1{font:700 15px/20px var(--font-texto);letter-spacing:0}
.cimo-migas h1{display:inline;margin:0;font:inherit;letter-spacing:0}
/* Motivo, Requisitos y el error de un campo traen su propio display: sin esto, `hidden` no los esconde (lo vieron las maquetas de
   caja menor y conciliación: cajas vacías y motivos viejos a la vista) */
.cimo-motivo[hidden],.cimo-requisitos[hidden],.cimo-campo__error[hidden]{display:none}

/* ---- Texto largo en una tabla ancha: un renglón con «…» y completo en el globo (title). Solo en celdas; fuera de las tablas nada se corta. ---- */
.cimo-largo{display:block;max-width:var(--largo,240px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ---- Simetría: los botones de una misma columna o grupo miden lo mismo ---- */
.cimo-btns-par{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.cimo-btns-par > .cimo-btn{width:100%}
.cimo-pendiente .cimo-btn,.cimo-tabla td.cimo-accion .cimo-btn{min-width:84px}

/* ---- Atajos: se leen como una nota, no como una tecla dibujada. YA NO APLICA la tecla con borde. ---- */
.cimo-tecla{display:inline;min-width:0;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
            font:500 12px/16px var(--font-texto);color:var(--tinta-suave);letter-spacing:0}

/* ---- Teléfono y tableta: controles de 44 px, letra de 14, la misma cara ---- */
body{font-size:14px}

/* ---- PC con mouse: la escala densa ---- */
@media (min-width:900px) and (pointer:fine){
  :root{--tactil:28px;--tactil-grande:36px;--campo-alto:28px;--encabezado-alto:44px;--menu-ancho:208px;--celda-relleno:0 8px;
        --tarjeta-relleno:6px 10px;--ico-menu:16px;--ico-encabezado:16px}
  body{font-size:12.5px;line-height:1.4}
  .cimo-contenido{gap:8px;padding:8px 12px 20px}
  .cimo-contenido__titulo{gap:6px;min-height:var(--tactil)}
  .cimo-contenido__titulo h1{font-size:13.5px;line-height:18px}
  .cimo-ficha__titulo h1{font-size:15px;line-height:20px}
  .cimo-entrada h1{font-size:18px;line-height:24px}
  .cimo-t-titulo-1{font-size:18px;line-height:24px}
  .cimo-t-titulo-2,.cimo-ventana h2{font-size:15px;line-height:20px}
  .cimo-t-titulo-3,.cimo-cajon__cabeza h2,.cimo-vacio h3{font-size:13.5px;line-height:18px}
  .cimo-ajustes h3,.cimo-grilla__barra > b{font:700 12px/16px var(--font-texto);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-suave)}
  .cimo-btn{gap:6px;padding:0 10px;font-size:12.5px}
  .cimo-btn .cimo-ico{width:14px;height:14px}
  .cimo-icobtn .cimo-ico{width:16px;height:16px}
  .cimo-campo{gap:2px}
  .cimo-campo label{font-size:12px}
  .cimo-campo input,.cimo-campo select,.cimo-campo textarea{padding:0 8px;font-size:12.5px;line-height:18px}
  .cimo-campo textarea{padding:5px 8px}
  .cimo-menu a,.cimo-menu-item{gap:8px;padding:0 8px;font-size:12.5px}
  .cimo-menu-item .cimo-ico{width:16px;height:16px}
  .cimo-encabezado{gap:8px;padding:0 10px}
  .cimo-encabezado .cimo-logo{height:20px}
  .cimo-encabezado__titulo b{font-size:13.5px}
  .cimo-hbtn{width:var(--tactil);height:var(--tactil)}
  .cimo-avatar-btn > .cimo-avatar{width:calc(var(--tactil) - 4px);height:calc(var(--tactil) - 4px);font-size:12px}
  .cimo-pestanas [role="tab"]{padding:0 8px;font-size:12.5px}
  .cimo-segmentado{padding:2px}
  .cimo-segmentado button{min-height:22px;padding:0 8px;font-size:12px}
  .cimo-chip{min-height:24px;padding:0 8px;font-size:12px}
  .cimo-estado{height:18px;padding:0 6px;gap:4px;font-size:12px}
  .cimo-estado::before{width:5px;height:5px}
  .cimo-aviso{padding:6px 10px;font-size:12.5px}
  .cimo-tabla{font-size:12.5px}
  .cimo-tabla td,.cimo-tabla th{height:26px}
  /* en tarjetas la celda es flex y el alto fijo la volvía de 26 px: un texto de dos o tres renglones pisaba la fila vecina (lo halló la
     app Licitaciones, 26/10/2026); en tarjetas el alto es un mínimo */
  .cimo-tablac[data-vista="tarjetas"] .cimo-tabla td,.cimo-tabla--tarjetas td{height:auto;min-height:26px}
  /* y la letra de la escala: la celda del título salía en 15 px y los rótulos en 13 (lo halló la app Licitaciones, 26/10/2026) */
  .cimo-tablac[data-vista="tarjetas"] .cimo-tabla tbody td:first-child:not(.cimo-col-sel),.cimo-tablac[data-vista="tarjetas"] .cimo-tabla tbody td.cimo-col-sel + td{font-size:12.5px;line-height:18px}
  .cimo-tablac[data-vista="tarjetas"] .cimo-tabla td::before{font-size:12px;line-height:16px}
  .cimo-tabla th{font-size:12px}
  .cimo-pendiente{padding:4px 8px;column-gap:8px}
  .cimo-pendiente > i{height:16px}
  .cimo-pendiente b{font-size:12.5px;line-height:16px}
  .cimo-pendiente small{font-size:12px;line-height:15px}
  .cimo-lanzador{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
  .cimo-migas ol{font-size:12px;line-height:16px}
  .cimo-migas [aria-current="page"]{font-size:13.5px}
  /* las cifras van en una sola barra con separadores, no en tarjetas sueltas */
  /* si aún no caben, la barra se desliza de lado (con overflow:hidden las últimas quedaban ocultas: lo vio la maqueta del DataMart) */
  .cimo-cifras{--cifra-max:18px;gap:0;border:1px solid var(--linea-control);border-radius:var(--radio-tarjeta);overflow-x:auto;overflow-y:hidden;background:var(--superficie)}
  .cimo-cifras > .cimo-cifra{border:0;border-radius:0;box-shadow:inset -1px 0 0 var(--linea)}
  .cimo-cifra{gap:1px}
  .cimo-cifra__etiqueta{font-size:12px}
  .cimo-cifra__valor{font-size:var(--cifra-letra,18px)}
  /* los componentes con texto corrido llevan la letra de la escala densa (los vio la maqueta de proveedores en 14 y 14,5 px) */
  .cimo-matriz,.cimo-linea-tiempo li,.cimo-historial,.cimo-ficha__datos dd,.cimo-presupuesto dd,.cimo-atajos dd{font-size:12.5px;line-height:18px}
  .cimo-historial li{padding:6px 8px}
  .cimo-linea-tiempo li{padding-bottom:10px}
}

/* ---- Teléfono: lo que flota abajo no queda debajo de la barra inferior (lo vieron las maquetas de las apps, 26/10/2026) ---- */
@media (max-width:899.98px){
  /* el cajón en <dialog> sube hasta el 88 % del alto, como dice su ficha (max-height:100% lo dejaba a pantalla completa) */
  dialog.cimo-cajon{max-height:88dvh}
  /* la barra de selección queda encima de la barra inferior del armazón, no debajo */
  body:has(.cimo-barra) .cimo-masivo{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
}

/* ---- Accesos: el rol por módulo, como SINCO (26/10/2026): tarjetas con el conteo de rutas y el árbol de rutas con casillas.
   YA NO APLICA la matriz persona × área de cuatro niveles (.cimo-accesos con select) ---- */
.cimo-accesos__modulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin-bottom:8px}
.cimo-accesos__modulo{display:flex;align-items:center;gap:8px;min-height:var(--tactil);padding:4px 8px;border:1px solid var(--linea-control);border-radius:var(--radio-tarjeta);
  background:var(--superficie);color:var(--tinta);font:inherit;text-align:left;cursor:pointer}
.cimo-accesos__modulo b{display:block;font-weight:700}
.cimo-accesos__modulo small{display:block;font-size:12px;line-height:15px;color:var(--tinta-suave)}
.cimo-accesos__modulo[aria-pressed="true"]{background:var(--activo-fondo);border-color:var(--activo-tinta);color:var(--activo-tinta)}
.cimo-accesos__modulo[aria-pressed="true"] small{color:var(--activo-tinta)}
.cimo-accesos__modulo:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-accesos__dovela{display:grid;place-items:center;width:26px;height:24px;flex:none;color:var(--en-modulo);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}
.cimo-accesos__dovela .cimo-ico{--ico-tam:15px;margin-top:-2px}
.cimo-accesos__arbol .cimo-eleccion{min-height:var(--tactil)}

/* ---- Arreglos que salieron al integrar las apps en la maqueta del menú (26/10/2026) ---- */
/* la leyenda del mapa de calor de la Matriz lleva los mismos tonos que sus casillas */
.cimo-matriz__muestra[data-nivel="1"]{background:color-mix(in srgb,var(--accion) 10%,var(--superficie))}
.cimo-matriz__muestra[data-nivel="2"]{background:color-mix(in srgb,var(--accion) 20%,var(--superficie))}
.cimo-matriz__muestra[data-nivel="3"]{background:color-mix(in srgb,var(--accion) 32%,var(--superficie))}
/* una Multiselección dentro de un Campo: el borde y el error van en su caja, no en el buscador de adentro */
.cimo-campo .cimo-multi__campo input,.cimo-campo--error .cimo-multi__campo input{min-height:0;padding:0 4px;border:0;box-shadow:none;background:transparent}
.cimo-campo--error .cimo-multi__campo{border-color:var(--peligro);box-shadow:inset 0 0 0 1px var(--peligro)}
@media (min-width:900px) and (pointer:fine){
  /* Elección, Corridas y días de la semana en la escala densa (los vio la maqueta de Automatizaciones grandes) */
  .cimo-eleccion{gap:8px;font-size:12.5px;line-height:18px}
  .cimo-eleccion__marca{width:16px;height:16px;border-width:1.5px}
  .cimo-eleccion--interruptor .cimo-eleccion__marca{width:32px;height:18px}
  .cimo-eleccion--interruptor .cimo-eleccion__marca::after{width:12px;height:12px}
  .cimo-eleccion--casilla .cimo-eleccion__marca .cimo-ico{width:12px;height:12px}
  .cimo-eleccion--radio input:checked + .cimo-eleccion__marca::after{width:8px;height:8px}
  .cimo-corridas{gap:8px}
  .cimo-corridas__lista{gap:4px}
  .cimo-corrida summary{min-height:var(--tactil);padding:4px 8px;column-gap:8px}
  .cimo-corrida summary b{font-size:12.5px;line-height:16px}
  .cimo-corrida summary small,.cimo-corrida summary .cimo-num{font-size:12px;line-height:15px}
  .cimo-registro{padding:6px 8px;font-size:12px;line-height:16px}
  .cimo-dias-semana button{font-size:12.5px}
  .cimo-multi__campo{min-height:var(--campo-alto);padding:2px 6px;gap:4px}
  .cimo-multi__campo input{font-size:12.5px;line-height:18px}
  .cimo-multi__campo .cimo-chip{min-height:20px}
}

/* CIMO · el menú: riel de módulos y hoja del módulo (cimo-navegacion.js; GRAFICOS-NAVEGACION.md §3).
   Decisión del dueño (26/10/2026) entre tres propuestas (apps/propuestas-menu.html): «B · Hoja del módulo», como SINCO. Sus palabras:
   «menú lateral fijo, que despliegue no hacia abajo sino hacia la derecha, así como SINCO; que no se mueva, que se oculte cuando se
   elige y que lo que se vea fijo y active los menús sean los iconos de los módulos».
   A la izquierda, el riel con el icono y el nombre de cada módulo; al tocarlo, a la derecha, la hoja con todos sus submódulos y
   pantallas a la vista, encima del contenido y sin empujarlo. En el teléfono, la barra de abajo y la hoja a pantalla completa, un
   nivel a la vez. YA NO APLICA el acordeón de dos niveles, el riel que se pliega con Ctrl+B ni el cajón lateral del teléfono. */

:root{--riel-ancho:88px}

/* ---- El riel: fijo, no se mueve al bajar la página ---- */
.cimo-riel{display:none;background:var(--superficie);border-right:1px solid var(--linea)}
.cimo-riel__lista{display:flex;flex-direction:column;gap:2px;margin:0;padding:6px;list-style:none}
.cimo-riel__mod{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:56px;padding:6px 2px;
  border:0;border-radius:var(--radio-control);background:transparent;color:var(--tinta);font:600 12px/14px var(--font-texto);text-align:center;cursor:pointer}
.cimo-riel__mod:hover{background:var(--superficie-hundida)}
.cimo-riel__mod[aria-expanded="true"]{background:var(--activo-fondo);color:var(--activo-tinta)}
/* el módulo donde está la persona lleva el filo verde, la clave de dónde estás */
.cimo-riel__mod[data-actual]::before{content:"";position:absolute;left:-6px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--activo-filo)}
.cimo-riel__mod:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
/* el nombre corto del módulo; uno largo parte en dos renglones por su guion suave («Automati-zaciones»), nunca a media sílaba */
.cimo-riel__txt{display:block;max-width:100%;white-space:normal;overflow-wrap:normal;hyphens:manual}
/* el módulo, en su dovela de color: los seis módulos son las dovelas del arco CIMO */
.cimo-riel__dovela{display:grid;place-items:center;width:28px;height:26px;flex:none;color:var(--en-modulo);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}
.cimo-riel__dovela:not([class*=" mod-"]){background:var(--accion)}
.cimo-riel__dovela .cimo-ico{--ico-tam:16px;margin-top:-2px}
.cimo-riel__dovela--propia{background:transparent!important;color:var(--tinta-suave);clip-path:none}
.cimo-riel__mod[aria-expanded="true"] .cimo-riel__dovela--propia{color:var(--activo-tinta)}

/* ---- La hoja del módulo: flota a la derecha del riel, encima del contenido ---- */
.cimo-hoja{position:fixed;z-index:25;top:var(--cimo-hoja-arriba,var(--encabezado-alto));bottom:0;left:var(--cimo-hoja-izq,var(--riel-ancho));display:flex;flex-direction:column;
  width:min(800px,calc(100vw - var(--riel-ancho)));min-width:0;background:var(--superficie);border-right:1px solid var(--linea-control);box-shadow:var(--sombra-alta)}
.cimo-hoja[hidden]{display:none}
.cimo-hoja__cab{display:flex;align-items:center;gap:8px;min-height:var(--tactil);padding:4px 6px 4px 10px;border-bottom:1px solid var(--linea);flex:none}
.cimo-hoja__cab h2{flex:1;min-width:0;margin:0;font:700 12px/16px var(--font-texto);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-suave)}
.cimo-hoja__cab .cimo-riel__dovela{width:22px;height:20px}
.cimo-hoja__cab .cimo-riel__dovela .cimo-ico{--ico-tam:13px;margin-top:-1px}
.cimo-hoja__cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 8px 12px}
.cimo-hoja__cuerpo--columnas{columns:3 220px;column-gap:12px}
.cimo-hoja__grupo{break-inside:avoid;margin:0 0 8px;padding:0}
.cimo-hoja__grupo h3{margin:0;padding:8px 10px 2px;font:700 12px/16px var(--font-texto);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-suave)}
.cimo-hoja__lista{display:flex;flex-direction:column;gap:1px;margin:0;padding:0;list-style:none}
.cimo-hoja__op{display:flex;align-items:stretch;gap:2px}
.cimo-hoja__ir{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;min-height:var(--tactil);padding:3px 10px;
  border-radius:var(--radio-control);color:var(--tinta);text-decoration:none;font:500 12.5px/16px var(--font-texto)}
.cimo-hoja__ir:hover{background:var(--superficie-hundida)}
.cimo-hoja__ir small{font-size:12px;line-height:15px;color:var(--tinta-suave)}
.cimo-hoja__ir[aria-current="page"]{background:var(--activo-fondo);color:var(--activo-tinta);font-weight:600}
.cimo-hoja__ir[aria-current="page"] small{color:var(--activo-tinta)}
.cimo-hoja__fav{flex:none;display:grid;place-items:center;width:var(--tactil);min-height:var(--tactil);padding:0;border:0;border-radius:var(--radio-control);background:transparent;
  color:var(--tinta-suave);cursor:pointer}
.cimo-hoja__fav .cimo-ico{--ico-tam:14px}
.cimo-hoja__fav[aria-pressed="true"]{color:var(--alerta-tinta)}
.cimo-hoja__atras{display:inline-flex;align-items:center;gap:4px;min-height:var(--tactil);padding:0 8px;border:0;border-radius:var(--radio-control);background:transparent;
  color:var(--enlace);font:600 12.5px/16px var(--font-texto);cursor:pointer}
/* en el teléfono, cada nivel es una lista de botones con «›» */
.cimo-hoja__grupo-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:var(--tactil);padding:4px 10px;border:0;
  border-radius:var(--radio-control);background:transparent;color:var(--tinta);font:500 14px/18px var(--font-texto);text-align:left;cursor:pointer}
.cimo-hoja__grupo-btn:hover{background:var(--superficie-hundida)}
.cimo-hoja__grupo-txt{display:flex;align-items:center;gap:10px;min-width:0}
.cimo-hoja__flecha{flex:none;font-size:16px;line-height:16px;color:var(--tinta-suave)}
.cimo-hoja__vacio{margin:0;padding:10px;font:400 12.5px/18px var(--font-texto);color:var(--tinta-suave)}
.cimo-hoja__ir:focus-visible,.cimo-hoja__fav:focus-visible,.cimo-hoja__atras:focus-visible,.cimo-hoja__grupo-btn:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
@media (prefers-reduced-motion:no-preference){.cimo-hoja:not([hidden]){animation:cimo-hoja-entra .14s ease-out}}
@keyframes cimo-hoja-entra{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* ---- Desde 900 px: el armazón con riel ---- */
@media (min-width:900px){
  .cimo-armazon:has(> .cimo-riel){grid-template-columns:var(--riel-ancho) minmax(0,1fr)}
  /* la hoja de un módulo grande: cuatro columnas */
  .cimo-hoja--ancha{width:min(1060px,calc(100vw - var(--riel-ancho)))}
  .cimo-hoja--ancha .cimo-hoja__cuerpo--columnas{columns:4 200px}
  .cimo-riel{position:sticky;z-index:26;top:var(--encabezado-alto);display:flex;flex-direction:column;justify-content:space-between;align-self:start;
    height:calc(100vh - var(--encabezado-alto));height:calc(100dvh - var(--encabezado-alto));overflow-y:auto;box-sizing:border-box}
}
/* Doce módulos y el pie (decisiones del dueño del 26/10/2026, Licitaciones y Chatbot incluidos): en una pantalla de portátil (1366 × 768) el riel se aprieta para que
   todo quepa sin deslizar; en una pantalla alta queda como estaba. Si aun así no cabe, el riel se desliza (overflow-y de arriba). */
@media (min-width:900px) and (max-height:900px){
  .cimo-riel__lista{gap:1px;padding:4px}
  .cimo-riel__mod{min-height:44px;gap:2px;padding:2px 0}
  .cimo-riel__dovela{width:24px;height:22px}
  .cimo-riel__dovela .cimo-ico{--ico-tam:14px}
}
@media (min-width:900px) and (max-height:900px) and (pointer:fine){.cimo-riel__mod{min-height:40px;line-height:13px}}
/* una pantalla todavía más baja (portátil con la barra de favoritos del navegador): un punto más apretado */
@media (min-width:900px) and (max-height:640px) and (pointer:fine){.cimo-riel__mod{min-height:36px;gap:1px;padding:1px 0}.cimo-riel__dovela{height:20px}}
/* la dovela del DataMart lleva la clave en verde sobre la piedra oscura (decisión D1) */
.cimo-riel__dovela.mod-datamart,.cimo-accesos__dovela.mod-datamart{color:var(--en-modulo-datamart)}
/* ---- Teléfono: sin riel; la hoja a pantalla completa, encima de la barra de abajo ---- */
@media (max-width:899.98px){
  .cimo-hoja{left:0;right:0;width:auto;bottom:calc(56px + env(safe-area-inset-bottom,0px));border-right:0;border-top:1px solid var(--linea)}
  .cimo-hoja__ir{font-size:14px;line-height:18px}
}

/* ---- Las migas abren el menú en ese nivel (pedido del dueño, 26/10/2026): el módulo y el submódulo son botones ---- */
.cimo-migas__ir{position:relative;padding:0;border:0;background:none;color:var(--enlace);font:inherit;cursor:pointer;text-align:left}
.cimo-migas__ir::after{content:"";position:absolute;left:-4px;right:-4px;top:-13px;bottom:-13px}
.cimo-migas__ir:hover{text-decoration:underline}
.cimo-migas__ir:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
/* el submódulo al que se llegó desde las migas, resaltado dentro de la hoja */
.cimo-hoja__grupo--marcado{margin:0 -4px 8px;padding:0 4px 4px;border-radius:var(--radio-tarjeta);background:var(--activo-fondo)}
.cimo-hoja__grupo--marcado h3{color:var(--activo-tinta)}
.cimo-hoja__grupo--marcado .cimo-hoja__ir:hover{background:var(--superficie)}

/* ---- Un ícono pequeño para cada cosa del menú (pedido del dueño, 26/10/2026): el submódulo con el de su tema, la pantalla con el de su tipo ---- */
.cimo-hoja__grupo h3{display:flex;align-items:center;gap:6px}
.cimo-hoja__grupo h3 .cimo-ico{--ico-tam:14px;flex:none;color:var(--tinta-suave)}
.cimo-hoja__grupo--marcado h3 .cimo-ico{color:var(--activo-tinta)}
.cimo-hoja__ir{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}
.cimo-hoja__ir > span,.cimo-hoja__ir > small{min-width:0}
.cimo-hoja__ir:has(> small){flex-wrap:wrap;column-gap:8px}
.cimo-hoja__ir:has(> small) > small{flex-basis:100%;padding-left:22px}
.cimo-hoja__ir > .cimo-ico{--ico-tam:14px;flex:none;color:var(--tinta-suave)}
.cimo-hoja__ir[aria-current="page"] > .cimo-ico{color:var(--activo-tinta)}
.cimo-hoja__grupo-txt .cimo-ico{--ico-tam:18px;flex:none;color:var(--tinta-suave)}

/* ---- Color en la hoja (pedidos del dueño, 26/10/2026: «darle color a los títulos principales y los iconos, asociados a los colores de
   marca, para que no se vea tan parco; algo no exagerado» y «que los iconos principales del título tengan los colores de su módulo;
   los pequeños, que ya son de la ruta, pueden seguir azules»): el título del grupo en el azul de la marca, su ícono en el color del
   módulo (data-hoja-mod en la hoja) y el de cada pantalla en un azul más suave. Lo marcado y la pantalla actual siguen en `activo-*`. ---- */
[data-hoja-mod]{--hoja-mod:var(--accion)}
[data-hoja-mod="obra"]{--hoja-mod:var(--modulo-obra)}[data-hoja-mod="contabilidad"]{--hoja-mod:var(--modulo-contabilidad)}
[data-hoja-mod="inventarios"]{--hoja-mod:var(--modulo-inventarios)}[data-hoja-mod="contratos"]{--hoja-mod:var(--modulo-contratos)}
[data-hoja-mod="maquinaria"]{--hoja-mod:var(--modulo-maquinaria)}[data-hoja-mod="personas"]{--hoja-mod:var(--modulo-personas)}
[data-hoja-mod="gestion"]{--hoja-mod:var(--modulo-gestion)}[data-hoja-mod="datamart"]{--hoja-mod:var(--modulo-datamart)}
[data-hoja-mod="automatizaciones"]{--hoja-mod:var(--modulo-automatizaciones)}
[data-hoja-mod="licitaciones"]{--hoja-mod:var(--modulo-licitaciones)}[data-hoja-mod="chatbot"]{--hoja-mod:var(--modulo-chatbot)}
.cimo-hoja__grupo h3{color:var(--menu-titulo)}
.cimo-hoja__grupo h3 .cimo-ico,.cimo-hoja__grupo-txt .cimo-ico{color:var(--hoja-mod,var(--marca))}
.cimo-hoja__ir > .cimo-ico{color:var(--menu-icono)}
.cimo-hoja__ir[aria-current="page"] > .cimo-ico{color:var(--activo-tinta)}

/* CIMO · formularios con límites. Pedido del dueño (26/10/2026), al ver un campo de NIT, su DV y el botón «Revisar» descuadrados:
   «revisa que no hayan quedado cosas montadas; ponerle límites a los formularios para que no se deformen así, en todo».
   Cada campo tiene un ancho según lo que lleva y no pasa de su máximo ni baja de su mínimo; en una fila, los campos se acomodan y
   bajan de renglón antes de aplastarse; un botón de la fila va a la altura del control, no del rótulo, y del mismo alto. */

:root{--rotulo-alto:18px;--campo-hueco:6px}
@media (min-width:900px) and (pointer:fine){:root{--campo-hueco:2px}}
.cimo-campo{gap:var(--campo-hueco);max-width:var(--campo-max,640px)}
.cimo-campo > label{line-height:var(--rotulo-alto)}

/* ---- Anchos según lo que lleva el campo: base, mínimo y máximo ---- */
.cimo-campo--dv{--campo-base:56px;--campo-min:48px;--campo-max:72px}
.cimo-campo--hora{--campo-base:136px;--campo-min:128px;--campo-max:168px}
.cimo-campo--numero{--campo-base:112px;--campo-min:88px;--campo-max:160px}
.cimo-campo--codigo{--campo-base:128px;--campo-min:104px;--campo-max:180px}
.cimo-campo--fecha{--campo-base:152px;--campo-min:140px;--campo-max:180px}
.cimo-campo--valor{--campo-base:160px;--campo-min:132px;--campo-max:220px}
.cimo-campo--nit{--campo-base:176px;--campo-min:148px;--campo-max:220px}
.cimo-campo--corto{--campo-base:200px;--campo-min:148px;--campo-max:280px}
.cimo-campo--medio{--campo-base:280px;--campo-min:180px;--campo-max:420px}
.cimo-campo--largo{--campo-base:360px;--campo-min:220px;--campo-max:640px}
/* sin límite solo a propósito: un campo que debe ocupar todo su contenedor (el texto de un comentario a lo ancho) */
.cimo-campo--todo{--campo-max:none}

/* ---- La fila de campos: alineada arriba (un mensaje bajo un campo no la tuerce) y baja de renglón antes de aplastar ---- */
.cimo-campos{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;min-width:0}
.cimo-campos > .cimo-campo{flex:1 1 var(--campo-base,200px);min-width:min(100%,var(--campo-min,140px))}
/* los de largo fijo (DV, hora, fecha, número, código) no se estiran para llenar la fila */
.cimo-campos > :is(.cimo-campo--dv,.cimo-campo--hora,.cimo-campo--fecha,.cimo-campo--numero,.cimo-campo--codigo){flex-grow:0}
/* un botón de la fila va a la altura del control (debajo del rótulo) y mide lo mismo que el control */
.cimo-campos > .cimo-btn{flex:none;margin-top:calc(var(--rotulo-alto) + var(--campo-hueco));min-height:var(--campo-alto)}

/* ---- La celda editable de un Detalle tampoco pasa del máximo, ni cuando la tabla pasa a tarjetas; la de un código, corta ---- */
.cimo-detalle td .cimo-celda{max-width:640px}
.cimo-detalle td .cimo-celda--codigo{max-width:180px}
/* en tarjetas, la celda editable va a la derecha, como los demás valores de la tarjeta; la celda con campo se alinea arriba y su rótulo
   queda a la altura del campo (un mensaje debajo no lo mueve), y en la fila de alta el primer campo también lleva su rótulo (lo halló la
   revisión de Planoteca, 26/10/2026: el rótulo bajaba 22 px con el mensaje y el código quedaba sin rótulo y corrido) */
@media screen and (max-width:899.98px){
  .cimo-tabla--tarjetas td:not(:first-child) .cimo-celda,.cimo-tabla--tarjetas td:first-child:has(> * .cimo-celda, > .cimo-celda) .cimo-celda{margin-left:auto}
  .cimo-tabla--tarjetas td:has(.cimo-celda){align-items:flex-start}
  .cimo-tabla--tarjetas td:has(.cimo-celda)::before{display:flex;align-items:center;min-height:var(--tactil)}
  .cimo-tabla--tarjetas td:first-child:has(.cimo-celda){font:inherit;padding-bottom:3px}
  .cimo-tabla--tarjetas td:first-child:has(.cimo-celda)::before{content:attr(data-etiqueta)}
}
/* la barra de abajo del teléfono, encima de lo que se pega al desplazar (la columna fija de la Matriz se montaba sobre «Inicio») */
.cimo-barra{z-index:22}

/* ---- El formulario: una columna de hasta 640 px; .cimo-form--ancho hasta 960 px para dos o tres campos por fila ---- */
.cimo-form{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:640px}
.cimo-form--ancho{max-width:960px}
.cimo-form__acciones{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}

/* ---- D6 (decisión del dueño, 26/10/2026): en el teléfono las tarjetas de cifras van de a dos por renglón, todas a la vista y sin
   deslizar; la regla «una sola fila» sigue en el PC y la tableta ancha. cimo-cifras.js mide cada tarjeta en su celda igual que en la
   fila (baja la letra hasta 16 px y el relleno hasta 8); una cantidad impar deja la última a lo ancho. ---- */
@media (max-width:599.98px){
  .cimo-cifras,.cimo-cifras--medida,.cimo-cifras--desplaza{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;overflow:visible;scroll-snap-type:none;-webkit-mask-image:none;mask-image:none}
  .cimo-cifras > .cimo-cifra,.cimo-cifras--desplaza > .cimo-cifra{width:auto;min-width:0}
  .cimo-cifras > .cimo-cifra:last-child:nth-child(odd){grid-column:1 / -1}
  /* la cifra que no cabe ni en millones (cimo-cifras.js, 26/10/2026) va sola en su renglón */
  .cimo-cifras > .cimo-cifra--ancha{grid-column:1 / -1}
}

/* CIMO · Descriptor: la frase corta que sale al dejar el ratón quieto sobre algo (pedido del dueño, 26/10/2026: «un estándar de muchas
   cosas para que la gente, poniendo el mouse, después de 1 o 2 segundos aparezca un descriptor; si mueve el mouse se quita»).
   Lo pone cimo-descriptor.js: una sola caja para toda la página, que no recibe el ratón y no tapa el clic. Decidido por el dueño
   (26/10/2026): el globo oscuro de una frase, 1 segundo de espera, sin descriptor en el teléfono. YA NO APLICA la «tarjeta». */
.cimo-descriptor{position:fixed;z-index:80;max-width:min(280px,calc(100vw - 16px));padding:5px 9px;border-radius:var(--radio-control);
  background:var(--tinta);color:var(--superficie);font:500 12.5px/17px var(--font-texto);box-shadow:var(--sombra);pointer-events:none}
.cimo-descriptor[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.cimo-descriptor:not([hidden]){animation:cimo-descriptor-sale .12s ease-out}}
@keyframes cimo-descriptor-sale{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}

/* CIMO · el color de la naturaleza del valor y los títulos con franja de color (decisiones del dueño, 26/10/2026, viendo el antes y
   el después de CIMO_SISTEMA/apps/_rev/colores.html; el estudio con evidencia en CIMO_REVISION_APPS/datamart_colores.md).
   Como el DataMart de hoy, el color dice qué es la cifra y se repite en la tarjeta (filo Y cifra), el encabezado de la columna, la
   barra dentro de la celda y la serie de la gráfica. Seis roles: ingreso verde, costo ROJO, pendiente ámbar, plan azul (también
   retenciones, anticipos y saldos), neutro gris y referencia en tinta; el resultado va por signo y todo dinero negativo va en rojo.
   YA NO APLICAN «la cifra siempre en tinta» ni «el costo en naranja» (decisiones 2, 3 y 10 del 25/10/2026).
   Desde el 27/10/2026 (tarde) con los COLORES Y LAS REGLAS DEL DATAMART DE HOY («esos colores así es que me gusta para el estándar de
   las apps, para temas de valores, barras, etc.»): encabezado atenuado con letra blanca, velo de la columna, barra al 34 % y la cifra en
   su tono oscuro y en negrita. YA NO APLICAN el encabezado tenue al 14 %, la barra al 20 % ni la cifra en tinta del 26/10/2026.
   Los tintes son opacos (tenue-*, celda-*, barra-*, semaforo-*, edad-*-suave) para poder medir la cifra que va encima: paleta.py los mide. */

/* ---- Cifras: el filo y la cifra en el color de su naturaleza ---- */
.cimo-cifra--referencia::before,.cimo-cifra--resultado::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0}
.cimo-cifra--costo::before{background:var(--serie-costo)}
.cimo-cifra--alerta::before{background:var(--serie-pendiente)}
.cimo-cifra--referencia::before{background:var(--tinta)}
.cimo-cifra--resultado::before{background:var(--serie-2)}
.cimo-cifra--resultado[data-signo="negativo"]::before{background:var(--serie-costo)}
/* la cifra en el color de su naturaleza, como las tarjetas del DataMart (texto-*: el color del tablero, oscurecido solo si no llega a 4,5) */
.cimo-cifra--ingreso .cimo-cifra__valor,.cimo-cifra--resultado .cimo-cifra__valor{color:var(--texto-ingreso)}
.cimo-cifra--costo .cimo-cifra__valor{color:var(--texto-costo)}
.cimo-cifra--alerta .cimo-cifra__valor{color:var(--texto-pendiente)}
.cimo-cifra--plan .cimo-cifra__valor{color:var(--texto-plan)}
.cimo-cifra--neutro .cimo-cifra__valor{color:var(--texto-neutro)}
.cimo-cifra--referencia .cimo-cifra__valor{color:var(--tinta)}
/* todo valor negativo va en rojo, sea cual sea su naturaleza (motor_tablero.py:1067) */
.cimo-cifra[data-signo="negativo"] .cimo-cifra__valor{color:var(--texto-costo)}
/* la cifra elegida (fondo activo-fondo): marca-tinta mide 4,36 ahí en claro; va el verde de texto más oscuro */
button.cimo-cifra[aria-pressed="true"]:is(.cimo-cifra--ingreso,.cimo-cifra--resultado):not([data-signo="negativo"]) .cimo-cifra__valor{color:var(--positivo-tinta)}

/* ---- Gráficas: los roles nuevos. s6 = costo (rojo), s7 = pendiente (ámbar), s8 = referencia (tinta) ---- */
.cimo-s6{fill:var(--serie-costo);stroke:var(--serie-costo)}.cimo-s7{fill:var(--serie-pendiente);stroke:var(--serie-pendiente-borde)}
.cimo-s8{fill:var(--tinta);stroke:var(--tinta)}
i.cimo-s6{background:var(--serie-costo)}i.cimo-s7{background:var(--serie-pendiente);box-shadow:inset 0 0 0 1px var(--serie-pendiente-borde)}i.cimo-s8{background:var(--tinta)}
/* Un tono por barra (la gráfica de edades: un color por tramo, como el DataMart). Las clases las pone cimo-graficas.js con `tonos` */
.cimo-st-edad-1{fill:var(--edad-1)}.cimo-st-edad-2{fill:var(--edad-2)}.cimo-st-edad-3{fill:var(--edad-3)}.cimo-st-edad-4{fill:var(--edad-4)}
.cimo-st-edad-5{fill:var(--edad-5)}.cimo-st-edad-6{fill:var(--edad-6)}.cimo-st-edad-sin-fecha{fill:var(--edad-sin-fecha)}
i.cimo-st-edad-1{background:var(--edad-1)}i.cimo-st-edad-2{background:var(--edad-2)}i.cimo-st-edad-3{background:var(--edad-3)}i.cimo-st-edad-4{background:var(--edad-4)}
i.cimo-st-edad-5{background:var(--edad-5)}i.cimo-st-edad-6{background:var(--edad-6)}i.cimo-st-edad-sin-fecha{background:var(--edad-sin-fecha)}
.cimo-grafica i[class^="cimo-st-"],.cimo-leyenda i[class^="cimo-st-"]{display:inline-block;flex:none;width:12px;height:12px;border-radius:3px}
.cimo-grafica__tip i[class^="cimo-st-"]{width:8px;height:8px;border-radius:2px}

/* ---- Pastillas de la edad de la cartera: seis tramos y sin fecha, como hoy (construir_contable.py:62-75). El punto lleva el color
   del tramo; el fondo, su tinte; la palabra, en tinta ---- */
.cimo-estado--edad-1,.cimo-estado--edad-2,.cimo-estado--edad-3,.cimo-estado--edad-4,.cimo-estado--edad-5,.cimo-estado--edad-6,.cimo-estado--edad-sin-fecha{color:var(--tinta)}
.cimo-estado--edad-1{background:var(--edad-1-suave)}.cimo-estado--edad-1::before{background:var(--edad-1)}
.cimo-estado--edad-2{background:var(--edad-2-suave)}.cimo-estado--edad-2::before{background:var(--edad-2)}
.cimo-estado--edad-3{background:var(--edad-3-suave)}.cimo-estado--edad-3::before{background:var(--edad-3)}
.cimo-estado--edad-4{background:var(--edad-4-suave)}.cimo-estado--edad-4::before{background:var(--edad-4)}
.cimo-estado--edad-5{background:var(--edad-5-suave)}.cimo-estado--edad-5::before{background:var(--edad-5)}
.cimo-estado--edad-6{background:var(--edad-6-suave)}.cimo-estado--edad-6::before{background:var(--edad-6)}
.cimo-estado--edad-sin-fecha{background:var(--edad-sin-fecha-suave)}.cimo-estado--edad-sin-fecha::before{background:var(--edad-sin-fecha)}

/* ---- Tabla: encabezado con el color de la columna atenuado y la letra blanca, como el DataMart (27/10/2026, tarde) ---- */
.cimo-tabla th[data-naturaleza="ingreso"]{--nat-tenue:var(--tenue-ingreso)}.cimo-tabla th[data-naturaleza="costo"]{--nat-tenue:var(--tenue-costo)}
.cimo-tabla th[data-naturaleza="pendiente"]{--nat-tenue:var(--tenue-pendiente)}.cimo-tabla th[data-naturaleza="plan"]{--nat-tenue:var(--tenue-plan)}
.cimo-tabla th[data-naturaleza="neutro"],.cimo-tabla th[data-naturaleza="resultado"]{--nat-tenue:var(--tenue-neutro)}
.cimo-tabla th[data-naturaleza="referencia"]{--nat-tenue:var(--tenue-referencia)}
.cimo-tabla thead th[data-naturaleza],.cimo-tablac .cimo-tabla thead th[data-naturaleza]{background:var(--nat-tenue);color:var(--en-tenue)}
.cimo-tabla th[data-naturaleza] .cimo-tablac__orden,.cimo-tabla th[data-naturaleza] > button{color:var(--en-tenue)}

/* ---- Tabla: la barra dentro de la celda (largo = valor ÷ el mayor de la columna en lo que se ve), detrás de la cifra. Es un fondo
   de la celda y no un elemento: no se monta sobre la cifra, sigue a las columnas fijas y no cambia el alto de la fila. Con negativos
   sale del centro, con una raya en el centro ---- */
.cimo-tabla td[data-barra="ingreso"]{--barra-color:var(--barra-ingreso)}.cimo-tabla td[data-barra="costo"]{--barra-color:var(--barra-costo)}
.cimo-tabla td[data-barra="pendiente"]{--barra-color:var(--barra-pendiente)}.cimo-tabla td[data-barra="plan"]{--barra-color:var(--barra-plan)}
.cimo-tabla td[data-barra="neutro"]{--barra-color:var(--barra-neutro)}.cimo-tabla td[data-barra="referencia"]{--barra-color:var(--barra-referencia)}
.cimo-tablac .cimo-tabla td[data-barra]{background-image:linear-gradient(to right,transparent var(--barra-a),var(--barra-color) var(--barra-a),var(--barra-color) var(--barra-b),transparent var(--barra-b));
  background-size:100% calc(100% - 6px);background-position:center;background-repeat:no-repeat}
.cimo-tablac .cimo-tabla td[data-centro]:not([data-barra]){background-image:linear-gradient(var(--linea-control),var(--linea-control));background-size:1px calc(100% - 4px);background-position:center;background-repeat:no-repeat}
.cimo-tablac .cimo-tabla td[data-centro][data-barra]{background-image:linear-gradient(to right,transparent var(--barra-a),var(--barra-color) var(--barra-a),var(--barra-color) var(--barra-b),transparent var(--barra-b)),linear-gradient(var(--linea-control),var(--linea-control));
  background-size:100% calc(100% - 6px),1px calc(100% - 4px);background-position:center,center}
/* la columna con naturaleza: el velo de su color, la cifra en su tono oscuro y en negrita (data-nat, lo pone cimo-tabla.js); el signo:
   todo dinero negativo en el rojo oscuro y un resultado positivo en el verde oscuro, como el DataMart */
.cimo-tabla td[data-nat="ingreso"]{--nat-celda:var(--celda-ingreso);--nat-cifra:var(--cifra-ingreso)}.cimo-tabla td[data-nat="costo"]{--nat-celda:var(--celda-costo);--nat-cifra:var(--cifra-costo)}
.cimo-tabla td[data-nat="pendiente"]{--nat-celda:var(--celda-pendiente);--nat-cifra:var(--cifra-pendiente)}.cimo-tabla td[data-nat="plan"]{--nat-celda:var(--celda-plan);--nat-cifra:var(--cifra-plan)}
.cimo-tabla td[data-nat="neutro"]{--nat-celda:var(--celda-neutro);--nat-cifra:var(--cifra-neutro)}.cimo-tabla td[data-nat="referencia"]{--nat-celda:var(--celda-referencia);--nat-cifra:var(--cifra-referencia)}
.cimo-tablac .cimo-tabla td[data-nat]{background-color:var(--nat-celda);color:var(--nat-cifra);font-weight:600}
.cimo-tabla .cimo-tablac__neg{color:var(--cifra-costo)}
.cimo-tabla .cimo-tablac__pos{color:var(--cifra-ingreso)}
/* ---- Tabla: el semáforo (utilidad o desviación) en degradado de fondo, la cifra en tinta y en negrita ---- */
.cimo-tabla td[data-semaforo="malo"]{--sem-fondo:color-mix(in srgb,var(--semaforo-malo) var(--sem-p),var(--semaforo-medio))}
.cimo-tabla td[data-semaforo="bueno"]{--sem-fondo:color-mix(in srgb,var(--semaforo-bueno) var(--sem-p),var(--semaforo-medio))}
.cimo-tabla td[data-semaforo="medio"]{--sem-fondo:var(--semaforo-medio)}
.cimo-tabla td[data-semaforo],.cimo-tablac .cimo-tabla td[data-semaforo]{background-color:var(--sem-fondo);color:var(--tinta);font-weight:600}
/* en tarjetas (teléfono) no van barras: la cifra con su signo y el semáforo sí */
.cimo-tablac[data-vista="tarjetas"] .cimo-tabla td[data-barra],.cimo-tablac[data-vista="tarjetas"] .cimo-tabla td[data-centro]{background-image:none}

/* ---- Títulos de tablas y gráficas: franja de color (la opción 3 que escogió el dueño). La franja azul clara, el título en azul de
   la marca, en negrita y más grande que antes, y una raya azul debajo; en oscuro, su par. YA NO APLICA el título de 12 px en
   mayúsculas grises de la escala densa ---- */
.cimo-grilla__barra{padding:6px 10px;background:var(--titulo-franja);border-bottom:2px solid var(--titulo-raya);border-radius:var(--radio-tarjeta) var(--radio-tarjeta) 0 0}
.cimo-grilla__barra > b{font:700 17px/24px var(--font-display);color:var(--titulo-tinta)}
.cimo-grilla__barra > b small{color:var(--tinta-suave)}
.cimo-grilla__barra .cimo-btn--secundario{border-color:var(--titulo-raya)}
.cimo-grafica{--grafica-rv:16px;--grafica-rh:16px;padding:var(--grafica-rv) var(--grafica-rh)}
.cimo-grafica__cabeza{padding:6px 10px;background:var(--titulo-franja);border-bottom:2px solid var(--titulo-raya);border-radius:var(--radio-control) var(--radio-control) 0 0}
/* arriba de la tarjeta, la franja llega a los bordes */
.cimo-grafica > .cimo-grafica__cabeza:first-child{margin:calc(-1 * var(--grafica-rv)) calc(-1 * var(--grafica-rh)) 0;padding:6px var(--grafica-rh);
  border-radius:calc(var(--radio-tarjeta) - 1px) calc(var(--radio-tarjeta) - 1px) 0 0}
.cimo-grafica__titulo{font:700 17px/24px var(--font-display);color:var(--titulo-tinta)}
.cimo-grafica__cabeza .cimo-btn--secundario{border-color:var(--titulo-raya)}
@media (min-width:900px) and (pointer:fine){
  .cimo-grilla__barra{padding:3px 8px}
  .cimo-grilla__barra > b{font:700 14px/20px var(--font-texto);letter-spacing:0;text-transform:none;color:var(--titulo-tinta)}
  .cimo-grilla__barra > b small{font-size:12px}
  .cimo-grafica__cabeza,.cimo-grafica > .cimo-grafica__cabeza:first-child{padding-top:3px;padding-bottom:3px}
  .cimo-grafica__titulo{font:700 14px/20px var(--font-texto);letter-spacing:0;text-transform:none;color:var(--titulo-tinta)}
}

/* ==================================================================================================================================
   Proceso (cimo-proceso): el molde de toda pantalla de proceso. Decisión del dueño, 29/10/2026, al ver Facturas de caja menor de
   Automatizaciones (0.76.0): «me gustaría que ese estándar de Facturas de caja menor se replique en todo, me gustó cómo quedaron los
   botones, etc.; miremos solo que tenga colores CIMO, para que hagamos las mejoras transversales». La FORMA es la de Caja menor
   (causacion.css de Automatizaciones: .cf3, .cf3-cab, .cf-pildora, .cf3-p, .cf3-asa, .cf3-fac, .cf3-mtabs); los COLORES, los de CIMO:
   cada uno sale de un token y va por su papel (los cinco tonos de estado, `linea-control` en el borde de lo que se toca, «aquí estás»
   con `activo-fondo` y el filo verde, la cabeza de la caja en «blanco y azul»). La tabla «color de hoy → token» está en la ficha
   Proceso del catálogo y en apps/_rev/molde_proceso.html.

   .cimo-proceso                      la pantalla entera: una sola ventana, la página no baja; cada caja se desplaza por dentro
     header.cimo-proceso__cab         una sola fila: título con su renglón chico, pastillas de resumen, acciones, (tema y salir)
     ol.cimo-proceso__pasos           la franja de pasos: li.cimo-proceso__paso con «N · Nombre» adentro y la cuenta debajo
     div.cimo-proceso__pestanas       en el teléfono, qué caja se ve (una a la vez)
     div.cimo-proceso__cuerpo         las tres cajas con un separador entre cada par:
       aside.cimo-proceso__caja--cola     izquierda: la cola de lo que toca procesar (cimo-proceso__item)
       div.cimo-separador.cimo-proceso__asa[data-asa="izq"]
       section.cimo-proceso__caja--centro el documento, la tabla o el análisis
       div.cimo-separador.cimo-proceso__asa[data-asa="der"]
       aside.cimo-proceso__caja--datos    derecha: el formulario, los datos o el resultado, con el botón principal en su pie
   Lo arma cimo-proceso.js desde datos (CIMO.proceso(raiz, opciones)); una app que no carga el JS de CIMO copia el marcado y pone
   los anchos con --cimo-proceso-izq y --cimo-proceso-der en .cimo-proceso__cuerpo.
   ================================================================================================================================== */

.cimo-proceso{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0;box-sizing:border-box;background:var(--fondo);color:var(--tinta);
  container-type:inline-size;font:400 13px/1.4 var(--font-texto)}
.cimo-proceso *,.cimo-proceso *::before,.cimo-proceso *::after{box-sizing:border-box}
.cimo-proceso [hidden]{display:none}
/* fija debajo del encabezado de la app (la app real: cimo-proceso.js le pone el «top» con la opción fija) */
.cimo-proceso--fija{position:fixed;left:0;right:0;bottom:0;z-index:5;height:auto}

/* ---- el encabezado de una sola fila ---- */
.cimo-proceso__cab{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 16px;background:var(--superficie);border-bottom:1px solid var(--linea)}
.cimo-proceso__titulo{display:flex;flex-direction:column;min-width:0;max-width:100%}
.cimo-proceso__titulo small{font:600 12px/1.35 var(--font-texto);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave);overflow-wrap:anywhere}
.cimo-proceso__titulo b{font:600 15px/1.3 var(--font-texto);color:var(--tinta);overflow-wrap:anywhere}
.cimo-proceso__resumen,.cimo-proceso__acciones{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cimo-proceso__hueco{flex:1 1 auto}
.cimo-proceso__co{display:none}
.cimo-proceso__menu,.cimo-proceso__sesion{display:none}
.cimo-proceso__sesion{align-items:center;gap:8px}
/* cuando la fila hace de encabezado de la app (desde 900 px): el menú, el tema y «Salir» van en ella y lleva la raya azul del encabezado */
@media (min-width:900px){
  .cimo-proceso--una .cimo-proceso__cab{flex-wrap:nowrap;padding:8px 14px;border-bottom:2px solid var(--titulo-raya)}
  .cimo-proceso--una .cimo-proceso__menu{display:inline-grid;flex:none}
  .cimo-proceso--una .cimo-proceso__sesion{display:inline-flex}
  .cimo-proceso--una .cimo-proceso__titulo{flex:0 1 auto}
  .cimo-proceso--una .cimo-proceso__resumen,.cimo-proceso--una .cimo-proceso__acciones{flex-wrap:nowrap;flex:none}
}

/* ---- pastillas (resumen), fichas (la cola) y el estado en línea: los cinco tonos de CIMO y Anulado, siempre con su palabra ---- */
.cimo-proceso__pastilla{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--radio-pastilla);font:600 12px/1 var(--font-texto);white-space:nowrap}
.cimo-proceso__ficha{display:inline-flex;align-items:center;min-height:20px;max-width:100%;padding:0 7px;border-radius:var(--radio-pastilla);font:600 12px/1.3 var(--font-texto)}
.cimo-proceso__pastilla,.cimo-proceso__ficha,.cimo-proceso__pastilla--neutro,.cimo-proceso__ficha--neutro{background:var(--estado-borrador);color:var(--estado-borrador-tinta)}
.cimo-proceso__pastilla--espera,.cimo-proceso__ficha--espera{background:var(--estado-enviado);color:var(--estado-enviado-tinta)}
.cimo-proceso__pastilla--bien,.cimo-proceso__ficha--bien{background:var(--estado-aprobado);color:var(--estado-aprobado-tinta)}
.cimo-proceso__pastilla--informado,.cimo-proceso__ficha--informado{background:var(--estado-recibido);color:var(--estado-recibido-tinta)}
.cimo-proceso__pastilla--problema,.cimo-proceso__ficha--problema{background:var(--estado-devuelto);color:var(--estado-devuelto-tinta)}
.cimo-proceso__pastilla--anulado,.cimo-proceso__ficha--anulado{background:var(--superficie);color:var(--tinta-suave);box-shadow:inset 0 0 0 1px var(--linea-control)}
.cimo-proceso__est{display:inline-flex;align-items:center;gap:6px;font:400 12px/1.35 var(--font-texto);color:var(--tinta)}
.cimo-proceso__est > i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--marcador)}
.cimo-proceso__est--espera > i{background:var(--estado-enviado-tinta)}
.cimo-proceso__est--bien > i{background:var(--estado-aprobado-tinta)}
.cimo-proceso__est--informado > i{background:var(--estado-recibido-tinta)}
.cimo-proceso__est--problema > i{background:var(--peligro)}
.cimo-proceso__est--anulado > i{background:transparent;box-shadow:inset 0 0 0 2px var(--marcador)}

/* ---- botones: los de Caja menor (30 px en el PC, radio 8, letra de 12 en 600), con los colores de CIMO ---- */
/* principal: `accion` (uno por pantalla, en el pie de la caja de la derecha); tintado: el secundario de Caja menor (`info-suave` con
   `enlace`); tintado y peligro: anular o cancelar (`peligro-suave` con `peligro`) */
.cimo-btn--tintado{background:var(--info-suave);color:var(--enlace)}
.cimo-btn--tintado:hover{box-shadow:inset 0 0 0 1px var(--enlace)}
.cimo-btn--tintado.cimo-btn--peligro{background:var(--peligro-suave);color:var(--peligro)}
.cimo-btn--tintado.cimo-btn--peligro:hover{box-shadow:inset 0 0 0 1px var(--peligro)}
.cimo-proceso .cimo-btn{gap:6px;padding:0 12px;border-radius:8px;font:600 12px/1.2 var(--font-texto);white-space:nowrap;text-wrap:nowrap}
.cimo-proceso .cimo-btn .cimo-ico{width:14px;height:14px}
.cimo-proceso .cimo-btn:disabled,.cimo-proceso .cimo-btn[aria-disabled="true"]{box-shadow:none}
.cimo-proceso__hbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--linea);border-radius:8px;
  background:var(--superficie-hundida);color:var(--tinta);font:600 12px/1 var(--font-texto);cursor:pointer;white-space:nowrap}
.cimo-proceso__hbtn .cimo-ico{width:18px;height:18px}
.cimo-proceso__hbtn--peligro:hover{background:var(--peligro-suave);border-color:var(--peligro);color:var(--peligro)}
.cimo-proceso__hbtn:focus-visible,.cimo-proceso__menu:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-proceso__menu{place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--linea);border-radius:6px;background:var(--superficie-hundida);color:var(--tinta);cursor:pointer}
.cimo-proceso__menu .cimo-ico{width:20px;height:20px}
@media (min-width:900px){ .cimo-proceso .cimo-btn{min-height:30px;height:30px} }
@media (max-width:899.98px){ .cimo-proceso .cimo-btn{min-height:var(--tactil);min-width:var(--tactil)} .cimo-proceso__hbtn{height:var(--tactil);min-width:var(--tactil)} }

/* ---- la franja de pasos: «N · Nombre» adentro y la cuenta debajo; dos renglones como máximo ----
   hecho en verde con chulo (`estado-aprobado`), el actual relleno de azul (`accion`), el que pide atención con la cuenta en ocre
   (`alerta-tinta`), el resto solo con el borde (`linea-control`: es algo que se toca). Cada píldora mide lo que su texto: nada se
   corta; si no caben, solo el número y la franja se desliza dejando el actual a la vista. */
.cimo-proceso__pasos{position:relative;flex:none;display:flex;gap:6px;margin:0;padding:7px 12px;list-style:none;background:var(--superficie);
  border-bottom:1px solid var(--linea);overflow-x:auto;scrollbar-width:none}
.cimo-proceso__pasos::-webkit-scrollbar{display:none}
.cimo-proceso__paso{flex:1 1 auto;min-width:max-content;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:40px;
  padding:3px 12px;border:1.5px solid var(--linea-control);border-radius:var(--radio-pastilla);background:var(--superficie);color:var(--tinta);text-align:center;line-height:1.25}
.cimo-proceso__paso-n{display:inline-flex;align-items:center;gap:4px;font:700 12.5px/1.25 var(--font-texto);white-space:nowrap}
.cimo-proceso__paso-n .cimo-ico{width:12px;height:12px}
.cimo-proceso__paso-c{font:400 12px/1.25 var(--font-texto);color:var(--tinta-suave);white-space:nowrap}
.cimo-proceso__paso[data-estado="hecho"]{background:var(--estado-aprobado);border-color:var(--estado-aprobado-tinta);color:var(--estado-aprobado-tinta)}
.cimo-proceso__paso[data-estado="hecho"] .cimo-proceso__paso-c{color:var(--estado-aprobado-tinta)}
.cimo-proceso__paso[data-estado="atencion"] .cimo-proceso__paso-c{color:var(--alerta-tinta);font-weight:600}
.cimo-proceso__paso[aria-current="step"]{background:var(--accion);border-color:var(--accion);color:var(--en-accion)}
.cimo-proceso__paso[aria-current="step"] .cimo-proceso__paso-c{color:var(--en-accion);font-weight:400}
.cimo-proceso__paso[data-ir]{cursor:pointer}
.cimo-proceso__paso[data-ir]:hover{border-color:var(--enlace)}
.cimo-proceso__paso:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
@media (max-width:899.98px){ .cimo-proceso__paso{min-height:var(--tactil)} .cimo-proceso__paso:not([aria-current]){min-width:var(--tactil)} }

/* ---- las tres cajas ---- */
/* anchos: la cola 300 y la derecha 400 (desde 1.300 px de la pantalla hacia abajo, 260 y 360), nunca más de un tercio y dos quintos;
   la persona los arrastra (cimo-proceso.js pone --cimo-proceso-izq y --cimo-proceso-der en el cuerpo) y lo escondido queda en una tira de 40 px */
.cimo-proceso__cuerpo{--cimo-proceso-izq:300px;--cimo-proceso-der:400px;--izq:min(var(--cimo-proceso-izq),34cqw);--der:min(var(--cimo-proceso-der),42cqw);
  position:relative;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:var(--izq) 12px minmax(0,1fr) 12px var(--der);padding:8px 10px 10px;background:var(--fondo)}
.cimo-proceso__cuerpo[data-modo="mensaje"]{display:block;overflow:auto;padding:16px}
.cimo-proceso__caja{min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--linea);border-radius:10px;overflow:hidden}
.cimo-proceso__caja--mesa{background:var(--superficie-hundida)}
/* la cabeza de cada caja, en «blanco y azul» como toda caja de CIMO: franja `titulo-franja`, raya de 2 px `titulo-raya`, título `titulo-tinta` */
.cimo-proceso__cabeza{flex:none;display:flex;align-items:center;gap:8px;min-height:46px;min-width:0;padding:8px 12px;background:var(--titulo-franja);border-bottom:2px solid var(--titulo-raya)}
.cimo-proceso__cabeza h2{margin:0;font:700 12px/1.3 var(--font-texto);letter-spacing:.04em;text-transform:uppercase;color:var(--titulo-tinta);white-space:nowrap}
.cimo-proceso__cuenta{font:400 12px/1.3 var(--font-texto);color:var(--tinta-suave);white-space:nowrap}
.cimo-proceso__cabeza .cimo-btn--tintado{box-shadow:inset 0 0 0 1px var(--titulo-raya)}
.cimo-proceso__contenido{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.cimo-proceso__pie{flex:none;display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--linea)}
.cimo-proceso__caja--cola .cimo-proceso__pie .cimo-btn{flex:1}
.cimo-proceso__caja--datos .cimo-proceso__pie{padding:10px 12px}
.cimo-proceso__caja--datos .cimo-proceso__pie .cimo-btn{flex:none}
.cimo-proceso__caja--datos .cimo-proceso__pie .cimo-btn--principal{flex:1 1 auto}
.cimo-proceso__nada{margin:0;padding:16px;color:var(--tinta-suave);line-height:1.45}
/* las vistas del centro (Factura · Plantilla…): sobre la franja, la elegida en blanco con el filo azul */
.cimo-proceso__vistas{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.cimo-proceso__vistas::-webkit-scrollbar{display:none}
.cimo-proceso__vistas button{flex:none;height:30px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--tinta-suave);font:600 12px/1 var(--font-texto);cursor:pointer;white-space:nowrap}
.cimo-proceso__vistas button:hover{background:var(--superficie)}
.cimo-proceso__vistas button[aria-selected="true"]{background:var(--superficie);color:var(--titulo-tinta);box-shadow:inset 0 0 0 1px var(--titulo-raya)}
.cimo-proceso__vistas button:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-proceso__abre,.cimo-proceso__pestanas{display:none}

/* ---- la cola de la izquierda ---- */
.cimo-proceso__filtros{flex:none;display:flex;flex-direction:column;gap:8px;padding:8px 10px;border-bottom:1px solid var(--linea)}
.cimo-proceso__seg{--n:2;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;padding:2px;border-radius:8px;background:var(--superficie-hundida)}
.cimo-proceso__seg button{position:relative;min-width:0;min-height:28px;padding:0 6px;border:0;border-radius:6px;background:transparent;color:var(--tinta-suave);
  font:600 12px/1.25 var(--font-texto);cursor:pointer}
.cimo-proceso__seg button[aria-pressed="true"]{background:var(--superficie);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea-control)}
.cimo-proceso__seg button:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-proceso__buscar{width:100%;height:30px;padding:0 10px;border:1px solid var(--linea-control);border-radius:8px;background:var(--campo);color:var(--tinta);font:400 12.5px/1.3 var(--font-texto)}
.cimo-proceso__buscar::placeholder{color:var(--marcador);opacity:1}
.cimo-proceso__buscar:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
.cimo-proceso__item{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:2px 8px;align-items:start;width:100%;margin:0;padding:9px 12px 9px 9px;
  border:0;border-bottom:1px solid var(--linea);border-left:3px solid transparent;border-radius:0;background:transparent;color:var(--tinta);font:inherit;text-align:left;cursor:pointer}
.cimo-proceso__item:hover{background:var(--superficie-hundida)}
.cimo-proceso__item[aria-current="true"]{background:var(--activo-fondo);border-left-color:var(--activo-filo)}
.cimo-proceso__item:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-proceso__item-e{grid-row:1 / 3;margin-top:2px}
.cimo-proceso__item-t{font:700 13px/1.35 var(--font-texto);overflow-wrap:anywhere}
.cimo-proceso__item-v{font:700 13px/1.35 var(--font-texto);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cimo-proceso__item-s{grid-column:2 / 4;font:400 12px/1.35 var(--font-texto);color:var(--tinta-suave);overflow-wrap:anywhere}
.cimo-proceso__item-f{grid-column:2 / 4;margin-top:3px;display:flex;flex-wrap:wrap;gap:4px;min-width:0}
/* el punto de estado: gris por revisar (neutro), ocre por decidir (espera), verde con chulo listo (bien), azul informado, rojo con
   problema y el aro de lo que no entra (anulado). `marcador` y los tintes de estado miden 3 o más contra la caja y la fila elegida. */
.cimo-proceso__punto{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--marcador);color:var(--superficie)}
.cimo-proceso__punto .cimo-ico{width:9px;height:9px}
.cimo-proceso__punto--espera{background:var(--estado-enviado-tinta)}
.cimo-proceso__punto--bien{background:var(--estado-aprobado-tinta)}
.cimo-proceso__punto--informado{background:var(--estado-recibido-tinta)}
.cimo-proceso__punto--problema{background:var(--peligro)}
.cimo-proceso__punto--anulado{background:transparent;box-shadow:inset 0 0 0 2px var(--marcador)}

/* ---- esconder la cola o la derecha: queda una tira de 40 px con su nombre ---- */
.cimo-proceso__plegar{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--tinta-suave);cursor:pointer}
.cimo-proceso__plegar .cimo-ico{width:16px;height:16px}
.cimo-proceso__plegar:hover{background:var(--superficie);color:var(--tinta)}
.cimo-proceso__plegar:focus-visible,.cimo-proceso__tira:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cimo-proceso__tira{display:none;flex-direction:column;align-items:center;gap:12px;width:100%;height:100%;min-height:0;padding:14px 0;border:0;border-radius:0;
  background:var(--superficie);color:var(--enlace);font:600 12px/1 var(--font-texto);cursor:pointer}
.cimo-proceso__tira:hover{background:var(--info-suave)}
.cimo-proceso__tira .cimo-ico{width:16px;height:16px}
.cimo-proceso__tira span{writing-mode:vertical-rl;transform:rotate(180deg);color:var(--tinta-suave);letter-spacing:.06em;text-transform:uppercase}

/* ---- un mensaje en lugar de las cajas (el robot trabaja, no trajo nada, no se pudo) ---- */
.cimo-proceso__msg{max-width:min(760px,100%);margin:24px auto;display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border:1px solid var(--linea);border-radius:12px;
  background:var(--superficie);color:var(--tinta);line-height:1.45}
.cimo-proceso__msg p{margin:6px 0 0}
.cimo-proceso__msg--problema{border-left:4px solid var(--peligro)}

/* ---- el separador entre dos cajas: la píldora de Caja menor (4 × 48 con tres rayitas) que se pone azul y crece al tomarla ----
   Vertical (cambia el ancho) u horizontal (cambia el alto). Sin role="separator", .cimo-separador sigue siendo la división con
   texto de Entrada. El foco es la misma píldora en `accion` y más larga: un anillo de 12 px de ancho por todo el alto tapaba las cajas. */
.cimo-separador[role="separator"]{display:block;position:relative;flex:none;gap:0;min-width:0;font:inherit;color:inherit;cursor:col-resize;touch-action:none}
.cimo-separador[role="separator"]::before{content:"";position:absolute;left:50%;top:50%;width:4px;height:48px;margin:-24px 0 0 -2px;border-radius:3px;background:var(--tinta-suave);flex:none}
.cimo-separador[role="separator"]::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:16px;margin:-8px 0 0 -1px;
  background:repeating-linear-gradient(to bottom,var(--superficie) 0 2px,transparent 2px 5px);flex:none}
.cimo-separador[role="separator"]:hover::before,.cimo-separador[role="separator"]:focus-visible::before,.cimo-separador[role="separator"][data-moviendo]::before{
  background:var(--accion);height:72px;margin-top:-36px}
.cimo-separador[role="separator"]:focus-visible{outline:none}
.cimo-separador[role="separator"][aria-orientation="horizontal"]{cursor:row-resize}
.cimo-separador[role="separator"][aria-orientation="horizontal"]::before{width:48px;height:4px;margin:-2px 0 0 -24px}
.cimo-separador[role="separator"][aria-orientation="horizontal"]::after{width:16px;height:2px;margin:-1px 0 0 -8px;
  background:repeating-linear-gradient(to right,var(--superficie) 0 2px,transparent 2px 5px)}
.cimo-separador[role="separator"][aria-orientation="horizontal"]:hover::before,.cimo-separador[role="separator"][aria-orientation="horizontal"]:focus-visible::before,
.cimo-separador[role="separator"][aria-orientation="horizontal"][data-moviendo]::before{width:72px;height:4px;margin:-2px 0 0 -36px}
.cimo-proceso__cuerpo[data-arrastrando]{cursor:col-resize;user-select:none}
.cimo-proceso__cuerpo[data-arrastrando] iframe{pointer-events:none}

/* ---- según el ancho de la pantalla de proceso (no de la ventana: dentro del menú de CIMO es más angosta) ---- */
@container (max-width:1300px){
  .cimo-proceso__cuerpo{--cimo-proceso-izq:260px;--cimo-proceso-der:360px}
  .cimo-proceso__acciones .cimo-proceso__lg{display:none}
  .cimo-proceso__acciones .cimo-proceso__co{display:inline}
}
@container (min-width:1101px){
  .cimo-proceso__cuerpo[data-plegada~="izq"]{--izq:40px}
  .cimo-proceso__cuerpo[data-plegada~="izq"] .cimo-proceso__caja--cola > :not(.cimo-proceso__tira){display:none}
  .cimo-proceso__cuerpo[data-plegada~="izq"] .cimo-proceso__caja--cola > .cimo-proceso__tira{display:flex}
}
@container (min-width:761px){
  .cimo-proceso__cuerpo[data-plegada~="der"]{--der:40px}
  .cimo-proceso__cuerpo[data-plegada~="der"] .cimo-proceso__caja--datos > :not(.cimo-proceso__tira){display:none}
  .cimo-proceso__cuerpo[data-plegada~="der"] .cimo-proceso__caja--datos > .cimo-proceso__tira{display:flex}
}
/* bajo 1.100: la cola se abre encima con su botón del centro; en la franja, solo el número de los que no son el actual */
@container (max-width:1100.98px){
  .cimo-proceso__cuerpo{grid-template-columns:minmax(0,1fr) 12px var(--der)}
  .cimo-proceso__caja--cola,.cimo-proceso__asa[data-asa="izq"],.cimo-proceso__caja--cola .cimo-proceso__plegar,.cimo-proceso__resumen [data-opcional]{display:none}
  .cimo-proceso__caja--cola[data-abierta]{display:flex;position:absolute;z-index:20;top:0;bottom:0;left:0;width:320px;max-width:90%;box-shadow:var(--sombra-alta)}
  .cimo-proceso__abre{display:inline-flex}
  .cimo-proceso__paso:not([aria-current]){flex:0 0 auto;min-width:40px;padding:3px 8px}
  .cimo-proceso__paso:not([aria-current]) .cimo-proceso__paso-t,.cimo-proceso__paso:not([aria-current]) .cimo-proceso__paso-c{display:none}
}
/* bajo 760 (el teléfono): una caja a la vez con las pestañas de arriba; sin separadores; los botones, solo el ícono o la palabra corta */
@container (max-width:760.98px){
  .cimo-proceso__cab{gap:6px 10px;padding:8px 12px}
  .cimo-proceso__acciones .cimo-proceso__lg,.cimo-proceso__cuerpo > .cimo-proceso__asa,.cimo-proceso__plegar{display:none}
  .cimo-proceso__acciones .cimo-proceso__co{display:inline}
  .cimo-proceso__pasos{gap:4px;padding:6px 10px}
  .cimo-proceso__pestanas{display:flex;flex:none;padding:6px 10px;background:var(--superficie);border-bottom:1px solid var(--linea)}
  .cimo-proceso__pestanas .cimo-proceso__seg{flex:1}
  .cimo-proceso__cuerpo{grid-template-columns:minmax(0,1fr);padding:0}
  .cimo-proceso__cuerpo > .cimo-proceso__caja{display:none;border:0;border-radius:0}
  .cimo-proceso__cuerpo > .cimo-proceso__caja[data-movil]{display:flex}
  .cimo-proceso__caja--cola[data-abierta]{position:static;width:auto;max-width:none;box-shadow:none}
  .cimo-proceso__abre{display:none}
}
/* con el dedo: lo que se toca mide 44 (el filtro y las pestañas agrandan su área con ::after) */
@media (max-width:899.98px){
  .cimo-proceso__seg button{min-height:40px}
  .cimo-proceso__seg button::after{content:"";position:absolute;inset:-2px 0}
  .cimo-proceso__buscar{height:var(--tactil);font-size:16px}
  .cimo-proceso__vistas button{height:var(--tactil)}
  .cimo-proceso__plegar{position:relative}
  .cimo-proceso__plegar::after{content:"";position:absolute;inset:-8px}
}
@media print{ .cimo-separador[role="separator"],.cimo-proceso__pasos,.cimo-proceso__pestanas,.cimo-proceso__plegar{display:none} }
@media print{html:not([data-tema]),html[data-tema]{--fondo:#F4F6FA;--superficie:#FFFFFF;--superficie-hundida:#EEF2F8;--campo:#FFFFFF;--linea:#E2E7F0;--linea-control:#8591A6;--tinta:#0A1A33;--tinta-suave:#4F5B70;--marcador:#66728A;--azul:#1846C7;--noche:#0A1A33;--logo:#1846C7;--logo-clave:#13A463;--menta:#7DE3A8;--logo-sobre-marca:#FFFFFF;--en-noche:#FFFFFF;--marca:#13A463;--marca-tinta:#0B7A47;--marca-suave:#E3F6EC;--accion:#1846C7;--accion-presionado:#1238A6;--en-accion:#FFFFFF;--activo-fondo:#DFE7FA;--activo-tinta:#1846C7;--activo-filo:#13A463;--enlace:#1846C7;--foco:#1846C7;--info:#1846C7;--info-suave:#E6EEFB;--alerta:#C98A12;--alerta-suave:#FAF0D6;--alerta-tinta:#7A5600;--en-alerta:#3A2C00;--peligro:#B42318;--peligro-suave:#FDE9E9;--en-peligro:#FFFFFF;--estado-borrador:#E3E8F0;--estado-borrador-tinta:#0A1A33;--estado-enviado:#F6E8D2;--estado-enviado-tinta:#8A5A00;--estado-aprobado:#D5EEE0;--estado-aprobado-tinta:#0B6B3E;--estado-recibido:#DFE7FA;--estado-recibido-tinta:#1846C7;--estado-devuelto:#FAE4E2;--estado-devuelto-tinta:#B42318;--modulo-obra:#0B7A47;--modulo-contabilidad:#1C5D9B;--modulo-inventarios:#0F6E68;--modulo-maquinaria:#7A5600;--modulo-personas:#6A3D9A;--modulo-gestion:#5E6167;--modulo-contratos:#9A3412;--modulo-automatizaciones:#A21CAF;--modulo-licitaciones:#4338CA;--modulo-chatbot:#4D7C0F;--en-modulo:#FFFFFF;--modulo-datamart:#0A1A33;--en-modulo-datamart:#7DE3A8;--menu-titulo:#1846C7;--menu-icono:#4A6FD8;--velo:rgba(10,26,51,0.48);--toast-icono:#7DE3A8;--toast-enlace:#8FB3F0;--toast-alerta:#FAC775;--toast-peligro:#F49A92;--papel:#FFFFFF;--papel-tinta:#0A1A33;--papel-suave:#4F5B70;--papel-linea:#D5DBE5;--papel-clave:#13A463;--serie-1:#1565C0;--serie-2:#2F9E57;--serie-3:#7A3FB0;--serie-4:#C2620A;--serie-5:#0B8F87;--serie-costo:#C0392B;--serie-pendiente:#D4A017;--serie-pendiente-borde:#8F6A0B;--nat-neutro:#5B6675;--plan-tinta:#1846C7;--positivo-tinta:#0A6B3F;--titulo-franja:#EAF0FD;--titulo-tinta:#1846C7;--titulo-raya:#1846C7;--tenue-ingreso:#4C7F68;--celda-ingreso:#F5FAF7;--barra-ingreso:#B2DBC1;--cifra-ingreso:#1A5730;--texto-ingreso:#237641;--tenue-costo:#91585A;--celda-costo:#FCF5F4;--barra-costo:#E8B5B0;--cifra-costo:#6A1F18;--texto-costo:#BC382A;--tenue-pendiente:#867546;--celda-pendiente:#FDFAF3;--barra-pendiente:#EFDBA8;--cifra-pendiente:#75580D;--texto-pendiente:#83630E;--tenue-plan:#446C9D;--celda-plan:#F3F7FC;--barra-plan:#A8C5E8;--cifra-plan:#0C386A;--texto-plan:#1565C0;--tenue-neutro:#646D7B;--celda-neutro:#F7F7F8;--barra-neutro:#C2C6CB;--cifra-neutro:#323840;--texto-neutro:#5B6675;--tenue-referencia:#3F4A5D;--celda-referencia:#F3F4F5;--barra-referencia:#A4AAB3;--cifra-referencia:#060E1C;--texto-referencia:#0A1A33;--en-tenue:#FFFFFF;--semaforo-malo:#E09C95;--semaforo-medio:#EAD08B;--semaforo-bueno:#97CEAB;--edad-1:#2E8B57;--edad-1-suave:#D5E8DD;--edad-2:#7A8C00;--edad-2-suave:#E4E8CC;--edad-3:#B8860B;--edad-3-suave:#F1E7CE;--edad-4:#D0650F;--edad-4-suave:#F6E0CF;--edad-5:#C2381A;--edad-5-suave:#F3D7D1;--edad-6:#8F1A10;--edad-6-suave:#E9D1CF;--edad-sin-fecha:#8591A6;--edad-sin-fecha-suave:#E7E9ED;--sombra-nav:0 1px 3px rgba(10,26,51,.07);--sombra:0 1px 2px rgba(10,26,51,.05), 0 4px 14px rgba(10,26,51,.07);--sombra-alta:0 8px 26px rgba(10,26,51,.13);color-scheme:light}body{background:var(--papel)}.cimo-encabezado,.cimo-menu,.cimo-barra,.cimo-masivo,.cimo-sin-guardar,.cimo-toast,.cimo-filtros__cuerpo,.cimo-barra-lista,.cimo-btn,.cimo-icobtn,.cimo-hbtn,.cimo-no-imprimir{display:none!important}.cimo-solo-impresion{display:block!important}.cimo-armazon{display:block!important}.cimo-contenido{padding:0}.cimo-tabla-marco{overflow:visible;border:0;background-image:none}.cimo-tabla thead{display:table-header-group}.cimo-tabla tr,.cimo-cifra,.cimo-grafica{break-inside:avoid}@page{margin:14mm}}