/* ========================================================================== Tecmax UI — capa de modernizacion sobre AdminLTE 2 / Bootstrap 3 -------------------------------------------------------------------------- Se carga DESPUES de app.css y solo sobrescribe. No se modifica ningun archivo de AdminLTE: quitando el del layout el sistema vuelve exactamente al aspecto anterior. No se aplica en la pantalla de Punto de Venta. Modo oscuro: html[data-tec-theme="dark"] ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens de diseno -------------------------------------------------------------------------- */ :root { /* AZUL CORPORATIVO — cambia estos dos valores si tu manual de marca define otro hex. Todo lo demas se deriva de aqui. */ --tec-primary: #1B5FA8; --tec-navy: #0E2A4F; --tec-primary-hover: #17518F; --tec-primary-soft: rgba(27, 95, 168, 0.10); --tec-primary-ring: rgba(27, 95, 168, 0.25); --tec-bg: #F5F7FA; --tec-surface: #FFFFFF; --tec-surface-alt: #FAFBFC; --tec-row-hover: rgba(27, 95, 168, .055); --tec-row-hover-solid: #EDF3FB; --tec-row-stripe: rgba(16, 24, 40, .018); --tec-border: #E3E8EF; --tec-border-strong: #D0D7E2; --tec-text: #1C2A3A; --tec-text-soft: #475467; --tec-muted: #667085; --tec-success: #12805C; --tec-success-bg: #E6F6F0; --tec-warning: #B54708; --tec-warning-bg: #FEF3E6; --tec-danger: #B42318; --tec-danger-bg: #FEECEB; --tec-info: #175CD3; --tec-info-bg: #EFF6FF; --tec-radius: 12px; --tec-radius-sm: 8px; --tec-radius-xs: 6px; --tec-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --tec-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --tec-shadow-md: 0 4px 12px rgba(16, 24, 40, .08); --tec-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12); /* CARCASA (barra lateral + cabecera). Gris carbon neutro: hace que el azul corporativo destaque en los elementos activos y en los botones en lugar de competir con ellos. Para volver a un lateral azul basta con poner aqui var(--tec-navy). */ --tec-shell-bg: #141A26; --tec-shell-bg-soft: #1A2130; --tec-shell-text: #96A0B2; --tec-shell-text-strong: #F2F5F9; --tec-shell-hover: rgba(255, 255, 255, .06); --tec-shell-active: rgba(255, 255, 255, .10); --tec-shell-border: rgba(255, 255, 255, .06); --tec-sidebar-bg: var(--tec-shell-bg); --tec-sidebar-text: var(--tec-shell-text); --tec-sidebar-hover: var(--tec-shell-hover); --tec-sidebar-active: var(--tec-shell-active); --tec-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } html[data-tec-theme="dark"] { --tec-bg: #0F172A; --tec-surface: #1B2537; --tec-surface-alt: #161F30; --tec-row-hover: rgba(255, 255, 255, .045); --tec-row-hover-solid: #223047; --tec-row-stripe: rgba(255, 255, 255, .022); --tec-border: #2A3850; --tec-border-strong: #35455F; --tec-text: #E6EDF6; --tec-text-soft: #B6C2D4; --tec-muted: #8A9AB2; --tec-primary: #4F94E0; --tec-primary-hover: #6BA6E8; --tec-primary-soft: rgba(79, 148, 224, 0.14); --tec-primary-ring: rgba(79, 148, 224, 0.30); --tec-success: #4ADE9B; --tec-success-bg: rgba(74, 222, 155, .12); --tec-warning: #F6B26B; --tec-warning-bg: rgba(246, 178, 107, .12); --tec-danger: #F98A80; --tec-danger-bg: rgba(249, 138, 128, .12); --tec-info: #7AB0F5; --tec-info-bg: rgba(122, 176, 245, .12); --tec-shell-bg: #0B0F18; --tec-shell-bg-soft: #121826; --tec-shell-text: #8794A8; --tec-shell-text-strong: #E6EDF6; --tec-shell-hover: rgba(255, 255, 255, .05); --tec-shell-active: rgba(255, 255, 255, .09); --tec-shell-border: rgba(255, 255, 255, .05); --tec-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --tec-shadow: 0 1px 3px rgba(0, 0, 0, .35); --tec-shadow-md: 0 4px 12px rgba(0, 0, 0, .4); --tec-shadow-lg: 0 12px 32px rgba(0, 0, 0, .5); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ body.tec-ui, body.tec-ui .content-wrapper, body.tec-ui .right-side { background-color: var(--tec-bg) !important; color: var(--tec-text); font-family: var(--tec-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.tec-ui { font-size: 14px; line-height: 1.55; } body.tec-ui h1, body.tec-ui h2, body.tec-ui h3, body.tec-ui h4, body.tec-ui h5 { font-family: var(--tec-font); font-weight: 600; letter-spacing: -0.01em; color: var(--tec-text); } body.tec-ui a { color: var(--tec-primary); } body.tec-ui a:hover, body.tec-ui a:focus { color: var(--tec-primary-hover); } body.tec-ui .text-muted, body.tec-ui .help-block, body.tec-ui small.text-muted { color: var(--tec-muted) !important; } /* Barras de desplazamiento discretas */ body.tec-ui ::-webkit-scrollbar { width: 10px; height: 10px; } body.tec-ui ::-webkit-scrollbar-track { background: transparent; } body.tec-ui ::-webkit-scrollbar-thumb { background: var(--tec-border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } body.tec-ui ::-webkit-scrollbar-thumb:hover { background: var(--tec-muted); background-clip: content-box; } /* -------------------------------------------------------------------------- 3. Cabecera -------------------------------------------------------------------------- */ html body.tec-ui .main-header .navbar, html body.tec-ui .main-header .logo { background-color: var(--tec-shell-bg) !important; border: 0 !important; box-shadow: none; transition: background-color .2s ease; } /* Separacion sutil entre el logo y el resto de la cabecera */ html body.tec-ui .main-header .logo { border-right: 1px solid var(--tec-shell-border) !important; color: var(--tec-shell-text-strong) !important; } body.tec-ui .main-header { box-shadow: var(--tec-shadow-sm); position: relative; z-index: 1030; } body.tec-ui .main-header .logo { font-family: var(--tec-font); font-weight: 600; letter-spacing: -0.01em; font-size: 17px; } html body.tec-ui .main-header .logo:hover { background-color: var(--tec-shell-bg) !important; } body.tec-ui .main-header .navbar .nav > li > a { color: #D6E1F0; font-weight: 500; transition: background-color .15s ease, color .15s ease; } body.tec-ui .main-header .navbar .nav > li > a:hover, body.tec-ui .main-header .navbar .nav > li > a:focus, body.tec-ui .main-header .navbar .nav .open > a { background-color: rgba(255, 255, 255, .10) !important; color: #FFFFFF; } body.tec-ui .main-header .sidebar-toggle:hover { background-color: rgba(255, 255, 255, .10) !important; } /* Botones de accion del navbar (Opciones, Calculadora, Punto de venta...) */ body.tec-ui .main-header .navbar .btn { border-radius: var(--tec-radius-sm); font-weight: 500; border: 1px solid rgba(255, 255, 255, .18); background-color: rgba(255, 255, 255, .10); color: #FFFFFF; box-shadow: none; transition: background-color .15s ease, transform .1s ease; } body.tec-ui .main-header .navbar .btn:hover { background-color: rgba(255, 255, 255, .18); color: #FFFFFF; } body.tec-ui .main-header .navbar .btn:active { transform: translateY(1px); } /* Conmutador de tema (se inyecta con theme.js) */ body.tec-ui .tec-theme-toggle > a { font-size: 15px; } /* -------------------------------------------------------------------------- 4. Barra lateral -------------------------------------------------------------------------- */ html body.tec-ui .main-sidebar, html body.tec-ui .left-side, html body.tec-ui .wrapper, html body.tec-ui .sidebar { background-color: var(--tec-shell-bg) !important; } html body.tec-ui .sidebar { padding-top: 10px; } /* La personalizacion anterior dibujaba lineas divisorias claras entre cada opcion. Se eliminan: son el detalle que mas envejece el menu. */ html body.tec-ui .sidebar-menu > li, html body.tec-ui .sidebar-menu > li > a, html body.tec-ui .sidebar-menu .treeview-menu > li, html body.tec-ui .sidebar-menu .treeview-menu > li > a { border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; border-left: 0 !important; box-shadow: none; } html body.tec-ui .sidebar-menu > li > a { position: relative; background-color: transparent !important; color: var(--tec-shell-text) !important; font-weight: 500; font-size: 13.5px; letter-spacing: .005em; padding: 10px 14px; margin: 1px 10px; border-radius: 10px; transition: background-color .15s ease, color .15s ease; } html body.tec-ui .sidebar-menu > li > a > i, html body.tec-ui .sidebar-menu > li > a > .fa, html body.tec-ui .sidebar-menu > li > a > .fas { width: 22px; font-size: 14.5px; opacity: .7; transition: opacity .15s ease, color .15s ease; } html body.tec-ui .sidebar-menu > li:hover > a, html body.tec-ui .sidebar-menu > li.menu-open > a { background-color: var(--tec-shell-hover) !important; color: var(--tec-shell-text-strong) !important; } html body.tec-ui .sidebar-menu > li:hover > a > i { opacity: 1; } /* Elemento activo: fondo suave, texto blanco y barra de acento a la izquierda */ html body.tec-ui .sidebar-menu > li.active > a { background-color: var(--tec-shell-active) !important; color: #FFFFFF !important; font-weight: 600; } html body.tec-ui .sidebar-menu > li.active > a > i { opacity: 1; color: var(--tec-primary); } html body.tec-ui .sidebar-menu > li.active > a::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--tec-primary); } /* Flecha de los desplegables */ html body.tec-ui .sidebar-menu > li > a > .pull-right-container > .fa-angle-left, html body.tec-ui .sidebar-menu > li > a > .pull-right-container > .fa-angle-down { font-size: 12px; opacity: .55; } /* Submenus */ html body.tec-ui .sidebar-menu .treeview-menu { background-color: rgba(0, 0, 0, .22) !important; border-radius: 10px; margin: 2px 10px 6px; padding: 5px 0; } html body.tec-ui .sidebar-menu .treeview-menu > li > a { color: var(--tec-shell-text) !important; background-color: transparent !important; font-size: 13px; font-weight: 450; padding: 7px 12px 7px 32px; border-radius: 7px; margin: 1px 6px; } html body.tec-ui .sidebar-menu .treeview-menu > li > a:hover { color: var(--tec-shell-text-strong) !important; background-color: rgba(255, 255, 255, .07) !important; } html body.tec-ui .sidebar-menu .treeview-menu > li.active > a { color: #FFFFFF !important; background-color: rgba(255, 255, 255, .09) !important; font-weight: 550; } /* Encabezados de seccion del menu */ html body.tec-ui .sidebar-menu > li.header { background: transparent !important; color: rgba(255, 255, 255, .32) !important; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 18px 24px 8px; } html body.tec-ui .sidebar-form, html body.tec-ui .user-panel { border-color: var(--tec-shell-border) !important; background: transparent !important; } html body.tec-ui .user-panel > .info, html body.tec-ui .user-panel > .info > p { color: var(--tec-shell-text-strong) !important; } /* Barra de desplazamiento del menu, discreta sobre fondo oscuro */ html body.tec-ui .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); } html body.tec-ui .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); } /* -------------------------------------------------------------------------- 5. Encabezado de contenido -------------------------------------------------------------------------- */ body.tec-ui .content-header { padding: 24px 22px 10px; background: transparent; } body.tec-ui .content-header > h1 { font-size: 24px; font-weight: 650; margin: 0; color: var(--tec-text); } body.tec-ui .content-header > h1 > small { display: block; margin-top: 6px; font-size: 14px; color: var(--tec-muted); font-weight: 400; } body.tec-ui .content { padding: 8px 22px 26px; } body.tec-ui .breadcrumb { background: transparent; padding: 0; font-size: 13px; } /* -------------------------------------------------------------------------- 6. Cajas / tarjetas -------------------------------------------------------------------------- */ body.tec-ui .box { background: var(--tec-surface); border: 1px solid var(--tec-border); border-top: 1px solid var(--tec-border) !important; border-radius: var(--tec-radius); box-shadow: var(--tec-shadow); margin-bottom: 22px; transition: box-shadow .2s ease; } body.tec-ui .box:hover { box-shadow: var(--tec-shadow-md); } body.tec-ui .box.box-solid, body.tec-ui .box.box-primary, body.tec-ui .box.box-info, body.tec-ui .box.box-success, body.tec-ui .box.box-warning, body.tec-ui .box.box-danger, body.tec-ui .box.box-default { background: var(--tec-surface); border-color: var(--tec-border); } body.tec-ui .box > .box-header, body.tec-ui .box.box-solid > .box-header { background: transparent !important; color: var(--tec-text) !important; border-bottom: 1px solid var(--tec-border); border-radius: var(--tec-radius) var(--tec-radius) 0 0; padding: 16px 20px; } body.tec-ui .box > .box-header .box-title { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; } body.tec-ui .box > .box-body { padding: 20px; color: var(--tec-text); } body.tec-ui .box > .box-footer { background: var(--tec-surface-alt); border-top: 1px solid var(--tec-border); border-radius: 0 0 var(--tec-radius) var(--tec-radius); padding: 14px 20px; } body.tec-ui .box-header > .box-tools .btn-box-tool { color: var(--tec-muted); } /* -------------------------------------------------------------------------- 7. Tarjetas de indicador (info-box / small-box) -------------------------------------------------------------------------- */ body.tec-ui .info-box, body.tec-ui .small-box { background: var(--tec-surface) !important; border: 1px solid var(--tec-border); border-radius: var(--tec-radius); box-shadow: var(--tec-shadow); min-height: 96px; overflow: hidden; transition: transform .15s ease, box-shadow .2s ease; } body.tec-ui .info-box:hover, body.tec-ui .small-box:hover { transform: translateY(-2px); box-shadow: var(--tec-shadow-md); } body.tec-ui .info-box .info-box-icon { width: 68px; height: 96px; line-height: 96px; font-size: 26px; border-radius: 0; background: var(--tec-primary-soft) !important; color: var(--tec-primary) !important; } /* Los colores utilitarios de AdminLTE se reinterpretan como iconos suaves */ body.tec-ui .info-box .info-box-icon.bg-green { background: var(--tec-success-bg) !important; color: var(--tec-success) !important; } body.tec-ui .info-box .info-box-icon.bg-aqua, body.tec-ui .info-box .info-box-icon.bg-blue { background: var(--tec-info-bg) !important; color: var(--tec-info) !important; } body.tec-ui .info-box .info-box-icon.bg-yellow, body.tec-ui .info-box .info-box-icon.bg-orange { background: var(--tec-warning-bg) !important; color: var(--tec-warning) !important; } body.tec-ui .info-box .info-box-icon.bg-red { background: var(--tec-danger-bg) !important; color: var(--tec-danger) !important; } body.tec-ui .info-box .info-box-icon.bg-purple, body.tec-ui .info-box .info-box-icon.bg-gray { background: var(--tec-primary-soft) !important; color: var(--tec-primary) !important; } body.tec-ui .info-box-content { padding: 18px 16px; margin-left: 68px; } body.tec-ui .info-box-text { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tec-muted); } body.tec-ui .info-box-number { font-size: 25px; font-weight: 650; letter-spacing: -0.02em; color: var(--tec-text); margin-top: 2px; } body.tec-ui .small-box > .inner { padding: 20px; } body.tec-ui .small-box h3 { font-size: 28px; font-weight: 650; color: var(--tec-text); } body.tec-ui .small-box p { color: var(--tec-muted); font-size: 13px; } body.tec-ui .small-box .icon { color: var(--tec-primary); opacity: .16; font-size: 66px; top: 14px; right: 16px; } body.tec-ui .small-box .small-box-footer { background: var(--tec-surface-alt); color: var(--tec-primary); border-top: 1px solid var(--tec-border); font-size: 13px; font-weight: 500; } /* Neutraliza los fondos planos de colores en tarjetas del dashboard */ body.tec-ui .small-box.bg-aqua, body.tec-ui .small-box.bg-green, body.tec-ui .small-box.bg-yellow, body.tec-ui .small-box.bg-red, body.tec-ui .small-box.bg-blue, body.tec-ui .small-box.bg-purple { background: var(--tec-surface) !important; color: var(--tec-text) !important; } body.tec-ui .small-box.bg-aqua h3, body.tec-ui .small-box.bg-aqua p, body.tec-ui .small-box.bg-green h3, body.tec-ui .small-box.bg-green p, body.tec-ui .small-box.bg-yellow h3, body.tec-ui .small-box.bg-yellow p, body.tec-ui .small-box.bg-red h3, body.tec-ui .small-box.bg-red p, body.tec-ui .small-box.bg-blue h3, body.tec-ui .small-box.bg-blue p, body.tec-ui .small-box.bg-purple h3, body.tec-ui .small-box.bg-purple p { color: var(--tec-text) !important; } body.tec-ui .small-box.bg-green .icon { color: var(--tec-success); } body.tec-ui .small-box.bg-red .icon { color: var(--tec-danger); } body.tec-ui .small-box.bg-yellow .icon { color: var(--tec-warning); } /* -------------------------------------------------------------------------- 8. Botones -------------------------------------------------------------------------- */ body.tec-ui .btn { border-radius: var(--tec-radius-sm); font-weight: 500; font-size: 14px; padding: 8px 16px; border-width: 1px; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease; } body.tec-ui .btn:active { transform: translateY(1px); box-shadow: none; } body.tec-ui .btn:focus, body.tec-ui .btn:active:focus { outline: 0; box-shadow: 0 0 0 3px var(--tec-primary-ring); } body.tec-ui .btn-primary { background-color: var(--tec-primary); border-color: var(--tec-primary); color: #FFFFFF; } body.tec-ui .btn-primary:hover, body.tec-ui .btn-primary:focus { background-color: var(--tec-primary-hover); border-color: var(--tec-primary-hover); } body.tec-ui .btn-default { background-color: var(--tec-surface); border-color: var(--tec-border-strong); color: var(--tec-text-soft); } body.tec-ui .btn-default:hover, body.tec-ui .btn-default:focus { background-color: var(--tec-surface-alt); border-color: var(--tec-muted); color: var(--tec-text); } body.tec-ui .btn-success { background-color: var(--tec-success); border-color: var(--tec-success); } body.tec-ui .btn-danger { background-color: var(--tec-danger); border-color: var(--tec-danger); } body.tec-ui .btn-warning { background-color: var(--tec-warning); border-color: var(--tec-warning); color: #FFF; } body.tec-ui .btn-info { background-color: var(--tec-info); border-color: var(--tec-info); } body.tec-ui .btn-success:hover, body.tec-ui .btn-danger:hover, body.tec-ui .btn-warning:hover, body.tec-ui .btn-info:hover { filter: brightness(1.08); color: #FFFFFF; } body.tec-ui .btn-xs { padding: 4px 10px; font-size: 12px; border-radius: var(--tec-radius-xs); } body.tec-ui .btn-sm { padding: 6px 12px; font-size: 13px; } body.tec-ui .btn-lg { padding: 12px 22px; font-size: 16px; } body.tec-ui .btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; } /* -------------------------------------------------------------------------- 9. Formularios -------------------------------------------------------------------------- */ body.tec-ui .form-control, body.tec-ui .input-group-addon, body.tec-ui .select2-container--default .select2-selection--single, body.tec-ui .select2-container--default .select2-selection--multiple { background-color: var(--tec-surface); border: 1px solid var(--tec-border-strong); border-radius: var(--tec-radius-sm); color: var(--tec-text); box-shadow: none; height: auto; min-height: 38px; padding: 8px 12px; font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease; } body.tec-ui .form-control:focus, body.tec-ui .select2-container--default.select2-container--focus .select2-selection--single, body.tec-ui .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--tec-primary); box-shadow: 0 0 0 3px var(--tec-primary-ring); outline: 0; } body.tec-ui .form-control::placeholder { color: var(--tec-muted); } body.tec-ui .form-control[disabled], body.tec-ui .form-control[readonly] { background-color: var(--tec-surface-alt); color: var(--tec-muted); } body.tec-ui .input-group-addon { background-color: var(--tec-surface-alt); color: var(--tec-muted); } body.tec-ui label, body.tec-ui .control-label { font-weight: 550; font-size: 13.5px; color: var(--tec-text-soft); margin-bottom: 6px; } body.tec-ui .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 22px; color: var(--tec-text); padding-left: 0; } body.tec-ui .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; right: 8px; } body.tec-ui .select2-dropdown { background: var(--tec-surface); border-color: var(--tec-border-strong); border-radius: var(--tec-radius-sm); box-shadow: var(--tec-shadow-lg); } body.tec-ui .select2-container--default .select2-results__option { color: var(--tec-text); padding: 8px 12px; } body.tec-ui .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--tec-primary); color: #FFFFFF; } body.tec-ui .select2-search--dropdown .select2-search__field { background: var(--tec-surface); color: var(--tec-text); border-color: var(--tec-border-strong); border-radius: var(--tec-radius-xs); } /* -------------------------------------------------------------------------- 10. Tablas -------------------------------------------------------------------------- */ body.tec-ui .table { color: var(--tec-text); border-color: var(--tec-border); } body.tec-ui .table > thead > tr > th { background: var(--tec-surface-alt); border-bottom: 1px solid var(--tec-border) !important; border-top: 0; color: var(--tec-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 12px 14px; white-space: nowrap; } body.tec-ui .table > tbody > tr > td { border-top: 1px solid var(--tec-border); padding: 12px 14px; vertical-align: middle; } body.tec-ui .table > tbody > tr:hover > td { background-color: var(--tec-primary-soft); } body.tec-ui .table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; } body.tec-ui .table-bordered, body.tec-ui .table-bordered > thead > tr > th, body.tec-ui .table-bordered > tbody > tr > td { border-color: var(--tec-border); } /* Sin `overflow: hidden`: recortaba los menus desplegables de la columna Acciones. El redondeado se resuelve en las celdas de las esquinas. */ body.tec-ui .table-bordered { border-radius: var(--tec-radius-sm); border-collapse: separate; border-spacing: 0; } /* DataTables */ body.tec-ui .dataTables_wrapper .dataTables_filter input, body.tec-ui .dataTables_wrapper .dataTables_length select { border: 1px solid var(--tec-border-strong); border-radius: var(--tec-radius-sm); background: var(--tec-surface); color: var(--tec-text); padding: 6px 10px; } body.tec-ui .dataTables_wrapper .dataTables_info, body.tec-ui .dataTables_wrapper .dataTables_length, body.tec-ui .dataTables_wrapper .dataTables_filter { color: var(--tec-muted); font-size: 13px; } body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--tec-radius-xs) !important; border: 1px solid transparent !important; background: transparent !important; color: var(--tec-text-soft) !important; padding: 6px 12px; margin: 0 2px; } body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--tec-primary-soft) !important; color: var(--tec-primary) !important; border-color: transparent !important; } body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current, body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--tec-primary) !important; border-color: var(--tec-primary) !important; color: #FFFFFF !important; } body.tec-ui .pagination > li > a, body.tec-ui .pagination > li > span { border-color: var(--tec-border); background: var(--tec-surface); color: var(--tec-text-soft); } body.tec-ui .pagination > .active > a, body.tec-ui .pagination > .active > span { background: var(--tec-primary); border-color: var(--tec-primary); } /* -------------------------------------------------------------------------- 11. Pestanas -------------------------------------------------------------------------- */ body.tec-ui .nav-tabs { border-bottom: 1px solid var(--tec-border); } body.tec-ui .nav-tabs > li > a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--tec-muted); font-weight: 550; padding: 11px 16px; margin-right: 4px; background: transparent; transition: color .15s ease, border-color .15s ease; } body.tec-ui .nav-tabs > li > a:hover { background: transparent; color: var(--tec-text); border-bottom-color: var(--tec-border-strong); } body.tec-ui .nav-tabs > li.active > a, body.tec-ui .nav-tabs > li.active > a:hover, body.tec-ui .nav-tabs > li.active > a:focus { background: transparent; border: 0; border-bottom: 2px solid var(--tec-primary); color: var(--tec-primary); } body.tec-ui .nav-tabs-custom { background: var(--tec-surface); border-radius: var(--tec-radius); box-shadow: var(--tec-shadow); border: 1px solid var(--tec-border); } body.tec-ui .nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--tec-primary); } /* -------------------------------------------------------------------------- 12. Modales -------------------------------------------------------------------------- */ body.tec-ui .modal-content { background: var(--tec-surface); border: 1px solid var(--tec-border); border-radius: var(--tec-radius); box-shadow: var(--tec-shadow-lg); } body.tec-ui .modal-header { border-bottom: 1px solid var(--tec-border); padding: 18px 22px; } body.tec-ui .modal-header .modal-title { font-size: 17px; font-weight: 600; } body.tec-ui .modal-body { padding: 22px; } body.tec-ui .modal-footer { border-top: 1px solid var(--tec-border); background: var(--tec-surface-alt); border-radius: 0 0 var(--tec-radius) var(--tec-radius); padding: 14px 22px; } body.tec-ui .modal-backdrop.in { opacity: .45; } /* -------------------------------------------------------------------------- 13. Etiquetas, alertas y avisos -------------------------------------------------------------------------- */ body.tec-ui .label, body.tec-ui .badge { border-radius: 999px; font-weight: 600; font-size: 11.5px; letter-spacing: .02em; padding: 4px 10px; display: inline-block; } body.tec-ui .label.bg-green, body.tec-ui .label-success { background: var(--tec-success-bg) !important; color: var(--tec-success) !important; } body.tec-ui .label.bg-red, body.tec-ui .label-danger { background: var(--tec-danger-bg) !important; color: var(--tec-danger) !important; } body.tec-ui .label.bg-yellow, body.tec-ui .label-warning { background: var(--tec-warning-bg) !important; color: var(--tec-warning) !important; } body.tec-ui .label.bg-blue, body.tec-ui .label-info, body.tec-ui .label-primary { background: var(--tec-info-bg) !important; color: var(--tec-info) !important; } body.tec-ui .label.bg-gray, body.tec-ui .label-default { background: var(--tec-border) !important; color: var(--tec-text-soft) !important; } body.tec-ui .badge { background: var(--tec-primary); color: #FFF; } body.tec-ui .alert { border-radius: var(--tec-radius-sm); border: 1px solid transparent; padding: 14px 18px; box-shadow: none; } body.tec-ui .alert-success { background: var(--tec-success-bg); border-color: var(--tec-success); color: var(--tec-success); } body.tec-ui .alert-danger { background: var(--tec-danger-bg); border-color: var(--tec-danger); color: var(--tec-danger); } body.tec-ui .alert-warning { background: var(--tec-warning-bg); border-color: var(--tec-warning); color: var(--tec-warning); } body.tec-ui .alert-info { background: var(--tec-info-bg); border-color: var(--tec-info); color: var(--tec-info); } body.tec-ui .callout { border-radius: var(--tec-radius-sm); border-left-width: 4px; box-shadow: none; } body.tec-ui .callout.callout-info { background: var(--tec-info-bg) !important; border-color: var(--tec-info) !important; color: var(--tec-info) !important; } /* -------------------------------------------------------------------------- 14. Menus desplegables -------------------------------------------------------------------------- */ body.tec-ui .dropdown-menu { background: var(--tec-surface); border: 1px solid var(--tec-border); border-radius: var(--tec-radius-sm); box-shadow: var(--tec-shadow-lg); padding: 6px; margin-top: 6px; } body.tec-ui .dropdown-menu > li > a { color: var(--tec-text); border-radius: var(--tec-radius-xs); padding: 8px 12px; font-size: 13.5px; } body.tec-ui .dropdown-menu > li > a:hover, body.tec-ui .dropdown-menu > li > a:focus { background: var(--tec-primary-soft); color: var(--tec-primary); } body.tec-ui .dropdown-menu .divider { background-color: var(--tec-border); margin: 6px 0; } /* Panel de usuario del navbar */ body.tec-ui .user-menu .user-header { background: var(--tec-navy) !important; border-radius: var(--tec-radius-sm) var(--tec-radius-sm) 0 0; } body.tec-ui .user-menu .user-footer { background: var(--tec-surface-alt); border-radius: 0 0 var(--tec-radius-sm) var(--tec-radius-sm); } /* -------------------------------------------------------------------------- 15. Notificaciones toastr -------------------------------------------------------------------------- */ body.tec-ui #toast-container > div { border-radius: var(--tec-radius-sm); box-shadow: var(--tec-shadow-lg); opacity: 1; padding: 16px 16px 16px 52px; font-size: 14px; } /* -------------------------------------------------------------------------- 16. Modo oscuro: piezas que no heredan variables -------------------------------------------------------------------------- */ html[data-tec-theme="dark"] body.tec-ui .box, html[data-tec-theme="dark"] body.tec-ui .info-box, html[data-tec-theme="dark"] body.tec-ui .small-box, html[data-tec-theme="dark"] body.tec-ui .modal-content, html[data-tec-theme="dark"] body.tec-ui .dropdown-menu { background-color: var(--tec-surface) !important; } html[data-tec-theme="dark"] body.tec-ui .box .box-body, html[data-tec-theme="dark"] body.tec-ui .table, html[data-tec-theme="dark"] body.tec-ui .table > tbody > tr > td { color: var(--tec-text); background-color: transparent; } html[data-tec-theme="dark"] body.tec-ui .table > thead > tr > th { background: rgba(255, 255, 255, .03); } html[data-tec-theme="dark"] body.tec-ui .bg-white, html[data-tec-theme="dark"] body.tec-ui .well { background-color: var(--tec-surface) !important; color: var(--tec-text); border-color: var(--tec-border); } html[data-tec-theme="dark"] body.tec-ui .text-black, html[data-tec-theme="dark"] body.tec-ui .text-dark { color: var(--tec-text) !important; } html[data-tec-theme="dark"] body.tec-ui hr { border-color: var(--tec-border); } /* Las graficas y los recibos se imprimen y se leen mejor sobre blanco */ html[data-tec-theme="dark"] body.tec-ui .print_section, html[data-tec-theme="dark"] body.tec-ui .invoice { background: #FFFFFF !important; color: #000000 !important; } /* -------------------------------------------------------------------------- 17. Impresion -------------------------------------------------------------------------- */ @media print { body.tec-ui, body.tec-ui .content-wrapper { background: #FFFFFF !important; color: #000000 !important; } body.tec-ui .box { box-shadow: none !important; border: 1px solid #DDD !important; } } /* -------------------------------------------------------------------------- 18. Ajustes responsive -------------------------------------------------------------------------- */ @media (max-width: 767px) { body.tec-ui .content-header { padding: 18px 14px 8px; } body.tec-ui .content { padding: 6px 14px 20px; } body.tec-ui .content-header > h1 { font-size: 20px; } body.tec-ui .box > .box-body { padding: 16px; } body.tec-ui .info-box-number { font-size: 22px; } } /* -------------------------------------------------------------------------- 19. Neutralizacion de la personalizacion heredada -------------------------------------------------------------------------- La instalacion traia CSS propio (guardado en system.additional_css) que pintaba el area de contenido de azul oscuro y las cajas de verde menta. Esta seccion lo desactiva. Si en el futuro se limpia ese campo desde Configuracion, estas reglas simplemente dejan de hacer falta. -------------------------------------------------------------------------- */ html body.tec-ui, html body.tec-ui .content-wrapper, html body.tec-ui .right-side, html body.tec-ui .content-wrapper > .content, html body.tec-ui .content-header { background-color: var(--tec-bg) !important; background-image: none !important; color: var(--tec-text) !important; } html body.tec-ui .content-header > h1, html body.tec-ui .content-header > h1 > small { color: var(--tec-text) !important; } html body.tec-ui .content-header > h1 > small { color: var(--tec-muted) !important; } /* Cajas: siempre superficie neutra, sin importar la clase de color heredada */ html body.tec-ui .box, html body.tec-ui .box.box-solid, html body.tec-ui .box.box-primary, html body.tec-ui .box.box-info, html body.tec-ui .box.box-success, html body.tec-ui .box.box-warning, html body.tec-ui .box.box-danger, html body.tec-ui .box.box-default, html body.tec-ui .box > .box-header, html body.tec-ui .box.box-solid > .box-header, html body.tec-ui .box > .box-body { background-color: var(--tec-surface) !important; background-image: none !important; color: var(--tec-text) !important; } html body.tec-ui .box > .box-header, html body.tec-ui .box.box-solid > .box-header { border-bottom: 1px solid var(--tec-border) !important; } html body.tec-ui .box > .box-header .box-title { color: var(--tec-text) !important; } html body.tec-ui .box > .box-footer { background-color: var(--tec-surface-alt) !important; color: var(--tec-text-soft) !important; } /* Tarjetas del panel de inicio (clase propia de esta instalacion) */ html body.tec-ui .info-box, html body.tec-ui .info-box-new-style { background-color: var(--tec-surface) !important; background-image: none !important; border: 1px solid var(--tec-border) !important; border-radius: var(--tec-radius) !important; color: var(--tec-text) !important; box-shadow: var(--tec-shadow) !important; } html body.tec-ui .info-box .info-box-text { color: var(--tec-muted) !important; } html body.tec-ui .info-box .info-box-number { color: var(--tec-text) !important; } /* Selector de periodo del panel de inicio (Hoy / Esta semana / ...). En el tema heredado quedaba azul sobre azul y no se leia. */ html body.tec-ui .btn-group > .btn.btn-info, html body.tec-ui .btn-group > .btn-default { background-color: var(--tec-surface) !important; border-color: var(--tec-border-strong) !important; color: var(--tec-text-soft) !important; background-image: none !important; } html body.tec-ui .btn-group > .btn.btn-info.active, html body.tec-ui .btn-group > .btn-default.active, html body.tec-ui .btn-group > .btn.active { background-color: var(--tec-primary) !important; border-color: var(--tec-primary) !important; color: #FFFFFF !important; } html body.tec-ui .btn-group > .btn.btn-info:hover, html body.tec-ui .btn-group > .btn-default:hover { background-color: var(--tec-primary-soft) !important; color: var(--tec-primary) !important; } /* Cualquier fondo plano de color heredado dentro del area de contenido */ html body.tec-ui .content-wrapper .bg-navy, html body.tec-ui .content-wrapper .bg-teal, html body.tec-ui .content-wrapper .bg-light-blue, html body.tec-ui .content-wrapper .bg-blue { background-color: var(--tec-surface) !important; color: var(--tec-text) !important; } /* -------------------------------------------------------------------------- 20. Clases propias de esta instalacion -------------------------------------------------------------------------- La personalizacion anterior pintaba estas zonas de azul oscuro con el texto en blanco. Al devolverles fondo claro hay que devolver tambien el color del texto, o queda blanco sobre blanco. -------------------------------------------------------------------------- */ html body.tec-ui .content-header-custom, html body.tec-ui .content-header.content-header-custom { background-color: transparent !important; background-image: none !important; color: var(--tec-text) !important; padding: 24px 22px 10px !important; border: 0 !important; } html body.tec-ui .content-header-custom h1, html body.tec-ui .content-header-custom h2, html body.tec-ui .content-header-custom h3, html body.tec-ui .content-header-custom span, html body.tec-ui .content-header-custom a, html body.tec-ui .content-header.content-header-custom > h1 { color: var(--tec-text) !important; } html body.tec-ui .content-header-custom small, html body.tec-ui .content-header.content-header-custom > h1 > small { color: var(--tec-muted) !important; } /* Red de seguridad: cualquier texto forzado a blanco dentro del area de contenido queda ilegible ahora que el fondo es claro. */ html body.tec-ui .content-wrapper .text-white, html body.tec-ui .content-wrapper [style*="color: #fff"], html body.tec-ui .content-wrapper [style*="color:#fff"], html body.tec-ui .content-wrapper [style*="color: #FFF"], html body.tec-ui .content-wrapper [style*="color:#FFF"] { color: var(--tec-text) !important; } /* ...salvo cuando va sobre un fondo de color solido intencional */ html body.tec-ui .content-wrapper .btn .text-white, html body.tec-ui .content-wrapper .label .text-white, html body.tec-ui .content-wrapper .bg-primary .text-white { color: #FFFFFF !important; } html body.tec-ui .info-box-new-style .info-box-text, html body.tec-ui .info-box-new-style .info-box-number, html body.tec-ui .info-box-new-style span, html body.tec-ui .info-box-new-style div { color: inherit; } html body.tec-ui .info-box-new-style .info-box-text { color: var(--tec-muted) !important; } html body.tec-ui .info-box-new-style .info-box-number { color: var(--tec-text) !important; } /* -------------------------------------------------------------------------- 21. Tablas: superficie unificada en modo claro y oscuro -------------------------------------------------------------------------- DataTables trae su propia hoja de estilos que pinta las filas de blanco con selectores como table.dataTable tbody tr. Aqui se neutraliza esa capa para que toda tabla del sistema herede la superficie del tema: tanto la version simple de Bootstrap como las de DataTables, incluidas las de encabezado fijo y desplazamiento horizontal. -------------------------------------------------------------------------- */ /* El contenedor nunca aporta fondo propio: lo hereda de la caja */ html body.tec-ui table.table, html body.tec-ui table.dataTable, html body.tec-ui .dataTables_wrapper, html body.tec-ui .dataTables_scroll, html body.tec-ui .dataTables_scrollHead, html body.tec-ui .dataTables_scrollHeadInner, html body.tec-ui .dataTables_scrollBody, html body.tec-ui .dataTables_scrollFoot, html body.tec-ui .dataTables_scrollFootInner { background-color: transparent !important; border-color: var(--tec-border) !important; } /* Encabezado */ html body.tec-ui table.table > thead > tr > th, html body.tec-ui table.dataTable > thead > tr > th, html body.tec-ui table.dataTable thead th, html body.tec-ui table.dataTable thead td, html body.tec-ui .dataTables_scrollHead thead th { background-color: var(--tec-surface-alt) !important; color: var(--tec-muted) !important; border-color: var(--tec-border) !important; border-bottom: 1px solid var(--tec-border) !important; } /* Cuerpo: la regla clave. DataTables pinta el fondo en el tr, no en el td */ html body.tec-ui table.table > tbody > tr, html body.tec-ui table.dataTable > tbody > tr, html body.tec-ui table.dataTable tbody tr, html body.tec-ui table.table > tbody > tr > td, html body.tec-ui table.table > tbody > tr > th, html body.tec-ui table.dataTable tbody td, html body.tec-ui table.dataTable tbody th { background-color: transparent !important; color: var(--tec-text) !important; border-color: var(--tec-border) !important; } /* Filas alternas y resaltado al pasar el cursor */ html body.tec-ui table.table-striped > tbody > tr:nth-of-type(odd), html body.tec-ui table.dataTable.stripe tbody tr.odd, html body.tec-ui table.dataTable.display tbody tr.odd { background-color: var(--tec-row-stripe) !important; } html body.tec-ui table.table-hover > tbody > tr:hover, html body.tec-ui table.table > tbody > tr:hover, html body.tec-ui table.dataTable.hover tbody tr:hover, html body.tec-ui table.dataTable.display tbody tr:hover, html body.tec-ui table.dataTable tbody tr:hover { background-color: var(--tec-row-hover) !important; } html body.tec-ui table.table > tbody > tr:hover > td, html body.tec-ui table.dataTable tbody tr:hover > td { background-color: transparent !important; } /* DataTables tinta la columna por la que se ordena; se neutraliza */ html body.tec-ui table.dataTable tbody tr > .sorting_1, html body.tec-ui table.dataTable tbody tr > .sorting_2, html body.tec-ui table.dataTable tbody tr > .sorting_3, html body.tec-ui table.dataTable tbody tr.odd > .sorting_1, html body.tec-ui table.dataTable tbody tr.odd > .sorting_2, html body.tec-ui table.dataTable tbody tr.odd > .sorting_3, html body.tec-ui table.dataTable tbody tr.even > .sorting_1, html body.tec-ui table.dataTable tbody tr.even > .sorting_2, html body.tec-ui table.dataTable tbody tr.even > .sorting_3 { background-color: transparent !important; } /* Pie de tabla (fila de totales) */ html body.tec-ui table.table > tfoot > tr > th, html body.tec-ui table.table > tfoot > tr > td, html body.tec-ui table.dataTable tfoot th, html body.tec-ui table.dataTable tfoot td, html body.tec-ui .dataTables_scrollFoot tfoot th { background-color: var(--tec-surface-alt) !important; color: var(--tec-text) !important; border-color: var(--tec-border) !important; border-top: 1px solid var(--tec-border) !important; font-weight: 600; } /* Fila vacia (No hay datos disponibles) */ html body.tec-ui table.dataTable tbody td.dataTables_empty { background-color: transparent !important; color: var(--tec-muted) !important; padding: 28px 14px; text-align: center; } /* Controles del envoltorio */ html body.tec-ui .dataTables_wrapper .dataTables_length select, html body.tec-ui .dataTables_wrapper .dataTables_filter input { background-color: var(--tec-surface) !important; color: var(--tec-text) !important; border-color: var(--tec-border-strong) !important; } html body.tec-ui .dataTables_wrapper .dataTables_info, html body.tec-ui .dataTables_wrapper .dataTables_length, html body.tec-ui .dataTables_wrapper .dataTables_filter { color: var(--tec-muted) !important; } html body.tec-ui .dataTables_wrapper .dataTables_processing { background: var(--tec-surface) !important; color: var(--tec-text) !important; border: 1px solid var(--tec-border) !important; border-radius: var(--tec-radius-sm); box-shadow: var(--tec-shadow-md); } /* Botones de exportacion (CSV, Excel, PDF, Impresion, Visibilidad) */ html body.tec-ui .dt-buttons .dt-button, html body.tec-ui .dataTables_wrapper .dt-button { background: var(--tec-surface) !important; background-image: none !important; border: 1px solid var(--tec-border-strong) !important; border-radius: var(--tec-radius-sm) !important; color: var(--tec-text-soft) !important; font-size: 13px; padding: 7px 13px; margin-right: 6px; box-shadow: none !important; } html body.tec-ui .dt-buttons .dt-button:hover, html body.tec-ui .dataTables_wrapper .dt-button:hover { background: var(--tec-primary-soft) !important; border-color: var(--tec-primary) !important; color: var(--tec-primary) !important; } /* Menu desplegable de visibilidad de columnas */ html body.tec-ui div.dt-button-collection { background: var(--tec-surface) !important; border: 1px solid var(--tec-border) !important; border-radius: var(--tec-radius-sm); box-shadow: var(--tec-shadow-lg); } html body.tec-ui div.dt-button-collection .dt-button { color: var(--tec-text) !important; border: 0 !important; background: transparent !important; } /* Tablas dentro de cajas: sin margen inferior sobrante */ html body.tec-ui .box-body > .table-responsive > table.table, html body.tec-ui .box-body > table.table { margin-bottom: 0; } /* ---- Ajustes exclusivos del modo oscuro ---- */ html[data-tec-theme="dark"] body.tec-ui table.table, html[data-tec-theme="dark"] body.tec-ui table.dataTable { color: var(--tec-text) !important; } html[data-tec-theme="dark"] body.tec-ui .table-bordered, html[data-tec-theme="dark"] body.tec-ui .table-bordered > thead > tr > th, html[data-tec-theme="dark"] body.tec-ui .table-bordered > tbody > tr > td, html[data-tec-theme="dark"] body.tec-ui .table-bordered > tfoot > tr > th { border-color: var(--tec-border) !important; } /* Indicadores de ordenamiento. IMPORTANTE: no usar `filter` sobre el . `filter` se aplica al elemento completo, no solo al icono, e invierte tambien su fondo: eso volvia blancas las cabeceras de las columnas ordenables en modo oscuro. Se desactiva el sprite de DataTables y se dibujan flechas con texto, que si se pueden colorear con las variables del tema. */ html body.tec-ui table.dataTable thead th.sorting, html body.tec-ui table.dataTable thead th.sorting_asc, html body.tec-ui table.dataTable thead th.sorting_desc, html body.tec-ui table.dataTable thead td.sorting, html body.tec-ui table.dataTable thead td.sorting_asc, html body.tec-ui table.dataTable thead td.sorting_desc { background-image: none !important; filter: none !important; position: relative; padding-right: 26px !important; cursor: pointer; } /* Se ocultan las flechas propias de DataTables (usa ::before y ::after) */ html body.tec-ui table.dataTable thead th.sorting::before, html body.tec-ui table.dataTable thead th.sorting::after, html body.tec-ui table.dataTable thead th.sorting_asc::before, html body.tec-ui table.dataTable thead th.sorting_asc::after, html body.tec-ui table.dataTable thead th.sorting_desc::before, html body.tec-ui table.dataTable thead th.sorting_desc::after { content: none !important; } /* Flecha propia, coloreada con el tema */ html body.tec-ui table.dataTable thead th.sorting::after, html body.tec-ui table.dataTable thead th.sorting_asc::after, html body.tec-ui table.dataTable thead th.sorting_desc::after { position: absolute !important; right: 8px; top: 50%; transform: translateY(-50%); bottom: auto !important; left: auto !important; font-size: 11px; line-height: 1; font-weight: 700; opacity: 1; } html body.tec-ui table.dataTable thead th.sorting::after { content: "\2195" !important; color: var(--tec-muted) !important; opacity: .45; } html body.tec-ui table.dataTable thead th.sorting_asc::after { content: "\2191" !important; color: var(--tec-primary) !important; } html body.tec-ui table.dataTable thead th.sorting_desc::after { content: "\2193" !important; color: var(--tec-primary) !important; } /* Refuerzo: ninguna cabecera puede quedar con fondo claro en modo oscuro */ html[data-tec-theme="dark"] body.tec-ui table.dataTable thead th, html[data-tec-theme="dark"] body.tec-ui table.dataTable thead td, html[data-tec-theme="dark"] body.tec-ui table.table > thead > tr > th, html[data-tec-theme="dark"] body.tec-ui .dataTables_scrollHead thead th, html[data-tec-theme="dark"] body.tec-ui .dataTables_scrollHead thead td { background-color: var(--tec-surface-alt) !important; background-image: none !important; color: var(--tec-muted) !important; filter: none !important; } html[data-tec-theme="dark"] body.tec-ui .dataTables_scrollBody::-webkit-scrollbar-thumb, html[data-tec-theme="dark"] body.tec-ui .table-responsive::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); background-clip: content-box; } /* Casillas y campos de filtro sobre fondo oscuro */ html[data-tec-theme="dark"] body.tec-ui input[type="checkbox"], html[data-tec-theme="dark"] body.tec-ui input[type="radio"] { accent-color: var(--tec-primary); } html[data-tec-theme="dark"] body.tec-ui .daterangepicker, html[data-tec-theme="dark"] body.tec-ui .datepicker.dropdown-menu { background: var(--tec-surface) !important; border-color: var(--tec-border) !important; color: var(--tec-text) !important; } html[data-tec-theme="dark"] body.tec-ui .daterangepicker td, html[data-tec-theme="dark"] body.tec-ui .daterangepicker th, html[data-tec-theme="dark"] body.tec-ui .datepicker td, html[data-tec-theme="dark"] body.tec-ui .datepicker th { background-color: transparent !important; color: var(--tec-text) !important; } html[data-tec-theme="dark"] body.tec-ui .daterangepicker td.off, html[data-tec-theme="dark"] body.tec-ui .datepicker td.old, html[data-tec-theme="dark"] body.tec-ui .datepicker td.new { color: var(--tec-muted) !important; } html[data-tec-theme="dark"] body.tec-ui .daterangepicker td.active, html[data-tec-theme="dark"] body.tec-ui .datepicker td.active { background-color: var(--tec-primary) !important; color: #FFFFFF !important; } /* -------------------------------------------------------------------------- 22. Tablas: superficie explicita (reemplaza el enfoque de transparencia) -------------------------------------------------------------------------- Dejar los elementos en `transparent` dependia de que ningun ancestro (table, tbody, el envoltorio de desplazamiento) tuviera fondo propio. En varias pantallas si lo tenia y se colaba el blanco. Aqui cada capa recibe un color del tema, de modo que el resultado no depende de lo que haya debajo. Esta seccion va al final a proposito: gana sobre las anteriores. -------------------------------------------------------------------------- */ /* Capas contenedoras */ html body.tec-ui table, html body.tec-ui table.table, html body.tec-ui table.dataTable, html body.tec-ui table > tbody, html body.tec-ui table > thead, html body.tec-ui table > tfoot, html body.tec-ui .dataTables_wrapper, html body.tec-ui .dataTables_scroll, html body.tec-ui .dataTables_scrollHead, html body.tec-ui .dataTables_scrollHeadInner, html body.tec-ui .dataTables_scrollBody, html body.tec-ui .dataTables_scrollFoot, html body.tec-ui .dataTables_scrollFootInner, html body.tec-ui .table-responsive { background-color: var(--tec-surface) !important; border-color: var(--tec-border) !important; } /* Cabecera */ html body.tec-ui table > thead > tr, html body.tec-ui table > thead > tr > th, html body.tec-ui table > thead > tr > td, html body.tec-ui table.dataTable thead tr, html body.tec-ui table.dataTable thead th, html body.tec-ui table.dataTable thead td, html body.tec-ui .dataTables_scrollHead thead tr, html body.tec-ui .dataTables_scrollHead thead th { background-color: var(--tec-surface-alt) !important; background-image: none !important; color: var(--tec-muted) !important; border-color: var(--tec-border) !important; filter: none !important; } /* Cuerpo: superficie base */ html body.tec-ui table > tbody > tr, html body.tec-ui table.dataTable tbody tr, html body.tec-ui table > tbody > tr > td, html body.tec-ui table > tbody > tr > th, html body.tec-ui table.dataTable tbody td, html body.tec-ui table.dataTable tbody th { background-color: var(--tec-surface) !important; color: var(--tec-text) !important; border-color: var(--tec-border) !important; } /* Las celdas heredan la fila para que el rayado y el hover se vean completos */ html body.tec-ui table > tbody > tr > td, html body.tec-ui table > tbody > tr > th, html body.tec-ui table.dataTable tbody td, html body.tec-ui table.dataTable tbody th, html body.tec-ui table.dataTable tbody tr > .sorting_1, html body.tec-ui table.dataTable tbody tr > .sorting_2, html body.tec-ui table.dataTable tbody tr > .sorting_3 { background-color: inherit !important; } /* Rayado alterno */ html body.tec-ui table.table-striped > tbody > tr:nth-of-type(odd), html body.tec-ui table.dataTable tbody tr.odd, html body.tec-ui table.dataTable.stripe tbody tr.odd, html body.tec-ui table.dataTable.display tbody tr.odd { background-color: var(--tec-surface-alt) !important; } /* Resaltado al pasar el cursor */ html body.tec-ui table.table > tbody > tr:hover, html body.tec-ui table.table-hover > tbody > tr:hover, html body.tec-ui table.dataTable tbody tr:hover, html body.tec-ui table.dataTable.hover tbody tr:hover, html body.tec-ui table.dataTable.display tbody tr:hover, html body.tec-ui table.dataTable tbody tr.odd:hover, html body.tec-ui table.dataTable tbody tr.even:hover { background-color: var(--tec-row-hover-solid) !important; } /* Fila vacia: misma superficie que el resto del cuerpo */ html body.tec-ui table.dataTable tbody tr.odd td.dataTables_empty, html body.tec-ui table.dataTable tbody tr.even td.dataTables_empty, html body.tec-ui table.dataTable tbody td.dataTables_empty, html body.tec-ui table > tbody > tr > td.dataTables_empty { background-color: var(--tec-surface) !important; color: var(--tec-muted) !important; text-align: center; padding: 30px 14px !important; font-style: normal; } /* Pie de tabla */ html body.tec-ui table > tfoot > tr, html body.tec-ui table > tfoot > tr > th, html body.tec-ui table > tfoot > tr > td, html body.tec-ui table.dataTable tfoot tr, html body.tec-ui table.dataTable tfoot th, html body.tec-ui table.dataTable tfoot td, html body.tec-ui .dataTables_scrollFoot tfoot tr, html body.tec-ui .dataTables_scrollFoot tfoot th { background-color: var(--tec-surface-alt) !important; color: var(--tec-text) !important; border-color: var(--tec-border) !important; font-weight: 600; } /* Filas de agrupacion y totales que algunos informes marcan con clases de color */ html body.tec-ui table > tbody > tr.group > td, html body.tec-ui table > tbody > tr.bg-gray > td, html body.tec-ui table > tbody > tr.bg-light > td, html body.tec-ui table > tbody > tr.info > td, html body.tec-ui table > tbody > tr.success > td, html body.tec-ui table > tbody > tr.warning > td, html body.tec-ui table > tbody > tr.danger > td, html body.tec-ui table > tbody > tr.active > td { background-color: var(--tec-surface-alt) !important; color: var(--tec-text) !important; } /* Paginacion: mismo lenguaje visual en ambos modos */ html body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button, html body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, html body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button:hover, html body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button:active { background: var(--tec-surface) !important; background-image: none !important; border: 1px solid var(--tec-border) !important; border-radius: var(--tec-radius-xs) !important; color: var(--tec-text-soft) !important; box-shadow: none !important; padding: 6px 12px; margin: 0 2px; } html body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--tec-muted) !important; opacity: .55; } html body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) { background: var(--tec-primary-soft) !important; border-color: var(--tec-primary) !important; color: var(--tec-primary) !important; } html body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current, html body.tec-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--tec-primary) !important; border-color: var(--tec-primary) !important; color: #FFFFFF !important; } /* Pie de pagina de la aplicacion */ html body.tec-ui .main-footer { background-color: var(--tec-surface) !important; border-top: 1px solid var(--tec-border) !important; color: var(--tec-muted) !important; } /* Tablas anidadas dentro de otra tabla (detalle expandible) */ html body.tec-ui table table, html body.tec-ui table table > tbody > tr, html body.tec-ui table table > tbody > tr > td { background-color: var(--tec-surface-alt) !important; } /* -------------------------------------------------------------------------- 23. Bordes: un unico color en todo el sistema -------------------------------------------------------------------------- Bootstrap 3 y AdminLTE definen los bordes de contenedores con grises fijos (#ddd, #f4f4f4, #eee). Sobre fondo oscuro esos grises se leen como un marco blanco alrededor de tablas, pestanas y paneles. Aqui se normalizan todos al borde del tema. Solo se cambia el COLOR: no se toca el grosor ni el espaciado, asi que la maquetacion no se altera. -------------------------------------------------------------------------- */ html body.tec-ui .content-wrapper .box, html body.tec-ui .content-wrapper .box-header, html body.tec-ui .content-wrapper .box-body, html body.tec-ui .content-wrapper .box-footer, html body.tec-ui .content-wrapper .panel, html body.tec-ui .content-wrapper .panel-heading, html body.tec-ui .content-wrapper .panel-body, html body.tec-ui .content-wrapper .panel-footer, html body.tec-ui .content-wrapper .well, html body.tec-ui .content-wrapper .thumbnail, html body.tec-ui .content-wrapper .list-group-item, html body.tec-ui .content-wrapper .table-responsive, html body.tec-ui .content-wrapper .dataTables_wrapper, html body.tec-ui .content-wrapper .dataTables_scroll, html body.tec-ui .content-wrapper .dataTables_scrollHead, html body.tec-ui .content-wrapper .dataTables_scrollHeadInner, html body.tec-ui .content-wrapper .dataTables_scrollBody, html body.tec-ui .content-wrapper .dataTables_scrollFoot, html body.tec-ui .content-wrapper .dataTables_scrollFootInner, html body.tec-ui .content-wrapper .tab-content, html body.tec-ui .content-wrapper .nav-tabs-custom, html body.tec-ui .content-wrapper .nav-tabs-custom > .tab-content, html body.tec-ui .content-wrapper .input-group-addon, html body.tec-ui .content-wrapper fieldset, html body.tec-ui .content-wrapper legend, html body.tec-ui .content-wrapper hr { border-color: var(--tec-border) !important; } /* Pestanas */ html body.tec-ui .nav-tabs, html body.tec-ui .nav-tabs-custom > .nav-tabs, html body.tec-ui .content-wrapper .nav-tabs { border-bottom-color: var(--tec-border) !important; background-color: transparent !important; } html body.tec-ui .content-wrapper .nav-tabs > li > a { border-color: transparent !important; background-color: transparent !important; color: var(--tec-muted) !important; } html body.tec-ui .content-wrapper .nav-tabs > li > a:hover { color: var(--tec-text) !important; border-bottom-color: var(--tec-border-strong) !important; } html body.tec-ui .content-wrapper .nav-tabs > li.active > a, html body.tec-ui .content-wrapper .nav-tabs > li.active > a:hover, html body.tec-ui .content-wrapper .nav-tabs > li.active > a:focus { background-color: transparent !important; border-color: transparent !important; border-bottom: 2px solid var(--tec-primary) !important; color: var(--tec-primary) !important; } /* Panel de contenido de las pestanas: misma superficie que la caja */ html body.tec-ui .content-wrapper .tab-content, html body.tec-ui .content-wrapper .nav-tabs-custom > .tab-content { background-color: var(--tec-surface) !important; } /* El contenedor de la tabla no debe dibujar marco propio: ya lo hace la caja */ html body.tec-ui .content-wrapper .dataTables_wrapper, html body.tec-ui .content-wrapper .table-responsive { border: 0 !important; box-shadow: none !important; outline: none !important; } /* La tabla con borde conserva su reticula, pero en el color del tema */ html body.tec-ui .content-wrapper table.table-bordered, html body.tec-ui .content-wrapper table.table-bordered > thead > tr > th, html body.tec-ui .content-wrapper table.table-bordered > thead > tr > td, html body.tec-ui .content-wrapper table.table-bordered > tbody > tr > th, html body.tec-ui .content-wrapper table.table-bordered > tbody > tr > td, html body.tec-ui .content-wrapper table.table-bordered > tfoot > tr > th, html body.tec-ui .content-wrapper table.table-bordered > tfoot > tr > td, html body.tec-ui .content-wrapper table.dataTable, html body.tec-ui .content-wrapper table.dataTable th, html body.tec-ui .content-wrapper table.dataTable td { border-color: var(--tec-border) !important; } /* Separadores de menus desplegables y listas */ html body.tec-ui .dropdown-menu, html body.tec-ui .dropdown-menu .divider, html body.tec-ui .modal-header, html body.tec-ui .modal-footer, html body.tec-ui .popover, html body.tec-ui .popover-title { border-color: var(--tec-border) !important; } html body.tec-ui .popover, html body.tec-ui .popover-title, html body.tec-ui .popover-content { background-color: var(--tec-surface) !important; color: var(--tec-text) !important; } /* Consejos emergentes */ html body.tec-ui .tooltip-inner { background-color: var(--tec-shell-bg) !important; color: #FFFFFF !important; border-radius: var(--tec-radius-xs); font-size: 12.5px; padding: 6px 10px; } /* Controles de tamano de letra del pie (A- A A+ A++) */ html body.tec-ui .main-footer .btn-group > .btn, html body.tec-ui .main-footer .btn { border-color: var(--tec-border) !important; } /* -------------------------------------------------------------------------- 24. Modulo Claude IA -------------------------------------------------------------------------- Interfaz del asistente: encabezado, panel de conversaciones, chat con burbujas, redactor y el llamado a la accion hacia el area de ventas. Todo se apoya en los tokens del tema, asi que funciona igual en claro y en oscuro. -------------------------------------------------------------------------- */ html body.tec-ui .claudeia-page { padding-top: 18px; } /* ---- Encabezado ---- */ html body.tec-ui .claudeia-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; } html body.tec-ui .claudeia-hero-main { display: flex; align-items: center; gap: 14px; } html body.tec-ui .claudeia-hero-avatar { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #FFFFFF; background: linear-gradient(135deg, var(--tec-primary), var(--tec-primary-hover)); box-shadow: var(--tec-shadow-md); flex-shrink: 0; } html body.tec-ui .claudeia-hero h1 { font-size: 22px; font-weight: 650; margin: 0; color: var(--tec-text) !important; } html body.tec-ui .claudeia-hero p { margin: 3px 0 0; color: var(--tec-muted) !important; font-size: 13.5px; } /* ---- Indicador de saldo ---- */ html body.tec-ui .claudeia-balance { display: flex; flex-direction: column; align-items: flex-end; padding: 10px 18px; border-radius: var(--tec-radius); background: var(--tec-surface); border: 1px solid var(--tec-border); box-shadow: var(--tec-shadow-sm); } html body.tec-ui .claudeia-balance-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tec-muted); } html body.tec-ui .claudeia-balance-value { font-size: 20px; font-weight: 700; color: var(--tec-text); letter-spacing: -0.02em; } html body.tec-ui .claudeia-balance-value i { color: var(--tec-primary); font-size: 16px; } html body.tec-ui .claudeia-balance.is-low { border-color: var(--tec-warning); background: var(--tec-warning-bg); } html body.tec-ui .claudeia-balance.is-low .claudeia-balance-value, html body.tec-ui .claudeia-balance.is-low .claudeia-balance-value i, html body.tec-ui .claudeia-balance.is-low .claudeia-balance-label { color: var(--tec-warning); } html body.tec-ui .claudeia-balance.is-empty { border-color: var(--tec-danger); background: var(--tec-danger-bg); } html body.tec-ui .claudeia-balance.is-empty .claudeia-balance-value, html body.tec-ui .claudeia-balance.is-empty .claudeia-balance-value i, html body.tec-ui .claudeia-balance.is-empty .claudeia-balance-label { color: var(--tec-danger); } /* ---- Aviso de bloqueo ---- */ html body.tec-ui .claudeia-blocked { margin-bottom: 20px; } html body.tec-ui .claudeia-blocked-msg { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-radius: var(--tec-radius-sm); background: var(--tec-warning-bg); border: 1px solid var(--tec-warning); color: var(--tec-warning); font-weight: 500; margin-bottom: 16px; } /* ---- Paneles ---- */ html body.tec-ui .claudeia-panel { background: var(--tec-surface); border: 1px solid var(--tec-border); border-radius: var(--tec-radius); box-shadow: var(--tec-shadow); margin-bottom: 20px; } html body.tec-ui .claudeia-panel-head { padding: 16px 18px 0; } html body.tec-ui .claudeia-panel-head h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tec-muted) !important; } /* ---- Conversaciones ---- */ html body.tec-ui .claudeia-btn-new { display: block; margin: 14px 18px; padding: 9px 14px; border-radius: var(--tec-radius-sm); background: var(--tec-primary); color: #FFFFFF !important; font-weight: 550; font-size: 13.5px; text-align: center; border: 0; transition: background-color .15s ease; } html body.tec-ui .claudeia-btn-new:hover { background: var(--tec-primary-hover); color: #FFFFFF !important; } html body.tec-ui .claudeia-conv-list { list-style: none; margin: 0; padding: 0 10px 12px; max-height: 380px; overflow-y: auto; } html body.tec-ui .claudeia-conv-list > li { position: relative; border-radius: var(--tec-radius-sm); transition: background-color .15s ease; } html body.tec-ui .claudeia-conv-list > li:hover { background: var(--tec-surface-alt); } html body.tec-ui .claudeia-conv-list > li.is-active { background: var(--tec-primary-soft); } html body.tec-ui .claudeia-conv-list > li > a { display: block; padding: 10px 34px 10px 12px; color: var(--tec-text) !important; text-decoration: none; } html body.tec-ui .claudeia-conv-list > li.is-active > a .claudeia-conv-title { color: var(--tec-primary) !important; font-weight: 600; } html body.tec-ui .claudeia-conv-title { display: block; font-size: 13.5px; line-height: 1.35; } html body.tec-ui .claudeia-conv-date { display: block; font-size: 11.5px; color: var(--tec-muted); margin-top: 3px; } html body.tec-ui .claudeia-conv-del { position: absolute; top: 8px; right: 8px; margin: 0; opacity: 0; transition: opacity .15s ease; } html body.tec-ui .claudeia-conv-list > li:hover .claudeia-conv-del { opacity: 1; } html body.tec-ui .claudeia-conv-del button { background: transparent; border: 0; padding: 4px 6px; color: var(--tec-muted); border-radius: var(--tec-radius-xs); font-size: 12px; } html body.tec-ui .claudeia-conv-del button:hover { color: var(--tec-danger); background: var(--tec-danger-bg); } html body.tec-ui .claudeia-conv-empty { padding: 8px 12px 14px; color: var(--tec-muted); font-size: 13px; } /* ---- Chat ---- */ html body.tec-ui .claudeia-chat-panel { display: flex; flex-direction: column; min-height: 560px; } html body.tec-ui .claudeia-chat { flex: 1; padding: 22px; overflow-y: auto; max-height: 58vh; } html body.tec-ui .claudeia-msg { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; } html body.tec-ui .claudeia-msg-user { justify-content: flex-end; } html body.tec-ui .claudeia-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; margin-top: 2px; } html body.tec-ui .claudeia-avatar-bot { background: linear-gradient(135deg, var(--tec-primary), var(--tec-primary-hover)); color: #FFFFFF; } html body.tec-ui .claudeia-avatar-user { background: var(--tec-surface-alt); border: 1px solid var(--tec-border); color: var(--tec-muted); } html body.tec-ui .claudeia-bubble { max-width: 82%; padding: 13px 17px; border-radius: 16px; font-size: 14px; line-height: 1.6; word-wrap: break-word; } html body.tec-ui .claudeia-msg-user .claudeia-bubble { background: var(--tec-primary); color: #FFFFFF; border-bottom-right-radius: 5px; } html body.tec-ui .claudeia-msg-bot .claudeia-bubble { background: var(--tec-surface-alt); border: 1px solid var(--tec-border); color: var(--tec-text); border-bottom-left-radius: 5px; } html body.tec-ui .claudeia-answer p { margin: 0 0 10px; } html body.tec-ui .claudeia-answer p:last-child { margin-bottom: 0; } html body.tec-ui .claudeia-answer h4 { font-size: 15px; margin: 14px 0 8px; } html body.tec-ui .claudeia-answer table { width: 100%; margin: 12px 0; font-size: 13px; border-radius: var(--tec-radius-sm); overflow: hidden; } html body.tec-ui .claudeia-answer table td { padding: 8px 10px !important; border-color: var(--tec-border) !important; } html body.tec-ui .claudeia-answer table tr:first-child td { background: var(--tec-surface) !important; font-weight: 650; color: var(--tec-text) !important; } html body.tec-ui .claudeia-answer code { background: var(--tec-surface); border: 1px solid var(--tec-border); color: var(--tec-primary); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; } html body.tec-ui .claudeia-answer ul { padding-left: 20px; margin: 8px 0; } html body.tec-ui .claudeia-answer li { margin-bottom: 5px; } html body.tec-ui .claudeia-meta { margin-top: 10px; font-size: 11.5px; color: var(--tec-muted); } html body.tec-ui .claudeia-warn { margin-top: 10px; padding: 8px 12px; border-radius: var(--tec-radius-xs); background: var(--tec-warning-bg); color: var(--tec-warning); font-size: 12.5px; } html body.tec-ui .claudeia-queries { margin-top: 12px; border-top: 1px dashed var(--tec-border); padding-top: 10px; } html body.tec-ui .claudeia-queries > a { font-size: 12px; color: var(--tec-muted) !important; } html body.tec-ui .claudeia-queries > a:hover { color: var(--tec-primary) !important; } html body.tec-ui .claudeia-queries pre { margin-top: 8px; background: var(--tec-surface) !important; border: 1px solid var(--tec-border) !important; color: var(--tec-text-soft) !important; border-radius: var(--tec-radius-xs); font-size: 11.5px; white-space: pre-wrap; padding: 10px; } /* ---- Estado vacio ---- */ html body.tec-ui .claudeia-empty { text-align: center; padding: 34px 20px; } html body.tec-ui .claudeia-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 20px; font-size: 26px; color: var(--tec-primary); background: var(--tec-primary-soft); margin-bottom: 16px; } html body.tec-ui .claudeia-empty h3 { font-size: 19px; font-weight: 650; margin: 0 0 6px; color: var(--tec-text) !important; } html body.tec-ui .claudeia-empty p { color: var(--tec-muted) !important; max-width: 460px; margin: 0 auto 22px; font-size: 14px; } html body.tec-ui .claudeia-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } html body.tec-ui .claudeia-chip { background: var(--tec-surface); border: 1px solid var(--tec-border-strong); border-radius: 999px; padding: 8px 15px; font-size: 13px; color: var(--tec-text-soft); text-align: left; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } html body.tec-ui .claudeia-chip i { color: var(--tec-primary); margin-right: 5px; font-size: 12px; } html body.tec-ui .claudeia-chip:hover { border-color: var(--tec-primary); background: var(--tec-primary-soft); color: var(--tec-primary); } /* ---- Indicador de escritura ---- */ html body.tec-ui .claudeia-typing { display: flex; align-items: center; gap: 12px; padding: 0 22px 14px; } html body.tec-ui .claudeia-bubble-typing { display: flex; align-items: center; gap: 5px; } html body.tec-ui .claudeia-bubble-typing em { font-style: normal; color: var(--tec-muted); font-size: 13px; margin-left: 6px; } html body.tec-ui .claudeia-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tec-primary); animation: claudeia-bounce 1.3s infinite ease-in-out; } html body.tec-ui .claudeia-dot:nth-child(2) { animation-delay: .18s; } html body.tec-ui .claudeia-dot:nth-child(3) { animation-delay: .36s; } @keyframes claudeia-bounce { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-5px); opacity: 1; } } /* ---- Redactor ---- */ html body.tec-ui .claudeia-composer { border-top: 1px solid var(--tec-border); padding: 16px 22px 18px; margin: 0; } html body.tec-ui .claudeia-composer-box { display: flex; align-items: flex-end; gap: 10px; background: var(--tec-surface-alt); border: 1px solid var(--tec-border-strong); border-radius: 14px; padding: 8px 8px 8px 14px; transition: border-color .15s ease, box-shadow .15s ease; } html body.tec-ui .claudeia-composer-box:focus-within { border-color: var(--tec-primary); box-shadow: 0 0 0 3px var(--tec-primary-ring); } html body.tec-ui .claudeia-composer-box textarea { flex: 1; background: transparent; border: 0; outline: none; resize: none; color: var(--tec-text); font-size: 14px; line-height: 1.5; padding: 8px 0; max-height: 180px; } html body.tec-ui .claudeia-composer-box textarea::placeholder { color: var(--tec-muted); } html body.tec-ui .claudeia-composer-box button { background: var(--tec-primary); color: #FFFFFF; border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 550; font-size: 13.5px; flex-shrink: 0; transition: background-color .15s ease, transform .1s ease; } html body.tec-ui .claudeia-composer-box button:hover:not(:disabled) { background: var(--tec-primary-hover); } html body.tec-ui .claudeia-composer-box button:active:not(:disabled) { transform: translateY(1px); } html body.tec-ui .claudeia-composer-box button:disabled { opacity: .5; cursor: not-allowed; } html body.tec-ui .claudeia-composer-hint { display: block; margin-top: 8px; font-size: 11.5px; color: var(--tec-muted); } /* -------------------------------------------------------------------------- Llamado a la accion hacia ventas -------------------------------------------------------------------------- */ html body.tec-ui .claudeia-cta { --wa-green: #25D366; --wa-green-dark: #1EA952; } html body.tec-ui .claudeia-cta-card { background: var(--tec-surface); border: 1px solid var(--tec-border); border-radius: var(--tec-radius); box-shadow: var(--tec-shadow); padding: 20px; position: relative; overflow: hidden; } html body.tec-ui .claudeia-cta-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--tec-primary), var(--wa-green)); } html body.tec-ui .claudeia-cta-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } html body.tec-ui .claudeia-cta-badge { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--tec-warning-bg); color: var(--tec-warning); font-size: 16px; flex-shrink: 0; } html body.tec-ui .claudeia-cta-head h4 { margin: 0 0 4px; font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--tec-text) !important; } html body.tec-ui .claudeia-cta-head p { margin: 0; font-size: 13px; color: var(--tec-muted) !important; line-height: 1.45; } html body.tec-ui .claudeia-cta-list { list-style: none; margin: 0 0 18px; padding: 0; } html body.tec-ui .claudeia-cta-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--tec-text-soft); margin-bottom: 7px; line-height: 1.45; } html body.tec-ui .claudeia-cta-list i { color: var(--tec-success); font-size: 11px; margin-top: 4px; flex-shrink: 0; } html body.tec-ui .claudeia-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--wa-green) !important; border: 0 !important; color: #FFFFFF !important; border-radius: var(--tec-radius-sm) !important; font-weight: 600; font-size: 13.5px; padding: 10px 18px !important; box-shadow: 0 2px 8px rgba(37, 211, 102, .28); transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease; } html body.tec-ui .claudeia-cta-btn:hover, html body.tec-ui .claudeia-cta-btn:focus { background: var(--wa-green-dark) !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(37, 211, 102, .38); } html body.tec-ui .claudeia-cta-btn:active { transform: translateY(1px); } html body.tec-ui .claudeia-cta-btn i { font-size: 16px; } html body.tec-ui .claudeia-cta-btn-lg { width: 100%; padding: 12px 18px !important; font-size: 14px; } html body.tec-ui .claudeia-cta-foot { margin: 12px 0 0; font-size: 11.5px; color: var(--tec-muted) !important; text-align: center; } /* Variante compacta */ html body.tec-ui .claudeia-cta-inline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 14px 18px; border-radius: var(--tec-radius); background: var(--tec-surface); border: 1px solid var(--tec-border); box-shadow: var(--tec-shadow-sm); margin-bottom: 18px; } html body.tec-ui .claudeia-cta-text { display: flex; align-items: center; gap: 12px; } html body.tec-ui .claudeia-cta-icon { font-size: 26px; color: var(--wa-green); flex-shrink: 0; } html body.tec-ui .claudeia-cta-text strong { display: block; font-size: 14px; color: var(--tec-text); font-weight: 600; } html body.tec-ui .claudeia-cta-text small { display: block; font-size: 12.5px; color: var(--tec-muted); margin-top: 2px; } /* ---- Adaptacion a pantallas pequenas ---- */ @media (max-width: 991px) { html body.tec-ui .claudeia-chat-panel { min-height: 420px; } html body.tec-ui .claudeia-chat { max-height: 50vh; } html body.tec-ui .claudeia-bubble { max-width: 92%; } } @media (max-width: 767px) { html body.tec-ui .claudeia-hero { flex-direction: column; align-items: flex-start; } html body.tec-ui .claudeia-balance { align-items: flex-start; width: 100%; } html body.tec-ui .claudeia-chips { justify-content: flex-start; } html body.tec-ui .claudeia-composer-box button span { display: none; } html body.tec-ui .claudeia-cta-inline { flex-direction: column; align-items: stretch; } html body.tec-ui .claudeia-cta-inline .claudeia-cta-btn { width: 100%; } } /* -------------------------------------------------------------------------- 25. Tarjetas de indicador: etiquetas completas -------------------------------------------------------------------------- AdminLTE define .info-box-text con white-space:nowrap y text-overflow: ellipsis, de modo que cualquier etiqueta que no quepa en una linea se corta ("SALDO DE ...", "CREDITOS ..."). Aqui se permite que ocupe dos lineas y se reserva altura para ello, en vez de recortar informacion. -------------------------------------------------------------------------- */ html body.tec-ui .info-box-text, html body.tec-ui .info-box .info-box-text, html body.tec-ui .info-box-new-style .info-box-text, html body.tec-ui .progress-description { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal; overflow-wrap: break-word; hyphens: auto; font-size: 11px; letter-spacing: .03em; line-height: 1.35; display: block; min-height: 2.7em; } html body.tec-ui .info-box, html body.tec-ui .info-box-new-style { min-height: 104px; display: flex; align-items: stretch; } html body.tec-ui .info-box .info-box-icon { width: 62px; min-width: 62px; height: auto; min-height: 104px; line-height: 104px; font-size: 23px; flex-shrink: 0; } html body.tec-ui .info-box .info-box-content { margin-left: 0; padding: 14px 14px 12px; display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; } html body.tec-ui .info-box-number, html body.tec-ui .info-box .info-box-number { font-size: 22px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } /* Con muchas tarjetas en fila el numero necesita algo menos de cuerpo */ @media (min-width: 1200px) { html body.tec-ui .col-lg-2 .info-box-number, html body.tec-ui .col-md-2 .info-box-number { font-size: 19px; } html body.tec-ui .col-lg-2 .info-box .info-box-icon, html body.tec-ui .col-md-2 .info-box .info-box-icon { width: 52px; min-width: 52px; font-size: 20px; } } @media (max-width: 991px) { html body.tec-ui .info-box-text { min-height: 0; } } /* -------------------------------------------------------------------------- 26. Punto de Venta -------------------------------------------------------------------------- Todo va bajo `body.tec-pos`, una clase distinta a la del resto del sistema. Ninguna de las reglas de las secciones anteriores (que usan `body.tec-ui`) alcanza esta pantalla: el POS se estiliza de forma aislada y a proposito. Criterio: se cambian superficies, contraste, bordes y tipografia. NO se cambian posiciones, anchos de columna ni los colores semanticos de los botones de cobro: el cajero los usa por memoria muscular y moverlos o recolorearlos costaria velocidad y errores. -------------------------------------------------------------------------- */ html body.tec-pos { background: var(--tec-bg) !important; color: var(--tec-text); font-family: var(--tec-font); -webkit-font-smoothing: antialiased; } html body.tec-pos .content-wrapper, html body.tec-pos .wrapper, html body.tec-pos .content { background: var(--tec-bg) !important; } /* ---- Barra superior ---- */ html body.tec-pos .pos-header { background: var(--tec-shell-bg) !important; color: var(--tec-shell-text-strong) !important; padding: 9px 14px !important; border-radius: 0 0 var(--tec-radius-sm) var(--tec-radius-sm); margin-bottom: 12px; box-shadow: var(--tec-shadow-sm); } html body.tec-pos .pos-header, html body.tec-pos .pos-header b, html body.tec-pos .pos-header span, html body.tec-pos .pos-header small { font-size: 13px; color: var(--tec-shell-text-strong) !important; } html body.tec-pos .pos-header .text-muted { color: rgba(255, 255, 255, .6) !important; } /* Botones de utilidades de la barra superior: se conservan sus colores, solo se homogeneiza la forma. */ html body.tec-pos .pos-header .btn { border-radius: var(--tec-radius-xs) !important; border: 0 !important; font-weight: 600; padding: 5px 10px !important; box-shadow: none !important; } /* ---- Zona de productos ---- */ html body.tec-pos .pos_product_div, html body.tec-pos #product_list_body { background: transparent !important; } html body.tec-pos .product_list { padding: 6px !important; } html body.tec-pos .product_box { background: var(--tec-surface) !important; border: 1px solid var(--tec-border) !important; border-radius: var(--tec-radius) !important; box-shadow: var(--tec-shadow-sm); overflow: hidden; cursor: pointer; transition: transform .12s ease, box-shadow .18s ease, border-color .15s ease; } html body.tec-pos .product_box:hover { transform: translateY(-2px); box-shadow: var(--tec-shadow-md); border-color: var(--tec-primary) !important; } html body.tec-pos .product_box:active { transform: translateY(0); } /* Se usa background-color, NUNCA la propiedad abreviada `background`: la plantilla pone la foto del producto en un background-image en linea y la forma abreviada la borraria. */ html body.tec-pos .product_box .image-container { background-color: var(--tec-surface-alt) !important; padding: 14px 8px !important; text-align: center; } html body.tec-pos .product_box .image-container i, html body.tec-pos .product_box .image-container .fa, html body.tec-pos .product_box .image-container .fas { color: var(--tec-primary) !important; font-size: 30px; } html body.tec-pos .product_box .image-container img { max-height: 74px; width: auto; margin: 0 auto; } html body.tec-pos .product_box .text_div { background: var(--tec-surface) !important; padding: 10px 9px !important; text-align: center; border-top: 1px solid var(--tec-border); } html body.tec-pos .product_box .text_div .text, html body.tec-pos .product_box .text_div p:first-child { color: var(--tec-text) !important; font-size: 12.5px !important; font-weight: 600; line-height: 1.3; display: block; margin-bottom: 5px; min-height: 2.6em; overflow: hidden; } /* Precio: es el dato que el cajero busca de un vistazo */ html body.tec-pos .product_box .text_div .text:last-child, html body.tec-pos .product_box .text_div p:last-child { color: var(--tec-primary) !important; font-size: 14px !important; font-weight: 700 !important; margin-bottom: 0; } /* ---- Panel derecho: formulario de venta ---- */ html body.tec-pos .box, html body.tec-pos .box.box-solid, html body.tec-pos .box > .box-body, html body.tec-pos .box > .box-header, html body.tec-pos .box-widget { background: var(--tec-surface) !important; background-image: none !important; border: 0 !important; color: var(--tec-text) !important; box-shadow: none; } html body.tec-pos .box { border: 1px solid var(--tec-border) !important; border-radius: var(--tec-radius) !important; box-shadow: var(--tec-shadow); overflow: hidden; } html body.tec-pos .box > .box-header { border-bottom: 1px solid var(--tec-border) !important; padding: 12px 14px !important; } /* ---- Campos ---- */ html body.tec-pos .form-control, html body.tec-pos .input-group-addon, html body.tec-pos .select2-container--default .select2-selection--single { background: var(--tec-surface) !important; border: 1px solid var(--tec-border-strong) !important; border-radius: var(--tec-radius-sm) !important; color: var(--tec-text) !important; height: auto !important; min-height: 40px; padding: 9px 12px; font-size: 14px; box-shadow: none !important; } html body.tec-pos .form-control:focus, html body.tec-pos .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--tec-primary) !important; box-shadow: 0 0 0 3px var(--tec-primary-ring) !important; } /* El buscador de productos es el control mas usado de la pantalla */ html body.tec-pos #search_product { font-size: 15px; min-height: 44px; font-weight: 500; } html body.tec-pos .form-control::placeholder { color: var(--tec-muted) !important; } html body.tec-pos .input-group-addon { background: var(--tec-surface-alt) !important; color: var(--tec-muted) !important; } html body.tec-pos .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--tec-text) !important; line-height: 22px; padding-left: 0; } html body.tec-pos .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 8px; } /* ---- Tabla de la venta en curso ---- */ html body.tec-pos table, html body.tec-pos table.table, html body.tec-pos table > tbody, html body.tec-pos table > thead, html body.tec-pos table > tfoot { background: var(--tec-surface) !important; border-color: var(--tec-border) !important; } html body.tec-pos table > thead > tr > th, html body.tec-pos #pos_table thead th { background: var(--tec-surface-alt) !important; color: var(--tec-muted) !important; border-color: var(--tec-border) !important; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 11px 10px !important; } html body.tec-pos table > tbody > tr, html body.tec-pos table > tbody > tr > td { background: var(--tec-surface) !important; color: var(--tec-text) !important; border-color: var(--tec-border) !important; vertical-align: middle; } html body.tec-pos table > tbody > tr:hover, html body.tec-pos table > tbody > tr:hover > td { background: var(--tec-row-hover-solid) !important; } /* ---- Totales ---- */ html body.tec-pos .total_quantity, html body.tec-pos .price_total, html body.tec-pos #total_subtotal, html body.tec-pos .total_sale_amount { font-weight: 700; color: var(--tec-text) !important; } html body.tec-pos .price_total, html body.tec-pos .total_sale_amount { font-size: 15px; letter-spacing: -0.01em; } /* ---- Barra inferior de acciones ---- */ html body.tec-pos .pos-form-actions { background: var(--tec-surface) !important; border-top: 1px solid var(--tec-border) !important; box-shadow: 0 -2px 10px rgba(16, 24, 40, .07); padding: 10px 12px !important; } html[data-tec-theme="dark"] body.tec-pos .pos-form-actions { box-shadow: 0 -2px 12px rgba(0, 0, 0, .4); } /* Los botones de cobro conservan su color: el cajero los reconoce por el. Solo se unifica la forma, el peso tipografico y el area de pulsacion. */ html body.tec-pos .pos-form-actions .btn { border-radius: var(--tec-radius-sm) !important; border: 0 !important; font-weight: 650 !important; font-size: 14px !important; padding: 12px 18px !important; box-shadow: var(--tec-shadow-sm); transition: filter .15s ease, transform .1s ease, box-shadow .15s ease; } html body.tec-pos .pos-form-actions .btn:hover { filter: brightness(1.07); box-shadow: var(--tec-shadow-md); } html body.tec-pos .pos-form-actions .btn:active { transform: translateY(1px); box-shadow: none; } /* El total a pagar es el dato mas importante de la pantalla */ html body.tec-pos .pos-form-actions .lead, html body.tec-pos .pos-form-actions .text-bold { font-size: 22px !important; font-weight: 750 !important; letter-spacing: -0.02em; } html body.tec-pos .pos-form-actions .text-success { color: var(--tec-success) !important; } /* ---- Ventanas modales ---- */ html body.tec-pos .modal-content { background: var(--tec-surface) !important; border: 1px solid var(--tec-border) !important; border-radius: var(--tec-radius) !important; box-shadow: var(--tec-shadow-lg); color: var(--tec-text) !important; } html body.tec-pos .modal-header, html body.tec-pos .modal-footer { border-color: var(--tec-border) !important; } html body.tec-pos .modal-footer { background: var(--tec-surface-alt) !important; } html body.tec-pos .modal-title { color: var(--tec-text) !important; font-weight: 600; } /* ---- Menus, listas y sugerencias ---- */ html body.tec-pos .dropdown-menu, html body.tec-pos .select2-dropdown, html body.tec-pos .ui-autocomplete { background: var(--tec-surface) !important; border: 1px solid var(--tec-border) !important; border-radius: var(--tec-radius-sm) !important; box-shadow: var(--tec-shadow-lg) !important; color: var(--tec-text) !important; } html body.tec-pos .ui-autocomplete .ui-menu-item, html body.tec-pos .ui-autocomplete .ui-menu-item-wrapper, html body.tec-pos .select2-container--default .select2-results__option { color: var(--tec-text) !important; background: transparent !important; padding: 9px 12px; border: 0 !important; } html body.tec-pos .ui-autocomplete .ui-menu-item-wrapper.ui-state-active, html body.tec-pos .ui-autocomplete .ui-menu-item:hover, html body.tec-pos .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--tec-primary) !important; color: #FFFFFF !important; } /* ---- Etiquetas y textos auxiliares ---- */ html body.tec-pos label, html body.tec-pos .control-label { color: var(--tec-text-soft) !important; font-weight: 550; font-size: 13px; } html body.tec-pos .text-muted { color: var(--tec-muted) !important; } html body.tec-pos hr { border-color: var(--tec-border) !important; } /* ---- Recibo: siempre sobre blanco, tambien en modo oscuro ---- */ html body.tec-pos .print_section, html body.tec-pos .invoice, html body.tec-pos .print_section *, html body.tec-pos .invoice * { background: #FFFFFF !important; color: #000000 !important; } @media print { html body.tec-pos { background: #FFFFFF !important; color: #000000 !important; } } /* ---- Barras de desplazamiento ---- */ html body.tec-pos ::-webkit-scrollbar { width: 10px; height: 10px; } html body.tec-pos ::-webkit-scrollbar-track { background: transparent; } html body.tec-pos ::-webkit-scrollbar-thumb { background: var(--tec-border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } /* ---- Pantallas pequenas y tabletas ---- */ @media (max-width: 767px) { html body.tec-pos .pos-form-actions .btn { padding: 12px 12px !important; font-size: 13px !important; } html body.tec-pos .pos-form-actions .lead, html body.tec-pos .pos-form-actions .text-bold { font-size: 19px !important; } html body.tec-pos .product_box .text_div .text { min-height: 0; } } /* -------------------------------------------------------------------------- 27. Punto de Venta: profundidad y jerarquia -------------------------------------------------------------------------- La seccion 26 dejo tarjetas blancas sobre un fondo casi blanco: sin contraste entre capas, la pantalla se leia plana. Aqui se introduce un lienzo mas oscuro que las tarjetas, sombras reales y acentos de color en los puntos donde el cajero necesita fijar la vista (precio, total, cobro). -------------------------------------------------------------------------- */ :root { --tec-pos-canvas: #E7EDF6; --tec-pos-tile-top: #F2F6FC; } html[data-tec-theme="dark"] { --tec-pos-canvas: #0B1017; --tec-pos-tile-top: #202C42; } /* ---- Lienzo: mas oscuro que las tarjetas para que estas destaquen ---- */ html body.tec-pos, html body.tec-pos .content-wrapper, html body.tec-pos .wrapper, html body.tec-pos .content, html body.tec-pos .pos_product_div { background: var(--tec-pos-canvas) !important; } /* ---- Barra superior ---- */ html body.tec-pos .pos-header { background: var(--tec-shell-bg) !important; border-radius: 0 !important; margin-bottom: 16px; padding: 11px 16px !important; box-shadow: 0 2px 10px rgba(16, 24, 40, .16); } /* ---- Tarjeta de producto ---- */ html body.tec-pos .product_box { background: var(--tec-surface) !important; border: 1px solid var(--tec-border) !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .08) !important; overflow: hidden; transition: transform .14s ease, box-shadow .2s ease, border-color .15s ease; } html body.tec-pos .product_box:hover { transform: translateY(-3px); border-color: var(--tec-primary) !important; box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 12px 24px rgba(27, 95, 168, .18) !important; } /* Zona superior: fondo con matiz, nunca un rectangulo blanco vacio. Solo background-color, para no pisar la foto del producto. */ html body.tec-pos .product_box .image-container { background-color: var(--tec-pos-tile-top) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; padding: 18px 10px !important; min-height: 86px; display: flex; align-items: center; justify-content: center; } html body.tec-pos .product_box .image-container i, html body.tec-pos .product_box .image-container .fa, html body.tec-pos .product_box .image-container .fas { color: var(--tec-primary) !important; font-size: 32px; opacity: .85; } /* Producto sin foto: icono dibujado por CSS en vez de una imagen generica. La plantilla anade la clase .no-image cuando no hay media ni product_image. */ html body.tec-pos .product_box .image-container.no-image { background-image: none !important; background-color: var(--tec-primary-soft) !important; } html body.tec-pos .product_box .image-container.no-image::before { content: "\f466"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 30px; line-height: 1; color: var(--tec-primary); opacity: .45; } html body.tec-pos .product_box .text_div { background: var(--tec-surface) !important; border-top: 0 !important; padding: 11px 10px 0 !important; } html body.tec-pos .product_box .text_div .text { color: var(--tec-text) !important; font-size: 12.5px !important; font-weight: 650 !important; line-height: 1.3; letter-spacing: -0.005em; } /* Franja de precio: el dato que el cajero busca primero */ html body.tec-pos .product_box .text_div .text:last-child, html body.tec-pos .product_box .text_div p:last-child, html body.tec-pos .product_box .text_div span[class*="price"] { display: block !important; margin: 10px -10px 0 !important; padding: 9px 10px !important; background: var(--tec-primary) !important; color: #FFFFFF !important; font-size: 14.5px !important; font-weight: 750 !important; letter-spacing: -0.01em; text-align: center; } /* ---- Panel de venta: tarjeta elevada, no una superficie plana ---- */ html body.tec-pos .box { background: var(--tec-surface) !important; border: 1px solid var(--tec-border) !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 8px 24px rgba(16, 24, 40, .07) !important; } html[data-tec-theme="dark"] body.tec-pos .box { box-shadow: 0 2px 6px rgba(0, 0, 0, .45) !important; } /* ---- Tabla de la venta ---- */ html body.tec-pos table > thead > tr > th { background: var(--tec-surface-alt) !important; border-bottom: 2px solid var(--tec-border) !important; font-size: 11px; letter-spacing: .07em; } html body.tec-pos table > tbody > tr > td { padding: 12px 10px !important; font-size: 13.5px; } /* Subtotal de cada linea, con peso suficiente para leerse de un vistazo */ html body.tec-pos table > tbody > tr > td:nth-last-child(2) { font-weight: 700; font-size: 14px; color: var(--tec-text) !important; } /* ---- Barra inferior ---- */ html body.tec-pos .pos-form-actions { background: var(--tec-surface) !important; border-top: 1px solid var(--tec-border) !important; box-shadow: 0 -4px 20px rgba(16, 24, 40, .10) !important; padding: 8px 14px !important; } html[data-tec-theme="dark"] body.tec-pos .pos-form-actions { box-shadow: 0 -4px 20px rgba(0, 0, 0, .5) !important; } /* Los botones de cobro NO llevan la clase .btn: son