/* --- General Body Styling --- */
body {
    display: flex;
    flex-direction: row; /* Distribuye nav y contenido horizontalmente */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background: #215086ce; /* Fondo principal */
}

/* --- Navigation Styling --- */
nav {
    width: 130px; /* Ancho fijo del menú */
    background-color: #607D8B; /* Azul grisáceo */
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    padding: 20px;
    position: fixed; /* Fijo a la izquierda */
    top: 0;
    left: 0;
}

nav ul {
    list-style-type: none; /* Elimina viñetas */
    padding: 0; /* Elimina padding */
}

nav ul li {
    margin-bottom: 20px; /* Separación entre elementos */
}

nav ul li a {
    color: white; /* Texto blanco */
    text-decoration: none; /* Sin subrayado */
    font-weight: bold; /* Negrita */
    font-size: 18px; /* Tamaño del texto */
}

nav ul li a:hover {
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

/* --- Main Container Styling --- */
.container {
    margin-left: 150px; /* Espacio para el menú fijo */
    background: #fff; /* Fondo blanco */
    padding: 50px; /* Espaciado interno */
    border-radius: 20px; /* Bordes redondeados */
    box-shadow: 0 15px 30px rgba(5, 0, 0, 0.1); /* Sombra */
    max-width: 1400px; /* Ancho máximo */
    overflow-y: auto; /* Scroll si el contenido es largo */
}

/* --- Section Styling --- */
section {
    margin-bottom: 40px; /* Espaciado entre secciones */
}

section h2 {
    margin-bottom: 20px; /* Espacio entre título y contenido */
}

/* --- Image Container Styling --- */
.imagencontenedor {
    display: flex; /* Activar flexbox */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    margin: 20px auto; /* Centrado automático */
    max-width: 600px; /* Ancho máximo */
    max-height: 400px; /* Altura máxima */
    overflow: hidden; /* Esconder contenido desbordado */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra */
    background-color: #fff; /* Fondo blanco */
}

.imagencontenedor img {
    max-width: 100%; /* Escalar al ancho del contenedor */
    height: auto; /* Mantener proporciones */
    display: block; /* Asegura que sea un bloque */
}

/* --- Table Styling --- */
table {
    width: 100%; /* Ancho completo */
    border-collapse: collapse; /* Elimina espacios entre celdas */
    margin: 20px 0; /* Espaciado superior e inferior */
    background-color: #fff; /* Fondo blanco */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden;
}

th, td {
    border: 1px solid #ddd; /* Bordes suaves */
    padding: 10px; /* Espaciado interno */
    text-align: left; /* Texto alineado a la izquierda */
}

th {
    background-color: #607D8B; /* Azul grisáceo */
    color: white; /* Texto blanco */
    font-weight: bold; /* Texto en negrita */
}

tbody tr:nth-child(even) {
    background-color: #f5f5f5; /* Fondo para filas pares */
}

tbody tr:hover {
    background-color: #e0e0e0; /* Fondo al pasar el ratón */
}
/* --- Hover Image Styling para Dispositivos Internos --- */
.hover-image {
    position: relative; /* Asegura que las imágenes estén posicionadas respecto al texto */
}

.hover-image img {
    display: none; /* Oculta las imágenes por defecto */
    position: absolute; /* Posiciona la imagen fuera del flujo del documento */
    top: 0; /* Ajusta la posición vertical */
    left: 100%; /* Ubica la imagen al lado derecho del texto */
    transform: translate(-50%, 0); /* Ajusta la imagen para centrarla horizontalmente */
    width: 100px; /* Tamaño reducido de la imagen */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Agrega sombra para mayor contraste */
    border-radius: 10px; /* Bordes redondeados */
    background-color: #fff; /* Fondo blanco */
    z-index: 10; /* Garantiza que las imágenes estén visibles sobre otros elementos */
}

.hover-image:hover img {
    display: block; /* Muestra la imagen al pasar el cursor por encima */
}


/* --- General Text Styling --- */
h1, h2 {
    text-align: center; /* Texto centrado */
    color: #333; /* Gris oscuro */
}

p {
    font-size: 1.2em; /* Tamaño del texto */
    color: #555; /* Gris medio */
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    body {
        flex-direction: column; /* Apilar elementos verticalmente */
    }

    nav {
        width: 100%; /* Ancho completo */
        height: auto; /* Altura automática */
        position: static; /* Posición normal */
        padding: 10px;
    }

    .container {
        margin-left: 0; /* Elimina margen izquierdo */
        width: 100%; /* Ancho completo */
        padding: 20px; /* Espaciado interno */
    }

    table {
        display: block; /* Tabla apilada */
        overflow-x: auto; /* Scroll horizontal si es necesario */
        white-space: nowrap; /* Evita ajuste de líneas */
    }
}