.modal-registro {
    user-select: none;
    position: fixed;
    display: flex;
    background-color: rgba(0,0,0,0.7);
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
}


.cotenedor-registro {
    display: block;
    background-color: var(--card);
    width: 650px;
    height: 90vh;
    border-radius: 5px;

}

.head-modal {
    width: 100%;
    height: 35px;
    border-bottom: 1px solid var(--bordes);
}



/* Estilos para tab--------------------------------------------------------------------------------------------------------------*/

.tab-box {
    width: 650px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    margin: 0px;
    background: #EFF4FB;
}


.tab-box .tab-button {
    background: none;
    font-weight: 400;
    color: var(--texto-azul);
    cursor: pointer;
    padding: 10px;
    flex: 1; 
    text-align: center; 
    transition: background-color 0.3s ease; /* Transición para un cambio de color suave */
}


.tab-button.active {
 /* Cambia el fondo cuando el botón está activo */
    color: var(--texto-azul); /* Cambia el color del texto cuando está activo */
    border: none; /* Evita bordes adicionales si se añaden al activar */
}


.tab-button i {
    font-size: 30px;   /* Cambiar tamaño del icono */
    color: var(--azul);        /* Cambiar color */
    margin: 0; /* Espacio entre el icono y el texto */
    stroke-width: 2px; 
    padding: 0px;
}


/* Cambio de estilo cuando el cursor pasa sobre .tab-button */
.tab-button:hover {
    background-color: var(--azul); /* Fondo azul */
    color: var(--card); /* Color de texto blanco */
}

/* Efecto hover para el ícono dentro de .tab-button */
.tab-button:hover i {
    color: var(--card); /* Cambiar color del ícono al pasar el ratón */
}

/* Opcional: Agregar un efecto de cambio en el texto (p) dentro de .tab-button */
.tab-button:hover p {
    font-weight: bold; /* Hacer el texto en negrita */
    color: var(--card); /* Color de texto blanco */

}

.tab-button p {
    font-size: 12px;   /* Cambiar tamaño del icono */
    color: var(--texto-azul);        /* Cambiar color */
    margin: 0; /* Espacio entre el icono y el texto */
    stroke-width: 2px; 
    
}
  

.line {
    position: absolute;
    top:65px;
    left: 0px;
    width: 130px;
    height: 5px;
    background-color: var(--azul);
    border-radius: 10px;
    transition: all .3s ease-in-out;
}

/*Contenido central ---------------------------------------------------------------------------------*/

.contenido-modal {
    height: 80vh;
    

}

.tabs-content{
    padding: 0px 20px 5px 20px;
    width: 100%; /* Define el ancho del div */
    height: 70vh; /* Define la altura máxima del div */
    overflow-y: auto; /* Permite el scroll vertical cuando el contenido excede la altura */
    overflow-x: hidden; /* Oculta el scroll horizontal (opcional) */
    border: 1px solid #ccc; /* Añade un borde para identificar el área */
    box-sizing: border-box; /* Asegura que padding y borde no excedan el ancho/alto */
    background-color: var(--card); /* Color de fondo opcional */
    
}

.tabs-content .tab-panel.active {
    display: block;

}

.tabs-content h3{
    font-weight: 600;
    font-size: 14px;
    padding: 10px 0 20px 0px;
    border-bottom: 1px solid var(--bordes);
    
}

.tabs-content p{
    font-weight: 400;
    font-size: 12px;
    margin-bottom: 20px;
    color: #646464;
    
}

.tabs-content label{
    color: #000;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 7px;

}

.tabs-content .tab-panel{
    display: none;
}


.input-doble {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.form-label {
    display: block;
    font-size: 10px;
    margin-bottom: 1px;
    color: #333;
    font-weight: bold;
    margin: 0;
    padding: 0;

}

.doble{
    width: 100%;
    margin-bottom: 20px;

}

.input-text{
    font-family: 'Satoshi', sans-serif;
    border-radius: 5px;
    border: 1px solid var(--bordes);
    width: 100%;
    height: 40px;
    padding: 1px 10px;
    margin: 0;
    outline: none;
    box-sizing: border-box;
    color: var(--Color-texto-2);
}

input::placeholder {
    color: var(--Color-placeholder); 
    font-size: 13.5px;

}

select option:disabled {
    color: var(--Color-placeholder);
}

.input-text:focus{
    border-color: var(--Color-hover-input); 
}

.form-control {
    width: 100%; /* Ocupa todo el espacio disponible */
    padding: 10px;
    height: 35px;
    margin: 0px;
    border: 1px solid var(--Color-BorderInput);
    border-radius: 5px;
    font-size: 13px;
    background-color: #f9f9f9;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
}


.contenedor-triple {
    display: flex;
    flex-direction: column; /* Por defecto en pantallas pequeñas */
    gap: 10px; /* Espacio entre las filas o columnas */
}

.input-tripe {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten si no caben en una línea */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    align-items: flex-start; /* Alinea los elementos al inicio */
    gap: 10px; /* Espacio entre los elementos */
}

.input-tripe > div {
    flex: 1; /* Todos los elementos ocupan el mismo ancho disponible */
    min-width: 180px; /* Define un ancho mínimo para evitar que se encojan demasiado */
}

.form-label {
    display: block; /* Asegura que las etiquetas estén sobre los inputs */
    margin-bottom: 5px; /* Espacio entre la etiqueta y el campo */
    font-weight: bold; /* Hace las etiquetas más visibles */
}

.input-date,
.form-control {
    width: 100%; /* Ocupa todo el ancho del contenedor padre */
    padding: 8px; /* Espacio interno */
    border: 1px solid var(--bordes); /* Borde gris */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 14px; /* Tamaño de texto */
    box-sizing: border-box; /* Incluye padding y borde dentro del ancho total */
    outline: none;
    color: #000;
    background-color: var(--card);
}   

.input-date{
    color: var(--Color-placeholder);
    
}


.input-date:focus {
    border-color: var(--azul); 
    
}

/* Asegura que el diseño sea responsivo */
@media (max-width: 768px) {
    .input-tripe {
        flex-direction: column; /* Cambia a disposición vertical en pantallas pequeñas */
    }
}


/* Elimina los botones de incremento y decremento en los navegadores */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Elimina los botones en navegadores WebKit (Chrome, Safari) */
    margin: 0; /* Elimina márgenes */
    color:#616161;
}



.valor {
    border: none;
    height: 30px;
    margin: 0px 5px;
    text-align: end;
    color: #8a8989;
    font-weight: bold;
    width: 100%;
    font-size: 14px;
}

.valor::placeholder {
    color: var(--Color-placeholder);      
    font-size: 14px;   
    opacity: 0.8;    
    font-weight: 400;
}



.valor:focus{
    outline: none;



}

.input-moneda {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 35px;
    border: 1px solid var(--bordes);
    box-sizing: border-box;
    padding: 0px 10px;
    align-items: center;
    color: var(--gris);
    background-color: var(--card);
    border-radius: 5px;

}

.col {

    width: 100%;

}


.fila-doble {

    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    width: 100%;
    margin: 0;
    padding: 0;
    gap: 10px;

}


.contenedor-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
}





/* Efecto al hacer foco (focus) en el select */
.form-control:focus {
    border-color: var(--azul); 
    
}

/* Estilo para los select cuando son deshabilitados */
.form-control:disabled {
    background-color: var(--card);
    border-color: #ddd;
}

.input-multitex {
    width: 100%; 
    padding: 10px; 
    border: 1px solid var(--bordes); 
    border-radius: 5px; 
    font-size: 14px; 
    background-color: var(--card); 
    box-sizing: border-box; 
    outline: none; 
    color: var(--Color-texto-2);
    font-family: 'Satoshi', sans-serif;
}

/* Efecto cuando el textarea está en foco */
.input-multitex:focus {
    border-color: var(--Color-hover-input);

    
}

.input-multitex::placeholder{
    font-size: 14px;
    color:var(--Color-placeholder);
}





/*Contenido pie de modal ---------------------------------------------------------------------------------*/

.pie-modal {
    display: flex;
    align-items: center;
    padding: 0px 10px;
    height: 10vh; 
    min-height: 10vh;
}


.botones-accion {
    width: 100%;
    gap: 10px;
    display: flex;
    justify-content:flex-end;
    align-items: center;
}


.boton-cancelar {
    height: 35px;
    padding: 0px 15px;
    border: 1px solid var(--bordes);
    background-color: var(--card);
    border-radius: 3px;
}


.boton-cancelar:hover {
    cursor: pointer;
    box-shadow: 0px 0px 3px 0.2px rgba(0,0,0,0.1);
}


.boton-guardar {
    height: 35px;
    border-radius: 3px;
    padding: 0px 15px;
    border: none;
    background-color: var(--azul-boton);
    color: var(--card);
}


.boton-guardar:hover {
    cursor: pointer;
    background-color: var(--azul);
}


/* Elementos tipo select*/


.ts-wrapper {

    font-size: 14px;
}


/* Elementos seleccionados en rojo */
.ts-control .item {
    background-color: var(--azul) !important;
    color: var(--card) !important;
    border-radius: 1px;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Satoshi', sans-serif !important;
    border-radius: 3px;
}


/* ----------------------------------------------------------------------------------------------------*/
/* Parte de codigo que aplica estilos a las listas desplegables usadas para cargar las imagenes y kmz*/
/* ----------------------------------------------------------------------------------------------------*/
.contendedor-input {
    display: flex;
    align-items: center;
    justify-content:space-between;
    width: 100%;
    gap: 5px;
}

.dropdown {
    min-width: 150px;
    position: relative;
    width: 100%;
}

.dropdown * {
    box-sizing: border-box;
}

.select {
    font-family: 'Satoshi', sans-serif;
    background: var(--Color-cards);
    color: var(--Color-texto-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--bordes);
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
}

.select-clicked {
    box-shadow: 0 0 0.8em var(--Color-boton);
}

.select:hover {
    background: var(--Color-hover-input);
    color: var(--Color-cards);
}

.caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--Color-textoNegro);
    transition: 0.3s;
}

.caret-rotate {
    transform: rotate(180deg);
}

.menu {
    list-style: none;
    padding: 0.2em 0.5em;
    background: var(--color-fondoApp);
    border: 1px solid var(--Color-BorderInput);
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
    border-radius: 0.5em;
    color: var(--Color-parrafo);
    position: absolute;
    top: 28px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    opacity: 0;
    display: none;
    transition: 0.2s;
    z-index: 1;
}

.menu li {
    font-size: 14px;
    padding: 0.7em 0.5em;
    margin: 0.3em 0;
    border-radius: 0.5em;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

.menu li:hover {
    background: var(--Color-hover-input);
    color: var(--Color-cards);
}

.activa {
    background: #dadada;
    color: var(--Color-texto-2);
}

.menu-open {
    display: block;
    opacity: 1;
}

.selected{
    font-size: 14px;
}

/* ----------------------------------------------------------------------------------------------------*/
/* Parte de codigo que aplica estilos input que carga imagenes o kmz*/
/* ----------------------------------------------------------------------------------------------------*/
.contenedor-inputFile {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    margin: 10px 0;
    padding: 0px;
    width: 100%;
}

.oculto {
    display: none;
}

.boton {
    display: flex;
    align-items: center; 
    justify-content:center;
    align-items: center;
    background-color: #F5F7FD;
    color: black;
    padding: 10px 15px;
    border-radius: 5px 0 0 5px;
    border: 1px solid var(--bordes);
    cursor: pointer;
    transition: background 0.5s;
    font-size: 14px;
    height: 20px; 
    width: 100%;
    max-width: 100px; 
    min-width: 100px; 

}

.boton:hover {
    background-color: #e0e4f1;
}

.texto {
    display: flex;
    align-items: center; 
    justify-content:start;
    width: 100%;
    font-size: 12px;
    padding: 10px;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;    
    border-top: 1px solid var(--bordes);
    border-bottom: 1px solid var(--bordes);
    border-right: 1px solid var(--bordes);
    border-radius: 0 5px 5px 0; 
    height: 20px;
}

.add {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--bordes);
    background: transparent;
    width: 100%;
    margin-left: 10px;
    width: 80px;
    height: 40px;
    border-radius: 5px;

}

.add i {
    font-size: 20px;
    color: var(--Color-boton);
    transition: color 0.5s ease;  
}

.add:hover i {
    color: white; /* Cambia el color del icono a blanco */
    font-size: 23px;
}

.add:hover{
    background-color:  var(--Color-boton);
}

/* ----------------------------------------------------------------------------------------------------*/
/* Parte de codigo que aplica estilos a la tabla donde se cargan los archivos tipo imagen o kmz
/* ----------------------------------------------------------------------------------------------------*/
/* Contenedor de la tabla */
.contenedor-load {
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Estilo para la tabla */
.tabla-adjuntos {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-family: 'Satoshi', sans-serif;
}

/* Estilo para las celdas de encabezado */
.tabla-adjuntos th {
    background-color: var(--azul);
    color: white;
    text-align: center;
    padding: 12px 15px;
    border-bottom: 2px solid #ddd;
    font-weight: 500;
    font-size: 12px;
}

/* Estilo para las celdas de la tabla */
.tabla-adjuntos td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    text-align: center;
    vertical-align: middle;
}

/* Estilo para las filas de la tabla al pasar el mouse */
.tabla-adjuntos tr:hover {
    background-color: #f1f1f1;
}

/* Estilo para las celdas vacías en la última columna */
.tabla-adjuntos td:last-child {
    text-align: center;
}

/* Estilo para los botones de Ver y Eliminar */
.tabla-adjuntos .btn {
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    border: none;
}




/* Estilo específico para el botón "Ver" */
.tabla-adjuntos .btn-ver {
    color: white;
}

/* Estilo específico para el botón "Eliminar" */
.tabla-adjuntos .btn-eliminar {
    color: white;
}

/* Cambios al pasar el mouse sobre los botones */
.tabla-adjuntos .btn:hover {
    opacity: 0.8;
}

/* Estilo para las filas sin datos */
.tabla-adjuntos td.empty {
    text-align: center;
    color: #ccc;
}



/* Estilo general para los botones */
.icono-eliminar, .icono-ver {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    margin: 0;
    transition: color 0.3s ease-in-out, transform 0.2s;
}

/* Botón "Eliminar" */
.icono-eliminar i {
    color: red;
    font-size: 20px;
    
}
.icono-eliminar:hover i {
    color: darkred;
    transform: scale(1.2);
}

/* Botón "Ver" */
.icono-ver i {
    color: blue;
    font-size: 20px;

}
.icono-ver:hover i {
    color: darkblue;
    transform: scale(1.2);
}

/* Estilo general del botón */
.calculadora {
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    width: 40px; /* Ajusta el tamaño para hacerlo más accesible */
    height: 40px;
    border-radius: 50%; /* Hacerlo circular */
    border: none;
    background: #28a745; /* Verde brillante */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para darle profundidad */
    transition: all 0.3s ease; /* Transición suave */
}

/* Efectos cuando el botón es presionado o al pasar el mouse */
.calculadora:hover {
    background: #218838; /* Color más oscuro al pasar el mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra más profunda al pasar el mouse */
}

/* Estilo del ícono dentro del botón */
.calculadora i {
    font-size: 15px;
    color: white; /* Color blanco para el ícono */
    transition: color 0.3s ease;
}

/* Efecto en el ícono cuando se pasa el mouse */
.calculadora:hover i {
    color: #fff; /* Se mantiene blanco en el hover */
}

/* Contenedor del botón, centrado */
.doble2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 70px; /* Ajusta el tamaño del contenedor */
    margin: 0;
    padding: 0;
}



.container {
    display: flex;                /* Usa flexbox para alinear los elementos en línea */
    justify-content: space-between; /* Espacio entre las gráficas */
    align-items: center;           /* Alinea las gráficas al centro verticalmente */
    gap: 20px;                     /* Espacio entre las gráficas */
    padding: 0;
}

.canvagrafica {
    width: 100%;                   /* Ajusta el ancho de cada gráfica a 48% del contenedor */
    height: 300px;                /* Ajusta la altura de las gráficas */
    max-width: 280px;             /* Establece un ancho máximo para las gráficas */
    flex: 1;                       /* Deja que las gráficas se expandan para llenar el espacio disponible */
    box-sizing: border-box;       /* Asegura que el padding y el borde no afecten el tamaño total del elemento */
}