/* ==================== Section: reset ==================== */
/* ===================================================================
Tabla de contenidos (secciones en orden de aparición)
01. reset
02. Contacto
03. Login
04. LAYOUT
05. HELPER ICONOS USUARIOS CIRCULOS ABREVIATURA
06. LEFT NAV
07. FILTROS CALENDARIO
08. Titulos
09. Boxes
10. Graficas
11. CSS EFFECTS
=================================================================== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
fieldset,
legend,
caption,
.filters ul li p,
figure {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    line-height: normal;
    font-weight: normal;
}

html {
    height: 100%;
}

.p10 {
    padding: 10px !important;
}

.pt10 {
    padding-top: 10px;
}

.cblue {
    color: #5ba7ec !important
}

.black {
    color: #000 !important
}

.bold {
    font-weight: 800 !important
}

.fnormal {
    font-style: normal
}

#mainContainer {
    padding-bottom: 6rem
}

#configuraciones- {
    background: #f7f7f7 !important
}

#tickets #mainContainer,
#tickets-id #mainContainer {
    padding-bottom: 0rem
}

button {
    border: none;
    background: none;
    cursor: pointer
}

.center {
    text-align: center !important;
}

tr {
    font-weight: bold;
    vertical-align: middle;
}

.boton {
    background: #ea8d3e;
    color: #fff;
    border: 1px solid #ea8d3e;
    border-radius: 2px;
}

.boton:hover,
#tipoAsunto:hover {
    background: #d47f38
}

.mb5 {
    margin-bottom: .5rem !important
}

.mb10 {
    margin-bottom: 1rem !important
}

.mt5 {
    margin-top: .5rem !important
}

.clear {
    clear: both
}

p {
    font-style: normal
}

body {
    -webkit-font-smoothing: antialiased !important;
    line-height: 1.54;
    color: #202020;
    height: 100%;
    font-size: .7rem;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
    letter-spacing: -.1px;
    font-weight: 400;
}

.fontTwo {
    font-family: "Source Sans 3", sans-serif;
}

.lowercase {
    text-transform: lowercase !important;
}

.uppercase {
    text-transform: uppercase !important
}

.capitalize {
    text-transform: capitalize !important
}

.caseinherit {
    text-transform: inherit !important;
}

img {
    color: #f4f4f2;
}

ol,
ul,
li {
    list-style: none;
    font-weight: lighter;
}

clear,
br {
    clear: both
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}

:focus {
    outline: 0;
}

ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

p {
    line-height: 1.6em;
}

.mont {
    font-family: 'Montserrat', sans-serif !important;
}

.openSans {
    font-family: 'Open Sans', sans-serif;
}

a {
    text-decoration: none !important;
    color: #777;
    font-weight: 600;
    cursor: pointer;
}

:focus {
    outline: 0;
}

.fright {
    float: right;
}

.fleft {
    float: left;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

input[type="submit"] {
    cursor: pointer;
}

.wrapClose {
    margin-left: 260px;
}

.tleft {
    text-align: left
}

.tcenter {
    text-align: center
}

.tright {
    text-align: right
}

.custom-tooltip-style {
    background: #fff;
    color: #333;
    padding: .35rem .5rem;
    /* Bordes y forma */
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    /* Quita estilos heredados de jQuery UI */
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    outline: none;
}

/* MUY IMPORTANTE: neutraliza wrappers de jQuery UI */
.ui-tooltip.custom-tooltip-style {
    border: 0;
}

.ui-tooltip.custom-tooltip-style .ui-tooltip-content {
    padding: 0;
}


/* ==================== Section: Contacto ==================== */
#contacto {
    background: url(../images/bck.png) left top no-repeat #81a6d0;
}

#contacto section {
    display: flex;
    height: 100%;
    width: 100%;
}

#contacto .promo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 60%;
    flex: 1;
    box-sizing: border-box;
}

.centradoVertical {
    display: flex;
    flex-direction: column;
    width: 80%;
}

.promo h1 {
    width: 100%;
    color: #ff9350;
    font-size: 3.5em;
}

.promo h2 {
    width: 100%;
    color: #fff;
    font-size: 2em;
    margin-top: 20px;
}

.promo em {
    color: #fff;
    margin-bottom: 40px;
    font-size: 1.5em;
    font-style: normal;
}

.promo p {
    width: 100%;
    font-size: 1.6em;
    color: #fff;
    margin-top: 20px;
}

.centradoVerticalDos {
    display: flex;
    flex-direction: column;
    width: 78%;
}

.contacto {
    width: 40%;
    ;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

#contacto .promo a {
    width: 200px;
    background: #ea6736;
    color: #fff;
    text-align: center;
    padding: 13px 0;
    margin: 40px 0;
    font-size: 15px;
    border-radius: 4px;
}

#logoContacto {
    width: 120px;
    margin-bottom: 20px;
}

#lupa {
    width: 75px;
    margin-bottom: 20px;
}

#contactoForm h1 {
    font-size: 22px;
    margin-bottom: 20px;
}

#contactoForm p {
    float: left;
    position: relative;
    width: 100%;
}

#contactoForm label {
    float: left;
    color: #61749c;
    text-align: left;
    padding: 14px 0 7px 0;
    width: 100%;
    font-size: 15px;
}

#contactoForm .inpLog {
    height: 38px;
    font-size: 13px;
    border: 1px solid #dad9d9;
    padding: 0 5%;
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    float: left;
    background: #fff
}

#contactoForm textarea {
    float: left;
    width: 100%;
    border: 1px solid #dad9d9;
    border-radius: 4px;
    height: 120px;
    padding: 5%;
    background: #fff
}

#contactoForm .descrip {
    font-size: 14px
}

#contactoForm .msgBlack {
    margin-top: 20px;
}

#contactoForm .inpLog:focus,
#contactoForm textarea:focus {
    background: #f4f9ff;
    border: 1px solid #b5b8d1;
}

/* ==================== Section: Login ==================== */
.bckIndex {
    color: #404040;
    background: #1b3a81;
    font-family: 'Oswald', sans-serif !important;
}

.conLog {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.login {
    width: 400px;
    border-radius: 5px;
    box-shadow: 4px 6px 38px #2e0f0f;
    -webkit-box-shadow: 4px 6px 38px #2e0f0f;
    -moz-box-shadow: 2px 5px 14px #333;
    padding: 30px;
    background: #3e5996;
    border: 2px solid #ea6736;
}

.login span {
    padding: 10px 0px;
    float: left;
    text-transform: uppercase;
    width: 100%;
    display: block;
}

.login span img {
    margin: 20px 0 10px;
    width: 240px;
}

.msgBlack {
    float: left;
    width: 100%;
    padding-bottom: 10px;
    color: #e77714;
    font-size: 18px
}

#loginForm h1 {
    color: #fff !important
}

#loginForm p {
    float: left;
    position: relative;
    width: 100%;
}

#loginForm label {
    float: left;
    color: #ccc;
    text-align: left;
    padding: 14px 0 7px 0;
    width: 100%;
    font-size: 18px;
}

.inpLog {
    height: 38px;
    font-size: 13px;
    border: 1px solid #bb0673;
    background: #fcf4ff;
    padding: 0 5%;
    width: 100%;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    float: left;
}

.inpLog:focus,
textarea:focus {
    background: #f4f9ff;
    border: 1px solid #b5b8d1;
}

#ojo {
    position: absolute;
    z-index: 9999;
    bottom: 13px;
    right: 9px;
    width: 22px;
    height: 29px;
}

.ojo-cerrado {
    background: url(../graphics/ojo-cerrado.png) 0 18px no-repeat;
}

.ojo-abierto {
    background: url(../graphics/ojo-abierto.png) 1px 14px no-repeat;
}

.submit input {
    cursor: pointer;
    background: #ea6735;
    border: 0px solid #ea6735;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 0;
    width: 100%;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin: 20px auto 0 auto;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.submit input:hover {
    background: #dd5d2d
}

#mesLog {
    float: left;
    width: 100%;
    margin: 20px 0;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
}

#mesLog a {
    color: #e6671e;
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase
}

/* ==================== Section: LAYOUT ==================== */
header nav a {
    float: left;
    width: 100%
}

.wrapOpen {
    float: left;
    width: 100%;
    padding-left: 54px;
    padding-bottom: 0px;
}

h1,
h2,
h3,
h4 {
    font-weight: 300;
    color: #202020;
    font-size: 1.45rem;
    letter-spacing: .035rem;
}

header {
    position: fixed;
    width: 100%;
    height: 45px !important;
    text-transform: uppercase;
    z-index: 99999999;
    border-1px solid #e8e5e5;
    background: #e4e4e4;
    box-shadow: 2px 0px 11px #00000021;
    -moz-box-shadow: 2px 0px 11px #00000021;
    -webkit-box-shadow: 2px 0px 11px #00000021;
    border-bottom: 1px solid #c6c4c4;
}

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999999999;
    background: #fff;
}

∂ header nav {
    float: right;
    height: 65px !important;
}

#preferences {
    float: right;
    padding: 4px 10px 0 36px;
    height: 28px !important;
    background: #f3f1f1;
    border-radius: 51px;
    margin: 8px 18px;
    border: 1px solid #e3e1e1;
}

#preferences:hover {
    border: 1px solid #c2c2c2;
    cursor: pointer
}

.prel {
    position: relative;
}

.cheers span {
    position: absolute;
    top: -1px;
    left: -32px;
}

#triangle {
    background: url(../graphics/rArrows.png) 108px -42px no-repeat;
    height: 14px;
    float: left;
    max-width: 129px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-style: normal;
    color: #212121;
    padding: 3px 26px 3px 0px;
    font-weight: 400
}

.arrowRight {
    border: none;
    text-indent: -99999px;
    z-index: 99999999999;
    width: 244px;
    height: 97px !important;
    padding: 14px;
    z-index: 9999999;
    position: absolute;
    left: 0px;
    width: 100%;
}

.prel {
    position: relative;
}

#popupPref {
    position: absolute;
    top: 22px;
    right: -6px;
    z-index: 9;
    background-color: #ffffff;
    width: 235px;
    display: none;
    padding: 5px 0 0 0;
    box-shadow: 0px 3px 8px #c9c9c9;
    border: 1px solid #e8e8e8;
    border-top: none;
    border-radius: 4px;
}

#popupPref li {
    float: left;
    width: 100%;
    border-bottom: none;
}

#popupPref li a {
    padding: 7px 23px 7px;
    float: left;
    width: 100%;
    color: #676767;
    text-transform: capitalize;
    font-weight: 400;
    font-size: .8rem;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
}

#popupPref li a:hover,
#popupQuick li a:hover {
    background: #fff;
    border-bottom: 1px solid #ece7e7
}

#settings {
    float: right;
    position: relative;
    height: 44px !important;
    cursor: pointer;
}

#obPref {
    float: right;
    position: relative;
    height: 44px !important;
    cursor: pointer;
}

#settings a,
#obPref a,
#preferences a {
    padding: 0px 6px 0 0px;
}

#obPref a {
    padding: 0 15px;
    float: left;
}

#obPref {
    border-right: 1px solid #cecece;
}

#sets {
    text-align: center;
    padding: 1px;
}

#notifBar span,
#sets span {
    float: left;
    width: 100%;
    margin-top: 5px;
    font-weight: 600;
    color: #e2e2e2;
}

#notifBar {
    text-align: center;
    padding: 11px 10px;
    height: 43px;
}

#notifBar img,
#sets img,
#add img {
    width: 16px;
    margin-bottom: 1px;
    height: 19px;
}

#wrapPlus {
    float: right;
}

#add {
    float: left;
    border: none;
    background: transparent;
    padding: 13px 14px 13px 17px;
    height: 44px !important;
    border: none;
    border-left: 1px solid #cecece;
}

#add span {
    float: left;
    width: 100%;
    margin-top: 6px;
    font-weight: 600;
    color: #e2e2e2;
    text-transform: uppercase;
}

#popupQuick {
    position: absolute;
    top: 45px;
    background: #f9f9f9;
    padding: 0px;
    width: 262px;
    color: #fff;
    font-size: .8em;
    box-shadow: 2px 2px 6px #b0b0b0;
}

#popupQuick li a {
    color: #4b4b4b;
    float: left;
    width: 100%;
    padding: .35rem 1rem;
    font-weight: 400;
    text-transform: capitalize;
    font-size: 13px;
    line-height: 22px;
}

#popupQuick strong {
    display: block;
    margin-bottom: 10px;
}

#add .icon-add {
    width: 20px;
    height: 20px;
    color: #00000072;
}

strong,
#forAjaTwo strong {
    font-weight: 700;
}

.dnone,
#formPre,
.submenu,
.barIn h1,
.barIn strong,
.barIn em,
.barOut .heading,
#popupQuick,
#rigWinClose,
#busPros,
#propuesta,
#butEva,
#butEvaCol,
.barIn #logoSmall {
    display: none;
}

#add:hover,
#settings:hover,
#obPref:hover {
    background: #ffffff;
    box-shadow: 1px -5px 13px #d7d7d7;
}

#preferences:hover {
    background: #fff
}

#inbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #00000072;
}

#inbox .icon-inbox {
    width: 20px;
    height: 20px;
}

#settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #00000072;
}

#settings .icon-settings {
    width: 20px;
    height: 20px;
}

#solicitud {
    background-color: #f80d32;
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding: 3px 5px 4px;
    border-radius: 999px;
    font-style: normal;
    font-weight: 700;
    border-radius: 50%;
}

/* ==================== Section: HELPER ICONOS USUARIOS CIRCULOS ABREVIATURA ==================== */
.grupoWrap .firstType {
    height: 30px;
    line-height: 32px;
    font-weight: 400
}

.grupoWrap span {
    float: left;
    line-height: 29px;
    margin-left: -8px;
}

.grupoWrap .nombreStack {
    margin-left: .5rem
}

.grupoAvatares {
    float: left;
    line-height: 28px;
    position: relative;
    margin: .0rem;
    width: 100%;
    padding: .25rem;
}

.tkAvs .avatar-iniciales,
.grupoAvatares .avatar-iniciales {
    background: #7F8C8D;
    color: #FFF;
    margin-right: -1px;
}

.icono-nombre {
    display: inline;
}

.avatar-iniciales {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 10px;
    flex-shrink: 0;
    font-size: 10px;
    border: 2px solid #fff;
    line-height: 1;
    margin-top: .15rem
}

.avatarGroup {
    margin-left: -8px !important;
}

.avatarGroupTrece {
    margin-left: -13px !important;
}

#iconoForm {
    float: left;
    width: 32%;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 2px;
    background: #fafafa;
    min-height: 120px;
}

#firstColumn strong em:first-of-type {
    display: block;
    margin-bottom: .25rem;
}

#iconoForm .avatar-iniciales {
    border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
}

.avatar-iniciales-empleados {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 3rem;
    margin-right: 8px;
    flex-shrink: 0;
}

#tblProveedores .usuario-cell {
    margin-left: .5rem;
    display: block;
}

.usuario-cell .avatar-iniciales {
    float: left
}

.usuario-cell .nombre {
    float: left;
    width: 85% !important;
    line-height: 28px !important;
    padding-left: .35rem
}

.usuario-cell .nombreProveedores {
    float: left;
    width: 89% !important;
    line-height: 28px !important;
    padding-left: .35rem;
    text-overflow: ellipsis;
    overflow: hidden
}

.textOverflow {
    width: 180px !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.textOverflowBig {
    width: 280px !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
}

.userCount {
    text-align: center
}

.userCount b {
    font-size: 1rem;
    line-height: 22px;
}

.userCount svg {
    float: left;
    background: #b7b7b7;
    border-radius: 100%;
    padding: 3px;
}

.userCountWhite svg {
    float: left;
    border-radius: 100%;
    padding: 3px;
    margin: .15rem 0;
}

/* ==================== Section: LEFT NAV ==================== */
.barOut {
    width: 260px;
    overflow-x: hidden;
}

.barOut svg,
.barOut li img {
    display: none
}

.barOut img {
    float: left;
}

.barOut #navMenu li {
    float: left;
    width: 100%;
    padding: 4px 0px;
    cursor: pointer;
}

.barIn #navMenu li img {
    width: 23px;
}

.barOut #navMenu li img {
    margin: 13px 10px 0 16px;
    width: 27px;
    max-height: 19px;
}

.proImg img {
    width: 20px;
    height: 20px;
    border: 2px solid #ff3b30;
    border-radius: 50%;
    padding: 1px;
}

#barlogo {
    height: 28px;
    float: left;
    margin: 10px 0 4px 70px;
}

#bar {
    position: fixed;
    top: 0px;
    background-color: #393838;
    height: 100%;
    left: 0;
    z-index: 99999999;
    box-shadow: 0px 23px 18px #979797;
}

.barIn {
    width: 55px;
}

.barIn #padMenu {
    float: left;
    height: 65px !important;
}

.barIn .main {
    display: flex
;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 59px;
    padding: 10px;
    cursor: pointer;
    position: relative;
    text-align: center;
    border-left: 3px solid #f82b32;
    box-sizing: border-box;
    width: 55px;
    padding: 10px 10px;
    cursor: pointer;
    position: relative;
    text-align: center;
    border-left: 3px solid #f82b32;
    height: 59px;
    align-items: center;
}

.barIn .submenu {
    position: absolute;
    top: 0px;
    left: 48px;
    z-index: 9999999;
    width: 320px;
    padding: 0 0 0 14px;
}

.barIn .submenu ul {
    font-size: 14px;
    font-weight: 300;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    box-shadow: 4px 4px 14px #b9b9b9;
    border: 1px solid #e6e6e6;
    float: left;
    width: 100%;
}

.submenu li {
    float: left;
    width: 100%;
}

.submenu li svg {
    float: left;
    margin: .25rem .5rem 0 0;
    stroke: #666;
    color: #666;
    max-width: 17px;
    max-height: 17px;
}

.barIn .submenu li {
    padding-left: .5rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.barIn .submenu li:hover {
    background: #fafafa;
    border-radius: 4px;
    color: #000
}

.barIn .submenu a {
    float: left;
    width: 90%;
    color: #646464;
    text-align: left;
    font-weight: 400;
    line-height: 28px;
    padding: 1px 0 0px;
    letter-spacing: .5px;
    font-size: .8rem;
}

.barIn #butImg {
    height: 45px;
    background: #393838;
}

.barOut #butImg {
    height: 100px;
    background: #393838;
    background: linear-gradient(347deg, rgba(0, 0, 0, 1) 0%, rgba(69, 67, 67, 1) 57%, rgba(89, 87, 87, 1) 100%);
}
.barOut #padMenu .svgIcon{
	display: none!important
}

.arrowLeft {
    border: none;
    text-indent: -99999px;
    position: fixed;
    background: url(../images/menuSprite.png) 13px 10px no-repeat;
    width: 55px;
    height: 45px !important;
    padding: 14px 4px;
    border-bottom:1px solid #4e4e4e;
    z-index: 99999999999;
}
.activeMenu{background:#f82b32}

#logoSmall {
    width: 150px;
    position: absolute;
    left: 18%;
    top: 16px;
    z-index: 9999;
}

#navMenu h1 {
    float: left;
    width: 100%;
    padding: 1rem 0px !important;
    font-size: .63rem;
    overflow: hidden;
    color: #fff0f0;
    font-weight: 600;
    text-align: center;
    padding-left: 1rem;
    text-transform: uppercase;
    box-shadow: -6px -2px 33px #000;
    -moz-box-shadow: -6px -2px 33px #000;
    -webkit-box-shadow: -6px -2px 33px #000;
    background: #F63338;
    background: linear-gradient(183deg, rgba(246, 51, 56, 1) 0%, rgba(219, 46, 52, 1) 49%, rgba(207, 29, 35, 1) 100%);
    text-shadow: 0px -1px 1px #666;
    margin: 0px !important;
}

.svgIcon {
    margin: 6px auto 6px;
}

.nonActiveMenu .svgIcon, .activeMenu .svgIcon{
	width: 24px;
    height: 24px;
    color: #ffffff;
    display: block;
    margin: 0;
    flex-shrink: 0;
    }

#navMenu li em {
    line-height: 28px;
    padding: 9px 0 7px 4px;
    text-transform: uppercase;
    float: left;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-style: normal;
    width: 200px;
    color: #fff;
}

.heading {
    position: relative;
    background: #f7f7f7;
    padding: .45rem .65rem !important;
    color: #000;
    border-radius: 7px;
    margin: 0px 0 .35rem;
}

.heading:hover {
    border-bottom: none !important
}

.heading h3 {
    font-size: .9rem;
    font-weight: 300;
    text-align: left;
    color: #000;
    padding: 1px 0 0 0;
    letter-spacing: .3px;
}

#navMenu li strong {
    line-height: 28px;
    padding: 9px 0 7px 1rem;
    text-transform: uppercase;
    float: left;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    font-style: normal;
    width: 100%;
    border-bottom: 1px solid #525252;
    color: #d8dce7 !important;
}

.barOut .submenu {
    float: left;
}

.barOut #navMenu li {
    float: left;
    width: 260px;
    padding: 0px 5px 0 0;
    cursor: pointer;
}

.barOut .submenu li a {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: 500;
    padding: 10px 0 10px 10px;
    float: left;
    width: 100%;
    color: #f5ebe5;
    border-left: 2px solid #f82b32;
}

.barOut .submenu li a,
.submenu li {
    border-bottom: none
}



/* ==================== Section: FILTROS CALENDARIO ==================== */
.herramientas {
    display: block;
    width: 100%;
    background: #f5f4f4;
    margin-top: 28px;
    padding: 0px 0px 0px 20px;
    font-size: 1.1em;
    color: #e2e2e2;
    text-align: right;
    border-bottom: 1px solid #e9e7e9;
    height: 50px;
    line-height: 50px;
}

.herramientas h1 {
    float: left;
    height: 50px;
    line-height: 51px;
    font-size: .8rem;
    text-transform: uppercase;
    font-weight: 400;
}

.herramientas form {
    border-left: 1px solid #d4d6d4;
    padding-left: 20px;
    background: #e1e2e4;
}

.herramientas svg {
    width: 19px;
    float: left;
    height: 31px;
    margin: 10px 6px 8px .5rem;
}

.herramientas svg {
    color: #0f172a;
    /* el color que quieras */
}

#calendar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #00000072;
    height: 50px;
}

#calendar .icon-calendar {
    width: 20px;
    height: 20px;
    margin: .9rem .75rem .9rem 0;
}

.herramientas fieldset {
    padding: 12px 0px 14px 0px;
    height: 46px;
}

.sec fieldset {
    float: left;
    border-radius: 6px;
    margin-right: 6px;
    font-size: 1.2em;
    margin-top: 1px;
}

.sec select {
    float: left;
    background: none;
    border: none;
    text-align: right;
    padding-right: 10px;
}

.herramientas fieldset select {
    color: #4b4b44;
}

#calendar {
    float: left;
    margin: 0 0 0 10px;
}

#calendar img {
    width: 19px;
    margin: 14px 0 0 0px;
}

#datepicker,
#ev_dashboard_picker {
    height: 50px;
    font-size: 1.1em;
    font-weight: 400;
    color: #202020
}

#datepicker::placeholder {
    color: #3b3b3b
}

.sec .inp,
.inpDate {
    float: left;
    background: none;
    border: none;
}

.de,
.a {
    width: 175px;
    font-weight: 400;
    text-align: center;
}

.filtroBuscar:hover {
    background: #e9c829;
    color: #333;
}

.filtroBuscar {
    background: #f80d32;
    border: none;
    padding: 0px 30px 0px;
    text-transform: uppercase;
    font-size: .9em;
    color: #fff;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    height: 50px;
}

.filtroBuscar:hover {
    background: #e9c829;
    color: #333;
}


/* ==================== Section: Titulos ==================== */
.negativo {
    color: red !important
}

.positivo {
    color: green !mportant
}

.desPrincipal {
    margin: 0px 0px 0.65rem 0px;
    width: 100%;
    float: left;
}

.titulos {
    margin-left: .8rem;
    letter-spacing: -.035rem !important;
    float: left;
    width: 100%;
}

.underline {
    color: #9b9b9b !important;
    float: left;
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0rem 0 0rem 1.25rem;
    line-height: 38px;
}

.underline strong {
    float: none
}

.desPrincipal p {
    color: #9b9b9b;
    display: block;
    font-size: .7rem;
    font-weight: 400;
    text-transform: uppercase;
    padding-bottom: 20px;
    margin-bottom: 0px;
    width: 98%
}

.desPrincipalTwo {
    padding: 0px 0px 20px 20px;
    margin: 78px 0 0px;
    width: 97%;
    float: left
}

.wrapMargin {
    padding: 0px 0px 0px 0px;
    margin: 78px 0 0px;
    width: 100%;
    float: left
}

.desPrincipalTwo p {
    font-family: 'Lato', sans-serif;
    color: #3d568e;
    display: block;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    margin-top: 2px;
    border-bottom: 2px solid #e5007c;
    padding-bottom: 20px;
    margin-bottom: 0px;
}

.cincuenta h1,
.treinta h1,
.treintaCinco h1,
.cien h1,
.setenta h1,
.veinticinco h1,
.veinte h1,
#crmDashboardWrap .title-with-icon {
    display: block;
    font-size: .7rem;
    border-bottom: 1px solid #e8e8e8;
    padding: 6px 0 11px 0;
    margin-bottom: .15rem;
    color: #343434;
    font-weight: 700;
    font-family: sans-serif;
    text-transform: uppercase;
    line-height: 17px;
}

.kpisCount {
    float: left;
    width: 100%;
    text-align: center
}

.kpisCount span {
    display: block;
    padding: 4px 0 10px;
    text-transform: uppercase;
    font-size: .9em
}

.kpisCount strong {
    font-size: 3em;
    font-weight: 200;
    padding: 10px 0 4px;
    display: block;
}

.imageHead {
    float: left;
    width: 99%;
    margin: 20px 0px 20px 8px;
    border: 1px solid #ae9c79;
    padding: 2px;
    border-radius: 12px;
    background: #fff;
}

.imageHead img {
    width: 100%;
    float: left;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

/* ==================== Section: Boxes ==================== */
.white {
    background: #fff
}

.section {
    float: left;
    width: 98%;
    margin-left: 1.5%;
}

.cincuenta {
    float: left;
    width: 49%;
    padding: 1%;
    margin: 1% .5%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
    position: relative
}

.veinticinco {
    float: left;
    width: 24%;
    padding: 1%;
    margin: 0% 0% .5rem;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
    position: relative
}

.setenta {
    float: left;
    width: 73.5%;
    padding: 1%;
    margin: 0% .5rem .5rem 1rem;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
    position: relative
}

.treinta {
    float: left;
    width: 24%;
    padding: 1%;
    margin: 1% .5%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
    position: relative
}

.treintaCinco {
    float: left;
    width: 32.3%;
    padding: 1%;
    margin: 1% .5%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
    position: relative
}

.cien {
    float: left;
    width: 98.5%;
    padding: 1rem;
    margin: .55rem 0 1rem 0%;
    position: relative;
    border-top: 1px solid #e8e8e8;
}

.cienForm {
    float: left;
    width: 100%;
    padding: 1rem 0;
    margin: .55rem 0 1rem 0%;
    position: relative;
    border-top: 1px solid #e8e8e8;
}

.cienSinPad {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    border-top: 1px solid #e8e8e8 !important;
}

.cienSinPadSinBorder {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}

.cienNotificaciones {
    float: left;
    width: 100%;
    padding: 0;
    margin: 1.25rem 0%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
    position: relative
}

.veinte {
    float: left;
    width: 19%;
    padding: 1%;
    margin: 0% .5%;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
    position: relative
}

.veinticinco h1 img,
.cincuenta h1 img,
.setenta h1 img,
.treinta h1 img,
.treintaCinco h1 img,
.cien h1 img,
.veinte h1 img {
    margin-right: 6px;
    float: left;
}

.veinticinco .vermas,
.cincuenta .vermas,
.setenta .vermas,
.treinta .vermas,
.cien .vermas,
.veinte .vermas {
    position: absolute;
    top: 12px;
    right: 10px;
    padding: 5px 9px 3px 10px;
    background: #ffff;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #fff;
}

.veinticinco .vermas:hover,
.cincuenta .vermas:hover,
.setenta .vermas:hover,
.treinta .vermas:hover,
.cien .vermas:hover,
.veinte .vermas:hover {
    background: #f5f4f4;
    4px;
    border: 1px solid #eee;
}

.boxShadowNone {
    box-shadow: none !important
}

.noMarginPadding {
    margin: 0px !important;
    padding: 0px !important
}

/* ==================== Section: Graficas ==================== */
#barMiniChart {
    display: block;
    box-sizing: border-box;
    height: 280px;
    width: 280px;
}

#barMiniChartUsuarios {
    display: block;
    box-sizing: border-box;
    height: 96px;
    width: 100%
}

#myChart {
    display: block;
    box-sizing: border-box;
    height: 287px;
    width: 736px;
}

.chart {
    background: #fff;
    float: left;
    padding: 10px 10px 63px !important;
    height: 370px;
    border-radius: 4px;
}

.tdImg {
    width: 66px;
}

.comparativa {
    float: left;
    width: 100%;
}

.comparativa td {
    position: relative;
    padding: 6px;
    border: 1px dashed #ffdfce;
}

.infoTd a {
    float: left;
    width: 78px;
    text-align: center;
    position: relative
}

.comparativa span {
    float: left;
    bottom: -6px;
    left: 0px;
    font-weight: 800;
    padding: 2px 10px 3px;
    border-radius: 4px;
    font-size: .9em;
    width: 100%;
    text-align: center;
}

.comparativa a:hover span {
    display: block;
}

.valignTop {
    vertical-align: middle;
}

.logoBanco {
    float: left;
    width: 100%;
    padding: 10px
}

.logoBanco img {
    height: 18px;
    text-align: center;
}

.grayColor {
    color: #a3a2a2
}

.bckBlue {
    background-color: #f7faff
}

.productoInfo ul li {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ccc
}

.productoInfo ul strong {
    display: block;
    padding: 10px 0px 4px;
    text-transform: uppercase;
    font-size: .9em;
    color: #f58d52
}

.productoInfo ul a {
    padding: 3px 0px;
    font-weight: 400;
    color: #5d5d5d;
    display: block
}


/* ==================== Section: Graficas ==================== */
.tableUno {
    float: left;
    width: 100%;
    border: 2px solid #ececed;
    border-radius: 3px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin-top: 6px
}

.tableUno th {
    color: #3d568e;
    font-weight: 800;
    padding: 6px;
    background: #ececed
}

.tableUno thead tr {
    border-bottom: 1px solid #ccc;
}

.tableUno td {
    vertical-align: middle;
    border-bottom: 1px dashed #e4e4e4;
    padding: 6px;
    color: #696969;
    font-weight: 400;
}

.tableUno td strong {
    font-weight: 800
}

.markYellow {
    background: #fffcf3
}

/* Colorear filas impares (odd) */
.tableUno tr:nth-child(odd) {
    background-color: #fff;
    /* Cambia este color a tu preferencia */
}

.tableUno tr:last-child td {
    border-bottom: none;
}

/* Colorear filas pares (even) */
.tableUno tr:nth-child(even) {
    background-color: #f8fbff;
    /* Cambia este color a tu preferencia */
}

#usuariosConfig li,
#solicitudes li {
    float: left;
    width: 100%;
}

#usuariosConfig strong,
#solicitudes strong {
    float: left;
    margin-right: 5px;
    width: 7%;
    line-height: 18px;
}

#usuariosConfig p,
#solicitudes p {
    float: left;
    width: 88%
}

#editarUsuarios {
    float: left;
    width: 100%
}

#editarUsuarios table {
    float: left;
    width: 100%
}

#editarUsuarios label {
    float: left;
    width: 100%;
    padding: 16px 10px 10px;
    font-weight: 600;
    font-size: .85em;
    color: #3d568e;
    text-transform: uppercase
}

#editarUsuarios .inp {
    float: left;
    width: 93%;
    height: 32px;
    border: 1px solid #eae7e7;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 0 10px;
    margin-left: 6px
}

#editarUsuarios fieldset .inp:focus {
    background-color: #f7fdff;
    border: 1px solid #9eceff;
}

#labelStatus {
    float: left;
    width: 100px !important;
}

#seleStatus {
    float: left;
    width: 140px;
    height: 25px;
    padding: 0 10px;
    margin: 6px 0 !important;
    border: 1px solid #eae7e7;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #f7fdff
}

#code {
    width: 104px !important;
    padding: 0 10px;
    height: 32px;
    border: 1px solid #eae7e7;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin-left: 6px;
}

#telefono {
    width: 76% !important;
    padding: 0 10px;
    height: 32px;
    border: 1px solid #eae7e7;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

#comentario {
    float: left;
    width: 97%;
    padding: 10px;
    border: 1px solid #eae7e7;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    height: 100px
}

#enviar {
    float: left;
    width: 97%;
    background: #d70f6f;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 0;
    font-size: 1em;
    border: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin-top: 10px
}

#enviar:hover {
    background: #c00f64
}

.statusExp {
    font-size: .74em;
    font-weight: 800 !important;
    text-transform: uppercase;
    background: #3d568e;
    color: #fff;
    padding: 4px 7px;
    border-radius: 6px;
}

.statusExp:hover {
    color: #fff !important
}

#botonImagen {
    float: left;
    width: 100%;
    margin: 5px 0;
    background: #e42b7c;
    color: #fff;
    font-size: .95em;
    text-transform: uppercase;
    font-weight: 800;
    border: none;
    padding: 6px 0;
    border-radius: 4px;
}

#botonImagen:hover {
    background: #d3196b
}

.fullwidth {
    width: 100%;
    float: left;
    margin-bottom: 4px;
}



/* ==================== Section: CSS EFFECTS ==================== */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1;
    /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    animation-duration: .5s;
}

.fade-in.one {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
}


.botonAcciones {
    float: right;
    margin: 1px 0 0 0;
    padding: 4px 10px;
    border-radius: 4px;
    background: linear-gradient(to bottom, #ffffff 5%, #e5ecf6 100%);
    background-color: #f9f9f9;
    cursor: pointer;
    border: 1px solid #c3cddb;
    color: #556a98;
    font-weight: 600;
    font-size: 1em;
}

.botonAcciones img {
    width: 11px;
    margin: 1px 6px 0 0;
    float: left;
}

.botonAcciones:hover {
    background: linear-gradient(to bottom, #ffffff 1%, #ffffff 56%, #dfe9f7 99%, #ffb224 99%, #ff9800 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#a1dbff', GradientType=0);
    color: #222;
    box-shadow: 1px 0px 3px 0px #2b2b23;
    -moz-box-shadow: 1px 0px 3px 0px #2b2b23;
    -webkit-box-shadow: 1px 1px 6px 0px #c3cbd6;
}

.firstMargin {
    margin-right: 32px !important;
}

.conDataTables {
    margin-top: 2px;
}

#DataTables_Table_0_wrapper {
    position: relative
}

.dataTables_length {
    padding: 4px 0;
    line-height: 25px;
    text-transform: uppercase;
    font-size: .7rem;
}

.dataTables_length select {
    margin-left: 10px;
    padding: 4px 0;
    line-height: 32px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #dcd7d7;
    height: 32px;
    margin-right: .5rem;
    text-align: center;
}

.dataTables_info {
    float: left;
    padding: 8px 0 0;
}

.dataTables_paginate {
    padding: 8px;
    float: right
}

.dataTables_paginate a {
    padding: 0 4px;
    color: #3d568e
}

.dataTables_paginate a:hover {
    color: #e5007c
}

.dataTables_filter label {
    font-weight: 500 !important
}

#editarStatus table,
#editarStatus tbody,
#editarStatus tr,
#editarStatus td {
    width: 100%;
    display: block
}

.divide {
    display: block;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    margin-bottom: 10px;
    font-weight: 400
}

.divide strong {
    display: block;
    color: #3d568e;
    padding: 0 0 9px 0;
    font-weight: 800;
    font-size: 1.1em;
}

.divide a {
    display: block;
    width: 100%;
    text-align: center;
    margin: 10px 0;
    background: #eee;
    padding: 9px 0;
    border-radius: 3px;
    color: #3d568e;
    text-transform: uppercase;
    font-size: .95em;
    border: 1px solid #d8ddeb;
}

.divide a:hover {
    background: #f7fdff
}

.divide span {
    display: block;
    width: 100%
}

.divide p {
    display: block;
    width: 100%;
    word-wrap: break-word;
    word-break: break-all;
}

#urlpagina {
    position: absolute;
    right: 17px;
    top: 15px;
    background: #f7fdff;
    padding: 2px 10px;
    border-radius: 4px;
    font-style: normal;
    color: #3d568e;
    font-size: .95em;
    font-weight: 400;
    border: 1px solid #ccc;
    cursor: pointer
}

.notification {
    display: block;
    padding: 6px 0 6px;
    text-transform: uppercase;
    color: #44a44a;
    text-align: center;
    font-size: .95em;
    font-weight: 600
}

#seleStatusExperiencia {
    float: left;
    width: 100%;
    height: 25px;
    padding: 0 10px;
    margin: 6px 0 !important;
    border: 1px solid #eae7e7;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #f7fdff
}

#comentarioExperiencia {
    float: left;
    width: 97%;
    padding: 20px 10px;
    border: 1px solid #eae7e7;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    height: 400px
}

#thumbnail img {
    width: 100%
}

#kpis-container {
    margin-bottom: 1.55rem;
    width: 98.5%
}

.upArrow {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 14px;
    vertical-align: middle;
    color: green
}

.downArrow {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 14px;
    vertical-align: middle;
    color: red
}

.kpiLink,
.crmKpiContext li {
    display: grid;
    grid-template-columns: 78% 9%;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.grid-grafico-medium strong,
.wrapListClient h1,
.crmKpiCard h4 {
    text-transform: uppercase;
    border-bottom: 1px dashed #dbdbdb;
    padding: 0 0 .75rem;
    color: #4b4b4b;
    text-align: left;
    font-size: .7rem;
    font-weight: 500;
    margin-bottom: .75rem;
}

.grid-kpis li strong {
    text-transform: none;
    border-bottom: none;
    padding: 0px;
    margin-bottom: 0px;
    color: #3d568e;
}

.kpiLink img {
    width: 18px;
    height: 21px;
    object-fit: contain;
}

.kpiLink span b {
    float: right;
    line-height: 23px;
    margin: 0 8px 0 4px;
    font-weight: bold;
    font-size: .85rem;
}

.sinCambios {
    float: left;
    width: 100%;
    text-align: center;
    padding: 9% 0px;
    color: #bfbebf !important;
}

.kpiLink strong,
.crmKpiContext li strong {
    font-size: .7rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    color: #8d8a8a;
}

.kpiLink em,
.crmKpiContext li em {
    font-size: 0.75rem;
    font-style: normal;
    color: #1c911c;
    display: flex;
    align-items: center;
    gap: 2px;
    font-weight: 600
}

.grid-kpis li,
.crmKpiContext li {
    margin: .25rem 0
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.25rem;
    width: 98.5%;
}

.menciones-imagenes-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.25rem;
    width: 98.5%;
}

.menciones-imagenes-container img {
    width: 100%
}

.grid-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.5rem 1rem;
    width: 100%;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.grid img {
    width: 100%
}

#mencionesDigitales .icon {
    float: left;
    width: 15%;
    padding: 0 .5rem 0 0
}

#mencionesDigitales .icon img {
    height: 32px
}

#mencionesDigitales .infomedia {
    float: left;
    width: 75%;
}

#mencionesDigitales .infomedia b {
    display: block;
    font-weight: bold;
    color: #777;
    font-size: .7rem;
    letter-spacing: -.1px;
}

#mencionesDigitales .infomedia em {
    display: block;
}

#mencionesDigitales .infomedia span {
    display: block;
    line-height: 26px;
    font-weight: bold;
    font-size: 1.05rem;
}

#mencionesDigitales strong {
    float: left;
    padding: 1rem .5rem;
    line-height: 1.025rem;
    font-size: .8rem;
}

#mencionesDigitales p {
    font-size: .8rem;
    padding: 0.5rem;
    line-height: 1.15rem;
    font-weight: 400;
}

.card,
.grid-box,
.card-kpis,
.crmKpiCard {
    border-radius: .25rem;
    padding: .75rem;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: #fff;
    position: relative
}

.verNota {
    float: left;
    width: 100%;
    border: 1px solid #ccc;
    text-align: center;
    padding: 0.65rem 0;
    border-radius: 4px;
    font-size: .95rem;
    margin-top: 0.25rem;
    color: #623f91;
    transition: background 0.3s ease, color 0.3s ease;
}

.verNota:hover {
    background: #eee
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 4px;
    padding-bottom: 4px;
}

.card-container img {
    max-height: 22px;
    float: left
}

.card-header .icon {
    font-size: 1.75rem;
    vertical-align: bottom;
    margin: 0 0 4px;
}

.card-header .title {
    font-size: .7rem;
    text-transform: uppercase;
    color: #3d568e;
    font-weight: 800;
    font-family: sans-serif;
}

.card-value {
    font-size: .65rem;
    font-weight: bold;
    padding: 1px 0px;
    margin-top: 0.25rem;
    line-height: 1.25rem;
    text-transform: uppercase;
    border-radius: 4px;
}

.card-value strong {
    background: #f8f9fa;
    float: left;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    line-height: 22px;
    width: 15%;
    text-align: center;
    border-radius: 4px;
    font-size: .7rem;
}

.card-value span {
    font-size: .8rem;
    font-weight: bold;
    margin-right: 2px;
}

.card-value p {
    background: #f8f9fa;
    float: left;
    margin: 0 !important;
    padding: 1px 0 0 4% !important;
    line-height: 21px;
    width: 80%;
    font-size: .7rem;
    border-radius: 2px;
}

.tabla-productos-wrapper {
    position: relative;
    overflow: hidden;
    padding: 1rem;
}

.card h3 {
    font-size: .7rem;
    font-weight: 400;
    text-transform: uppercase;
    margin: 1.25rem 0 .65rem;
    padding: 0 0 8px 1px;
    border-bottom: 1px dashed #ccc;
}

.tabla-head-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: none
}

.tabla-productos-container {
    overflow-x: auto;
    transition: transform 0.3s ease-in-out;
    overflow: hidden
}

.tabla-productos-container table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
}

.tabla-productos-container th,
.tabla-productos-container td {
    padding: 1px 0 0 4px;
    border-right: 1px solid #ddd;
    white-space: nowrap;
    border-bottom: 1px dashed #dadce0;
    text-align: left;
    line-height: 32px;
}

.tabla-productos-wrapper th img {
    height: 30px;
}

.tabla-productos-container th {
    background: #f8f9fa;
    text-align: center;
}

.tabla-productos-container th img {
    display: block;
    margin: 10px auto 10px;
    padding: 0 7px;
}

.line {
    background: url(../graphics/underline.png) 4px 31px no-repeat #f9f9f9 !important;
    background-size: 22px !important;
    font-weight: bold !important;
    color: #354778 !important;
    font-size: .75rem !important
}

.tabla-productos-wrapper h1 {
    margin-bottom: 0px !important
}

.scroll-btn {
    cursor: pointer;
    font-size: 0.8rem;
    height: 28px;
    color: #767e8e;
    border-radius: 6px;
    border: 1px solid #dadce0;
    transition: background 0.3s ease, color 0.3s ease;
}

.scroll-btn span {
    float: left;
    font-size: 1.8rem;
    line-height: 22px;
}

.prev em {
    font-size: .8rem;
    float: left;
    font-style: normal;
    line-height: 22px;
    padding: 1px 3px 0 3px;
}

.next em {
    font-size: .8rem;
    float: left;
    font-style: normal;
    line-height: 22px;
    padding: 1px 3px 0 3px;
}

.next span {
    padding: 0 6px 0 3px;
    line-height: 21px;
}

.prev span {
    padding: 0 3px 0 6px;
    line-height: 21px;
}

.scroll-btn:hover {
    background: #3d568e;
    color: #fff
}

.fixed-col {
    position: sticky;
    left: 0;
    background: #f9f9f9;
    z-index: 1;
    text-align: left;
    font-size: .7rem;
    text-align: left !important;
}

.segment {
    border-bottom: 1px solid #ccc !important;
    border-top: 1px solid #ccc !important;
    background: #f8f9fa !important;
}

.icon-check {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    color: green;
    vertical-align: middle;
}

.icon-error {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    color: #d70f6f;
    vertical-align: middle;
}

#wrapMencionesUno {
    display: flex;
    gap: 0px;
    align-items: stretch;
}

.grid-grafico {
    float: left;
    border-radius: 0.25rem;
    padding: 1rem 0.5rem 1rem;
    box-shadow: 1px 1px 8px #b8bdc8;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: #fff;
    height: 340px;
    position: relative;
    margin-top: .55rem;
}

.grid-grafico-small {
    width: 29.5%;
    float: left;
    border-radius: 0.25rem;
    padding: 1rem 0.5rem 2rem;
    box-shadow: 1px 1px 8px #b8bdc8;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: #fff;
    height: 340px;
    position: relative;
    margin-top: .55rem;
}

.grid-grafico-medium {
    width: 67.5%;
    float: left;
    border-radius: 0.25rem;
    padding: 1rem 1rem 2rem;
    box-shadow: 1px 1px 8px #b8bdc8;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: #fff;
    height: 340px;
    position: relative;
    margin: 0.55rem 0 0 1.25rem;
}

#radarChart {
    width: 100% !important;
    height: 100% !important;
}

#menciones h2 {
    background: #202020;
    font-size: .85rem;
    color: #fff;
    padding: 0.55rem;
    font-weight: 400;
    border-radius: 4px;
    margin-bottom: .85rem
}

.svgMenciones {
    max-height: 17px;
    float: right;
    margin: 0 4px 0 0;
}

.veinticincoMenciones {
    float: left;
    width: 24.7%;
    padding: .5% 1rem 1% 0rem;
    margin: 0% 0% 0.5rem;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
    position: relative;
}

#mencionWrap {
    display: grid;
    grid-template-columns: 27% 71%;
    gap: 1rem;
    margin: 0 0 0 20px;
}

.infoMencion {
    float: left;
    width: 100%;
    padding: 1rem 1.5rem;
}

.head {
    border-bottom: 1px solid #ccc;
    padding: 0.75rem 0;
    display: grid;
    grid-template-columns: 13% 86%;
    gap: 0rem;
}

.wrapListClient {
    font-size: .85rem
}

.head p {
    float: left;
    width: 97%;
    padding: .25rem .25rem .25rem 0rem !important;
}

#tabs b {
    font-weight: bold;
    display: block;
    text-transform: uppercase;
    padding: 0.55rem 0;
}

.head span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

.head img {
    max-height: 45%;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-size: 1em;
}

.seguimiento {
    float: left;
    width: 100%;
    min-height: 100px;
    border: 1px solid #dfdfdf;
    background: #f5f5f5;
    padding: 20px 20px 80px 20px;
}

#tabs h1,
#flowBoxes h1 {
    color: #202020;
    font-size: 1.2em;
    font-weight: 300;
}

.titTabs {
    padding: 1.25rem 1rem !important;
    text-transform: uppercase;
    font-size: 1rem !important;
}

.floRiBoton {
    position: absolute;
    right: 1rem;
    background: #f80d32 !important;
    color: #fff;
    border: none;
    bottom: 10px;
    padding: 5px 1.55rem;
    border-radius: 4px;
    font-weight: bold;
    font-size: .85rem !important;
}

.note-editable {
    line-height: 1.6em;
}

.thrity {
    float: left;
    width: 20%;
}

.thrity img {
    width: 100%;
    border: 1px solid #ccc;
    padding: 2px;
}

.seventy {
    float: left;
    width: 100%;
}

.seventy strong {
    font-size: 1.25rem;
    padding: 0.75rem 0;
    display: block;
    line-height: 1.75rem;
}

#tabs div ul {
    float: left;
    width: 100%;
    padding: 20px 0;
    background: url(../graphics/dotComments.png) 32px 11px no-repeat;
    margin-top: 0px;
}

#tabs div li {
    float: left;
    width: 100%;
    padding-bottom: 10px;
    background: url(../graphics/bck-lineComments.png) 37px 0 repeat-y;
}

.aviso {
    width: 253px;
    background: #5b5b5b;
    padding: 8px 0;
    margin: 0 auto;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-weight: 600;
    color: #fff;
}

.avisoTabs {
    background: #f6f6f6;
    padding: 8px 24px;
    margin: 0 auto;
    font-weight: 600;
    color: #547ba5;
}

#tabs-1 form,
#tabs-2 form,
#tabs-3 form {
    position: relative;
    float: left;
    width: 100%;
}

#tabs-2 img {
    width: 100%;
    border: 1px solid #ccc;
    padding: 2px;
}

.muy_baja {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: #DEDC00;
    width: 10px;
    height: 10px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
}

.baja {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: #c3c3c3;
    width: 10px;
    height: 10px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
}

.media {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: #FFE800;
    width: 10px;
    height: 10px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
}

.alta {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: #FF9700;
    width: 10px;
    height: 10px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
}

.muy_alta {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: #e40604;
    width: 10px;
    height: 10px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    animation: parpadeo 1s infinite;
}

.mensaje .muy_baja {
    display: block;
    position: inherit;
    right: 1rem;
    top: 1rem;
    border: 1px solid #DEDC00;
    background: none;
    width: 12px;
    height: 12px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
}

.mensaje .baja {
    display: block;
    position: inherit;
    right: 1rem;
    top: 1rem;
    border: 1px solid #c3c3c3;
    background: none;
    width: 12px;
    height: 12px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
}

.mensaje .media {
    display: block;
    position: inherit;
    right: 1rem;
    top: 1rem;
    border: 1px solid #FFE800;
    background: none;
    width: 12px;
    height: 12px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
}

.mensaje .alta {
    display: block;
    position: inherit;
    right: 1rem;
    top: 1rem;
    border: 1px solid #FF9700;
    background: none;
    width: 12px;
    height: 12px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
}

.mensaje .muy_alta {
    display: block;
    position: inherit;
    right: 1rem;
    top: 1rem;
    border: 1px solid #e40604;
    background: none;
    width: 12px;
    height: 12px;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    animation: parpadeo 1s infinite;
}

.wrapList {
    position: relative;
    padding-bottom: 5px;
    padding-top: 62px;
}

#actions {
    display: block;
    min-height: 58px;
    top: 5px;
    margin-left: 22px;
    margin-bottom: 1rem;
    width: 97.5%;
    border: 1px solid #fff;
    padding: 11px 0 7px 0px;
    background-color: #f6f6f6;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
}

.borradoStatus {
    font-size: 1em;
    color: #ffffff;
    padding: 4px 10px;
    float: left;
    text-transform: capitalize;
    font-weight: bold;
    background: #555556;
    border-radius: 4px;
    margin: 6px 20px;
    text-transform: uppercase;
}

.back {
    float: right;
    margin-right: 10px;
}

.botBlanAzu {
    float: left;
    position: relative;
    padding: 3px 10px 3px 7px;
    text-transform: uppercase;
    border: 1px solid #bfbaba;
    color: #6c738e;
    height: 35px !important;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    margin-left: 15px;
    background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
}

.addSmall {
    float: left;
    position: relative;
    padding: 2px 9px 3px;
    text-transform: uppercase;
    border: 1px solid #d8d6d6;
    color: #333;
    height: 34px !important;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    margin-left: .35rem;
    background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
    background-color: #f9f9f9;
    cursor: pointer;
}

.addSmall:hover,
.botBlanAzu:hover {
    border: 1px solid #dcdcdc;
    background: linear-gradient(0deg, #f9f9f9 5%, #e9e9e9 100%);
}

.notUSer {
    color: #666;
    float: left;
    width: 24px;
    height: 24px;
    margin-right: .5rem
}

.svgIcon {
    width: 24px;
    height: 24px;
    color: #ffffff;
}

.svgIconTickets {
    width: 24px;
    height: 24px;
    color: #b18336;
    float: left;
    padding: 0rem;
    margin: 0px;
    margin-right: .5rem;
}

.iconPlus img {
    width: 14px;
    border-radius: 4px;
    float: left;
    margin: 7px 9px 3px 0;
    max-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iconPlus svg {
    float: left;
    color: #3d568e;
    width: 17px;
    padding: 6px 0;
}

.iconPlusGreen svg {
    float: left;
    color: green;
    width: 17px;
    padding: 6px 0;
}

.iconPlus:hover svg,
.botBlanAzu:hover svg,
.botBlanAzu:hover span,
.accionesRapidas a:hover svg {
    color: #e5007c;
}

.wrapClithirty {
    border-radius: 0.25rem;
    padding: 1rem 0.5rem 1rem;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: #fff;
    position: relative;
    font-size: .8rem;
}

.wrapCliSev {
    border-radius: 0.25rem;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #b8bdc8;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: #fff;
    margin-top: 0;
    position: relative;
    font-size: .8rem;
}

#tabs .ui-state-active a {
    background: #deedfb;
}

.botBlanAzu span,
.botonEdicion .editar {
    margin-top: 8px;
    float: left;
    font-style: normal;
    color: #6c738e;
    padding-left: 5px;
    line-height: 16px;
}

#tabs li a img {
    float: left;
    margin: 0 10px 0 0;
    height: 14px;
}

#tabs li a svg {
    float: left;
    margin: 0 10px 0 0;
    height: 16px;
    color: #2081ea;
}

#fech {
    float: right;
    font-size: .7rem;
    letter-spacing: 0px;
    padding-right: 0.55rem;
}

.wrapListClient thead {
    margin-bottom: .55rem;
    width: 100%
}

.wrapListClient strong {
    float: left;
    line-height: 32px;
    margin-right: 10px;
    color: #3d568e
}

.wrapListClient p {
    display: block;
    border-bottom: 1px solid #e9e9e9;
    line-height: 32px;
    color: #202020
}

.wrapListClient h4 {
    text-transform: uppercase;
    border-bottom: 1px dashed #ccc;
    padding: 0 0 6px;
    margin-bottom: 1rem;
    color: #202020;
    text-align: left;
    font-size: .85rem;
    font-weight: 600;
    margin-top: 2rem;
}

.wrapListClient .card {
    padding: 0px;
    box-shadow: none
}

.wrapListClient img {
    width: 100%
}

.wrapListClient label {
    line-height: 22px;
    display: block
}

.wrapListClient h1 {
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
}

.videoFrame {
    width: 100%;
    float: left;
    padding: 0 1rem 3rem;
}

.videoFrame iframe {
    width: 320px;
    height: 220px;
    border: 1px solid #ccc;
    padding: 2px;
}

.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.ui-tabs-nav svg {
    float: left;
    margin-right: 10px;
}

.ui-state-default em {
    float: left;
    font-weight: 400;
    font-style: normal;
}

.audio-player {
    padding: 0px 16px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px dashed #ccc;
}

.video-player {
    padding: 0px;
    width: 100%;
    display: flex;
    align-items: start;
    gap: 1rem;
    border-bottom: 1px dashed #ccc;
}

.audio-player audio {
    width: 100%;
    outline: none;
    height: 44px;
    margin: 0.25rem 0 0;
}


.audio-player label,
.video-player label {
    font-weight: 600;
    color: #547ba5;
    font-size: .9rem;
    display: block;
    width: 100%;
}

.audio-player p,
.,
.video-player p {
    font-size: .8rem;
    padding: 0.25rem 0;
}

.wrapListClientTwo .ui-widget-header {
    border: none;
    border: 1px solid #ccc;
}

#contenidoForms {
    padding: 1.25rem 2rem 0 2rem
}

#addForms,
#addFormsCrm {
    position: fixed;
    top: 0px;
    right: -80%;
    z-index: 99999999999;
    background: #fbfbfb;
    height: 100vh;
    width: 65%;
    box-shadow: -3px 0px 15px #c6c0c0;
    font-size: 1rem;
    transition: right 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    overflow-x: hidden;
}

#addForms.abierto,
#addFormsCrm.abierto {
    right: 0;
}

#imageForm {
    text-align: center;
    margin: 0rem 0px 1rem;
    width: 100%;
}

#imageFormCreativo {
    text-align: center;
    margin: 0rem 0px 1rem;
    width: 96%;
}

#imageFormCreativoEmail {
    text-align: center;
    margin: 0rem 0px 0rem;
    width: 100%;
}

#imageForm img,
#imageFormCreativo img,
#imageFormCreativoEmail img {
    width: 100%;
    border: 1px solid #e8e8e8;
    padding: 2px;
}

.heightMin {
    min-height: 84vh;
    margin: 0 !important;
    background: #fff;
    border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    box-shadow: none !important
}

.check svg,
.checkImportant svg {
    color: #e5007c !important
}

.wrapFormTwo {
    float: left;
    width: 76%;
}

.num {
    float: left;
    width: 50%;
}

.num b {
    float: left;
    width: 22%;
    font-size: .65rem;
    padding: 0 .25rem 0 .5rem;
    line-height: 33px;
    text-transform: uppercase;
    font-weight: 400;
}

.formMenciones .inpDoble {
    float: left;
    width: 78%;
    border: 1px solid #ccc;
    border-radius: 8px;
    height: 38px;
    padding: 0 0.85rem;
    color: #9e9e9e;
    font-size: .8rem;
}

.formMenciones {
    font-size: .95rem;
    float: left;
    width: 100%;
}

.formMenciones h1 {
    font-size: .85rem;
    font-weight: 600;
    color: #202020;
    letter-spacing: .035rem;
    text-transform: uppercase;
    text-align: left;
    padding: .25rem 0;
}

.grupo-status-tag.is-active,
.grupo-status-tag.is-deleted {
    background: #393838;
    color: #f1f4f5;
    font-size: .6rem;
    margin-right: 4rem;
    float: right;
    margin-top: -3px;
}

.grupo-status-tag {
    display: inline-block;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.formMenciones label {
    float: left;
    width: 24%;
    line-height: 34px;
    font-size: .85rem;
    color: #202020;
    font-weight: 400;
}

.formMenciones .inp {
    float: left;
    width: 76%;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    height: 38px;
    padding: 0 0.85rem;
    color: #9e9e9e;
    font-size: .8rem;
}

.formMenciones h2 {
    border-bottom: 1px solid #e8e8e8;
    font-size: .85rem;
    text-transform: uppercase;
    font-weight: 400;
    margin: 3.25rem 0 .75rem;
    padding: .0rem 0 .55rem;
}

.formMenciones .inpTagify {
    float: left;
    width: 76%;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    height: auto;
    padding: 0 0.85rem;
    color: #9e9e9e;
    font-size: .8rem;
}

.formMenciones select {
    float: left;
    width: 76%;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    height: 38px;
    font-size: .8rem;
    padding: 0 8px;
    color: #9b9b9b;
}

.formMenciones textarea {
    float: left;
    width: 100%;
    margin: 1rem 0 0;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #f1f1f1;
    height: 130px;
    font-size: .85rem;
}

#formTicketsQuick label {
    margin: .25rem 0 0 .25rem
}

#formTicketsQuick textarea {
    float: left;
    width: 100%;
    margin: 0;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    height: 80px;
    font-size: .85rem;
}

.formMenciones textarea::placeholder {
    font-size: .85rem;
    color: #9b9b9b;
}

.formMenciones fieldset {
    padding: 4px 0;
    display: block;
}

#submitFormMenciones {
    background: #cccf !important;
    color: #fff;
    border: none !important;
    bottom: 10px;
    padding: 7px 1.55rem;
    border-radius: 4px;
    font-weight: bold;
    font-size: .85rem !important;
    margin-top: 1rem;
    float: left;
    width: 100% !important;
    height: 36px !important;
    font-size: .9rem !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#submitFormMenciones:hover {
    background: #f80d32 !important;
}

#gridFormTwoColumns {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 2rem;
}

#gridFormTwoColumnsTwo {
    display: grid;
    grid-template-columns: 43% 54%;
    gap: 2rem;
}

#cerrarPanel,
#cerrarPanelCrm {
    position: absolute;
    top: .85rem;
    right: 2rem;
    border: none;
    border-radius: 50%;
    width: 23px;
    height: 23px;
    background: #ebe7e7;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 99999;
    font-size: .8rem;
    font-weight: 600;
    color: #333;
}

.subtitle {
    font-size: .8rem;
    color: #777;
    margin-top: .25rem;
}

#cerrarPanel:hover,
#cerrarPanelCrm:hover {
    background: #f80d32;
    color: #fff
}

#firstColumn p {
    font-size: .8rem;
    text-transform: none
}

#firstColumn .icon {
    margin: 0.15rem .45rem 0 0;
    float: left;
    color: #888787;
    width: 15px;
}

#gridFormTwoColumns #firstColumn {
    background: #f7f7f7;
    border: 1px solid #E6E6E6;
}

#gridFormTwoColumns #firstColumn h1 {
    margin: .25rem 0 .35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.25rem;
}

#gridFormTwoColumns #firstColumnTwo {
    background: #f7f7f7;
    border: 1px solid #E6E6E6;
    padding: 1rem;
}

#gridFormTwoColumnsTwo #firstColumn {
    background: #fff;
    padding: 1rem;
    border: 1px solid #eee;
}

.tagify {
    float: left;
    width: 60%;
    background: #fff;
    border-radius: 4px;
}

.tagify__input {
    font-size: .85rem;
    color: #9b9b9b !important;
}

#subcategorias::placeholder {
    color: #9b9b9b !important
}

.tagify {
    --tags-disabled-bg: #F1F1F1;
    --tags-border-color: #DDD;
    --tags-hover-border-color: #CCC;
    --tags-focus-border-color: #3595f6;
    --tag-border-radius: 3px;
    --tag-bg: #E5E5E5;
    --tag-hover: #D3E2E2;
    --tag-text-color: black;
    --tag-text-color--edit: black;
    --tag-pad: 0.3em 0.5em;
    --tag-inset-shadow-size: 1.2em;
    --tag-invalid-color: #e36ba1;
    --tag-invalid-bg: #e36ba1;
    --tag--min-width: 1ch;
    --tag--max-width: 100%;
    --tag-hide-transition: 0.3s;
    --tag-remove-bg: rgba(211, 148, 148, 0.3);
    --tag-remove-btn-color: black;
    --tag-remove-btn-bg: none;
    --tag-remove-btn-bg--hover: #e36ba1;
    --input-color: inherit;
    --placeholder-color: #8b9cc0;
    --placeholder-color-focus: rgba(0, 0, 0, 0.25);
    --loader-size: .8em;
    --readonly-striped: 1;
    display: inline-flex;
    align-items: flex-start;
    align-content: baseline;
    flex-wrap: wrap;
    border: 1px solid var(--tags-border-color);
    padding: 0;
    line-height: 0;
    outline: 0;
    position: relative;
    box-sizing: border-box;
    font-size: .85rem;
    width: 72%
}

.custom-file-input {
    position: relative;
    display: inline-block;
    width: 76%;
    border: 1px dashed #08abeb;
    border-radius: 6px;
    background-color: #e8f2f9;
    padding: 6px 15px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.custom-file-input:hover {
    background-color: #e9f1f7
}

.custom-file-input:hover {
    background-color: #e3f0f9;
}

.custom-file-input input[type="file"] {
    position: absolute;
    font-size: 100px;
    opacity: 0;
    left: 0;
    top: 0;
    height: 36px;
    width: 200px;
    cursor: pointer;
}

.custom-file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #09abeb;
    font-size: .85rem;
    cursor: pointer;
}

.custom-file-label svg {
    width: 24px;
    height: 24px;
    stroke: #09abeb;
}

.pdf img {
    width: 44px;
    float: left;
    margin-right: 1rem
}

.accionesRapidas {
    float: left;
    margin-left: 1.45rem;
    border-left: 1px solid #d1d6dc;
    padding-left: 1rem;
}

#productoForm {
    display: block;
    margin-bottom: 1rem
}

#productoForm strong {
    display: block;
    margin: 1.55rem 0 0 0;
}

#productoForm p {
    display: block;
    margin: 0.55rem 0 2rem;
    font-size: .85rem;
}

#productoForm strong svg {
    width: 20px;
    float: left;
    margin-right: 10px;
}

.wrapListClientTwo .ui-widget-header {
    border-bottom: 1px solid #e1e1e1 !important;
}

.wrapListClientTwo .ui-widget-header {
    height: 42px !important;
}

.ui-tabs .ui-tabs-panel {
    margin: 1px 0 !important;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-radius: 0px !important;
    border-right: 1px solid #fff
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-radius: 0px !important;
}

#tabs .ui-state-default a {
    padding: .75rem 2rem !important;
}

.swal2-warning {
    border-color: #ff676c !important;
    color: #e5007c !important;
}

.swal2-confirm {
    background: #f82b32
}

.swal2-confirm:hover {
    background: #e20303
}

.swal2-title {
    display: block;
    font-size: 1rem;
    color: #6f6f6f;
    letter-spacing: -.3px;
    line-height: 7px;
    font-weight: 400;
    text-transform: uppercase;
    padding: .5rem 0
}

.swal2-html-container {
    display: block;
    color: #2a3d69;
    font-size: 1rem;
}

div:where(.swal2-container).swal2-center>.swal2-popup {
    grid-column: 2;
    grid-row: 2;
    place-self: center center;
    padding: 1rem;
    border: 5px solid #e4e4e4;
    border-radius: 13px;
}

.swal2-input {
    height: 38px !important;
    padding: .25rem;
    margin: 0px .5rem;
    font-size: .9rem;
}

.swal2-input::placeholder {
    font-size: .9rem
}

#tituloEmail {
    display: block;
    width: 100%;
    background: none;
    border: 0px;
    font-weight: 400;
    padding: 0px;
    color: #333;
    font-size: 1.3rem;
    margin: 0px;
    line-height: 29px;
}

#contenidoEmail {
    float: left;
    width: 100%;
    margin: 0.6rem 0 0;
    padding: 0px;
    border-radius: 6px;
    border: none;
    font-size: .95rem;
    background: none;
    color: #333;
    margin-bottom: 1rem;
    line-height: 24px;
}

#gridFormTwoColumnsTwo #imageFormCreativo,
#gridFormTwoColumnsTwo #contenidoEmail {
    width: 100% !important
}

.tagsForms {
    background: #e6e6e6;
    color: #fff;
    font-size: .7rem;
    padding: 0.4rem 0.45rem;
    border-radius: 4px;
    font-weight: 400;
    letter-spacing: normal;
    width: 115px;
    display: block;
    text-align: center;
    margin: 0.55rem 0;
    color: #464444;
}

.botonEmail {
    background: #3d568e;
    border-radius: 35px;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    border: none;
    height: 48px;
    color: #fff;
    font-size: 1rem;
    float: left;
    width: 100%;
    line-height: 48px;
    text-align: center;
}

.boletin {
    width: 100%
}

.copyrightEmail {
    font-size: .8rem;
    text-align: center;
    margin-top: 2rem;
}

.copyrightEmail p {
    color: #888;
    padding: 0.1rem 0 0;
}

.copyrightEmail span {
    color: #e5007c;
    font-weight: bold;
}

.subituloEmail {
    font-size: 1rem;
    letter-spacing: normal;
    margin: 1rem 0;
    font-weight: 400;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 1rem;
}

.sideEnlace {
    display: block;
    padding: 0.75rem 0;
    text-align: center;
    background: #ddd;
    margin: 1rem 0 2rem;
    border-radius: 2px;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: #3d568e;
}

.sideEnlace:hover {
    background: #f80d32;
    color: #fff
}

#alerta {
    background: #f80d32 !important;
    border: 1px solid #fff;
}

#alerta svg {
    color: #fff;
}

#ai {
    background: #f82b32;
    right: 1rem;
    position: fixed;
    z-index: 99999;
    bottom: 1rem;
    border-radius: 114px;
    padding: 0.75rem;
    height: 61px;
    box-shadow: -2px 0px 28px #333;
    border: 1px solid #ee47a7;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

#ai svg {
    width: 35px;
    color: #eecadd
}

#ai:hover {
    background: #b80d70
}

#ai:hover svg {
    color: #fff
}

.morning-bck #important h1,
.night-bck #mportant h2 {
    color: #3f3f41;
}

#wrapChat h1 {
    display: block;
    width: 95%;
    margin: 0px 0 0 10px;
}

#wrapChat h2 {
    margin-bottom: 16px;
}

#important h1 {
    font-size: 1.6rem;
    font-weight: 300;
    padding: 0px 0 16px;
    color: #3f3f41;
    line-height: 40px;
}

#important h2 {
    font-size: 1rem;
    font-weight: 400;
    color: #3f3f41;
    line-height: 25px;
    padding-left: 30px;
    background: url(../graphics/bulb-negro.svg) no-repeat 9px 4px;
    background-size: 14px;
    letter-spacing: .8px;
}

.cita-button img {
    float: left;
    width: 15px;
    margin: 0 7px;
}

.cita-button:hover {
    background: #e2e1e1;
    cursor: pointer
}

.morning-bck .chat-container:focus-within {
    box-shadow: 0px 0px 25px #bdbdbd;
    -moz-box-shadow: 0px 0px 25px #d9d9d9;
    -webkit-box-shadow: 0px 0px 25px #d9d9d9;
    border: 1px solid #bdbdbd;
}

.messages {
    max-height: 300px;
    overflow: auto;
}

.morning-bck .chat-container {
    background: #ededed;
    border-radius: 18px !important;
    -moz-border-radius: 18px !important;
    -webkit-border-radius: 18px !important;
    padding: 10px 20px;
    box-shadow: 0px 0px 25px #d9d9d987;
    -moz-box-shadow: 0px 0px 25px #d9d9d987;
    -webkit-box-shadow: 0px 0px 25px #d9d9d987;
    height: 130px;
    border: 1px solid #e0e0e0;
}

:focus {
    outline: 0;
}

.chat-container textarea {
    resize: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    font-family: arial;
}

.input-group {
    display: flex;
    position: relative;
}

.morning-bck .input-group textarea {
    flex: 1;
    padding: 10px;
    border: 0px solid #3f3f41;
    border-radius: 3px;
    background: #ededed;
    color: #abaaa8;
    font-size: 1.2rem;
}

.morning-bck .cita-button {
    position: absolute;
    bottom: -45px;
    font-size: .7rem;
    line-height: 15px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 14px;
    border: 1px solid #ccc;
    padding: 7px 13px 7px 7px;
    color: #919191;
}

.morning-bck #sendButton {
    border: none;
    color: #fff;
    border-radius: 22px;
    margin-left: 5px;
    cursor: pointer;
    height: 36px;
    width: 36px;
    padding: 10px;
    background: url(../graphics/enter-blanco.svg) center #3f3f41 no-repeat;
    background-size: 16px !important;
    position: absolute;
    bottom: -47px;
    right: -12px;
    box-shadow: 1px 1px 10px #fff;
    -moz-box-shadow: 1px 1px 1s0px #fff;
    -webkit-box-shadow: 1px 1px 10px #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.input-group textarea::placeholder {
    color: #abaaa8;
    font-size: 1.2rem;
    font-weight: 200;
}

.input-group textarea::focus .chat-container {
    border: 1px solid #545454 !important;
}

.night-bck #wrapchat {
    position: relative;
    margin-top: 20px;
    background: #212121;
    float: left;
    width: 98%;
    margin: 1% 1% 0 1%;
    border-radius: 7px;
    padding: 0 10px;
}

.morning-bck #sendButton:hover {
    background: url(../graphics/enter-blanco.svg) center #b80d70 no-repeat;
    background-size: 16px;
}

#powered {
    width: 195px;
    margin: 0 auto;
    display: block;
    float: none;
    border: none;
    margin-top: 12px;
    padding-top: 0px;
}

#powered img {
    width: 13px;
    float: left;
    margin-right: 8px;
    margin-top: 3px;
}

#important span p {
    float: left;
    width: 85%;
    color: #959595;
}

#wrapChat {
    display: flex;
    flex-direction: column;
    height: 96vh;
}

.top-section {
    flex: 0 0 71%;
    padding: 0 1rem;
}

.bottom-section {
    flex: 0 0 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 1rem 0 1rem;
}

.chat-container {
    flex-grow: 1;
}

.wrapText {
    float: left;
    width: 150%;
    padding: 1rem 0;
}

.wrapTextVideo {
    float: left;
    width: 100%;
    padding: 0;
}

.wrapTextPdf {
    float: left;
    width: 92%;
    padding: 0;
}

.wrapTextPdf strong {
    float: left;
    width: 100%;
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: .9rem;
}

.wrapTextPdf p {
    float: left;
    width: 100%;
    font-weight: 400;
    margin-bottom: 0.25rem;
    font-size: .85rem;
}

.pdf-player {
    border-bottom: 1px dashed #ccc;
    float: left;
    width: 100%;
    padding: 0.55rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pdf-player:hover {
    background: #fafafa;
}

#powered {
    text-align: center;
    font-size: .85rem;
}

.icons {
    float: left;
}

.mensajeTexto strong {
    font-size: .85rem;
    margin-bottom: 0.25rem;
    display: block;
}

.mensaje {
    display: flex;
    align-items: start;
    padding: .75rem 2rem .75rem 30px;
    border: 1px solid #fff;
    border-bottom: 1px solid #eee;
    font-size: .7rem;
    cursor: pointer;
}

.mensaje .icons {
    flex: 0 0 4%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accionesEmail {
    display: flex;
    align-items: start;
    padding: .75rem 2rem .75rem 30px;
    border: 1px solid #fff;
    border-bottom: 1px solid #eee;
    font-size: .7rem;
    cursor: pointer;
}

.accionesEmail .icons {
    flex: 0 0 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accionesEmail .icons span {
    float: left;
    padding: 0px 12px 15px 0;
    margin-right: 0rem !important;
    cursor: pointer;
}

.accionesEmail .icons svg {
    float: left;
    color: #ccc;
    width: 19px !important;
}

.accionesEmail .mensajeTexto {
    padding-left: 1rem;
}

.accionesEmail {
    padding-left: 2rem;
}

.leido {
    background-color: #f2f6fc !important;
}

.mensaje:hover,
.accionesEmail:hover {
    border: 1px solid #eee;
    box-shadow: 1px 5px 8px #e8e8e8;
    background-color: #f2f6fc !important;
}

#ajaxEmail {
    width: 400px;
    margin: 0 auto;
    display: block;
}


.mensaje .mensajeTexto {
    flex: 0 0 75%;
}

.mensaje .fechaNotificacion,
.accionesEmail .fechaNotificacion {
    flex: 0 0 20%;
    text-align: right;
    color: #777;
}

.mensaje .fechaNotificacion em,
.accionesEmail .fechaNotificacion em {
    display: block;
    font-style: normal;
    font-weight: 600;
    margin-top: 0.25rem;
    text-align: right;
    color: #b4b4b4;
}

.fechaNotificacion span {
    font-weight: bold;
    font-size: 0.8rem;
}

.icons span {
    float: left;
    padding: 6px 0;
    margin-right: 1rem;
    cursor: pointer;
}

.icons svg {
    float: left;
    color: #ccc;
    width: 17px;
}

.icons:hover svg {
    float: left;
    color: #3d568e;
    width: 17px;
}


#depto_suggest_inner {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 4px;
    overflow: hidden;
    max-height: 220px;
    overflow: auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    width: 72%;
    float: right;
    margin: 25px 1.95rem;
    font-size: .8rem;
}

#emailMsg {
    margin-top: 6px;
    font-size: 12px;
    float: left;
    padding: .25rem 0;
    font-weight: 400;
}

/* =========================================================
DIRECTORIO / Tickets – CSS COMPLETO (TABS + DATATABLES)
========================================================= */
.msgDirectorio {
    opacity: .8;
    background: #fff0f0;
    text-align: center;
    color: #b41c13;
    padding: .5rem 0;
    border: 1px solid #fcadad;
    font-size: .75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Reset local */
#tabsTickets #tabsTickets *,
#directorio,
#tablasGenerales,
#tblCrmNuevos {
    box-sizing: border-box;
}

#tabsTickets tbody tr,
#inventario tbody tr,
#directorio tbody tr {
    border-bottom: 1px dashed #e6e6e6
}

#directorio td span,
#tablasGenerales span,
#tabsTickets td span,
#inventario td span,
#tblCrmNuevos td span {
    text-transform: capitalize
}

#tabGrupos .grupo-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: transform .15s ease;
}

#tabGrupos .grupo-toggle:hover {
    transform: scale(1.06);
}

#tabGrupos .grupo-toggle .toggle-label {
    display: inline-block;
    text-align: center;
    font-size: .6rem;
    text-transform: uppercase;
    font-weight: 600;
}

/* =========================
jQuery UI Tabs
========================= */
#tabsTickets .ui-widget-header,
#directorio .ui-widget-header,
#tablasGenerales .ui-widget-header {
    border: none;
    background: #efefef;
}

#tabsTickets .ui-state-default,
#directorio .ui-state-default,
#tablasGenerales .ui-state-default,
#tablasGenerales .ui-state-default,
#tabsTickets .ui-widget-content .ui-state-default,
#tablasGenerales .ui-state-default,
#directorio .ui-widget-content .ui-state-default,
#tabsTickets .ui-widget-header .ui-state-default,
#directorio .ui-widget-header .ui-state-default,
#tablasGenerales .ui-widget-header .ui-state-default {
    background: #fefefe;
    color: #333;
    font-weight: 600;
    border-right: 1px solid #e8e8e8;
}

#tabsTickets .dataTables_empty {
    text-align: center;
    padding: .55rem
}

#tabsTickets .ui-state-active,
#directorio .ui-state-active,
#tabsTickets .ui-widget-content .ui-state-active,
#directorio .ui-widget-content .ui-state-active,
#tablasGenerales .ui-widget-content .ui-state-active,
#tabsTickets .ui-widget-header .ui-state-active,
#directorio .ui-widget-header .ui-state-active,
#tablasGenerales .ui-widget-header .ui-state-active {
    background: #efefef;
}

#tabsTickets .ui-state-active .ui-tabs-anchor,
#directorio .ui-state-active .ui-tabs-anchor,
#tablasGenerales .ui-state-active .ui-tabs-anchor {
    border-bottom: 2px solid #f82b32;
    color: #000;
}

#tabsTickets .ui-widget-header a,
#directorio .ui-widget-header a,
#tablasGenerales .ui-widget-header a {
    color: #9b9b9b;
}

/* Tabs full width */
#tabsTickets>.ui-tabs-nav,
#tabsDirectorio>.ui-tabs-nav {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}

#tabsTickets>.ui-tabs-nav>li,
#tabsDirectorio>.ui-tabs-nav>li {
    flex: 1 1 0;
    margin: 0 !important;
    text-align: center;
}

#tabsTickets>.ui-tabs-nav>li>a,
#tabsDirectorio>.ui-tabs-nav>li>a {
    display: block;
    width: 100%;
    padding: 1rem .75rem;
    font-size: .85rem;
    font-weight: 400;
}

#tabsTickets .ui-tabs-panel,
.kpiWrap,
#directorio .ui-tabs-panel,
#tablasGenerales .ui-tabs-panel,
.kpiWrap,
#inventario {
    padding: 1em 0;
    background: none;
    border: 0;
    position: relative;
}

#tabsTickets td a,
#directorio td a,
#tablasGenerales td a,
#inventario td a {
    float: left;
    width: 100%;
    height: 28px;
    line-height: 28px;
}

/* =========================
DataTables – Controles
========================= */
#tabsTickets .dataTables_filter,
#directorio .dataTables_filter,
#tablasGenerales .dataTables_filter,
#inventario .dataTables_filter {
    position: absolute;
    top: 14px;
    right: 0px;
}

#tabsTickets .dataTables_filter input,
#directorio .dataTables_filter input,
#tablasGenerales .dataTables_filter input,
#inventario .dataTables_filter input {
    background: url(../images/svg/lupa-gris.svg) 8px 7px no-repeat #ffffff;
    border: 1px solid #dcd7d7;
    width: 300px;
    height: 32px;
    padding: 0 10px;
    border-radius: 4px;
    text-transform: capitalize;
    background-size: 17px;
    padding-left: 2rem;
}

#tabsTickets .dataTables_filter input:focus,
#directorio .dataTables_filter input:focus #tablasGenerales .dataTables_filter input:focus,
#inventario .dataTables_filter input:focus {
    background: url(../images/svg/lupa-gris.svg) 8px 7px no-repeat #f7fbff;
    border: 1px solid #91ddff;
    box-shadow: -1px 1px 8px #e5f6fc;
    -moz-box-shadow: -1px 1px 8px #e5f6fc;
    -webkit-box-shadow: -1px 1px 8px #e5f6fc;
    background-size: 17px;
    padding-left: 2rem;
}

#tabsTickets .dataTables_length,
#tablasGenerales .dataTables_length,
#directorio .dataTables_length,
#inventario .dataTables_length {
    margin-left: 1rem;
    margin-bottom: .55rem
}

#tabsTickets .current,
#directorio .current,
#tablasGenerales .current,
#inventario .current {
    background: #f82b32;
    color: #fff !important;
    border-radius: 4px;
    padding: 2px 6px;
    margin: 0 .55rem;
}

#tabsTickets .dataTables_info,
#directorio .dataTables_info,
#tablasGenerales .dataTables_info,
#inventario .dataTables_info {
    float: left;
    padding: 1.2rem 0 0 1rem;
    font-size: .8rem;
}

#tabsTickets span strong,
#directorio span strong,
#tablasGenerales span strong {
    font-weight: 400;
}

#tabsTickets span em,
#directorio span em,
#tablasGenerales span em,
#inventario span em {
    font-weight: 400;
    font-style: normal;
    text-transform: lowercase !important;
    float: left;
    margin-left: .25rem;
    line-height: 28px;
}

#tabsTickets .dataTables_paginate,
#directorio .dataTables_paginate,
#tablasGenerales .dataTables_paginate,
#inventario .dataTables_paginate {
    float: right;
    padding: 8px;
    margin-top: .95rem;
    font-size: .8rem;
}

#tabsTickets .dataTables_paginate a,
#directorio .dataTables_paginate a,
#tablasGenerales .dataTables_paginate a,
#inventario .dataTables_paginate a {
    color: #f82b32;
    font-weight: 400;
    letter-spacing: 0px;
}

/* =========================
Tabla base (no tocar widths aquí)
========================= */
#tabsTickets table,
#directorio table,
#tablasGenerales table,
#listaTickets,
#tblNuevos,
#tblCrmBusqueda {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #e8e8e8;
}

#tabsTickets tr:hover,
#listaTickets tr:hover,
#directorio tr:hover,
#tablasGenerales tr:hover,
#tblNuevos tr:hover,
#inventario tr:hover {
    box-shadow: 1px 1px 4px #ccc;
    background: #fafafa;
    cursor: pointer;
}

#tabsTickets th,
#listaTickets th,
#listaTickets td,
#directorio table th,
#tablasGenerales table th,
#directorio table td,
#tblNuevos td,
#inventario td {
    vertical-align: middle;
}

#tabsTickets table th,
#listaTickets table th,
#directorio table th,
#tablasGenerales table th,
#tblNuevos th,
#inventario th,
#tblCrmNuevos th {
    padding: .75rem .5rem;
    background: #f9f9f9;
    text-align: left;
    white-space: nowrap;
    font-weight: 400
}

#calendario- {
    background: #f9f9f9;
}

#tabsTickets table td,
#listaTickets table td,
#tblCrmBusqueda td {
    padding: .25rem .5rem .25rem;
    font-size: .75rem !important;
    font-weight: 400
}

#inventario table td {
    font-size: .75rem !important;
    font-weight: 400
}

#tabsTickets table td,
#directorio table td,
#tablasGenerales table td,
#tblNuevos td,
#tblCrmBusqueda td,
#tblCrmBusqueda td {
    padding: .25rem .5rem .25rem;
}

#tabsTickets table th:first-child,
#listaTickets table th:first-child,
#tablasGenerales table th:first-child,
#directorio table th:first-child,
#directorio table td:first-child,
#tablasGenerales table td:first-child,
#inventario table td:first-child {
    border-left: none;
}

/* =========================
DataTables scrollX: tablas head/body
(solo layout fijo y box model; widths los pone DataTables)
========================= */
#tblFinalizados_wrapper .dataTables_scrollHead table,
#tblVencidos_wrapper .dataTables_scrollHead table,
#tblEnProceso_wrapper .dataTables_scrollHead table,
#tblNuevos_wrapper .dataTables_scrollHead table,
#tblUsuarios_wrapper .dataTables_scrollHead table,
#tblUsuarios_wrapper .dataTables_scrollBody table,
#inventario .dataTables_scrollBody table,
#inventario table {
    table-layout: fixed !important;
}

/* Evita que cosas internas estiren */
#tblFinalizados_wrapper th,
#tblVencidos_wrapper th,
#tblEnProceso_wrapper th,
#tblNuevos_wrapper th,
#tblUsuarios_wrapper th,
#tblFinalizados_wrapper td,
#tblVencidos_wrapper td,
#tblEnProceso_wrapper td,
#tblNuevos_wrapper td,
#tblUsuarios_wrapper td,
#tblInventario_wrapper td,
#tblCrmNuevos td,
#tblCrmNuevos th {
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* =========================
Ellipsis reutilizable (tu usas class="nombre")
========================= */
#tblFinalizados_wrapper td .nombre,
#tblVencidos_wrapper td .nombre,
#tblEnProceso_wrapper td .nombre,
#tblNuevos_wrapper td .nombre,
#tblProveedores_wrapper td .nombreProveedores,
#tblUsuarios_wrapper td .nombre,
#tblInventario_wrapper td .nombre,
#tblCrmNuevos td .nombre {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#inventario td .nombreMedio {
    display: block;
    width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#inventario td .nombrePequeno {
    display: block;
    width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#tblProveedores_wrapper td .nombreRazon,
#evaluaciones- td .nombre {
    display: block;
    width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#evaluaciones- td .nombreStack,
#inventario td .nombreStack {
    float: left;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 28px;
    line-height: 30px;
    padding-left: .5rem;
    height: 30px;
    float: left;
}


/* =========================
Columna tools (no debe estirar)
========================= */
#tblFinalizados_wrapper td:first-child,
#tblVencidos_wrapper td:first-child,
#tblEnProceso_wrapper td:first-child,
#tblNuevos_wrapper td:first-child,
#tblUsuarios_wrapper td:first-child,
#tblInventario td:first-child,
{
overflow: hidden;
white-space: nowrap;
}

#tblFinalizados_wrapper td:first-child .tools,
#tblVencidos_wrapper td:first-child .tools,
#tblEnProceso_wrapper td:first-child .tools,
#tblNuevos_wrapper td:first-child .tools,
#tblUsuarios_wrapper td:first-child .tools,
#tblInventario_wrapper td:first-child .tools {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

#tblInventario tbody tr.row-clickable:hover {
    background: #f7fbff
}

/* Botón: debe poder encogerse */
#tabsTickets .status-toggle,
#directorio .status-toggle,
#tablasGenerales .status-toggle {
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#tabsTickets .is-active,
#directorio .is-active,
#tablasGenerales .is-active,
.inv-en_uso {
    background: #f2f2f2;
    color: #757373;
    border: 1px solid #e9e8e8;
    text-transform: capitalize;
    width: 100%;
    padding: .25rem .25rem;
    font-weight: 500;
    font-size: .7rem;
    border-radius: 26px;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    width: 100%;
    text-align: center;
}

#tabsTickets .is-baja,
#directorio .is-baja,
#tablasGenerales .is-baja,
#inventario .inv-baja {
    background: #fff6f7;
    color: #ef2119;
    border: 1px solid #fedadc;
    padding: .25rem .5rem;
    text-transform: capitalize;
    width: 100%;
    font-weight: 500;
    font-size: .7rem;
    border-radius: 26px;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    width: 100%;
    text-align: center;
}

#evaluaciones- .is-baja {
    background: #f82b32;
    color: #ffffff;
    padding: 8px .5rem;
    text-transform: capitalize;
    width: 100%;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .59rem;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    width: 100%;
}

#evaluaciones- .is-active {
    background: #5fb47445;
    color: #1d2a20;
    text-transform: capitalize;
    width: 100%;
    padding: 8px .75rem;
    font-weight: 500;
    text-transform: uppercase;
    font-size: .59rem;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    width: 100%;
}

#tabsTickets .status-toggle,
#directorio .status-toggle:disabled,
#tablasGenerales .status-toggle:disabled {
    opacity: .6;
    cursor: wait;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(0, 0, 0, .15);
    border-top-color: #f82b32;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    display: inline-block;
}

#wrapSmallDash {
    display: block;
    -webkit-box-shadow: inset 4px -15px 20px -25px rgb(181 178 178);
    -moz-box-shadow: inset 4px -15px 20px -25px rgb(181 178 178);
    box-shadow: inset 4px -15px 20px -25px rgb(181 178 178);
    float: left;
    width: 100%;
    padding: 1.75rem 1rem .85rem;
    background: #f7f7f7;
    border-top: 1px solid #e8e8e8;
}

#wrapSmallExcel {
    display: block;
    -webkit-box-shadow: inset 4px -15px 20px -25px rgb(181 178 178);
    -moz-box-shadow: inset 4px -15px 20px -25px rgb(181 178 178);
    box-shadow: inset 4px -15px 20px -25px rgb(181 178 178);
    float: left;
    width: 100%;
    padding: 2rem 1.5rem 3rem;
    background: #f7f7f7;
    border-top: 1px solid #e8e8e8;
}

.graphics {
    float: left;
    gap: 16px;
    align-items: center;
    padding: 1rem;
    margin: 0 1rem 1rem 0;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    width: 33%;
    background: #fff;
}

#listaDeptos,
#listaDeptosFull,
#listaEmpresas {
    font-size: .7rem;
    float: left;
    width: 100%;
    padding: 1rem 0;
}

.listadoGraficos {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: .2rem 0;
    border-bottom: 1px solid #e8e8e8;
}

.graphCont {
    position: relative;
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 1rem;
}

#graphics b {
    font-weight: 400;
    text-transform: uppercase;
    display: block;
    margin-bottom: .25rem;
    color: #9b9b9b
}

#donutUsuarios,
#donutDeptos,
#donutEmpresas {
    width: 80px;
    height: 100px;
}

#totalUsuarios {
    font-weight: bold;
    margin-right: .25rem;
    float: left;
    color: #232323
}

#contenedorTools {
    float: left;
    width: 100%;
    padding: .55rem .55rem .55rem
}

.toolsExtra {
    float: right;
    margin-right: 1.25rem;
}

.title-with-icon .icon {
    width: 20px;
    float: left;
    margin-right: .45rem
}

.toolsExtra .icon-doc {
    width: 18px;
    height: 18px;
    color: #00000072;
    /* EL SECRETO */
    transform: scale(1.12);
    transform-origin: center;
}

.toolsExtra .icon {
    height: 34px;
    width: 34px;
    float: right;
    border: 1px solid #e3e0e3;
    padding: .45rem;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #8d8d8d;
    background: linear-gradient(to bottom, #ffffff 5%, #eaeaea 100%);
    transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .2s ease;
    margin-left: .55rem;
}

.toolsExtra .icon span {
    float: left;
    line-height: 18px;
    color: #333;
    font-size: .7rem;
}

.toolsExtra .icon svg {
    width: 17px;
    float: left;
    margin-right: .25rem;
}

.toolsExtra .iconText span,
.toolsExtra .iconText .legend {
    float: left !important;
    line-height: 19px !important;
    color: #858282 !important;
    font-size: .8rem !important;
}

.toolsExtra .iconText svg {
    width: 20px;
    float: left;
    margin-right: .25rem;
    padding: .15rem;
    color: #8d8d8d;
    stroke: #8d8d8d;
}

.toolsExtra .iconText:hover svg {
    color: #777;
    stroke: #777;
}

.toolsExtra .iconText {
    position: relative;
    height: 34px;
    float: right;
    border: 1px solid #e8e5e5;
    padding: 0.42rem .75rem;
    border-radius: 4px;
    color: #8d8d8d;
    background: #ffffff;
    transition: color .3s ease, border-color .3s ease, transform .2s ease;
    margin-left: .55rem;
    overflow: hidden;
}

.crmOwnerInline {
    height: 34px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: .5rem;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gradiente encima */
.toolsExtra .iconText::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #ffffff 5%, #eaeaea 100%);
    opacity: 1;
    transition: opacity .35s ease;
    z-index: 0;
}

/* Contenido arriba */
.toolsExtra .iconText * {
    position: relative;
    z-index: 1;
}

/* Hover */
.toolsExtra .iconText:hover::before {
    opacity: 0;
}

.toolsExtra .iconText:hover {
    box-shadow: 0px 2px 2px #f3f3f3;
    border: 1px solid #d4d4d4;
}

.toolsExtra .icon:hover {
    box-shadow: 0px 2px 2px #f3f3f3;
    border: 1px solid #d4d4d4;
    background: #fff;
}

.toolsExtra .iconText:hover span,
.toolsExtra .iconText:hover svg {
    color: #444
}

#abrirGrafico:hover {
    border: 1px solid #ffffff;
    color: #666;
    background: #eaeaea !important;
    padding: .37rem;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    cursor: pointer;
    background: linear-gradient(0deg, #f9f9f9 5%, #e9e9e9 100%);
}

.icono-activo {
    border: 1px solid #c9c9c9 !important;
    color: #333 !important;
    background: #eaeaea !important;
    padding: .37rem;
    border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    cursor: pointer;
    background: linear-gradient(0deg, #f9f9f9 5%, #e9e9e9 100%);
}

#abrirExcel:hover,
#abrirTicket:hover {
    border: 1px solid #dfdddd;
    color: #222;
    background: #eaeaea !important;
    padding: .37rem;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    cursor: pointer;
    background: linear-gradient(0deg, #ffffff 5%, #e9e9e9 100%);
}

#sweetNotice {
    text-align: left;
    font-size: .85rem;
    border: 1px solid #e8e8e8;
    width: 100%;
}

#sweetNotice th {
    border: 1px solid #e8e8e8;
    padding: .25rem;
    background: #fafafa
}

#sweetNotice td {
    border: 1px solid #e8e8e8;
    padding: .25rem;
}

#directorio .swal2-html-container {
    font-size: .85rem
}

#directorio .swal2-html-container h4 {
    text-align: left
}

/* =========================
Perfiles de empleados
========================= */
#perfilStatus {
    float: right;
    margin: 0 0 0 .55rem;
}

#ticketStatus {
    float: right;
    margin: 0 0 0 .55rem;
}

#perfilStatus button {
    padding: .3rem .75rem;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    float: left;
    height: 36px !important;
    background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
    transition: background-color 0.6s ease, color 0s ease;
    width: 100px;
}

#ticketStatus button {
    padding: .3rem .75rem;
    border: 1px solid #e8e8e8;
    border-radius: 29px;
    float: left;
    height: 30px !important;
    background: #807d7d;
    transition: background-color 0.6s ease, color 0s ease;
    cursor: auto;
    margin-top: 3px;
}

#perfilStatus button:hover {
    background: #393838
}

#perfilStatus button:hover em {
    color: #fff !important
}

#perfilStatus i,
#ticketStatus i {
    padding: .1rem 0rem;
    float: left;
    line-height: 32px;
    font-style: normal;
    background: #f9f9f9;
    height: 36px;
    margin: 0 .5rem;
    border-radius: 4px;
    border: 1px solid #f9f9f9;
    font-size: .75rem;
    color: #767676;
}

#perfilStatus em {
    color: #6a6a6a !important;
    font-style: normal;
    font-weight: 400;
    font-size: .8rem;
}

#ticketStatus em {
    color: #ffffff !important;
    font-style: normal;
    font-weight: 400;
    font-size: .8rem;
    line-height: 16px;
    text-transform: capitalize;
}

#directorio-empleados,
#directorio-proveedores,
#inventario-ver,
#crm-dashboard {
    background: #f9f9f9 !important
}

#empleados {
    border: none !important
}

#contenedorToolsTwo {
    float: left;
    width: 100%;
    padding: .55rem .55rem .55rem;
    background: #f9f9f9 !important;
}

#empleados #imageForm {
    text-align: center;
    margin: 0rem auto 1rem;
    width: 60px;
}

#empleados #imageForm img {
    width: 100%;
    padding: 2px;
    border: 1px solid #ccc;
    padding: 2px;
    border-radius: 100px;
    transition: border 0.25s ease;
}

#empleados #imageForm img:hover {
    border: 1px solid #ff3b30;
}

#gridFormTwoColumns {
    display: grid;
    grid-template-columns: 33.5% 65.5%;
    gap: 1rem;
    background: #f9f9f9;
    padding: 0 1rem 1rem;
}

#gridFormOneColumns {
    display: grid;
    grid-template-columns: 100%;
    gap: 1rem;
    background: #f9f9f9;
    padding: 0 1rem 1rem;
}

.gridCien {
    border-radius: 10px;
    padding: .75rem;
    box-shadow: 1px 2px 7px #dfdfdf;
    -moz-box-shadow: 1px 2px 7px #dfdfdf;
    -webkit-box-shadow: 1px 2px 7px #dfdfdf;
    float: left;
    width: 100%;
    padding: 1rem;
    margin: .55rem 0 1rem 0%;
    position: relative;
    background: #fff
}

.heightMin {
    min-height: 84vh;
    margin: 0 !important;
    background: #fff;
    border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    box-shadow: none !important
}

.check svg,
.checkImportant svg {
    color: #e5007c !important
}

#gridFormTwoColumns #firstColumn {
    background: #fff;
    border-radius: 10px;
    padding: .75rem;
    box-shadow: 1px 2px 7px #dfdfdf;
    -moz-box-shadow: 1px 2px 7px #dfdfdf;
    -webkit-box-shadow: 1px 2px 7px #dfdfdf;
}

#gridFormTwoColumns #secondColumn {
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 1px 2px 7px #dfdfdf;
    -moz-box-shadow: 1px 2px 7px #dfdfdf;
    -webkit-box-shadow: 1px 2px 7px #dfdfdf;
    position: relative
}

#gridFormTwoColumns #secondColumn {}

#empleados #firstColumn strong {
    float: left;
    width: 68%;
    text-align: left;
    font-size: .85rem;
    font-weight: 400;
    padding: .25rem 0 .25rem 1.25rem;
    text-transform: capitalize;
    font-style: normal
}

#emplados #firstColumn .wrapFirst {
    float: left;
    width: 100%;
    text-align: left;
    font-size: .85rem;
    font-weight: 400;
    padding: .25rem 0 .25rem 1.25rem;
    text-transform: capitalize;
    font-style: normal
}

#inventarios #firstColumn strong {
    float: left;
    width: 68%;
    text-align: left;
    font-size: .85rem;
    font-weight: 400;
    padding: .25rem 0 .25rem 1.25rem;
    text-transform: capitalize;
    font-style: normal
}

#empleados #firstColumn b {
    float: left;
    text-align: left;
    font-weight: 800;
    padding: 0rem .55em;
    text-transform: capitalize;
    text-transform: capitalize;
    background: #393838;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    margin-left: .55rem;
    line-height: 23px;
}

#empleados #firstColumn strong em {
    color: #9b9b9b;
    float: left;
    width: 100%;
    line-height: 1.3rem;
    font-style: normal;
    text-transform: lowercase;
    padding: .05rem 0;
}

#empleados #firstColumn .wrapFirst em {
    color: #9b9b9b;
    float: left;
    width: 100%;
    line-height: 1.3rem;
    font-style: normal;
    text-transform: lowercase;
}

#firstColumn .fnormal svg {
    float: left !important;
    margin: .25rem .25rem .25rem 0 !important;
}

#directorio-empleados #tickets,
#directorio-proveedores #tickets {
    margin-top: 1rem;
    float: left;
}


.verde {
    background: #61ba61;
    color: #fff;
}

.amarillo {
    background: #fdbe01;
    color: #fff;
}

.rojo {
    background: #f82b32;
    color: #fff;
}

.azul {
    background: #3393e6;
    color: #fff;
}

#directorio-empleados #tickets svg,
#directorio-proveedores #tickets svg {
    float: left;
    width: 20px;
    height: 20px;
}

#inventario-ver #firstColumn h3,
#empleados #firstColumn h3,
#directorio-empleados #firstColumn h3 {
    padding: .45rem .75rem .35rem;
    float: left;
    font-size: .7rem;
    width: 100%;
    text-align: left;
    margin-top: 1.25rem;
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    font-weight: 400;
    color: #393838;
    line-height: 18px;
    text-transform: uppercase;
}

#inventario-ver #firstColumn h5,
#crm-id #firstColumn h5 {
    padding: .45rem .75rem .35rem;
    float: left;
    font-size: .7rem;
    width: 100%;
    text-align: left;
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    font-weight: 400;
    color: #393838;
    line-height: 18px;
    text-transform: uppercase;
}

#empleados #firstColumn span {
    display: block;
    float: left;
    width: 100%;
    padding: 0rem .5rem 0 .25rem;
    text-align: center;
    padding: .25rem .25rem;
    font-size: .85rem;
    margin: 0px;
}

#comentariosTickets {
    margin-bottom: 1rem;
    float: left;
    width: 100%;
}

#directorio-empleados span,
.perfilesFifty {
    display: block;
    font-size: .85rem;
    float: left;
    width: 50%;
    text-align: left;
}

#directorio-empleados span {
    display: block;
    font-size: .85rem;
    float: left;
    text-align: left;
}

.perfilesHundred {
    display: block;
    font-size: .85rem;
    float: left;
    width: 100%;
    text-align: left;
}

#empleados #firstColumn span em {
    float: left;
    font-style: normal;
    color: #9c9c9c;
    padding: 0px .25rem 0 .75rem;
    line-height: 25px;
    font-weight: 400;
    min-width: 65%;
    text-align: left;
}

#crm-reportes {
    background: #f9f9f9 !important
}

#tablasGenerales .section {
    float: left;
    width: 98%;
    margin-left: 1.5%;
    border: 1px solid #d0e3fa;
    margin-bottom: 1rem;
}

#tablasGenerales h2 {
    font-size: 1rem;
    font-weight: 300;
    display: block;
    background: #f0f8ff;
    padding: .5rem .5rem;
    color: #000000;
    border-radius: 0px;
    letter-spacing: -.05px;
}

#tablasGenerales p,
#tablasGenerales h3 {
    font-size: .65rem;
    padding: .25rem .5rem;
    background: #fff5e7;
    font-weight: 400;
    letter-spacing: -.03px;
}

#tablasGenerales td,
#tablasGenerales th {
    border: 1px solid #d8e8fb
}

#tablasGenerales tbody tr td {
    background: #fff !important;
}

#tablasGenerales .total td {
    background: #f0f8ff !important;
    color: #5a5d60;
}

#tablasGenerales .total td b {
    font-weight: 800;
    color: #5a5d60;
}

.acento {
    background: #eee;
    font-size: .6rem;
    padding: .25rem .55rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 85px;
    float: left;
    text-align: center;
    font-weight: 600;
}

#empleados .editUsuario i,
#empleados .SineditUsuario i {
    color: #3f3f3f;
    font-style: normal;
    font-size: .8rem;
    padding: .25rem 0;
    display: block;
}

#empleados .fnormal {
    font-style: normal;
    color: #202020 !important;
    line-height: 20px
}

#empleados #secondColumn label {
    display: block;
    padding: 0 0 0 .25rem;
    color: #a6a6a6;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: .8rem;
    font-weight: 400;
    font-style: normal;
}

.plataformaCien {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0rem 0 2rem;
    position: relative;
}

#notaProveedorapertura .inp {
    float: left;
    width: 100%;
    padding: 1rem;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

.catTipBox ul {
    padding: 0 !important;
    min-width: 170px;
}

.catTipBox ul li {
    font-weight: 600;
    padding: .2rem 0 .2rem 0 !important;
    font-size: .7rem;
    text-transform: uppercase
}

#plataforma #roles {
    display: block;
    width: 100% !important;
    margin: .55rem 0 .55rem !important;
    padding: .55rem !important;
    background: #f5f5f5 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

#passwordPlataforma {
    display: block;
    width: 280px !important;
    margin: 0 0 .55rem !important;
    padding: .55rem !important;
    background: #f5f5f5 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    height: auto !important
}

#directorio-empleados #secondColumn span:first-of-type,
.pType {
    padding-right: 2rem;
    margin-bottom: 1rem;
}

#directorio-empleados #secondColumn span .editUsuario,
.perfilesFifty .editUsuario,
.perfilesFifty .SineditUsuario,
.perfilesHundred .SineditUsuario {
    color: #353535;
    margin-bottom: .55rem;
    display: block;
    height: 32px;
    line-height: 30px;
    border-bottom: 1px solid #e8e8e8;
}

#empleados .bajaUsuario {
    color: #fff;
    float: left;
    text-transform: uppercase;
    font-size: .6rem;
    text-align: center;
    border-radius: 4px;
}

#empleados .bajaUsuario em {
    display: block;
    padding: .15rem .75rem;
    font-weight: bold;
    font-style: normal;
    line-height: 0.9rem;
    height: 20px;
}

#secondColumn label b {
    float: left;
}

#btnGuardarAcceso {
    margin-top: 12px;
    background: #eaeaea;
    color: #515151;
    font-weight: bold;
    text-transform: uppercase;
    padding: .55rem 0;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    float: left;
    width: 100%;
}

#btnGuardarEmpleado {
    margin-bottom: 2.25rem;
    background: #eaeaea;
    color: #515151;
    font-weight: bold;
    text-transform: uppercase;
    padding: .55rem 0;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    float: left;
    width: 100%;
    margin-top: 0px !important;
}

#btnGuardarAcceso:hover,
#btnGuardarEmpleado:hover {
    background: #ea392f;
    color: #fff;
}

#empleados h2 {
    float: left;
    width: 100%;
    font-size: .9rem;
    text-transform: uppercase;
    font-weight: 400;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 1.35rem;
    color: #393838;
    line-height: 20px;
}

#empleados h3,
#gridFormOneColumns h3,
#crm-id #secondColumn h3 {
    float: left;
    width: 100%;
    font-size: .85rem;
    text-transform: uppercase;
    font-weight: 400;
    padding-bottom: .75rem;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: .5rem;
    color: #393838;
    line-height: 23px;
}

#plataforma {
    float: left;
    width: 100%;
    padding: .55rem 0;
}

#notaProveedorapertura {
    background: #fafafa;
    padding: 1rem;
    border: 1px solid #e8e8e8;
    background: #fafafa;
    border-radius: 4px;
    margin-bottom: 1rem;
    float: left;
    width: 100%;
    font-size: .8rem;
}

.switch-x-text {
    width: auto !important;
    padding-right: 5px !important;
}

.checkbox-wrapper-35 {
    float: left;
    width: 100%;
    height: 34px;
    position: relative
}

#empleados .checkbox-wrapper-35 .switch {
    display: none;
}

.icon-archivo {
    color: #33a0ff;
    margin-right: .25rem;
}

.attachment {
    background: aliceblue;
    padding: .35rem 1rem;
    float: left;
    color: #33a0ff;
    text-transform: uppercase;
    border: 1px solid #b6d9f9;
    margin-right: 1rem;
    border-radius: 8px;
    font-size: .7rem;
    line-height: 18px;
    -webkit-transition: background-color 0.125s ease-out;
    transition: background-color 0.125s ease-out;
}

#documentos small {
    line-height: 32px;
}

.attachment:hover {
    background: #33a0ff;
    color: #fff;
}

.attachment:hover .icon-archivo {
    color: #fff !important;
}

#empleados #secondColumn select {
    background: #fff;
    padding: .25rem 0;
    border: 1px solid #fff;
    width: 100%;
    margin-right: 2%;
    text-transform: capitalize;
}

#empleados #secondColumn input {
    height: 18px;
    border: none;
    width: 100%;
    background: #fff;
    padding: .25rem;
}

.direccionItem {
    float: left;
    width: 100%;
    padding: 0rem 0 .5rem 0;
}

#contactos .direccionItem {
    float: left;
    padding: .5rem 1rem;
    width: 48% !important;
    border: 1px solid #b6d9f9;
    border-radius: 4px;
    margin: .5rem 1rem .5rem 0;
    background: #f5fbff;
    position: relative;
}

.deleteContacto,
.restoreContacto {
    position: absolute;
    top: .4rem;
    right: .3rem
}

.iconDeleteBlue {
    color: #5ba7ec;
    width: 18px;
    height: 18px;
}

.iconDescarga {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

#empleados .SineditInline {
    border: none;
    width: 100%;
    background: #fff;
    padding: .25rem .35rem;
    text-transform: capitalize;
    color: #353535;
    font-size: .85rem;
    float: left;
    line-height: 18px;
}

#empleados .editInline {
    border: none;
    width: 100%;
    background: #fff;
    padding: .25rem .35rem;
    text-transform: capitalize;
    color: #353535;
    font-size: .85rem;
    float: left;
    line-height: 18px;
    cursor: pointer;
}

#documentos {
    float: left;
    width: 100%;
    padding: 0 0 .75rem 0;
    font-size: .95rem;
}

.inlineSelect {
    width: 100%;
}

#plataforma .inlineSelect {
    width: AUTO !important;
    FLOAT: LEFT;
    FONT-SIZE: .85rem;
    MARGIN: 0 !important;
}

.dirIcon {
    float: left;
    line-height: 22px;
    padding: .05rem .5rem 0 0;
    width: auto;
}

#plataforma .editInline {
    border: none !important;
    padding: .05rem 0 .05rem .0rem !important;
}

#direcciones .editInline,
#contactos .editInline {
    width: auto !important;
    background: none !important;
}

#direcciones input,
#contactos input {
    height: 19px !important;
    padding: .25rem 0 !important
}

.divright {
    float: left;
    line-height: 18px;
    padding: .05rem .25rem .05rem .0rem !important;
    font-size: 0.85rem;
}

.divleft {
    float: left;
    line-height: 18px;
    padding: .05rem .25rem .05rem .25rem !important;
    font-size: 0.85rem;
}

.divmiddle {
    float: left;
    line-height: 18px;
    padding: .05rem .25rem .05rem .25rem !important;
    font-size: 0.85rem;
}

#empleados #email {
    text-transform: lowercase !important
}

#empleados #secondColumn input:focus {
    background: #ebf4ff;
}

#empleados .checkbox-wrapper-35 .switch+label {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #78768d;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    line-height: 15px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#empleados .checkbox-wrapper-35 .switch+label::before,
#empleados .checkbox-wrapper-35 .switch+label::after {
    content: '';
    float: left;
    background: #fff
}

#empleados .checkbox-wrapper-35 .switch+label::before {
    background-color: #05012c;
    border-radius: 500px;
    height: 15px;
    margin-right: 8px;
    -webkit-transition: background-color 0.125s ease-out;
    transition: background-color 0.125s ease-out;
    width: 25px;
}

#empleados .checkbox-wrapper-35 .switch+label::after {
    border-radius: 13px;
    box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
    height: 13px;
    left: 5px;
    position: absolute;
    top: 1px;
    -webkit-transition: -webkit-transform 0.125s ease-out;
    transition: -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out;
    transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
    width: 13px;
}

#empleados .checkbox-wrapper-35 .switch+label .switch-x-text {
    display: block;
}

#directorio-empleados .checkbox-wrapper-35 .switch+label .switch-x-toggletext {
    display: block;
    font-weight: bold;
    height: 15px;
    overflow: hidden;
    position: relative;
    width: 100px;
}

#empleados .checkbox-wrapper-35 .switch+label .switch-x-unchecked,
#empleados .checkbox-wrapper-35 .switch+label .switch-x-checked {
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
}

#empleados.checkbox-wrapper-35 .switch+label .switch-x-unchecked {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

#empleados .checkbox-wrapper-35 .switch+label .switch-x-checked {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

#empleados .checkbox-wrapper-35 .switch+label .switch-x-hiddenlabel {
    position: absolute;
    visibility: hidden;
}

#empleados .checkbox-wrapper-35 .switch:checked+label::before {
    background-color: #ff3b30;
}

#empleados .checkbox-wrapper-35 .switch:checked+label::after {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
}

#empleados .checkbox-wrapper-35 .switch:checked+label .switch-x-unchecked {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

#empleados .checkbox-wrapper-35 .switch:checked+label .switch-x-checked {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}



/* SweetAlert2 FIX: evita palomita deformada por box-sizing global */

.swal2-icon,
.swal2-icon * {
    box-sizing: content-box !important;
}

/* Opcional: deja el toast más consistente */
.swal2-popup.swal2-toast {
    box-sizing: border-box !important;
}

.emailMinify {
    text-transform: lowercase !important
}

.statusbaja {
    background: #393838;
}

#perfilStatus .statusbaja em {
    color: #fff;
}

.remodal img {
    width: 100%;
}

.tagify--empty .tagify__input::before {
    transition: .2s ease-out;
    opacity: 1;
    transform: none;
    display: inline-block;
    width: auto;
    color: #a1a1a1;
}

#notaProveedorapertura,
#notaProveedorapertura textarea {
    width: 100%;
    box-sizing: border-box;
}

#emailForm textarea {
    float: left;
    width: 100%;
    font-size: .85rem;
    padding: 1rem;
    margin-top: .5rem;
}

#emailForm .para {
    font-size: .85rem;
}

.inp.is-bad {
    border-color: #ff3c0e;
    background: #ffd8d8;
}

.is-bad {
    color: #a92121;
}

.inp.is-ok {
    border-color: #62eb8f;
    background: #eefaee;
}

.is-ok {
    color: #56a956;
}

.bgreen {
    border: 1px solid #62eb8f !important;
}

#emailsSecundariosList .bgreen {
    border: 1px solid #dcdcdc !important;
}

.bred {
    border: 1px solid #e3c1c1 !important;
}

.msg-inline {
    font-size: .78rem;
    color: #ff3c0e;
}

.titFontCont {
    font-size: .8rem;
    margin-bottom: 0.25rem;
    font-weight: 600 !important;
}


/* EXCEL */
#herramientaExcel {
    max-width: 100%;
}

#herramientaExcel h2 {
    font-size: 1.25rem;
    margin: 0 0 1rem .5rem;
    font-weight: 300;
    padding: 0 .25rem .75rem;
}

#herramientaExcel h3 {
    font-size: .85rem;
    margin-bottom: 15px;
    font-weight: 600;
}

#gridTwo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Card */
#gridTwo>div {
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
}

/* Listado */
#gridTwo ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#gridTwo li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    background: #fafafa;
}

#gridTwo li strong {
    font-weight: 400;
    line-height: 1.2rem;
    font-size: .75rem;
}


.btnLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: .5rem 1rem;
    background: #ffffff;
    color: #4380b8;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.2s ease;
    border: .1rem solid #5ba7ec;
    font-weight: 400;
}

.btnLink:hover {
    background: #4380b8;
    color: #fff;
}


/* Responsive */
@media (max-width: 768px) {
    #gridTwo {
        grid-template-columns: 1fr;
    }

    #gridTwo li {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .btnLink {
        width: 100%;
        text-align: center;
    }
}

/* Tickets  */
#wrapUsuarioAssign,
#wrapGrupoAssign,
#asignarTicket {
    float: left;
    width: 100%;
}

#wrapGrupoMiembros {
    margin: 1rem 0;
    background: #fff5e4;
    border: 1px solid #ffe4b9;
    padding: .5rem 1rem;
    float: left;
    width: 100%;
    border-radius: 4px;
}

#wrapGrupoMiembros strong {
    font-weight: 500;
    margin: .5rem 0 0;
    float: left;
    width: 100%;
    color: #b4935e;
}

#wrapGrupoMiembros ul {
    float: left;
    width: 100%;
    margin: .5rem 0
}

#wrapGrupoMiembros li {
    font-weight: 400;
    font-size: .8rem;
    padding: .2rem 0;
    float: left;
    width: 100%;
    color: #767370;
}

#wrapGrupoMiembros svg {
    float: left;
    margin-right: .35rem
}

.kbWrap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    padding: 1rem;
    overflow: hidden;
    max-width: 100%;
}

.kbWrap::-webkit-scrollbar {
    display: none;
}

.kbWrap {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.kbCol {
    flex: 0 0 calc(25% - (12px * 3 / 4));
    background: #fbfbfb;
    border: 1px solid #eee;
    border-radius: 4px;
}

.kbHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    border-bottom: 1px solid #eee;
}

.kbTitle {
    font-weight: 400;
}

.kbTitle img {
    height: 16px;
    float: left;
    margin-right: .25rem;
}

.kbCount {
    background: #393838;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    min-width: 29px;
    min-height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .5rem;
    line-height: 1;
    letter-spacing: -.5px;
}

.kbBody {
    padding: 10px 10px 0;
    min-height: 160px;
    min-height: calc(100vh - 240px);
    background: #fbfbfb !important
}

.tkCard.dragging {
    opacity: .6
}

.kbEmpty {
    opacity: .5;
    font-size: 12px;
}

.kbNoDrop {
    opacity: .65
}

.tkHint {
    float: left;
    width: 100%;
    line-height: 20px;
    margin: 0.25rem 0;
}

.tkHint svg {
    width: 18px;
    float: left;
    margin-right: 5px;
}

.tkActions .act {
    width: 65.5%;
    padding: .55rem 0;
    border-radius: 4px;
    margin-right: .5%;
    background: #f6f6f6;
    border: 1px solid #e8e8e8;
    transition: background-color .15s ease, color .15s ease;
}

.tkActions .act:hover {
    background: #efeeee
}

.tkActions .btnDetalle {
    float: left;
    width: 31%;
    border-radius: 4px;
    border: 1px solid #6bbaff;
    color: #33a0ff;
    font-weight: 400;
    transition: background-color .15s ease, color .15s ease;
}

.tkActions .btnDetalle:hover {
    background: #33a0ff;
    color: #fff;
}

.tkCard {
    border: 1px solid #e9e9e9;
    border-radius: 6px;
    padding: 0 .5rem .5rem;
    margin-bottom: 10px;
    background: #fff;
    cursor: grab;
}

.tkTop {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: .5rem;
    margin-bottom: 6px;
    width: 100%;
    border-bottom: 1px solid #f5f4f4;
    padding-bottom: .55rem;
    margin-bottom: 0px !important;
}

/* 1. La columna de 30px (Icono/Badge) */
.tkBadges,
.tkBadgeUser {
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    align-items: center;
    background: #fafafa;
    border-radius: 50%;
    height: 27px;
    width: 28px;
    border: 1px solid #393838;
}

.tkBadgeGroup svg {
    width: 16px;
    margin: .5rem 0;
    display: block;
}

.tkBadgeUser svg {
    width: 16px;
    margin: .5rem 0;
    display: block;
    color: #000
}

.tkEstado {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    height: 29px;
    line-height: 24px;
    gap: 4px;
    padding: .25rem .25rem;
    border-bottom: 1px solid #f5f4f4;
}

.tkEstado svg {
    flex-shrink: 0;
    width: 17px;
}

.tkFolio {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: .65rem;
    line-height: 32px;
    height: 30px;
}

.tkPrio {
    flex: 0 0 auto;
    text-align: right;
}

.tkTop .estatus_media {
    opacity: .8;
    background: #ffca00;
    padding: .25rem .55rem;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: .65rem;
    font-weight: 700;
    border: 1px solid #edc137;
    color: #473707;
}

.tkTop .estatus_critica {
    opacity: .8;
    background: #ff0202;
    padding: .25rem .55rem;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: .65rem;
    font-weight: 700;
    border: 1px solid #ec0000;
    color: #fff;
}

.tkTop .estatus_alta {
    opacity: .8;
    background: #fcf7f6;
    padding: .25rem .55rem;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: .65rem;
    font-weight: 700;
    border: 1px solid #f4392f;
    color: #e7180c;
}

.tkTop .estatus_baja {
    opacity: .8;
    background: #0a7beb;
    padding: .25rem .55rem;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: .65rem;
    font-weight: 700;
    border: 1px solid #4481ba;
    color: #ffffff;
}

.tkBadges {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tkBadge {
    font-size: 12px;
    opacity: .85
}

.tkBadge.tkWarn {
    filter: saturate(1.2)
}

.tkPrio {
    font-size: 12px;
    opacity: .8
}

#crm-todos .tkPrio,
#crm- .tkPrio {
    font-size: .6rem;
    opacity: .8;
    line-height: 18px;
    padding: .12rem .5rem 0;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid #e3e0e3;
    border-radius: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 2px;
    color: #8d8d8d;
    background: linear-gradient(to bottom, #ffffff 5%, #eaeaea 100%);
    transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .2s ease;
    cursor: pointer;
}

#crm-todos .tkPrio:hover,
#crm- .tkPrio:hover {
    box-shadow: 0px 2px 2px #f3f3f3;
    background: #fff;
    border: 1px solid #d4d4d4;
}

.tkTitle {
    font-weight: 400;
    margin-bottom: 6px;
    padding: .5rem .15rem .5rem;
    border-bottom: 1px dashed #e8e8e8;
}

.tkMeta {
    font-size: 12px;
    opacity: .9;
    min-width: 0;
    width: 100%;
}

.tkMeta b {
    font-weight: 700
}

.tkActions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.btnMini {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    height: 34px;
}

.btnMini.ok {
    border-color: #cfe8d6
}

.tkDone {
    font-size: 12px;
    opacity: .7
}

.tkAvs {
    display: inline-block;
    margin-left: 8px;
}

.kbBody.drop-hover {
    outline: 2px dashed #bbb;
    border-radius: 8px;
}

.ticket-status {
    transition: background-color .15s ease, color .15s ease;
    padding: 8px .5rem;
    width: 100%;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .64rem;
    border-radius: 4px;
    border: 0;
    cursor: pointer;
    font-size: .64rem !important;
}

.ticket-status:hover {
    filter: brightness(0.95);
}

.status-nuevo {
    background: #eef2ff;
    color: #3730a3;
}

.status-asignado {
    background: #e0f2fe;
    color: #0369a1;
}

.status-en_proceso {
    background: #fff7ed;
    color: #9a3412;
}

.status-en_espera {
    background: #fef3c7;
    color: #92400e;
}

.status-en_reparacion {
    background: #ede9fe;
    color: #5b21b6;
}

.status-resuelto {
    background: #dcfce7;
    color: #166534;
}

.status-cerrado {
    background: #e5e7eb;
    color: #374151;
}

.status-cancelado {
    background: #fee2e2;
    color: #991b1b;
}

/* datatables: que no rompa tu estética */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid rgba(0, 0, 0, .12);
    padding: 8px 10px;
    border-radius: 6px;
    min-width: 320px;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right;
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_length {
    float: left;
    margin-bottom: 10px;
}

.tkMeta div {
    width: 100%;
    min-width: 0;
    padding: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stepNav {
    float: left;
    width: 100%;
    margin: 1rem 0
}

.stepsBar {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: center;
}

.estalta {
    background: #fff6f7;
    color: #f35c58;
    text-transform: capitalize;
    width: 100%;
    padding: .25rem .75rem;
    font-weight: 500;
    font-size: .7rem;
    border-radius: 26px;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    width: 100%;
    text-align: center;
    border: 1px solid #f8dadc;
}

.estbaja {
    background: #16cf7345;
    color: #1d2a20;
    text-transform: capitalize;
    width: 100%;
    padding: 8px .75rem;
    font-weight: 500;
    text-transform: uppercase;
    font-size: .62rem;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    width: 100%;
    text-align: center;
}

.estmedia,
#inventario .inv-en_bodega {
    background: #fdf9f2;
    color: #c08925;
    text-transform: capitalize;
    width: 100%;
    padding: .25rem .75rem;
    font-weight: 500;
    font-size: .7rem;
    border-radius: 26px;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    width: 100%;
    text-align: center;
    border: 1px solid #fad48f;
}

.estcritica {
    background: #f72d34;
    color: #ffffff;
    text-transform: capitalize;
    width: 100%;
    padding: .25rem .75rem;
    font-weight: 600;
    font-size: .7rem;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 26px;
    width: 100%;
    text-align: center;
}

.stepsBar span {
    flex: 1 1 0;
    text-align: center;
    padding: .75rem 0;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .5;
    background: #fff;
    cursor: pointer;
}

#stepsBar .is-step-active {
    opacity: 1 !important;
    box-shadow: 2px 2px 2px #eee !important;
    background: #f0f8ff !important;
    border: 1px solid #99c5f7 !important;
}

#stepsBar .done {
    opacity: 1 !important;
    box-shadow: 2px 2px 2px #eee !important;
    background: #f0fffb !important;
    border: 1px solid #a5d3c1 !important;
}

.stepNav #btnSubmit {
    background: #f82b32;
    border: 1px solid #f82b32;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    +width: 61.8%;
}

.stepNav #btnSubmit:hover {
    background: #f94408 !important
}

.stepBadge.done {
    opacity: .9;
    border: 1px solid green
}

.is-step-pending {
    border: 1px solid #eee;
}

.stepTitle {
    margin: 0 0 10px 0;
    font-weight: 700;
}

.stepHelp {
    font-size: 13px;
    opacity: .7;
    margin-top: -4px;
}

.stepSummary {
    margin-top: 1rem;
    float: left;
    width: 100%;
    font-size: .8rem;
    padding: 1rem;
    background: #fff5e4;
    border: 1px solid #ffe7c0;
    border-radius: 10px;
}

.stepSummaryRow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.stepSummaryRow span {
    font-weight: 300;
    color: #bc9452
}

.stepSummaryRow b {
    min-width: 220px;
}

.stepNav .btnMini {
    min-width: 37.7%;
    line-height: 30px;
    height: 38px;
    color: #ffffff;
    border: 1px solid #a4bce7;
    border-radius: 4px;
    font-weight: 500;
}

.stepNav #btnPrev {
    background: #33a0ff14;
    color: #304c81;
    transition: background-color 0.3s ease, color 0.3s ease
}

.stepNav #btnPrev:hover {
    background: #33a0ff;
    color: #ffffff;
}

.stepNav #btnNext {
    background: #33a0ff;
    color: #ffffff;
    width: 61.8%;
}

.etaTime {
    display: block;
    padding: .5rem .15em !important;
}

.etaTime b {
    background: #fff5e4;
    display: block;
    padding: .25rem .4rem;
    border: 1px solid #ffeac9;
    color: #886226;
    font-weight: 400;
    border-radius: 4px;
    margin-bottom: .25rem;
}

.etaTime .tkEtaVal {
    display: block;
    padding: .25rem;
}

.formWrap {
    max-width: 980px;
    margin: 0 auto;
}

.opt {
    font-size: 12px;
    opacity: .6;
    margin-left: 6px;
}

.sumEmpty {
    opacity: .5;
    font-style: italic;
}

#tickets-detalle,
#grupo-detalle {
    float: left;
    background: #fcfcfc;
    padding: .75rem;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    margin-top: 1rem;
    width: 100%;
}

#tickets-detalle-yellow {
    float: left;
    background: #fff5e4;
    padding: .75rem;
    border-radius: 8px;
    border: 1px solid #ffdfaa;
    margin-top: 1rem;
    width: 100%;
}

.msgTicket {
    opacity: .75;
    color: #a82317;
    padding: .55rem .25rem;
    float: left;
    width: 100%;
}

#empleados #firstColumn h4 {
    padding: 1.25rem .75rem .55rem;
    float: left;
    font-size: .75rem;
    width: 100%;
    text-align: left;
    margin-top: 1.25rem;
    border-top: 1px solid #e8e8e8;
    font-weight: 400;
    color: #393838;
    line-height: 18px;
    text-transform: uppercase;
}

#tickets-detalle span,
#grupo-detalle span {
    float: left;
    width: 100%;
    padding: .15rem .25rem !important;
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid #fff;
}

#tickets-detalle em {
    width: 100%;
    font-weight: 400 !important;
    color: #393838 !important;
    padding: .5rem 0 !important;
    line-height: 1rem !important;
}

#grupo-detalle em {
    width: 100%;
    font-weight: 400 !important;
    color: #393838 !important;
    padding: .5rem 0 !important;
    line-height: inherit !important;
}

#grupo-detalle p {
    float: left;
    width: 100%;
    font-weight: 400 !important;
    text-align: left;
    padding: 0 !important;
    text-transform: inherit !important;
    font-size: .8rem;
    color: #9e9e9e !important;
    line-height: 1.2rem;
}

#tickets-detalle p {
    float: left;
    width: 100%;
    font-weight: 400 !important;
    text-align: left;
    padding: 0 !important;
    text-transform: inherit !important;
    font-size: .8rem;
    color: #9e9e9e !important;
    line-height: 1.2rem;
    margin-bottom: .35rem;
}

#directorio-empleados #secondColumn .kpiWrap,
#tickets-view #secondColumn .kpiWrap,
#gridFormOneColumns .kpiWrap {
    float: left;
    width: 100%
}

#directorio-empleados #secondColumn .kpiWrap .table,
#tickets-view #secondColumn .kpiWrap .table,
#gridFormOneColumns .table {
    border: 1px solid #f0f8ff;
    margin-bottom: 1.25rem;
    overflow: auto
}

#directorio-empleados #secondColumn .kpiWrap th,
#tickets-view #secondColumn .kpiWrap th,
#gridFormOneColumns th {
    text-align: left;
    font-size: .7rem;
    background: aliceblue;
    border: 1px solid #fff;
    color: #3b3b3b;
    font-weight: 500;
    padding: .5rem;
}

#directorio-empleados #secondColumn .kpiWrap td,
#tickets-view #secondColumn .kpiWrap td,
#gridFormOneColumns td {
    font-weight: 400;
    border-bottom: 1px solid #f0f8ff;
    border-right: 1px solid #f0f8ff;
    padding: .5rem;
}

#directorio-empleados #secondColumn .kpiWrap tr,
#tickets-view #secondColumn .kpiWrap tr,
#gridFormOneColumns tr {}

#tickets-view #empleados #firstColumn strong em,
#evaluaciones-ver #empleados #firstColumn strong em {
    text-transform: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.titBckBlack {
    background: #e8e7e7;
    color: #393838;
    padding: .4rem .5rem !important;
    font-size: .8rem !important;
    text-transform: uppercase !important;
    width: 100% !important;
    border-radius: 4px;
    margin-bottom: .5rem;
    font-weight: 400 !important;
}

.titBckBlue {
    background: #7db9f0;
    color: #ffffff;
    padding: .35rem .5rem !important;
    font-size: .8rem !important;
    text-transform: uppercase !important;
    width: 100% !important;
    border-radius: 4px;
    margin-bottom: .5rem;
    font-weight: 400 !important;
}

.toolBar {
    line-height: 35px !important;
}

.icon-toolbar {
    width: 17px;
    margin: .5rem;
    float: left;
}

.adjuntados {
    display: flex;
    width: 100%;
    margin: .0rem 0 .25rem;
    border-bottom: 1px solid #f4f6f7;
    position: relative;
    align-items: revert-layer;
    gap: 8px;
}

.modalAdjuntos {
    float: left;
    width: 4%;
    margin-left: .5rem;
}

.modalAdjuntos svg,
.modalAdjuntos img {
    width: 100%;
    margin: .5rem 0;
}

.modalTexto {
    float: left;
    width: 91% !important;
    margin-left: 1%;
    padding: .5rem 0 !important;
    color: #565656 !important;
    text-transform: inherit !important;
    font-size: .85rem !important;
}

#tickets-id #formComentario,
#inventario-ver #formComentario,
#crm-id #formComentario {
    float: left;
    width: 100%;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

#comentariosLista {
    float: left;
    width: 100%;
    border-top: 1px solid #f7f8f9;
}

#inventario-ver #formComentario fieldset,
#tickets-id #formComentario fieldset,
#crm-id #formComentario fieldset {
    position: relative
}

#formComentario h5 {
    font-size: .85rem;
    text-transform: uppercase;
    padding: .5rem;
    background: #f2f2f2;
    border: 1px solid #ededed;
    border-bottom: none;
}

#commentFieldset {
    background: #ffe3b1;
    border: 1px solid #ffd58b;
}

#commentFieldset label {
    float: left;
    width: 230px !important;
    line-height: 33px !important;
    color: #484848 !important;
    padding: 0 0 0 .5rem !important;
    font-size: .85rem !important;
    height: 30px !important;
}

#commentFieldset select {
    float: left;
    max-width: 57% !important;
    background: no-repeat !important;
    border: none !important;
    height: 32px !important;
    font-size: .85rem !important;
    color: #383736 !important;
    line-height: 30px !important;
    padding: 0px !important;
}

#textareaTickets {
    width: 100%;
    background: #fff5e4;
    border: 1px solid #ffdfaa;
    min-height: 150px;
    float: left;
    padding-bottom: 50px;
    border-top: none;
}

#formComentario textarea {
    width: 100%;
    background: #fff5e4;
    min-height: 100px;
    padding: 1rem .5rem;
    font-size: .85rem;
    float: left;
    border: none;
    overflow-y: hidden;
    resize: vertical;
    /* opcional */
}

#formComentario .custom-file-input {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 0px;
    background-color: #fff5e4;
    padding: 6px 0 6px .35rem;
    cursor: pointer;
    transition: background 0.3s ease;
    border: 1px solid #ffe7c0;
    border-top: none;
}

#formComentario .custom-file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #b18335;
    font-size: .85rem;
    cursor: pointer;
}

#formComentario .custom-file-label svg {
    width: 24px;
    height: 24px;
    stroke: #b78f4c;
}

#formComentario .act {
    position: absolute;
    right: .75rem;
    background: #f2f2f2;
    color: #fff;
    padding: .4rem 1.7rem;
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 600;
    bottom: .75rem;
    border-radius: 4px;
    border: 1px solid #ffffff;
    box-shadow: 0px 1px 2px #acacac;
    color: #000;
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 19px;
}

#formComentario .act:hover {
    position: absolute;
    right: .75rem;
    background: #ea382e !important;
    color: #fff !important;
    padding: .4rem 1.7rem;
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 600;
    bottom: .75rem;
    border-radius: 4px;
    border: 1px solid #ffe4b9;
    box-shadow: 0px 1px 3px #f8af99;
}

#growTextarea:focus~#btnComentar {
    background: #666;
    color: #fff
}

.comentarioMeta {
    color: #c6c6c6;
    font-size: .6rem;
    font-weight: 600;
    margin-top: .5rem;
    float: left;
    width: 100%;
}

.fadeInSoft {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease;
}

.fadeInSoft.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#comentariosLista .modalAdjuntos img {
    max-width: 56px;
    max-height: 56px;
    object-fit: cover;
    display: block;
}

.fadeOutMsg {
    opacity: 0;
    transition: opacity .5s ease;
}

.msgOk {
    margin-left: 8px;
    float: left;
    width: 100%;
    padding: .75rem .25rem;
    background: #f0fef0;
    margin-top: 1rem;
    text-align: center;
    border: 1px solid #b0dfb0;
    border-radius: 5px;
    color: #3b7c3b;
    font-size: .85rem;
}

.msgErr {
    margin-left: 8px;
    float: left;
    width: 100%;
    padding: .75rem .25rem;
    background: #fff0f0;
    margin-top: 1rem;
    text-align: center;
    border: 1px solid #f2b3b3;
    border-radius: 5px;
    color: #b23b3b;
    font-size: .85rem;
}

.msgHidden {
    display: none;
}

.fileIcon {
    width: 32px;
    height: 32px;
    display: block;
}

#adjuntosInput {
    height: 38px !important;
    cursor: pointer
}

.borrarTicketComentario,
.borrarInventarioComentario,
.borrarCrmAdjunto {
    position: absolute;
    right: 0px;
    top: .5rem;
}

.borrarTicketComentario svg,
.borrarInventarioComentario svg,
.borrarCrmAdjunto svg {
    width: 18px;
}

#tblUsuarios .nombreDirectorio {
    width: 175px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#tblUsuarios td:nth-child(6) {
    max-width: 120px !important;
    width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#tblProveedores td:nth-child(2),
#tblProveedores th:nth-child(2),
#tblCrmNuevos_wrapper th:nth-child(3),
#tblCrmNuevos_wrapper th:nth-child(6) {
    max-width: 220px;
    width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tblVencidos td:nth-child(6) {
    max-width: 70px;
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tblProveedores td:nth-child(3),
#tblProveedores th:nth-child(3),
#tblProveedores th:nth-child(3) {
    max-width: 100px;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#formTicketsQuick label,
#formTicketsQuick select {
    width: 100%
}

#wrapSolicitanteOtro #solicitante_autocomplete {
    margin-top: 1rem
}

#formTicketsQuick select {
    width: 100%
}

.formMenciones h3 {
    border-bottom: 1px solid #e8e8e8;
    font-size: .85rem;
    text-transform: uppercase;
    font-weight: 400;
    margin: 1.25rem 0 .75rem;
    padding: .0rem 0 .55rem;
}

.stepHelp {
    margin-bottom: .75rem
}

.step {
    float: left;
    width: 100%;
}

#tblProveedores td:nth-child(4),
#tblProveedores th:nth-child(4) {
    max-width: 220px;
    width: 220px;
}

.principal .correoItemBody {
    border: 1px dashed #69c0ef;
    background: #e8f2f9;
    padding: 1rem;
    border-radius: 4px;
    float: left;
    width: 100%;
}

#emailsSecundariosList .inp {
    width: 420px;
    border-radius: 4px;
    margin-right: 10px;
}

.js-set-primary {
    float: right;
    width: 257px;
    height: 38px;
    font-size: .8rem;
    background: #70c0ed;
    color: #fff;
    font-weight: 500;
    border: 1px solid #50ade2;
    border-radius: 4px;
    letter-spacing: -.2px;
}

.correoItemBody {
    border: 1px solid #ebeaea;
    background: #f1f0f0;
    padding: 1rem;
    border-radius: 4px;
    float: left;
    width: 100%;
    margin: 1rem 0 0 0;
}

#btnCancelarCategoriasSubcategorias,
#btnCancelarInventario,
#btnCancelarAgregarCorreo {
    width: 30%;
    height: auto;
    padding: .75rem 0;
    border-radius: 6px;
    background: #e4e4e4;
    color: #393838;
    font-weight: 500;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}

#btnCancelarCategoriasSubcategorias:hover {
    border: 1px solid #000;
    background: #333;
    cursor: pointer;
    color: #fff;
}

#btnGuardarCategoriasSubcategorias,
#submitFormInventario,
#submitFormAgregarCorreo {
    font-size: .9rem;
    padding: .75rem 0;
    border: 1px solid #F44336;
    border-radius: 6px;
    background: #F44336;
    cursor: pointer;
    width: 68.5%;
    height: auto;
    color: #ffffff;
    font-weight: 600;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
    cursor: pointer;
}

#btnGuardarCategoriasSubcategorias:hover {
    background: #ee171e;
    color: #fff;
}

#btnAddSubcategoriaRow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px dashed #bfc5cc;
    background: #f8f9fb;
    color: #333;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease
}

#btnAddSubcategoriaRow svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

#btnAddSubcategoriaRow:hover {
    background: #fff5e461;
    border-color: #eec37c;
    color: #d18e23
}

#btnAddSubcategoriaRow:active {
    transform: scale(.97)
}

.ticketCatalogPanel {
    width: 100%;
    float: left;
    color: #1f2937
}

.ticketCatalogPanel .tcp-title {
    margin: 0 0 14px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .2px
}

.ticketCatalogPanel .tcp-card {
    border-radius: 4px;
    padding: 12px 0;
    margin-bottom: 12px;
    width: 100%;
    float: left;
    border-bottom: 1px solid #eee
}

.ticketCatalogPanel .tcp-card legend {
    font-size: 13px;
    color: #475569;
    float: left;
    width: 100%;
    padding: 0 0 .5rem;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: .5rem
}

.ticketCatalogPanel .tcp-label,
#wrapUsuarioAssign .tcp-label,
#inventario- .tcp-label {
    margin: 0 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #64748b;
    display: block;
    width: 100%;
    font-weight: 600;
    line-height: 34px;
    padding-left: .25rem;
}

.ticketCatalogPanel .tcp-rows {
    width: 100%;
    float: left
}

.ticketCatalogPanel .tcp-subcat-row {
    width: 100%;
    float: left;
    border: 1px solid #ffdfaa;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 10px;
    background: #fff5e4
}

.ticketCatalogPanel .tcp-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.ticketCatalogPanel .tcp-section-title {
    margin: 1.5rem 0 0rem;
    width: 100%;
    float: left;
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: .75rem;
}

.ticketCatalogPanel .tcp-parent-chip {
    margin-left: 8px;
    font-size: .65rem;
    color: #fff;
    background: #393838;
    border-radius: 999px;
    padding: 2px 8px;
    display: inline-block;
    line-height: 1.7;
    font-weight: 700;
    text-transform: uppercase;
}

.btnDeleteCategoriaTicket {
    padding: 0px;
}

#catalogoTicketsWrap ul {
    width: 100%;
    float: left;
}

#catalogoTicketsWrap ul li {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 24px;
    align-items: start;
    gap: 8px 12px;
    margin: 4px 0;
    border-bottom: 1px solid #eee;
    padding: .2rem 0 .4rem;
}

#catalogoTicketsWrap ul li>span {
    display: contents;
}

#catalogoTicketsWrap ul li small {
    font-size: .75rem;
    word-break: break-word;
    line-height: 24px;
}

#catalogoTicketsWrap .btnDeleteSubcategoriaTicket {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 14px;
}

.liCatTickets {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: .5rem;
    padding-bottom: .75rem;
    font-size: .85rem;
}

.ticketHeader strong {
    padding: .5rem 0rem !important;
    color: #b18336 !important;
}

.ticketHeader {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
}

.funnel {
    float: left;
    width: 100%;
    background: url(../graphics/svg/funnel.svg) 18px 31px #fff no-repeat;
    border-radius: 4px;
    padding: 1rem 1rem .75rem;
    position: relative;
}

#flowBoxes span.left:before {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    left: -3px;
    top: -1px;
    background-color: white;
    z-index: 50;
    -webkit-transform: translate(-10px, 4px) rotate(45deg);
    -moz-transform: translate(-10px, 4px) rotate(45deg);
    -ms-transform: translate(-10px, 4px) rotate(45deg);
    -o-transform: translate(-10px, 4px) rotate(20deg);
    transform: translate(-10px, 4px) rotate(45deg);
}

.stepFunnel {
    width: 20%;
    float: left
}

.stepFunnelClients {
    width: 18.2%;
    float: left;
}

.stepFunnelClients h1 {
    text-align: center;
    margin: 0px !important;
    padding: 10px 0 !important;
    color: #333;
    font-size: 1.4em;
}

.stepFunnelClients a {
    background: url(../graphics/svg/userGray.svg) 95% 12% no-repeat #fff
}

#flowBoxes span {
    display: inline-block;
    position: relative;
    height: 36px;
    line-height: 36px;
    padding: 0 20px;
    margin-right: 2px;
    background-color: white;
    width: 100%;
    background: #f9f9f9;
    text-align: center;
    font-weight: 500;
    font-size: .9em;
    border: 1px solid #c5dcf8;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    text-transform: uppercase;
}

.msgNueos {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ff3b30;
    color: #fff;
    font-size: 11px;
    line-height: 11px;
    padding: 3px 5px 4px;
    border-radius: 999px;
    font-style: normal;
    font-weight: 700;
    border-radius: 3px;
}

.stepFunnel p,
.stepFunnelClients p {
    float: left;
    width: 100%;
    text-align: left;
    padding: .5rem 0 0 .35rem;
    font-weight: 500;
    text-transform: uppercase;
    font-size: .65rem;
}

#flowBoxes .activo {
    background-color: #f0f8ff;
    color: #595b5d;
    box-shadow: none;
}

#flowBoxes span.right:after {
    content: '';
    width: 23px;
    height: 23px;
    position: absolute;
    right: -2px;
    top: 1px;
    background-color: #f9f9f9;
    z-index: 150;
    -webkit-transform: translate(10px, 4px) rotate(45deg);
    -moz-transform: translate(10px, 4px) rotate(45deg);
    -ms-transform: translate(10px, 4px) rotate(45deg);
    -o-transform: translate(10px, 4px) rotate(20deg);
    transform: translate(10px, 4px) rotate(45deg);
    border-top: 1px solid #c5dcf8;
    border-right: 1px solid #c5dcf8;
    border-bottom: 1px solid #f0f8ff;
    border-left: 1px solid #f0f8ff;
}

#flowBoxes span.uno:after {
    content: '';

    position: absolute;
    right: 6px;
    top: -1px;
    background-color: #ff8533;
    z-index: 150;
    -webkit-transform: translate(10px, 4px) rotate(45deg);
    -moz-transform: translate(10px, 4px) rotate(45deg);
    -ms-transform: translate(10px, 4px) rotate(45deg);
    -o-transform: translate(10px, 4px) rotate(20deg);
    transform: translate(10px, 4px) rotate(45deg);
}

.uno {
    background: #ff8533 !important;
    color: #fff !important
}

#flowBoxes span.dos:after {
    content: '';
    position: absolute;
    right: 6px;
    top: -1px;
    background-color: #eacc2b;
    z-index: 150;
    -webkit-transform: translate(10px, 4px) rotate(45deg);
    -moz-transform: translate(10px, 4px) rotate(45deg);
    -ms-transform: translate(10px, 4px) rotate(45deg);
    -o-transform: translate(10px, 4px) rotate(20deg);
    transform: translate(10px, 4px) rotate(45deg);
}

.dos {
    background: #eacc2b !important;
    color: #fff !important
}

#flowBoxes span.tres:after {
    content: '';
    position: absolute;
    right: 6px;
    top: -1px;
    background-color: #8aca83;
    z-index: 150;
    -webkit-transform: translate(10px, 4px) rotate(45deg);
    -moz-transform: translate(10px, 4px) rotate(45deg);
    -ms-transform: translate(10px, 4px) rotate(45deg);
    -o-transform: translate(10px, 4px) rotate(20deg);
    transform: translate(10px, 4px) rotate(45deg);
}

.tres {
    background: #8aca83 !important;
    color: #fff !important
}

#flowBoxes span.cuatro:after {
    content: '';
    position: absolute;
    right: 6px;
    top: -1px;
    background-color: #21a9fd;
    z-index: 150;
    -webkit-transform: translate(10px, 4px) rotate(45deg);
    -moz-transform: translate(10px, 4px) rotate(45deg);
    -ms-transform: translate(10px, 4px) rotate(45deg);
    -o-transform: translate(10px, 4px) rotate(20deg);
    transform: translate(10px, 4px) rotate(45deg);
}

.cuatro {
    background: #21a9fd !important;
    color: #fff !important
}

#flowBoxes span.cinco:after {
    content: '';
    position: absolute;
    right: 1px;
    top: 0px;
    background-color: #4f76ec;
    z-index: 150;
    -webkit-transform: translate(10px, 4px) rotate(45deg);
    -moz-transform: translate(10px, 4px) rotate(45deg);
    -ms-transform: translate(10px, 4px) rotate(45deg);
    -o-transform: translate(10px, 4px) rotate(20deg);
    transform: translate(10px, 4px) rotate(45deg);
}

.cinco {
    background: #4f76ec !important;
    color: #fff !important
}

.gray {
    color: #b3b2b2 !important;
    text-transform: capitalize !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    margin-top: 3px
}

.overFlow {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 90%;
    white-space: nowrap;
}

#flowBoxes span.activo:after {
    background-color: #f0f8ff;
}

.titTabs {
    padding: 30px 20px 20px !important;
}

.titFunnel {
    padding: 0rem 0 1rem .5rem;
}

.ticketBody {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .55rem;
}

.fechaTicket {
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #8e8e8e;
    font-size: .7rem;
    text-transform: uppercase;
}

.ticketTexto {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .75rem !important;
}

.estatusTicket {
    background: #ffe0aa;
    border-radius: 4px;
    color: #b18336;
    padding: .3rem .45rem;
    text-transform: uppercase;
    font-size: .6rem;
    font-weight: 600;
    width: 72px;
    text-align: center;
    border: 1px solid #fefdfa;
}

.ticketItem {
    display: block;
    border-bottom: 1px solid #ffdfaa;
    padding: .0rem 0rem .5rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    border-top: 1px solid #fafafa;
}

.formMenciones .modeOption {
    width: 100% !important
}

.modeOptionText {
    display: block;
    width: 100%;
    padding: 1rem .8rem;
    border-radius: 4px;
    border: 1px solid #d8dee8;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: all .15s ease;
    box-sizing: border-box;
    text-align: center;
}

.modeOption input[type="radio"]:checked+.modeOptionText,
.activoActivacion span {
    background: #dbeafe5c;
    border: 1px solid #7fadf7;
    color: #1e3a8a;
}

.modeSelector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    float: left;
    margin: 0 0 8px;
}

.modeOption {
    margin: 0;
    display: block;
    width: 100%;
}

.modeOption input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.modeOption input[type="radio"]:focus+.modeOptionText {
    outline: 2px solid #93c5fd;
    outline-offset: 1px;
}

.formMenciones #subcategoriasRows label {
    width: 100%
}

#subcategoriasRows .btnMini {
    font-size: 12px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    height: 28px;
    width: 28px;
    background: #f5c16e;
    color: #ffffffd1;
    font-size: 1rem;
    line-height: 25px;
    font-weight: 800;
    line-height: 18px;

}






#wrapPanelConfiguraciones {
    margin: 1rem 0
}

#gridTwoColumnsConfig {
    display: grid;
    grid-template-columns: 20% 78.5%;
    gap: 1rem;
    background: #f9f9f9;
    padding: 0 1rem 1rem;
}

#gridTwoColumnsConfig #firstColumn {
    padding: 1rem;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 10px;
    padding: .75rem;
    box-shadow: 1px 2px 7px #dfdfdf;
    -moz-box-shadow: 1px 2px 7px #dfdfdf;
    -webkit-box-shadow: 1px 2px 7px #dfdfdf;
}

#gridTwoColumnsConfig #secondColumn {
    padding: 1rem;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 1px 2px 7px #dfdfdf;
    -moz-box-shadow: 1px 2px 7px #dfdfdf;
    -webkit-box-shadow: 1px 2px 7px #dfdfdf;
    position: relative
}



/* EVALUACIONES */
.ev-wrap {
    margin: 6rem 18px;
    padding: 0 12px
}

.ev-avatar-stack {
    float: left;
    margin-left: .75rem
}

.ev-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 14px
}

.ev-head {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.ev-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 8px
}

.ev-btn {
    background: #ea8d3e;
    color: #fff;
    border: 1px solid #ea8d3e;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600
}

.ev-btn.sec {
    background: #fff;
    color: #374151;
    border-color: #d1d5db
}

.ev-table {
    width: 100%;
    border-collapse: collapse;
}

.ev-table th,
.ev-table td {
    padding: .25rem .5rem .25rem;
    text-align: left;
    font-size: .75rem;
    font-weight: 400
}

.ev-table th {
    background: #fafafa
}

.pill {
    font-size: 11px;
    border-radius: 999px;
    padding: 3px 8px;
    border: 1px solid #d1d5db
}

.ok {
    background: #ecfdf5;
    color: #065f46
}

.pen {
    background: #fffbeb;
    color: #92400e
}

.msg.ok {
    background: #ecfdf5;
    color: #166534
}

#ev_datepicker,
#crm_rep_picker {
    height: 50px;
    font-size: 1.1em;
    font-weight: 400;
    color: #202020;
    font-size: .75rem !important
}

#ev_datepicker::placeholder {
    color: #3b3b3b
}

#formEvaluaciones .inp {
    color: #4b4b44;
    height: 50px;
    font-size: .7rem;
    text-align: left !important;
}

#formDirectorioEmailsEmpleado .inpDisable {
    float: left;
    width: 76%;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    padding: .55rem .75rem;
    color: #343434;
    font-size: .8rem;
    max-height: 34px;
    background: #f9f9f9;
}

#emailNuevoMsg {
    float: right;
    width: 76%;
    padding: 0.25rem 0px 0 .75rem;
    font-size: .8rem;
    border-radius: 4px;
}

#formEvaluaciones .divFormBot {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 0 .75rem 0 .75rem;
    float: left;
}

#formEvaluaciones .divFormRight {
    border-right: 1px solid #ccc;
    padding: 0 .75rem 0 .75rem;
    float: left;
}

#formEvaluaciones .divFormNoBo,
#evaluaciones-dashboard .divFormNoBo {
    padding: 0 .75rem 0 .75rem;
    float: left;
}

#evaluaciones-ver #firstColumn .user,
#directorio-empleados #firstColumn .user {
    float: left;
    width: 100%;
    border-top: 1px solid #eee;
    padding: .5rem 0;
    border-bottom: 1px solid #fff;
}

#inventario-ver #firstColumn .user,
#crm-id #firstColumn .user {
    float: left;
    width: 100%;
    padding: .5rem 0;
    border-bottom: 1px solid #fff;
}

#inventario-ver #infoEva .proImg img,
#evaluaciones-ver .proImg img,
#directorio-empleados .proImg img,
#grupo-detalle .proImg img {
    float: left;
    margin-right: 7px;
    width: 18px;
    height: 18px;
    border: 2px solid #393838;
    border-radius: 50%;
    padding: 1px;
}

#inventario-ver .comment,
#evaluaciones-ver .comment,
#directorio-empleados .comment {
    padding: 0 .5rem !important;
    font-size: .8rem;
    font-weight: 300 !important;
    color: #434343 !important;
}

#evaluaciones-ver .msg.err {
    background: #fff1f2;
    color: #f82b32;
    font-size: .85rem;
    padding: 1rem 1rem 1rem;
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
}

#evaluaciones-ver .msg {
    margin: 0px !important;
    padding: 0px !important;
}

.q {
    float: left;
    width: 100%;
    background: #fff5e4;
    margin: .2rem 0;
    padding: .45rem .5rem;
    border-radius: 6px;
    border: 1px solid #ffdfaa;
}

.n {
    font-size: 1rem;
    font-weight: 800;
    color: #ea8d3e;
    float: left;
    width: 40px;
    border: 1px solid #fecf82;
    background: #fafafa;
    text-align: center;
    padding: 0;
    border-radius: 50%;
    margin-right: .5rem;
    height: 40px;
    line-height: 39px;
}

.r {
    font-size: .9rem;
    font-weight: 400;
    float: left;
    width: 80%;
    line-height: 43px;
    color: #b18336;
    height: 40px;
}

#evaluaciones-ver .body {
    float: left;
    width: 100%;
    margin-bottom: .55rem;
}

#evaluaciones-ver #secondColumn h3 {
    float: left;
    width: 100%;
    font-size: .85rem;
    text-transform: uppercase;
    font-weight: 400;
    padding-bottom: .75rem;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: .5rem;
    color: #7a7a7a;
    line-height: 23px;
}

.msg.err {
    background: #fff1f2;
    color: #f82b32;
    font-size: .85rem;
    padding: 1rem 1rem 1rem;
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
}

#infoEva .avatar-iniciales {
    display: inline-flex;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 10px;
    flex-shrink: 0;
    font-size: 10px;
    border: 2px solid #fff;
    line-height: 1;
    margin-top: .15rem;
    float: left;
}

#inventario-ver table {
    float: left;
    width: 100%
}

#inventario-ver #infoEva .holder,
#crm-id #infoEva .holder {
    padding: .75rem .5rem !important;
    float: left;
    width: 100%;
    margin-top: .5rem;
    border-top: 1px dashed #e8e8e8;
}

#inventario-ver #infoEva .holder p,
#crm-id #infoEva .holder p {
    padding: .15rem 0 !important
}

#infoEva .infoinfo {
    float: left;
    width: 80%;
    padding: 0.35rem 0 0 0.45rem;
}

.infoName {
    float: left;
    width: 80%;
    padding: .3rem 0 0 .5rem;
}

.infoName p {
    line-height: 16px;
}

#evaluaciones-dashboard .wrap {
    background: #f9f9f9
}

#cardKpis {
    margin: 1rem;
}

#dasboardGraph {
    padding: 0 1rem;
    background: #f9f9f9;
}

#evaluaciones-dashboard .grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    margin: 1.75rem 0;
}

.kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: .75rem;
}

#evaluaciones-dashboard .card {
    border-radius: 4px !important;
    padding: 1rem;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 8px #d5d7da;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: #fff;
    position: relative;
    border: 1px solid #fff;
}

.titDash {
    text-transform: uppercase;
    padding: 0rem 0 .75rem 0;
    font-weight: 600;
}

#evaluaciones-dashboard .kpi b {
    float: left;
    font-size: 1.7rem;
    margin-bottom: .25rem;
    width: 100%;
    color: #676666;
    font-weight: 600;
}

#evaluaciones-dashboard .kpi {
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    padding: 10px;
    background: #f3f3f3;
}

#evaluaciones-dashboard .kpi span {
    text-transform: uppercase;
    font-weight: 500;
    font-size: .65rem;
    color: #8f8e8e;
}

#categoria_nombre,
#parent_id,
#categoria_existente_id,
#inventario- #tipo_activo_id,
#inventario- #marca_id,
#inventario- #proveedor_id {
    width: 100% !important
}


.botonAgregarForms {
    display: inline-flex;
    align-items: center;
    /* centra vertical */
    justify-content: center;
    /* centra horizontal */
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    background: #fff5e4;
    border: 1px dashed #f6cf91;
    color: #ae8b4f;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
    margin: .5rem 0 1rem;
    width: 100%;
}

.botonAgregarForms svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.botonAgregarForms:hover {
    background: #fff5e461;
    border-color: #eec37c;
    color: #d18e23
}

.botonAgregarForms:active {
    transform: scale(.97)
}

.wrapNuevoTipo {
    display: block;
    float: left;
    width: 100%;
    background: #fff5e4;
    padding: 0 1rem 1rem;
    border: 1px solid #ffe4b9;
    border-radius: 6px;
}

.wrapNuevoTipo .act {
    background: #f2f2f2;
    border-radius: 5px;
    margin: 0 .5rem;
    width: 17%;
    font-weight: 500;
    float: left;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}

.wrapNuevoTipo .inp {
    border: 1px solid #ffe4b9 !important;
    width: 95%;
}

#wrapNuevoProveedor .inp {
    width: 48% !important;
    margin-right: 2% !important;
    margin-top: 2% !important;
}

.wrapNuevoTipo h3 {
    font-size: .75rem;
}

.wrapNuevoTipo .act:hover {
    background: #333;
    color: #fff;
}

.cancelarForm {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dedede;
    border-radius: 6px;
    margin-top: 0;
    margin-left: .5rem;
    background: #f5f5f5;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
    box-sizing: border-box;
    line-height: 1;
}

.cancelarForm svg {
    color: #333;
    width: 16px;
    margin: 10px;
}

.cancelarForm:hover {
    color: #333;
    background: #666;
    border: 1px solid #feeaca;
}

.cancelarForm:hover svg {
    color: #fff;
}

.calendarInp {
    background: url(../images/svg/calendar.svg) 18px 7px no-repeat #ffffff;
    padding-left: 3rem !important;
    background-size: 17px;
}

.wrapNuevoTipo small {
    float: left;
    padding: .75rem 0 0 .5rem;
    color: #aa8242;
    font-weight: 400;
}

#detallesTecnicosWrap>.detalle-tecnico-row:first-of-type .cancelarForm {
    display: none;
}

#wrapNuevoProveedor {
    position: relative;
}

#cancelarProveedor {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

#wrapNuevoProveedor .cancelarForm {
    width: 33px !important;
    height: 33px !important;
    padding: 0 !important;
    display: inline-flex;
    border: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-top: 0;
    margin-left: .5rem;
    background: #fff5e4;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
    box-sizing: border-box;
    line-height: 1;
}

#wrapNuevoProveedor .cancelarForm svg {
    color: #333;
    width: 16px;
    margin: 6px;
}

#wrapNuevoProveedor .cancelarForm:hover {
    color: #333;
    background: #666;
    border: 1px solid #feeaca;
}

#wrapNuevoProveedor .cancelarForm:hover svg {
    color: #fff;
}

.mainText {
    font-weight: 600
}

.crm-btn-descartar {
    width: 35%;
    background: #f6f6f6;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    font-size: .75rem !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
    font-weight: 600;
}

.crm-btn-descartar:hover {
    background: #efeeee;
}

.crm-btn-seguimiento {
    width: 62%;
    font-size: .75rem !important;
    border: 1px solid #6bbaff;
    border-radius: 4px;
    color: #3092e6;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
    font-weight: 600;
}

.crm-btn-seguimiento:hover {
    background: #33a0ff;
    color: #fff;
}

.tkTemp {
    display: block;
    padding: .75rem 0 .75rem;
    width: 100%;
    border-bottom: 1px dashed #e8e8e8;
}

.tkTemp b {
    display: inline-block;
    width: 30%;
    line-height: 1.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.tkTemp select {
    display: inline-block;
    width: 68%;
    border: 1px solid #e8e8e8;
    padding: .25rem;
    border-radius: 5px;
    vertical-align: middle;
}

#crm-todos .swal2-html-container,
#crm- .swal2-html-container {
    font-size: .9rem !important;
}

#crm-todos #swal2-html-container label,
#crm- #swal2-html-container label,
#crm_seg_wrap_concepto label,
#crm_seg_wrap_monto_apartado label {
    display: inline-block;
    line-height: 1.7rem;
    width: 26%;
    text-align: left;
    font-size: .9rem;
    text-align: left;
    color: #777;
}

#crm_wrap_temp {
    display: inline-block;
    width: 100%;
    text-align: left;
    padding: 1rem 0 .5rem;
}

#crm_pr_accion,
#crm_pr_temp,
#crm_accion_paso,
#crm_status_final,
#crm_accion_cierre,
#crm_status_card_change {
    width: 70%;
    display: inline-block;
    color: #666;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

#crm_wrap_sch,
#crm_seg_wrap_scheduled,
#crm_seg_wrap_concepto {
    display: inline-block;
    width: 100%;
    margin: .5rem 0;
}

#crmWrapNota,
#crmDescNota,
#crmCierreNota,
#crmStatusBadge {
    display: inline-block;
    width: 100%;
}

#crmWrapNota label,
#crmDescNota label,
#crmCierreNota label,
#crmStatusBadge label {
    width: 100% !important;
    text-align: left;
    padding: 1rem .0rem .5rem;
}

.crmEmptyState {
    text-align: center;
    padding: 4rem 0;
    opacity: .9;
}

.crmEmptyState .nombre {
    display: block;
    padding: .5rem 0;
}

#crm_wrap_sch label,
#crm_seg_wrap_scheduled label {
    display: inline-block !important;
    width: 26% !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    font-size: .9rem !important;
    color: #777 !important;
}

#crm_pr_scheduled,
#crm_seg_scheduled,
#crm_scheduled_paso {
    display: inline-block;
    width: 70%;
    background: url(../images/svg/calendar.svg) 10px 9px no-repeat #ffffff;
    padding-left: 2.2rem !important;
    background-size: 17px;
    border: 1px solid #e8e8e8;
}

#crm_pr_nota,
#crm_seg_nota,
#crm_nota_paso,
#crm_desc_nota,
#crm_nota_cierre,
#crm_status_card_nota {
    width: 100%;
    margin: 0;
    display: inline-block;
    line-height: 1.4rem;
    font-weight: 400;
}

#crm_pr_accion,
#crm_seg_accion,
#crm_seg_concepto,
#crm_seg_monto_apartado {
    width: 70%;
    display: inline-block;
    color: #666;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

.tkTopCrm {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    width: 100%;
    border-bottom: 1px solid #f5f4f4;
    margin-bottom: 0px !important;
}

div:where(.swal2-container) {
    z-index: 99999 !important
}

#asignador {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0rem 0rem 1rem 1rem;
    justify-content: flex-end;
}

#asignador select {
    height: 34px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: .5rem;
}

#sinAsignacion {
    margin: 1rem 0
}

#sinAsignacion p {
    text-align: center;
}

.LeadContactados {
    background: #f2fdf9;
    color: #236c3e;
    text-transform: capitalize;
    width: 100%;
    padding: .25rem .0;
    font-weight: 500;
    font-size: .7rem;
    border-radius: 26px;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    width: 100%;
    text-align: center;
    border: 1px solid #71d188;
    font-weight: 600;
    width: 95px;
}

.LeadProspectos {
    background: #fdf9f2;
    color: #c08925;
    text-transform: capitalize;
    width: 100%;
    padding: .25rem .0;
    font-weight: 500;
    font-size: .7rem;
    border-radius: 26px;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    width: 100%;
    text-align: center;
    border: 1px solid #fad48f;
    font-weight: 600;
    width: 95px;
}

.LeadEn_Proceso {
    background: #f2f8fd;
    color: #2060aa;
    text-transform: capitalize;
    width: 100%;
    padding: .25rem .0;
    font-weight: 500;
    font-size: .7rem;
    border-radius: 26px;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    width: 100%;
    text-align: center;
    border: 1px solid #6ba5cf;
    font-weight: 600;
    width: 95px;
}

.LeadCierre {
    background: #6ba5cf;
    color: #ffffff;
    text-transform: capitalize;
    width: 100%;
    padding: .25rem .0;
    font-weight: 500;
    font-size: .7rem;
    border-radius: 26px;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    width: 100%;
    text-align: center;
    border: 1px solid #6ba5cf;
    font-weight: 600;
    width: 95px;
}

.LeadFinalizados {
    background: #393838;
    color: #ffffff;
    text-transform: capitalize;
    width: 100%;
    padding: .25rem .0;
    font-weight: 500;
    font-size: .7rem;
    border-radius: 26px;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    width: 100%;
    text-align: center;
    border: 1px solid #393838;
    font-weight: 600;
    width: 95px;
}

.mensajeLead p {
    color: #353535;
    display: block;
    font-size: .88rem;
    font-weight: 400;
    text-transform: inherit !important;
    padding: 0 .25rem !important;
    width: 98%;
    margin-bottom: .55rem;
    display: block;
    height: 32px;
    line-height: 30px;
    border-bottom: 1px solid #e8e8e8;
}

#historialSeguimientos table {
    width: 100%;
}

.crmCanalInfo {
    cursor: pointer
}

.atrTitle {
    font-weight: 700;
    margin: 0 0 8px 0;
    background: #68b6fe;
    color: #fff;
    padding: .25rem 0 .25rem .5rem;
    border-radius: 2px;
    border: 1px solid #68b6fd;
}

.crm-canal-popover b {
    font-weight: 600;
}

.crmCanalInfo:hover {
    background: #f0f8ff
}



/* AGENDA CALENDARIO*/
#calendarioApp .cal-lista-lateral li,
#calendarioApp .card {
    border-radius: .5rem !important;
    padding: .75rem;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    display: flex;
    box-shadow: none;
    flex-direction: column;
    justify-content: start;
    background: #fff;
    position: relative;
    border: 1px solid #e8e8e8;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.5em;
    width: 100%;
}

#calendarioApp .fc .fc-button {
    height: 34px;
    font-weight: 500
}

.fc-prev-button,
.fc-next-button,
.fc-dayGridMonth-button,
.fc-timeGridWeek-button,
.fc-timeGridDay-button,
.fc-multiMonthYear-button {
    background: #676767 !important;
    border: 1px solid #7e7e7e !important;
}

.fc .fc-button {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25em;
    display: inline-block;
    font-size: .8rem;
    font-weight: 400;
    line-height: 34px;
    padding: 0.0em .5rem;
    text-align: center;
    user-select: none;
    vertical-align: middle;
}

.fc-icon {
    speak: none;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    height: 1em;
    line-height: 15px;
    text-align: center;
    text-transform: none;
    user-select: none;
    width: 1em;
    font-family: fcicons !important;
}

.fc-direction-ltr .fc-toolbar>*> :not(:first-child) {
    margin-left: 0.75em;
    padding: 0 .85rem;
}

.fc-dayGridMonth-button,
.fc-timeGridWeek-button,
.fc-timeGridDay-button,
.fc-multiMonthYear-button,
.fc-listMonth-button {
    padding: 0 1rem !important;
}

.fc .fc-toolbar-title {
    font-size: 1.2rem;
    font-weight: 300;
}

#calendarioApp .fc table {
    border-collapse: collapse !important;
}

#calendarioApp .fc .fc-col-header-cell,
#calendarioApp .fc .fc-timegrid-axis,
#calendarioApp .fc .fc-list-day-cushion {
    background: #f8fafc;
    padding: .5rem 0;
    font-size: .8rem;
    text-transform: capitalize;
    font-weight: 400;
}

.fc .fc-daygrid-day.fc-day-today {
    background: #ecf5ff;
}

.fc-day-today .fc-daygrid-day-number {
    background: #ff3b30;
    color: #fff !important;
    width: 24px;
    height: 24px;
    text-align: center;
    font-weight: 500;
    border-radius: 50%;
    font-size: .85rem;
    margin: .25rem;
}

#calendarioApp .fc .fc-event {
    border-width: 1px;
    background: #f9f9f9;
    margin-top: 2px;
    margin-left: 3px;
    z-index: 99999;
}

#calendarioApp .fc .fc-event:hover {
    z-index: 99999999999999
}

.fc .fc-daygrid-event-harness-abs {
    z-index: 999999999;
}

#calendarWrap {
    height: 700px;
    /* o 100vh, o calc(100vh - header) */
    overflow: hidden;
    /* importante para que no se desborde */
}

#calendar {
    height: 100%;
}

.fc-daygrid-dot-event .fc-event-title {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8d8d8d;
    font-weight: 500;
}

.fc-daygrid-event {
    font-size: 0.71rem;
}

.fc-direction-ltr .fc-daygrid-more-link {
    float: left;
    font-size: .72rem;
    margin: .5rem .25rem 0;
    background: #edf5fb;
    border: 1px solid #c3e1f9;
    color: #1174e1;
    padding: .25rem 1rem;
    font-weight: 700;
}

.fc-event-title {
    font-weight: 500;
}

#calendario- .card h3 {
    font-size: .7rem;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0rem .75rem .65rem 0;
    padding: 0 0 8px 1px;
    border-bottom: 1px dashed #ccc;
    width: 100%;
    margin-bottom: .5rem;
}

#calendario- .card .head {
    border-bottom: none;
    padding: 0px 0px 0.5rem !important;
    display: grid;
    grid-template-columns: 13% 86%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#calendario- .cal-card-side hr {
    border: 1px dotted #efefef;
    margin: .75rem 0
}

#calendario- .cal-card-side strong {
    background: #ffffff;
    font-weight: 400;
    font-size: .85rem;
    padding: .5rem .5rem;
    color: #666565;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
    margin-bottom: .25rem;
    display: block;
}

#calendario- .cal-card-side li {
    margin-right: .5rem;
}

#calendario- .cal-card-side .svgIcon,
#tablasGenerales .svgIcon {
    width: 17px;
    height: 17px;
    color: #ffffff;
    float: left;
    margin-right: .5rem;
    margin: 0 .5rem 0 0;
}

#calPendientes li {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

/* Primera fila (los dos span) */
#calPendientes li>span {
    display: inline-block;
}

#calPendientes li {
    display: flex;
    flex-direction: column;
    padding: .5rem !important;
}

#calPendientes .cal-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.cal-pill {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 20px;
    font-size: .6rem;
    text-transform: uppercase;
    font-weight: 500;
}

.cal-row-top .cal-pill:first-child {
    background: #ecf5ff;
    border: 1px solid #c3e1f9;
    color: #202020;
}

#calendarioApp .cal-status {
    background: #f1f5f9 !important;
    color: #293246 !important;
}

#calPendientes li p {
    margin: 0;
    font-size: .75rem;
    font-weight: 400;
    padding: .25rem 0 .0rem;
    line-height: 1.2rem;
    display: block;
    color: #757575;
}

#calendarioApp .cal-pill-status {
    margin-left: 4px;
    padding: 0px;
    color: #979797;
}

#calPendientes li .cal-small {
    font-size: .7rem;
    color: #a6a6a6;
}

#calendarioApp .cal-lista-lateral li,
#calendarioApp .card {
    background: #fcfcfc;
}

#calendarioApp .cal-card-side {
    padding: .5rem;
}

.cal-card-side-deactivate .cal-aside-toggle {
    width: 100% !important
}

#calendarioApp .cal-card-main {
    background: #fff;
}

.cal-aside-toggle img {
    width: 13px;
    height: 13px;
    display: block;
    transform: rotate(180deg);
    transition: transform .2s ease;
    margin: 0 auto;
    display: block;
}

#calendarioApp .cal-status-completado {
    background: #dcfce7;
    color: #25b15a;
    padding: .25rem;
    border: 1px solid #ace5be;
}

.cal-filter-box img {
    width: 17px;
}

#calendarioApp .cal-status-cancelado {
    background: #ff3b30;
    color: #ffffff;
    padding: .25rem;
    border: 1px solid #e2386f;
}

.fc-scrollgrid-sync-inner {
    font-size: .75rem;
}

.fc-timegrid-slot-label-cushion {
    font-size: .8rem;
}

.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
    padding: .5rem 4px;
}

.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
    box-shadow: none;
}

.fc-theme-standard .fc-popover {
    background: #116acc;
    border: 1px solid var(--fc-border-color);
    border-radius: 12px;
    overflow: hidden;
}

.fc-theme-standard .fc-popover-header {
    background: #5d5d5d61;
    color: #fff;
    font-weight: 700;
    padding: 0.5rem;
}

.fc .fc-popover-title {
    margin: 0px .25rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.3px;
}

.fc-theme-standard .fc-popover {
    background: #838181;
    border: 1px solid var(--fc-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.fc .fc-daygrid-event {
    margin-top: 0px;
    z-index: 6;
}

.fc-direction-ltr .fc-daygrid-event .fc-event-time {
    margin-right: 3px;
    font-size: .75rem;
}

.fc .fc-more-popover .fc-popover-body {
    min-width: 220px;
    padding: .5rem .45rem;
    background: #ffffff;
    border: 1px solid #eeee;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#calendario- .cal-card-side-active {
    background: #f9f9f9 !important;
    border: none !important;
}

#calendario- .cal-card-main {
    border: 1px solid #e8e8e8
}

.fc .fc-daygrid-more-link {
    border-radius: 26px !important;
    cursor: pointer;
    line-height: 1;
    margin-top: .25rem;
    max-width: 100%;
    overflow: hidden;
    padding: 2px;
    position: relative;
    white-space: nowrap;
    z-index: 4;
    padding: .15rem 1rem;
}

.fc .fc-daygrid-more-link:hover {
    background-color: rgb(108 145 228);
    color: #fff;
    border: 1px solid #678cdd;
}

#tblInmuebles .titlePropiedad th,
#tblInmueblesRenta .titlePropiedad th {
    background: #f0f8ff;
    border-top: 1px solid #d3e5fa;
    border-bottom: 1px solid #d3e5fa;
    padding: .5rem;
}

#tabInmuebles {
    padding: 0rem !important;
}


@media(max-width:900px) {
    .ev-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}


#usuarios #formTicketsQuick {
    padding: 0 1rem
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@keyframes parpadeo {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}