@import url('https://api.fontshare.com/v2/css?f[]=garet@1,2&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* TUQUIPU-MOD SQ-32: Plus Jakarta Sans para el redisenio del login. Movido
aca desde el medio del archivo porque @import debe ir al top del CSS
sino los browsers lo ignoran (review SQ-32 warning #1). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root {
--primary-color: #7700e6;
/* Tipografía */
--tq-font-display: 'Garet', system-ui, -apple-system, sans-serif;
--tq-font-primary: 'Inter', system-ui, -apple-system, sans-serif;
--tq-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
/* Marca */
--tq-primary-color: #7700e6; /* morado principal (CTA, botones) */
--tq-secondary-color: #4f46e5; /* indigo (montos, acentos fuertes) */
--tq-light-color: #c5c7c8; /* bordes, divisores */
--tq-accent-color: #00e6d2; /* teal (positivo, destacados) */
--tq-accent-color-muted: #c5c7c8;
--tq-highlight-color: #d7baff; /* lavanda (badges, hovers suaves) */
--tq-success-soft: #b4fff3; /* menta (fondos "aceptado") */
/* Texto */
--tq-dark-color: #1a1f2e; /* texto principal */
--tq-text-muted: #6b7280; /* texto secundario (labels, subtítulos) */
/* Superficies */
--tq-light-color: #f9fafb; /* fondo general */
--tq-white: #ffffff; /* tarjetas, superficies */
/* Estados semánticos */
--primary: #7700e6; /* acción principal */
--success: #10B981; /* verde vibrante */
--danger: #F43F5E; /* rojo intenso */
--warning: #F59E0B; /* ámbar brillante */
--info: #4F46E5; /* azul cian vivo */
}
html,
body {
font-family: var(--tq-font-primary, sans-serif) !important;
}
body {
background-color: color-mix(in srgb, var(--tq-white) 10%, var(--tq-light-color));
color: var(--tq-dark-color);
margin: 0;
padding: 0;
}
html.fixed.sidebar-white .sidebar-left, html.fixed.sidebar-white .sidebar-header, html.fixed.sidebar-white .sidebar-left .nano{
background-color: color-mix(in srgb, var(--tq-light-color) 97%, #000) !important;
box-shadow: none;
border-right: 1px solid color-mix(in srgb, var(--tq-light-color) 97%, #000);
}
.sidebar-left{
width: 256px;
}
html.sidebar-light ul.nav-main > li > a{
margin: 0 16px;
}
ul.nav-main li.nav-active:not(.nav-parent) > a, ul.nav-main li .nav-children li.nav-active:not(.nav-parent) > a {
background: var(--tq-white);
color: var(--tq-primary-color) !important;
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 0.05);
border-radius: 46px !important;
}
ul.nav-main li.nav-active:not(.nav-parent) > a.dashboard-link {
color: var(--tq-primary-color) !important;
}
html.fixed.sidebar-white .sidebar-left a{
color: var(--tq-text-muted);
font-weight: 600;
}
html.fixed .sidebar-left a svg {
stroke-width: 1.6px !important;
}
.header {
height: 74px;
left: 256px;
border-bottom: 1px solid color-mix(in srgb, var(--tq-white) 10%, var(--tq-light-color));
background-color: color-mix(in srgb, var(--tq-white) 10%, var(--tq-light-color));
}
.actions-card .card-body {
background-color: transparent !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.actions-cards-row .col a {
color: var(--tq-text-muted) !important;
box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
border: 1px solid color-mix(in srgb, var(--tq-white) 96%, #000) !important;
border-radius: 2rem !important;
}
.card-header {
border-bottom: 1px solid color-mix(in srgb, var(--tq-white) 10%, var(--tq-light-color));
}
.card-body, .card.card-dashboard.border {
border: 1px solid color-mix(in srgb, var(--tq-white) 96%, #000);
box-shadow: none;
}
/* .card.card-dashboard {
} */
.card.card-dashboard .card-body.card-kpi {
display: flex;
flex-direction: column-reverse;
gap: 8px;
}
.card.card-dashboard .card-body {
background-color: var(--tq-white);
margin-top: 0.6rem;
border-radius: 2rem;
box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}
.card-body {
color: var(--tq-text-muted);
padding: 1.3rem;
background-color: var(--tq-white);
box-shadow: 0 8px 32px rgba(89, 0, 174, 0.04);
border-radius: 3rem;
}
.card-header + .card-body {
border-radius: 0 0 3rem 3rem !important;
}
.card .card-header {
border-radius: 2rem 2rem 0 0 !important;
background-color: var(--tq-primary-color) !important;
color: #fff !important;
}
.card .card-header h3,
.card .card-header h4 {
color: #fff !important;
}
.card.card-dashboard .card-body h3,
.txt-dark {
color: var(--tq-dark-color);
}
.card.card-dashboard .card-body small {
text-transform: uppercase;
font-weight: 600;
width: calc(100% - 28px);
white-space: nowrap; /* evita salto de línea */
overflow: hidden; /* oculta lo que se desborda */
text-overflow: ellipsis; /* agrega ... */
}
html.sidebar-light:not(.dark) .page-header {
border: none;
background: color-mix(in srgb, var(--tq-white) 10%, var(--tq-light-color));
box-shadow: none;
padding: 0 32px 0 40px !important;
}
.page-header h2 {
border: none;
font-size: 1.875rem !important;
font-weight: 700;
padding: 0;
color: var(--tq-dark-color);
font-family: var(--tq-font-display);
}
html.sidebar-light:not(.dark) .page-header h2 {
color: var(--tq-dark-color);
}
.row.top .card.card-dashboard i.fas {
position: absolute;
right: 16px;
opacity: 1;
overflow: hidden;
z-index: 0;
font-size: 16px;
top: 25px;
background: color-mix(in srgb, var(--tq-primary-color) 8%, #ffffff00);
color: color-mix(in srgb, var(--tq-primary-color) 80%, #fff);
padding: 5px;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-toggle-container .sidebar-toggle {
height: 32px !important;
border-right: unset;
border: 1px solid color-mix(in srgb, var(--tq-light-color) 80%, #000);
width: 40px !important;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px !important;
margin-left: 5px;
background-color: transparent !important;
color: var(--tq-dark-color) !important;
}
.sidebar-toggle-container .sidebar-toggle:hover {
background-color: var(--tq-white) !important;
}
.sidebar-header.sidebar-header-desktop .logo-container-sidebar {
width: 100%;
max-width: 100%;
padding: 0 !important;
}
.sidebar-left .sidebar-header {
color: #777;
height: 74px;
display: flex;
align-items: center;
justify-content: start;
padding: 16px 16px 3px 16px;
margin-bottom: 1rem;
}
.sidebar-left .sidebar-header .logo img {
max-height: 60px;
}
.header .separator {
opacity: 0;
margin: 0 8px;
}
.header .separator.show-left {
opacity: 1;
margin: 0 8px;
height: 32px;
background-color: color-mix(in srgb, var(--tq-light-color) 98%, #000);
}
.notifications > li .notification-icon svg {
width: 20px;
height: 20px;
stroke-width: 1.8px !important;
color: var(--tq-text-muted);
}
.header .logo-container .topbar-links {
margin-top: 0px;
height: 92%;
background: var(--tq-white);
border-radius: 10px;
color: var(--tq-dark-color) !important;
padding: 0 .85rem;
border-bottom: 1px solid transparent;
transition: all 0.2s ease;
}
.topbar-links-container {
padding-top: 8px;
padding-bottom: 4px;
}
.header .logo-container .topbar-links:hover {
background-color: var(--tq-white);
border-color: var(--tq-primary-color);
box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}
button, .btn{
border-radius: 9999px !important;
font-family: var(--tq-font-display);
}
.el-button, .second-buton, .btn-default {
background: #FFFFFF;
border: 1px solid color-mix(in srgb, var(--tq-light-color) 98%, #000);
color: var(--tq-dark-color);
margin: 0;
padding: 0.625rem 1.5rem;
font-size: 0.875rem;
}
.el-button:hover, .second-buton:hover, .btn-default:hover,
.el-button:focus, .second-buton:focus, .btn-default:focus,
.el-button:active, .second-buton:active, .btn-default:active {
background: color-mix(in srgb, var(--tq-primary-color) 8%, #ffffff);
border-color: color-mix(in srgb, var(--tq-primary-color) 8%, #ffffff00);
color: var(--tq-dark-color);
margin: 0;
}
.btn-custom {
background-color: var(--tq-primary-color);
padding: 7px 15px;
font-size: 13px;
color: #FFFFFF;
}
html.sidebar-white .el-button--primary, .el-button--primary, .btn-primary {
background-color: var(--tq-primary-color);
border-color: var(--tq-primary-color);
color: #fff;
box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
padding: 0.625rem 1.5rem;
font-size: 0.875rem;
}
html.sidebar-white .el-button--primary:hover, .el-button--primary:hover, .btn-custom:hover,
html.sidebar-white .el-button--primary:focus, .el-button--primary:focus, .btn-custom:focus,
html.sidebar-white .el-button--primary:active, .el-button--primary:active, .btn-custom:active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: var(--tq-primary-color);
border-color: var(--tq-primary-color);
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 10px 15px -3px color-mix(in srgb, var(--tq-primary-color) 30%, #ffffff00), 0 4px 6px -4px color-mix(in srgb, var(--tq-primary-color) 30%, #ffffff00);
color: #fff;
}
.text-muted {
color: var(--tq-text-muted) !important;
}
.name-initials-container {
width: 35px !important;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50% !important;
border: none !important;
background: color-mix(in srgb, var(--tq-primary-color) 8%, #ffffff00);
color: color-mix(in srgb, var(--tq-primary-color) 80%, #fff);
margin-top: 4px;
}
.name-initials-container .name-initials {
display: block !important;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}
.profile-info-pc, .svg-profile {
display: none !important;
}
.userbox .profile-info, .userbox .profile-picture {
margin-right: 40px;
}
.btn-info {
background-color: var(--info) !important;
border-color: var(--info) !important;
color: #fff !important;
}
.btn-info:hover,
.btn-info.hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
background-color: var(--info) !important;
border-color: var(--info) !important;
color: #fff !important;
opacity: 0.8;
}
.btn-info:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 30%, transparent) !important;
}
.btn-info:disabled,
.btn-info.disabled {
background-color: var(--info) !important;
border-color: var(--info) !important;
color: #fff !important;
opacity: 0.45;
pointer-events: none;
}
.btn-success,
.el-button--success {
background-color: var(--success) !important;
border-color: var(--success) !important;
color: #fff !important;
}
.btn-success:hover,
.btn-success.hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.el-button--success:hover,
.el-button--success.hover,
.el-button--success:focus,
.el-button--success:active {
background-color: var(--success) !important;
border-color: var(--success) !important;
color: #fff !important;
opacity: 0.8;
}
.btn-success:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 30%, transparent) !important;
}
.btn-success:disabled,
.btn-success.disabled,
.el-button--success.is-disabled,
.el-button--success.is-disabled:hover {
background-color: var(--success) !important;
border-color: var(--success) !important;
color: #fff !important;
opacity: 0.45;
pointer-events: none;
}
.btn-danger,
.el-button--danger {
background-color: var(--danger) !important;
border-color: var(--danger) !important;
color: #fff !important;
}
.btn-danger:hover,
.btn-danger.hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.el-button--danger:hover,
.el-button--danger.hover,
.el-button--danger:focus,
.el-button--danger:active {
background-color: var(--danger) !important;
border-color: var(--danger) !important;
color: #fff !important;
opacity: 0.8;
}
.btn-danger:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent) !important;
}
.btn-danger:disabled,
.btn-danger.disabled,
.el-button--danger.is-disabled,
.el-button--danger.is-disabled:hover {
background-color: var(--danger) !important;
border-color: var(--danger) !important;
color: #fff !important;
opacity: 0.45;
pointer-events: none;
}
.btn-warning,
.el-button--warning {
background-color: var(--warning) !important;
border-color: var(--warning) !important;
color: #fff !important;
}
.btn-warning:hover,
.btn-warning.hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.el-button--warning:hover,
.el-button--warning.hover,
.el-button--warning:focus,
.el-button--warning:active {
background-color: var(--warning) !important;
border-color: var(--warning) !important;
color: #fff !important;
opacity: 0.8;
}
.btn-warning:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 30%, transparent) !important;
}
.btn-warning:disabled,
.btn-warning.disabled,
.el-button--warning.is-disabled,
.el-button--warning.is-disabled:hover {
background-color: var(--warning) !important;
border-color: var(--warning) !important;
color: #fff !important;
opacity: 0.45;
pointer-events: none;
}
label.control-label,
.el-form-item__label {
color: color-mix(in srgb, var(--tq-dark-color) 80%, #dddddd);
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
}
.el-input--small .el-input__inner {
height: 36px;
line-height: 36px;
}
.el-input__inner, .el-textarea__inner,
.el-input-group__prepend div.el-select .el-input__inner,
.el-input-group__prepend div.el-select .el-input__inner, .el-input-group__prepend div.el-select:hover .el-input__inner {
background-color: color-mix(in srgb, var(--tq-light-color) 98%, #000);
border: 1px solid color-mix(in srgb, var(--tq-light-color) 98%, #000);
border-radius: 2rem;
color: var(--tq-dark-color);
}
.el-input-group__append, .el-input-group__prepend{
border-color: transparent;
}
.el-input__inner:hover,
.el-select:hover .el-input__inner,
.el-textarea__inner:hover{
border-color: color-mix(in srgb, var(--tq-light-color) 98%, #000);
}
.el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner,
.el-input.is-active .el-input__inner, .el-input__inner:focus,
.el-select .el-input__inner:focus,
.el-textarea__inner:focus,
.el-input-group--append .el-select .el-input.is-focus .el-input__inner, .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner {
border-color: var(--tq-highlight-color);
}
.el-dialog__wrapper,
.style-switcher-backdrop,
.support-backdrop {
background-color: rgb(46 49 50 / 0.4);
backdrop-filter: blur(12px);
}
.visual-bg-container, .theme-color-selector{
display: none;
}
@media only screen and (min-width: 768px) {
html.fixed .content-body {
margin-left: 256px;
}
html.fixed .page-header {
left: 256px;
top: 74px;
}
html.sidebar-left-collapsed .sidebar-left:has(.nano.hovered) {
width: 256px;
}
}
ul.nav-main li .nav-children li a:before{
content: none;
}
ul.nav-main li .nav-children li a {
padding: 4px 8px;
margin-bottom: 4px;
margin-left: 10px;
}
ul.nav-main li.nav-parent > ul.nav-children {
margin: 0 22px 0 31px;
}
html.fixed.sidebar-white .sidebar-left ul.nav-children li:after {
content: "";
position: absolute;
top: -2.5px;
left: 0px;
width: 1.5px;
height: 116%;
background-color: color-mix(in srgb, var(--tq-light-color) 80%, #000000);
}
html.fixed.sidebar-white .sidebar-left ul.nav-children, html.fixed.sidebar-white .sidebar-left ul.nav-children li {
position: relative;
}
ul.nav-main li.nav-expanded > a,
ul.nav-main li.nav-parent > ul.nav-children {
background-color: color-mix(in srgb, var(--tq-light-color) 97%, #000);
}
ul.nav-main li li a:hover {
padding-left: 10px !important;
}
html.fixed.sidebar-white .sidebar-left ul.nav-children li:has(a:hover)::before,
html.fixed.sidebar-white .sidebar-left ul.nav-children li.nav-active:not(.nav-parent)::before {
content: "";
position: absolute;
top: 5px;
left: -1px;
width: 3px;
border-radius: 26px;
background-color: var(--tq-primary-color);
z-index: 1;
height: 20px;
margin: auto;
}
html.fixed.sidebar-white .sidebar-left ul.nav-children li.nav-active:not(.nav-parent)::before {
height: 26px;
top: 2px;
}
html.sidebar-light:not(.dark) .page-header .breadcrumbs a, html.sidebar-light:not(.dark) .page-header .breadcrumbs span {
color: var(--tq-dark-color);
}
.page-header .breadcrumbs a, .page-header .breadcrumbs span {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
font-family: var(--tq-font-display);
}
.page-header .breadcrumbs span.text-muted {
font-size: 1rem;
}
.page-header h2 a svg,
.page-header h2 a i {
display: none;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--tq-light-color);
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--tq-text-muted);
}
* {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, rgb(231 232 233), transparent) transparent;
}
.table {
margin-bottom: 0;
}
.table>:not(caption)>*>* {
border-bottom: 1px solid color-mix(in srgb, var(--tq-light-color) 98%, #000);
color: var(--tq-dark-color);
font-size: 0.875rem;
}
.tq-mono, .num, code, pre {
font-family: var(--tq-font-mono);
font-variant-numeric: tabular-nums;
}
.table-responsive {
border: 1px solid color-mix(in srgb, var(--tq-light-color) 98%, #000);
border-radius: 1rem !important;
margin-bottom: 8px;
}
.table-responsive table thead tr th {
background-color: color-mix(in srgb, var(--tq-light-color) 100%, #00000000);
}
.table-responsive table tbody tr:hover td {
background-color: rgb(248 250 252 / 0.8);
}
.fa-ellipsis-v {
display: none;
}
.fa-ellipsis-h {
display: block !important;
}
.btn-dropdown-toggle, .btn-dropdown {
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background-color: transparent;
color: var(--tq-text-muted);
box-shadow: none;
padding: 0;
}
.btn-dropdown-toggle:hover, .btn-dropdown:hover {
background-color: color-mix(in srgb, var(--tq-primary-color) 8%, #ffffff00);
color: var(--tq-primary-color);
}
.shadow-left {
left: 5px;
background: linear-gradient(to right, rgb(0 0 0 / 11%), transparent);
border-radius: 6px 0 0 6px;
}
.shadow-right {
right: 5px;
background: linear-gradient(to left, rgb(0 0 0 / 11%), transparent);
border-radius: 0 6px 6px 0;
}
table thead tr th {
color: var(--tq-text-muted) !important;
text-transform: uppercase;
font-weight: 600;
font-size: 11px !important;
}
.el-dialog {
border-radius: 2rem;
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 32px 64px -12px rgba(0,0,0,0.14);
background-color: var(--tq-white);
}
.el-dialog__header {
padding: 1.5rem 2rem;
}
.el-dialog__body {
padding: 0 2rem 1rem 2rem;
color: var(--tq-text-muted);
font-size: 14px;
word-break: break-all;
}
.el-dialog__footer {
padding: .5rem 2rem 1.5rem 2rem;
text-align: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.el-dialog__title {
line-height: 1.75rem;
font-size: 1.25rem;
color: var(--tq-dark-color);
font-weight: 700;
letter-spacing: -0.025em;
font-family: var(--tq-font-display);
}
.el-popper[x-placement^=bottom] .popper__arrow:after,
.el-popper .popper__arrow, .el-popper .popper__arrow:after {
opacity: 0;
}
.el-select-dropdown,
.el-dropdown-menu,
.dropdown-menu-desktop,
.list-config,
.el-picker-panel,
.dropdown-menu {
border: none;
border-radius: 2rem;
background-color: var(--tq-white);
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.el-select-dropdown__list,
.el-dropdown-menu--small,
.dropdown-menu-desktop,
.list-config,
.dropdown-menu {
padding: 10px 10px;
}
.el-select-dropdown__item.hover,
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover,
.dropdown-menu-desktop ul li a:hover,
ul.nav.list-config li:hover,
.dropdown-item:focus, .dropdown-item:hover {
background-color: color-mix(in srgb, var(--tq-primary-color) 8%, #ffffff00);
border-radius: 1rem;
}
.el-select-dropdown__item,
.el-dropdown-menu__item,
.dropdown-menu-desktop ul li a {
color: var(--tq-text-muted);
}
.el-select-dropdown__item.selected {
color: color-mix(in srgb, var(--tq-primary-color) 90%, #000);
font-weight: 600;
}
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover,
.dropdown-menu-desktop ul li a:hover,
ul.nav.list-config li:hover {
color: color-mix(in srgb, var(--tq-primary-color) 90%, #000);
}
.el-dropdown-menu__item--divided {
border-color: color-mix(in srgb, var(--tq-light-color) 98%, #000);
}
.dropdown-menu-desktop .divider {
background-color: color-mix(in srgb, var(--tq-light-color) 98%, #000);
}
.list-config,
.establishment-dropdown {
border: none !important;
border-radius: 2rem !important;
background-color: var(--tq-white) !important;
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
}
.list-config {
padding: 10px 10px !important;
}
.dropdown-menu-desktop ul li a:hover,
ul.nav.list-config li:hover {
background-color: color-mix(in srgb, var(--tq-primary-color) 8%, #ffffff00) !important;
border-radius: 1rem !important;
}
ul.nav.list-config li:hover a.nav-link {
color: color-mix(in srgb, var(--tq-primary-color) 90%, #000) !important;
}
.nav.list-config li a.nav-link {
font-weight: 400;
}
.establishment-dropdown-header {
border-radius: 2rem 2rem 0 0 !important;
background-color: var(--tq-light-color) !important;
color: var(--tq-dark-color) !important;
}
/* ─── Element UI: btn-info / el-button--info ─────────────────────────────── */
.btn-info,
.el-button--info {
background-color: var(--info) !important;
border-color: var(--info) !important;
color: #fff !important;
}
.el-button--info:hover,
.el-button--info:focus,
.el-button--info:active {
background-color: var(--info) !important;
border-color: var(--info) !important;
color: #fff !important;
opacity: 0.8;
}
.el-button--info.is-disabled,
.el-button--info.is-disabled:hover {
background-color: var(--info) !important;
border-color: var(--info) !important;
color: #fff !important;
opacity: 0.45;
pointer-events: none;
}
/* ─── Element UI: btn-primary / el-button--primary disabled ─────────────── */
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover,
.btn-primary:disabled,
.btn-primary.disabled {
background-color: var(--primary) !important;
border-color: var(--primary) !important;
color: #fff !important;
opacity: 0.45;
pointer-events: none;
}
.el-button--primary:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}
/* ─── Utilidades de texto ────────────────────────────────────────────────── */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.anulate_color, .anulate_color td, .text-danger td {
color: var(--danger) !important;
}
/* ─── Utilidades de fondo sólido ─────────────────────────────────────────── */
.bg-secondary { background-color: color-mix(in srgb, rgb(0 25 175) 10%, #ffffff00) !important; color: rgb(0 25 175) !important; }
.bg-primary { background-color: color-mix(in srgb, var(--primary) 10%, #ffffff00) !important; color: var(--primary) !important; }
.bg-success { background-color: color-mix(in srgb, var(--success) 10%, #ffffff00) !important; color: var(--success) !important; }
.bg-danger { background-color: color-mix(in srgb, var(--danger) 10%, #ffffff00) !important; color: var(--danger) !important; }
.bg-warning { background-color: color-mix(in srgb, var(--warning) 10%, #ffffff00) !important; color: var(--warning) !important; }
.bg-info { background-color: color-mix(in srgb, var(--info) 10%, #ffffff00) !important; color: var(--info) !important; }
/* ─── Utilidades de fondo suave (10 % opacidad) ──────────────────────────── */
.bg-primary-soft { background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important; color: var(--primary) !important; }
.bg-success-soft { background-color: color-mix(in srgb, var(--success) 12%, transparent) !important; color: color-mix(in srgb, var(--success) 80%, #000) !important; }
.bg-danger-soft { background-color: color-mix(in srgb, var(--danger) 10%, transparent) !important; color: color-mix(in srgb, var(--danger) 80%, #000) !important; }
.bg-warning-soft { background-color: color-mix(in srgb, var(--warning) 15%, transparent) !important; color: color-mix(in srgb, var(--warning) 70%, #000) !important; }
.bg-info-soft { background-color: color-mix(in srgb, var(--info) 10%, transparent) !important; color: color-mix(in srgb, var(--info) 80%, #000) !important; }
/* ─── Utilidades de borde ────────────────────────────────────────────────── */
.border-primary { border-color: var(--primary) !important; }
.border-success { border-color: var(--success) !important; }
.border-danger { border-color: var(--danger) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-info { border-color: var(--info) !important; }
/* ─── Element UI: Tags / Badges ──────────────────────────────────────────── */
.el-tag {
border-radius: 9999px;
font-size: 11px;
font-weight: 600;
padding: 0 10px;
height: 22px;
line-height: 22px;
}
.el-tag--success,
.badge-success {
background-color: color-mix(in srgb, var(--success) 12%, transparent);
border-color: color-mix(in srgb, var(--success) 20%, transparent);
color: color-mix(in srgb, var(--success) 80%, #000);
}
.el-tag--danger,
.badge-danger {
background-color: color-mix(in srgb, var(--danger) 10%, transparent);
border-color: color-mix(in srgb, var(--danger) 20%, transparent);
color: color-mix(in srgb, var(--danger) 80%, #000);
}
.el-tag--warning,
.badge-warning {
background-color: color-mix(in srgb, var(--warning) 15%, transparent);
border-color: color-mix(in srgb, var(--warning) 25%, transparent);
color: color-mix(in srgb, var(--warning) 70%, #000);
}
.el-tag--info,
.badge-info {
background-color: color-mix(in srgb, var(--info) 10%, transparent);
border-color: color-mix(in srgb, var(--info) 20%, transparent);
color: color-mix(in srgb, var(--info) 80%, #000);
}
.el-tag--primary,
.badge-primary {
background-color: color-mix(in srgb, var(--primary) 10%, transparent);
border-color: color-mix(in srgb, var(--primary) 20%, transparent);
color: var(--primary);
}
/* ─── Element UI: Alertas ────────────────────────────────────────────────── */
.el-alert {
border-radius: 1rem;
border: none;
}
.el-alert--success {
background-color: color-mix(in srgb, var(--success) 10%, transparent);
color: color-mix(in srgb, var(--success) 80%, #000);
}
.el-alert--success .el-alert__title,
.el-alert--success .el-alert__icon {
color: color-mix(in srgb, var(--success) 80%, #000);
}
.el-alert--error {
background-color: color-mix(in srgb, var(--danger) 10%, transparent);
color: color-mix(in srgb, var(--danger) 80%, #000);
}
.el-alert--error .el-alert__title,
.el-alert--error .el-alert__icon {
color: color-mix(in srgb, var(--danger) 80%, #000);
}
.el-alert--warning {
background-color: color-mix(in srgb, var(--warning) 12%, transparent);
color: color-mix(in srgb, var(--warning) 70%, #000);
}
.el-alert--warning .el-alert__title,
.el-alert--warning .el-alert__icon {
color: color-mix(in srgb, var(--warning) 70%, #000);
}
.el-alert--info {
background-color: color-mix(in srgb, var(--info) 10%, transparent);
color: color-mix(in srgb, var(--info) 80%, #000);
}
.el-alert--info .el-alert__title,
.el-alert--info .el-alert__icon {
color: color-mix(in srgb, var(--info) 80%, #000);
}
/* ─── Bootstrap badges ───────────────────────────────────────────────────── */
.badge {
border-radius: 9999px;
font-size: 11px;
font-weight: 600;
padding: 6px 9px;
}
/* ─── Element UI: Notificaciones / Message ───────────────────────────────── */
.el-notification.success .el-notification__icon { color: var(--success) !important; }
.el-notification.error .el-notification__icon { color: var(--danger) !important; }
.el-notification.warning .el-notification__icon { color: var(--warning) !important; }
.el-notification.info .el-notification__icon { color: var(--info) !important; }
.el-message--success { background-color: color-mix(in srgb, var(--success) 10%, #fff); border-color: color-mix(in srgb, var(--success) 20%, #fff); color: var(--success) !important; }
.el-message--success .el-message__icon { color: var(--success) !important; }
.el-message--error { background-color: color-mix(in srgb, var(--danger) 10%, #fff); border-color: color-mix(in srgb, var(--danger) 20%, #fff); color: var(--danger) !important; }
.el-message--error .el-message__icon { color: var(--danger) !important; }
.el-message--warning { background-color: color-mix(in srgb, var(--warning) 12%, #fff); border-color: color-mix(in srgb, var(--warning) 22%, #fff); color: var(--warning) !important; }
.el-message--warning .el-message__icon { color: var(--warning) !important; }
.el-message--info { background-color: color-mix(in srgb, var(--info) 10%, #fff); border-color: color-mix(in srgb, var(--info) 20%, #fff); color: var(--info) !important; }
.el-message--info .el-message__icon { color: var(--info) !important;}
.el-message--success .el-message__content, .el-message .el-icon-success {
color: var(--success) !important;
}
.el-message--error .el-message__content, .el-message .el-icon-error {
color: var(--danger) !important;
}
.el-message--warning .el-message__content, .el-message .el-icon-warning {
color: var(--warning) !important;
}
.el-message--info .el-message__content, .el-message .el-icon-info {
color: var(--info) !important;
}
/* ---------------------------------------------------------------- */
@media only screen and (min-width: 767px) {
html.no-overflowscrolling .nano {
height: calc(100% - 78px) !important;
}
html.no-overflowscrolling .sidebar-left.show-branch-selector .nano,
html.no-overflowscrolling .sidebar-left:has(.nano.hovered).show-branch-selector .nano {
height: calc(100% - 163px) !important;
}
html.no-overflowscrolling .sidebar-left.show-both-selectors .nano,
html.no-overflowscrolling .sidebar-left:has(.nano.hovered).show-both-selectors .nano {
height: calc(100% - 231px) !important;
}
html.no-overflowscrolling.sidebar-left-collapsed .sidebar-left.show-branch-selector .nano,
html.no-overflowscrolling.sidebar-left-collapsed .sidebar-left.show-both-selectors .nano {
height: calc(100% - 124px) !important;
}
}
html.sidebar-light .establishment-selector-container {
padding: 0 16px .5rem 16px;
}
.contain-icon-establishment {
margin: 0 16px 8px 16px;
padding: 10px 11px 10px 11px;
display: flex;
align-items: center;
justify-content: center;
color: var(--black-dark);
cursor: pointer;
border-radius: 8px;
}
.contain-icon-establishment:hover, .contain-icon-establishment.active {
background: var(--tq-white);
color: var(--tq-primary-color) !important;
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 0.05);
border-radius: 46px !important;
}
.support-header {
background: var(--tq-white);
color: var(--tq-dark-color);
padding: 1.5rem !important;
font-size: 1.25rem;
font-weight: 600;
font-family: var(--tq-font-display);
border-bottom: 1px solid color-mix(in srgb, var(--tq-light-color) 98%, #000);
}
.support-header .close-btn {
color: var(--tq-text-muted);
}
.support-body {
padding: 1.5rem;
}
.body-visual {
padding: 1.5rem !important;
}
.body-visual .sidebar-compact-selector-container {
padding-top: 0 !important;
}
a, p {
color: var(--tq-text-muted);
}
a:hover, a:focus,
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
color: var(--tq-dark-color);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: var(--tq-font-display);
}
div#styleSwitcher * {
font-family: var(--tq-font-primary);
}
.style-switcher h5 {
color: var(--tq-dark-color);
font-size: 1.25rem;
font-weight: 600;
font-family: var(--tq-font-display);
}
.el-switch.is-checked .el-switch__core {
border-color: var(--tq-primary-color);
background-color: var(--tq-primary-color);
}
.el-switch__label.is-active {
color: var(--tq-primary-color);
}
.dialog-close-btn button {
border: none !important;
padding: 5px !important;
box-shadow: none !important;
}
.tab-content {
border: 1px solid color-mix(in srgb, var(--tq-white) 96%, #000);
padding: 1.3rem;
background-color: var(--tq-white);
box-shadow: 0 8px 32px rgba(89, 0, 174, 0.04);
border-radius: 3rem;
}
.invoice header {
border-color: color-mix(in srgb, var(--tq-light-color) 98%, #000);
}
.invoice table.table > thead:first-child > tr > th {
background-color: color-mix(in srgb, var(--tq-light-color) 100%, #00000000);
border: none;
}
.invoice table.table > tbody tr > td {
border-color: transparent;
}
.invoice .table-responsive, .invoice table.table thead tr, .invoice table.table tbody tr, .invoice table.table thead tr th, .invoice table.table tbody tr td {
border: none !important;
}
.invoice .table-responsive table tbody tr:hover td {
background-color: transparent !important;
}
.toggle-button {
background-color: var(--tq-primary-color) !important;
opacity: 0.5;
}
.toggle-button:hover,
.toggle-button.shift {
opacity: 1;
}
.btn-add-new{
bottom: 8px;
}
.btn-add-new-invoice {
top: 24px;
right: 12px;
height: 36px;
display: flex;
align-items: center;
}
.el-input-group__append .el-button, .el-input-group__append .el-select, .el-input-group__prepend .el-button, .el-input-group__prepend .el-select {
margin: -10px -20px;
}
.additional-information {
padding: 0 1.5rem !important;
background-color: var(--tq-white) !important;
}
.product-search-model button.item {
display: flex;
align-items: center;
justify-content: center;
padding: 0 11px !important;
}
.product-search-model .el-tooltip {
position: absolute;
right: 6px !important;
top: 40px;
height: 36px;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: var(--tq-primary-color);
border-color: var(--tq-primary-color);
}
.el-checkbox__inner:hover {
border-color: var(--tq-primary-color);
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: color-mix(in srgb, var(--tq-primary-color) 90%, #000);
}
.el-input-number--small .el-input-number__decrease, .el-input-number--small .el-input-number__increase {
width: 32px;
height: 34px;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.el-input-number__decrease {
left: 1px;
border-radius: 2rem 0 0 2rem;
border-right: 1px solid #DCDFE6;
}
.el-input-number__increase {
right: 1px;
border-radius: 0 2rem 2rem 0;
border-left: 1px solid #DCDFE6;
}
.el-input-number__decrease:hover, .el-input-number__increase:hover {
color: var(--tq-primary-color);
}
.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
border-color: color-mix(in srgb, var(--tq-light-color) 98%, #000);
}
.btn-add-new-product {
background-color: var(--tq-primary-color);
color: #fff;
border: none;
padding: 0;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 4px;
}
.btn-add-new-product:hover {
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 10px 15px -3px color-mix(in srgb, var(--tq-primary-color) 30%, #ffffff00), 0 4px 6px -4px color-mix(in srgb, var(--tq-primary-color) 30%, #ffffff00);
background-color: var(--tq-primary-color);
color: #fff;
}
.product-model .tooltips-container {
position: absolute;
right: 7px;
top: 40px !important;
z-index: 10;
height: 32px;
border-top-right-radius: 2rem;
border-bottom-right-radius: 2rem;
}
.item-actions-tooltip button {
height: 34px !important;
width: 40px !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
.item-actions-tooltip button:first-child {
border-radius: 0 !important;
}
.item-actions-tooltip button:last-child {
border-radius: 0 2rem 2rem 0 !important;
}
.el-date-table td.current:not(.disabled) span {
color: #fff;
background-color: var(--tq-primary-color);
}
tbody, td, tfoot, th, thead, tr,
.el-month-table td .cell {
color: var(--tq-dark-color);
}
.el-date-table th {
text-transform: uppercase;
color: var(--tq-text-muted);
}
.el-date-picker__header-label {
color: var(--tq-text-muted);
}
.el-date-table td.available:hover,
.el-picker-panel__icon-btn:hover,
.el-date-picker__header-label.active, .el-date-picker__header-label:hover,
.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell,
.el-month-table td .cell:hover,
.el-month-table td.current:not(.disabled) .cell {
color: var(--tq-primary-color);
}
.el-tabs__item {
height: 35px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tq-text-muted);
}
.el-tabs__item:hover {
color: var(--tq-primary-color);
}
.el-tabs__item.is-active {
color: var(--tq-primary-color);
background: var(--tq-white);
border-radius: 46px;
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.el-tabs__nav {
background-color: var(--tq-light-color);
border-radius: 46px;
padding: 5px;
}
.el-tabs__nav-wrap:after {
content: none;
}
.el-input-group--append .el-input__inner, .el-input-group__prepend {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.el-input-group__prepend {
border-top-left-radius: 2rem;
border-bottom-left-radius: 2rem;
}
.btn-sunat-reniec {
height: 35px !important;
top: 10px !important;
display: flex !important;
align-items: center !important;
padding: 0 11px !important;
}
.add-row-table {
border: 1px dashed color-mix(in srgb, var(--tq-light-color) 98%, #000);
border-radius: 46px;
margin-top: 10px;
text-align: center;
margin: 10px;
padding: 6px;
cursor: pointer;
}
.add-row-table:hover {
border-color: var(--tq-primary-color);
background-color: color-mix(in srgb, var(--tq-primary-color) 10%, #ffffff);
}
.avatar-uploader .el-upload {
border-color: color-mix(in srgb, var(--tq-light-color) 98%, #000);
}
.avatar-uploader .el-upload:hover {
border-color: var(--tq-primary-color);
}
.el-pager li.active {
color: var(--tq-primary-color);
cursor: default;
}
.card.card-reports .card-title {
font-weight: bold;
color: var(--tq-dark-color);
font-family: var(--tq-font-display);
background: var(--tq-light-color);
border-radius: 46px;
padding: 8px 16px;
margin-bottom: 20px;
}
.el-checkbox__label {
text-transform: none !important;
}
.el-tabs--border-card {
background: var(--tq-white);
border: none;
box-shadow: 0 8px 32px rgba(89, 0, 174, 0.04);
border-radius: 3rem !important;
padding-top: 8px;
}
.el-tabs--border-card .el-tabs__header, .el-tabs--border-card .el-tabs__nav-wrap {
border-radius: 3rem;
margin: 0 8px;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
color: var(--tq-primary-color);
background-color: var(--tq-white);
border: none;
}
.el-tabs--border-card>.el-tabs__header {
background-color: transparent;
border: none;
}
.el-tab-ecommerce-config>.el-tabs__header {
background-color: var(--tq-light-color);
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item {
border: none;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item {
color: var(--tq-text-muted);
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
color: var(--tq-primary-color);
}
.cbm-card {
background: var(--tq-white) !important;
border: 1px solid color-mix(in srgb, var(--tq-white) 96%, #000) !important;
border-radius: 2rem !important;
box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}
.cbm-secondary-grid {
background: var(--tq-white) !important;
border: 1px solid color-mix(in srgb, var(--tq-white) 96%, #000) !important;
border-radius: 2rem !important;
box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
margin-top: 10px;
margin-top: 18px;
padding: 6px 0;
}
.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left {
border: none;
}
.el-tabs--left .el-tabs__nav-wrap.is-left {
margin: 0 ;
padding: 6px 10px;
}
.el-tabs--left .el-tabs__item.is-left {
text-align: left;
}
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active,
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left {
border: none;
display: flex;
align-items: center;
justify-content: flex-start;
}
.pdf-template-border {
border: 2px solid color-mix(in srgb, var(--tq-primary-color) 20%, #ffffff00) !important;
}
.pdf-template-content:hover>.el-card-template:before {
background-color: color-mix(in srgb, var(--tq-primary-color) 15%, #ffffff00) !important;
}
.pdf-template-border.active-border {
border: 2px solid var(--tq-primary-color) !important;
}
label.radio-button .el-radio__input {
display: none !important;
}
.radio-button.active-button {
background-color: var(--tq-primary-color) !important;
border-color: var(--tq-primary-color) !important;
}
.el-radio__input.is-checked+.el-radio__label {
color: #fff;
}
.radio-button:hover {
border-color: color-mix(in srgb, var(--tq-primary-color) 50%, #ffffff00) !important;
background-color: color-mix(in srgb, var(--tq-primary-color) 5%, #ffffff00) !important;
color: var(--tq-primary-color) !important;
}
.actions-cards-container .card .card-header {
background-color: transparent !important;
color: var(--tq-dark-color) !important;
}
.input-search-pos {
margin-top: 18px !important;
}
.pos .product-item,
.garage .product-item {
transition: box-shadow 200ms ease, transform 200ms ease;
cursor: pointer;
}
.card.product-item {
border-radius: 0.75rem !important;
border: 1px solid color-mix(in srgb, var(--tq-light-color) 88%, #000) !important;
}
.card.product-item:hover {
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}
.pos .product-item .card-body {
margin: 0;
padding: 0;
border-radius: 1rem 1rem 0 0 !important;
border-bottom: none !important;
overflow: hidden;
}
.pos .product-item .card-body, .product-item .card-body {
border: none !important;
}
.pos .product-item .img-custom,
.garage .product-item .img-custom {
transition: transform 500ms ease;
}
.pos .product-item:hover .img-custom,
.garage .product-item:hover .img-custom {
transform: scale(1.02);
}
.pos .card-footer {
border: 1px solid var(--tq-highlight-color);
}
.card-body.pointer.px-2.pt-2 .img-custom {
height: 150px !important;
object-fit: cover;
}
.card-footer.flex-wrap .el-row {
display: flex;
justify-content: space-between;
}
.pos .card-footer.configuration-options {
background-color: var(--tq-light-color);
padding: 0 !important;
}
.card:hover .card-footer.configuration-options {
background: color-mix(in srgb, var(--tq-primary-color) 10%, #ffffff);
}
.btn-edit-price-container {
position: absolute;
top: 9px;
right: 9px;
}
.btn-edit-price-container button {
height: 26px;
width: 26px;
padding: 0px !important;
}
.btn-edit-price-container :first-child {
border-radius: 0px !important;
}
.btn-edit-price-container :last-child {
border-radius: 0 2rem 2rem 0 !important;
}
.btn-primary-pos:hover, .btn-primary-pos.hover {
background-color: var(--tq-primary-color);
border-color: var(--tq-primary-color);
color: #FFF;
}
.btn-primary-pos {
background-color: transparent;
border-color: var(--tq-highlight-color);
color: var(--tq-text-muted);
}
.pos-list-items {
margin-top: 10px;
}
table.pos-list-items>:not(caption)>*>* {
border: none;
}
.pos-list-items tr td {
padding: 4px 0;
}
.border-top-dashed {
border-color: color-mix(in srgb, var(--tq-light-color) 98%, #000) !important;
}
.currency-symbol-span {
position: absolute;
top: 24px;
left: 6px;
z-index: 2;
width: 20px;
border-radius: 2rem 0 0 2rem;
height: 34px;
}
.switch-wrapper .el-switch.is-checked {
position: absolute;
top: -15px !important;
}
.bg-white {
background-color: var(--tq-white) !important;
}
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
color: #fff;
background-color: var(--tq-primary-color);
border-color: var(--tq-primary-color);
-webkit-box-shadow: -1px 0 0 0 var(--tq-primary-color);
box-shadow: -1px 0 var(--tq-primary-color);
}
.el-radio-button__inner:hover {
color: var(--tq-primary-color);
}
.pos-client-info {
box-shadow: none;
background-color: var(--tq-white);
}
.product-item .card-body {
border-radius: 0.75rem 0.75rem 0 0 !important;
}
.card-footer.configuration-options {
border-radius: 0 0 0.75rem 0.75rem !important;
}
.product-item .card-footer, .product-item .card-body {
border: none !important;
border-radius: 0.75rem;
}
.card-footer.configuration-options.gap .el-row {
padding: 7px 0 10px 0;
gap: 0 !important;
}
.product-item .card-footer, .product-item .card-body {
background: color-mix(in srgb, var(--tq-white) 10%, var(--tq-light-color)) !important;
box-shadow: none;
}
.product-item .card-footer {
border-radius: 0 0 0.75rem 0.75rem !important;
}
.card-footer-fast-payment .btn-primary-pos {
margin-top: 5px;
}
.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: none;
border-radius: 46px;
}
.el-tabs--card>.el-tabs__header .el-tabs__item {
border-color: transparent;
}
.el-tabs--card>.el-tabs__header {
border: none;
}
.row.no-gutters .col:nth-child(1) .card div, .testimonial-group div .col-sm-3.pointer:nth-child(1) {
background: var(--tq-primary-color) !important;
}
.ws-flotante {
background-color: var(--tq-primary-color) !important;
}
html.sidebar-light:not(.dark) .style-switcher:before {
content: none;
}
.coverage-config-message {
border-radius: 1rem !important;
}
.tq-d-none {
display: none !important;
}
.tq-d-block {
display: block !important;
}
.garage .product-name-description {
padding-bottom: 4px;
}
.garage .price-item-container {
text-align: start !important;
}
.card-footer.configuration-options {
background-color: color-mix(in srgb, var(--tq-white) 10%, var(--tq-light-color)) !important;
background: color-mix(in srgb, var(--tq-white) 10%, var(--tq-light-color)) !important;
border-top: 1px solid color-mix(in srgb, var(--tq-light-color) 88%, #000) !important;
padding: 0 !important;
}
.card-footer.configuration-options .el-row {
gap: 0;
margin: 0 !important;
padding: 0 !important;
height: 35px;
display: flex;
}
.card-footer.configuration-options .el-row > div {
flex: 1; /* todos ocupan el mismo ancho */
}
.card-footer.configuration-options .el-row > div button {
width: 100%; /* el botón llena su contenedor */
}
.card-footer.configuration-options .el-row div:first-child button {
border-radius: 0 0 0 .75rem !important;
}
.card-footer.configuration-options .el-row div:last-child button {
border-radius: 0 0 .75rem 0 !important;
}
.card-footer.configuration-options .el-row div button {
height: 100%;
border: none;
border-radius: 0 !important;
}
.product .product-name-description {
color: var(--tq-dark-color);
font-weight: 700;
font-size: 0.875rem;
line-height: 1.25rem;
}
.price-item-container {
color: var(--tq-dark-color) !important;
font-weight: 700 !important;
font-size: 1.125rem !important;
line-height: 1.75rem;
}
.pos .product-name-description {
justify-content: start !important;
}
.menu-link {
display: inline-flex;
border-radius: 2rem;
transition: all 200ms ease;
color: var(--tq-dark-color);
}
.icon-menu span {
width: 48px;
height: 48px;
border-radius: 1rem;
background-color: color-mix(in srgb, var(--tq-primary-color) 8%, #ffffff00);
color: color-mix(in srgb, var(--tq-primary-color) 80%, #fff);
display: flex;
align-items: center;
justify-content: center;
}
.icon-menu span svg{
width: 24px !important;
height: 24px !important;
}
.icon-menu.edit span {
background-color: var(--tq-light-color);
color: var(--tq-text-muted);
}
.menu-link:hover {
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.menu-link:hover .icon-menu span {
background-color: color-mix(in srgb, var(--tq-primary-color) 80%, #fff);
color: #fff;
}
.menu-link:hover .icon-menu.edit span {
background-color: var(--tq-text-muted);
color: #fff;
}
.home-menu-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}
.home-menu-row .menu-link {
flex: 1;
min-width: 0;
}
.home-menu-row .menu-link .mt-2 {
width: 100%;
}
.home-menu-row .menu-link .mt-2 span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.monthly-statement {
background-color: color-mix(in srgb, var(--tq-primary-color) 24%, #000);
padding: 2rem;
position: relative;
overflow: hidden;
}
.monthly-statement > *:not(.primary-blur):not(.secondary-blur) {
position: relative;
z-index: 1;
}
.monthly-statement .icon-chart span {
border-radius: 1rem;
border: 1px solid rgb(255 255 255 / 0.1);
backdrop-filter: blur(24px);
background-color: rgb(255 255 255 / 0.1);
}
.primary-blur {
position: absolute;
right: -80px;
bottom: -80px;
width: 320px;
height: 320px;
border-radius: 9999px;
background-color: color-mix(in srgb, var(--tq-primary-color) 20%, transparent);
filter: blur(100px);
z-index: 0;
pointer-events: none;
}
.secondary-blur {
position: absolute;
right: 40px;
top: 40px;
width: 160px;
height: 160px;
border-radius: 9999px;
background-color: rgb(34 211 238 / 0.10);
filter: blur(60px);
z-index: 0;
pointer-events: none;
}
.tax-chart {
display: flex;
align-items: flex-end;
gap: 8px;
height: 158px;
padding-bottom: 24px;
position: relative;
}
.tax-chart-loading {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.tax-bar-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
gap: 6px;
}
.tax-bar {
width: 100%;
border-radius: 2rem 2rem 0 0;
background-color: color-mix(in srgb, var(--tq-primary-color) 5%, var(--tq-light-color));
transition: height 600ms ease;
min-height: 8%;
}
.tax-bar--last {
background-color: var(--tq-primary-color);
}
.tax-bar--projection {
background-color: color-mix(in srgb, var(--tq-primary-color) 30%, transparent);
border: 2px dashed color-mix(in srgb, var(--tq-primary-color) 40%, transparent);
}
.tax-bar-label {
font-size: 11px;
font-weight: 600;
color: var(--tq-text-muted);
text-transform: uppercase;
position: absolute;
bottom: 0;
}
.tax-saving-box {
background-color: color-mix(in srgb, var(--tq-primary-color) 8%, transparent);
border-radius: 1rem;
padding: 0.75rem 1rem;
}
.tax-saving-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tq-primary-color);
margin: 0 0 4px;
}
.tax-saving-value {
font-size: 1.25rem;
font-weight: 800;
color: var(--tq-primary-color);
margin: 0;
}
.tax-saving-sub {
font-size: 11px;
font-weight: 400;
color: var(--tq-text-muted);
margin-left: 6px;
}
.caja-stat {
display: flex;
align-items: center;
gap: 10px;
padding: 0 8px 0 0;
}
.caja-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.caja-icon--cyan { background-color: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.caja-icon--red { background-color: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.caja-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tq-text-muted);
}
.caja-value {
font-size: 1.4rem;
font-weight: 800;
color: var(--tq-dark-color);
line-height: 1.2;
}
.caja-sub-stat {
background-color: color-mix(in srgb, var(--tq-light-color) 60%, transparent);
border-radius: 1rem;
padding: 12px;
}
.caja-sub-label {
font-size: 11px;
color: var(--tq-text-muted);
display: block;
margin-bottom: 4px;
}
.caja-sub-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--tq-dark-color);
}
.caja-badge {
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 999px;
white-space: nowrap;
}
.caja-badge--up { background-color: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.caja-badge--down { background-color: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.deadline-calendar-link {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--tq-primary-color);
text-decoration: none;
}
.deadline-calendar-link:hover { opacity: 0.75; }
.deadline-timeline {
display: flex;
flex-direction: column;
gap: 0;
}
.deadline-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding-bottom: 20px;
position: relative;
}
.deadline-item:not(:last-child)::before {
content: '';
position: absolute;
left: 7px;
top: 16px;
bottom: 0;
width: 2px;
background-color: color-mix(in srgb, var(--tq-light-color) 80%, #000);
}
.deadline-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: color-mix(in srgb, var(--tq-light-color) 80%, #000);
flex-shrink: 0;
margin-top: 2px;
position: relative;
z-index: 1;
}
.deadline-dot--urgent {
background-color: var(--danger);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 15%, transparent);
}
.deadline-dot--danger {
background-color: var(--danger);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 15%, transparent);
}
.deadline-dot--warning {
background-color: var(--warning);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 15%, transparent);
}
.deadline-dot--success {
background-color: var(--success);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 15%, transparent);
}
.deadline-days-badge {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
}
.deadline-badge--success {
background-color: color-mix(in srgb, var(--success) 12%, transparent);
color: var(--success);
}
.deadline-badge--warning {
background-color: color-mix(in srgb, var(--warning) 12%, transparent);
color: var(--warning);
}
.deadline-badge--danger {
background-color: color-mix(in srgb, var(--danger) 12%, transparent);
color: var(--danger);
}
.deadline-content { flex: 1; }
.deadline-date {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--tq-text-muted);
display: block;
margin-bottom: 2px;
}
.deadline-date--urgent { color: var(--danger); }
.deadline-title {
font-weight: 700;
font-size: 0.9rem;
color: var(--tq-dark-color);
margin: 0 0 2px;
}
.deadline-subtitle {
font-size: 0.8rem;
color: var(--tq-text-muted);
margin: 0;
}
/* ── Home Skeleton ─────────────────────────────── */
@keyframes sk-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.sk-line, .sk-circle, .sk-bar, .sk-card {
background: linear-gradient(90deg, #ececec 25%, #e0e0e0 50%, #ececec 75%);
background-size: 800px 100%;
animation: sk-shimmer 1.4s infinite linear;
border-radius: 6px;
}
.sk-card {
border-radius: 2rem;
padding: 1.3rem;
margin-bottom: 0;
height: 100%;
}
.sk-card--dark {
background: linear-gradient(90deg, #3a3d3e 25%, #333637 50%, #3a3d3e 75%);
background-size: 800px 100%;
}
.sk-line { height: 12px; display: block; border-radius: 6px; }
.sk-h-sm { height: 10px; }
.sk-h-md { height: 18px; }
.sk-h-lg { height: 26px; }
.sk-h-xl { height: 36px; }
.sk-w-20 { width: 20%; }
.sk-w-25 { width: 25%; }
.sk-w-30 { width: 30%; }
.sk-w-40 { width: 40%; }
.sk-w-50 { width: 50%; }
.sk-w-60 { width: 60%; }
.sk-w-75 { width: 75%; }
.sk-w-100 { width: 100%; }
.sk-circle {
width: 48px; height: 48px;
border-radius: 1rem;
flex-shrink: 0;
}
.sk-circle--sm {
width: 16px; height: 16px;
border-radius: 50%;
}
.sk-bar {
border-radius: 10px 10px 0 0;
min-height: 8px;
align-self: flex-end;
}
/* ────────────────────────────────────────────────── */
.btn-declaration {
display: inline-flex;
align-items: center;
padding: 0.5rem 1.25rem;
border-radius: 2rem;
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
transition: all 200ms ease;
}
.btn-declaration-primary {
background-color: var(--tq-primary-color);
color: #fff;
}
.btn-declaration-primary:hover {
background-color: color-mix(in srgb, var(--tq-primary-color) 85%, #000);
color: #fff;
}
.btn-declaration-secondary {
background-color: rgb(255 255 255 / 0.1);
color: #fff;
border: 1px solid rgb(255 255 255 / 0.2);
}
.btn-declaration-secondary:hover {
background-color: rgb(255 255 255 / 0.18);
color: #fff;
}
/* ──────────────────────────────────────────────────────────────
POS · Venta Rápida — Carrito de compras (panel derecho)
────────────────────────────────────────────────────────────── */
/* Contenedor de cada producto en el carrito */
.pos-cart-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 6px;
border-bottom: 1px solid color-mix(in srgb, var(--tq-light-color) 88%, #000);
transition: background 0.15s ease;
}
/* Miniatura del producto / placeholder */
.pos-cart-thumb,
.pos-cart-thumb-ph {
width: 48px;
height: 48px;
border-radius: 10px;
flex-shrink: 0;
overflow: hidden;
background: color-mix(in srgb, var(--tq-light-color) 88%, #000);
}
.pos-cart-thumb {
object-fit: cover;
}
.pos-cart-thumb-ph {
display: flex;
align-items: center;
justify-content: center;
color: var(--tq-text-muted);
font-size: 1.1rem;
}
/* Info: nombre + precio */
.pos-cart-info {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.pos-cart-name {
font-size: 0.875rem;
font-weight: 700;
color: var(--tq-dark-color);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.pos-cart-price {
display: block;
font-size: 0.875rem;
font-weight: 900;
color: var(--tq-primary-color);
line-height: 1.4;
letter-spacing: -0.01em;
}
/* Input cuando se permite editar el total */
.pos-total-input {
width: 90px;
}
.pos-total-input .el-input__inner {
height: 26px;
font-size: 0.8rem;
padding: 0 6px;
color: var(--tq-primary-color);
font-weight: 800;
border-radius: 6px;
border-color: color-mix(in srgb, var(--tq-light-color) 80%, #000);
background: var(--tq-white);
}
/* Controles de cantidad (− qty +) */
.pos-qty-wrap {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.pos-qty-btn {
width: 32px;
height: 32px;
aspect-ratio: 1;
flex-shrink: 0;
border: none;
background: color-mix(in srgb, var(--tq-light-color) 92%, #000);
color: var(--tq-primary-color);
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
padding: 0;
transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.pos-qty-btn:hover {
filter: brightness(0.95);
}
.pos-qty-btn:active {
transform: scale(0.95);
}
.pos-qty-field {
width: 32px;
margin: 0;
}
.pos-qty-field .el-input__inner {
text-align: center;
padding: 0 2px;
height: 24px;
font-size: 0.85rem;
font-weight: 700;
color: var(--tq-dark-color);
border-radius: 6px;
border-color: transparent;
background: transparent;
}
.pos-qty-field .el-input__inner:focus {
border-color: color-mix(in srgb, var(--tq-primary-color) 25%, transparent);
background: var(--tq-white);
}
/* Botón eliminar — visible solo al hover de la fila */
.pos-cart-del {
display: none;
align-items: center;
justify-content: center;
color: var(--tq-text-muted);
cursor: pointer;
padding: 6px;
border-radius: 8px;
transition: color 0.15s ease, background 0.15s ease;
flex-shrink: 0;
line-height: 1;
}
.pos-cart-row:hover .pos-cart-del {
display: flex;
}
.pos-cart-del:hover {
color: var(--danger);
background: color-mix(in srgb, var(--danger) 10%, transparent);
}
/* Estado vacío del carrito */
.pos-empty-icon {
font-size: 2.25rem;
color: color-mix(in srgb, var(--tq-light-color) 70%, #000);
}
.pos-empty-text {
font-size: 0.85rem;
color: var(--tq-text-muted);
font-weight: 500;
}
/* ──────────────────────────────────────────────────────────────
POS · Venta Rápida — Panel lateral completo
(tabs documento, cliente, totales, pagar, cancelar)
────────────────────────────────────────────────────────────── */
/* Contenedor del panel derecho */
.input-search-pos .btn-add-product-pos {
color: #fff !important;
border-radius: 0 9999px 9999px 0 !important;
height: 36px;
margin-top: -9px;
background-color: var(--tq-primary-color) !important;
}
.pos-order-panel {
border-left: 1px solid color-mix(in srgb, var(--tq-light-color) 88%, #000);
background: var(--tq-white);
box-shadow: -20px 0 40px rgba(119, 0, 230, 0.04);
}
/* Cabecera del panel */
.fp-top-header {
flex-shrink: 0;
background: transparent;
border-bottom: none;
}
/* Segmented control: Boleta / Factura / N. Venta */
.fp-doc-tabs {
gap: 0;
background: color-mix(in srgb, var(--tq-light-color) 92%, #000);
margin-top: 14px;
padding: 4px;
border-radius: 30px;
}
.fp-doc-tab {
flex: 1;
border: none;
background: transparent;
border-radius: 8px;
padding: 8px 6px;
font-size: 0.75rem;
font-weight: 600;
color: color-mix(in srgb, var(--tq-text-muted) 68%, #000);
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
white-space: nowrap;
text-align: center;
letter-spacing: 0.01em;
}
.fp-doc-tab:hover:not(.active) {
background: color-mix(in srgb, var(--tq-light-color) 89%, #000);
}
.fp-doc-tab.active {
background: var(--tq-primary-color);
color: #fff;
box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--tq-primary-color) 45%, transparent);
}
/* Wrapper de cada tab para que el select de serie quede integrado */
.fp-doc-tab-wrap {
flex: 1;
display: flex;
flex-direction: column;
}
.fp-doc-tab-wrap .fp-doc-tab {
flex: none;
}
.fp-series-inline .el-input__inner {
height: 26px;
font-size: 0.72rem;
border-radius: 6px;
border-color: color-mix(in srgb, var(--tq-light-color) 75%, #000);
padding: 0 6px;
}
/* Fila de cliente */
.fp-customer-row {
border-top: none;
margin-top: 14px;
}
.fp-customer-icon {
flex-shrink: 0;
}
.fp-customer-select .el-input__inner {
border: none !important;
background: color-mix(in srgb, var(--tq-light-color) 92%, #000);
box-shadow: none !important;
font-size: 0.85rem;
font-weight: 500;
height: 44px;
padding-left: 38px;
padding-right: 42px;
color: var(--tq-dark-color);
}
.fp-customer-select .el-input__suffix {
display: none !important;
}
.fp-customer-select.el-select .el-input.is-focus .el-input__inner {
border: none !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tq-primary-color) 22%, transparent) !important;
}
.fp-customer-row {
position: relative;
}
.fp-customer-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: color-mix(in srgb, var(--tq-text-muted) 50%, #ffffff);
pointer-events: none;
z-index: 1;
}
.fp-add-customer {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
z-index: 2;
transition: background 0.15s, color 0.15s, transform 0.15s;
}
.fp-add-customer:hover {
background: color-mix(in srgb, var(--tq-light-color) 89%, #000);
color: var(--tq-text-muted);
}
/* Cabecera de la lista de items */
.pos-order-top {
border-bottom: none;
}
.pos-order-header {
background: transparent;
border-bottom: none;
padding-top: 18px !important;
}
.pos-order-label {
font-size: 0.78rem;
color: var(--tq-primary-color);
text-transform: none;
letter-spacing: 0;
font-weight: 700;
}
.pos-order-num {
font-size: 0.95rem;
font-weight: 700;
color: var(--tq-primary-color);
}
.pos-items-chip {
background: transparent;
color: var(--tq-text-muted);
font-size: 0.78rem;
font-weight: 500;
padding: 0;
border-radius: 0;
}
/* ── Sección de pago ── */
.payment-container-pos {
background: transparent;
border-top: none;
flex-shrink: 0;
overflow-y: auto;
padding-top: 8px;
}
.fp-payment-panel {
font-size: 0.85rem;
}
/* Botones Discount / Payments (Descuento / Pagos) */
.fp-action-row {
gap: 12px !important;
padding: 14px 4px 6px !important;
}
.fp-action-btn {
border: 1.5px solid var(--tq-primary-color);
background: transparent;
color: var(--tq-primary-color);
border-radius: 10px;
padding: 11px 14px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease;
text-align: center;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
letter-spacing: 0.01em;
}
.fp-action-btn:hover {
background: color-mix(in srgb, var(--tq-primary-color) 8%, transparent);
border-color: var(--tq-primary-color);
color: var(--tq-primary-color);
}
.fp-action-btn:active {
transform: scale(0.98);
}
.fp-action-btn--on {
background: var(--tq-primary-color);
border-color: var(--tq-primary-color);
color: #fff;
}
.fp-action-btn--on:hover {
background: color-mix(in srgb, var(--tq-primary-color) 90%, #000);
color: #fff;
}
/* Campos de monto / descuento */
.fp-field-wrap {
min-width: 0;
}
.fp-field-label {
font-size: 0.72rem;
color: var(--tq-text-muted);
display: block;
font-weight: 600;
letter-spacing: 0.02em;
}
.fp-sym {
position: absolute;
left: 10px;
bottom: 8px;
font-size: 0.78rem;
color: var(--tq-text-muted);
z-index: 1;
pointer-events: none;
font-weight: 500;
}
.fp-amount-inp .el-input__inner {
padding-left: 26px;
font-size: 0.85rem;
font-weight: 600;
color: var(--tq-dark-color);
}
/* Vuelto / Faltante */
.fp-change-wrap {
flex-shrink: 0;
min-width: 70px;
}
.fp-change-val {
font-size: 0.9rem;
font-weight: 800;
display: block;
}
/* Tarjeta de totales */
.fp-divider {
display: none;
}
.fp-totals {
background: color-mix(in srgb, var(--tq-light-color) 96%, #000);
border-radius: 12px;
padding: 16px 18px !important;
margin: 12px 4px 0;
}
.fp-total-row {
border-bottom: none !important;
padding: 4px 0 !important;
}
.fp-total-label {
color: var(--tq-text-muted);
font-size: 0.85rem;
font-weight: 500;
}
.fp-total-val {
color: var(--tq-text-muted);
font-size: 0.85rem;
font-weight: 500;
}
.fp-grand {
border-top: 1px solid color-mix(in srgb, var(--tq-light-color) 88%, #000);
margin-top: 8px;
padding-top: 10px !important;
}
.fp-grand-label {
font-size: 1.1rem;
font-weight: 800;
color: var(--tq-dark-color);
letter-spacing: -0.01em;
}
.fp-grand-amount {
font-size: 1.6rem;
font-weight: 900;
color: var(--tq-primary-color);
letter-spacing: -0.02em;
line-height: 1;
}
/* Botón Pagar */
.fp-pay-btn,
.fp-pay-btn.el-button,
.fp-pay-btn.el-button--default {
background: var(--tq-primary-color) !important;
border-color: var(--tq-primary-color) !important;
color: #fff !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
height: 52px !important;
letter-spacing: 0.02em;
width: 100%;
transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease !important;
margin-top: 14px;
}
.fp-pay-btn:hover:not(:disabled),
.fp-pay-btn.el-button:hover:not(:disabled) {
filter: brightness(1.1);
background: var(--tq-primary-color) !important;
border-color: var(--tq-primary-color) !important;
color: #fff !important;
}
.fp-pay-btn:active:not(:disabled) {
transform: scale(0.98);
}
.fp-pay-btn:disabled,
.fp-pay-btn.is-disabled {
opacity: 0.5 !important;
box-shadow: none !important;
}
/* Botón Cancelar Venta */
.fp-cancel-btn,
.fp-cancel-btn.btn,
.fp-cancel-btn.btn-link {
font-size: 0.85rem !important;
color: var(--tq-text-muted) !important;
padding: 10px 4px !important;
transition: color 0.15s ease;
font-weight: 600 !important;
background: transparent !important;
border: none !important;
text-decoration: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.fp-cancel-btn:hover,
.fp-cancel-btn.btn:hover {
color: var(--danger) !important;
text-decoration: none !important;
background: transparent !important;
}
.icon-date-issue {
background-color: var(--tq-light-color);
color: var(--tq-text-muted);
border-radius: 50%;
padding: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.advanced-settings .el-tabs__nav {
border-radius: 46px 46px 46px 46px !important;
}
.advanced-settings.el-tabs--border-card>.el-tabs__header .el-tabs__item:hover {
background-color: color-mix(in srgb, var(--tq-primary-color) 5%, #ffffff00);
border-radius: 46px;
}
.advanced-settings.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
color: var(--tq-primary-color) !important;
background-color: color-mix(in srgb, var(--tq-primary-color) 15%, #ffffff00);
border: none;
border-radius: 46px;
}
.advanced-settings .dot {
background: var(--tq-primary-color);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--tq-primary-color) 20%, #ffffff00);
}
.advanced-settings .options-count {
background-color: color-mix(in srgb, var(--tq-primary-color) 15%, #ffffff00);
color: color-mix(in srgb, var(--tq-dark-color) 70%, #ffffff) !important;
border-radius: 46px;
}
.tag-icon {
border-radius: 46px;
background-color: var(--tq-primary-color);
color: #fff;
box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--tq-primary-color) 20%, #ffffff00);
}
.route-path-reports {
background-color: color-mix(in srgb, var(--tq-primary-color) 5%, #ffffff00);
border-radius: 20px;
color: color-mix(in srgb, var(--tq-dark-color) 70%, #ffffff);
}
.buhoprinter-config .info-text {
border: 1px solid color-mix(in srgb, var(--tq-light-color) 98%, #000);
border-radius: 46px;
}
/* TUQUIPU-MOD SQ-31: redes sociales del login tenant.
Override del fix base (public/css/auth.css) con mayor especificidad
para vencer las reglas section.auth__form-right .auth__social a { ...
transparent !important } presentes en otras skins activas en cascada. */
section.auth .auth__social a,
section.auth__form-right .auth__form .auth__social a,
section.auth__form-left .auth__form .auth__social a {
background-color: var(--tq-primary-color, #042a42) !important;
border: 2px solid transparent !important;
color: #fff !important;
transition: background-color 0.2s ease, color 0.2s ease,
border-color 0.2s ease, transform 0.2s ease,
box-shadow 0.2s ease !important;
}
section.auth .auth__social a:hover,
section.auth__form-right .auth__form .auth__social a:hover,
section.auth__form-left .auth__form .auth__social a:hover {
background-color: #fff !important;
color: var(--tq-primary-color, #042a42) !important;
border-color: var(--tq-primary-color, #042a42) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
text-decoration: none !important;
}
section.auth .auth__social a:hover .icon-tabler-brand-facebook,
section.auth__form-right .auth__form .auth__social a:hover .icon-tabler-brand-facebook,
section.auth__form-left .auth__form .auth__social a:hover .icon-tabler-brand-facebook {
color: #1877f2 !important;
}
section.auth .auth__social a:hover .icon-tabler-brand-x,
section.auth__form-right .auth__form .auth__social a:hover .icon-tabler-brand-x,
section.auth__form-left .auth__form .auth__social a:hover .icon-tabler-brand-x {
color: #000 !important;
}
section.auth .auth__social a:hover .icon-tabler-brand-instagram,
section.auth__form-right .auth__form .auth__social a:hover .icon-tabler-brand-instagram,
section.auth__form-left .auth__form .auth__social a:hover .icon-tabler-brand-instagram {
color: #e4405f !important;
}
section.auth .auth__social a:hover .icon-tabler-brand-linkedin,
section.auth__form-right .auth__form .auth__social a:hover .icon-tabler-brand-linkedin,
section.auth__form-left .auth__form .auth__social a:hover .icon-tabler-brand-linkedin {
color: #0a66c2 !important;
}
section.auth .auth__social a:hover .icon-tabler-brand-tiktok,
section.auth__form-right .auth__form .auth__social a:hover .icon-tabler-brand-tiktok,
section.auth__form-left .auth__form .auth__social a:hover .icon-tabler-brand-tiktok {
color: #25f4ee !important;
}
/* /TUQUIPU-MOD SQ-31 */
/* TUQUIPU-MOD SQ-32: Redesign login tenant - identidad TuQuipu propia.
Adaptado del brandbook propuesto por Benjamin en login-propuesta.html.
Glassmorphism + gradiente tri-color (indigo->morado->cyan) + pattern
animado de fondo + Plus Jakarta Sans. Todo via CSS skin, sin tocar
HTML de Buho. */
/* @import del SQ-32 movido al top del archivo (review warning #1). */
/* Tokens locales escopeados a la pagina de login para no afectar el resto. */
section.auth {
--tq-indigo: #4f46e5;
--tq-primary: #7700e6;
--tq-primary-deep: #5900ae;
--tq-cyan: #00e6d2;
--tq-cyan-soft: rgba(0,230,210,.08);
--tq-primary-soft: rgba(119,0,230,.08);
--tq-text: #1f2937;
--tq-text-muted: #5b6b8c;
--tq-text-faint: #c5c7c8;
--tq-tri-gradient: linear-gradient(95deg, #4f46e5, #7700e6, #00e6d2);
--tq-tri-gradient-soft: linear-gradient(135deg, #4f46e5 0%, #7700e6 40%, #00e6d2 100%);
--tq-tri-gradient-hover: linear-gradient(95deg, #6366f1, #8b5cf6, #14b8a6);
--tq-error: #dc2626;
--tq-error-bg: #fef2f2;
--tq-font-display: 'Plus Jakarta Sans','Inter',ui-sans-serif,system-ui,sans-serif;
--tq-font-body: 'Inter','Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
/* Fondo + pattern animado a nivel section. NO tocamos position: Buho
lo deja position:fixed para anclar al viewport. Si lo cambiamos a
relative, la section crece con el contenido y aparece scroll que
descuadra el panel izquierdo (la imagen se sale del alto del panel).
overflow: hidden es seguro porque la section fixed ya esta sized. */
background:
radial-gradient(ellipse at 70% 30%, rgba(119,0,230,.08), rgba(0,230,210,.03) 70%),
linear-gradient(125deg, #f9fafb 0%, #eef2ff 100%) !important;
overflow: hidden;
}
/* Pattern de puntos sutiles (cian) animado en el fondo. */
section.auth::before {
content: "";
position: absolute;
inset: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0,230,210,.08) 1.2px, transparent 1px);
background-size: 55px 55px;
animation: tq-floatBg 45s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes tq-floatBg {
0% { transform: translate(0, 0); }
100% { transform: translate(70px, 70px); }
}
/* === Panel izquierdo (auth__image): NO tocar background.
El admin lo controla desde Sistema -> Configuracion Login con:
- Color de fondo de la imagen ($loginBgColor)
- Imagen del hero ($login->image)
- Posicion del formulario (auth__form-right / auth__form-left)
- Padding (padding_in_form)
Solo aseguramos que quede encima del pattern animado del section. */
section.auth .auth__image {
z-index: 1;
position: relative;
}
/* === auth__form: SOLO wrapper que centra (transparente).
Buho lo usa como panel lateral (42% width, 100% height del section flex).
Si le aplicamos la card glass aqui, los bordes redondeados se cortan
contra el edge del viewport. Lo dejamos como container centrador y la
card glass va en el