body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
}

.container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

header {
    padding: 20px 0;
    color: #FFFFFF;
}

header .titulo {
    float: right;
    font-weight: bold;
}

header img {
    float: left;
    height: 70px;
}

nav {
    padding: 10px 0;
    color: #FFFFFF;
    background-color: #0B6C99;
    text-align: right;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #FFFFFF;
    text-decoration: none;
}

.content {
    padding: 20px 0;
}

.content .menu {
    float: left;
    width: calc(25% - 10px); /* Restamos 10px para el espacio deseado */
    padding-left: 10px; /* Agregamos un margen izquierdo de 10px */
    background: #f4f4f4;
}

.content .menu h2 {
    color: #606163;
}

.content .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content .menu ul li {
    margin-bottom: 10px;
}

.content .menu ul li a {
    color: #606163;
    text-decoration: none;
}

.main-content {
    float: right;
    width: calc(75% - 10px); /* Restamos 10px para el espacio deseado */
    margin-left: 10px; /* Agregamos un margen izquierdo de 10px */
}

.main-content h2 {
    color: #606163;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #606163;
}

.form-group input {
    width: calc(80% - 10px);
    padding: 10px;
    border: 1px solid #D1D9EF;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    background-color: #9D2235;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    border-radius: 5px; /* Bordes redondeados */
    font-size: 14px;
}

footer {
    padding: 20px 0;
    color: #FFFFFF;
    text-align: center;
    font-size: 10px;
    background-color: #012169;
}

.white-link {
    color: #FFFFFF; /* Cambia el color del texto a blanco */
    text-decoration: underline; /* Quita el subrayado predeterminado de los enlaces */
}

.white-link:hover {
    /* Opcional: Estilo cuando el cursor pasa sobre el enlace */
    text-decoration: underline; /* Puedes aplicar cualquier otro estilo aquí, como cambiar el color de fondo */
}

.alert {
    background-color: #9D2235;
    color: #FFFFFF;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px; /* Añade margen en la parte inferior para separarlo de los elementos siguientes */
    margin-top: 20px; /* Añade margen en la parte superior para separarlo del elemento anterior */
}

.alert p {
    margin: 0;
}

.alert.success {
    background-color: green;
}

.warning {
    background-color: #e5ff00;
    color: #000000;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px; /* Añade margen en la parte inferior para separarlo de los elementos siguientes */
    margin-top: 20px; /* Añade margen en la parte superior para separarlo del elemento anterior */
}

.warning p {
    margin: 0;
}

.image-container {
    max-width: 100%; /* Ajustamos el ancho máximo */
}

/* Estilos para la tabla */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

/* Estilos para las filas alternadas */
tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Estilos para el encabezado de la tabla */
thead {
    background-color: #0B6C99; /* Color de fondo del encabezado */
    color: #fff; /* Color del texto del encabezado */
}

/* Estilos para el texto del encabezado */
th {
    font-weight: bold;
}

.password-section {
    background-color: #f4f4f4;
    padding-top: 1px;
    padding-bottom: 15px;
    padding-left: 10px;
    border-radius: 10px;
}

.location-section {
    background-color: #f4f4f4;
    padding-top: 1px;
    padding-bottom: 15px;
    padding-left: 10px;
    border-radius: 10px;
}

.listaDesplegable {
    width: 80%; /* Haz que el listado desplegable ocupe todo el ancho disponible */
    padding: 10px; /* Aumenta el relleno para que sea más grande y tenga mejor aspecto */
    font-size: 16px; /* Ajusta el tamaño de la fuente */
    border: 1px solid #ccc; /* Agrega un borde */
    border-radius: 5px; /* Agrega esquinas redondeadas */
}

/* Estilos para las opciones del listado desplegable */
.listaDesplegable option {
    font-size: 16px; /* Ajusta el tamaño de la fuente de las opciones */
}

/* Estilos adicionales para que el listado desplegable se vea más "bonito" */
.listaDesplegable:focus {
    outline: none; /* Quita el contorno al enfocar el listado desplegable */
    border-color: #0B6C99; /* Cambia el color del borde al enfocar el listado desplegable */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Agrega una sombra al enfocar el listado desplegable */
}

.main-contentcustomers {
    float: left;
    width: calc(100% - 20px); /* Restamos 10px para el espacio deseado */
    margin-left: 10px; /* Agregamos un margen izquierdo de 10px */
    margin-right: 10px; /* Agregamos un margen derecho de 10px */
}

.main-contentcustomers h2 {
    color: #606163;
}

.customerDataID {
    background-color: #f4f4f4; /* Color de fondo */
    padding: 15px; /* Espacio alrededor de los datos */
    border-radius: 10px; /* Bordes redondeados */
    margin-bottom: 20px; /* Espacio entre este div y el siguiente */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Sombra para resaltar */
    font-weight: bold;
}

.cancel-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #9D2235;
    color: #FFFFFF;
    text-decoration: none; /* Quita el subrayado del enlace */
    border: none; /* Quita el borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 14px;
}

.actionForm-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #9D2235;
    color: #FFFFFF;
    text-decoration: none; /* Quita el subrayado del enlace */
    border: none; /* Quita el borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 14px;
}

.actionForm-link2 {
    display: inline-block;
    padding: 10px 20px;
    background-color: #9D2235;
    color: #FFFFFF;
    text-decoration: none; /* Quita el subrayado del enlace */
    border: none; /* Quita el borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 14px;
}

.actionForm-container {
    text-align: right; /* Alinea el contenido al lado derecho */
}

.main-report {
    float: right;
    width: calc(100% - 10px); /* Restamos 10px para el espacio deseado */
    margin-left: 10px; /* Agregamos un margen izquierdo de 10px */
}

.main-report {
    overflow-x: auto; /* Permitir desbordamiento horizontal */
    white-space: nowrap; /* Evitar el ajuste de texto automático */
}

.advertencia {
    color: #FF0000; /* Color rojo */
    /*font-weight: bold;  Texto en negrita */
    margin-top: 10px; /* Margen superior */
}

/* Estilos adicionales para los paneles */
.panel-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.panel {
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.panel-oferta {
    flex: 1 1 300px;
    background-color: #D8E2F3; /*012169 Color azul D8E2F3 */
    color: #606163; /*fff nuevo 606163*/
}

.panel-cliente {
    flex: 1 1 300px;
    background-color: #EAF2FB; /*0B6C99 Color azul claro EAF2FB*/
    color: #606163; /*fff nuevo 606163*/
}

.panel-adicional {
    flex: 1 1 100%;
    background-color: #c9d9f5; /*9D2235 Color rojo FDE4E4*/
    color: #606163; /*fff nuevo 606163*/
}

.panel h3 {
    margin-top: 0;
    /*text-align: center;
    color: #fff;*/
}

.panel-content p {
    margin: 10px 0;
}

.info-item {
    margin-bottom: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-item label {
    font-weight: bold;
    width: 40%;
}

.info-item span {
    width: 55%;
    text-align: right;
}

.panel-oferta-rever {
    flex: 1 1 300px;
    background-color: #e9e6d8; /*012169 Color azul D8E2F3 */
    color: #606163; /*fff nuevo 606163*/
}

.panel-cliente-rever {
    flex: 1 1 300px;
    background-color: #e9e6d8; /*0B6C99 Color azul claro EAF2FB*/
    color: #606163; /*fff nuevo 606163*/
}

.panel-adicional-rever {
    flex: 1 1 100%;
    background-color: #e9e6d8; /*9D2235 Color rojo FDE4E4*/
    color: #606163; /*fff nuevo 606163*/
}

/* Estilo para el campo de fecha */
#fechaNacimientoCliente {
    width: 80%; /* Ancho del campo */
    padding: 10px; /* Espaciado interno */
    border: 1px solid #D1D9EF; /* Borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 15px; /* Tamaño de fuente */
    font-family: 'Raleway', sans-serif;
}

/* Estilos adicionales para cuando el campo de fecha está enfocado */
#fechaNacimientoCliente:focus {
    outline: none; /* No mostrar contorno al enfocar */
    border-color: #0B6C99; /* Cambiar color del borde al enfocar */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Sombra al enfocar */
}

#reportQuery {
    width: calc(80% - 10px); /* Ancho del textarea */
    padding: 10px; /* Espaciado interno */
    border: 1px solid #D1D9EF; /* Borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de fuente */
    font-family: 'Raleway', sans-serif; /* Familia de fuente */
}

#reportQuery:focus {
    outline: none; /* No mostrar contorno al enfocar */
    border-color: #0B6C99; /* Cambiar color del borde al enfocar */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Sombra al enfocar */
}

/* Ajustes generales para el contenedor de la autorización */
.autorizacion {
    padding: 10px;
    background-color: #f4f4f4; /* Fondo para diferenciarlo */
    border-radius: 5px;
}

/* Ajustes específicos para dispositivos móviles */
@media (max-width: 600px) {
    .autorizacion-label {
        display: block;
        white-space: normal;
        word-wrap: break-word;
    }

    .autorizacion {
        padding: 10px;
    }
}

/* Opcional: Ajustes adicionales para el enlace dentro del label */
.autorizacion-label a {
    color: #0B6C99;
    text-decoration: underline;
}

.product-section {
    background-color: #f4f4f4;
    padding-top: 1px;
    padding-bottom: 15px;
    padding-left: 10px;
    border-radius: 10px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

/* Gestor documental */
.panel-gd-cursos {
    background-color: #D8E2F3;
    color: #606163;
}

.panel-gd-cursoscortos {
    background-color: #EAF2FB;
    color: #606163;
}

.panel-gd-grac {
    background-color: #c9d9f5;
    color: #606163;
}