/* Variables para colores (Paleta: Eclipse y Horizontes Lejanos) */
:root {
    --bg-dark: #050510;        /* Fondo principal: Negro muy profundo casi azulado */
    --text-light: #EEEEEE;    /* Texto general claro */
    --accent-color: #4682B4;  /* Acento principal: Azul acero (títulos, enlaces) */
    --secondary-accent: #A9A9A9; /* Acento secundario: Gris claro (bordes, detalles, texto footer) */
    --menu-bg: #1F2228;        /* Fondo de menú/paneles: Gris oscuro ligeramente azulado */
    --menu-hover: #2C333E;    /* Hover de menú: Tono más oscuro del fondo de menú */
    --table-header: #282B33;  /* Fondo de encabezado de tabla: Tono más oscuro para contraste */
}

/* Reset básico y estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif; /* Usamos una fuente genérica, sin externas */
    background-color: var(--bg-dark);
    color: var(--text-light);
    line-height: 1.6;
}

.container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    gap: 20px; /* Espacio entre las columnas */
}

/* --- Encabezado (Header) --- */
header {
    background-color: var(--menu-bg);
    padding: 20px 0;
    text-align: center;
    border-bottom: 1px solid var(--secondary-accent);
}

.logo h1 {
    font-size: 3em;
    color: var(--text-light);
    letter-spacing: 2px;
    margin: 0;
    /* Simulate 500px height for logo area */
    min-height: 100px; /* A just to make it visibly distinct if no image is used */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* REGLAS para el enlace del logo (del ajuste anterior) */
.logo-link {
    text-decoration: none; /* Quita el subrayado */
    color: inherit; /* Hereda el color del padre (h1 en este caso) */
    display: block; /* Para que ocupe todo el ancho disponible del div.logo */
    height: 100%; /* Asegura que el área clicable sea toda la altura del logo */
}

.logo-link h1 {
    color: var(--text-light); /* Asegura que el color del texto sea el deseado */
}

.logo-link:hover h1 {
    color: var(--accent-color); /* Efecto hover para el texto del título */
}

/* --- Barra Lateral (Sidebar / Menú) --- */
.sidebar {
    flex: 1 1 250px; /* Crece y encoge, base de 250px */
    background-color: var(--menu-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    min-height: 500px; /* Para que sea visible en caso de poco contenido */
}

.menu ul {
    list-style: none;
}

.menu ul li {
    margin-bottom: 10px;
    /* Eliminamos el padding-left de aquí para que no afecte al menú */
}

.menu ul li a {
    display: block;
    color: var(--text-light);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.menu ul li a:hover {
    background-color: var(--menu-hover);
    color: var(--accent-color);
}

.submenu {
    list-style: none;
    margin-left: 15px; /* Esto ya proporciona cierta indentación al submenú */
    border-left: 2px solid var(--secondary-accent); /* Borde del submenú */
    padding-left: 10px; /* Esto también indentará el contenido del submenú */
    margin-top: 5px;
    display: none; /* Oculto por defecto, se muestra con JS */
}

/* Eliminamos el padding-left de los li del submenú para que no se doble la indentación */
.submenu li {
    /* padding-left: 10px; */
}

.has-submenu > a {
    position: relative;
}

.has-submenu > a::after {
    content: '▶'; /* Flecha derecha */
    position: absolute;
    right: 10px;
    transition: transform 0.3s ease;
    color: var(--secondary-accent); /* Color de la flecha */
}

.has-submenu.active > a::after {
    transform: rotate(90deg); /* Flecha hacia abajo cuando está activo */
}

.submenu li a {
    padding: 5px 10px;
    font-size: 0.95em;
}

/* --- Contenido Principal (Content) --- */
.content {
    flex: 3 1 600px; /* Crece y encoge, base de 600px */
    background-color: var(--menu-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

/* **NUEVA REGLA: Aplica tabulación solo a los <li> dentro de .content** */
.content li {
    margin-bottom: 8px; /* Mantén el margen original si lo deseas */
    padding-left: 20px; /* Ajusta este valor para la tabulación deseada */
    text-indent: -20px; /* Esto crea un efecto de "sangría francesa" para la viñeta */
}

.content ul {
    list-style-type: disc; /* Asegura que se vean las viñetas */
    margin-left: 20px; /* Esto ya proporciona una indentación general para la lista */
    margin-bottom: 15px;
}


.content h2 {
    color: var(--accent-color);
    margin-bottom: 20px;
    font-size: 2.2em;
    border-bottom: 2px solid var(--secondary-accent);
    padding-bottom: 10px;
}

.content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.content p {
    margin-bottom: 15px;
    text-align: justify;
}

.content h3 {
    color: var(--accent-color);
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.8em;
}

/* Tabla */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: var(--bg-dark);
    border-radius: 8px;
    overflow: hidden; /* Para que los border-radius se apliquen a la tabla */
}

table th, table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--secondary-accent);
}

table th {
    background-color: var(--table-header);
    color: var(--accent-color);
    font-weight: bold;
}

table tr:last-child td {
    border-bottom: none;
}

/* Efecto hover en filas de tabla */
table tbody tr:hover {
    background-color: var(--menu-hover);
}
/* --- Cielo Mes a Mes --- */
.sky-month {
    flex: 1 1 100%; /* Ocupa todo el ancho en la parte inferior */
    background-color: var(--menu-bg);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.sky-month h2 {
    color: var(--accent-color);
    margin-bottom: 15px;
    font-size: 1.8em;
}

.month-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.month-selector button {
    background-color: var(--accent-color);
    color: var(--text-light);
    border: none;
    padding: 10px 15px;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.month-selector button:hover {
    background-color: var(--secondary-accent); /* El botón cambia a gris claro en hover */
    color: var(--bg-dark); /* Color de texto para el botón en hover si el fondo es claro */
}

.month-selector span {
    font-size: 1.5em;
    margin: 0 20px;
    color: var(--text-light);
}

.month-content p {
    font-size: 1.1em;
    color: var(--text-light);
}


/* --- Pie de Página (Footer) --- */
footer {
    background-color: var(--menu-bg);
    color: var(--secondary-accent);
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--secondary-accent);
    font-size: 0.9em;
}

/* --- Media Queries para Responsive Design --- */

/* Pantallas más pequeñas (ej. tablets y móviles) */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Apila las columnas */
        padding: 0 10px;
    }

    .sidebar, .content, .sky-month {
        flex: none; /* Deshabilita el crecimiento/encogimiento para que ocupen todo el ancho */
        width: 100%;
        margin-bottom: 20px; /* Añade espacio entre secciones apiladas */
    }

    .logo h1 {
        font-size: 2.5em;
    }

    .menu ul li a, .submenu li a {
        font-size: 1em;
        padding: 10px 12px;
    }

    .has-submenu > a::after {
        right: 5px; /* Ajusta la posición de la flecha */
    }

    /* Ajuste para el contenido en pantallas pequeñas */
    .content li {
        padding-left: 15px; /* Menor tabulación en móviles si es necesario */
        text-indent: -15px;
    }
}

/* Pantallas muy pequeñas (ej. móviles) */
@media (max-width: 480px) {
    header {
        padding: 15px 0;
    }

    .logo h1 {
        font-size: 2em;
        min-height: 80px;
    }

    .sidebar, .content, .sky-month {
        padding: 15px;
        margin-bottom: 15px;
    }

    .content h2 {
        font-size: 1.8em;
    }

    .content h3 {
        font-size: 1.5em;
    }

    table th, table td {
        padding: 8px 10px;
        font-size: 0.9em;
    }

    .month-selector button {
        padding: 8px 12px;
        font-size: 1em;
    }

    .month-selector span {
        font-size: 1.2em;
        margin: 0 10px;
    }
}

/* --- TABLAS RESPONSIVAS --- */
/* Estilos por defecto para pantallas grandes */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: var(--bg-dark);
    border-radius: 8px;
    overflow: hidden; /* Para que los border-radius se apliquen */
    /* Aquí no ponemos overflow-x: auto global, lo manejaremos con el media query si fuera necesario */
}

table th, table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--secondary-accent);
    white-space: normal; /* Permitimos que el texto se envuelva */
    word-wrap: break-word; /* Rompe palabras largas */
}

table th {
    background-color: var(--table-header);
    color: var(--accent-color);
    font-weight: bold;
}

/* Efecto hover en filas de tabla */
table tbody tr:hover {
    background-color: var(--menu-hover);
}

/* MEDIA QUERY para pantallas pequeñas */
@media screen and (max-width: 768px) {
    /* Oculta los encabezados de la tabla en pantallas pequeñas */
    table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    /* Cada fila se convierte en un bloque */
    table tr {
        border: 1px solid var(--secondary-accent);
        display: block;
        margin-bottom: 20px;
        border-radius: 8px; /* Opcional: bordes redondeados para cada "tarjeta" de fila */
    }

    /* Cada celda se convierte en un bloque y preparamos el espacio para la etiqueta */
    table td {
        border-bottom: 1px solid var(--menu-hover); /* Separador entre elementos de la "tarjeta" */
        display: block;
        text-align: right; /* Alinea el valor a la derecha */
        padding-left: 50%; /* Deja espacio a la izquierda para la etiqueta */
        position: relative; /* Para posicionar el pseudo-elemento */
        font-size: 0.95em; /* Ligeramente más pequeño el texto de la celda */
    }

    /* La última celda de cada fila no tiene borde inferior */
    table td:last-child {
        border-bottom: 0;
    }

    /* Añade la etiqueta (encabezado de la columna) usando el atributo data-label */
    table td::before {
        content: attr(data-label); /* Toma el texto del atributo data-label */
        position: absolute;
        left: 15px; /* Posiciona la etiqueta a la izquierda */
        width: 45%; /* Ocupa casi la mitad del espacio */
        padding-right: 10px;
        white-space: nowrap; /* Evita que la etiqueta se envuelva */
        overflow: hidden; /* Oculta si la etiqueta es demasiado larga */
        text-overflow: ellipsis; /* Añade puntos suspensivos si se oculta */
        font-weight: bold;
        color: var(--accent-color); /* Color de acento para la etiqueta */
        text-align: left; /* Alinea la etiqueta a la izquierda */
    }
}

/* Opcional: Si en pantallas grandes (desktop) la columna de visibilidad sigue siendo demasiado ancha
   y quieres que, como ÚLTIMO RECURSO, aparezca un scroll horizontal SOLO para esa columna,
   podrías usar esto, pero es una solución menos limpia: */
/*
@media (min-width: 769px) {
    table td:nth-child(4) { // Columna de VISIBILIDAD
        max-width: 400px; // Limita su ancho
        overflow-x: auto; // Activa scroll horizontal solo para esta celda si es necesario
        white-space: nowrap; // El texto no se envuelve si activas el scroll aquí
    }
}
*/