@font-face {
    font-family: 'ToyotaType-Regular';
    src: url('/wp-content/plugins/excel-to-basket-importer/fonts/toyotaType/ToyotaType-Regular.ttf') format('truetype'); /* Ruta absoluta al archivo de la fuente */

}
@font-face {
    font-family: 'ToyotaType-Book';
    src: url('/wp-content/plugins/excel-to-basket-importer/fonts/toyotaType/ToyotaType-Book.ttf') format('truetype'); /* Ruta absoluta al archivo de la fuente */
}
@font-face {
    font-family: 'ToyotaType-Light';
    src: url('/wp-content/plugins/excel-to-basket-importer/fonts/toyotaType/ToyotaType-Light.ttf') format('truetype'); /* Ruta absoluta al archivo de la fuente */
}

h1,h2,h3{
    font-family: 'ToyotaType-Book', sans-serif !important; /* Usa la fuente personalizada dentro de .container */
}
.container {
    font-family: 'ToyotaType-Book', sans-serif !important; /* Usa la fuente personalizada dentro de .container */
}
/**Increase the width**/
.container {
    width: 1350px !important;
    max-width: 1350px !important;
}

button {
    background: #292631 !important;
    color: white !important;
}

button#step2_back {
    background: #B2B2B2 !important;
    padding:6px;
}

/**Under color**/
h1.under_color::after,
h2.under_color::after,
h3.under_color::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #FF0022;
    border-radius: 2px;
    margin: 0 auto;
    margin-top: 15px;

}

/**Title table**/
h1.title_table::after,
h2.title_table::after,
h3.title_table::after {
    content: "";
    display: block;
    position: relative;
    width: 40px;
    height: 4px;
    background: #DB2C2B;
    border-radius: 2px;
    margin-top: 8px;
    left: 77%;
}

.upper_case{
    text-transform: uppercase;
}



.container a,
.container p,
.container button,
.container input,
.container textarea,
.container .accordion-menu li.menu-item > a {
    font-family: 'ToyotaType-Book', sans-serif !important; /* Aplica la fuente personalizada también a los elementos específicos */
}

/**Custom Header**/
.custom-header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin-left: 20%;
    margin-right: 20%;
}

.header-left img, .header-right img {
    width: 200px; /* Ajusta el tamaño de las imágenes */
    height: auto;
}

.header-left {
    text-align: left;
    justify-content: center;
    display: flex;
    align-items: center;
}

.header-right {
    text-align: right;
    justify-content: center;
    display: flex;
    align-items: center;
}

/**Hide breadcrumbs**/
.breadcrumbs-wrap{
    display:none;
}


/* Estilo para cada vehículo en la grilla */
.basket-item {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    background-color: #f9f9f9;
}

.basket-image img {
    width: 100%;
    border-bottom: 2px solid #ddd;
    margin-bottom: 10px;
    height: 200px !important;
    object-fit: contain;

}


/*Sticky*/
.basket-info-marca {
    position: -webkit-sticky; /* Para navegadores basados en Webkit (Safari) */
    top: 220px;
    position: sticky;
    z-index: 10;              /* Para asegurarse de que se quede encima de otros elementos */
    background: #f9f9f9;
    margin:-15px;
}
.basket-image {
    position: -webkit-sticky; /* Para navegadores basados en Webkit (Safari) */
    position: sticky;         /* Para los demás navegadores */
    top: 0;                   /* Se pegará al principio cuando se haga scroll */
    z-index: 10;              /* Para asegurarse de que se quede encima de otros elementos */
    background: #f9f9f9;
    margin:-15px;

}

/* Estilo de la información del vehículo */
.basket-info {
    font-size: 14px;
}

.basket-info h3 {
    font-size: 25px;
    margin-bottom: 10px;
    letter-spacing: normal;
    font-weight: 100;
    font-family: 'ToyotaType-Book';
}

.basket-info p {
    margin: 7px 0;
    font-size: 14px;
}

/* Estilo del formulario de filtro */
.basket-filter {
    margin-bottom: 20px;
    gap: 10px;
    text-align: center;
}

.basket-filter select, .basket-filter button {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    min-width:200px;
}
.form_buttons{
    margin:3%;
}
.extra-width-select{
    min-width: 300px !important;
}
/* Estilo del Sidebar */
.sidebar {
    width:28%;
    float: right;
    margin-left: 20px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    flex: 1; /* Ocupa el 25% del ancho */
}

.sidebar h2 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
}

canvas {
    margin: 15px 0;
}


/* Estilos para los vehículos */
.vehicle-items {
    flex: 3; /* Ocupa el 75% del ancho */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Tres columnas para los vehículos */
    gap: 0px;
    width:100%;
    float:left;
}

/* Estilos para cada item de vehículo */
.basket-item {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    background-color: #f9f9f9;
    text-align: center;
}

.basket-image img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.sidebar h2 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
}

canvas {
    margin: 15px 0;
    width: 100%;
    height: 200px; /* Ajustar el tamaño de las gráficas */
}

.div-pdf-button {
    margin-top: 50px;
}

.basket-filter select, .basket-filter button {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
}

.header-wrapper{
    display:none;
}

.basket-info-marca {
    min-height: 56px;
}
.chart_tcm{
    width: 250px;
    height: 300px;
}
.basket-image {
    min-height: 230px;
    height: 230px;
}
span.height-space-financiero {
    height: 64px;
    display: block;
}
span.height-space-servicios {
    height: 59px;
}
span.height-space-consumo {
    height: 58px;
}
span.height-space-seguro {
    height: 54px;
}
span.height-space-total-mensual{
    height: 87px;
}
.tcm.data-tcm-financiero{
    /**min-height: 320px;
    height: 400px;**/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 485px;
}
.tcm.data-tcm-servicios{
    min-height: 445px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tcm.data-tcm-consumo{
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tcm.data-tcm-seguro{
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tcm.data-tcm-mensual{
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tcm {
    margin: 10%;
}

.first-column p {
    font-size: 14px;
}

.toooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: black !important;
}

.dashicons {
    font-size: 20px;
}

.toooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    bottom: 125%; /* Posiciona el tooltip arriba del icono */
    left: 50%;
    margin-left: -60px; /* Centra el tooltip */
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 99999999999;
}

.toooltip:hover .toooltip-text {
    visibility: visible;
    opacity: 1;
}
.toooltip .dashicons-info {
    vertical-align: middle;
}


.editable .dashicons {
    cursor: pointer;
}

.editable input {
    font-size: 16px;
    padding: 5px;
    width: 100px;
    text-align: right;
}


/* Estilo para el check */
.editable .dashicons-check {
    display: none;
    margin-left: 10px;
    color: green;
}


.editable.editing .dashicons-check {
    display: inline-block;
    position: relative;
    left: 95px;
    top: 10px;
}
.editable.editing .dashicons-edit {
    display: none;
}

/**Disclaimer**/
.row.align-items-center.disclaimer {
    margin-top: 2%;
    font-size: 12px;
}
p.text-disclaimer {
    font-family: 'ToyotaType-Regular';
}

p.bold-text {
    font-weight: bolder;
    font-size: 15px;
    color:black;
}
text.highcharts-credits {
    display: none;
}

/**Fixes**/
.page-top > .container {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.page-top {
    padding-bottom: 0px !important;
    /**Quitar linea divisoria**/
    padding: 0px !important;
}
p.adjust-height {
    margin-bottom: 20px;
    margin-top: 15px;
}

/**Colors**/
.page-top {
    background-color: #007BFF !important;
}
.main-content h1, .main-content h2,.main-content h3{
    color: black;
}

.form_buttons [type=submit]{
    background-color:#007BFF;
}
#generate_pdf{
    background-color:#007BFF;
}

/**Comercial CSS**/
.vehicle-items.comercial_basket {
    grid-template-columns: repeat(5, 1fr);
}

.select2-container{
    margin: 25px !important;
}

/**User comercial panel **/
.user-baskets-list {
    list-style: none;
    padding: 0;
    margin: 5%;
    display: flex;          /* para que se acomoden en fila */
    flex-wrap: wrap;        /* saltan a la siguiente línea si no caben */
    gap: 12px;              /* espacio entre pastillas */
}

.user-baskets-list li {
    margin: 0; /* eliminamos márgenes extra */
}

.user-baskets-list .basket-link {
    display: inline-block;
    padding: 10px 16px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.user-baskets-list .basket-link:hover {
    background: #0073aa;  /* azul WordPress */
    border-color: #0073aa;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/**Form step 2**/
/* Contenedor principal para los formularios */
.form-container {
    display: flex; /* Flexbox en el contenedor */
    gap: 20px; /* Espacio entre cada grupo */
}

/* Cada grupo de formulario toma un 25% del ancho */
.form-group {
    flex: 1 1 25%; /* Crece, se encoge y tiene un tamaño base del 25% */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
    margin-bottom: 20px; /* Espacio debajo de cada grupo */
}

/* Los labels se colocan encima de los campos */
.form-group label {
    display: block; /* Hace que el label sea un bloque */
    margin-bottom: 5px; /* Espacio entre el label y el input/select */
}

/* Los campos input/select ocupan el 100% del ancho disponible dentro de su grupo */
.form-group select,
.form-group input {
    width: 100%; /* Los campos ocupan todo el ancho disponible */
    padding: 8px; /* Espacio dentro del campo */
    box-sizing: border-box; /* Asegura que el padding no se sume al ancho */
}

/**Fix table **/
.tcm-financiero-info {
    align-items: end !important;
}
.first-column {
    align-items: end !important;
}
.extra-servicios-info {
    text-align: right;
}
.extra-servicios-info,.extra-servicios-values{
    margin-top: 30px;
}

p.total{
    color: #db2e2d;
}

h3.vehicle-brand {
    font-size: 20px !important;
    font-family: 'ToyotaType-Book' !important;
    font-weight: 100;
    /**text-transform: uppercase;**/
    max-height: 32px;
    overflow: hidden;
}
.chart-column {
    min-height: 500px;
}
.total-row {
    width: 140%;
    margin-right: -20%;
    text-align: right;
    background: #dcdcdc91;
    padding-right: 21%;
}
.total-values {
    width: 140%;
    background: #dcdcdc91;
}

.text-wrapper {
    display: inline-block;        /* Necesario para el tooltip */
    max-width: 200px;             /* Ancho máximo del párrafo */
    position: relative;            /* Para posicionar el tooltip */
}

.text-wrapper p {
    white-space: nowrap;           /* Una sola línea */
    overflow: hidden;              /* Oculta el exceso de texto */
    text-overflow: ellipsis;       /* Muestra los "..." */
    margin: 0;
}

/* Tooltip al hacer hover */
.text-wrapper:hover p::after {
    content: attr(data-fulltext);  /* Mostramos el contenido completo */
    white-space: normal;           /* Permite varias líneas si es necesario */
    position: absolute;
    left: 0;
    top: 100%;
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    width: max-content;
    max-width: 400px;             /* Opcional: ancho máximo */
    z-index: 10;
}


.title_form > h2.upper_case {
    letter-spacing: normal;
    font-size: 22px;
    font-weight: 500;
}

.vehicle-items.comercial_basket p {
    font-size: 12px;
}

.data-hidden {
    display: none !important;
}

.data-show {
    display: flex !important;
}
span#toggleBtn {
    cursor: pointer;
    text-decoration: underline;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .main-content {
        overflow: scroll;
    }

    .vehicle-items {
        grid-template-columns: 260px 1fr 1fr 1fr;
    }
    .vehicle-items.comercial_basket {
        grid-template-columns: 260px 1fr 1fr 1fr 1fr;
    }
    .container {
        width: 1024px !important;
        max-width: 1024px !important;
    }
    .tcm.data-tcm-financiero {
        height: auto;
    }
    .basket-info h3{
        font-size: 20px !important;
    }
    h3.vehicle-brand{
        font-size: 13px !important;
    }

    span.height-space-financiero {
        height: 63px;
    }

    span.height-space-servicios {
        height:62px;
    }
    span.height-space-consumo {
        height: 56px;
    }
    span.height-space-seguro {
        height: 61px;
    }

    .tcm.data-tcm-consumo.tcm-consumo-info > p {
        height: 50px;
        min-width: 150px;
    }
    .tcm-consumo-values > p {
        font-size: 14px !important;
        height: 50px !important;
    }
    .tcm.data-tcm-consumo{
        min-height: 500px;
    }
    /**Comercial**/
    .vehicle-items.comercial_basket span.height-space-financiero{
        height: 66px;
    }
    .vehicle-items.comercial_basket span.height-space-servicios{
        height: 70px;
    }
    .vehicle-items.comercial_basket span.height-space-consumo{
        height: 81px;
    }

    .vehicle-items.comercial_basket span.height-space-seguro{
        height: 83px;
    }
    .vehicle-items.comercial_basket span.height-space-total-mensual{
        height: 100px;
    }
}

/**Media query mobile**/
@media (max-width: 768px) {



    .custom-header{
        margin-left: 0;
        margin-right: 0;
    }
    .container {
        width: auto !important;
        padding:10px;
        max-width: none !important;
    }
    .form-container {
        display: inline-block !important;
        gap: 20px;
    }
    .basket-filter select, .basket-filter button {
        min-width: 160px;
        margin: 1%;
    }
    /**Tabla principal**/
    .vehicle-items {
        grid-template-columns: 220px 250px 250px 450px;
    }
    .vehicle-items.comercial_basket {
        grid-template-columns: 220px 1fr 1fr 1fr 1fr;
    }
    .basket-info h3{
        font-size: 20px !important;
    }
    p.vehicle-model {
        padding-right: 10px;
        padding-left: 10px;
    }
    .main-content {
        overflow: scroll;
    }


    .tcm.data-tcm-financiero{
        height: 640px;
    }
    .tcm.data-tcm-servicios{
        min-height: 555px;
    }
    .tcm.data-tcm-consumo{
        min-height: 390px;
    }
    .tcm-financiero-info {
        align-items: center !important;
    }
    h3.vehicle-brand {
        font-size: 15px !important;
        padding: 5px;
        max-height: 50px;
    }

    .tcm.data-tcm-financiero.tcm-financiero-info > p {
        height: 50px;
    }
    .tcm.data-tcm-consumo.tcm-consumo-info > p {
        height: 50px;
        min-width: 150px;
    }
   .tcm-financiero-values > p {
        font-size: 14px !important;
        height: 50px !important;
    }
    .tcm-consumo-values > p {
        font-size: 14px !important;
        height: 50px !important;
    }
    span.height-space-financiero {
        height: 52px;
        display: block;
    }

    span.height-space-servicios {
        height: 40px;
    }
    span.height-space-consumo {
        height: 42px;
    }
    span.height-space-seguro {
        height: 47px;
    }
    span.height-space-total-mensual {
        height: 64px;
    }

    /**Comercial**/

    .vehicle-items.comercial_basket span.height-space-servicios{
        height: 83px;
    }

    .vehicle-items.comercial_basket span.height-space-consumo{
        height: 56px;
    }
    .vehicle-items.comercial_basket span.height-space-seguro{
        height: 58px;
    }
    .vehicle-items.comercial_basket span.height-space-total-mensual{
        height: 60px;
    }

    .select2-container {
        width: 80% !important;
        min-width: 0 !important;
        max-width: 80vw !important;
    }
}