/* Reseteo de estilos básicos */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    font-size: 0.9rem; /* Reducir tamaño de fuente */
}

.custom-h2 {
  font-size: 2rem; /* Tamaño de la fuente */
  font-weight: bold; /* Negrita */
  color: #ffffff; /* Color blanco */
  text-align: center; /* Centrado del texto */
  margin-top: 20px; /* Espacio superior */
}


/* Cabecera con animación */
    .header {
        background-color: #007BFF;
        color: white;
        text-align: center;
        padding: 20px 0;
        margin-bottom: 20px;
    }

    .header h1 {
        margin: 0;
        font-size: 2.5rem;
        opacity: 0; /* Inicia oculto */
        animation: fadeIn 2s forwards; /* Animación de desvanecimiento */
    }

/* Animación de desvanecimiento para el h1 */
    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(-20px); /* Comienza arriba */
        }
        100% {
            opacity: 1;
            transform: translateY(0); /* Termina en su posición original */
        }
    }

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 5px; /* Reducir padding */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    margin-bottom: 4px; /* Reducir margen */
    font-size: 20px; /* Ajustar tamaño */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab {
    display: flex;
    justify-content: space-around;
    margin-bottom: 6px; /* Reducir margen */
}

.tab button {
    padding: 5px; /* Reducir padding */
    flex: 1;
    border: none;
    background: #007BFF;
    color: white;
    cursor: pointer;
    font-size: 12px; /* Tamaño de letra más pequeño */
    margin: 0 2px; /* Espaciado horizontal más compacto */
    transition: all 0.3s ease;
}

.tab button:hover {
    background-color: #0056b3;
    transform: scale(1.1); /* Aumenta ligeramente el tamaño */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

.tab button.active {
    background: #0056b3;
}

.tabcontent {
    display: none;
    padding: 6px; /* Reducir padding */
}

.input-inline {
    display: flex;
    align-items: center;
    margin-bottom: 6px; /* Reducir margen */
    margin: 10px 0;
}

.input-inline button {
        cursor: pointer;
        padding: 8px 16px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

.input-inline button:hover {
        background-color: #218838;
    }

.input-inline label {
    width: 100px; /* Ancho reducido */
    font-weight: bold;
    font-size: 12px; /* Tamaño de letra más pequeño */
}

.input-inline input,
.input-inline select {
    padding: 4px; /* Reducir padding */
    border: none; /* Eliminar borde */
    border-radius: 4px;
    width: 100%; 
    max-width: 150px; /* Ancho máximo reducido */
    font-size: 12px; /* Tamaño de letra más pequeño */
    text-align: center; /* Centrar texto */
    transition: border-color 0.3s ease;
}

.input-inline input:focus,
.input-inline select:focus {
    border-color: #007BFF;
    outline: none;
}

button {
    padding: 5px 8px; /* Reducir tamaño del botón */
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px; /* Tamaño de letra más pequeño */
    margin-top: 5px; /* Separar de los inputs */
    transition: background-color 0.3s, transform 0.2s ease-in-out;
}

button:hover {
    background-color: #0056b3;
    transform: scale(1.05); /* Agrandar ligeramente */
}

.resultados {
    margin-top: 6px; /* Ajustar margen superior */
    padding: 5px; /* Reducir padding */
    background-color: #f8f9fa;
    border-radius: 4px;
    font-size: 12px; /* Restaurar tamaño de letra de resultados */
    border: 1px solid #ccc; /* Borde alrededor del contenedor */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px; /* Margen superior para la tabla */
}

th, td {
    border: 1px solid #ddd; /* Borde sutil */
    padding: 4px; /* Espaciado más compacto */
    text-align: center;
    background-color: #f8f9fa; /* Fondo sutil para celdas */
    font-size: 12px; /* Tamaño de fuente más pequeño */
}

th {
    background-color: #4C6A92; /* Azul profesional y calmado para los encabezados */
    color: white; /* Color de texto para encabezados */
}

tr:hover {
    background-color: #e6f7ff; /* Efecto hover para filas */
}

/* Ajustes específicos para las columnas de Factor Llenado y Factor Temperatura */
th:nth-child(10), td:nth-child(10),
th:nth-child(11), td:nth-child(11) {
    width: 80px; /* Ancho reducido para Factor Llenado y Factor Temperatura */
}

th:nth-child(10) {
    background-color: #4C6A92; /* Azul profesional y calmado para los encabezados */
}

th:nth-child(11) {
    background-color: #4C6A92; /* Azul profesional y calmado para los encabezados */
}

/* Asegúrate de que las otras columnas tengan tamaños coherentes */
th:nth-child(1), td:nth-child(1),
th:nth-child(2), td:nth-child(2),
th:nth-child(3), td:nth-child(3),
th:nth-child(4), td:nth-child(4),
th:nth-child(5), td:nth-child(5),
th:nth-child(6), td:nth-child(6),
th:nth-child(7), td:nth-child(7),
th:nth-child(8), td:nth-child(8),
th:nth-child(9), td:nth-child(9),
th:nth-child(12), td:nth-child(12) {
    width: auto; /* Las demás columnas toman el espacio necesario */
}

/* Ajustes para los inputs dentro de las tablas */
input[type="number"] {
    width: 100%;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    font-size: 12px;
}

input:focus {
    border-color: #4C6A92; /* Usar el mismo azul calmado para el enfoque */
    outline: none;
    box-shadow: 0 0 5px rgba(76, 106, 146, 0.5); /* Sombra suave */
}

/* Estilos específicos para el Contenedor Combiner */
#compilador {
    padding: 5px; /* Reducir padding */
    background: #f8f9fa; /* Fondo suave para el combiner */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 6px; /* Reducir margen superior */
}

#compilador h4 {
    margin-top: 4px; /* Reducir margen superior */
    font-size: 12px; /* Tamaño de fuente más pequeño */
    color: #2c3e50; /* Gris oscuro para el título */
}

/* Resultados de configuración */
.resultadosPanel, .resultadosConfiguracion {
    font-size: 0.8rem; /* Tamaño de fuente más pequeño */
    margin-top: 6px; /* Reducir margen */
    padding: 5px; /* Reducir padding */
    background-color: #f8f9fa;
    border-radius: 4px;
    overflow-y: auto;
}

hr {
    border: 1px solid #ccc;
    margin: 4px 0; /* Reducir espaciado */
}

/* Estilos para la configuración */
.titulo-configuracion {
    color: #2c3e50; /* Gris oscuro para el título */
    font-weight: bold;
    margin-bottom: 4px; /* Reducir margen */
}

.division {
    border-top: 2px solid #4C6A92; /* Azul profesional para la división */
    margin: 6px 0; /* Reducir margen */
    width: 100%;
}

/* Columnas dentro de un contenedor flex */
.column-container {
    display: flex;
    justify-content: space-between;
    margin-top: 6px; /* Reducir margen superior */
}

.column {
    flex: 1; /* Cada columna toma el mismo espacio */
    margin-right: 4px; /* Reducir margen entre columnas */
    padding: 5px; /* Reducir padding */
    border: 1px solid #ccc; /* Borde para mejor visualización */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #f8f9fa; /* Fondo claro */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.column h3 {
    margin-bottom: 4px; /* Espaciado inferior para el título */
    font-size: 18px; /* Tamaño de fuente del título */
    color: #2c3e50; /* Gris oscuro para el título */
}

.column hr {
    margin: 4px 0; /* Espaciado para el separador */
    border: 1px solid #4C6A92; /* Color de separador ajustado al azul */
}

#map {
    height: 300px; /* Ajustar altura del mapa */
    width: 100%;
    border: 1px solid #ccc; /* Borde alrededor del mapa */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* Combiner */
.combiner {
    margin-bottom: 20px; /* Añadir margen inferior */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/* Asegúrate de que el contenedor tenga altura completa */
#graficoConsumo {
    width: 100%;   /* Asegura que el gráfico ocupe el 100% del ancho */
    height: 100%;  /* Asegura que el gráfico ocupe el 100% de la altura del contenedor */
}

#graficoSolar {
    width: 100%;   /* Asegura que el gráfico ocupe el 100% del ancho */
    height: 300px;  /* Asegura que el gráfico ocupe el 100% de la altura del contenedor */
}

/* Estilos para los inputs de Factor Llenado y Factor Temperatura */

input.serie,
input.paralelo,
input.factorLlenado,
input.factorTemperatura,
input.factorLlenadoInversor,
input.factorTemperaturaInversor {
    width: 10ch; /* 4 caracteres de ancho */
    text-align: center; /* Centra el texto dentro del input */
}

/* Estilos para los inputs de Factor Llenado y Factor Temperatura */

input.serie,
input.paralelo {
    width: 7ch; /* 4 caracteres de ancho */
    text-align: center; /* Centra el texto dentro del input */
}

/* Título Combiner */
h4.tituloCombiner {
    font-size: 24px; /* Título del Combiner */
    font-weight: bold; /* Negrita */
    color: #fdfefe; /* Color oscuro */
    background-color: #4C6A92; /* Morado claro */
    padding: 10px 20px; /* Espaciado */
    border-radius: 5px; /* Bordes redondeados */
    border: 4px ; /* Morado claro */
    margin-bottom: 20px; /* Espacio debajo del título */
    text-align: center; /* Centrado */
}


/* Título para el Inversor */
h5.tituloCombiner {
    font-size: 20px; /* Desde la Combiner hasta el Inversor */
    font-weight: bold; /* Negrita */
    color: #7d3c98; /* Color blanco */
    background-color: #e8daef; /* Morado claro */
    padding: 10px 20px; /* Espaciado */
    border-radius: 5px; /* Bordes redondeados */
    margin-top: 30px; /* Separación del contenido superior */
    text-align: center; /* Centrado */
}

/* Estilo para el botón Eliminar Combiner */
.btn-eliminar {
    background-color: #FF6F61; /* Rojo salmón */
    color: white; /* Texto en blanco */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    padding: 5px 8px; /* Espaciado interno */
    font-size: 12px; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor a mano */
    transition: background-color 0.3s ease, transform 0.2s ease-in-out; /* Transición suave */
}

.btn-eliminar:hover {
    background-color: #e55d4f; /* Rojo salmón más oscuro cuando se pasa el ratón */
    transform: scale(1.05); /* Aumenta ligeramente el tamaño cuando se pasa el ratón */
}

.btn-eliminar:focus {
    outline: none; /* Elimina el borde de enfoque predeterminado */
    box-shadow: 0 0 5px rgba(255, 111, 97, 0.5); /* Sombra suave */
}

/* Estilo para el botón Eliminar dentro de la tabla */
.btn-rojo {
    background-color: #FF6F61; /* Rojo salmón */
    color: white; /* Texto en blanco */
    border: none;
    border-radius: 4px; /* Bordes redondeados */
    padding: 5px 8px; /* Relleno adecuado */
    cursor: pointer; /* Indicador de cursor de mano */
    font-size: 12px; /* Tamaño de letra */
    transition: background-color 0.3s ease, transform 0.2s ease-in-out; /* Transiciones suaves */
}

/* Efecto hover para el botón Eliminar */
.btn-rojo:hover {
    background-color: #e55a4e; /* Rojo más oscuro al pasar el mouse */
    transform: scale(1.05); /* Aumenta ligeramente el tamaño */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* Efecto al hacer clic (presionado) */
.btn-rojo:active {
    background-color: #d44b42; /* Rojo aún más oscuro al hacer clic */
    transform: scale(0.98); /* Reduce el tamaño ligeramente */
}

/* --------------------- Inicio contenedor Boton Data-Financiero ----------------------------*/

#DatosFinancieros {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#DatosFinancieros .column-container {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

#DatosFinancieros .column {
    flex: 1;
    margin-right: 10px;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#DatosFinancieros h3 {
    font-size: 18px;
    color: #333;
}

#DatosFinancieros button {
    padding: 6px 12px;
    background-color: #007BFF;
    color: white;
    font-size: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#DatosFinancieros button:hover {
    background-color: #0056b3;
}

/* -------------------------- Fin contenedor Boton Data-Financiero ----------------------------*/

/* ----------------------------Inicio contenedor principal del LOGIN-------------------------- */
.login-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 350px; /* Ancho máximo del contenedor */
    padding: 20px;
    text-align: center;
    margin: 20px auto; /* Aseguramos que el contenedor esté centrado */
}

/* Espacio superior para que el login no quede pegado al encabezado */
.login-container {
    margin-top: 50px; /* Ajusta el valor de margin-top según el espacio deseado */
}

.welcome-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 5px; /* Reducir padding */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}



/* Títulos y logotipo */
.login-container h1,
.login-container h2.logo,
.login-container .subtext {
    margin: 0;
    padding: 0;
    text-align: left;
}

.login-container h1 {
    font-size: 1.5rem;
    font-weight: normal;
    color: #007bff;
    margin-bottom: 4px;
}

.login-container h2.logo {
    font-size: 2rem;
    font-weight: bold;
    color: #4C6A92;
    margin-bottom: 4px;
    animation: fadeInUp 1s ease-out forwards;
}

.login-container .subtext {
    font-size: 1rem;
    font-weight: normal;
    color: #333;
    margin-bottom: 15px;
}

/* Animación para el logo */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilo para el formulario de login */
.login-container .form-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-container label {
    font-size: 14px;
    color: #333;
    text-align: left;
}

.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="email"] {
    -webkit-appearance: none;
    appearance: none;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    transition: border 0.3s ease;
    width: 100%;
}

.login-container input[type="text"]:focus,
.login-container input[type="password"]:focus,
.login-container input[type="email"]:focus {
    border-color: #007BFF;
    outline: none;
}

/* Estilo para el checkbox y label de recordar datos */
.login-container .remember-me {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.login-container .remember-me input {
    margin-right: 8px;
}

.login-container .remember-me label {
    font-size: 12px;
    color: #333;
}

/* Botón de login */
.login-container .btn-login {
    padding: 12px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-container .btn-login:hover {
    background-color: #0056b3;
}

/* Enlace de Olvidé mi contraseña */
.login-container .forgot-password {
    font-size: 12px;
    margin-top: 10px;
}

.login-container .forgot-password a {
    color: #007BFF;
    text-decoration: none;
}

.login-container .forgot-password a:hover {
    text-decoration: underline;
}

/* Términos y condiciones */
.login-container .terms-and-conditions {
    font-size: 12px;
    margin-top: 20px;
}

.login-container .terms-and-conditions a {
    color: #007BFF;
    text-decoration: none;
}

.login-container .terms-and-conditions a:hover {
    text-decoration: underline;
}

#logoutButton {
    color: white;         /* Texto blanco */
}

/* Efecto al pasar el ratón sobre el botón */
#logoutButton:hover {
    background-color: #FF6F61;  /* Fondo rojo más oscuro en hover */
    transform: translateY(-3px); /* Levantar el botón ligeramente */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Aumentar la sombra */
}

/* Efecto de clic */
#logoutButton:active {
    transform: translateY(1px); /* Efecto de presionar hacia abajo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Vuelve la sombra al estado normal */
}

/* Añadir espacio al texto con la cédula */
#logoutButton span {
    margin-left: 8px;
    font-size: 14px; /* Hacer la cédula un poco más pequeña que el texto principal */
    font-weight: normal;
    color: rgba(255, 255, 255, 0.8); /* Color blanco con opacidad */
}

/* ----------------------------Fin contenedor principal del LOGIN-------------------------- */

/* --------------------Inicio contenedor Principal de course_selection ---------------------*/
.courses-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Títulos de la Sección de Cursos Inscritos */
.courses-list h2 {
    font-size: 24px;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 20px;
}

/* Estilo para cada curso */
.course-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.course-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.course-info {
    flex: 1;
}

.course-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.course-description {
    font-size: 14px;
    color: #777;
    margin-top: 5px;
}

/* Botones de Acceso a Curso */
.btn-course {
    padding: 10px 15px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease-in-out;
}

.btn-course:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

.btn-course:active {
    background-color: #004085;
}

/* Mensaje de Error (si el usuario no está inscrito en el curso) */
.error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    margin-top: 20px;
    text-align: center;
}

/* Footer de Términos y Condiciones */
.terms-and-conditions {
    margin-top: 20px;
    font-size: 12px;
    color: #777;
    text-align: center;
}

.terms-and-conditions a {
    color: #007BFF;
    text-decoration: none;
}

.terms-and-conditions a:hover {
    text-decoration: underline;
}

/* Estilos generales para la lista de cursos */
.courses-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

/* Estilo para cada item de curso */
.course-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #ffffff; /* Fondo blanco para los elementos de curso */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 600px; /* Limitar el ancho máximo */
    margin: 0 auto; /* Centrado de los elementos */
}

.course-item:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el ratón */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Aumentar la sombra al hacer hover */
}

/* Título del curso */
.course-title {
    font-size: 1.8em; /* Aumenta el tamaño de la fuente */
    font-weight: bold; /* Mantiene el texto en negrita */
    color: #ffffff; /* Color blanco para el texto */
    margin-bottom: 10px;
    text-transform: uppercase; /* Mayúsculas para dar un efecto más marcado */
    letter-spacing: 1px; /* Espaciado entre letras */
    padding: 10px 20px; /* Espaciado alrededor del texto */
    background-color: #3498db; /* Fondo azul para resaltar el título */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para un efecto de profundidad */
    transition: all 0.3s ease; /* Transición suave */
}

/* Efecto en el título cuando el usuario pasa el mouse sobre el curso */
.course-item:hover .course-title {
    transform: translateY(-5px); /* Efecto de elevación en hover */
    background-color: #2980b9; /* Fondo azul más oscuro en hover */
}

/* Descripción del curso */
.course-description {
    font-size: 1.1em; /* Tamaño de la fuente más grande */
    color: #555555; /* Color gris para el texto */
    margin-bottom: 20px; /* Espaciado debajo de la descripción */
    line-height: 1.6; /* Mayor espaciado entre líneas para mejor legibilidad */
}

/* Botón de acceso al curso */
.btn-course {
    background-color: #2ecc71; /* Fondo verde para el botón */
    color: white; /* Texto blanco */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 10px;
}

/* Efecto en el botón al pasar el mouse */
.btn-course:hover {
    background-color: #27ae60; /* Fondo verde más oscuro */
    transform: scale(1.05); /* Escalar ligeramente el botón */
}

/* Estilos cuando no hay cursos inscritos */
.no-courses {
    text-align: center;
    font-size: 1.2em;
    color: #e74c3c; /* Color rojo para advertencia */
}

/* ---------------------- Fin contenedor Principal de course_selection ---------------------*/