/* ============================================================================ TIKO · Admin — FAMILIA DE BOTONES -ico / -tlb (réplica funcional de KIKA) ---------------------------------------------------------------------------- 🛑 PRINCIPIO (Norberto, 2026-08-23): "KIKA es referencia de RÉPLICA DE FUNCIONALIDAD de UI: funciona bajo el mismo concepto, pero aplicado a los estilos de SKOTE que usa TIKO." → misma estructura, mismas clases, mismo comportamiento; los COLORES son los de TIKO/Skote, NO el teal #0c768a de KIKA. Origen: WebAppCore8\WebAppCore\WebAppCore\wwwroot\assets\css\bootstrap.min.css (bloque ".btn-outline-*-ico" + ".btn-outline-*-tlb"). Todo se expresa con las variables --bs-btn-* de Bootstrap 5.3, así que la familia se re-tematiza sin pisar nada con !important. DOS FAMILIAS, DOS USOS: · -ico → botón "sólido tenue": fondo del color al 25% en reposo y color PLENO en hover. Se usa para el BUSCAR de la toolbar y para los botones de ÍCONO dentro de una fila del drawtable. · -tlb → botón "tinted hover": transparente en reposo, tinte suave al pasar el mouse (el texto NUNCA se invierte). Es el botón de TOOLBAR: +Filtros, Limpiar, Editar, Actualizar… PALETA (Skote, salvo primary que es la marca TIKO): primary #556ee6 (var(--tk-marca)) · secondary #74788d · success #34c38f info #50a5f1 · warning #f1b44c · danger #f46a6a dark #343a40 · light #eff2f7 · purple #6f42c1 pink #e83e8c purple (#6f42c1, el --bs-purple de Skote) queda deliberadamente MÁS índigo que el primary violeta de TIKO, para que el botón "+Filtros" se distinga del "Buscar" aun estando pegados. ORDEN DE CARGA: después de ncg_plugin.css y ANTES de tiko-admin.css. ========================================================================== */ /* --------------------------------------------------------------------------- 0 · Tokens de la familia (RGB para poder armar los fondos con alpha) ------------------------------------------------------------------------- */ :root { --tk-btn-primary: #556ee6; --tk-btn-primary-rgb: 85, 110, 230; --tk-btn-secondary: #74788d; --tk-btn-secondary-rgb: 116, 120, 141; --tk-btn-success: #34c38f; --tk-btn-success-rgb: 52, 195, 143; --tk-btn-info: #50a5f1; --tk-btn-info-rgb: 80, 165, 241; --tk-btn-warning: #f1b44c; --tk-btn-warning-rgb: 241, 180, 76; --tk-btn-warning-dk: #c8912f; /* texto del warning en hover: el amarillo puro no se lee */ --tk-btn-danger: #f46a6a; --tk-btn-danger-rgb: 244, 106, 106; --tk-btn-dark: #343a40; --tk-btn-dark-rgb: 52, 58, 64; --tk-btn-light: #eff2f7; --tk-btn-light-rgb: 239, 242, 247; --tk-btn-light-line: #dce1e6; --tk-btn-purple: #6f42c1; --tk-btn-purple-rgb: 111, 66, 193; --tk-btn-pink: #e83e8c; --tk-btn-pink-rgb: 232, 62, 140; } /* ========================================================================= 1 · BOTONES DE ÍCONO (-ico) — fondo tenue en reposo, color pleno en hover Uso canónico: Buscar de la toolbar + botones de acción de la fila del drawtable (con btn-sm rounded-3 shadow-sm px-2 py-1 m-0). ========================================================================= */ .btn-outline-primary-ico { --bs-btn-color: var(--tk-btn-primary); --bs-btn-border-color: var(--tk-btn-primary); --bs-btn-bg: rgba(var(--tk-btn-primary-rgb), .25); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tk-btn-primary); --bs-btn-hover-border-color: var(--tk-btn-primary); --bs-btn-focus-shadow-rgb: var(--tk-btn-primary-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tk-btn-primary); --bs-btn-active-border-color: var(--tk-btn-primary); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: var(--tk-btn-primary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-primary); --bs-gradient: none; } .btn-outline-secondary-ico { --bs-btn-color: var(--tk-btn-secondary); --bs-btn-border-color: var(--tk-btn-secondary); --bs-btn-bg: rgba(var(--tk-btn-secondary-rgb), .25); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tk-btn-secondary); --bs-btn-hover-border-color: var(--tk-btn-secondary); --bs-btn-focus-shadow-rgb: var(--tk-btn-secondary-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tk-btn-secondary); --bs-btn-active-border-color: var(--tk-btn-secondary); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: var(--tk-btn-secondary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-secondary); --bs-gradient: none; } .btn-outline-success-ico { --bs-btn-color: var(--tk-btn-success); --bs-btn-border-color: var(--tk-btn-success); --bs-btn-bg: rgba(var(--tk-btn-success-rgb), .25); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tk-btn-success); --bs-btn-hover-border-color: var(--tk-btn-success); --bs-btn-focus-shadow-rgb: var(--tk-btn-success-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tk-btn-success); --bs-btn-active-border-color: var(--tk-btn-success); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: var(--tk-btn-success); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-success); --bs-gradient: none; } .btn-outline-danger-ico { --bs-btn-color: var(--tk-btn-danger); --bs-btn-border-color: var(--tk-btn-danger); --bs-btn-bg: rgba(var(--tk-btn-danger-rgb), .25); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tk-btn-danger); --bs-btn-hover-border-color: var(--tk-btn-danger); --bs-btn-focus-shadow-rgb: var(--tk-btn-danger-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tk-btn-danger); --bs-btn-active-border-color: var(--tk-btn-danger); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: var(--tk-btn-danger); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-danger); --bs-gradient: none; } .btn-outline-warning-ico { --bs-btn-color: var(--tk-btn-warning); --bs-btn-border-color: var(--tk-btn-warning); --bs-btn-bg: rgba(var(--tk-btn-warning-rgb), .25); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tk-btn-warning); --bs-btn-hover-border-color: var(--tk-btn-warning); --bs-btn-focus-shadow-rgb: var(--tk-btn-warning-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tk-btn-warning); --bs-btn-active-border-color: var(--tk-btn-warning); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: var(--tk-btn-warning); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-warning); --bs-gradient: none; } .btn-outline-info-ico { --bs-btn-color: var(--tk-btn-info); --bs-btn-border-color: var(--tk-btn-info); --bs-btn-bg: rgba(var(--tk-btn-info-rgb), .25); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tk-btn-info); --bs-btn-hover-border-color: var(--tk-btn-info); --bs-btn-focus-shadow-rgb: var(--tk-btn-info-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tk-btn-info); --bs-btn-active-border-color: var(--tk-btn-info); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: var(--tk-btn-info); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-info); --bs-gradient: none; } .btn-outline-dark-ico { --bs-btn-color: var(--tk-btn-dark); --bs-btn-border-color: var(--tk-btn-dark); --bs-btn-bg: rgba(var(--tk-btn-dark-rgb), .25); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tk-btn-dark); --bs-btn-hover-border-color: var(--tk-btn-dark); --bs-btn-focus-shadow-rgb: var(--tk-btn-dark-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tk-btn-dark); --bs-btn-active-border-color: var(--tk-btn-dark); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: var(--tk-btn-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-dark); --bs-gradient: none; } /* Light: color muy claro → más alpha en el fondo, texto oscuro y borde propio, si no el botón desaparece sobre el blanco de la card. (Igual criterio KIKA.) */ .btn-outline-light-ico { --bs-btn-color: var(--tk-btn-secondary); --bs-btn-border-color: var(--tk-btn-light-line); --bs-btn-bg: rgba(var(--tk-btn-light-rgb), .35); --bs-btn-hover-color: #000; --bs-btn-hover-bg: var(--tk-btn-light); --bs-btn-hover-border-color: var(--tk-btn-light-line); --bs-btn-focus-shadow-rgb: var(--tk-btn-light-rgb); --bs-btn-active-color: #000; --bs-btn-active-bg: var(--tk-btn-light); --bs-btn-active-border-color: var(--tk-btn-light-line); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: var(--tk-btn-secondary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-light-line); --bs-gradient: none; } .btn-outline-purple-ico { --bs-btn-color: var(--tk-btn-purple); --bs-btn-border-color: var(--tk-btn-purple); --bs-btn-bg: rgba(var(--tk-btn-purple-rgb), .25); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tk-btn-purple); --bs-btn-hover-border-color: var(--tk-btn-purple); --bs-btn-focus-shadow-rgb: var(--tk-btn-purple-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tk-btn-purple); --bs-btn-active-border-color: var(--tk-btn-purple); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: var(--tk-btn-purple); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-purple); --bs-gradient: none; } .btn-outline-pink-ico { --bs-btn-color: var(--tk-btn-pink); --bs-btn-border-color: var(--tk-btn-pink); --bs-btn-bg: rgba(var(--tk-btn-pink-rgb), .25); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tk-btn-pink); --bs-btn-hover-border-color: var(--tk-btn-pink); --bs-btn-focus-shadow-rgb: var(--tk-btn-pink-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tk-btn-pink); --bs-btn-active-border-color: var(--tk-btn-pink); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: var(--tk-btn-pink); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-pink); --bs-gradient: none; } /* ========================================================================= 2 · BOTONES DE TOOLBAR (-tlb) — "tinted hover" Transparentes en reposo; al pasar el mouse toman un tinte del mismo color y el TEXTO NO se invierte (por eso una botonera entera de -tlb se lee tranquila y no "parpadea" como los outline clásicos de Bootstrap). ⚠️ No traen border-radius propio: lo pone TIKO (§3) o `rounded-3` en el HTML. ========================================================================= */ .btn-outline-primary-tlb { --bs-btn-color: var(--tk-btn-primary); --bs-btn-border-color: var(--tk-btn-primary); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--tk-btn-primary); --bs-btn-hover-bg: rgba(var(--tk-btn-primary-rgb), .15); --bs-btn-hover-border-color: var(--tk-btn-primary); --bs-btn-active-color: var(--tk-btn-primary); --bs-btn-active-bg: rgba(var(--tk-btn-primary-rgb), .25); --bs-btn-active-border-color: var(--tk-btn-primary); --bs-btn-focus-shadow-rgb: var(--tk-btn-primary-rgb); --bs-btn-disabled-color: var(--tk-btn-primary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-primary); --bs-gradient: none; } .btn-outline-secondary-tlb { --bs-btn-color: var(--tk-btn-secondary); --bs-btn-border-color: var(--tk-btn-secondary); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--tk-btn-secondary); --bs-btn-hover-bg: rgba(var(--tk-btn-secondary-rgb), .15); --bs-btn-hover-border-color: var(--tk-btn-secondary); --bs-btn-active-color: var(--tk-btn-secondary); --bs-btn-active-bg: rgba(var(--tk-btn-secondary-rgb), .25); --bs-btn-active-border-color: var(--tk-btn-secondary); --bs-btn-focus-shadow-rgb: var(--tk-btn-secondary-rgb); --bs-btn-disabled-color: var(--tk-btn-secondary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-secondary); --bs-gradient: none; } .btn-outline-success-tlb { --bs-btn-color: var(--tk-btn-success); --bs-btn-border-color: var(--tk-btn-success); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--tk-btn-success); --bs-btn-hover-bg: rgba(var(--tk-btn-success-rgb), .15); --bs-btn-hover-border-color: var(--tk-btn-success); --bs-btn-active-color: var(--tk-btn-success); --bs-btn-active-bg: rgba(var(--tk-btn-success-rgb), .25); --bs-btn-active-border-color: var(--tk-btn-success); --bs-btn-focus-shadow-rgb: var(--tk-btn-success-rgb); --bs-btn-disabled-color: var(--tk-btn-success); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-success); --bs-gradient: none; } .btn-outline-danger-tlb { --bs-btn-color: var(--tk-btn-danger); --bs-btn-border-color: var(--tk-btn-danger); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--tk-btn-danger); --bs-btn-hover-bg: rgba(var(--tk-btn-danger-rgb), .15); --bs-btn-hover-border-color: var(--tk-btn-danger); --bs-btn-active-color: var(--tk-btn-danger); --bs-btn-active-bg: rgba(var(--tk-btn-danger-rgb), .25); --bs-btn-active-border-color: var(--tk-btn-danger); --bs-btn-focus-shadow-rgb: var(--tk-btn-danger-rgb); --bs-btn-disabled-color: var(--tk-btn-danger); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-danger); --bs-gradient: none; } /* El amarillo puro no se lee sobre blanco cuando además hay tinte detrás: en hover/active el TEXTO se oscurece (mismo truco que KIKA). */ .btn-outline-warning-tlb { --bs-btn-color: var(--tk-btn-warning); --bs-btn-border-color: var(--tk-btn-warning); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--tk-btn-warning-dk); --bs-btn-hover-bg: rgba(var(--tk-btn-warning-rgb), .15); --bs-btn-hover-border-color: var(--tk-btn-warning); --bs-btn-active-color: var(--tk-btn-warning-dk); --bs-btn-active-bg: rgba(var(--tk-btn-warning-rgb), .25); --bs-btn-active-border-color: var(--tk-btn-warning); --bs-btn-focus-shadow-rgb: var(--tk-btn-warning-rgb); --bs-btn-disabled-color: var(--tk-btn-warning); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-warning); --bs-gradient: none; } .btn-outline-info-tlb { --bs-btn-color: var(--tk-btn-info); --bs-btn-border-color: var(--tk-btn-info); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--tk-btn-info); --bs-btn-hover-bg: rgba(var(--tk-btn-info-rgb), .15); --bs-btn-hover-border-color: var(--tk-btn-info); --bs-btn-active-color: var(--tk-btn-info); --bs-btn-active-bg: rgba(var(--tk-btn-info-rgb), .25); --bs-btn-active-border-color: var(--tk-btn-info); --bs-btn-focus-shadow-rgb: var(--tk-btn-info-rgb); --bs-btn-disabled-color: var(--tk-btn-info); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-info); --bs-gradient: none; } .btn-outline-dark-tlb { --bs-btn-color: var(--tk-btn-dark); --bs-btn-border-color: var(--tk-btn-dark); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--tk-btn-dark); --bs-btn-hover-bg: rgba(var(--tk-btn-dark-rgb), .15); --bs-btn-hover-border-color: var(--tk-btn-dark); --bs-btn-active-color: var(--tk-btn-dark); --bs-btn-active-bg: rgba(var(--tk-btn-dark-rgb), .25); --bs-btn-active-border-color: var(--tk-btn-dark); --bs-btn-focus-shadow-rgb: var(--tk-btn-dark-rgb); --bs-btn-disabled-color: var(--tk-btn-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-dark); --bs-gradient: none; } /* Light: texto gris (si no, no se lee) y borde gris claro propio. */ .btn-outline-light-tlb { --bs-btn-color: var(--tk-btn-secondary); --bs-btn-border-color: var(--tk-btn-light-line); --bs-btn-bg: transparent; --bs-btn-hover-color: #000; --bs-btn-hover-bg: rgba(var(--tk-btn-light-rgb), .5); --bs-btn-hover-border-color: var(--tk-btn-light-line); --bs-btn-active-color: #000; --bs-btn-active-bg: rgba(var(--tk-btn-light-rgb), .8); --bs-btn-active-border-color: var(--tk-btn-light-line); --bs-btn-focus-shadow-rgb: var(--tk-btn-light-rgb); --bs-btn-disabled-color: var(--tk-btn-secondary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-light-line); --bs-gradient: none; } .btn-outline-purple-tlb { --bs-btn-color: var(--tk-btn-purple); --bs-btn-border-color: var(--tk-btn-purple); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--tk-btn-purple); --bs-btn-hover-bg: rgba(var(--tk-btn-purple-rgb), .15); --bs-btn-hover-border-color: var(--tk-btn-purple); --bs-btn-active-color: var(--tk-btn-purple); --bs-btn-active-bg: rgba(var(--tk-btn-purple-rgb), .25); --bs-btn-active-border-color: var(--tk-btn-purple); --bs-btn-focus-shadow-rgb: var(--tk-btn-purple-rgb); --bs-btn-disabled-color: var(--tk-btn-purple); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--tk-btn-purple); --bs-gradient: none; } /* 🛑 KIKA NO define pink-tlb (son 19 variantes: 10 -ico + 9 -tlb). TIKO tampoco la inventa: si algún día hace falta, se agrega acá siguiendo el molde. */ /* ========================================================================= 3 · FORMA — el redondeo de TIKO también para esta familia tiko-admin.css ya redondea TODO .btn (22px) y .btn-sm (16px) y se carga DESPUÉS que este archivo, así que en la práctica manda él. Igual dejamos la regla explícita (especificidad 0,2,0) para que la familia se vea bien aunque alguien cambie el orden de carga o la use aislada. Los botones DENTRO de una fila del drawtable llevan `rounded-3` en el HTML, que gana por !important y les da el cuadradito redondeado del patrón KIKA. ========================================================================= */ .btn.btn-outline-primary-ico, .btn.btn-outline-secondary-ico, .btn.btn-outline-success-ico, .btn.btn-outline-danger-ico, .btn.btn-outline-warning-ico, .btn.btn-outline-info-ico, .btn.btn-outline-dark-ico, .btn.btn-outline-light-ico, .btn.btn-outline-purple-ico, .btn.btn-outline-pink-ico, .btn.btn-outline-primary-tlb, .btn.btn-outline-secondary-tlb, .btn.btn-outline-success-tlb, .btn.btn-outline-danger-tlb, .btn.btn-outline-warning-tlb, .btn.btn-outline-info-tlb, .btn.btn-outline-dark-tlb, .btn.btn-outline-light-tlb, .btn.btn-outline-purple-tlb { border-radius: var(--tk-r-btn, 22px); } .btn-sm.btn-outline-primary-ico, .btn-sm.btn-outline-secondary-ico, .btn-sm.btn-outline-success-ico, .btn-sm.btn-outline-danger-ico, .btn-sm.btn-outline-warning-ico, .btn-sm.btn-outline-info-ico, .btn-sm.btn-outline-dark-ico, .btn-sm.btn-outline-light-ico, .btn-sm.btn-outline-purple-ico, .btn-sm.btn-outline-pink-ico, .btn-sm.btn-outline-primary-tlb, .btn-sm.btn-outline-secondary-tlb, .btn-sm.btn-outline-success-tlb, .btn-sm.btn-outline-danger-tlb, .btn-sm.btn-outline-warning-tlb, .btn-sm.btn-outline-info-tlb, .btn-sm.btn-outline-dark-tlb, .btn-sm.btn-outline-light-tlb, .btn-sm.btn-outline-purple-tlb { border-radius: 16px; } /* ========================================================================= 4 · Utilitario que acompaña a la familia `fs-5-5` es el tamaño de ícono de los botones de FILA del drawtable. Viene de KIKA (lo referencia jquery.helper.ncg.js) pero Skote no lo trae, así que sin esta línea el ícono de la fila queda chico y desalineado. ========================================================================= */ .fs-5-5 { font-size: 1rem !important; } /* Grupo de botones (dropdown "Otras Opciones") con el redondeo de TIKO — equivalente al `grp-rounded-16` que usan las toolbars de KIKA. */ .grp-rounded-16 > .btn:first-child { border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .grp-rounded-16 > .btn:last-child { border-top-right-radius: 16px; border-bottom-right-radius: 16px; } .btn-group.gap-3 > .btn { border-radius: var(--tk-r-btn, 22px) !important; }