/* COLORES AZULES */
    
    :root {
    --color-primary-bg: #f0f2f5;
    --color-secondary-bg: #ffffff;
    --color-text-dark: #334155;
    --color-accent: #4299E1; /* Medium Blue - New main accent color for a professional, calm feel */
    --color-accent-hover: #3182CE; /* Darker Blue - For hover states */
    --color-border: #e2e8f0;
    --color-shadow: rgba(0, 0, 0, 0.08);
    --color-light-text: #607d8b; /* A lighter shade for secondary text if needed */
    --color-title-accent: #B29B35; /* Soft Golden Bronze - Kept for warmth and contrast with blue */
    --color-tarjeta:#ffffff;

    /* New harmonious colors for table rows, adjusted to align with blue accent and golden title */
    --table-header-bg-new: #EBF4FF; /* Very light blue for table header */
    --table-row-bg-1: #FDFEFF; /* Off-white / very pale cool tint */
    --table-row-bg-2: #F7FCFF;
    --table-row-bg-3: #F3F8FF;
    --table-row-bg-4: #EEF5FF;
    --table-row-bg-5: #E8F0FF;
    --table-row-bg-6: #E3EBFF;
    --table-row-bg-7: #DEE6FF;
    --table-row-bg-8: #D9E1FF;

    /* New colors for table header */
    --color-table-header-bg: var(--table-header-bg-new); /* Use the new light blue */
    --color-table-header-text: var(--color-text-dark); /* Use dark text for better contrast */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-primary-bg);
    color: var(--color-text-dark);
    line-height: 1.4;
    font-size:0.9em;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px; /* Reduced padding */
}

header {
    background-color: var(--color-secondary-bg);
    padding: 5px 0; /* Further reduced padding to make header narrower */
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 4px 8px var(--color-shadow); /* Soft shadow */
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px; /* Reduced padding for container inside header */
}

header h1 {
    margin: 0;
    color: var(--color-accent);
    font-size: 1.4em; /* Further reduced title size */
    letter-spacing: -0.5px; /* Add a subtle touch */
    line-height: 1.2; /* Adjust line height for multiline title */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align text to the left within the h1 */
}

header h1 small {
    font-size: 0.7em; /* Further reduced size for "Prof. Elena Álvarez" */
    color: var(--color-light-text); /* Slightly lighter color for secondary line */
    font-weight: normal;
    margin-top: 2px; /* Small margin between lines */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Further reduced gap */
}

nav a {
    text-decoration: none;
    color: var(--color-text-dark);
    font-weight: 500;
    font-size: 0.95em; /* Further reduced font size */
    padding: 3px 8px; /* Further reduced padding to make nav links smaller */
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    display: flex; /* Make nav links flex containers */
    align-items: center; /* Vertically center icon and text */
    gap: 5px; /* Space between icon and text */
}

nav a .material-symbols-outlined {
    font-size: 1em; /* Adjust icon size to match text */
    color: inherit; /* Inherit color from the link */
}

nav a:hover {
    background-color: var(--color-accent);
    color: var(--color-secondary-bg);
    transform: translateY(-2px); /* Subtle lift on hover */
}

nav a.active {
    background-color: var(--color-accent);
    color: var(--color-secondary-bg);
    box-shadow: 0 2px 5px var(--color-shadow); /* Active state shadow */
}

main {
    padding: 20px 0; /* Reduced padding */
    min-height: calc(100vh - 180px); /* Adjust based on header/footer height */
}

.content-section {
    background-color: var(--color-secondary-bg);
    padding: 30px; /* Reduced padding */
    border-radius: 8px;
    box-shadow: 0 8px 20px var(--color-shadow); /* Slightly more pronounced but soft shadow */
    margin-bottom: 20px; /* Reduced margin */
}



.content-section1 {
    background-color: #fff;
    padding: 30px; /* Reduced padding */
    border-radius: 8px;
    box-shadow: 0 8px 20px var(--color-shadow); /* Slightly more pronounced but soft shadow */
    margin-bottom: 20px; /* Reduced margin */
}


/* Specific styling for the materials page section to make it wider */
#materials-section {
     /* width: 90vw; Make it take 90% of viewport width */
    max-width: 1150px; /* Set a sensible maximum width */
    margin: 0px auto; /* Center the section on the page */
    /* It inherits padding, background, border-radius, box-shadow from .content-section */
}

h2 {
    color: var(--color-title-accent); /* Changed title color */
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 10px; /* Reduced padding */
    margin-top: 0;
    margin-bottom: 20px; /* Reduced margin */
    font-size: 1.3em; /* Reduced font size */
    position: relative; /* For potential pseudo-elements */
    display: flex; /* Make h2 a flex container to align icon */
    align-items: center; /* Vertically center icon and text */
}

h2::after {
    content: '';
    display: block;
    width: 60px; /* Small underline accent */
    height: 3px;
    background-color: var(--color-title-accent); /* Changed accent color to match title */
    position: absolute;
    bottom: -1px; /* Adjust to sit right on the border */
    left: 0;
    border-radius: 2px;
}

/* Style for Material Symbols icons within h2 */
h2 .material-symbols-outlined {
    font-size: 1.1em; /* Slightly larger icon */
    margin-right: 10px; /* Reduced space between icon and text */
    color: var(--color-title-accent); /* Ensure icon uses accent color */
}

h3 {
    color: var(--color-text-dark);
    margin-top: 0;
    font-size: 1.3em; /* Slightly smaller */
}

/* Style for icons within card h3 */
.card h3 .material-symbols-outlined {
    font-size: 1em; /* Keep it consistent with h3 text size */
    margin-right: 8px; /* Space between icon and text */
    color: var(--color-accent); /* Ensure it's accent color */
}

p {
    margin-bottom: 10px; /* Reduced margin */
    color: var(--color-text-dark);
}

ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 15px; /* Reduced margin */
}

li {
    margin-bottom: 5px; /* Reduced margin */
    color: var(--color-text-dark);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Slightly smaller min width */
    gap: 20px; /* Reduced gap */
    margin-top: 20px; /* Reduced margin */
}




/* Specific adjustment for tab buttons to make them smaller to accommodate more themes */
.tab-buttons-container.card-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Smaller min width for tab buttons */
    gap: 15px; /* Reduced gap between tab buttons */
}

.card {
    background-color: var(--color-primary-bg);
    border-radius: 8px;
    padding: 20px; /* Reduced padding */
    box-shadow: 0 2px 8px var(--color-shadow); /* Lighter shadow for cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Added border-color transition */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--color-border); /* Subtle border for definition */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--color-shadow); /* More pronounced hover shadow */
}

.card h3 {
    margin-bottom: 8px; /* Reduced margin */
    color: var(--color-accent);
    font-size: 1.2em; /* Slightly smaller */
}

.card p {
    font-size: 0.9em; /* Slightly smaller font */
    color: var(--color-light-text); /* Slightly lighter text for card descriptions */
    flex-grow: 1;
}


.card1 {
    background-color: var(--color-tarjeta);
    border-radius: 8px;
    padding: 10px; /* Reduced padding */
    box-shadow: 0 2px 8px var(--color-shadow); /* Lighter shadow for cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Added border-color transition */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--color-border); /* Subtle border for definition */
}


.card1 h3 {
    margin-bottom: 8px; /* Reduced margin */
    color: var(--color-accent);
    font-size: 1.2em; /* Slightly smaller */
}

.card1 p {
    font-size: 0.9em; /* Slightly smaller font */
    color: var(--color-light-text); /* Slightly lighter text for card descriptions */
    flex-grow: 1;
        margin-top: 0.3em;  /* Espacio arriba del párrafo */
    margin-bottom: 0em
}


.card2 {
    background-color: var(--color-tarjeta);
    border-radius: 8px;
    padding: 10px; /* Reduced padding */
    box-shadow: 0 2px 8px var(--color-shadow); /* Lighter shadow for cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Added border-color transition */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--color-border); /* Subtle border for definition */
        /* Añadido para centrar y controlar ancho */
        width: 70%;
    margin: 0 auto; /* Centra horizontalmente */
}


.card2 p {
    font-size: 1em; /* Slightly smaller font */
    color: var(--color-light-text); /* Slightly lighter text for card descriptions */
    flex-grow: 1;
        margin-top: 0.3em;  /* Espacio arriba del párrafo */
    margin-bottom: 0em
}


.button {
    display: inline-block;
    background-color: var(--color-accent);
    color: white;
    padding: 10px 20px; /* Reduced padding */
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px; /* Reduced margin */
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px var(--color-shadow);
}

.button:hover {
    background-color: var(--color-accent-hover);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--color-shadow);
}

/* New styles for material list items */
.material-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
}

.material-item {
    background-color: var(--color-primary-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 12px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 1px 4px var(--color-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.material-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px var(--color-shadow);
}

.material-item .material-symbols-outlined {
    font-size: 1.3em;
    color: var(--color-accent);
    flex-shrink: 0;
    padding-top: 2px;
}

.material-item a {
    font-weight: 500;
    color: var(--color-text-dark); /* Make link text dark by default */
    text-decoration: none;
    transition: color 0.3s ease;
}

.material-item a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* Specific styling for book items */
.material-item.book-item {
    font-size: 0.95em;
    color: var(--color-text-dark);
}

.intro-image {
    width: 100%;
    max-width: 600px; /* Limit max width for better aesthetic */
    height: auto;
    display: block;
    margin: 25px auto 0 auto; /* Center the image and add top margin */
    border-radius: 10px; /* Slightly more rounded corners */
    box-shadow: 0 4px 15px var(--color-shadow); /* Soft shadow */
    object-fit: cover; /* Ensure image covers the area without distortion */
}

footer {
    background-color: var(--color-text-dark);
    color: white;
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid var(--color-border);
}

footer p {
    margin: 0;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
}

/* ===== Estilos para la tabla de materiales ===== */
/* ===== Estilos para la tabla de materiales mejorada ===== */
/* ===== Tabla de materiales con Grid (limpio y funcional) ===== */
.materials-table {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr; /* 5 columnas */
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 30px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--color-shadow);
  /* Asegura que cada fila tome la altura del contenido más alto */
  grid-auto-rows: auto;
}

/* Cabeceras (primeras 5 celdas) */
.table-header {
  background-color: var(--color-table-header-bg);
  color: var(--color-table-header-text);
  font-weight: 600;
  text-align: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);

  /* Para centrar verticalmente el texto de cabecera */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Si quieres cabecera sticky mientras haces scroll: */
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Celdas de datos (todas las celdas que no son cabecera) */
.materials-table > div {
  padding: 6px 8px;                   /* menos espacio vertical */
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  word-break: break-word;
  text-align: center;

  /* Centrado vertical/horizontal mediante Flex */
  display: flex;
  align-items: center;                 /* <— CENTRO VERTICAL */
  justify-content: center;             /* <— CENTRO HORIZONTAL */
}

/* Quitar borde derecho en última columna de cada fila */
.materials-table > div:nth-child(5n) {
  border-right: none;
}

/* Primera columna de cada fila de datos: texto más pequeño (sin afectar cabeceras) */
.materials-table > div:nth-child(5n+1):not(.table-header) {
  font-size: 0.9em;
  line-height: 1.25;
  /* Si prefieres alineado a la izquierda en la primera col: */
  /* justify-content: flex-start; text-align: left; */
}

/* Alternancia de color por fila (bloques de 5 celdas) */
.materials-table > div:nth-child(10n+1),
.materials-table > div:nth-child(10n+2),
.materials-table > div:nth-child(10n+3),
.materials-table > div:nth-child(10n+4),
.materials-table > div:nth-child(10n+5) {
  background-color: var(--table-row-bg-1);
}
.materials-table > div:nth-child(10n+6),
.materials-table > div:nth-child(10n+7),
.materials-table > div:nth-child(10n+8),
.materials-table > div:nth-child(10n+9),
.materials-table > div:nth-child(10n+10) {
  background-color: var(--table-row-bg-2);
}

/* Hover sutil */
.materials-table > div:hover {
  background-color: #F0F4F2;
}

/* Enlaces e iconos dentro de celdas */
.materials-table .download-link,
.materials-table .explore-link,
.materials-table .info-link {
  display: inline-flex;            /* respeta el centrado del contenedor */
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}
.materials-table .download-link:hover,
.materials-table .explore-link:hover,
.materials-table .info-link:hover {
  color: var(--color-accent-hover);
}
.materials-table .material-symbols-outlined {
  font-size: 1.8em;               /* un poco más compacto */
}

/* ===== Responsive: apilar en móvil ===== */
@media (max-width: 768px) {
  .materials-table {
    grid-template-columns: 1fr;
  }
  .table-header { display: none; }    /* opcional: ocultar cabeceras */
  .materials-table > div {
    border-right: none;
    justify-content: flex-start;      /* más natural en móvil */
    text-align: left;
  }
}





/* Estilo general de la tabla */
.custom-table {
    width: 80%;
    margin: 0 auto; /* Centrar */
    border-collapse: collapse; /* Unir bordes */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden; /* Para que las esquinas redondeadas funcionen */
}

/* Encabezado */
.custom-table thead {
    background-color: var(--table-row-bg-2); /* Color del encabezado */
    color: var(--color-accent);
    font-weight: bold;
}

.custom-table thead th {
    padding: 8px;
    text-align: center;
}

/* Filas alternas */
.custom-table tbody tr:nth-child(odd) {
    background-color: var(--table-row-bg-4); /* Fondo para filas impares */
}

.custom-table tbody tr:nth-child(even) {
    background-color:var(--table-row-bg-6); /* Fondo para filas pares */
}

/* Celdas */
.custom-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

/* Hover en filas */
.custom-table tbody tr:hover {
    background-color: #DEE6FF; /* Cambio de color al pasar el ratón */
}


/* ===== Tabla 3 columnas — versión mejorada y parametrizable ===== */

/* === Tabla principal de 3 columnas === */
.tabla-3col {
  width: 100%;
  border-collapse: separate;  /* permite bordes redondeados */
  border-spacing: 0;
  background: var(--color-secondary-bg);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px; /* separación entre tablas */
}

.tabla-3col td {
  border: 1px solid var(--color-border);
  vertical-align: top;
  padding: 14px 12px;
  line-height: 1.5;
}

.tabla-3col tr:nth-child(odd) {
  background: var(--color-secondary-bg);
}

.tabla-3col tr:nth-child(even) {
  background: var(--color-primary-bg);
}


.fila-segunda { background-color: var(--color-bg-2); }


.tabla-3col tr:hover {
  background-color: rgba(0, 123, 255, 0.08);
  transition: background-color 0.3s ease;
}

/* Columnas */
.col-icono {
  width: 5%;
  text-align: center;
  vertical-align: top;
}

.col-descripcion {
  width: 50%;
}



.col-imagen {
  width: 25%;
  text-align: center;
}

/* Bullet */
.bullet {
  width: 14px;
  height: 19px;
  display: inline-block;
  vertical-align: top;
  background-color: rgba(0, 123, 255, 0.08);
  padding: 4px;
  border-radius: 50%;
}

/* Imagen de marca */
.brand-img {
  max-width: 100%;
  height: auto;
}

/* === Subtablas internas (enlaces) === */
.subtabla,
.subtabla1 {
  width: 100%;
  border-collapse: collapse;
}

.subtabla td,
.subtabla1 td {
  padding: 6px 4px;
  border: none;
  vertical-align: middle;
}

.subtabla tr,
.subtabla1 tr {
  background-color: transparent !important; /* sin alternancia de color */
}

.subtabla1 td {
  padding: 2px 4px;
  text-align: left;
}

/* Separador entre elementos */
.separador {
  height: 16px;
}

/* === Bloque final test === */
.test {
  width: 90%;
  margin: 24px auto 8px;
  padding: 12px;
  background: var(--color-secondary-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--color-shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.test img {
  width: 40px;
  height: 43px;
}

/* === Versión responsive para móviles === */
@media (max-width: 768px) {
  .tabla-3col,
  .tabla-3col tbody,
  .tabla-3col tr,
  .tabla-3col td {
    display: block;
    width: 100% !important;
  }

  .tabla-3col tr {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }

  .col-icono,
  .col-descripcion,
  .col-imagen {
    width: 100% !important;
    text-align: center;
  }

  .col-icono {
    margin-bottom: 8px;
  }

  .tabla-3col td {
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: 10px;
  }

  .tabla-3col td:last-child {
    border-bottom: none;
  }

  .bullet {
    margin: 0 auto;
  }

  .brand-img {
    max-width: 80%;
  }
}




/* New styles for interactive tabs */
.interactive-tabs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between tab buttons and content */
    margin-top: 20px;
}

/* Styles for cards specifically acting as tab buttons */
.card.tab-button {
    cursor: pointer;
    text-align: center; /* Center the text inside the tab card */
    display: flex; /* Allow content to be centered vertically if needed */
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center;
    min-height: 40px; /* Reduced min-height to make it smaller as requested */
    padding: 8px 15px; /* Reduced padding for tab buttons */
    background-color: var(--color-primary-bg); /* Default background */
    color: var(--color-text-dark); /* Default text color */
    border: 1px solid var(--color-border); /* Subtle border */
    box-shadow: 0 2px 8px var(--color-shadow); /* Lighter shadow for tab buttons when not active */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover effect for tab buttons */
.card.tab-button:not(.active):hover { /* Apply hover effect only if not active */
    transform: translateY(-3px);
    box-shadow: 0 6px 15px var(--color-shadow);
    background-color: var(--table-header-bg-new); /* Slight background change on hover */
}

/* Active state for tab buttons */
.card.tab-button.active {
    background-color: var(--color-accent); /* Vibrant green for active tab */
    color: white; /* White text for active tab */
    border-color: var(--color-accent); /* Matching border color */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* More pronounced shadow for active tab */
    transform: translateY(-2px); /* Maintain subtle lift */
}

/* Ensure text inside active tab card is white */
.card.tab-button.active h3,
.card.tab-button.active p {
    color: white;
}

/* Adjust h3 and p inside tab buttons */
.card.tab-button h3 {
    margin-bottom: 0; /* Removed margin as p tag is gone */
    font-size: 1em; /* Further reduced font for h3 in tab buttons */
    color: inherit; /* Inherit color from parent (card.tab-button) */
}

.card.tab-button p {
    font-size: 0.8em; /* Further smaller text for descriptions in tab buttons */
    color: inherit; /* Inherit color from parent */
}

.tab-content-container {
    background-color: var(--color-secondary-bg);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--color-shadow);
    border: 1px solid var(--color-border);
}

.tab-content {
    display: none; /* Hide all tab content by default */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.tab-content.active {
    display: block; /* Show active tab content */
    opacity: 1;
}

.tab-content h3 {
    color: var(--color-accent);
    margin-bottom: 15px;
}

.tab-content ul {
    list-style: square; /* Slightly different list style for content */
    margin-bottom: 15px;
}

/* Responsive adjustments for the table */
@media (max-width: 900px) {
    /* Adjust materials-section for smaller screens */
    #materials-section {
        width: 95vw; /* Allow it to be slightly wider on small screens */
        padding: 20px 15px; /* Adjust padding for smaller screens */
    }

    .materials-table {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }

    .materials-table > div {
        border-right: none; /* Remove vertical borders when stacked */
        border-bottom: 1px solid var(--color-border); /* Keep horizontal borders */
    }

    .materials-table > div:nth-last-child(1) { /* Only the very last cell has no bottom border */
        border-bottom: none;
    }

    .table-header {
        display: none; /* Hide header when stacked for better readability */
    }

    /* For stacked view, show column labels explicitly */
    .table-row > div:before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 10px;
        color: var(--color-accent);
        flex-basis: 120px; /* Give labels a consistent width */
        text-align: right; /* Align label text to the right */
    }
    .table-row > div {
        flex-direction: row; /* Keep content in a row with label */
        align-items: center; /* Vertically align items in the content cells */
        justify-content: flex-start; /* Align content to start */
    }

    .materials-table .download-link,
    .materials-table .explore-link,
    .materials-table .info-link {
        height: auto;
        width: auto;
        justify-content: flex-start; /* Align icons to the start when stacked */
        padding: 5px;
    }
}

/* Further refinements for small screens */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        align-items: center; /* Center header content vertically for mobile */
    }

    header h1 {
        margin-bottom: 10px; /* Reduced margin */
        font-size: 1.3em; /* Further reduction for mobile */
        align-items: center; /* Center text within h1 for mobile */
    }

    header h1 small {
        font-size: 0.5em; /* Smallest size for "Prof. Elena Álvarez" on mobile */
    }

    nav ul {
        flex-direction: column;
        gap: 8px; /* Reduced gap */
        width: 100%; /* Make navigation take full width */
    }

    nav a {
        width: 100%;
        text-align: center; /* Center content of the flex item */
        justify-content: center; /* Center children (icon and text) horizontally */
        padding: 6px 10px; /* Adjusted padding for mobile links */
        font-size: 0.9em; /* Even smaller font for mobile nav */
    }

    .content-section {
        padding: 20px 15px; /* Reduced padding */
    }

    h2 {
        font-size: 1.3em; /* Further reduced for mobile */
    }

    .material-item-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }

    /* Adjustments for stacked table on very small screens */
    .table-row > div {
        flex-direction: column; /* Stack label on top of content */
        align-items: flex-start;
    }
    .table-row > div:before {
        text-align: left; /* Align label to left on smallest screens */
        margin-bottom: 5px; /* Add space between label and icon */
        flex-basis: auto;
    }
    .materials-table > div {
        padding: 10px;
    }
}