/* ============================================================================ ABM Maestros · identidad visual ---------------------------------------------------------------------------- TODO cuelga de `.abm-ui` y usa el prefijo `abm-`. El resto de la aplicación sigue con Tailwind por CDN: si una regla de acá se escapara del scope, rompería nueve módulos que nadie está mirando. No sacar el `.abm-ui ` de adelante de ningún selector. Tratamiento "Capas" (elegido sobre "Consola"): la jerarquía sale de la ELEVACIÓN, no del contraste oscuro/claro. Cabecera, breadcrumb y tarjeta son tres planos apilados con sombras distintas sobre un lienzo deliberadamente más oscuro que el de Remitos/Facturación — sin ese lienzo, el blanco de las tarjetas no salta y todo se ve plano. El vocabulario de movimiento es el de RRHH, portado literal. Ver §MOVIMIENTO. Ver docs/identidad-visual.md. ========================================================================== */ /* LA PALETA NO ESTÁ ACÁ. Vive en src/core/tokens.css, que se carga antes y la declara una sola vez para los cuatro módulos con identidad. Acá quedan únicamente los TRES apartamientos de este módulo, y cada uno tiene su porqué escrito. Agregar un token nuevo a esta lista es declarar que el ABM se ve distinto en eso: si no hay un motivo, va a tokens.css. */ .abm-ui { /* Acento interactivo, EXCLUSIVO de este módulo. Navy queda para la estructura (filete, títulos); azure para lo que se toca: el ítem activo del rail, el botón primario, el hover de fila, el foco. Que lo clickeable tenga color propio es media jerarquía resuelta. No es un color semántico: nunca significa "bien" ni "mal". */ --azure: #1668c4; --azure-700: #1259ab; --azure-050: #eaf2fd; /* Lienzo más oscuro que el de los otros tres (#f1f2f5), a propósito: el tratamiento "Capas" apoya la jerarquía en la ELEVACIÓN, y una tarjeta blanca no despega de un fondo casi blanco. */ --canvas: #e6ebf3; /* 12 y no 14: las tarjetas de acá son muchas y chicas (el rail, las fichas, los bloques plegables). Con el radio grande se ven infladas. */ --r-card: 12px; } /* TRAMPA §7 del manual: `.abm-ui .hidden` y `.abm-ui .tnum` se fueron a core/tokens.css, que las declara para los cuatro módulos de una. Lo que queda acá es lo que nombra una clase PROPIA y por eso no se puede agrupar: el root de un modal, que lleva `.abm-ui` él mismo. */ .abm-ui.abm-modal.hidden { display: none; } .abm-ui .material-symbols-outlined { font-size: 18px; line-height: 1; vertical-align: -4px; } /* El foco sigue al acento del módulo, que es azure y no navy. */ .abm-ui :focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; border-radius: 5px; } /* ── §MOVIMIENTO ───────────────────────────────────────────────────────────── Vocabulario tomado de rrhh-ui.css, sin cambios: · una sola curva para todo lo que se desplaza — var(--curva); · .14s ease para color y fondo, .18s para transformaciones; · nada se mueve más de 2 px: el gesto confirma que apuntaste algo, no lo festeja; · el ícono sube 2 px, el contenedor 1 px, y `:active` vuelve a cero — eso último es lo que da la sensación de que el botón se hundió. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .abm-ui * { transition: none !important; animation: none !important; } } /* ── Armazón ─────────────────────────────────────────────────────────────── */ /* SIN ESPACIO. El div es `class="abm-ui abm-shell"`: UN elemento con las dos clases, no una adentro de la otra. Escrito `.abm-ui .abm-shell` (descendiente) este bloque no matcheaba NADA, así que el armazón del módulo se quedaba sin `display:flex` y sin `height:100%` y crecía con su contenido: 3828 px adentro de un contenedor de 724 que es `overflow:hidden`. De ahí venía el ABM sin scroll — las filas de abajo estaban dibujadas, tapadas y sin barra en ningún lado. Los modales de este mismo archivo ya lo tenían bien (`.abm-ui.abm-modal`), que es lo que hace que el error pase desapercibido. */ .abm-ui.abm-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--canvas); } /* La cabecera del módulo (.abm-hdr) y el breadcrumb de pantalla (.abm-crumb) se fueron a la barra superior del armazón: entre el rail, la barra y esos dos, el nombre de la pantalla llegaba a escribirse cuatro veces. Ahora el módulo PUBLICA su sección y sus acciones (shellSetContexto / shellSetAcciones) y el armazón decide cómo se ven. Ver el encabezado de src/core/shell.js. */ /* ── Botones ─────────────────────────────────────────────────────────────── */ .abm-ui .abm-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 8px; padding: 7px 14px; font: inherit; font-size: .79rem; font-weight: 700; cursor: pointer; border: 1px solid var(--azure); background: var(--azure); color: #fff; box-shadow: 0 2px 8px rgba(22, 104, 196, .24); transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .18s var(--curva), transform .18s var(--curva); } .abm-ui .abm-btn .material-symbols-outlined { font-size: 17px; transition: transform .18s var(--curva); } .abm-ui .abm-btn:hover { background: var(--azure-700); border-color: var(--azure-700); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(22, 104, 196, .32); } .abm-ui .abm-btn:hover .material-symbols-outlined { transform: translateY(-2px); } .abm-ui .abm-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(22, 104, 196, .24); } .abm-ui .abm-btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; } /* Secundario: en reposo es gris. Si tres botones secundarios llevan color, compiten con el primario. Al apuntarlo recupera el acento. */ .abm-ui .abm-btn.sec { background: var(--surface); color: var(--muted); border-color: var(--hair-strong); box-shadow: var(--e1); } .abm-ui .abm-btn.sec:hover { background: var(--azure-050); border-color: var(--azure); color: var(--azure); box-shadow: 0 4px 12px rgba(16, 32, 64, .10); } .abm-ui .abm-btn.ok { background: var(--ok); border-color: var(--ok); box-shadow: 0 2px 8px rgba(15, 122, 82, .24); } .abm-ui .abm-btn.ok:hover { background: #0b5c3e; border-color: #0b5c3e; } .abm-ui .abm-btn.danger { background: var(--crit); border-color: var(--crit); box-shadow: 0 2px 8px rgba(198, 40, 40, .24); } .abm-ui .abm-btn.danger:hover { background: #a71f1f; border-color: #a71f1f; } .abm-ui .abm-btn.ln { background: none; border-color: transparent; color: var(--azure); padding: 6px 9px; font-weight: 600; box-shadow: none; } .abm-ui .abm-btn.ln:hover { background: var(--azure-050); box-shadow: none; } /* ── Los dos railes + área de trabajo ──────────────────────────────────────── La navegación son DOS columnas, y la diferencia entre ellas es deliberada: · la de familias (.abm-railg) está en NAVY, pegada al borde. Es el nivel de arriba y se ve como estructura, no como opción: es la única superficie oscura del módulo. Elegir ahí reemplaza la columna de al lado entera — ese cambio grande es el "entré a otro módulo". · la de maestros (.abm-raile) está en blanco y usa AZURE, como todo lo que se toca seguido. Es la que se recorre. Las cinco familias comparten el navy a propósito: si cada una tuviera su color volveríamos al tablero viejo, donde el color era categoría (§1.1 del manual). El color acá lo aporta el ESTADO, adentro de la tabla. -------------------------------------------------------------------------- */ .abm-ui .abm-split { display: flex; align-items: stretch; flex: 1; min-height: 0; } .abm-ui .abm-railg { width: 98px; flex: 0 0 98px; overflow-y: auto; padding: 10px 0 18px; background: var(--navy); } .abm-ui .abm-railg button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; padding: 11px 5px; border: 0; background: none; text-align: center; font: inherit; font-size: .75rem; font-weight: 700; line-height: 1.2; cursor: pointer; /* 5,93:1 sobre el navy — pasa AA en un tamaño chico. Ver §1.4 del manual: el blanco a menos del 60% no lo pasaría, y acá el texto es texto. */ color: rgba(255, 255, 255, .62); transition: background .14s ease, color .14s ease; } /* Misma barra que crece del rail de maestros, en blanco porque el acento azure sobre navy no se ve. */ .abm-ui .abm-railg button::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: #fff; transform: scaleY(0); transform-origin: center; transition: transform .18s var(--curva); } .abm-ui .abm-railg button .material-symbols-outlined { font-size: 22px; vertical-align: 0; transition: transform .18s var(--curva); } .abm-ui .abm-railg button:hover { color: #fff; background: rgba(255, 255, 255, .07); } .abm-ui .abm-railg button:hover::before { transform: scaleY(.55); } .abm-ui .abm-railg button:hover .material-symbols-outlined { transform: translateY(-2px); } .abm-ui .abm-railg button[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .11); } .abm-ui .abm-railg button[aria-current="page"]::before { transform: scaleY(1); } /* El foco del módulo es azure y sobre navy queda casi invisible. */ .abm-ui .abm-railg :focus-visible { outline-color: #fff; } .abm-ui .abm-raile { width: 210px; flex: 0 0 210px; overflow-y: auto; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--hair); } /* 16 px y no `--gutter` (22): el gutter es el margen de una PANTALLA, y esto es una columna de 210 px. Con 22 a cada lado el nombre del maestro se quedaba con 106 px y "Posiciones de playa" salía cortado en "Posiciones de…", que es el peor lugar donde cortarlo. La cabecera lleva el mismo 16 para que el nombre de la familia y los de los maestros arranquen en la misma vertical. */ .abm-ui .abm-raile .cab { padding: 15px 16px 11px; border-bottom: 1px solid var(--hair); flex-shrink: 0; } .abm-ui .abm-raile .cab b { display: block; font-size: .92rem; font-weight: 800; color: var(--navy); } .abm-ui .abm-raile .cab span { display: block; margin-top: 2px; font-size: .72rem; line-height: 1.35; color: var(--faint); } .abm-ui .abm-raile .lst { padding: 9px 0; } .abm-ui .abm-raile button { position: relative; display: flex; align-items: center; gap: 10px; width: calc(100% - 10px); padding: 8px 16px; border: 0; background: none; text-align: left; border-radius: 0 8px 8px 0; font: inherit; font-size: .815rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: background .14s ease, color .14s ease; } /* La barra activa CRECE, igual que el subrayado del secnav de RRHH. Al pasar por encima crece a la mitad y en gris: el hover anticipa dónde va a quedar la marca sin mentir que ya está seleccionado. */ .abm-ui .abm-raile button::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--azure); transform: scaleY(0); transform-origin: center; transition: transform .18s var(--curva), background .14s ease; } .abm-ui .abm-raile button .material-symbols-outlined { font-size: 19px; color: var(--faint); transition: transform .18s var(--curva), color .14s ease; } /* "Posiciones de playa" no entra en 210 px: se corta con puntos suspensivos y el nombre entero queda en el `title`. Sin el min-width el flex no lo permite. */ .abm-ui .abm-raile button .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .abm-ui .abm-raile button .n { margin-left: auto; padding-left: 6px; font-size: .68rem; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; transition: color .14s ease; } .abm-ui .abm-raile button:hover { background: var(--canvas); } .abm-ui .abm-raile button:hover::before { transform: scaleY(.55); background: var(--hair-strong); } .abm-ui .abm-raile button:hover .material-symbols-outlined { transform: translateY(-2px); color: var(--azure); } .abm-ui .abm-raile button[aria-current="page"] { background: var(--azure-050); color: var(--azure); font-weight: 800; box-shadow: inset 0 0 0 1px rgba(22, 104, 196, .10); } .abm-ui .abm-raile button[aria-current="page"]::before { transform: scaleY(1); background: var(--azure); } .abm-ui .abm-raile button[aria-current="page"] .material-symbols-outlined, .abm-ui .abm-raile button[aria-current="page"] .n { color: var(--azure); } .abm-ui .abm-work { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--canvas); padding-bottom: 26px; } /* LO QUE ENTRA ACÁ NO SE ENCOGE. Ésta es la línea por la que el ABM no tenía scroll en los listados, y la trampa vale para cualquier pantalla que se arme igual: el tamaño mínimo automático de un ítem flex (`min-height: auto`) es el de su CONTENIDO sólo si su `overflow` es `visible`. Si no, es CERO. Y `.abm-card` es `overflow: hidden`, para que la tabla respete el radio de la tarjeta. Resultado: con más filas que pantalla, la tarjeta no desbordaba — se ENCOGÍA hasta entrar, que es lo peor que podía pasar, porque se veía perfecta (llenaba el área de trabajo) mientras recortaba las filas de abajo sin dejar barra en ningún lado. Y como nada desbordaba, `.abm-work` no scrolleaba nunca. Es el primo hermano del `min-height: 0` que faltaba en #page-content-wrapper: la misma trampa del `auto` de flex, entrando por la otra punta. */ .abm-ui .abm-work > * { flex-shrink: 0; } /* ── Tira de resumen ───────────────────────────────────────────────────────── Le da al ámbar y al rojo un lugar donde significar algo ANTES de que aparezcan en las filas. Sin esto, el color semántico se gasta decorando. */ .abm-ui .abm-stats { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px var(--gutter) 2px; } .abm-ui .abm-stat { flex: 1; min-width: 160px; background: var(--surface); border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--e1); border: 1px solid rgba(16, 32, 64, .05); border-left: 3px solid var(--hair-strong); transition: box-shadow .18s var(--curva), transform .18s var(--curva); } .abm-ui button.abm-stat { font: inherit; text-align: left; cursor: pointer; } .abm-ui button.abm-stat:hover { transform: translateY(-2px); box-shadow: var(--e2); } .abm-ui .abm-stat .k { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--faint); } .abm-ui .abm-stat .v { font-size: 1.42rem; font-weight: 800; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; } .abm-ui .abm-stat .d { font-size: .7rem; font-weight: 600; color: var(--faint); } .abm-ui .abm-stat.wrn { border-left-color: var(--warn); background: linear-gradient(180deg, var(--warn-050), #fff 62%); } .abm-ui .abm-stat.wrn .v { color: var(--warn); } .abm-ui .abm-stat.neg { border-left-color: var(--crit); } .abm-ui .abm-stat.neg .v { color: var(--crit); } .abm-ui .abm-stat.ok { border-left-color: var(--ok); } .abm-ui .abm-stat.ok .v { color: var(--ok); } /* ── Tarjeta de contenido ────────────────────────────────────────────────── */ .abm-ui .abm-card { margin: 14px var(--gutter) 0; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--e2); border: 1px solid rgba(16, 32, 64, .05); overflow: hidden; } .abm-ui .abm-card-h { padding: 11px var(--gutter); border-bottom: 1px solid var(--hair); background: #fafbfd; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .abm-ui .abm-card-h h4 { margin: 0; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } /* ── Barra de filtros ────────────────────────────────────────────────────── */ .abm-ui .abm-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px var(--gutter); border-bottom: 1px solid var(--hair); } .abm-ui .abm-hint { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--faint); } .abm-ui .abm-hint b { color: var(--ink); font-variant-numeric: tabular-nums; } .abm-ui .abm-in, .abm-ui .abm-txt { width: 100%; border: 1px solid var(--hair-strong); border-radius: 8px; padding: 7px 11px; font: inherit; font-size: .82rem; color: var(--ink); background: var(--surface); outline: none; transition: border-color .14s ease, box-shadow .18s var(--curva); } .abm-ui .abm-in:focus, .abm-ui .abm-txt:focus { border-color: var(--azure); box-shadow: 0 0 0 3px rgba(22, 104, 196, .14); } .abm-ui .abm-in:disabled { background: #f5f7fa; color: var(--muted); cursor: default; } .abm-ui select.abm-in { cursor: pointer; width: auto; min-width: 138px; } .abm-ui .abm-txt { min-height: 74px; resize: vertical; } .abm-ui .abm-lbl { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--muted); margin-bottom: 5px; } .abm-ui .abm-lbl .req { color: var(--crit); } /* `select.abm-in` nace `width:auto` con `min-width` porque su caso principal es la barra de filtros, donde tiene que medir lo que dice. Adentro de un formulario es al revés: si no llena su columna, la grilla se desarma y el campo queda flotando al lado de un input que sí ocupa todo el ancho. */ .abm-ui .abm-panel-b select.abm-in { width: 100%; min-width: 0; } .abm-ui .abm-search { position: relative; flex: 1; min-width: 210px; max-width: 390px; } .abm-ui .abm-search .material-symbols-outlined { position: absolute; left: 10px; top: 8px; color: var(--faint); transition: color .14s ease; pointer-events: none; } .abm-ui .abm-search:focus-within .material-symbols-outlined { color: var(--azure); } .abm-ui .abm-search .abm-in { padding-left: 33px; } /* Un filtro tildado es un ESTADO: se marca con una barra interior, no con un bloque de color. Cuatro chips activos no pueden pesar más que el botón que dispara la consulta. (Regla de RRHH.) */ .abm-ui .abm-chip { font: inherit; font-size: .72rem; font-weight: 600; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--muted); cursor: pointer; white-space: nowrap; transition: border-color .14s ease, color .14s ease, transform .18s var(--curva); } .abm-ui .abm-chip:hover { border-color: var(--azure); color: var(--azure); transform: translateY(-1px); } .abm-ui .abm-chip:active { transform: translateY(0); } .abm-ui .abm-chip.on { border-color: var(--azure); color: var(--azure); font-weight: 700; box-shadow: inset 3px 0 0 var(--azure); } .abm-ui .abm-ck { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; } .abm-ui .abm-ck input { width: 16px; height: 16px; accent-color: var(--azure); cursor: pointer; } .abm-ui .abm-switch { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--hair-strong); border-radius: 9px; background: var(--surface); cursor: pointer; user-select: none; transition: border-color .14s ease; } .abm-ui .abm-switch:hover { border-color: var(--azure); } .abm-ui .abm-switch input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--azure); cursor: pointer; flex: 0 0 auto; } .abm-ui .abm-switch b { display: block; font-size: .79rem; font-weight: 700; color: var(--ink); } .abm-ui .abm-switch span { display: block; font-size: .72rem; color: var(--muted); } /* ── Tabla ───────────────────────────────────────────────────────────────── */ .abm-ui .abm-tbl { overflow-x: auto; } .abm-ui table.abm-g { width: 100%; border-collapse: collapse; background: var(--surface); } .abm-ui table.abm-g th { position: sticky; top: 0; z-index: 1; background: var(--surface); color: var(--muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; text-align: left; padding: 10px 12px; white-space: nowrap; border-bottom: 2px solid var(--ink); /* regla gruesa, como un informe impreso */ } .abm-ui table.abm-g td { padding: 11px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; vertical-align: middle; } /* nowrap es el default: un "$" arriba y el monto abajo es ilegible. Se pide envolver a mano, y sólo la columna que de verdad lo necesita. */ .abm-ui table.abm-g td.w, .abm-ui table.abm-g th.w { white-space: normal; min-width: 200px; } .abm-ui table.abm-g th.n, .abm-ui table.abm-g td.n { text-align: right; } .abm-ui table.abm-g th.c, .abm-ui table.abm-g td.c { text-align: center; } .abm-ui table.abm-g td:first-child { border-left: 3px solid transparent; padding-left: calc(var(--gutter) - 3px); } .abm-ui table.abm-g th:first-child { padding-left: var(--gutter); } .abm-ui table.abm-g td:last-child, .abm-ui table.abm-g th:last-child { padding-right: var(--gutter); text-align: right; } .abm-ui table.abm-g tbody tr { transition: background .14s ease; } .abm-ui table.abm-g tbody tr:nth-child(even) { background: #fafbfd; } .abm-ui table.abm-g tbody tr:hover { background: var(--azure-050); } .abm-ui table.abm-g tbody tr:last-child td { border-bottom: 0; } /* Estado de fila: franja de 3 px a la izquierda. Libera la columna de estado para que diga QUÉ pasa en vez de repetir el color. */ .abm-ui table.abm-g tr.st-ok td:first-child { border-left-color: var(--ok-hair); } .abm-ui table.abm-g tr.st-wrn td:first-child { border-left-color: var(--warn); } .abm-ui table.abm-g tr.st-neg td:first-child { border-left-color: var(--crit); } /* Fila apagada: baja de peso sin perder contraste — nada de opacity global. */ .abm-ui table.abm-g tr.apagada td { color: var(--muted); } .abm-ui .mono { font-family: 'Consolas', 'SF Mono', 'Roboto Mono', monospace; font-variant-numeric: tabular-nums; } .abm-ui .dim { color: var(--muted); font-size: .8rem; } /* Nombre + su renglón de contexto, en una sola celda. */ .abm-ui .abm-nom { font-weight: 700; } .abm-ui .abm-nom small { display: block; font-weight: 600; font-size: .7rem; color: var(--faint); margin-top: 1px; } .abm-ui .abm-mark { display: inline-flex; align-items: center; gap: 5px; font-size: .735rem; font-weight: 700; color: var(--muted); } .abm-ui .abm-mark .material-symbols-outlined { font-size: 15px; } .abm-ui .abm-mark.ok { color: var(--ok); } .abm-ui .abm-mark.wrn { color: var(--warn); } .abm-ui .abm-mark.neg { color: var(--crit); } .abm-ui .abm-b { display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2.5px 8px; border-radius: 99px; background: var(--canvas); color: var(--muted); border: 1px solid var(--hair-strong); } .abm-ui .abm-b.ok { background: var(--ok-050); color: var(--ok); border-color: var(--ok-hair); } .abm-ui .abm-b.wrn { background: var(--warn-050); color: var(--warn); border-color: var(--warn-hair); } .abm-ui .abm-b.neg { background: var(--crit-050); color: var(--crit); border-color: var(--crit-hair); } /* Íconos de acción: apagados en reposo, suben al apuntarlos. */ .abm-ui .abm-x { background: none; border: 1px solid transparent; border-radius: 7px; padding: 5px 6px; cursor: pointer; color: var(--faint); line-height: 1; transition: background .14s ease, color .14s ease, border-color .14s ease; } .abm-ui .abm-x .material-symbols-outlined { display: block; transition: transform .18s var(--curva); } .abm-ui .abm-x:hover { background: var(--azure-050); color: var(--azure); border-color: rgba(22, 104, 196, .18); } .abm-ui .abm-x:hover .material-symbols-outlined { transform: translateY(-2px); } .abm-ui .abm-x:active .material-symbols-outlined { transform: translateY(0); } .abm-ui .abm-x.del:hover { background: var(--crit-050); color: var(--crit); border-color: var(--crit-hair); } .abm-ui .abm-x:disabled { opacity: .4; cursor: default; } .abm-ui .abm-x:disabled:hover { background: none; color: var(--faint); border-color: transparent; } /* Pie de "cargar más" */ .abm-ui .abm-more { padding: 14px; text-align: center; background: #fafbfd; border-top: 1px solid var(--hair); } /* ── Vacío, aviso y espera ───────────────────────────────────────────────── */ .abm-ui .abm-ph { padding: 46px 20px; text-align: center; color: var(--muted); } /* El vacío casi siempre cae dentro de un , que hereda el nowrap de la tabla. Sin esto, el texto de ayuda sale en una sola línea infinita. */ .abm-ui table.abm-g td .abm-ph { white-space: normal; } .abm-ui .abm-ph .material-symbols-outlined { font-size: 38px; color: var(--hair-strong); display: block; margin: 0 auto 8px; } .abm-ui .abm-ph b { display: block; font-size: .88rem; color: var(--ink); margin-bottom: 3px; } .abm-ui .abm-ph span { font-size: .78rem; } .abm-ui .abm-risk { margin: 14px var(--gutter) 0; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--hair-strong); border-left: 3px solid var(--navy-500); background: var(--surface); box-shadow: var(--e1); font-size: .79rem; color: var(--ink); } .abm-ui .abm-risk b { font-weight: 700; } .abm-ui .abm-risk.alerta { border-left-color: var(--warn); background: var(--warn-050); border-color: var(--warn-hair); } .abm-ui .abm-risk.critico { border-left-color: var(--crit); background: var(--crit-050); border-color: var(--crit-hair); } .abm-ui .abm-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--hair-strong); border-top-color: var(--azure); border-radius: 50%; animation: abmSpin .7s linear infinite; } @keyframes abmSpin { to { transform: rotate(360deg); } } /* ── Modal ─────────────────────────────────────────────────────────────────── OJO: la raíz del modal lleva `.abm-ui` ELLA MISMA. Casi todos viven dentro del innerHTML de su pantalla y heredarían el scope, pero el de Posiciones se cuelga de — si el scope dependiera del padre, ese saldría sin estilo. Ponérselo siempre cuesta una palabra y no falla nunca. */ .abm-ui.abm-modal { position: fixed; inset: 0; z-index: 200; background: rgba(10, 20, 42, .5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 22px; animation: abmFade .16s ease; } @keyframes abmFade { from { opacity: 0; } to { opacity: 1; } } @keyframes abmRise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } .abm-ui .abm-panel { background: var(--surface); border-radius: 14px; box-shadow: var(--e3); width: 100%; max-width: 580px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; animation: abmRise .2s var(--curva); } .abm-ui .abm-panel.ancho { max-width: 860px; } .abm-ui .abm-panel-h { padding: 15px 22px; display: flex; align-items: center; gap: 10px; border-top: 3px solid var(--azure); border-bottom: 1px solid var(--hair); flex-shrink: 0; } .abm-ui .abm-panel-h h3 { margin: 0; font-size: .96rem; font-weight: 800; color: var(--navy); } .abm-ui .abm-panel-h .s { font-size: .71rem; font-weight: 600; color: var(--faint); } .abm-ui .abm-panel-h .abm-x { margin-left: auto; } .abm-ui .abm-panel-b { padding: 20px 22px; overflow-y: auto; flex: 1; min-height: 0; } .abm-ui .abm-panel-f { padding: 13px 22px; border-top: 1px solid var(--hair); background: #f7f9fc; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; flex-shrink: 0; } /* ── Diálogos ──────────────────────────────────────────────────────────────── Los que reemplazan a confirm/alert/prompt (ver abm-dialogos.js). Son más angostos que un modal de formulario a propósito: un cartel de 580 px de ancho con dos renglones adentro parece un formulario vacío. */ .abm-ui .abm-panel.angosto { max-width: 464px; } .abm-ui .abm-dlg { display: flex; gap: 14px; padding: 22px 22px 6px; } .abm-ui .abm-dlg-i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--navy-050); color: var(--navy-500); } .abm-ui .abm-dlg-i .material-symbols-outlined { font-size: 20px; vertical-align: 0; } .abm-ui .abm-dlg.alerta .abm-dlg-i { background: var(--warn-050); color: var(--warn); } .abm-ui .abm-dlg.critico .abm-dlg-i { background: var(--crit-050); color: var(--crit); } .abm-ui .abm-dlg-t { margin: 0 0 5px; font-size: .95rem; font-weight: 800; color: var(--navy); line-height: 1.35; } /* pre-line: los saltos del mensaje son párrafos escritos a propósito. */ .abm-ui .abm-dlg-c { font-size: .82rem; color: var(--ink); white-space: pre-line; } /* Las consecuencias. Es exactamente lo que confirm() no tenía dónde poner: o iban apretadas en la pregunta o no se decían. */ .abm-ui .abm-dlg-d { margin: 11px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; } .abm-ui .abm-dlg-d li { position: relative; padding-left: 15px; font-size: .775rem; color: var(--muted); } .abm-ui .abm-dlg-d li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--hair-strong); } /* Comando para pegar en la consola. Antes iba adentro del texto del alert y había que retipearlo a mano mirando el cartel. */ .abm-ui .abm-cmd { margin: 13px 0 2px; display: flex; align-items: center; gap: 6px; background: var(--navy-700); border-radius: 9px; padding: 7px 7px 7px 12px; } .abm-ui .abm-cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; font-family: 'Consolas', 'SF Mono', 'Roboto Mono', monospace; font-size: .735rem; color: #cfe0f7; } .abm-ui .abm-cmd .abm-x { color: #8fb3e0; flex: 0 0 auto; } .abm-ui .abm-cmd .abm-x:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; } .abm-ui .abm-ayuda { display: block; margin-top: 5px; font-size: .715rem; color: var(--faint); } .abm-ui .abm-err { display: block; margin-top: 12px; font-size: .755rem; font-weight: 700; color: var(--crit); } /* ── Toast ─────────────────────────────────────────────────────────────────── Oscuro sobre un módulo claro, a propósito: no es contenido de la pantalla, es el sistema avisando que algo terminó. Se va solo. */ /* EL TOAST YA NO ES DEL ABM. Este era el mejor de los cinco que había en el repo —apilaba en vez de pisarse, iba a la derecha en vez de taparle los botones al modal— así que se adoptó como el del sistema y se mudó tal cual a src/core/toast.css. `abmToast()` sigue existiendo y llamándose igual. Ver el encabezado de src/core/toast.js. */ .abm-ui .abm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .abm-ui .abm-grid .full { grid-column: 1 / -1; } .abm-ui .abm-grid.tres { grid-template-columns: repeat(3, 1fr); } /* Bloque plegado dentro de un formulario largo: agrupa lo que es opcional o accesorio para que el campo obligatorio no compita con quince más. */ .abm-ui .abm-fold { border: 1px solid var(--hair); border-radius: 10px; margin-top: 16px; overflow: hidden; box-shadow: var(--e1); transition: border-color .14s ease, box-shadow .18s var(--curva); } .abm-ui .abm-fold:focus-within { border-color: var(--azure); box-shadow: var(--e2); } .abm-ui .abm-fold > .t { background: #f7f9fc; padding: 9px 13px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--hair); } .abm-ui .abm-fold > .t .lib { font-weight: 600; text-transform: none; letter-spacing: 0; } .abm-ui .abm-fold > .c { padding: 14px 13px; } /* Bloque cuyo título tiene sus propias acciones (agregar sucursal, carga masiva). */ .abm-ui .abm-fold > .t.con-acts { display: flex; align-items: center; gap: 8px; } .abm-ui .abm-fold > .t .acts { margin-left: auto; display: flex; gap: 4px; } /* ── Barra de las sucursales (buscador + contador + plegar) ────────────────── La usan el formulario del cliente y la ficha de sólo lectura. Aparece recién con más de cuatro sucursales: con tres a la vista, un buscador es mueble. */ .abm-ui .suc-barra { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; } .abm-ui .suc-buscar { position: relative; flex: 1 1 220px; min-width: 0; } .abm-ui .suc-buscar .material-symbols-outlined { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--faint); pointer-events: none; } .abm-ui .suc-buscar .abm-in { padding-left: 30px; font-size: .78rem; } /* ── Fila de sucursal ──────────────────────────────────────────────────────── Plegada es UNA línea (`.suc-cab`); abierta suma sus dos renglones de campos (`.suc-campos`): arriba la identidad (nombre, geografía, GLN), abajo el domicilio que se imprime en el remito. OJO: `.suc-row` y las clases `.suc-*` de cada campo NO son estilo, son el contrato que lee `guardarCliente()`. Lo que se puede repintar es lo de acá. El plegado y el filtro esconden con `display:none`, y eso es deliberado: los inputs siguen en el DOM con su valor, así que el guardado recorre las N sucursales sin enterarse de cuáles se estaban viendo. Un filtro que se decidiera por lo dibujado guardaría sólo lo que quedó en pantalla. */ .abm-ui .suc-row { border: 1px solid var(--hair-strong); border-radius: 9px; background: #fafbfd; overflow: hidden; transition: border-color .14s ease, box-shadow .18s var(--curva); } .abm-ui .suc-row + .suc-row { margin-top: 6px; } .abm-ui .suc-row.oculta { display: none; } .abm-ui .suc-row.abierta { border-color: var(--azure); box-shadow: var(--e1); } /* La línea plegada. Es un