@charset "UTF-8";
@import url(mixing.css);

:root {
  --colorpp:#9FE870;
  --colorppH:#8cc866;
  
  --colorppH2:#80CE67;
  
  /* Nuevos tonos de verde del logo ASR */
  --colorpp-light: #9FE870;
  --colorpp-medium: #7DD55C;
  --colorpp-dark: #5BC247;
  
  --colorpp2:#F5A228;
  --colorpp2H:#e19e2a;
  --dark : #141F11;

  --sinLicenciaColor: #84e2ff;
}


body {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

#dashboardBi{
  width: 100%;
  height: 850px;
}

.contenido {
  background: #f0f0f0;
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  justify-content: center;
}
.contenido .sidebar {
  width: 200px;
  background: #ffffff;
  padding: 25px 0;
}
.contenido .sidebar .logo {
  text-align: center;
  background: #fff;
  margin: 0 auto 40px auto;
  border-radius: 50%;
}
.contenido .sidebar .menu-sidebar ul li ul{
  display: none;
  background: #f0f0f0;
  border-right: 2px solid #ccc;
}
.contenido .sidebar .section-title {
  font-size: 1.2rem;
  color: #fff;
  background: #444;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  margin-top: 30px;
  text-align: center;
  padding: 15px 0;
}
.contenido .sidebar .menu-sidebar {
  margin-top: 20px;
}
.contenido .sidebar .menu-sidebar ul {
  padding: 0;
}
.contenido .sidebar .menu-sidebar ul li {
  list-style: none;
}
.contenido .sidebar .menu-sidebar ul li a {
  text-decoration: none;
  color: #000;
  width: 100%;
  position: relative;
  display: inline-block;
  padding: 15px 25px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-left 0.2s ease;
  border-left: 3px solid transparent;
}
.contenido .sidebar .menu-sidebar ul li a:hover {
  background-color: rgba(144, 212, 122, 0.15);
  border-left: 3px solid var(--colorpp);
}
.contenido .sidebar .menu-sidebar ul li.current > a,
.contenido .sidebar .menu-sidebar ul li ul li.current > a {
  background-color: rgba(144, 212, 122, 0.15);
  border-left: 3px solid var(--colorpp);
}
.contenido .sidebar .menu-sidebar ul li a i{
  margin-right: 10px;
}
.contenido .sidebar .menu-sidebar ul li.parent-menu > a::after {
  color: #000;
  border: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.contenido .sidebar .menu-sidebar ul li.parent-menu.open > a::after {
  color: #000;
  border: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.contenido .sidebar .menu-sidebar ul li.parent-menu.open {
}

.eiSinLicencia
{
  background-color: var(--sinLicenciaColor) !important;
  height: 14px;
  width: 14px;
  border-radius: 20%;
  border: 0.25px solid black;
}

.entrada-SI
{
  height: 14px;
  width: 14px;
  border-radius: 20%;
  background-color: var(--colorpp);
  border: 0.25px solid black;
}

.agentePro-SI
{
  height: 14px;
  width: 14px;
  border-radius: 20%;
  background-color: #0faff7;
  border: 0.25px solid black;
}

.agenteCero-SI
{
  height: 14px;
  width: 14px;
  border-radius: 20%;
  background-color: orange;
  border: 0.25px solid black;
}

.agenteInmobiliario-SI
{
  height: 14px;
  width: 14px;
  border-radius: 20%;
  background-color: purple;
  border: 0.25px solid black;
}

.agenteImpago-SI
{
  height: 14px;
  width: 14px;
  border-radius: 20%;
  background-color: red;
  border: 0.25px solid black;
}

.simple-orden a {
  color: black !important;
  text-decoration: none !important;
}

.contenido .sidebar .menu-sidebar ul li ul li a {
  padding: 6px 0 6px 45px;
  color: #000;
}
.contenido .sidebar .menu-sidebar ul li ul li a:hover {
  color:var(--colorpp);
}
.contenido .sidebar.mini {
  width: 100px;
  display: none;
}
.contenido .sidebar.mini .logo {
  height: 80px;
  width: 80px;
}
.contenido .sidebar.mini .logo img {
  width: 100% !important;
}
.contenido .sidebar.mini .section-title {
  display: none;
}
.contenido .sidebar.mini .menu-sidebar ul li a {
  text-align: center;
}
.contenido .sidebar.mini .menu-sidebar ul li a span {
  display: none;
}

.contenido .sidebar.mini .menu-sidebar ul li ul li a {
  padding-left: 8px;
  font-size: 13px;
  text-align: center;
}
.contenido-publico{
  width: 100%;
}
.contenido .contenido-interno.mini {
  width: 100%;
}
.contenido header.header {
  background: #fff;
  width: 100%;
  height: 75px;
}
.contenido header.header .top {
  padding: 2px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
}
.contenido header.header .top .descripcion p {
  margin: 0px;
  padding: 0px;
  color: #fff;
}
.contenido header.header .top .accesos {
  justify-content: flex-end;
  display: flex;
}
.contenido header.header .top .accesos .social {
  margin-right: 20px;
  display: flex;
  padding: 0px;
  margin-bottom: 0px;
}
.contenido header.header .top .accesos .social li {
  list-style: none;
  margin-left: 15px;
}
.contenido header.header .top .accesos .social li a {
  color: #fff;
  font-size: 18px;
}
.contenido header.header .top .accesos .social li a:hover {
  color: var(--colorpp2);
}
.contenido header.header .top .accesos .acceso-crm .link a {
  font-weight: 800;
  text-transform: uppercase;
  color: var(--colorppH);
  font-size: 13px;
}
.contenido header.header .bottom {
  padding: 10px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
}
.contenido header.header .bottom .logo img {
  height: 30px;
}

.contenido header.header .bottom .menus{
  width: 80%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.contenido header.header .bottom .menu-pp {
  width: 100%;
}

.contenido header.header .bottom .menu-pp ul{
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: space-around;
}
.contenido header.header .bottom .menu-pp ul li{
  list-style: none;
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.contenido header.header .bottom .menu-pp ul li a{
  text-decoration: none;
  color:#666;
}
.contenido header.header .bottom .menu-pp ul li  ul{
  display: none;
  position: absolute;
  background: #fff;
  min-width: 120px;
  top: 25px;
  padding-left: 15px;
  left: -17px;
  padding-top: 20px;
}
.contenido header.header .bottom .menu-pp ul li:hover ul{
  display: block;
}
.contenido header.header .bottom .menu-pp ul li:hover a{
  color:var(--colorppH);
}

.contenido header.header .bottom .menu-pp ul li ul li:hover a{
  color: var(--colorpp2H);
}

.contenido header.header .bottom .info-user {
  display: flex;
  align-items: center;
}
.contenido header.header .bottom .notificaciones .icono {
  height: 40px;
  width: 40px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colorpp);
}
.contenido header.header .bottom .notificaciones .icono.light {
  background: transparent
}
.contenido header.header .bottom .notificaciones .icono i {
  font-size: 20px;
  color: #000;
}

.contenido header.header .notificaciones{
  position: relative;
  padding : 0px;
  margin-right: 20px;
}

.contenido header.header .notificaciones .icono.light .bagde{
  border-radius: 20px;
  padding: 0px;
  font-size: 12px;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
  right:14px;
  top:2px;
  position: absolute;
}
.contenido header.header  .puntos{
  width: 500px;/*240px;*/
  display: flex;

}
.contenido header.header .box{
  padding-left: 5px;
  border-left: 1px solid #ccc;
  width: 21%;/*47%;*/
  display: flex ;
}

.contenido header.header .boxGrande{
  padding-left: 5px;
  border-left: 1px solid #ccc;
  width: 54%;
  display: flex;
  margin-right: 5px;
  margin-left: 5px;
}

.contenido header.header  .puntos .name{
  display: inline-block;
  font-size: 12px;
  line-height: 12px;
  font-variant: small-caps;
  text-transform: lowercase;
}
.contenido header.header  .puntos .name span{
  display: block;
}
.contenido header.header  .puntos .num{
  font-size: 20px;
  font-weight: 600;
  color:#666;
  margin-left: 6px;
}

.contenido header.header .bottom .info-user .datos {
  margin-left: 10px;
}

.contenido header.header .datos .btn .nombreEI {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

.contenido header.header .header-tienda-idiomas {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contenido header.header .header-idiomas {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contenido header.header .header-idiomas a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.dropdown-item.active, .dropdown-item:active{
  background: #f0f0f0;
}

.contenido-interno.mini{
  width:  calc(100% - 100px);
}
 .contenido-interno{
 
  width:  calc(100% - 200px);
}

.contenido .dashboard {
  padding: 5% 4%;
  min-height: 80vh;
}
.contenido .dashboard .box{
  padding: 2px;
  border-radius: 8px;
  background: #fff;
  min-height: 100px;
  margin-top: 20px;
}
.contenido .dashboard .box a{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color:#444;
}
.contenido .dashboard .box a:hover .name{
  color: var(--colorppH);
}
.contenido .dashboard .box a:hover i{
  color: var(--colorpp2H);
}

.contenido .dashboard .box .name{
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.2rem;
  display: block;
  width: 100%;
  text-align: center;
}
.contenido .dashboard .box i{
  font-size: 1.8rem;
  margin-top: 15px;
}

.contenido .contenedor {
  padding: 20px;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}



.contenido .pasos-registro .logo{
  text-align: center;
  margin: 35px 0 70px 0;
}
.contenido .pasos-registro .logo img{
  width: 260px;
}
.pasos-registro .steps ul {
  margin: 0px 0px 30px 162px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
 
}
 .pasos-registro .steps ul li {
  list-style: none;
  z-index: 1;
  min-width: 180px;
 
}
.pasos-registro .steps ul li.borderS {

  border-top: 1px solid #ccc;
}


 .pasos-registro .steps ul li .num {
  height: 25px;
  width: 25px;
  border-radius: 25px;
  max-width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px solid #fff;
  color: #fff;
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: -13px;
}
 .pasos-registro .steps ul li .name {
  text-decoration: none;
  color: #000;
  margin-left: -30px;
  display: inline-block;
}
 .pasos-registro .steps ul li.active .num {
  background: var(--colorpp);
}

 .pasos-registro .steps ul::before {
  content: "";
  width: 90%;
  height: 20px;

  position: absolute;
  z-index: 0;
}
 .pasos-registro .body {
  margin-top: 40px;
}

.modal-aviso {
  text-align: center;
}
.modal-aviso .icon {
  font-size: 3rem;
  color: var(--colorpp2);
}

.modal-aviso p {
  margin: 25px 0;
}

h5.titleForm{

  text-transform: lowercase;
  font-weight: 700;
  font-variant: small-caps;
}

.login-page{

  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.login-page .cont-login .col-md-3{
  width: 100%;
}
.login-page .cont-login .form-text{
  font-style: italic;
  font-size: 10px;
}
.login-page .login-form {
  max-width: 420px;
  min-width: 420px;
  margin: 0% auto;
  background: #fff;
  border-radius: 8px;
  padding:30px 20px;
}
.login-page .login-form .logo {
  width: 100%;
  display: flex;
  justify-content: center;
}
.login-page .login-form .logo img {
  width: 75%;
  margin-bottom: 20px;
}
.login-page .login-form .text {
  text-align: center;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 300;
}
.login-page .login-form .text .des {
  font-weight: 800;
  font-size: 20px;
}
.login-page .login-form .text p {
  margin: 0px;
  padding: 0px;
}
.login-page .links ul{
  display: flex;
  margin-top: 15px;
  padding: 0px;
justify-content: center;

}
.login-page .links ul li{
  list-style: none;
  
}
.login-page .links ul li a{
  color:#000;
  text-decoration: none;
}


.login-page .login-form .btn{
  color: var(--dark);
  min-height: 55px;
  font-weight: 400;
}

.card-bienvenida{
  padding: 0px;
  

}
.card-bienvenida .card-body{
  padding: 0px;
  height: 300px;

}
.card-bienvenida .card-body .bienvenida{
  display: flex;
  height: 300px;

}
.card-bienvenida .img{
  position: relative;
  min-width: 400px;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.card-bienvenida .text{
 margin: 40px 0 0 40px;

}

.card-bienvenida .text h1{
  font-size: 40px;
}
.card-bienvenida .text p{
  width: 70%;
}

.card-bienvenida .img .foto{
  position: absolute;
  height: 100%;
  width:100%;
  background-image: url(/img/imagen-bienvenida.png);
  top:0px;
  left:0px;
  background-size: cover;
  background-repeat: no-repeat;
}

.card-bienvenida .img .fotoAcademy{
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(/img/asr-academy.png);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.boxPC {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  height: auto;
}

.nuevosRegistros{
  font-size: 16px !important;
}

.boxPC:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  transform: translateX(50%);
}

.fila1, .filaLC0{
  padding: 5px 0px;
  background-color: #F0F0F0;
  font-size: 14px;
}

.fila2, .filaLC1{
  padding: 5px 0px;
  background-color: #fff;
  font-size: 14px;
}

.vista-movil {
  display:none;
}
.btn-dashboard{
  position: absolute;
  bottom: 0;
  width: 92%;
}

.timeline{
  max-height: 400px; /* Ajusta la altura según tus necesidades */
  overflow-y: auto; /* Esto habilita el scroll vertical */
}

.timeline ul {
  --col-gap: 1.9rem;
  --row-gap: 2rem;
  --line-w: 0.25rem;
  display: grid;
  grid-template-columns: var(--line-w) 1fr;
  grid-auto-columns: max-content;
  column-gap: var(--col-gap);
  list-style: none;
  /* width: min(60rem, 90%); */
  margin-inline: auto;
}

/* line */
.timeline ul::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 20;
  background: rgb(225, 225, 225);
  border-radius: calc(var(--line-w) / 2);
}

/* columns*/

/* row gaps */
.timeline ul li:not(:last-child) {
  margin-bottom: var(--row-gap);
}

/* card */
.timeline ul li {
  grid-column: 2;
  --inlineP: 1.5rem;
  margin-inline: var(--inlineP);
  grid-row: span 2;
  display: grid;
  grid-template-rows: min-content min-content min-content;
}

/* date */
.timeline ul li .date {
  --dateH: 3rem;
  height: var(--dateH);
  min-width: 45%;
  margin-inline: calc(var(--inlineP) * -1);

  text-align: center;
  background-color: var(--accent-color);

  color: white;
  font-size: 1.25rem;
  font-weight: 700;

  display: grid;
  place-content: center;
  position: relative;

  border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}

/* date flap */
.timeline ul li .date::before {
  content: "";
  width: var(--inlineP);
  aspect-ratio: 1;
  background: var(--accent-color);
  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
  position: absolute;
  top: 100%;

  clip-path: polygon(0 0, 100% 0, 0 100%);
  right: 0;
}

/* circle */
.timeline ul li .date::after {
  content: "";
  position: absolute;
  width: 2rem;
  aspect-ratio: 1;
  background: var(--bgColor);
  border: 0.3rem solid var(--accent-color);
  border-radius: 50%;
  top: 50%;

  transform: translate(50%, -50%);
  right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}

/* title descr */
.timeline ul li .title,
.timeline ul li .descr {
  background: var(--bgColor);
  position: relative;
  padding-inline: 1.5rem;
}

.timeline ul li .title {
  overflow: hidden;
  padding-block-start: 1.5rem;
  padding-block-end: 1rem;
  font-weight: 500;
  min-width: 45%;
}

.timeline ul li .descr {
  padding-block-end: 1.5rem;
  font-weight: 300;
  min-width: 45%;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
}

/* Ensure any child elements within descr also respect width constraints */
.timeline ul li .descr * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Handle specific elements that might overflow */
.timeline ul li .descr img,
.timeline ul li .descr table,
.timeline ul li .descr pre,
.timeline ul li .descr code {
  max-width: 100%;
  height: auto;
  word-break: break-all;
}

/* shadows */
.timeline ul li .title::before,
.timeline ul li .descr::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  left: 50%;
  border-radius: 50%;
  filter: blur(4px);
  transform: translate(-50%, 50%);
}

.timeline ul li .title::before {
  bottom: calc(100% + 0.125rem);
}

.timeline ul li .descr::before {
  z-index: -1;
  bottom: 0.25rem;
}

@media (min-width: 40rem) {
  .timeline ul {
    grid-template-columns: 1fr var(--line-w) 1fr;
  }

  .timeline ul::before {
    grid-column: 2;
  }

  .timeline ul li.mensajeEi {
    grid-column: 1;
  }

  .timeline ul li.mensajeAdmin {
    grid-column: 3;
  }

  /* start second card */
  .timeline ul li:nth-child(2) {
    grid-row: 2/4;
  }

  /* LENGUETA */
  .timeline ul li.mensajeEi .date::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    left: 0;
    background-color: white;
    border: 3px solid #80CE67;
  }

  /* CIRCULO */
  .timeline ul li.mensajeEi .date::after {
    transform: translate(-50%, -50%);
    left: calc(100.65% + var(--col-gap) + var(--line-w) / 2);
  }

  /* CONTENEDOR CODIGO EI */
  .timeline ul li.mensajeEi .date {
    border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
    background-color: white;
    border: 3px solid #80CE67;
    color: #80CE67;
  }
}

@media(max-width:1500px){
  .contenido header.header .bottom .menus {
    width: 62%;
  }
}
@media(max-width:1200px){
  .contenido header.header .bottom .menus {
    width: 80%;
  }
}
@media(max-width:1100px){
  .contenido header.header .bottom .menus
  {
    width: 79%;
  }
}
@media(max-width:760px){
  .contenido header.header .bottom .menus {

    width: 69%;
  }
  .contenido header.header .puntos {
    width: 400px;
  }
  .vista-web {
    display: none;
  }
}
@media (max-width:750px) {
  .contenido header.header .box
  {
    width: 36%;
  }
}
@media(max-width:700px){
  .pasos-registro .steps ul li.borderS {
    border-top: 0px
  }
  .contenido .pasos-registro .logo img{
    width: 180px;
  }
  .contenido .pasos-registro .logo{
    margin: 20px 0px 40px 0;
  }
  .pasos-registro .steps ul {
    margin: 0px 0px 20px 0px;
  }
  .pasos-registro .steps ul li{
      min-width: 115px;
      text-align: center;
  }
  .pasos-registro .steps ul li .name{
    margin-left: 0px;
  }
  .pasos-registro .steps ul li .num{
    margin: 0 auto;
  }

  .card-bienvenida .img {
    display: none;
  }
  .card-bienvenida .text h1{
    font-size: 20px ;
  }


  .contenido header.header .bottom{
    flex-wrap: nowrap;
    padding: 00px 15px;
    align-items:center;
  }
  .contenido header.header .datos .btn{
    padding: 3px;
    font-size: 12px;
    flex-wrap: wrap;
    border: 1px solid #000;
    border-radius: 10px;
    margin: 5px 0px;
  }
  .contenido header.header .datos .btn .nombreEI{
    display: block;
    width: 100%;
  }
  .contenido header.header .bottom .menus{
    width: 89%;
  }

  .contenido .sidebar .menu-sidebar ul li ul li a{
    padding: 5px;
  }

  .contenido .sidebar .menu-sidebar ul li a{
    padding: 6px;
    white-space: normal;
    display:flex;
    align-items: center;
  }

  .contenido .sidebar .menu-sidebar ul li a i{
    color: #000;
    font-size: 20px;
    display: block;
    width: auto;
  }

  .cont-form{
    padding: 0 20px;
  }


  .contenido .sidebar{
    width: 200px;
    position: absolute;
    left: 0px;
    top:75px;
    height: 100%;
    z-index: 9;
    padding-top: 0;
  }
  .contenido-interno {
    width: 100% ;
  }

  .contenido .sidebar .logo{
    display: none;
  }

  .contenido .sidebar .menu-sidebar{
    margin-top: 0;
  }

  .vista-movil {
    display:block;
  }

  .vista-web {
    display:none;
  }
  .contenido header.header{
    height: auto;
  }

  .contenido header.header .puntos {
    width: 400px;/*152px;*/
    background: #fefefe;
  }
  .contenido header.header .puntos .box{
    display: block;
    text-align: center;
    padding-left: 0px;
  }
  .contenido header.header .notificaciones{
    margin-right: 0px;
  }
  .contenido header.header .bottom .notificaciones .icono{
    justify-content: flex-end;
  }

  .contenido header.header .bottom .menus .btn-colorpp {
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 6px;
  }

  .entrada-SI{
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: var(--colorpp);
  border: 0.25px solid black;
}

}

.log-succeeded{
  display: inline-block; /* Ajusta el ancho al contenido */
  background-color: rgb(159, 232, 112, 0.4);
  border: 1px solid var(--colorpp);
  color: #000;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  margin-left: 5px;
  min-width: 130px;
  text-align: center;
}

.log-canceled, .log-card_declined{
  display: inline-block; /* Ajusta el ancho al contenido */
  background-color: rgb(255, 0, 0, 0.4);
  border: 1px solid red;
  color: #000;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  margin-left: 5px;
  min-width: 130px;
  text-align: center;
}

.log-processing{
  display: inline-block; /* Ajusta el ancho al contenido */
  background-color: rgb(255, 255, 0, 0.4);
  border: 1px solid yellow;
  color: #000;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  margin-left: 5px;
  min-width: 130px;
  text-align: center;
}

/* ======================================
   ESTILOS PARA CHAT DE TICKETS
   ====================================== */

/* Contenedor principal del chat */
.chat-container {
	border-left: 1px solid #e9ecef;
	border-right: 1px solid #e9ecef;
	overflow-x: hidden; /* Elimina scroll horizontal */
}

/* Mensajes del chat */
.chat-messages {
	overflow-x: hidden; /* Elimina scroll horizontal en mensajes */
}

.chat-messages::-webkit-scrollbar {
	width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
	background: #555;
}

/* Avatares */
.avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
	min-width: 35px; /* Evita que el avatar se comprima */
}

/* Imágenes dentro de avatares */
.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Logo ASR en avatar de admin */
.avatar img[alt="Logo ASR"] {
	background: white;
	padding: 2px;
	object-fit: contain;
}

/* Burbujas de mensajes */
.message-bubble {
	padding: 12px 16px;
	border-radius: 18px;
	word-wrap: break-word;
	word-break: break-word; /* Rompe palabras largas */
	overflow-wrap: break-word; /* Compatibilidad adicional */
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	min-width: 450px; /* Tamaño mínimo para separar nombre y fecha */
	overflow: hidden; /* Evita que el contenido se desborde */
}

/* Mensajes del usuario (izquierda) - esquina superior izquierda sin redondear */
.user-bubble {
	background: linear-gradient(135deg, #5BC247 0%, #7DD55C 50%, #9FE870 100%);
	border-top-left-radius: 4px;
	color: black;
}

/* Mensajes del admin (derecha) - esquina superior derecha sin redondear */
.admin-bubble {
	background: linear-gradient(135deg, #9FE870 0%, #7DD55C 50%, #5BC247 100%);
	color: black;
	border-top-right-radius: 4px;
}

/* Contenido de mensajes */
.message-header {
	font-size: 11px;
	opacity: 0.9;
}

.sender-name {
	font-weight: 600;
	word-break: break-word; /* Evita desbordamiento del nombre */
}

.message-time {
	font-size: 10px;
	opacity: 0.8;
	white-space: nowrap; /* Evita que la hora se parta */
}

.message-content {
	font-size: 14px;
	line-height: 1.4;
	word-break: break-word; /* Rompe palabras largas en el contenido */
}

.message-content p {
	margin-bottom: 0;
	word-break: break-word;
}

/* Imágenes dentro del contenido de mensajes */
.message-content img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 8px;
	margin: 4px 0;
	object-fit: contain;
}

/* Tablas dentro del contenido de mensajes */
.message-content table {
	max-width: 100% !important;
	table-layout: auto;
	word-break: break-word;
}

/* Videos y otros elementos multimedia */
.message-content video,
.message-content iframe,
.message-content embed,
.message-content object {
	max-width: 100% !important;
	height: auto !important;
}

/* Código y elementos pre dentro del contenido */
.message-content pre,
.message-content code {
	max-width: 100% !important;
	overflow-wrap: break-word;
	word-break: break-all;
	white-space: pre-wrap;
}

/* Contenido generado por Summernote */
.message-content .note-editable,
.message-content .note-editable * {
	max-width: 100% !important;
	box-sizing: border-box;
}

/* Enlaces dentro del contenido */
.message-content a {
	word-break: break-all;
	overflow-wrap: break-word;
}

/* Asegurar que los mensajes no se desborden */
.message-wrapper {
	width: 100%;
	overflow: hidden;
	animation: slideIn 0.3s ease-out;
}

/* Estado vacío */
.empty-chat {
	min-height: 300px;
}

/* Input de comentarios */
.chat-input-container {
	background: white;
	border-radius: 20px;
	border: 1px solid #e9ecef;
	padding: 10px;
	width: 100% !important;
}

.chat-input-container .form-control {
	width: 100% !important;
}

.chat-input-container textarea {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.chat-input-container textarea:focus {
	background: #f8f9fa !important;
}

/* Asegurar que Summernote ocupe todo el ancho */
.note-editor {
	width: 100% !important;
}

.note-editing-area {
	width: 100% !important;
}

/* Sección de archivos */
.file-upload-section label {
	cursor: pointer;
	transition: all 0.3s ease;
}

.file-upload-section label:hover {
	background-color: #6c757d;
	color: white;
}

/* Botón de envío del chat */
.btn-chat-submit {
	background-color: #9FE870 !important;
	border-color: #9FE870 !important;
	color: #141F11 !important;
	font-weight: 600;
}

.btn-chat-submit:hover {
	background-color: #8cc866 !important;
	border-color: #8cc866 !important;
	color: #141F11 !important;
}

.btn-chat-submit:focus,
.btn-chat-submit:active,
.btn-chat-submit.active {
	background-color: #80CE67 !important;
	border-color: #80CE67 !important;
	color: #141F11 !important;
	box-shadow: 0 0 0 0.2rem rgba(159, 232, 112, 0.25) !important;
}

.chat-input-container button[type="submit"] {
	background-color: #9FE870 !important;
	border-color: #9FE870 !important;
	color: #141F11 !important;
	font-weight: 600;
}

.chat-input-container button[type="submit"]:hover {
	background-color: #8cc866 !important;
	border-color: #8cc866 !important;
	color: #141F11 !important;
}

.chat-input-container button[type="submit"]:focus,
.chat-input-container button[type="submit"]:active {
	background-color: #80CE67 !important;
	border-color: #80CE67 !important;
	color: #141F11 !important;
	box-shadow: 0 0 0 0.2rem rgba(159, 232, 112, 0.25) !important;
}

/* Animaciones */
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive - Tablet */
@media (max-width: 768px) {
	.message-bubble {
		max-width: 80% !important;
		font-size: 13px;
		min-width: 180px; /* Tamaño mínimo reducido para tablet */
	}
	
	.avatar {
		width: 30px;
		height: 30px;
		font-size: 12px;
		min-width: 30px;
	}

	.message-header {
		font-size: 10px;
	}

	.sender-name {
		font-size: 10px;
	}

	.message-time {
		font-size: 9px;
	}

	.message-content {
		font-size: 13px;
	}

	.chat-container {
		min-height: 300px;
		max-height: 400px;
	}

	.chat-input-section .p-3 {
		padding: 15px !important;
	}

	.chat-input-container {
		width: 100% !important;
	}
}

		.categoria-descuento-item {
			display: inline-flex;
			align-items: center;
			background-color: #ffffff;
			padding: 8px 12px;
			margin-right: 10px;
			margin-bottom: 10px;
			border-radius: 6px;
			border: 1px solid #ced4da;
			transition: all 0.3s ease;
			cursor: pointer;
		}

		.categoria-descuento-item:hover {
			background-color: #e9ecef;
			border-color: #adb5bd;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
		}

		.categoria-descuento-item input[type="checkbox"] {
			margin-right: 8px;
			width: 18px;
			height: 18px;
			cursor: pointer;
		}

		.categoria-descuento-item label {
			margin-bottom: 0;
			cursor: pointer;
			font-weight: 500;
			color: #495057;
		}

		.categoria-descuento-item input[type="checkbox"]:checked + label,
		.categoria-descuento-item:has(input[type="checkbox"]:checked) label {
			color: #9FE870;
			font-weight: 600;
		}

		.categoria-descuento-item:has(input[type="checkbox"]:checked) {
			background-color: #f0fce8;
			border-color: #9FE870;
		}

		@media (max-width: 768px) {
			.categoria-descuento-item {
				width: 100%;
				margin-right: 0;
			}
		}

/* Responsive - Móvil */
@media (max-width: 576px) {
	.message-bubble {
		max-width: 85% !important;
		font-size: 12px;
		padding: 10px 12px;
		min-width: 160px; /* Tamaño mínimo reducido para móvil */
	}

	.avatar {
		width: 28px;
		height: 28px;
		font-size: 11px;
		min-width: 28px;
	}

	.message-header {
		font-size: 9px;
	}

	.sender-name {
		font-size: 9px;
	}

	.message-time {
		font-size: 8px;
	}

	.message-content {
		font-size: 12px;
		line-height: 1.3;
	}

	.chat-container {
		min-height: 250px;
		max-height: 350px;
	}

	/* Reducir padding en móviles */
	.chat-messages {
		padding: 15px !important;
	}

	.chat-input-section .p-3 {
		padding: 10px !important;
	}

	.d-flex.justify-content-between {
		flex-direction: column;
		gap: 10px;
	}

	.file-upload-section {
		width: 100%;
	}

	button[type="submit"] {
		width: 100%;
	}

	.btn-chat-submit {
		width: 100%;
	}
}

fieldset:has(#formacion_videos) {
    display: none !important;
}