/* Botón destacado para nueva regla */
.mp26-btn-nueva-regla {
  font-size: 1rem;
  border-radius: 2rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: background 0.18s, transform 0.13s, box-shadow 0.18s;
  background: linear-gradient(90deg, #218838 60%, #28a745 100%);
  color: #fff;
  border: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 2.2rem;
  white-space: nowrap;
  min-width: 170px;
  font-weight: 500;
}
.mp26-btn-nueva-regla:hover, .mp26-btn-nueva-regla:focus {
  background: linear-gradient(90deg, #28a745 60%, #218838 100%);
  color: #fff;
  transform: translateY(-1px) scale(1.025);
  box-shadow: 0 2px 8px rgba(40,167,69,0.13);
}
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

/* Perfiles - tarjeta principal */
.card-perfil-container {
  width: 70rem;
}

/* Mesa de control - tarjeta troubleshooting */
.card-troubleshooting-container {
  width: 75rem;
}

/* Loader */
.lds-hourglass {
    display: block;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(184, 183, 183, 0.6);
  }

  .lds-hourglass.hidden{
      display: none !important;
  }
  
  .lds-hourglass:after {
    content: " ";
    display: block;
    border-radius: 50%;
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    margin: 8px;
    box-sizing: border-box;
    border: 32px solid lightskyblue;
    border-color: lightskyblue transparent rgba(184, 183, 183, 0.6);
    animation: lds-hourglass 1.2s infinite;
  }
  @keyframes lds-hourglass {
    0% {
      transform: rotate(0);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
      transform: rotate(900deg);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
      transform: rotate(1800deg);
    }
  }

  /**
  * Global errors
  **/

  .global-errors {
    padding: 20% 25%;
    display: block;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(114, 113, 113, 0.6)
  }

  .global-errors.hidden {
    display: none;
}


.global-ok {
  padding: 20% 25%;
  display: block;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(114, 113, 113, 0.6)
}

.global-ok.hidden {
  display: none;
}


/* new order or login*/
.new-order {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

/* CENTRADO DE DATOS EN SELECTOR DE HORA Y MINUTO*/
.ph-center::-webkit-input-placeholder {
  text-align: center;
}

.titulo {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  }
  
  .stff{
    display: none;
  }
  
  .cstff1{
    display: none;
  }

  .staff1{
    display: none;
  }

  /**
  Color de textos
  **/
  SPAN.V /** Para casos en los que la VIGENCIA haya vencido **/
  {
  color: red;
  }
  
  SPAN.B /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
  color: red;
  }
  
  SPAN.O /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    color: green;
  }
  
  SPAN.D /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
  color: red;
  }
  
  SPAN.CANCELADO /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    color: white;
    background-color: red;
  }
  
  SPAN.FINALIZADO /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    color: white;
    background-color: green;
  }

  SPAN.ACTIVO /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    color: green;
  }

  SPAN.INHABILITADO /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    color: white;
    background-color: orangered;
  }

  SPAN.ba1 /** Para casos en la razón social no se ha validado y no se presenta la opción de **/
  {
    display: none;
  }
  
  SPAN.rs /** Para casos en la razón social no se ha validado **/
  {
  color: red;
  }
    
  SPAN.offline-3 /** Para casos en la razón social no se ha validado **/
  {
  color:white;
  background-color: green;
  padding: 4px;
  border-radius: 4px;
  font-weight: bold;
  }
  
  SPAN.offline-6 /** Para casos en la razón social no se ha validado **/
  {
  color:white;
  background-color: green;
  padding: 4px;
  border-radius: 4px;
  font-weight: bold;
  }
  
  SPAN.offline-9 /** Para casos en la razón social no se ha validado **/
  {
  color:white;
  background-color: green;
  padding: 4px;
  border-radius: 4px;
  font-weight: bold;
  }
  
  SPAN.offline-12 /** Para casos en la razón social no se ha validado **/
  {
  color: white;
  background-color: orange;
  padding: 4px;
  border-radius: 4px;
  font-weight: bold;
  }

  SPAN.online /** Para casos en la razón social no se ha validado **/
  {
  color:white;
  background-color: green;
  padding: 4px;
  border-radius: 4px;
  font-weight: bold;
  }
  
  SPAN.offline /** Para casos en la razón social no se ha validado **/
  {
  color: white;
  background-color: red;
  padding: 4px;
  border-radius: 4px;
  font-weight: bold;
  }

  SPAN.od_s /** Para casos en la razón social no se ha validado y no se presenta la opción de **/
  {
    display: none;
  }

  SPAN.ionline /** Para casos en la razón social no se ha validado y no se presenta la opción de **/
  {
    display: none;
  }

  SPAN.z /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }
  
  SPAN.D-D /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }
  
  SPAN.SUSS /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  } 

  SPAN.MARK0 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  } 

  SPAN.REA /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  } 

  SPAN.PSD /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }

  SPAN.edit1 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }

  SPAN.modem1 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }

  SPAN.modem4 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }

  SPAN.modem5 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }

  SPAN.w0 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: inline-block;
  }

  SPAN.w44 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: inline-block;
  }

  SPAN.w55 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: inline-block;
  }

  SPAN.line1 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }

  SPAN.line5 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }

  SPAN.y0 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: inline-block;
  }

  SPAN.y55 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: inline-block;
  }

  div.used1 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    background-color: rgba(144, 202, 250, 0.668);
  }

  SPAN.used1 /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }

  span.act /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }

  span.activoA /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: inline-block;
  }

  span.inactivoB /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: inline-block;
  }

  a.btninhmp /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: none;
  }

  a.ACTIVO /** Para casos en los que el registro sea suspendido por algún usuario **/
  {
    display: inline-block;
  }
 
 a.report
 {
  color: white;
  text-decoration: none;
 }



  /**
  * Ventana emergente
  **/
  
  .tabla-inputs {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 50px;
    padding-bottom: 20px;
  }
  
  #izquierda { width: 30%; }
  #centro { width: 50%; }
  #derecha { width: 20%; }

  #izquierda2 { width: 50%; }
  #centro2 { width: 30%; }
  #derecha2 { width: 20%; }
  
  #izquierda3 { width: 50%; }
  #derecha3 { width: 50%; }

  #izquierda4 { width: 33%; }
  #centroizquierda4 { width: 33%; }
  #derecha4 { width: 33%; }

  #centro5 { width: 90%; }

  #izquierda6 { width: 40%; }
  #centroIzq6 { width: 20%; }
  #centroDer6 { width: 20%; }
  #derecha6 { width: 20%; }

  #izquierda7 { width: 40%; }
  #centro7 { width: 40%; }
  #derecha7 { width: 20%; }

  #izquierda8 { width: 25%; }
  #centroIzq8 { width: 30%; }
  #centroDer8 { width: 22.5%; }
  #derecha8 { width: 22.5%; }


  #izquierda9 { width: 24%; }
  #centroIzq9 { width: 14%; }
  #centro91 { width: 10%; }
  #centro { width: 13%;}
  #centro92 { width: 13%; }
  #centroDer9 { width: 13%; }
  #derecha9 { width: 13%; }

  #izquierda10 { width: 29%; }
  #centroIzq10 { width: 20%; }
  #centro101 { width: 13%; }
  #centro102 { width: 13%; }
  #centroDer10 { width: 13%; }
  #derecha10 { width: 13%; }
  
  #izq2 { width: 75%; }
  #der2 { width: 25%; }

  #izquierda11 { width: 40%; }
  #centroIzq11 { width: 20%; }
  #centro11 { width: 15%; }
  #centroDer11 { width: 10%; }
  #derecha11 { width: 5%; }
  

  #tablegroup {
    border-collapse: separate;
    border-spacing: 0;
  }

  select {
    width: 230px;
  }
  
  
  .overlay {
    background: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    visibility: hidden;
  }
  
   .overlay.active {
    visibility: visible;
  }
  
  .popup {
    background: #f8f8f8;
    box-shadow: 0px, 0px, 5px, 0px rgba(0,0,0,0.3);
    border-radius: 3px;
    padding: 20px;
    text-align: center;
    width: 900px;
    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
  }
  
  .popup .btn-close {
    text-align: right;
    display:grid;
    color: #BBBBBBBB;
    transition: .3s ease all;
  }
  
   .popup .btn-close:hover {
    color:black
  }
  
  .popup h4 {
    font-size: 28px;
    font-weight: 300px;
    margin-bottom: 10px;
    opacity: 0;
  }
  
  .popup h3 {
    font-size: 22px;
    font-weight: 300px;
    margin-bottom: 10px;
    opacity: 0;
  }
  
  .popup h2 {
    font-size: 18px;
    font-weight: 300px;
    margin-bottom: 10px;
    opacity: 0;
  }
  
  .popup form .contenedor-inputs {
    opacity: 0;
  }
  
  .popup form .contenedor-inputs input {
    width: 100%;
    margin-bottom: 20px;
    height: 52px;
    font-size: 18px;
    line-height: 52px;
    text-align: center;
    border: 1px solid #BBBBBB;
  }

  .layoutcreateform {
    width: 750px;
    height: 550px;
    /* align-content: center; */
  
    display: grid;
    grid:
    "account account razon razon rfc rfc" 60px
    "region region plataform plataform plan plan" 60px
    "user user pass pass plan plan" 60px
    "prod prod leader leader plan plan" 60px
    "email email phone1 phone1 phone2 phone2" 60px
    "address address address address address address" 60px
    "comment comment comment comment comment comment" 60px
    "notes notes notes notes notes notes" 60px
    / 1fr 2fr 1fr 1fr 1fr 1fr;
    gap: 6px;
  }
  
  .account { grid-area: account; }
  .razon { grid-area: razon; }
  .rfc { grid-area: rfc; }
  .region { grid-area: region; }
  .plataform { grid-area: plataform; }
  .plan { grid-area: plan; }
  .prod { grid-area: prod; }
  .user { grid-area: user; }
  .pass { grid-area: pass; }
  .leader { grid-area: leader; }
  .phone1 { grid-area: phone1; }
  .phone2 { grid-area: phone2; }
  .email { grid-area: email; }
  .comment { grid-area: comment; }
  .address { grid-area: address; }
  .notes { grid-area: notes; }
  
  .layoutplanes {
    width: 250px;
    height: 176px;
    border: 1px solid #ccc;
    border-radius: 5px;

    display: grid;
    grid-template-rows: repeat(8, 15px);
    grid-template-columns: 90px 15px 90px 15px;
    gap: 8px;
  /*  justify-items: center;  Alineación horizontal al centro */
  /*  align-items: center;  Alineación vertical al centro */
  }
  
.txtplanes {
  font-size: 11px;
  text-align: right;
}

.txtcheck {
  font-size: 12px;
  text-align: center;
}

/** 
alineación general
**/

.alineacion-justificada {
  text-align: justify;
  }
  
  /* ------------------------- */
  /* ANIMACIONES */
  /* ------------------------- */
  .popup.active {transform: scale(1); opacity: 1; }
  .popup.active h4 { animation: entradaTitulo .8s ease .5s forwards; }
  .popup.active h3 { animation: entradaSubtitulo .8s ease .5s forwards; }
  .popup.active h2 { animation: entradaSubtitulo .8s ease .5s forwards; }
  .popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
  
  @keyframes entradaTitulo {
  from {
    opacity: 0;
    transform: translateY(-25px);
  }
  
  to {
    transform: translateY(0);
    opacity: 1;
  }
  }
  
  @keyframes entradaSubtitulo {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  
  to {
    transform: translateY(0);
    opacity: 1;
  }
  }
  
  @keyframes entradaInputs {
  from { opacity: 0; }
  to { opacity: 1; }
  }
  
  /*
  ******************
  */
  
  .overlay2 {
    background: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    visibility: hidden;
  }
  
   .overlay2.active {
    visibility: visible;
  }
  
  .popup2 {
    background: #f8f8f8;
    box-shadow: 0px, 0px, 5px, 0px rgba(0,0,0,0.3);
    border-radius: 3px;
    padding: 20px;
    text-align: center;
    width: 600px;
    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
  }
  
  .popup2 .btn-close2 {
    text-align: right;
    display:grid;
    color: #BBBBBBBB;
    transition: .3s ease all;
  }
  
   .popup2 .btn-close2:hover {
    color:black
  }

  /*
  ******************
  */
  
  .overlay3 {
    background: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    visibility: hidden;
  }
  
   .overlay3.active {
    visibility: visible;
  }
  
  .popup3 {
    background: #f8f8f8;
    box-shadow: 0px, 0px, 5px, 0px rgba(0,0,0,0.3);
    border-radius: 3px;
    padding: 20px;
    text-align: center;
    width: 600px;
    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
  }
  
  .popup3 .btn-close3 {
    text-align: right;
    display:grid;
    color: #BBBBBBBB;
    transition: .3s ease all;
  }
  
   .popup3 .btn-close3:hover {
    color:black
  }


  /*
  ******************
  */
  
  .overlay4 {
    background: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    visibility: hidden;
  }
  
   .overlay4.active {
    visibility: visible;
  }
  
  .popup4 {
    background: #f8f8f8;
    box-shadow: 0px, 0px, 5px, 0px rgba(0,0,0,0.3);
    border-radius: 3px;
    padding: 20px;
    text-align: center;
    width: 600px;
    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
  }
  
  .popup4 .btn-close3 {
    text-align: right;
    display:grid;
    color: #BBBBBBBB;
    transition: .3s ease all;
  }
  
   .popup4 .btn-close3:hover {
    color:black
  }
  
/* Botón flotante para regresar a la página anterior */
.btn-float {
  position: fixed;
  top: 70px;
  right: 10px;
  font-size: small;
  }
  
.btn-float2 {
  position: fixed;
  top: 70px;
  right: 120px;
  font-size: small;
  }
  
.btn-float3 {
  position: fixed;
  top: 70px;
  right: 245px;
  font-size: small;
  }

 
.btn-float4 {
  position: fixed;
  top: 70px;
  right: 25px;
  font-size: small;
  }

.nav-link-btnn {
  color: white;
  text-decoration:none;
  }
  
.nav-link-btnn:hover {
  color: gray;
  text-decoration:none;
  }

/** Para controlar los módulos que no tiene permiso de ver el usuario dentro del menú de Clientes. **/

.pms0 
{
  display: none;
}

.ctes0 
{
  display: none;
} 

.sos0
{
  display: none;
} 

.alt0
{
  display: none;
}

.twc0
{
  display: none;
}

.pfl0
{
  display: none;
}

.min0
{
  display: none;
}

.aproReac {
  font-size: 10px;
  font-weight: bold;
  background: #1fe575;
  color: #333333;
  border: 1px dashed #cccccc;
  border-radius: 5px;
  padding: 3px 5px;
  letter-spacing: 0px;
}

.aproReac:hover {
  background: #e5e5e5;
  color: #333333;
}

.aproSusp {
  font-size: 10px;
  font-weight: bold;
  background: orange;
  color: #333333;
  border: 1px dashed #cccccc;
  border-radius: 5px;
  padding: 3px 5px;
  letter-spacing: 0px;
}

.aproSusp:hover {
  background: #e5e5e5;
  color: #333333;
}

.aproCancel {
  font-size: 10px;
  font-weight: bold;
  background: orangered;
  color: #333333;
  border: 1px dashed #cccccc;
  border-radius: 5px;
  padding: 3px 5px;
  letter-spacing: 0px;
}

.aproCancel:hover {
  background: #e5e5e5;
  color: #333333;
}

.aproDisable
{
  cursor: not-allowed;
  background-color: rgb(229, 229, 229) !important;
  color:#989999;
  pointer-events:none;
}

/* Tabla de módulos. */
.p-3 {
  position: relative;
}

.image {
  position: absolute;
  top: 10;
  left: 50;
  width: 100px;
  height: 100px;
  z-index: 1;
}

.text {
  position: relative;
  z-index: 2;
}

.mp_subject {
  width:17%;
  max-width: 17%;
}

.mp_account {
  width:18%;
  max-width: 18%;
}

.mp_daysreport {
  width:5%;
  max-width: 5%;
}

.mp_mailto {
  max-width: 20%;
  width:20%;
  word-break: break-all;
}

.mp_wcopy {
  max-width: 20%;
  width:20%;
  word-break: break-all;
}

.mp_hcopy {
  max-width: 20%;
  width:20%;
  word-break: break-all;
}

.mp_action {
  width:5%;
  background-color:green;
  word-break: break-all;
}

.sum_lastfind {
  width:400px;
}

.sum_lastsend {
  width:250px;
}

.sum_toreport {
  width:250px;
}

.sum_cantreport {
  width:250px;
}

.sum_tosend {
  width:250px;
}

.sum_send {
  width:250px;
}

.bodyreport {
  align-self: center;
  width:800px;
}

.a_report {
  /* text-decoration: none; */
  color: red;
}

.a_report2 {
  /* text-decoration: none; */
  color: green;
}

.rmc {
  background-color: skyblue !important;
  color: orangered !important;
  font-weight: 600;
}

.layout_det {
  min-width: 1350px;
  max-width: 90%;
  height: 80px;
  margin: 0 auto;

  display: grid;
  grid:
    "reg rfc rs rs  rs  rs rs  rs   rs   rs   num     num     icc  icc    fa     fa   acc" 40px
    "reg im  im mar mod md cve cdes cdes cins insdesc insdesc cadd adddes adddes prep acc" 40px
  /  4%  8%  3% 6%  7%  9% 5%  6%   6%   5%   5%      5%      6%   8%     1%     8%  ;
  gap: 0px;
  border: 1px solid #3a64f9;
  background-color: #e9e9e9;
}

.reg { grid-area: reg; border: 1px solid #989999; align-content: center; text-align: center;}
.rfc { grid-area: rfc; border: 1px solid #989999; }
.rs { grid-area: rs; border: 1px solid #989999; }
.num { grid-area: num; border: 1px solid #989999; }
.icc { grid-area: icc; border: 1px solid #989999; }
.fa { grid-area: fa; border: 1px solid #989999; }
.acc { grid-area: acc; border: 1px solid #989999; }
.im { grid-area: im; border: 1px solid #989999; }
.mar { grid-area: mar; border: 1px solid #989999; }
.mod { grid-area: mod; border: 1px solid #989999; }
.md { grid-area: md; border: 1px solid #989999; }
.cve { grid-area: cve; border: 1px solid #989999; }
.cdes { grid-area: cdes; border: 1px solid #989999; }
.cins { grid-area: cins; border: 1px solid #989999; }
.cadd { grid-area: cadd; border: 1px solid #989999; }
.adddes { grid-area: adddes; border: 1px solid #989999; }
.prep { grid-area: prep; border: 1px solid #989999; }
.insdesc { grid-area: insdesc; border: 1px solid #989999; }

div.mitext { 
  text-align: center;
  line-height:.5em;
  word-wrap: break-word;
}

div.mitext2 { 
  text-align: left;
  line-height: .5em;
  word-wrap: break-word;
}

.read-only {
  -webkit-user-select: none;
  user-select: none; 
}

.reportmp {
  border: 2px solid blue;
}

.reportmp td{
  padding-top: 3px;
  padding-right: 5px;
  padding-bottom: 3px;
  padding-left: 5px;
  border: 1px solid black;
}

/* Asegúrate de que los estilos se apliquen correctamente */
.dataTables_wrapper .dt-buttons .btn-csv {
  background-color: #1D6F42; /* Color de fondo verde */
  color: white; 
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

.dataTables_wrapper .dt-buttons .btn-csv:hover {
  background-color: #155D32; /* Color de fondo verde más oscuro */
  color: white; /* Color del texto */
}

/* Asegúrate de que los estilos se apliquen correctamente */
.dataTables_wrapper .dt-buttons .btn-excel {
  background-color: #1D6F42; /* Color de fondo verde */
  color: white; 
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

/* Contenedor superior para centrar los elementos */
.dataTables_wrapper .top {
  display: flex;
  justify-content: space-between; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  gap: 10px; /* Espacio entre los elementos */
}

.dataTables_wrapper .dt-buttons .btn-excel:hover {
  background-color: #155D32; /* Color de fondo verde más oscuro */
  color: white; /* Color del texto */
}

/* Estilos personalizados para el botón de exportación a PDF */
.dataTables_wrapper .dt-buttons .btn-pdf {
  background-color: #D9534F; /* Color de fondo rojo */
  color: white; /* Color del texto */
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

.dataTables_wrapper .dt-buttons .btn-pdf:hover {
  background-color: #C9302C; /* Color de fondo rojo más oscuro */
  color: white; /* Color del texto */
}

.mi-div {
  border: 1px solid blue; /* Establece borde con grosor, estilo y color */
  /* O, alternativamente, puedes usar border-color por separado: */
  /* border-color: blue; */
  /* border-width: 2px; */
  /* border-style: solid; */
  /* width: 200px;
  height: 100px;
  padding: 20px; */
}

/* Navigation container */
.container-nav-tabs {
  width: 90%;
  text-align: center;
}

/* Table header centered */
.th-center {
  text-align: center;
}

/* Center text container */
.text-center-container {
  text-align: center;
}

/* Table header with center and vertical alignment */
.th-center-align {
  text-align: center;
  vertical-align: middle;
}

/* Card container with width */
.card-80rem {
  width: 80rem;
}

/* Card container with width */
.card-70rem {
  width: 70rem;
}

/* Center card body alignment */
.card-body-center {
  text-align: center;
}

/* Right-aligned text */
.text-right {
  text-align: right;
}