.home .tarjeta{

    height: 300px;
    border: 1px solid #c4c4c4;
    display: flex;
    justify-content: center;
    align-items: center;
  
  }

  .content-filtro{

    border: 1px solid #d4d4d4;
    border-radius: 10px;
    background: #f4f4f4;
    padding: 20px 20px;
    margin-bottom: 40px;

  }

  body{
    background: rgb(219,219,219);
    background: linear-gradient(180deg, rgba(219,219,219,1) 3%, rgba(219,219,219,1) 35%, rgba(201,201,201,1) 59%, rgba(201,201,201,1) 88%);
  }

  .btn{
    font-size: 12px;
  }

  .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 13px;
  }

  input,select{
    font-size: 14px !important;
  }

  .content-filtro .btn-info{
    font-style: italic !important;
    padding: 5px !important;
    font-size: 12px !important;
}

  table{
    font-size: 14px;
  }

  .table-bordered td, .table-bordered th {
    border: 1px solid #dee2e6;
    padding: 4px;
    font-size: 12px;
  }

  .titulo-app{
    text-align: center;
    color:#222;
    font-size: 1.2em;
  }

  #cabecera{
    background: #fff;
  }

  h5{
    font-weight: 600;
    color: #222;
  }

  .container-fluid,.container{
    padding-top: 20px;
  }

  ul {
    margin-bottom: 0px;
  }

  #cajas-vacias-home {
    padding-top: 30px;
  }

  #cajas-vacias-home .tarjeta{

    height: 300px;
    border: 1px solid #c4c4c4;
    display: flex;
    justify-content: center;
    align-items: center;
  
  }
  
  .cuerpo{
    min-height: 80vh;
 /* margin-bottom: 20px; */
    background: #ffffff;
  }
  
  label{
    font-weight: 600;
  }

  a {
    
    text-decoration: none;
    color: #111;

  }

  a:hover {
    
    text-decoration: none;
    color: #111;

  }
  
  .menu{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .menu .tarjeta{
  
    height: 300px;
    border: 1px solid #c4c4c4;
    display: flex;
    justify-content: center;
    align-items: center;
  
  }
  
  .menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  .menu li {
    float: left;
    list-style: none;
  }
  
  .menu li a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 600px;
    border: 1px solid #02b287
  }

  .menu li a:hover {

    display: block;
    padding: 8px;
    text-decoration: none;
    color: #222222;
    font-weight: 600px;
    background: #ffffff;
    border: 1px solid #00a27e;
    border-radius: 4px;
    
  }

  .marca-agua {

    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 20px;
    color: rgba(0, 0, 0, 0.1); /* Color de la marca de agua */
    opacity: 0.5; /* Opacidad de la marca de agua */
 
  }
  
  /* Estilo personalizado para el campo de entrada */
  #fecha_gasto {
    background-color: white; /* Cambiar el color de fondo a blanco */
    color: black; /* Cambiar el color del texto a negro */
  }

  .form-control:disabled, .form-control[readonly] {
    background-color: #fff;
    opacity: 1;
  }

  .cliente-seleccionado{
    margin-top: 20px;
    font-size: 14px;
    font-style: italic;
  }

  .page-template-page-cajas-vacias-cargar input[type="checkbox"], input[type="radio"] {
    opacity: 0;
  }

  #check-producto-0{
    opacity: 0;
  }

  .botones-footer{
    height: 100px;
    margin-bottom: 60px;
  }
  
  .menu-header{

    background: rgb(4,185,135);
    background: linear-gradient(90deg, rgba(4,185,135,1) 3%, rgba(4,185,135,1) 35%, rgba(0,167,134,1) 59%, rgba(0,152,110,1) 88%);
   
  }

  .tarjetaa{

    background: rgb(219,219,219);
    background: linear-gradient(180deg, rgba(219,219,219,1) 3%, rgba(219,219,219,1) 35%, rgba(201,201,201,1) 59%, rgba(201,201,201,1) 88%); 

  }

  .tarjetaa {
   
    overflow: hidden; /* Ocultar el contenido que se desborda */
    border: 1px solid #ccc;
    padding: 0;
    border-radius: 40px;
    width: 382px;
    height: 295px;
    background: #f4f4f4;

  }
  
  .imagen {

    width: 100%;
    height: 100%;
    /*background-image: url('https://pad.apps-megalabs.com/wp-content/themes/twentyten/img/card.jpg');*/
    background-size: cover; /* Escalar la imagen para que llene el contenedor */
    transition: transform 0.3s ease; /* Transición suave */ 

  }

  .tarjeta:hover a .imagen {
    transform: scale(1.1); /* Aumentar el tamaño de la imagen al pasar el mouse */
  }

  .tarjeta-menu{

    display: block;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #c9c9c9;
    border-radius: 8px;
    width: 420px;
    padding: 20px 0px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: transform 0.3s ease;
    background: #ffffff;
    box-shadow: 0 3px 30px #c4c4c4;

  }

  .select2-results {
    display: block;
    font-size: 13px;
  }

  #footter{
    background: linear-gradient(90deg, rgba(4,185,135,1) 3%, rgba(4,185,135,1) 35%, rgba(0,167,134,1) 59%, rgba(0,152,110,1) 88%);
    color: #fff;
  }

  .tarjeta-menu:hover{

    /* background: #00986E; */
    background: rgb(4,185,135);
    background: linear-gradient(180deg, rgba(4,185,135,1) 3%, rgba(4,185,135,1) 43%, rgba(0,167,134,1) 69%, rgba(0,152,110,1) 88%);
    color: #ffffff;
    border: 1px solid #fff;
  
  }

  .tarjeta-menu:hover .imagen-standard{
    background-image: url('https://pad.apps-megalabs.com/wp-content/themes/twentyten/img/fondo-tarjeta-standard.png');
    border-top: 0px solid #ffffff;
    border-bottom: 0px solid #ffffff; 
  }

  .imagen-standard{

    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, rgba(4,185,135,1) 3%, rgba(4,185,135,1) 35%, rgba(0,167,134,1) 59%, rgba(0,152,110,1) 88%);
    background-image: url('https://pad.apps-megalabs.com/wp-content/themes/twentyten/img/fondo-tarjeta-standard-verde.png');
    background-repeat: no-repeat;
    background-size: contain; /* Escalar la imagen para que llene el contenedor */
    background-position: center center;
    transition: transform 0.3s ease; /* Transición suave */ 
    margin-top: 10px;
    margin-bottom: 20px;
    border-top: 4px solid #00a17c;
    border-bottom: 4px solid #00a17c; 

  }

  .imagen-standard:hover{
    background-image: url('https://pad.apps-megalabs.com/wp-content/themes/twentyten/img/fondo-tarjeta-standard.png');
    border-top: 0px solid #ffffff;
    border-bottom: 0px solid #ffffff; 
  }

  .imagen-inicio{

    width: 100%;
    height: 200px;
    background-image: url('https://pad.apps-megalabs.com/wp-content/themes/twentyten/img/cajas_de_medicamentos.jpg');
    background-size: cover; /* Escalar la imagen para que llene el contenedor */
    transition: transform 0.3s ease; /* Transición suave */ 
    margin-top: 10px;
    margin-bottom: 20px;
    border-top: 4px solid #00a17c;
    border-bottom: 4px solid #00a17c;

  }

  .imagen-medicos-bricks{

    width: 100%;
    height: 200px;
    background-image: url('https://pad.apps-megalabs.com/wp-content/themes/twentyten/img/icono-medicos-bricks2.jpg');
    background-size: cover;
    transition: transform 0.3s ease;
    margin-top: 10px;
    margin-bottom: 20px;
    border-top: 4px solid #00a17c;
    border-bottom: 4px solid #00a17c;
    background-repeat: no-repeat;
    background-position: center;

  }

  .imagen-cargar{

    width: 100%;
    height: 200px;
    background-image: url('https://pad.apps-megalabs.com/wp-content/themes/twentyten/img/card-cajas-vacias-cargar.jpg');
    background-size: cover;
    transition: transform 0.3s ease;
    margin-top: 10px;
    margin-bottom: 20px;
    border-top: 4px solid #00a17c;
    border-bottom: 4px solid #00a17c;
    background-repeat: no-repeat;
    background-position: center;

  }

  .imagen-consultas{

    width: 100%;
    height: 200px;
    background-image: url('https://pad.apps-megalabs.com/wp-content/themes/twentyten/img/cajas_consultas.jpg');
    background-size: cover; /* Escalar la imagen para que llene el contenedor */
    transition: transform 0.3s ease; /* Transición suave */ 
    margin-top: 10px;
    margin-bottom: 20px;
    border-top: 4px solid #00a17c;
    border-bottom: 4px solid #00a17c;

  }

  .imagen-reportes{

    width: 100%;
    height: 200px;
    background-image: url('https://pad.apps-megalabs.com/wp-content/themes/twentyten/img/cajas_reportes.jpg');
    background-size: cover; /* Escalar la imagen para que llene el contenedor */
    transition: transform 0.3s ease; /* Transición suave */ 
    margin-top: 10px;
    margin-bottom: 20px;
    border-top: 4px solid #00a17c;
    border-bottom: 4px solid #00a17c;

  }

  .imagen-reportes-clientes{

    width: 100%;
    height: 200px;
    background-image: url('https://pad.apps-megalabs.com/wp-content/themes/twentyten/img/imagen-reporte-clientes.jpg');
    background-size: cover; /* Escalar la imagen para que llene el contenedor */
    transition: transform 0.3s ease; /* Transición suave */ 
    margin-top: 10px;
    margin-bottom: 20px;
    border-top: 4px solid #00a17c;
    border-bottom: 4px solid #00a17c;

  }

  .titulo-tarjetas{
    font-weight: 600;
  }


  .tarjeta-menu img {
    transition: transform 0.3s ease;
  }
  
  .tarjeta-menu:hover img {
    transform: scale(1.2); 
  }

  .tarjeta-menu:hover .btn-dark {
    background: #ffffff;
    color: #222;
    border: 1px solid #ffffff;
  }

  .select2-container--default .select2-selection--single{
    height: 35px;
  }

  .mt20px{
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* pruebas ccs */

  .animated-box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: moveBox;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .btn-primary {
    color: #fff;
    background-color: #00986e;
    border-color: #058c67;
  }

  .btn-primary:hover {
    color: #fff;
    background-color: #057959;
    border-color: #057959;
  }
  
  @keyframes moveBox {
    0% {
      left: 0;
    }
    50% {
      left: 200px;
      background-color: blue;
    }
    100% {
      left: 0;
      background-color: red;
    }
  }

  .tarje{

    border: 1px solid #999999;
    border-radius: 20px;
    text-align: center;

  }

  .tarje img{

    width: 100px;
    
  }

  .elemento {
    
    width: 90%;
    transition: transform 0.3s ease; /* Transición suave en la propiedad transform */
    text-align: center;

  }
  
  .elemento:hover {
    transform: scale(1.1); /* Escala aumentada en el hover */
  }

  /* pruebas ccs */


  .mr_cero{
    margin-right: 0px;
  }

  .ml_cero{
    margin-left: 0px;
  }

  .titulo-seccion{

    margin-bottom: 30px;
    text-align: center;
    padding: 2% 5% 1% 5%;
    
  }

  .info-usuario p{
    margin-bottom: 0px;
  }

  .icono-kardex:hover{
    transform: scale(1.1); 
  }

  a.enlace-tarjeta{
    text-decoration: none;
    color:#111;
  }
  
  a.enlace-tarjeta:visited{
    text-decoration: none
  }

  a.enlace-tarjeta:hover{
    text-decoration: none;
    /*color:#111;*/
    font-weight: 600;
  }

  a.enlace-tarjeta:hover .titulo-tarjetas {
    text-decoration: none;
    color:#fff;
    font-weight: 600;
  }

  @media only screen and (max-width: 600px) {

    .titulo-seccion p{

        font-size: 0.9em;
        text-align: justify;

    }

    .titulo-seccion h3{

        font-size: 0.9em;
        font-weight: bold;
        margin-bottom: 20px;

    }

    .titulo-seccion h5{
        
        font-size: 0.9em;
        font-weight: bold;
        margin-bottom: 20px;

    }

    .tarjeta-menu{
      width: 100%;
    }

    .titulo-tarjetas {
      font-weight: 600;
      font-size: 12px;
    }

    .titulo-app {
        text-align: center;
        color: #222;
        font-size: 1em;
        margin-bottom: 20px;
    }

    .marca-agua {
      
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-25deg);
        font-size: 20px;
        color: rgba(0, 0, 0, 0.1);
        opacity: 0.5;
    }

    #inicio .btn{
        margin-bottom: 0px;
    }

    #inicio #filtrar-select-clientes,
    .page-template-page-cajas-vacias-home #filtrar-select-clientes
    {
        margin-top: 0px;
    }

    #filtrar-select-clientes,
    .page-template-page-cajas-vacias-home .btn{
        margin-top: 20px;
    }

    .btn{
        margin-bottom: 20px;
    }

  }

  .testtest{
    font-size: 1px;
  }

  @media only screen and (max-width: 1200px) {

    .tarjeta-menu{
      width: 100%;
    }

    .titulo-tarjetas {
      font-weight: 600;
      font-size: 14px;
    }

  }


  @media print {
    /* Estilos específicos para la impresión */
    th {
      background-color: black; /* Fondo blanco */
      color: white; /* Texto negro */
      font-size: 12pt; /* Tamaño de fuente */
      /* Agrega más estilos de impresión según sea necesario */
    }
    
    /* Oculta elementos que no quieres imprimir */
    .no-print {
      display: none;
    }

  }