/* Estilos generales */
body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    text-align: center;
    color: #333;
}

/* Controles (Búsqueda y Filas) */
.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap; /* Para que se ajusten en pantallas pequeñas */
    gap: 10px; /* Espacio entre elementos */
}

.search-container input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-container button,
.row-count-container select,
.save-button-container button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    margin-left: 5px; /* Espacio entre input y botón */
}

.search-container button:hover,
.row-count-container select:hover,
.save-button-container button:hover {
    background-color: #0056b3;
}

.row-count-container label {
    margin-right: 5px;
}

/* Contenedor de la tabla para responsividad */
.table-container {
    width: 100%;
    overflow-x: auto; /* Añade scroll horizontal SOLO si es estrictamente necesario en pantallas MUY pequeñas */
}

/* Estilos de la tabla */
#dataTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* 4) Evitar scroll horizontal creciendo verticalmente */
    table-layout: fixed; /* Ayuda a controlar el ancho de las columnas */
    word-wrap: break-word; /* Fuerza el salto de línea en palabras largas */
    overflow-wrap: break-word; /* Estándar más nuevo para word-wrap */
}

#dataTable th,
#dataTable td {
    border: 1px solid #ddd;
    padding: 10px; /* Aumenta el padding para mejor legibilidad */
    text-align: left;
    vertical-align: top; /* Alinea el contenido arriba */
     white-space: normal !important; /* Asegura que el texto se ajuste */
}

/* 5) Cabecera con color diferente */
#dataTable thead th {
    background-color: #007bff; /* Azul */
    color: white;
    position: sticky; /* Fija la cabecera al hacer scroll vertical (opcional pero útil) */
    top: 0;
    z-index: 1;
}

/* Estilo para celdas editables */
#dataTable td[contenteditable="true"] {
    background-color: #f9f9f9; /* Un ligero fondo para indicar edición */
    cursor: text;
}
#dataTable td[contenteditable="true"]:focus {
    outline: 2px solid #007bff; /* Resaltar al enfocar */
    background-color: #eef;
}

/* 9) Columna ID no modificable (visualmente) */
#dataTable td[data-colname="ID"] {
    background-color: #eee; /* Gris claro para indicar no editable */
    font-weight: bold;
    cursor: default;
}
/* Columna TraduccionFinal no modificable */
#dataTable td[data-colname="TraducionFinal"] {
    background-color: #e0f2f7; /* Un color diferente para la calculada */
     cursor: default;
}


/* 2) Estilo para la fila activa (navegación con flechas) */
#dataTable tbody tr:focus {
    outline: 2px solid orange; /* Resaltar fila con foco */
    background-color: #fffacd; /* Amarillo claro */
}
/* Opcional: Estilo al pasar el ratón */
#dataTable tbody tr:hover {
    background-color: #f1f1f1;
}


/* 3) Botón para ir arriba */
#scrollTopBtn {
    display: none; /* Oculto por defecto */
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #555;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 18px;
    opacity: 0.7;
}

#scrollTopBtn:hover {
    background-color: #333;
    opacity: 1;
}

/* Clase para ocultar elementos (columnas/botones) */
.hidden {
    display: none !important; /* Importante para sobreescribir estilos de tabla */
}

/* 24) Estilo para resaltar búsqueda */
.highlight {
    background-color: yellow;
    font-weight: bold;
    padding: 0 2px; /* Pequeño padding para que no esté pegado */
    border-radius: 2px;
}

/* Contenedor del botón grabar */
.save-button-container {
    text-align: center; /* Centra el botón */
    margin-top: 20px;
}

/* Media Query para ajustar en pantallas pequeñas (Tablets/Teléfonos) */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    .controls {
        flex-direction: column; /* Apila los controles verticalmente */
        align-items: stretch; /* Estira los elementos al ancho completo */
    }
    .search-container, .row-count-container {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }
    .search-container input[type="text"] {
        width: calc(100% - 110px); /* Ajusta el ancho del input */
    }
    #dataTable th,
    #dataTable td {
        padding: 8px; /* Reduce el padding en pantallas pequeñas */
        font-size: 14px; /* Reduce tamaño de fuente si es necesario */
    }
    /* Si aún se necesita scroll horizontal en pantallas muy pequeñas,
       se podría considerar ocultar columnas menos importantes por defecto
       o implementar un diseño de tabla más complejo (como cards).
       Pero el word-wrap debería ser suficiente según el requisito 4.
    */
}

@media (max-width: 480px) {
     #dataTable th,
    #dataTable td {
        font-size: 12px; /* Aún más pequeño para teléfonos */
    }
     .search-container input[type="text"] {
        width: calc(100% - 95px); /* Ajusta para botones más pequeños */
    }
     .search-container button,
     .row-count-container select {
         padding: 6px 10px;
     }
}