/* app.css — componentes y layout · Facto Valid · «Valid facto» (F6) Depende de tokens.css. Estética: utilitarian refinado, alta densidad, sin decoración. Marca: verde=primario (no estado) · navy=chrome · estado frío (teal/índigo/violeta/rosa). */ /* ─────────────────────────────────────────── Reset mínimo ── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.45; color: var(--text-body); background: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 800; color: var(--text-primary); line-height: 1.2; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); text-decoration: underline; } button { font-family: inherit; } /* ─────────────────────────────────────────── App shell (3 columnas) ── */ .app { display: grid; grid-template-columns: var(--rail-w) var(--subnav-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "topbar topbar topbar" "rail subnav main"; height: 100vh; background: var(--bg-page); } /* Topbar — claro (distinto del rail oscuro). Logo + entidad + búsqueda + usuario. */ .app-topbar { grid-area: topbar; display: flex; align-items: center; gap: 16px; padding: 0 14px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); height: var(--topbar-h); } .app-topbar__logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .app-topbar__logo:hover { text-decoration: none; } .app-topbar__logo img { width: 26px; height: 26px; display: block; flex-shrink: 0; } .app-topbar__name { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-lg); letter-spacing: -.3px; color: var(--text-primary); } .app-topbar__name strong { color: var(--color-primary); font-weight: 800; } .app-topbar__entity { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-body); padding: 2px 8px; background: var(--bg-muted); border-radius: var(--radius-sm); } .app-topbar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .app-topbar__user { font-size: var(--fs-sm); color: var(--text-body); display: inline-flex; align-items: center; gap: 7px; } .app-topbar__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); display: grid; place-items: center; font-family: var(--font-title); font-weight: 800; font-size: 11px; } /* ── Botones de icono + dropdowns del topbar (notificaciones, usuario, acciones, ayuda) ── */ .topbar-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); border: 0; background: transparent; color: var(--text-body); cursor: pointer; font-size: 18px; position: relative; } .topbar-btn:hover { background: var(--bg-muted); color: var(--text-primary); } .topbar-btn--user { width: auto; gap: 7px; padding: 0 6px 0 0; } .topbar-btn__dot { position: absolute; top: 4px; right: 5px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: var(--color-danger); color: var(--color-on-primary); font-size: 9px; font-weight: 700; display: grid; place-items: center; border: 1.5px solid var(--bg-surface); font-family: var(--font-body); } .dropdown { position: relative; } /* OCULTO POR DEFECTO (no con x-show): tras una navegación hx-boost el se reemplaza y Alpine no re-aplica el x-show al menú nuevo, dejándolo visible. Con display:none base + clase .is-open que Alpine añade (:class="menuClass"), si Alpine no re-corre el menú queda OCULTO (el default correcto). */ .dropdown__menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; z-index: 70; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .dropdown__menu.is-open { display: block; } .dropdown__menu--wide { min-width: 330px; } .dropdown__head { padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); } .dropdown__title { font-weight: 600; color: var(--text-primary); font-size: var(--fs-md); } .dropdown__sub { font-size: var(--fs-sm); color: var(--text-muted); } .dropdown__item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; color: var(--text-body); font-size: var(--fs-md); text-decoration: none; } .dropdown__item:hover { background: var(--bg-muted); color: var(--text-primary); text-decoration: none; } .dropdown__item .ti { color: var(--text-muted); font-size: 16px; } .dropdown__item--danger, .dropdown__item--danger .ti { color: var(--color-danger); } .dropdown__sep { height: 1px; background: var(--border-subtle); } .dropdown__foot { padding: 8px 6px; border-top: 1px solid var(--border-subtle); text-align: center; } .dropdown__eyebrow { padding: 9px 14px 4px; } /* Notificaciones */ .notif { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); } .notif:last-child { border-bottom: 0; } .notif__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .notif__text { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.4; } .notif__time { font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-mono); } /* Glosario / ayuda */ .glossary { max-height: 340px; overflow-y: auto; padding: 6px 14px 12px; margin: 0; } .glossary dt { font-weight: 600; color: var(--text-primary); font-size: var(--fs-sm); margin-top: 10px; } .glossary dt .mono { color: var(--color-primary); } .glossary dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; } /* ── Chat del agente IA (panel lateral) ── */ .agent-overlay { position: fixed; inset: 0; background: rgba(28,40,51,.25); z-index: 79; } .agent-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 94vw; z-index: 80; background: var(--bg-surface); border-left: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; } .agent-panel__head { padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; background: var(--brand-gradient-90); color: var(--color-on-primary); } .agent-panel__head .ti { font-size: 20px; } .agent-panel__title { font-family: var(--font-title); font-weight: 800; font-size: var(--fs-lg); } .agent-panel__close { margin-left: auto; border: 0; background: transparent; color: var(--color-on-primary); cursor: pointer; font-size: 18px; opacity: .9; } .agent-panel__body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .agent-msg { max-width: 86%; padding: 8px 11px; border-radius: var(--radius-md); font-size: var(--fs-md); line-height: 1.45; } .agent-msg--agent { align-self: flex-start; background: var(--bg-muted); color: var(--text-primary); border-bottom-left-radius: 3px; } .agent-msg--user { align-self: flex-end; background: var(--color-primary); color: var(--color-on-primary); border-bottom-right-radius: 3px; } .agent-panel__foot { padding: 12px 14px; border-top: 1px solid var(--border-subtle); display: flex; gap: 8px; } .agent-panel__foot input { flex: 1; padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); font-family: var(--font-body); font-size: var(--fs-md); color: var(--text-primary); background: var(--bg-surface); box-shadow: var(--shadow-sm); } .agent-panel__foot input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } /* Rail (íconos de área) — oscuro (navy) con íconos verde marca para contraste */ .app-rail { grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; background: var(--vn-900); border-right: 1px solid var(--vn-950); } .app-rail__item { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--vg-400); cursor: pointer; border: 0; background: transparent; transition: background .12s, color .12s; } .app-rail__item:hover { background: var(--vn-800); color: var(--vg-300); } .app-rail__item.is-active { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm); } /* Subnav (sub-módulos del área) */ .app-subnav { grid-area: subnav; padding: 12px 8px; background: var(--bg-surface); border-right: 1px solid var(--border-subtle); overflow-y: auto; } .app-subnav__group { margin-bottom: 14px; } .app-subnav__title { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 500; padding: 0 8px 6px; } .app-subnav__link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-md); color: var(--text-body); font-size: var(--fs-md); } .app-subnav__link:hover { background: var(--bg-muted); color: var(--text-primary); text-decoration: none; } .app-subnav__link.is-active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; } /* Main */ .app-main { grid-area: main; overflow-y: auto; padding: 18px 20px; background: var(--bg-page); } .app-main__header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .app-main__title { font-family: var(--font-title); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.4px; margin: 0; color: var(--text-primary); } .app-main__count { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); } .app-main__block { margin-bottom: 22px; } /* bloque de contenido con separación estándar */ .app-main__block-label { margin-bottom: 10px; } /* eyebrow que titula el bloque siguiente */ /* Header con degradado de marca (hero / portal proveedores) — NO sobre tablas/párrafos */ .app-header { background: var(--brand-gradient-90); color: var(--color-on-primary); } /* ─────────────────────────────────────────── Botones ── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); font-size: var(--fs-md); font-weight: 600; cursor: pointer; transition: background .1s, border-color .1s, color .1s; } .btn:hover { background: var(--bg-muted); } .btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn--tonal { background: var(--color-secondary-soft); border-color: transparent; color: var(--color-secondary); } .btn--tonal:hover { background: var(--vn-100); } .btn--danger { color: var(--color-danger); border-color: var(--color-danger); background: var(--bg-surface); } .btn--danger:hover { background: var(--color-danger-soft); } .btn--ghost { border-color: transparent; background: transparent; color: var(--text-body); } .btn--ghost:hover { background: var(--bg-muted); color: var(--text-primary); } .btn--sm { padding: 3px 8px; font-size: var(--fs-sm); } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ─────────────────────────── Editor de apariencia (super admin) ── */ .color-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; } .color-swatch-input { width: 44px; height: 30px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); cursor: pointer; } .theme-preview-gradient { height: 56px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .theme-preview-chrome { display: flex; align-items: stretch; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface); } .theme-preview-rail { display: flex; align-items: center; justify-content: center; width: 40px; background: var(--vn-900); color: var(--vg-400); } /* ─────────────────────────────────────────── Tabla densa (.ba-*) ── */ .ba-scroll { overflow-x: auto; } /* tabla operativa ancha → scroll horizontal en pantallas chicas */ .ba-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); } /* Tabla embebida en un panel/drawer (conceptos del CFDI en el detalle de aprobación): más apretada y sin el peso visual de una bandeja, que ahí compite con el contenido. */ .ba-table--mini { font-size: var(--fs-sm); } .ba-table--mini td, .ba-table--mini th { padding: 3px 6px; } .ba-th { text-align: left; font-weight: 600; color: var(--vn-700); font-size: var(--fs-sm); letter-spacing: normal; padding: 8px 10px; border-bottom: 2px solid var(--color-primary); /* regla de acento de marca */ white-space: nowrap; background: var(--ne-50); position: sticky; top: 0; z-index: 1; } .ba-th--num { text-align: right; } .ba-th--check { width: 32px; } .ba-th { box-shadow: 0 1px 0 rgba(28,40,51,.05); } /* profundidad al hacer scroll bajo el header */ .ba-row { border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .08s; } .ba-row:nth-child(even) { background: var(--row-stripe); } .ba-row:hover { background: var(--vg-50); } /* Acento de marca a la izquierda en hover/selección (detalle, guía la lectura por fila) */ .ba-row:hover td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); } .ba-row.is-selected { background: var(--color-primary-soft); } .ba-row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); } .ba-row td { padding: 7px 10px; vertical-align: middle; } .ba-uuid { color: var(--text-body); font-size: var(--fs-sm); white-space: nowrap; } /* Folio fiscal completo + copiar. El nowrap NO es cosmético: con table-layout:auto un word-break aquí vuelve el ancho mínimo de la columna un carácter, y el UUID se apila en vertical estirando la fila a ~600px de alto. */ .ba-uuid-cell { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-md); font-weight: 500; white-space: nowrap; word-break: normal; overflow-wrap: normal; cursor: pointer; } .ba-uuid-cell__copy { font-size: var(--fs-md); opacity: .6; } .ba-uuid-cell:hover .ba-uuid-cell__copy { opacity: 1; } .ba-proveedor, .ba-entidad { font-weight: 600; color: var(--text-primary); } .ba-fecha { color: var(--text-body); font-size: var(--fs-sm); } .c-monto { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .c-monto--neg { color: var(--color-danger); } .c-monto__cur { color: var(--text-muted); font-size: var(--fs-xs); margin-left: 3px; } .ba-action-btn { padding: 3px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-body); font-size: var(--fs-sm); cursor: pointer; } .ba-action-btn:hover { background: var(--bg-muted); color: var(--text-primary); } /* Footer de paginado (bandeja) — server-side, ≤50/pág (P2) */ .ba-pager-row td { padding: 0; } .ba-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px; background: var(--bg-muted); border-top: 1px solid var(--border-subtle); } .ba-pager__info { font-size: var(--fs-sm); color: var(--text-muted); } .ba-pager__nav { display: flex; align-items: center; gap: 8px; } .ba-pager__page { font-size: var(--fs-sm); color: var(--text-body); min-width: 92px; text-align: center; } /* ───────────────────────────── Hub de métodos (carga / conciliación) ── */ .hub-section { margin-top: 22px; } .hub-section__title { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: var(--fs-lg); color: var(--text-primary); } .hub-section__hint { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--text-muted); } .method-grid { display: grid; gap: 12px; margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .method-card { display: flex; gap: 11px; padding: 13px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); } .method-card--roadmap { background: var(--bg-muted); border-style: dashed; } .method-card__icon { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--bg-muted); color: var(--color-primary); } .method-card--roadmap .method-card__icon { color: var(--text-muted); background: var(--bg-surface); } .method-card__body { min-width: 0; } .method-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .method-card__title { margin: 0; font-size: var(--fs-md); color: var(--text-primary); } .method-card__desc { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; } .method-badge { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; } .method-badge--disponible { background: var(--st-ok-soft); color: var(--st-ok-text); } .method-badge--auto { background: var(--st-proc-soft); color: var(--st-proc-text); } .method-badge--roadmap { background: var(--bg-surface); color: var(--text-muted); border: 1px solid var(--border-subtle); } /* Estado vacío de un flujo aún no construido (placeholder honesto) */ .empty-flow { margin-top: 16px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-muted); } .empty-flow p { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-muted); } /* ───────────────────────────── Detalle del CFDI (tabs Datos/Conciliación) ── */ .detail-meta { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); } .detail-meta__item { display: flex; flex-direction: column; gap: 2px; } .detail-meta__item--wide { flex-basis: 100%; } /* concepto: su propia línea (texto largo) */ .detail-meta__amount { font-size: var(--fs-lg); color: var(--text-primary); } /* Detalle en drawer/modal (aprobaciones, etc.) — bloques + timeline de auditoría (motor AME) */ .detail-block { margin-bottom: 18px; } .detail-block--tight { margin-bottom: 16px; } .detail-block__label { display: block; margin-bottom: 8px; } /* usar junto a .eyebrow */ .detail-list { font-size: var(--fs-sm); } .decision-row { font-size: var(--fs-sm); padding: 7px 0; border-bottom: 1px solid var(--border-subtle); } .muted-note { color: var(--text-body); } .timeline { list-style: none; margin: 0 0 18px; padding: 0; } .timeline__item { display: flex; gap: 10px; padding: 0 0 12px; } .timeline__dot { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px var(--bg-muted); } .timeline__body { flex: 1; min-width: 0; } /* Helpers de layout — formalizan style= inline recurrentes (botoneras, divisores, empuje) */ .push-right { margin-left: auto; } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .btn--block { width: 100%; justify-content: center; } .btn--grow { flex: 1; justify-content: center; } /* botón que crece dentro de una botonera */ .theme-result { margin-top: 12px; } /* slot de resultado bajo el editor de tema */ .form-divider { margin-top: 22px; } /* separación por espacio, sin regla superior */ /* Primer concepto del CFDI bajo el proveedor en la bandeja de aprobación (a qué se debe, de un vistazo) */ .ba-concepto { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Celda Concepto en la tabla (a qué se debe) — truncada con tooltip completo */ .ba-concepto-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Enlaces a XML/PDF dentro de la fila (columna «Documentos» del legado): el aprobador abre el documento sin entrar al detalle. Discretos — son apoyo, no la acción principal de la fila. */ .ba-doclink { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-decoration: none; padding: 1px 5px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-right: 3px; } .ba-doclink:hover { color: var(--text-primary); border-color: var(--border-strong); } /* Celda Motivo de rechazo — texto rosa (estado rechazado · P5), truncada con tooltip */ .ba-motivo-cell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--st-rej-text); } .tab-body { padding: 14px 2px; } .tab-body__title { margin: 18px 0 8px; font-size: var(--fs-md); color: var(--text-primary); } .tab-body__hint { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-muted); } .kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; margin: 0; } .kv { display: flex; flex-direction: column; gap: 1px; } .kv dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); } .kv dd { margin: 0; font-size: var(--fs-sm); color: var(--text-body); } .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .check-list__item { font-size: var(--fs-sm); padding-left: 18px; position: relative; } .check-list__item::before { content: "•"; position: absolute; left: 4px; } .check-list__item--ok { color: var(--st-ok-text); } .check-list__item--err { color: var(--st-rej-text); } /* Conciliación por monto */ .concil-summary { display: flex; flex-wrap: wrap; gap: 28px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-muted); } .concil-summary > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); } .concil-summary__amount { font-size: var(--fs-lg); color: var(--text-primary); } .concil-banner { display: flex; gap: 9px; padding: 11px 13px; margin-bottom: 12px; border-radius: var(--radius-md); font-size: var(--fs-sm); align-items: flex-start; } .concil-banner--ok { background: var(--st-ok-soft); color: var(--st-ok-text); } .concil-banner--exc { background: var(--st-att-soft); color: var(--st-att-text); } .concil-exc { margin: 6px 0 0; padding-left: 18px; } .concil-input { width: 130px; text-align: right; } .tag-3way { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; } .tag-3way--ok { background: var(--st-ok-soft); color: var(--st-ok-text); } .tag-3way--exc { background: var(--st-att-soft); color: var(--st-att-text); } /* Sin OC / acreedor diverso (E4): la tabla de codificación usa selects compactos por celda. */ .tab-body .ba-table select.form-input { min-width: 140px; font-size: var(--fs-sm); } .tab-body .ba-table .concil-input { width: 110px; } /* Prorrateo (E5): barra de modo de reparto sobre la tabla de destinos. */ .prorr-modebar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .prorr-modebar .form-input { width: auto; min-width: 240px; } /* Amortización (E6): controles de inicio + meses sobre el calendario. */ .amort-controls { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: 10px; } .amort-controls > div { display: flex; flex-direction: column; gap: 4px; } .amort-controls .form-input { width: auto; min-width: 180px; } /* Fiscales (E7): rejilla de captura (retenciones, NC, anticipos, FX, esperado). */ .fiscal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); } .fiscal-grid > div { display: flex; flex-direction: column; gap: 4px; } .fiscal-grid .concil-input { width: 100%; text-align: right; } /* Carga 3-way por OC / estado de cuenta (E8): buscador, bloques por OC y visor de documentos. */ .oc-search { display: flex; align-items: flex-end; gap: var(--space-3); margin-bottom: 14px; max-width: 980px; } .oc-search__field { display: flex; flex-direction: column; gap: 4px; flex: 1; } .oc-search__field .form-input { width: 100%; } .estado-oc { margin: 14px 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; } .estado-oc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 8px 12px; background: var(--bg-muted); border-bottom: 1px solid var(--border-subtle); } .estado-oc__head .method-badge { margin-left: 6px; } .estado-oc .ba-table { padding: 0 4px; } .estado-oc tfoot td { border-top: 1px solid var(--border-subtle); font-weight: 600; } .estado-upload { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-subtle); } .estado-upload__title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-lg); margin: 0 0 8px; } .visor-actions { display: flex; gap: var(--space-2); margin: 12px 0; } .visor-frame { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-muted); } .visor-frame__embed { display: block; width: 100%; height: 70vh; border: 0; } /* Checkbox / radio */ input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); width: 14px; height: 14px; cursor: pointer; } /* ─────────────────────────────────────────── Tags base ── */ .tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; border: 1px solid transparent; white-space: nowrap; } /* Tipo de CFDI (pill sutil; 3 colores fríos distintos) */ .tag-tipo { font-family: var(--font-mono); } .tag-tipo--I { color: var(--st-proc-text); background: var(--st-proc-soft); } .tag-tipo--E { color: var(--st-att-text); background: var(--st-att-soft); } .tag-tipo--P { color: var(--st-ok-text); background: var(--st-ok-soft); } /* Status SAT (binario) */ .tag-sat--ok { color: var(--st-ok-text); background: var(--st-ok-soft); } .tag-sat--err { color: var(--st-rej-text); background: var(--st-rej-soft); } /* SLA */ .tag-sla { font-family: var(--font-mono); } .tag-sla--ok { color: var(--text-body); background: var(--bg-muted); } .tag-sla--warn { color: var(--st-att-text); background: var(--st-att-soft); } .tag-sla--danger { color: var(--st-rej-text); background: var(--st-rej-soft); } /* Tipo de carga (categórico · cómo se cargó, NO estado) · pill mono sutil, sin semáforo */ .tag-carga { font-family: var(--font-mono); color: var(--text-body); background: var(--bg-muted); } .tag-carga--EXTRANJERA { color: var(--st-proc-text); background: var(--st-proc-soft); } /* Status de flujo (CFDI lifecycle) · punto de color + texto neutro (sin semáforo) */ .tag-status { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: var(--text-body); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; } .tag-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ne-400); flex-shrink: 0; display: inline-block; } .tag-status--recibida::before { background: var(--ne-400); } /* neutral */ .tag-status--validacion::before { background: var(--st-proc); } /* en proceso · índigo */ .tag-status--matching::before { background: var(--st-proc); } .tag-status--pendiente::before { background: var(--st-proc); } .tag-status--validada::before { background: var(--st-ok); } /* validado · teal */ .tag-status--aprobada::before { background: var(--st-ok); } .tag-status--pagada::before { background: var(--st-ok); box-shadow: 0 0 0 2px var(--st-ok-soft); } .tag-status--revision::before { background: var(--st-att); } /* excepción · violeta */ .tag-status--escalada::before { background: var(--st-att); } .tag-status--rechazada::before { background: var(--st-rej); } /* rechazado · rosa */ /* Pulse en status en proceso */ .tag-status--validacion::before, .tag-status--matching::before { animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* Badge (pill de énfasis) · usar solo cuando el estado debe destacar mucho */ .badge { display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: 999px; } .badge-valido { background: var(--color-success-soft); color: var(--color-success-text); } .badge-rechazado { background: var(--color-danger-soft); color: var(--color-danger-text); } .badge-proceso { background: var(--color-info-soft); color: var(--color-info-text); } .badge-atencion { background: var(--color-warning-soft); color: var(--color-warning-text); } /* ─────────────────────────────────────────── Paginación ── */ .pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 2px; font-size: var(--fs-sm); color: var(--text-body); } .pagination__info { font-family: var(--font-mono); } .pagination__total { margin-right: auto; color: var(--text-muted); font-family: var(--font-mono); } .pagination__gap { color: var(--text-muted); padding: 0 2px; } .pagination__page { min-width: 30px; padding-left: 7px; padding-right: 7px; font-family: var(--font-mono); } .pagination__page.is-current { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary); font-weight: 600; } .pagination__size { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-body); font-size: var(--fs-sm); padding: 3px 6px; } /* ─────────────────────────────────────────── Estado vacío ── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 16px; color: var(--text-muted); text-align: center; } .empty-state__title { font-size: var(--fs-lg); color: var(--text-body); font-weight: 600; } .empty-state__hint { font-size: var(--fs-sm); } /* ─────────────────────────────────────────── Spinner ── */ .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--color-primary); animation: spin .6s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .htmx-indicator { opacity: 0; transition: opacity .15s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* Overlay de navegación entre módulos (hx-boost → hop síncrono a Cloud Run, posible cold-start). Lo activa main.js con `body.is-navigating` solo en navegaciones boosted. Por encima del modal. */ .spinner--lg { width: 32px; height: 32px; border-width: 3px; } .nav-loading { display: none; position: fixed; inset: 0; z-index: 1100; background: rgba(28,40,51,.35); align-items: center; justify-content: center; } body.is-navigating .nav-loading { display: flex; } .nav-loading__box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 32px; background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .nav-loading__text { font-size: var(--fs-sm); font-weight: 600; color: var(--text-body); } /* Espera BLOQUEANTE de toda carga in-page — ESTÁNDAR de la aplicación. `base.html` monta una (`[data-espera-global]`) y main.js la enciende ante cualquier petición htmx que dispare el usuario, sin que la pantalla declare nada; una pantalla puede poner la suya, con su propio mensaje, vía `data-wait-for=""`. Bloquea el clic además de avisar: sin señal, una pantalla quieta 30 s se lee como colgada y el operador vuelve a clicar — que es como se dejó dev inservible en la certificación del 03-ago. Mismo lenguaje visual que el overlay de navegación entre módulos. Va por encima del modal (1000). */ .wait-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; background: rgba(28,40,51,.35); opacity: 0; pointer-events: none; transition: opacity .15s; } /* El BLOQUEO del clic entra al instante (`pointer-events` no se transiciona); el fundido lleva 150 ms de retraso para que una respuesta rápida no parpadee. Al apagarse no hay retraso. */ .wait-overlay.htmx-request { opacity: 1; pointer-events: auto; transition: opacity .15s .15s; } .wait-overlay__hint { font-size: var(--fs-xs); color: var(--text-secondary); } /* ─────────────────────────────────────────── Filtros ── */ .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } /* Mismo estilo pulido que .form-input (evita que esta regla pise el design system) — densidad fs-sm. */ .filters select, .filters input { padding: 8px 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-primary); background: var(--bg-surface); box-shadow: var(--shadow-sm); transition: border-color .12s ease, box-shadow .12s ease; } .filters select:hover, .filters input:hover { border-color: var(--border-strong); } .filters select:focus, .filters input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } .filters__grow { flex: 1 1 200px; min-width: 180px; } /* búsqueda que crece en la fila de filtros */ /* Filtro multiselección como DROPDOWN (

nativo · sin JS, CSP). Botón compacto + popover con checkboxes; el badge muestra cuántas opciones hay activas. */ .fdrop { position: relative; } .fdrop__btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-body); white-space: nowrap; user-select: none; } .fdrop__btn .eyebrow { margin: 0; } .fdrop__btn:hover { border-color: var(--color-primary); } /* Resalta el botón del filtro cuando tiene alguna opción marcada (live, sin JS · :has) */ .fdrop:has(input:checked) .fdrop__btn { border-color: var(--color-primary); background: var(--color-primary-soft); } .fdrop__chev { transition: transform .15s; color: var(--text-muted); display: inline-flex; } .fdrop__chev.is-open { transform: rotate(180deg); } .fdrop__panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 190px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; max-height: 300px; overflow-y: auto; } /* `.fdrop` como CAMPO de un formulario (buscador de catálogo del armado de lote). El disparador se lee como un `.form-input` y el panel FLOTA sobre el contenido en vez de empujarlo: tres catálogos desplegados a la vez se comían la pantalla entera, que es justo lo que se reportó. Mismo control que ya prefiere el sistema sobre el `