/* styles.css - Versión 7.0 */

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background-color: #F3F4F6;
}

/* Título principal del simulador */
#main-title {
    text-align: center;
    margin-top: 20px;
}

#main-title h1 {
    font-size: 1.8em;
    color: #333;
}

/* Contenedor principal del simulador */
#spreadsheet {
    width: 80%;
    border: 1px solid #BFBFBF;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-top: 10px;
}

#toolbar {
    background-color: #217346;
    color: white;
    padding: 12px 10px; /* Altura ligeramente mayor */
    text-align: center;
    font-weight: bold;
}

#toolbar h2 {
    margin: 0;
    font-size: 1.4em;
}

/* Tabla de Excel */
#excel-table {
    width: 100%;
    border-collapse: collapse;
}

#excel-table th, #excel-table td {
    border: 2px solid black; /* Bordes negros */
    padding: 8px;
    min-width: 80px;
}

/* Estilos para encabezados de columna y números de fila */
thead th {
    background-color: #E0E0E0; /* Fondo gris claro */
    font-weight: bold;
    color: #000000;
    text-align: center; /* Centrado para encabezados */
    vertical-align: middle;
}

tbody th {
    background-color: #E0E0E0; /* Fondo gris claro */
    font-weight: bold;
    color: #000000;
    text-align: center; /* Centrado para números de fila */
    vertical-align: middle;
    width: 10px; /* Ancho reducido para los números de fila */
}

/* Celdas de datos alineadas a la izquierda */
td {
    background-color: #FFFFFF;
    cursor: text;
    color: #000000;
    text-align: left;
}

/* Estilo para celdas de encabezado especificadas en config */
.header-cell {
    background-color: #FFFFFF;
    font-weight: bold;
    text-align: center;
}

td:focus {
    outline: 2px solid #217346; /* Verde similar a celda activa en Excel */
    background-color: #E8F5E9; /* Color de fondo para celdas activas */
}

/* Estilos para los recuadros de Instrucciones y Ayuda */
#footer-instructions {
    width: 80%;
    margin-top: 20px;
    text-align: left;
}

.instruction-box, .help-box {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 1em;
    line-height: 1.5;
}

.instruction-box h2, .help-box h2 {
    font-size: 1.1em;
    color: #217346;
    margin: 0;
    font-weight: bold;
}

.instruction-box p, .help-box p {
    margin-top: 5px;
    color: #333;
}

/* Estilo para el botón de ayuda */
#toggle-help {
    padding: 8px 12px; /* Espaciado interno */
    background-color: #D3D3D3; /* Gris claro */
    color: black; /* Color de texto */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar cursor al pasar sobre el botón */
    font-size: 14px; /* Tamaño de fuente */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
}

#toggle-help:hover {
    background-color: #C0C0C0; /* Color más oscuro al pasar el mouse */
}

/* Ajuste de la caja de mensaje de fórmula correcta */
.message-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #81C784;  /* Verde pastel */
    color: white;
    padding: 18px;  /* Aumento del padding para mayor altura */
    border-radius: 5px;
    font-size: 18px;  /* Mantener el tamaño de fuente en 18px */
    width: 250px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Recuadro de ejercicios completados */
.completed-list {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f1f1f1;
    color: #333;
    padding: 20px;
    border-radius: 5px;
    font-size: 14px;
    width: 300px;
    text-align: left;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    border: 2px solid #d3d3d3; /* Borde gris claro */
}

/* Estilo para la X de cierre en el recuadro de ejercicios completados */
.close-button {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-size: 18px;  /* Similar al estilo de cierre del cuadro de "Ejercicio completado" */
}

/* Estilo para el cuadro de "Ejercicio completado" */
.completion-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #4CAF50; /* Verde */
    color: white;
    padding: 20px;
    border-radius: 5px;
    font-size: 12px !;
    width: 300px;
    text-align: center;
}

.completion-message .close-button {
    font-size: 18px;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 10px;
}

#custom-footer {
    text-align: center;
    font-size: 0.9em;
    color: #555;
    margin-top: 20px;
    padding: 10px;
    background-color: #F0F0F0;
    border-top: 1px solid #DDD;
}
#custom-footer a {
    color: #217346;
    text-decoration: none;
    font-weight: bold;
}
#custom-footer a:hover {
    text-decoration: underline;
}


.exercise-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.primary-button,
.icon-button,
.secondary-button,
.danger-button {
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.primary-button {
    padding: 8px 16px;
    background-color: #217346;
    color: white;
}

.icon-button {
    padding: 7px 16px;
    background-color: #217346;
    color: #FFD700;
}

.secondary-button {
    margin: 10px;
    padding: 8px 16px;
    background-color: #D3D3D3;
    color: black;
}

.danger-button {
    margin: 10px;
    padding: 8px 16px;
    background-color: #FF3333;
    color: white;
}

.exercise-select {
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.formula-cell {
    background-color: #FFFACD;
}

.correct-cell {
    background-color: #DFF5E1 !important;
    cursor: pointer;
    font-weight: bold;
}

.formula-preview {
    background-color: #E8F5E9 !important;
    color: #217346;
    font-family: Consolas, monospace;
}

.completed-grid {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin-bottom: 1px;
}

.completed-item-done,
.completed-item-pending {
    margin: 0;
    font-size: 14px;
}

.completed-item-done {
    color: #4CAF50;
}

.completed-item-pending {
    color: #FF5252;
}

.confirmation-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f1f1f1;
    color: #333;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    width: 300px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    border: 2px solid #d3d3d3;
    z-index: 10000;
}

.modal-close {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}


.modal-actions-centered {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}