/* * Patrón Oro — Sistema de Diseño (vicor2) * Ver PATRON_ORO_DESIGN_SYSTEM.md para el porqué de cada decisión. * No pisa clases legadas (.btn, .well, etc.) — todo prefijado con `vc-`. */ :root{ /* marca — del logo */ --primary:#31859C; --primary-dark:#236070; --primary-tint:#EAF3F6; --accent:#47AAC5; --neutral-brand:#A6A6A6; /* semántico — estable, no depende de la marca */ --success:#16A34A; --success-dark:#15803D; --danger:#BF0000; --danger-dark:#8F0000; --warning:#C2620A; --warning-dark:#9A4D08; /* admin/infraestructura — deliberadamente FUERA de la paleta de marca y de los semánticos de arriba (no es success/danger/warning de un dato) — grafito frío, para que "esto toca el esquema de la base" no se confunda visualmente con "esto borra un registro". Ver §13.1 en PATRON_ORO_DESIGN_SYSTEM.md. */ --admin:#4A5561; --admin-dark:#37404A; /* neutrales de interfaz */ --ink:#16232A; --ink-muted:#5B6772; --ink-faint:#8894A0; --bg:#F6F8F9; --surface:#FFFFFF; --surface-2:#EEF2F4; --border:#DCE3E7; /* fondos de estado (24/10): el color de estado mezclado 92 % con blanco, igual que --primary-tint. Para filas y avisos: reemplazan los rosas, verdes claros y amarillos que cada pantalla inventaba. */ --success-tint:#ECF8F0; --warning-tint:#FAF2EB; --danger-tint:#FAEBEB; /* letra (24/10): siete tamaños y nada más (había 40). Ver PATRON_ORO_DESIGN_SYSTEM.md, «Letra». */ --fs-xs:10px; /* notas chicas y aclaraciones */ --fs-s:11px; /* títulos de columna, rótulos de la barra, etiquetas */ --fs-m:12px; /* celdas de tabla (la base), botones chicos, controles de la barra */ --fs-base:13px; /* texto común y formularios */ --fs-l:14px; /* título de una subpantalla */ --fs-xl:16px; /* un dato destacado */ --fs-xxl:20px; /* un número grande, muy de vez en cuando */ /* forma */ --radius-control:4px; /* botones e inputs — opción "Plano" */ --radius-surface:8px; /* cards — opción "Franja lateral" */ } /* ============ SCAFFOLDING — reset/tipografía base de Bootstrap 2.3 (Fase C, 2026-07-29) ============ La pieza que faltó en el primer intento de retirar Bootstrap (revertido de emergencia en producción el mismo día, ver PATRON_ORO_DESIGN_SYSTEM.md §15.12/§15.13 y PENDIENTES.md §13): todo el shim de Fase C hasta ahora cubría COMPONENTES (.btn, .modal, .nav-tabs, .table...) pero nunca el reset global que Bootstrap pone sobre elementos sin clase (body, a, h1-h6, p, ul, hr). Sin esto, sacar bootstrap-combined.min.css hacía caer la tipografía a los defaults nativos del navegador (Times New Roman en vez de Helvetica/Arial) y descuadraba cualquier layout que dependiera de los márgenes/line-height por defecto de Bootstrap. Valores extraídos tal cual de bootstrap-combined.min.css (no inventados) para que el aspecto visual no cambie en absoluto — solo cambia qué hoja de estilos los produce. */ html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} body{ margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:var(--fs-base);line-height:20px;color:var(--ink,#16232A);background-color:#fff; } a{color:var(--primary,#31859C);text-decoration:none;} a:hover, a:focus{color:var(--primary-dark,#236070);text-decoration:underline;} p{margin:0 0 10px;} small{font-size:85%;} strong{font-weight:bold;} h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;} /* 24/10: los títulos van a la escala de letra (eran los de Bootstrap: 38,5 / 31,5 / 24,5 / 17,5 / 14 / 11,9 px). En la app casi todos los

son títulos de subpantalla (.modal-header). */ h1,h2,h3{line-height:1.3;} h1{font-size:var(--fs-xxl);} h2{font-size:var(--fs-xl);} h3{font-size:var(--fs-l);} h4{font-size:var(--fs-l);} h5{font-size:var(--fs-base);} h6{font-size:var(--fs-s);} h1 small, h2 small, h3 small, h4 small, h5 small, h6 small{font-weight:normal;line-height:1;color:var(--ink-faint,#8894A0);} ul, ol{padding:0;margin:0 0 10px 25px;} dl{margin-bottom:20px;} dt, dd{line-height:20px;} dd{margin-left:10px;} hr{margin:20px 0;border:0;border-top:1px solid var(--border,#DCE3E7);border-bottom:1px solid #fff;} address{display:block;margin-bottom:20px;font-style:normal;line-height:20px;} code, pre{ padding:0 3px 2px;font-family:Monaco,Menlo,Consolas,"Courier New",monospace; font-size:var(--fs-m);color:var(--ink,#16232A);border-radius:3px; } blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid var(--border,#DCE3E7);} .show{display:block;} .invisible{visibility:hidden;} /* .hide ya está definido más abajo, junto al shim de modal (mismo valor) */ /* ============ BASE DE LA APP — lo que vivía en vicor_sys.css y vicor_spa_core.css (24/10/2026) ============ Esas dos hojas eran anteriores al patrón y le ganaban por !important (la barra azul, las pestañas, las barras de herramientas, el relleno de las tablas). Se pasó acá sólo lo vivo, con el valor que de verdad se veía, y se borraron (DIAGNOSTICO_PATRON_ORO_2026-10-24.md). A propósito cambian: la barra de arriba va con --primary (antes #2f96b4), los colores sueltos van a la paleta y los controles de la barra de herramientas miden 28px como los botones (antes 30). Los !important que quedan son los que ya estaban: hay vistas con estilos propios contados contra ellos. */ html, body{margin:0 !important;padding:0 !important;} body{background-color:var(--surface) !important;background-image:none !important;} body, .table th, .table td, .table, strong, b, h1, h2, h3, h4, h5, h6{text-shadow:none !important;} [class^="icon-"], [class*=" icon-"]{ text-shadow:none !important;background-image:none !important;box-shadow:none !important;border:none !important; vertical-align:middle !important;margin-top:0 !important; } [x-cloak]{display:none !important;} .content{border:none !important;box-shadow:none !important;} .header{margin-bottom:10px;} .label-inline{font-weight:bold;margin-right:5px;white-space:nowrap;} .spa-link{color:var(--primary) !important;font-weight:bold;} /* Tablas: relleno, columna de acciones y cabecera fija. Van ANTES de .vc-table: con el mismo peso gana la regla que está más abajo, y .vc-table tiene que ganarle a ésta. */ .table th, .table td{padding:6px 8px !important;vertical-align:middle !important;} .table th:last-child, .table td:last-child, .table th.acciones, .table td.acciones{ white-space:nowrap !important;width:1% !important;min-width:120px !important;text-align:center !important; } .table thead th{ position:sticky;top:0 !important;z-index:10; background-color:var(--bg) !important;box-shadow:0 1px 1px rgba(0,0,0,.1); } .modal-body:has(.table){padding-top:0 !important;} .modal-body:has(.table) > *:first-child{margin-top:15px !important;} .tabulator-row .tabulator-cell{ padding:4px 8px !important;height:auto !important;min-height:22px !important; display:inline-flex !important;align-items:center !important; } .tabulator-row .tabulator-cell.tabulator-col-hidden, .tabulator-row .tabulator-cell[style*="display: none"], .tabulator-row .tabulator-cell[style*="display:none"]{display:none !important;} #iga_pat_table .tabulator-cell{padding:4px 4px !important;} #iga_pat_table .tabulator-row{min-height:28px !important;} /* Contenedores planos: pestañas, contenido de pestañas, .well, .box y .block van sin borde, sin sombra, transparentes y con 10px arriba y abajo. Las reglas de .nav-tabs/.tab-content/.tab-pane de más abajo afinan el borde y el relleno de arriba. */ .tab-content, .tab-pane, .well, .box, .box-content, .nav-tabs, .block{ border:none !important;box-shadow:none !important;padding:10px 0 !important;background:transparent !important; } /* Barra de herramientas: los hijos en fila y los controles de 28px, como .vc-btn--sm. Va ANTES del bloque TOOLBAR de más abajo, que tiene que ganarle a «.toolbar-container > *» en .toolbar-left/.toolbar-right. */ .toolbar-container > *{display:inline-block !important;vertical-align:middle !important;margin:0 !important;float:none !important;} .toolbar-container .label-inline, .toolbar-container span[style*="font-weight: bold"], .toolbar-container span[style*="font-weight:bold"]{ font-size:var(--fs-base) !important;font-weight:bold !important;margin-right:4px !important;white-space:nowrap !important; display:inline-block !important;line-height:28px !important;vertical-align:middle !important; } .toolbar-container input, .toolbar-container select{ margin:0 !important;vertical-align:middle !important;display:inline-block !important; height:28px !important;box-sizing:border-box !important; } .toolbar-alineado{display:flex;align-items:center !important;flex-wrap:wrap;gap:8px;min-height:28px;} .toolbar-alineado > div, .toolbar-alineado > span{display:flex !important;align-items:center !important;} .toolbar-alineado .form-inline{display:flex !important;align-items:center !important;flex-wrap:wrap;gap:6px;} .toolbar-alineado label{margin-bottom:0 !important;display:inline-block !important;white-space:nowrap;} .toolbar-alineado .pagination ul{height:28px;display:flex;align-items:stretch;margin:0;box-shadow:none;} .toolbar-alineado .pagination ul > li > a, .toolbar-alineado .pagination ul > li > span{ height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 12px;line-height:normal; } .toolbar-alineado select{ height:28px !important;box-sizing:border-box !important;margin:0 !important;cursor:pointer; padding:2px 4px;font-size:var(--fs-base);line-height:normal; } .toolbar-alineado input[type="text"]{ height:28px !important;box-sizing:border-box !important;margin:0 !important;border-radius:4px; padding:2px 6px;font-size:var(--fs-base);line-height:normal; } .paginator-container, [id^="paginador-tab"]{ display:inline-flex !important;align-items:center !important;gap:8px !important; margin:0 !important;padding:0 !important;vertical-align:middle !important; } .pagination button{margin:0 2px;} /* Menú lateral (el encabezado de cada grupo lo pinta layouts/app.blade.php) */ .sidebar-nav .nav-list > li > a, .sidebar-nav .nav-header{color:var(--ink) !important;text-shadow:none !important;} .sidebar-nav .nav-list > li.active > a, .sidebar-nav .nav-list > li > a:hover{ color:var(--ink) !important;background-color:var(--surface-2) !important; } .sidebar-nav{padding-top:0 !important;} .sidebar-nav .nav-list{padding-top:0 !important;overflow:visible !important;} .sidebar-nav .nav-list > li:first-child{margin-top:0 !important;} @media (min-width:980px){ body:not(.sidebar-hidden) > .container-fluid > .row-fluid{display:flex !important;align-items:stretch !important;} .sidebar-nav{ position:sticky !important;top:60px !important;max-height:calc(100vh - 80px) !important; overflow-y:auto !important;overflow-x:hidden !important; scrollbar-width:thin;scrollbar-color:var(--border) transparent; } .sidebar-nav::-webkit-scrollbar{width:5px;} .sidebar-nav::-webkit-scrollbar-track{background:transparent;} .sidebar-nav::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:3px;} } /* ============ BOTONES — opción "Plano" ============ */ .vc-btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; font-weight:600;line-height:1;white-space:nowrap;cursor:pointer; border:none;border-radius:var(--radius-control); transition:background .12s ease, color .12s ease; } .vc-btn:disabled{opacity:.45;cursor:not-allowed;} .vc-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;} /* .active agregado 2026-07-27 -- hueco real encontrado migrando reportes/reportes.blade.php: Bootstrap 2 usa .active para marcar el botón seleccionado en un grupo tipo radio (data-toggle="buttons", ej. toggle SI/NO). vc-btn no tenía NINGÚN estilo para .active, así que un toggle migrado quedaba sin indicador visual de cuál está seleccionado. Reusa el mismo tono "dark" de cada variante (mismo criterio que :hover) + un inset shadow para que se lea como "presionado", no solo como hover. */ .vc-btn.active{box-shadow:inset 0 2px 5px rgba(0,0,0,.3) !important;} .vc-btn--primary.active{background:var(--primary-dark);} .vc-btn--secondary.active{background:var(--ink-faint);color:#fff;} .vc-btn--success.active{background:var(--success-dark);} .vc-btn--danger.active{background:var(--danger-dark);} .vc-btn--warning.active{background:var(--warning-dark);} .vc-btn--sm{height:28px;padding:0 12px;font-size:var(--fs-m);} .vc-btn--md{height:36px;padding:0 16px;font-size:var(--fs-base);} .vc-btn--lg{height:44px;padding:0 22px;font-size:var(--fs-l);} .vc-btn--primary{background:var(--primary);color:#fff;} .vc-btn--primary:hover{background:var(--primary-dark);} .vc-btn--secondary{background:var(--border);color:var(--ink);} .vc-btn--secondary:hover{background:var(--ink-faint);color:#fff;} .vc-btn--success{background:var(--success);color:#fff;} .vc-btn--success:hover{background:var(--success-dark);} .vc-btn--danger{background:var(--danger);color:#fff;} .vc-btn--danger:hover{background:var(--danger-dark);} .vc-btn--warning{background:var(--warning);color:#fff;} .vc-btn--warning:hover{background:var(--warning-dark);} .vc-btn--ghost{background:transparent;color:var(--ink-muted);} .vc-btn--ghost:hover{background:var(--surface-2);color:var(--ink);} .vc-btn--admin{background:var(--admin);color:#fff;} .vc-btn--admin:hover{background:var(--admin-dark);} /* ============ CARDS / TILES — opción "Franja lateral" ============ */ .vc-card{ display:flex;flex-direction:column;gap:8px; background:var(--surface);border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:var(--radius-surface); padding:16px 18px; transition:background .15s ease; } .vc-card:hover{background:var(--primary-tint);} .vc-card h4{margin:0;font-size:var(--fs-l);color:var(--ink);} .vc-card p{margin:0;font-size:var(--fs-m);color:var(--ink-muted);line-height:1.45;} /* ============ TABLAS COMPACTAS — densidad reducida (aditivo, junto a .table) ============ «.table thead th» (cabecera fija, en BASE DE LA APP) tiene el mismo peso que «.vc-table thead th»: lo de acá abajo lleva !important y está después, por eso gana. Ver PATRON_ORO_DESIGN_SYSTEM.md §12. */ .vc-table th, .vc-table td{ padding:3px 8px !important; font-size:var(--fs-m) !important; line-height:1.3 !important; vertical-align:middle !important; } .vc-table th{ font-size:var(--fs-s) !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted); } .vc-table thead th{ background-color:var(--surface-2) !important; box-shadow:none !important; } .vc-table.table-bordered, .vc-table.table-bordered th, .vc-table.table-bordered td{ border-color:var(--border); } .vc-table.table-striped tbody>tr:nth-child(odd)>td, .vc-table.table-striped tbody>tr:nth-child(odd)>th{ background-color:var(--surface-2); } /* Tablas con subtabla desplegable (Clases/Unidades en gestion/parametros) meten una hermana OCULTA por cada fila visible, en el mismo tbody -- nth-child(odd) de arriba cuenta esa fila oculta también, así que todas las filas visibles terminan en posición impar y salen todas grises, nunca alternan. Se fuerza el color acá con clases explícitas que pone el JS por índice real de dato, no de posición en el DOM (ver vicor_parametros.js, buildParam.clases/unidades). Bug real 2026-07-27, ver §8. */ .vc-table.table-striped tbody>tr.vc-row-even>td, .vc-table.table-striped tbody>tr.vc-row-even>th{ background-color:var(--surface-2) !important; } .vc-table.table-striped tbody>tr.vc-row-odd>td, .vc-table.table-striped tbody>tr.vc-row-odd>th{ background-color:var(--surface) !important; } /* ============ TABLA BASE — reemplazo compatible de Bootstrap 2.3 (Fase C, 2026-07-28) ============ `vc-table` de arriba es ADITIVA -- asume que el `.table` de Bootstrap ya puso el borde/padding base y solo lo retoca. Sin este bloque, las 22 tablas de la app que usan `.table`/`.table-striped`/ `.table-bordered`/`.table-hover`/`.table-condensed` SIN `vc-table` quedarían completamente sin estilo (tabla HTML cruda) el día que se saque Bootstrap. No hace falta preocuparse por el orden de estas reglas respecto a las `.vc-table.*` de arriba: donde compiten en la misma propiedad, las de arriba ya ganan por selector compuesto más específico (`.vc-table.table-striped ...`, 2 clases) o por `!important` (`.vc-table th/td`) -- confirmado por grep que ninguna vista usa ``/ `` ni `td/th class="spanN"`, así que esos casos de borde de Bootstrap se omiten. */ .table{width:100%;margin-bottom:20px;} /* el relleno y la alineación vertical de .table th/td están en «BASE DE LA APP» (6px 8px, al medio) */ .table th, .table td{ line-height:20px;text-align:left; border-top:1px solid var(--border); } .table th{font-weight:bold;} .table thead th{vertical-align:bottom;} .table tbody + tbody{border-top:2px solid var(--border);} .table-bordered{ border:1px solid var(--border);border-collapse:separate;border-left:0;border-radius:4px; } .table-bordered th, .table-bordered td{border-left:1px solid var(--border);} .table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child{border-top-left-radius:4px;} .table-bordered thead:first-child tr:first-child > th:last-child, .table-bordered tbody:first-child tr:first-child > td:last-child, .table-bordered tbody:first-child tr:first-child > th:last-child{border-top-right-radius:4px;} .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child{border-bottom-left-radius:4px;} .table-bordered tbody:last-child tr:last-child > td:last-child, .table-bordered tbody:last-child tr:last-child > th:last-child{border-bottom-right-radius:4px;} .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th{background-color:var(--surface-2);} .table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th{background-color:var(--surface-2);} /* ============ BOTONES DE ACCIÓN EN FILA — icon-only, compactos ============ */ .vc-btn-icon{ display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;padding:0; border:none;border-radius:var(--radius-control); color:#fff;cursor:pointer; transition:background .12s ease; vertical-align:middle; } .vc-btn-icon:disabled{opacity:.45;cursor:not-allowed;} .vc-btn-icon + .vc-btn-icon{margin-left:4px;} .vc-btn-icon i{font-size:var(--fs-s);line-height:1;} .vc-btn-icon--primary{background:var(--primary);} .vc-btn-icon--primary:hover{background:var(--primary-dark);} .vc-btn-icon--danger{background:var(--danger);} .vc-btn-icon--danger:hover{background:var(--danger-dark);} .vc-btn-icon--warning{background:var(--warning);} .vc-btn-icon--warning:hover{background:var(--warning-dark);} /* --success agregada 2026-07-27 (hueco detectado migrando cuentacorriente/index.blade.php + vicor_cuentacorriente.js -- toggle "deshacer" de IVA ya impactado). */ .vc-btn-icon--success{background:var(--success);} .vc-btn-icon--success:hover{background:var(--success-dark);} /* --secondary agregada 2026-07-27 (hueco detectado migrando agropecuarios/index.blade.php, ver §14) -- única variante sin fondo de marca, por eso pisa el color:#fff de la base: un ícono blanco sobre --border (gris claro) sería invisible. */ .vc-btn-icon--secondary{background:var(--border);color:var(--ink-muted);} .vc-btn-icon--secondary:hover{background:var(--ink-faint);color:#fff;} /* ============ VC-FLAG — semáforo de estado en una celda (2026-08-18) ============ Hueco real: no había ningún componente para "este registro está bien / está mal" dentro de una tabla, y cada pantalla lo venía resolviendo a mano con sueltas y color inline (`icon-ok-sign` verde en gestion/bancos.blade.php, `#468847` en iga/tango_importacion.blade.php, `.col-flag .icon-ok` en contabilidad/cuentas). Primer uso: la columna "Capital" de planes_facilidades (Plan FP), que compara el capital consolidado por AFIP contra el capital de las cuotas del plan. NO es un botón: no se hace clic, no tiene fondo ni borde. El estado lo dice el ícono + el color, nunca una palabra (misma regla que los toggles de fila). El detalle numérico va en el `title`, que es donde el operador lo busca. Variantes: --ok (coincide), --bad (no coincide), --na (falta el dato: NO es rojo, no hay nada mal todavía), --warn (no se pudo consultar). */ .vc-flag{display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;line-height:1;cursor:help;} .vc-flag i{font-size:var(--fs-l);line-height:1;} .vc-flag--ok{color:var(--success);} .vc-flag--bad{color:var(--danger);} .vc-flag--na{color:var(--ink-faint);} .vc-flag--warn{color:var(--warning);} /* ============ NAV-TABS / TAB-CONTENT — ritmo vertical compacto, global ============ vicor_spa_core.css tiene 3 capas de !important pisándose entre sí sobre estas mismas clases Bootstrap (.nav-tabs, .tab-content) de intentos previos de "Patrón Oro" no limpiados. Esta es la versión final: pisa a todas por !important + ser la última hoja cargada. No se tocan esas reglas viejas (podrían estar en uso en pantallas no migradas todavía) — ver §9 en PATRON_ORO_DESIGN_SYSTEM.md. */ /* 2026-07-28 -- ampliado a reemplazo compatible completo de .nav-tabs/.tab-content de Bootstrap 2.3 (Fase C, shim de §15.5): antes esta regla solo pisaba margin/ border/padding encima del .nav-tabs real de Bootstrap; ahora define TODA la apariencia (display, float, clearfix, color, borde, estado activo/hover) para que .nav-tabs no dependa de bootstrap-combined.min.css. Valores base (color #777/#555, bordes #ddd/#eee) tomados tal cual de Bootstrap 2.3 para que no cambie el aspecto visual de ninguna vista ya migrada -- solo cambia el motor que los produce. JS de data-toggle="tab"/.tab('show') reemplazado aparte en public/js/vicor_tabs_shim.js, cargado después de bootstrap.min.js. */ .nav-tabs{ display:block;margin-left:0;padding-left:0;list-style:none; margin-bottom:8px !important; border-bottom:1px solid var(--border) !important; } .nav-tabs:before, .nav-tabs:after{content:"";display:table;} .nav-tabs:after{clear:both;} .nav-tabs > li{float:left;margin-bottom:-1px;} .nav-tabs > li > a{ display:block;float:none; padding:5px 12px !important; margin-right:2px; font-size:var(--fs-base) !important;line-height:18px !important; color:var(--ink-muted,#5B6772);text-decoration:none;text-shadow:0 1px 0 #fff; border:1px solid transparent;border-radius:2px 2px 0 0 !important; } .nav-tabs > li > a:hover{ text-decoration:none;background-color:var(--surface-2,#EEF2F4); border-color:var(--border,#DCE3E7) #eee var(--border); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover{ color:var(--ink-muted,#5B6772);background-color:#fff; border:1px solid var(--border);border-bottom-color:transparent; cursor:default; } /* .nav-pills: mismo criterio, 3 usos reales (contabilidad/cuentas, gestion/pagos, liquidaciones/iga_ibp), todos con switching por onclick propio (no data-toggle), por eso no necesitan nada del shim de JS -- solo la apariencia. */ .nav-pills{display:block;margin-left:0;padding-left:0;list-style:none;} .nav-pills:before, .nav-pills:after{content:"";display:table;} .nav-pills:after{clear:both;} .nav-pills > li{float:left;} .nav-pills > li > a{ display:block;float:none; padding:8px 12px;margin:2px 2px 2px 0; text-decoration:none;border-radius:5px; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover{ color:#fff;background-color:var(--primary,#31859C); } .tab-content{ padding-top:0 !important; } .tab-content > .tab-pane{display:none;} .tab-content > .tab-pane.active{display:block;} /* .tab-pane (hijo de .tab-content) tiene SU PROPIO padding-top:10px y su propio div:first-child con margin-top:12px en vicor_spa_core.css -- son reglas separadas de .tab-content, pisarlo a él no alcanza. */ .tab-pane{ padding-top:0 !important; } /* 2026-07-29 -- relevamiento real (10 pantallas, Antigravity) confirmó que esta regla en margin-top:0 (puesta 2026-07-26 por pedido de compactar ~34px acumulados de entonces) quedó demasiado agresiva: en vistas donde el primer hijo del pane es una tabla/div sin margen propio (bienes, contabilidad/cuentas, etc.) el contenido queda pegado al borde de las tabs, sin ningún colchón. 12px es un punto medio entre "pegado" (0) y lo que se pidió sacar en julio (~34px) -- decisión del usuario, no un valor recuperado de Bootstrap. */ .tab-pane > div:first-child{ margin-top:12px !important;margin-bottom:12px !important;padding-top:0 !important; } /* ============ SELECT2 — tema único (2026-07-27), reemplaza 6 copias locales (bienes/index, contabilidad/auditoria, contabilidad/herramientas, gestion/bancos, liquidaciones/iga_ibp, planes_facilidades/main) que ni siquiera coincidían entre sí: 3 usaban 26px de alto, otras 3 usaban 30px, sin ningún criterio. Se fijó 28px porque coincide con vc-btn--sm — un select2 al lado de un botón chico en el mismo toolbar queda a la misma altura sin tener que forzar nada por fuera. */ .select2-container .select2-selection--single{ height:28px !important;border-radius:var(--radius-control) !important; border:1px solid var(--border) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:26px !important;color:var(--ink) !important;font-size:var(--fs-m) !important; } .select2-container--default .select2-selection--single .select2-selection__arrow{ height:26px !important; } /* ============ TOOLBAR — converge a .toolbar-container/.toolbar-left/.toolbar-right, la convención mayoritaria (~14 pantallas) por sobre row-fluid+pull-left/right (hoy solo Tesorería). Decisión 2026-07-27, ver §11 Nivel 3 en PATRON_ORO_DESIGN_SYSTEM.md. vicor_spa_core.css tiene 2 definiciones de .toolbar-container peleándose entre sí (líneas ~27 y ~82, dos intentos previos de "Patrón Oro" sin limpiar) — no se tocan, esta versión pisa a ambas por !important + ser la última hoja cargada, y además tensa el ritmo vertical (10px en vez de 15-20px, sin padding extra que ya duplica el de .tab-pane). .toolbar-alineado NO es esto — es un combo buscador+botón height-aligned, concepto distinto, se mantiene separado. */ .toolbar-container{ display:flex !important;justify-content:space-between !important;align-items:center !important; gap:12px !important;flex-wrap:wrap !important; margin-bottom:10px !important;padding:0 !important; background:transparent !important;border:none !important;box-shadow:none !important; width:100% !important;min-height:32px !important; } .toolbar-left, .toolbar-right{ display:flex !important;align-items:center !important;gap:10px !important;flex-wrap:wrap !important; } .toolbar-right{margin-left:auto !important;} /* .form-inline (Bootstrap 2.3) nunca tiene display:flex por su cuenta -- sus hijos (input+botón del buscador) se alineaban por el modelo viejo vertical-align/inline, mientras el resto de .toolbar-right (paginador, #pag_listado) ya usa flexbox real con align-items:center. Cada caja mide 28px igual (confirmado por DevTools 2026-07-28) pero terminaban centradas en puntos verticales distintos dentro de la misma fila -- causa real del desalineamiento reportado, ver PENDIENTES.md §12. */ .toolbar-left .form-inline, .toolbar-right .form-inline, .toolbar-container .form-inline{ display:flex !important;align-items:center !important;gap:8px !important; } /* ============ PAGINADOR — reemplaza el HTML crudo de Bootstrap 2.3 que arma window.vicor_paginator (vicor_legacy_helpers.js), usado globalmente en 7+ pantallas ============ */ .vc-pagination{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; } .vc-pagination ul{ display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none; } .vc-pagination li{display:flex;} .vc-pagination li a{ display:inline-flex;align-items:center;justify-content:center; min-width:28px;height:28px;padding:0 6px; border-radius:var(--radius-control); font-size:var(--fs-m);font-weight:600;color:var(--ink-muted); background:transparent;cursor:pointer;text-decoration:none; transition:background .12s ease, color .12s ease; box-sizing:border-box; } .vc-pagination li a:hover{background:var(--surface-2);color:var(--ink);} .vc-pagination li.active a{background:var(--primary);color:#fff;cursor:default;} .vc-pagination li.disabled a{color:var(--ink-faint);cursor:default;pointer-events:none;background:transparent;} .vc-pagination select{ height:28px;margin:0;padding:0 6px;box-sizing:border-box; border:1px solid var(--border);border-radius:var(--radius-control); background:var(--surface);color:var(--ink);font-size:var(--fs-m); width:auto;min-width:64px; } /* Bloque "Ver: N" + contador "2/2 (82 Reg.)" — 2026-08-17. Antes renderPaginator los armaba con un .form-inline suelto y un