:root {
    /*--color-primary:#2ea3f2 ;*/
    /*--color-secondary:#235fe5;*/
    --color-text:#000000;

   /* --font-main: Roboto-bold;  */
    /*--font-text: Roboto-regular;  */
    --font-main: Arapey-Italic;
    --font-text: Arapey-regular;
}

/* Main settings */

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family:var(--font-main);
    /* color: var(--color-text); */
}

 /*@font-face {
  font-family: 'Arapey';
  src: url("{% static 'fonts/Arapey-Italic.ttf' %}") format('truetype');
  src: url('../fonts/Arapey-Italic.ttf'); ahora si esta la fuente en el movil tambien ☺
  font-style: italic;
  font-weight: 400;
}*/

@font-face {
  font-family: 'Arapey';
  src: url('../fonts/Arapey-Italic.woff2') format('woff2'),
       url('../fonts/Arapey-Italic.woff') format('woff'),
       url('../fonts/Arapey-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

body {
    font-family: 'Arapey', serif;
    font-style: italic;
}


/* Opcional: Asegúrate de que todos los elementos usen la misma fuente */
h1, h2, h3, h4, h5, h6, p, span, a {
    font-family: 'Arapey', serif;
    font-style: italic;
}


h1 {
  font-size: 42px !important;
}

/* End main settings */

/* Layout settings */




/* End Layout settings */


.columna_cliente_compania {

    text-align: center;
  }
.columna_cliente_contacto {
    width: 6%;
    text-align: center;
  }
.columna_cliente_telefono {
    width: 9%;
    text-align: center;
  }
.columna_cliente_direccion {
    width: 15%;
    text-align: center;
  }
.columna_cliente_ciudad {

    text-align: center;
  }
.columna_cliente_pais {

    text-align: center;
  }
.columna_cliente_cp {

    text-align: center;
  }
.columna_cliente_email {

    text-align: center;
  }
.columna_cliente_iva {

    text-align: center;
  }
.columna_cliente_fp {
    width: 13%;
    text-align: center;
  }
.columna_cliente_activo {
    width: 1%;
    text-align: center;
  }
.columna_cliente_banco {

    text-align: center;
  }
.columna_cliente_iban {

    text-align: center;
  }
.columna_cliente_bic {

    text-align: center;
  }

/* Columna tabla acciones */

.columna_acciones {
    width: 20%; /* Ajusta el ancho de la segunda columna según sea necesario */
    text-align: center; /* Centra el contenido horizontalmente */
  }

.text-right {
    text-align: right;
}

.min-height-table {
  min-height: calc(7 * 4.6rem); /* 7 rows of approximately 2.5rem height each */
}
.text-red {
  color: red;
}
.text-red-bold {
  color: red;
  font-weight: bold;
}
.success-text {
  color: #28a745 !important; /* Color del botón success de Bootstrap */
}
.invoice-table .price-col {
  min-width: 150px;
}
.invoice-table .amount-col {
  min-width: 150px;
}

.no-select {
  user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}

.flex-container {
    display: flex; /* Define un contenedor Flex */
    justify-content: flex-end; /* Alinea el contenido a la derecha */
    margin-top: 10px; /* Margen superior opcional */
}

#invoice_download_send_btn {
  display: none;
}
#invoice_downloaddevis_send_btn {
  display: none;
}

.hidden-option {
    display: none !important; /* Oculta completamente los elementos */
}

/* Solo para la página index y data de project y contact: enlaces del footer en negro */

.index-page .footer a {
    color: black !important;
    text-decoration: none; /* opcional: quita subrayado si lo hay */
}

.index-page .footer-left.no-select a:hover {
    color: white!important; /* Color del texto al pasar el mouse */
}

.index-page .footer .instagram-icon {
    filter: invert(1); /* invierte los colores de la imagen */
}

.footer-icon:hover .instagram-icon {
    filter: invert(0)!important; /* Cambia el color al pasar el mouse */
}



/* Estilos para el menú cuando está en la página index y data de project y contact*/

.index-page #sidebar .navbar-horizontal .nav-link {
    color: black;  /*Cambia el color del texto a negro */
}

.index-page #sidebar .navbar-nav .nav-link {
    color: black; /* Cambia el color del texto a negro */
}

.index-page #sidebar .navbar-nav .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.01); /* Fondo negro semitransparente para el menú desplegable */
}

.index-page #sidebar .navbar-nav .dropdown-menu .dropdown-item {
    color: black; /* Cambia el color del texto de los ítems del menú desplegable a negro */
}

.index-page #sidebar .navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Fondo negro semitransparente más oscuro al pasar el ratón sobre los ítems del menú desplegable */
}

.index-page #sidebar .navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.05); /* Fondo negro semitransparente más oscuro cuando el ítem está en foco */
}

.index-page .navbar-toggler-icon {
    color: black; /* Cambia el color del ícono a negro */
}

/* Asegúrate de que el rectángulo del SVG también tenga el borde negro */
.index-page .navbar-toggler-icon rect {
    stroke: black; /* Cambia el color del borde del rectángulo a negro */
}

/* Asegúrate de que las líneas del SVG sean negras */
.index-page .navbar-toggler-icon line {
    stroke: black; /* Cambia el color de las líneas a negro */
}

.index-page #set-designer {
    display: none; /* Oculta el texto "Lara Martina" */
}




/* Media query para pantallas menores a 1310px */
@media (max-width: 1310px) {

    /* Ajustar los botones para que sean más pequeños */
    .btn-detalles, .btn-editar, .btn-borrar {
        padding: 4px 6px;
        font-size: 12px;
        min-width: 30px;
        text-align: center;
        border: none;
        box-shadow: none;
    }

    /* Cambia el contenido de los botones */
    .btn-detalles::before {
        content: "D";
    }
    .btn-editar::before {
        content: "E";
    }
    .btn-borrar::before {
        content: "B";
    }

    /* Ocultar el texto original en los botones */
    .btn-detalles span,
    .btn-editar span,
    .btn-borrar span {
        display: none;
    }

    /* Asegura que los botones estén en una sola línea */
    .columna_acciones {
        display: flex;
        justify-content: space-between;
        gap: 5px;
        padding: 0;
    }

    /* Mantener la altura mínima de las filas de la tabla */
    .table tr {
        min-height: 40px;
        display: table-row;
    }

    /* Mantener las líneas de separación */
    .table tbody tr {
        border-bottom: 1px solid #dee2e6;
    }

    /* Solución para la línea superior que se rompe */
    .table tbody tr:first-child {
        border-top: 1px solid #dee2e6;
    }

    /* Asegura que las celdas se alineen correctamente verticalmente */
    .table td {
        vertical-align: middle;
    }

    /* Elimina cualquier margen adicional que pueda causar desplazamiento de las líneas */
    .columna_acciones a {
        margin: 0;
    }

    /* Asegura que las celdas de acciones no tengan padding adicional */
    .columna_acciones {
        padding: 0;
        border: none;
    }

    /* Elimina bordes adicionales que puedan estar causando la línea */
    .table th,
    .table td {
        border: none; /* Elimina cualquier borde en las celdas */
    }

    /* Añadir borde inferior al encabezado para que no se rompa */
    .table th {
        border-bottom: 1px solid #dee2e6;
    }

    /* Ajusta el encabezado de la columna de acciones */
    .table th.columna_acciones {
        border-bottom: none; /* Elimina el borde inferior solo en la columna de acciones */
    }
}



/* End Layout settings */