/* ACTUALIZADO FARCOS (16/09/2024) */
/* Estilos propios del proyecto */

/******************************************************************************************/
/***********************************HTML, BODY Y BÁSICOS***********************************/
/******************************************************************************************/
html, body {
    font-size: 13px;
    font-family:  "Red Hat Display", sans-serif;
    font-weight: 500;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;    
    width: 100%;
    height: auto;
    min-height: 100%;
}

::placeholder { font-style: italic; }
p { font-size: 12px; }





/******************************************************************************************/
/*********************************************H********************************************/
/******************************************************************************************/
.h1, h1 { font-size: 1.85rem; }
.h2, h2 { font-size: 1.50rem; }
.h3, h3 { font-size: 1.25rem; }
.h4, h4 { font-size: 1rem; }
.h5, h5 { font-size: 1rem; }





/******************************************************************************************/
/****************************************COLORES*******************************************/
/******************************************************************************************/
/*DEFINICIÓN DE COLORES*/
:root {
    --colorPrincipal: #FFC442; /*Amarillo*/
    --colorSecundario: #9B0100; /*Rojo granate*/
}

.colorPrincipal { color: var(--colorPrincipal) !important; }

/*TEXTOS*/
.txtcolor-amarillo-linkandplay { color: var(--colorPrincipal); }
.txtcolor-rojo-linkandplay { color: var(--colorSecundario); }

/*BACKGROUNDS*/
.background-color-blanco { background-color: #fff !important; }
.background-degraded { background: linear-gradient(to bottom, var(--colorPrincipal) ,#FED925) !important; border-radius: 15px !important; }
.background-amarillo-linkandplay { background-color: var(--colorPrincipal) !important; }
.background-amarillo-claro-linkandplay { background-color: #fdd47b; }
.background-rojo-linkandplay { background-color: var(--colorSecundario) !important; }


/*FONDO TRANSPARENTE QUE SE USA EN EL LOGIN*/
.background-color-login { background: rgba(0, 0, 0, 0.7); }

/*FONDO IGUAL QUE USA EL GRID PARA CUANDO NO MUESTRA RESULTADOS*/
.background-color-grid { background: rgba(253, 130, 4, .05); }





/******************************************************************************************/
/****************************************BORDES********************************************/
/******************************************************************************************/
.bordecard_amarillo { border-right: 8px solid var(--colorPrincipal) !important; }
.bordecard_rojo { border-right: 8px solid #dc3545 !important; }
.bordecard_verde { border-right: 8px solid #28a745 !important; }
.bordecard_gris { border-right: 8px solid #AAA !important; }
.border-amarillo-linkgandplay { border: solid 1px #FFC442; }
.borde-abajo-negro { border-bottom: 3px solid black !important; }
.borde-abajo-gris { border-bottom: 1px solid #333 !important; }
.borde-abajo-negro { border-bottom: 3px solid black !important; }





/******************************************************************************************/
/**************************************ETIQUETAS*******************************************/
/******************************************************************************************/
/*ETIQUETAS NORMALES*/
.control-label {
    line-height: 2.8rem;
    font-weight: bold;
}


/*CAMPO REQUERIDO ASTERISCO ARRIBA*/
.control-label-required:after {
    color: #bd2918;
    content: " *";
    font-size: 14px;
    position: relative;
    top: -3px;
}





/******************************************************************************************/
/************************MULTISELECT (Combo multiseleccionable)****************************/
/******************************************************************************************/
.choices__input:focus {
    color: #000;
    background-color: transparent;
    border-color: transparent;
    outline: none !important;
    box-shadow: none !important;
    border-bottom: solid 1px var(--colorPrincipal) !important;
}

.choices__inner {
    min-height: calc(1.5em + .75rem + 2px);
    background-color: #F5F5F5;
    border: none;
    border-radius: 0.50rem;
    margin-top: 2px;
    position: relative;
}

.choices[data-type*=select-one] .choices__inner {
    padding-bottom: 0px;
}

.choices__list--single {
    padding-bottom: 0px;
    padding-top: 0px;
}

.choices__item {
    margin-left: 20px;
}

/* Icono de lupa sobre el combo de choices */
.choices-search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #aaa;
    font-size: 18px;
    z-index: 10;
}





/******************************************************************************************/
/****************************************ENLACES*******************************************/
/******************************************************************************************/
a { color: var(--colorPrincipal); text-decoration: none; background-color: transparent; transition: color 0.3s ease;}
a:hover { opacity: 0.6; text-decoration: none; color:var(--colorPrincipal); }
.no_a:hover { border: none !important; }
.no_a { border: none !important; padding: 8px 8px 8px 16px; text-decoration: none; border: solid 1px white; display: flex; }





/******************************************************************************************/
/****************************************BOTONES*******************************************/
/******************************************************************************************/
.btn:hover { background-color: black !important; color: var(--colorPrincipal) !important; transition: background-color 0.3s ease, color 0.3s ease; }

.btn:focus { outline: none !important; box-shadow: none !important; }

.btn:disabled {
    pointer-events: none; /* Desactiva la interacción del mouse */
    background-color: #ccc; /* Cambia el color de fondo cuando el botón está deshabilitado */
    color: #666; /* Cambia el color del texto */
    cursor: not-allowed; /* Cambia el cursor a 'no permitido' */
}

    .btn:disabled:hover {
        background-color: #ccc; /* Mantiene el fondo sin cambios en el hover cuando está deshabilitado */
    }

.btn-amarillo-linkandplay {
    color: #000000 !important;
    background-color: var(--colorPrincipal) !important;
    padding-left: 2.5rem;
    padding-top: 0.3rem;
    padding-right: 2.5rem;
    padding-bottom: 0.3rem;
    border-radius: 1.5rem;
    font-weight: bold;    
}

.btn-rojo-linkandplay {
    color: #fff !important;
    background-color: var(--colorSecundario) !important;
    padding-left: 2.5rem;
    padding-top: 0.3rem;
    padding-right: 2.5rem;
    padding-bottom: 0.3rem;
    border-radius: 1.5rem;
    font-weight: bold;    
}

.btn-cancelar-linkandplay {
    color: #fff !important;
    background-color: #9197B3;
    padding-left: 2.5rem;
    padding-top: 0.3rem;
    padding-right: 2.5rem;
    padding-bottom: 0.3rem;
    border-radius: 1.5rem;
}


/******************************************************************************************/
/***************************************IMAGENES*******************************************/
/******************************************************************************************/
.img-circle { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.img-login { background: url("../../images/fondoconcierto.jpg") center center no-repeat; background-size: cover; }
.img-header-background { background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url(../images/fondo-header.jpg) center center no-repeat; background-size: cover; border-top: solid 10px var(--colorPrincipal); }
.img-circle-userprofile { width: 35px !important; height: 35px; background-color: var(--colorPrincipal) !important; color: #000000 !important; border-radius: 50%; display: flex; justify-content: center; align-items: center; } 
.img-invert-color { filter: brightness(1) invert(1); }




/******************************************************************************************/
/***************************************CHECKBOX*******************************************/
/******************************************************************************************/
input[type="checkbox"] {
    /* Ocultar el checkbox nativo */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    background-color: white;
    border: 1px solid var(--colorPrincipal); /* Color personalizado del borde */
    border-radius: 2px;
    transition: background-color 0.2s, border-color 0.2s;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: var(--colorPrincipal); /* Cambiar el fondo al estar seleccionado */
    border-color: var(--colorPrincipal); /* Cambiar el borde al estar seleccionado */
}

input[type="checkbox"]:checked::after {
    content: '\2714'; /* Código del checkmark */
    color: white; /* Color del checkmark */
    font-size: 12px;
    position: absolute;
    left: 3px;
    top: -1px;
}

/* Para mejorar la apariencia en todos los navegadores */
input[type="checkbox"]:hover {
    opacity: 0.85; 
}





/******************************************************************************************/
/*********************************PADDINGS ESPECIALES**************************************/
/******************************************************************************************/
.pr-md-2-ipadpro{ padding-right: 0rem !important; }

@media (max-width: 991px) {
    .pr-md-2-ipadpro{ padding-right: .5rem !important; }
}

@media (max-width: 820px) {
    .pr-md-2-ipadpro{ padding-right: .5rem !important; }
}

@media (max-width: 767px) {
    .pr-md-2-ipadpro{ padding-right: .0rem !important; }
}





/******************************************************************************************/
/**************************************MODALES*********************************************/
/******************************************************************************************/
/*OSCURECER EL MODAL*/
.modal-backdrop-darken {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro semi-transparente */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050; /* Un nivel por debajo del modal de confirmación */
    display: none; /* Inicialmente oculto */
}

/*OCULTAR EL MODAL*/
.modal-hide {
    visibility: hidden;
    opacity: 0;        
    transition: opacity 0.3s ease-in-out;
}

/*SCROLL DE MODALES*/
.modal-body-scroll {
        max-height: 400px; 
        overflow-y: auto; 
        padding: 15px;
    }

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 800px;
    }
}





/******************************************************************************************/
/*******************************TABLA DEL GRID RESPONSIVE**********************************/
/******************************************************************************************/
.mvc-grid-table > table > thead > tr > th { background-color: white !important; border-left: none !important; border-right: none !important; border-top: 2px solid #dee2e6 !important; border-bottom: 2px solid #dee2e6 !important; }
.mvc-grid-table > table > thead > tr > th, .mvc-grid-table > table > tbody > tr > td, .mvc-grid-table > table > tfoot > tr > td { border: none !important; }
.mvc-grid-table > table > tbody > tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, .05); }
.mvc-grid-pager .active, .mvc-grid-pager .active:focus, .mvc-grid-pager .active:hover { border-color: var(--colorPrincipal) !important; background: var(--colorPrincipal) !important; color: #000000 !important; }
.mvc-grid-pager button { color: black !important; }
.mvc-grid-pager button:hover { outline: none !important; box-shadow: none !important; color: var(--colorPrincipal) !important; }
.mvc-grid-pager button:focus { outline: none !important; box-shadow: none !important; color: var(--colorPrincipal) !important; }
.blackHeaderTable table thead tr th { color: white !important; background-color: black !important }


@media only screen and (max-width: 850px) 
{   
    /*Se pone que not(.table-striped) y significa que para aquellos grids que usen la clase table-striped no se aplicará esto en repsonsive*/

    /*TABLA DEL GRID*/
    .table-responsive-rows:not(.table-striped) table, 
    .table-responsive-rows:not(.table-striped) thead, 
    .table-responsive-rows:not(.table-striped) tbody, 
    .table-responsive-rows:not(.table-striped) th, 
    .table-responsive-rows:not(.table-striped) td, 
    .table-responsive-rows:not(.table-striped) tr {
        display: block; 
    }

    /* Ocultar encabezados de tabla (pero no mostrar: ninguno por accesibilidad) */
    .table-responsive-rows:not(.table-striped) thead tr { position: absolute; top: -9999px; left: -9999px; }
    
    .table-responsive-rows:not(.table-striped) th { font-size: 1em !important; }
    .table-responsive-rows:not(.table-striped) tr { padding-bottom: 0px; border-left: none; border-right: none; }
    .table-responsive-rows:not(.table-striped) td { border: none; border-bottom: 1px solid #eee; font-size: 14px; position: relative; padding-left: 42% !important; white-space: normal; text-align: right; }
        .table-responsive-rows:not(.table-striped) td:before { position: absolute; top: 6px; left: 6px; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; font-size: 14px; }

    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > thead > tr > th:nth-of-type(1), 
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tbody > tr > td:nth-of-type(1), 
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tfoot > tr > td:nth-of-type(1) { 
        border-top: 1px solid black !important; 
    }

    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tbody > tr:last-child, 
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tfoot > tr:last-child { 
        border-bottom: 1px solid black !important; 
    }
    
    /*CENTRA EL TÍTULO "No hay resultados..." EN RESPONSIVE*/
    .table-responsive-rows:not(.table-striped) .mvc-grid-empty-row td { text-align: center !important; padding: 20px !important; font-size: 13px !important; color: inherit !important; }
    
    /*PAGINACIÓN EN RESPONSIVE*/
    .table-responsive-rows:not(.table-striped) .mvc-grid-pager button:focus { outline: none !important; box-shadow: none !important; }
    .table-responsive-rows:not(.table-striped) .tableless thead { display: none; }
    .table-responsive-rows:not(.table-striped) .tableless td { border: solid 0px transparent !important; }
    
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > thead > tr > th, 
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tbody > tr > td, 
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tfoot > tr > td { 
        border: 0px solid #dee2e6 !important; padding: 0.5em; 
    }

    /*NOMBRES TÍTULOS EN RESPONSIVE*/
    
    /* Nombres de títulos tabla USUARIOS */
    .table-responsive-rows td.title_users-nombreapellidos:before { content: "Nombre/Apellidos:"; }
    .table-responsive-rows td.title_users-nif_nie_cif:before { content: "NIF/NIE/CIF:"; }
    .table-responsive-rows td.title_users-email:before { content: "Email:"; }
    .table-responsive-rows td.title_users-telefono:before { content: "Teléfono:"; }
    .table-responsive-rows td.title_users-rol:before { content: "Rol:"; }
    .table-responsive-rows td.title_users-stagename:before {content: "Nombre Artista:"; }
    .table-responsive-rows td.title_users-isBussines:before {  content: "Negocio:"; }
    .table-responsive-rows td.title_users_bussinesname:before { content: "Nombre Negocio:"; }
    .table-responsive-rows td.title_users-activo:before { content: "Activo:"; }
    .table-responsive-rows td.title_users-fechadecreacion:before { content: "F. de creación:"; }
    .table-responsive-rows td.title_users-acciones:before { content: "Acciones:"; }
    
    /* Nombres de títulos tabla CATEGORÍAS */
    .table-responsive-rows td.title_categorization-tipo:before { content: "Tipo:"; }
    .table-responsive-rows td.title_categorization-subtipos:before { content: "Subtipos:"; }
    .table-responsive-rows td.title_categorization-etiquetas:before { content: "Etiquetas:"; }    

    /* Nombres de títulos tabla SERVICIOS */
    .table-responsive-rows td.title_services-estado:before { content: "Estado:"; }
    .table-responsive-rows td.title_services-nombreapellidos:before { content: "Nombre/Apellidos:"; }
    .table-responsive-rows td.title_services-artista:before { content: "Artista:";}
    .table-responsive-rows td.title_services-cliente:before { content: "Cliente:";}
    .table-responsive-rows td.title_services-negocio:before { content: "Negocio:";}
    .table-responsive-rows td.title_services-fechaservicio:before { content: "Fecha Servicio:"; }
    .table-responsive-rows td.title_services-duracion:before { content: "Duración (minutos):";}
    .table-responsive-rows td.title_services_provincia:before { content: "Provincia:"; }
    .table-responsive-rows td.title_services-importecliente:before { content: "Importe Cliente:"; }
    .table-responsive-rows td.title_services-idservicio:before { content: "ID Servicio:"; }
    .table-responsive-rows td.title_services-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla SOLICITUDES DE SERVICIOS */
    .table-responsive-rows td.title_servicesrequest-estado:before { content: "Estado:"; }
    .table-responsive-rows td.title_servicesrequest-idsolicitudservicio:before { content: "ID Solicitud de Servicio:"; }
    .table-responsive-rows td.title_servicesrequest-cliente:before { content: "Cliente:";}
    .table-responsive-rows td.title_servicesrequest-artista:before { content: "Artista:";}
    .table-responsive-rows td.title_servicesrequest-fechaservicio:before { content: "Fecha Servicio:"; }
    .table-responsive-rows td.title_servicesrequest-duracion:before { content: "Duración (minutos):";}
    .table-responsive-rows td.title_servicesrequest_provincia:before { content: "Provincia:"; }
    .table-responsive-rows td.title_servicesrequest-precioservicio:before { content: "Precio del Servicio:"; }
    .table-responsive-rows td.title_servicesrequest-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla PRECIOS */
    .table-responsive-rows td.title_prices-importeclientesinsobrecoste:before { content: "Importe Cliente sin sobrecoste:"; }
    .table-responsive-rows td.title_prices-sobrecosteporestablecimiento:before { content: "Sobrecoste por establecimiento:"; }
    .table-responsive-rows td.title_prices-importecliente:before { content: "Importe Cliente:"; }
    .table-responsive-rows td.title_prices-comisiondecontratacion:before { content: "Comisión Artista de contratación:"; }
    .table-responsive-rows td.title_prices-importeartista:before { content: "Importe Artista:"; }
    .table-responsive-rows td.title_prices-precioserviciocontestadoporartista:before { content: "Precio Servicio Contestado Por Artista:"; }

    /* Nombres de títulos tabla PAGOS */
    .table-responsive-rows td.title_payments-estado:before { content: "Estado:"; }
    .table-responsive-rows td.title_payments-metododepago:before { content: "Método de pago:"; }
    .table-responsive-rows td.title_payments-fechapago:before { content: "Fecha de pago:"; }
    .table-responsive-rows td.title_payments-fechaerror:before { content: "Fecha de error:"; }
    .table-responsive-rows td.title_payments-detalleerror:before { content: "Detalle del error:"; }
    .table-responsive-rows td.title_payments-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla PAGOS INTENTOS */
    .table-responsive-rows td.title_paymentsintents-estado:before { content: "Estado:"; }
    .table-responsive-rows td.title_paymentsintents-importe:before { content: "Importe:"; }
    .table-responsive-rows td.title_paymentsintents-tarjeta:before { content: "Tarjeta:"; }
    .table-responsive-rows td.title_paymentsintents-fechapagoexitoso:before { content: "Fecha Pago Exitoso:"; }
    .table-responsive-rows td.title_paymentsintents-estadostripe:before { content: "Estado Stripe:"; }
    .table-responsive-rows td.title_paymentsintents-fechaerror:before { content: "Fecha de error:"; }
    .table-responsive-rows td.title_paymentsintents-tipoerror:before { content: "Tipo de error:"; }
    .table-responsive-rows td.title_paymentsintents-codigoerror:before { content: "Código de error:"; }
    .table-responsive-rows td.title_paymentsintents-mensajeerror:before { content: "Mensaje de error:"; }

    /* Nombres de títulos tabla REEMBOLSOS */
    .table-responsive-rows td.title_refunds-estado:before { content: "Estado:"; }
    .table-responsive-rows td.title_refunds-fechareembolso:before { content: "Fecha de reembolso:"; }
    .table-responsive-rows td.title_refunds-fechaerrorreembolso:before { content: "Fecha error reembolso:"; }
    .table-responsive-rows td.title_refunds-detalleerrorreembolso:before { content: "Deralle error reembolso:"; }

    /* Nombres de títulos tabla REEMBOLSOS INTENTOS */
    .table-responsive-rows td.title_refundsintents-estado:before { content: "Estado:"; }
    .table-responsive-rows td.title_refundsintents-importe:before { content: "Importe:"; }
    .table-responsive-rows td.title_refundsintents-fechareembolsoexitoso:before { content: "Fecha reembolso exitoso:"; }
    .table-responsive-rows td.title_refundsintents-estadostripe:before { content: "Estado Stripe:"; }
    .table-responsive-rows td.title_refundsintents-fechaerror:before { content: "Fecha de error:"; }
    .table-responsive-rows td.title_refundsintents-mensajeerror:before { content: "Mensaje de error:"; }

     /* Nombres de títulos tabla FACTURAS */
    .table-responsive-rows td.title_invoice-numerofactura:before { content: "Nº Factura:"; }
    .table-responsive-rows td.title_invoice-fechafactura:before {content: "Fecha Factura:"; }
    .table-responsive-rows td.title_invoice-fechacreacion:before  { content: "Fecha Creación:"; }    
    .table-responsive-rows td.title_invoice-emisor:before {content: "Emisor:"; }
    .table-responsive-rows td.title_invoice-receptor:before { content: "Receptor:"; }
    .table-responsive-rows td.title_invoice-importetotal:before  { content: "Importe Total:";}
    .table-responsive-rows td.title_invoice-remesa:before { content: "Remesa:"; }
    .table-responsive-rows td.title_invoice-fecharemesa:before { content: "Fecha Remesa:";}
    .table-responsive-rows td.title_invoice-acciones:before { content: "Acciones:";}

    /* Nombres de títulos tabla CUADRO DE MANDO */
    .table-responsive-rows td.title_controlpanel-rol:before {content: "Rol:";}
    .table-responsive-rows td.title_controlpanel-artista:before { content: "Artista:"; }
    .table-responsive-rows td.title_controlpanel-importetotal:before {content: "Importe Total:"; }
    .table-responsive-rows td.title_controlpanel-cliente:before {content: "Cliente:"; }
    .table-responsive-rows td.title_controlpanel-numeroregistros:before {content: "Número de registros:";}
    .table-responsive-rows td.title_controlpanel-numeroservicios:before {content: "Número de servicios:";}
    .table-responsive-rows td.title_controlpanel-establecimiento:before { content: "Establecimiento:"; }
}





/******************************************************************************************/
/*****************************TABLA STRIPED PARA VERSIÓN APP*******************************/
/******************************************************************************************/
.table-striped-custom-table td, .table-striped-custom-table thead th { border-top: solid 0px transparent; border-bottom: solid 0px transparent; }





/******************************************************************************************/
/*****************************************INPUT********************************************/
/******************************************************************************************/
/*VALIDACIONES EN INPUTS, DROPDOWNS, ETC...*/
input.form-control.is-invalid, .was-validated input.form-control:invalid {
    padding-right: calc(1.3em + .75rem);
}

/*CAMBIO COLOR FOCUS*/
.control-input:focus {
    outline: none; /* Quitar el borde predeterminado de enfoque */
    border-color: var(--colorPrincipal); /* Cambiar el color del borde a tu elección */
    box-shadow: 0 0 5px rgba(240, 130, 29, 0.5); /* Añadir sombra para un efecto visual */
}

/*CUANDO EL NAVEGADOR SUGIERE AUTOCOMPLETAR Y CLICKAMOS, PODEMOS PERSONALIZAR EL FONDO*/
input:-webkit-autofill {
    background-color: white !important; /* Establece el fondo en blanco */
    color: inherit; /* Mantiene el color del texto */
    transition: background-color 5000s ease-in-out 0s; /* Evita que Chrome vuelva a aplicar el fondo */
}

/*PARA PONER UN ICONO A LA DERECHA DE UN CAMPO INPUT*/
.input-icoright-group { position: relative; }
.input-icoright-group i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: black; cursor: not-allowed; }
.input-icoright-group input { padding-right: 35px; cursor: pointer; background-position: right calc(.875em + 1.30rem) center !important; }
.input-icoright-group input.form-control.is-invalid[type="text"], 
.input-icoright-group .was-validated input.form-control[type="text"]:invalid {
    padding-right: calc(1.5em + 1rem); /* Ajuste del padding para los inputs con iconos a la derecha */
    background-position: right calc(.875em + 1.30rem) center; /* Ajustar la posición del icono */
    /*background-color: #f8d7da;*/ /* Color de fondo rojo claro cuando es inválido */
    border-color: #dc3545; /* Color del borde cuando es inválido */
}




/******************************************************************************************/
/***********************************SELECT (COMBOS)****************************************/
/******************************************************************************************/
select.form-control.is-invalid, .was-validated select.form-control:invalid {
    padding-right: calc(1.5em + 1rem); /* Diferente ajuste para los select */
    background-position: right calc(.875em + .5000rem) center
}

/*CAMBIO COLOR FOCUS*/
.control-select:focus {
    outline: none; /* Quitar el borde predeterminado de enfoque */
    border-color: var(--colorPrincipal); /* Cambiar el color del borde a tu elección */
    box-shadow: 0 0 5px rgba(240, 130, 29, 0.5); /* Añadir sombra para un efecto visual */
}





/******************************************************************************************/
/*************************************FILE UPLOAD******************************************/
/******************************************************************************************/
/*DIV PARA SUBIR/ARRASTRAR ARCHIVOS*/
.file-upload, 
.file-upload-create,
.file-upload-modify {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--colorPrincipal);
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: #f8f9fa !important;
}

/*HOVER DEL DIV PARA SUBIR/ARRASTRAR ARCHIVOS*/
.file-upload:hover, 
.file-upload-create:hover,
.file-upload-modify:hover {
    opacity: 0.7    
}

/*OCULTA EL INPUT POR DEFECTO PARA SUBIR/ARRASTRAR ARCHIVOS*/
.file-upload input[type="file"] ,
.file-upload-create input[type="file"],
.file-upload-modify input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/*BORDE QUE MUESTRA CUANDO HACES EL DRAG AND DROP*/
.file-upload-highlight { border: 2px dashed var(--colorPrincipal); background-color: #f8f9fa !important; }


/*MINIATURAS CARDS DE LOS ARCHIVOS ADJUNTOS*/
.file-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Ajusta las columnas automáticamente */
    gap: 0px 40px; /* Espacio entre las tarjetas */
    width: 100%;
    justify-items: start; /* Asegura que los archivos se alineen correctamente */
}

.file-card {
    width: 150px;
    max-width: 150px; /* Limita el ancho máximo */
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px; /* Espacio entre filas */
}

    .file-card-body {
            padding: 10px;
            width: 100%;
            text-align: center;
    }

    .file-card img {
        width: 100%;
        height: 80px;
        object-fit: cover;
        object-position: center;
    }

    .file-card i {
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 100px;
    }

    .file-card p {
        font-size: 11px;
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;        
    }

.file-card:hover .overlay { opacity: 1; }

.file-card-trash-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 999; /* Asegura que el icono está por encima del overlay */
}
.file-card:hover .file-card-trash-icon { opacity: 1; }

.file-card-download-icon {
    position: absolute;
    top: 10px;
    right: 30px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 999; /* Asegura que el icono está por encima del overlay */
}
.file-card:hover .file-card-download-icon { opacity: 1; }

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}





/******************************************************************************************/
/*******************************INPUT FILTRO BUSQUEDA LIBRE********************************/
/******************************************************************************************/
.search-container { position: relative; width: 250px; }
.search-container input { padding: 10px 10px 10px 35px; } /* Ajusta el padding para hacer espacio para el icono */
.search-container .mdi-magnify { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: #888; }

@media (max-width: 990px) {
    .search-container .mdi-magnify { top: 50%; line-height: normal; }
}


.search-container .mdi-calendar {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #888;
}

@media (max-width: 990px) {
    .search-container .mdi-calendar {
        top: 50%;
        line-height: normal;
    }
}




/******************************************************************************************/
/************************************MENSAJE CARGANDO**************************************/
/******************************************************************************************/
#materialLoading {
    font-family: "Red Hat Display", sans-serif;
    color: black;
    font-weight: bold;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: table;
    z-index: 9999;
}

#materialLoadingCentered { display: table-cell; vertical-align: middle; padding: 20px; }
#materialLoadingContent { text-align: center; }
#materialLoadingContent .spinner-container { background-color: #FFFFFF; text-align: center; border-radius: 7px; padding: 40px 20px; }
#materialLoadingContent .spinner-container .texto { padding-top: 10px; font-size: 16px; font-weight: bold; }
#materialLoadingContent .spinner-container .spinner-border { text-align: center; color: var(--colorPrincipal); width: 3rem; height: 3rem; }
#materialLoading.hide { opacity: 0; transition: opacity 0.2s ease-out; pointer-events: none; }
#materialLoading.hide #materialLoadingCentered { transform: scale(0.8); transition: transform 0.2s ease-out; }
#materialLoading.show { opacity: 1; transition: opacity 0.2s ease-in; }
#materialLoading.show #materialLoadingCentered { transform: scale(1); transition: transform 0.2s ease-in; }





/******************************************************************************************/
/****************************************ICONOS********************************************/
/******************************************************************************************/
.mdi::before { font-size: 18px; }
.mdi2::before { font-size: 22px; }
.icon-size-30::before { font-size: 30px; }
.icon-size-70::before { font-size: 70px; }





/******************************************************************************************/
/********************************MENU LATERAL (BACKOFFICE)*********************************/
/******************************************************************************************/
.sidenav {
    height: 100%;
    width: 16px;
    position: fixed;
    z-index: 1;
    top:auto;
    left: 0;
    background-color: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 45px;
}

.sidenav a {
    padding: 8px 8px 8px 16px;
    text-decoration: none;
    font-size: 14px;
    color: #6c757d !important;
    display: flex;
    align-items: center;
    transition: 0.3s;
    border: solid 1px white;
}

.sidenav a span { white-space: nowrap; }
.sidenav a .mdi { margin-right: 10px; }

.sidenav.expanded a:hover { color: var(--colorPrincipal) !important; opacity: 1; }
.expanded a:active{ background-color: white; }

.submenu { display: none; flex-direction: column; padding-left: 30px; }

#menuToggleBtn {
    position: fixed;
    top: 16vh;
    left: 0px;
    background-color: #fff;
    color: #6c757d !important;
    border: none;
    border-radius: 50%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: 0.5s;
    z-index: 1040;
}

#main { transition: margin-left 0.5s; padding: 16px; }

.collapse-button { display: flex; align-items: center; }
.toggle-icon:hover { color: var(--colorPrincipal); }
.collapse-button .mdi { transition: transform 0.3s ease; margin-right: 5px; }
.collapse-button.collapsed .mdi-chevron-down { display: none; }
.collapse-button.collapsed .mdi-chevron-right { display: inline-block; }
.collapse-button:not(.collapsed) .mdi-chevron-down { display: inline-block; }
.collapse-button:not(.collapsed) .mdi-chevron-right { display: none; }
button:focus { outline: 0px dotted !important; outline: 0px auto -webkit-focus-ring-color !important; } /* Le quita el color a la flechita */





/******************************************************************************************/
/**********************************MENU TABS (APPMOBILE)***********************************/
/******************************************************************************************/
.nav-link {
    background-color: var(--colorPrincipal);
    color: white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

.nav-link.active {
    background-color: transparent; 
    color: var(--colorPrincipal) !important;
    border: 1px dotted var(--colorPrincipal);
    padding-bottom: 5px;
}

.nav-link:hover {
    color: white !important;
}

.nav-link.active:hover {
    background-color: transparent;
    color: var(--colorPrincipal) !important;
    opacity: 1;
}





/******************************************************************************************/
/******************************OPCIONES MENÚ PERFIL USUARIO********************************/
/******************************************************************************************/
.dropdown-item:hover { color: var(--colorPrincipal); opacity: 1; background-color: transparent; }
.dropdown-item:hover i { color: var(--colorPrincipal); opacity: 1; }





/******************************************************************************************/
/************************************TOOLTIP CON ICONO*************************************/
/******************************************************************************************/
.tooltip {
    border-bottom: none !important;
}

.tooltip-inner {
    background-color: white;
    color: #333;
    border: 1px solid var(--colorPrincipal);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 300px;
}

/*FLECHITA QUE INDICA EL BOCADILLO TOOLTIP*/
.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--colorPrincipal);
}





/******************************************************************************************/
/**************************************MENSAJE TOAST***************************************/
/******************************************************************************************/
#toast-container > div {
    opacity:0.95 !important; /* Ajusta la opacidad del mensaje toast */
    transition: opacity 0.3s; /* Opcional: para una transición suave al cambiar la opacidad */
}

#toast-container > div:hover {
    opacity: 1 !important; /* Ajusta la opacidad del mensaje toast al pasar el mouse sobre �l */
}




/******************************************************************************************/
/*********************************CALENDARIO AIR DATEPICKER********************************/
/******************************************************************************************/
.air-datepicker {
    z-index: 1051 !important; /* Ajuste de z-index para que se muestre sobre el modal */
}

/*CAMBIA EL COLOR DEL DÍA SELECCIONADO*/
.air-datepicker-cell.-selected- {
    background-color: var(--colorPrincipal) !important;
    color: white !important;
}

/*CAMBIA EL COLOR DEL FONDO DEL HOVER*/
.air-datepicker-cell.-selected-.-focus- {
    background-color: var(--colorPrincipal) !important;
}





/******************************************************************************************/
/************************************POPOVER DE BOOSTRAP***********************************/
/******************************************************************************************/
.popover {
    background-color: white !important; /* Color de fondo del popover */
    color: #ffffff !important; /* Color del texto del popover */
    border-color: black !important; /* Color del borde del popover */
}

/* Cambiar el color de la flecha del popover */
.popover .arrow::before, .popover .arrow::after {
    border-bottom-color: black !important; /* Cambia este color según el lado donde esté la flecha */
    border-top-color: black !important; /* Aplica también para otras posiciones (arriba/abajo) */
}

/* Cambiar el color del header del popover */
.popover-header {
    background-color: var(--colorPrincipal) !important; /* Color de fondo del header */
    color: #ffffff !important; /* Color del texto del header */
    border-bottom: 1px solid black !important; /* Borde inferior del header */
}

.popover-body {
    padding: 1rem;
}




/******************************************************************************************/
/*****************************************VARIOS*******************************************/
/******************************************************************************************/
/*TIPOS DE CURSORES*/
.cursor-hand { cursor: pointer !important; }
.cursor-arrow { cursor: default !important; }
.cursor-notAllowed { cursor: not-allowed !important; }
.cursor-text { cursor: text !important; }


/*MENSAJE VALIDACIONES*/
.label-message-error {
    position: absolute;
    padding-top: 0px;
    padding-left: 5px;
    min-height: 0px;
    line-height: 15px;
    font-size: 11px;
    text-align: left;
}

/*CÍRCULO CON TEXTO DENTRO*/
.circle_textInside { 
    width: 40px !important;
    height: 40px;
    background-color: var(--colorPrincipal) !important;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
} 

/*ELEMENTOS FORM*/
.form-control_linkandplay {
    background-color: #F5F5F5;
    border: none;
    border-radius: 0.50rem;
}

/*CÍRCULO CON TEXTO DENTRO DISABLED*/
.circle_textInsideDisabled {
    width: 40px !important;
    height: 40px;
    background-color: #6c757d !important;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
} 


/*PONE UN POCO DE PADDING ARRIBA DE LOS FORMS DE BÚSQUEDA PARA QUE CUANDO SE HAGA RESPONSIVE QUEDE BIEN*/
@media (max-width: 768px) {
    .form-inline {
        padding-top: 7px !important;
    }
}

/*BADGE DE LOS ESTADOS*/
.badge-status-rejected,
.badge-status-cancelled {
    background-color: #ffcccc !important; /* rojo pastel */
    color: #000 !important;
    font-size: 12px;
    padding: 7px 10px;
}

.badge-status-refund-error {
    background-color: #ffcccc !important; /* rojo pastel */
    color: #000 !important;
    font-size: 12px;
    padding: 7px 10px;
    border: 1.5px dashed black !important; /* Borde negro, visible */
}

.badge-status-cancellation-request {
    background-color: #ffcccc !important; /* tono rojo claro pastel */
    color: #000 !important;
    font-size: 12px;
    padding: 7px 10px;
    border: 1.5px dashed black !important; /* Borde negro, visible */
}


.badge-status-waiting-performer-reply,
.badge-status-requested {
    background-color: #ffe5cc !important; /* naranja pastel */
    color: #000 !important;
    font-size: 12px;
    padding: 7px 10px;
}

.badge-status-waiting-payment-confirmation {
    background-color: #ffe5cc !important; /* naranja pastel */
    color: #000 !important;
    font-size: 12px;
    padding: 7px 10px;
    border: 1.5px dashed black !important; /* Borde negro, visible */
}

.badge-status-accepted,
.badge-status-waiting-start-event {
    background-color: #ccffcc !important; /* verde pastel */
    color: #000 !important;
    font-size: 12px;
    padding: 7px 10px;
}

.badge-status-event-ended {
    background-color: #cce5ff !important; /* azul pastel */
    color: #000 !important;
    font-size: 12px;
    padding: 7px 10px;
}

.badge-status-replied-by-artist,
.badge-status-in-dispute {
    background-color: #e5ccff !important; /* violeta pastel */
    color: #000 !important;
    font-size: 12px;
    padding: 7px 10px;
    border: 1.5px dashed black !important; /* Borde negro, visible */
}

.badge-status-finished {
    background-color: #000000 !important;
    color: var(--colorPrincipal) !important; /* amarillo dorado */
    font-size: 12px;
    padding: 7px 10px;
}

.badge-status-default {
    background-color: #f0f0f0 !important; /* gris muy claro */
    color: #000 !important;
    font-size: 12px;
    padding: 7px 10px;
}



.letter-spacing-1px { letter-spacing: 1px; }
.border-faqs { border-top: solid 1px var(--colorPrincipal) !important; }