/* base.css */
:root {
    /* Colores base */
    --bg-color: #f4f4f4;
    --text-color: #222222;
    --header-color: #003366;
    --accent-color: #0055A4; /* Original */
}

:root.dark-mode {
    /* Colores para modo oscuro */
    --bg-color: #121212;
    --text-color: #f1f1f1;
}

:root {
    /* Sobreescritura de color de acento - se recomienda consolidar */
    --accent-color: #007BFF;
}

*,
*::before,
*::after {
    /* Modelo de caja */
    box-sizing: border-box;
}

html {
    /* Comportamiento del scroll */
    scroll-behavior: smooth;
}

body {
    /* Modelo de caja */
    margin: 0;

    /* Tipografía */
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);

    /* Fondo */
    background-color: var(--bg-color);
}

html, body {
    /* Interacción táctil */
    touch-action: manipulation;
}

/* 10. ENCABEZADO DE PÁGINA */
.page-header {
    /* Fondo y bordes */
    background-color: #e6f0f8; /* azul médico suave */
    border-bottom: 2px solid #c1d9e7;

    /* Espaciado */
    padding: 24px 20px;

    /* Texto */
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    color: #003366; /* azul oscuro, serio y legible */
}

.page-header h1 {
    /* Tipografía */
    font-size: 28px;
    color: #003366;

    /* Espaciado */
    margin: 0;
}

/* layout.css - CORREGIDO */
.main-container {
    /* Dimensiones */
    max-width: 1200px;
    width: 100%;

    /* Centrado */
    margin: 0 auto;

    /* Espaciado */
    padding: 0;
}

/* Evitamos que los elementos internos se salgan del main-container */
.header,
.nav-bar,
.menu-container,
.content-area,
.footer {
    /* Centrado y espaciado */
    margin: 0 auto;
    padding: 0;
}

.header {
    /* Fondo */
    background: var(--header-color);
    background-image: url(images/cirugia_ortopedia.jpg);
    background-size: cover;
    background-position: center;

    /* Dimensiones */
    height: 200px;

    /* Posicionamiento */
    position: relative;
    overflow: hidden;

    /* Flexbox */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    /* Color de texto */
    color: white;
}

.header-text {
    /* Posicionamiento */
    position: absolute;
    top: 12px;
    left: 10px;
    z-index: 5;

    /* Fondo */
    background: rgba(0, 0, 0, 0.6);

    /* Espaciado */
    padding: 8px 12px;

    /* Bordes */
    border-radius: 8px;

    /* Tipografía y sombras */
    font-size: 18px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.vertical-banner {
    /* Posicionamiento */
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;

    /* Dimensiones */
    height: 100%;
    width: 40px;

    /* Fondo y bordes */
    background: rgba(0, 51, 102, 0.85);
    border-left: 1px solid rgba(255, 255, 255, 0.2);

    /* Tipografía y texto */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: white;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

    /* Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* menus.css unificado */
.nav-bar {
    /* Posicionamiento */
    position: relative;
    z-index: 1000;

    /* Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;

    /* Fondo y bordes */
    background: linear-gradient(to bottom, #007acc 0%, #005b99 100%);
    border-top: 1px solid #ffffff22;

    /* Espaciado y sombras */
    padding: 12px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-bar a {
    /* Tipografía */
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;

    /* Espaciado */
    padding: 6px 10px;

    /* Transiciones */
    transition: color 0.3s ease;
}

.nav-bar a:hover {
    /* Efectos al pasar el cursor */
    color: #ffcc00;
    text-shadow: 0 0 2px black;
}

.menu-container {
    /* Flexbox */
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    /* Fondo y espaciado */
    background: #f8f8f8;
    padding: 10px 0;
}

.menu-item {
    /* Posicionamiento */
    position: relative;
    z-index: 1; /* Asegurar que los items del menú estén por encima del contenedor */

    /* Fondo y bordes */
    background: #0077cc;
    border-radius: 8px;

    /* Espaciado */
    padding: 12px 20px;
    margin: 4px;

    /* Dimensiones */
    flex: 0 1 auto;
    min-width: 180px;
    white-space: nowrap;

    /* Tipografía y cursor */
    color: white;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.menu-item:hover {
    /* Fondo al pasar el cursor */
    background: #005fa3;
}

.menu-item.has-submenu::after {
    /* Contenido generado */
    content: " ▾";

    /* Tipografía y espaciado */
    font-size: 14px;
    margin-left: 6px;
    color: white;
}

.submenu {
    /* Posicionamiento */
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform: none;
    z-index: 100;

    /* Fondo y bordes */
    background: white;
    border-radius: 6px;

    /* Sombras */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    /* Espaciado */
    padding: 10px 0;

    /* Dimensiones */
    min-width: 220px;

    /* Alineación de texto */
    text-align: left;
}

.menu-item:hover .submenu,
.menu-item.active .submenu {
    /* Mostrar submenú */
    display: block;
}

.submenu a {
    /* Bloqueo y espaciado */
    display: block;
    padding: 12px 20px;

    /* Tipografía */
    font-size: 16px;
    color: #222;
    text-decoration: none;
    text-align: left;
}

.submenu a:hover {
    /* Fondo y color al pasar el cursor */
    background: #f0f0f0;
    color: #000;
}

/* secciones.css */
:root {
    /* Variables de espaciado y sombra */
    --section-padding: 20px 20px 20px 28px;
    --section-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.content-area {
    /* Dimensiones */
    width: 100%;
    max-width: 1400px;
    min-height: 500px;
    box-sizing: border-box;

    /* Centrado */
    margin: 20px auto;

    /* Fondo y espaciado */
    background: white;
    padding: 20px;
}

/* Estilo base para secciones */
.section,
.section-orange,
.section-yellow,
.section-blue,
.section-green,
.section-purple,
.section-red,
.section-gray,
.section-teal,
.section-pink,
.section-white,
.section-brown,
.section-gold,
.section-indigo,
.section-lime,
.section-darkblue {
    /* Espaciado */
    margin-bottom: 30px;
    padding: var(--section-padding);

    /* Fondo, borde y sombra */
    background: #f9f9f9;
    border-left: 5px solid #0077cc;
    box-shadow: var(--section-shadow);
}

/* Cyan separado para que no herede fondo blanco */
.section-cyan {
    margin-bottom: 30px;
    padding: var(--section-padding);
    background-color: #e6ffff;
    border-left: 5px solid #009999;
    box-shadow: var(--section-shadow);
}

/* Variantes de color en modo claro */
.section-orange { background-color: #fff4e6; border-left-color: #cc7700; }
.section-yellow { background-color: #fffde7; border-left-color: #fbc02d; }
.section-blue   { background-color: #e3f2fd; border-left-color: #2196f3; }
.section-green  { background-color: #e8f5e9; border-left-color: #43a047; }
.section-purple { background-color: #f3e5f5; border-left-color: #8e24aa; }
.section-red    { background-color: #ffebee; border-left-color: #e53935; }
.section-gray   { background-color: #f5f5f5; border-left-color: #9e9e9e; }
.section-teal   { background-color: #e0f2f1; border-left-color: #00897b; }
.section-pink   { background-color: #ffe6f0; border-left-color: #e91e63; }
.section-white  { background-color: #ffffff; border-left-color: #cccccc; color: #000; }
.section-brown  { background-color: #efebe9; border-left-color: #6d4c41; }
.section-gold   { background-color: #fff8e1; border-left-color: #ffc107; }
.section-indigo { background-color: #e8eaf6; border-left-color: #3f51b5; }
.section-lime   { background-color: #f9fbe7; border-left-color: #c0ca33; }
.section-darkblue { background-color: #002f5f; border-left-color: #004080; color: #ffffff; }

/* Modo oscuro adaptativo */
@media (prefers-color-scheme: dark) {
    .section {
        background-color: #1e1e1e;
        border-left-color: #0077cc;
        color: #f0f0f0;
    }
    .section-orange { background-color: #5a3e1b; border-left-color: #cc7700; color: #fdf6ec; }
    .section-yellow { background-color: #4d4d29; border-left-color: #fbc02d; color: #fff8dc; }
    .section-blue   { background-color: #102840; border-left-color: #2196f3; color: #e0f0ff; }
    .section-green  { background-color: #1d3525; border-left-color: #43a047; color: #e0ffe0; }
    .section-purple { background-color: #30193d; border-left-color: #8e24aa; color: #f8e9ff; }
    .section-red    { background-color: #3f1c1c; border-left-color: #e53935; color: #ffecec; }
    .section-gray   { background-color: #2c2c2c; border-left-color: #9e9e9e; color: #eeeeee; }
    .section-teal   { background-color: #003f3f; border-left-color: #00897b; color: #e0fffa; }
    .section-pink   { background-color: #4d1f2f; border-left-color: #e91e63; color: #ffe0f0; }
    .section-white  { background-color: #1e1e1e; border-left-color: #aaaaaa; color: #ffffff; }
    .section-brown  { background-color: #3b2f2a; border-left-color: #6d4c41; color: #f5ebe4; }
    .section-gold   { background-color: #4d3f1b; border-left-color: #ffc107; color: #fff6d0; }
    .section-indigo { background-color: #2a2d4d; border-left-color: #3f51b5; color: #e0e4ff; }
    .section-lime   { background-color: #2e3b1f; border-left-color: #c0ca33; color: #faffec; }
    .section-darkblue {
        background-color: #0a1e3a;
        border-left-color: #2e5aa7;
        color: #f0f0f0;
    }
    .section-cyan {
        background-color: #003f40;
        border-left-color: #00b3b3;
        color: #e0ffff;
    }

    .bloque-celeste {
        background-color: #00363a;
        border-left-color: #00acc1;
        color: #e0f7fa;
    }
    .bloque-verde {
        background-color: #1b4024;
        border-left-color: #43a047;
        color: #e0ffe0;
    }
    .bloque-naranja {
        background-color: #4a2a00;
        border-left-color: #fb8c00;
        color: #fff3e0;
    }
    .bloque-morado {
        background-color: #3a1a4d;
        border-left-color: #8e24aa;
        color: #f8e9ff;
    }
    .bloque-gris {
        background-color: #2a2a2a;
        border-left-color: #9e9e9e;
        color: #eeeeee;
    }
    .bloque-azul-intenso {
        background-color: #0a1e3a;
        border-left-color: #2e5aa7;
        color: #f0f0f0;
    }

    .tip-box {
        background-color: #3b3b1f;
        border-left-color: #fbc02d;
        color: #fff8e0;
    }
}



/* componentes.css */
.exercise-grid {
    /* Grid */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;

    /* Espaciado */
    margin-top: 2rem;
}

.exercise-box {
    /* Fondo y bordes */
    background-color: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 10px;

    /* Espaciado */
    padding: 1.5em;

    /* Sombras */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

    /* Flexbox */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.exercise-box img {
    /* Dimensiones y espaciado */
    max-width: 100%;
    height: auto;
    margin: 1em auto;

    /* Bordes */
    border-radius: 8px;
}

.exercise-item {
    /* Fondo y bordes */
    background-color: #fff5f5;
    border-left: 4px solid #cc0000;
    border-radius: 8px;

    /* Espaciado */
    padding: 15px;
}

.exercise-item h3 {
    /* Espaciado */
    margin-top: 0;

    /* Tipografía */
    color: #cc0000;
}

/* Imágenes centradas, responsive y de tamaño medio */
.centered {
    /* Alineación de texto y espaciado */
    text-align: center;
    margin: 20px 0;
}

.final-message-box {
    /* Modelo de caja */
    box-sizing: border-box;
    min-height: 200px;
    width: 100%;

    /* Fondo y bordes */
    background-color: #ffe5e5;
    border: 3px solid #cc0000;
    border-radius: 10px;

    /* Espaciado */
    padding: 1.5rem;
    margin-top: 30px;

    /* Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Alineación de texto */
    text-align: center;
}

.final-message-box .text {
    /* Tipografía */
    font-size: 1.25rem;
    font-weight: bold;
    color: #800000;
    line-height: 1.5;

    /* Dimensiones */
    max-width: 90%;
}

.final-message-box .final-heading {
    /* Tipografía */
    font-size: 1.5rem;
    color: #cc0000;
    font-weight: bold;

    /* Espaciado */
    margin-bottom: 1rem;
}

/* listas.css */
/* Reset básico para todas las listas */
ul {
    /* Estilo de lista y espaciado */
    list-style: none;
    padding-left: 1.5em;
}

ul ul {
    /* Espaciado */
    padding-left: 1.5em;
}

/* Estilo base para listas decoradas */
ul.decorated,
ul.checklist,
ul.warninglist,
ul.errorlist,
ul.arrowlist {
    /* Estilo de lista y espaciado */
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

ul.decorated li,
ul.checklist li,
ul.warninglist li,
ul.errorlist li,
ul.arrowlist li {
    /* Posicionamiento y espaciado */
    position: relative;
    padding-left: 32px;
    margin-bottom: 10px;
}

/* Viñeta para checklist */
ul.decorated.checklist li::before,
ul.checklist li::before {
    /* Contenido generado */
    content: "✅";

    /* Tipografía y posicionamiento */
    color: #2e7d32;
    font-size: 1.1em;
    position: absolute;
    left: 0;
    top: 0;
}

/* Viñeta para advertencias */
ul.decorated.warninglist li::before,
ul.warninglist li::before {
    /* Contenido generado */
    content: "⚠️";

    /* Tipografía y posicionamiento */
    color: #cc7700;
    font-size: 1.1em;
    position: absolute;
    left: 0;
    top: 0;
}

/* Viñeta para errores */
ul.decorated.errorlist li::before,
ul.errorlist li::before {
    /* Contenido generado */
    content: "✖️";

    /* Tipografía y posicionamiento */
    color: #c62828;
    font-size: 1.1em;
    position: absolute;
    left: 0;
    top: 0;
}

/* Viñeta básica para listas decoradas */
ul.decorated li::before {
    /* Contenido generado */
    content: "•";

    /* Tipografía y posicionamiento */
    color: var(--text-color);
    font-size: 1.1em;
    position: absolute;
    left: 0;
    top: 0;
}

/* Estilo para listas jerárquicas personalizadas */
ul.custom-list {
    /* Estilo de lista y espaciado */
    list-style: none;
    margin-left: 0;
    padding-left: 0;

    /* Tipografía */
    font-size: 1rem;
}

ul.custom-list li {
    /* Espaciado */
    margin-bottom: 8px;
    line-height: 1.5;
}

ul.custom-list > li {
    /* Tipografía y espaciado */
    font-weight: bold;
    margin-top: 12px;
}

ul.custom-list ul {
    /* Espaciado y tipografía */
    margin-top: 6px;
    margin-bottom: 6px;
    padding-left: 1.5em;
    font-weight: normal;
}

ul.custom-list ul li::before {
    /* Contenido generado */
    content: "🔹";

    /* Color y espaciado */
    color: var(--primary-color, #007acc);
    margin-right: 6px;
}

ul.custom-list ul ul li::before {
    /* Contenido generado */
    content: "➤";

    /* Color y espaciado */
    color: var(--primary-color, #007acc);
    margin-right: 6px;
}

/* tablas.css */
.tabla-ejercicio {
    /* Dimensiones y modelo de caja */
    width: 100%;
    border-collapse: collapse;

    /* Espaciado */
    margin: 1.5em 0;

    /* Tipografía */
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;

    /* Fondo y sombra */
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.tabla-ejercicio thead {
    /* Fondo y color de texto */
    background-color: #e0e7f8;
    color: #003366;
}

.tabla-ejercicio th,
.tabla-ejercicio td {
    /* Bordes y espaciado */
    border: 1px solid #ccc;
    padding: 10px 14px;

    /* Alineación de texto */
    text-align: left;
}

.tabla-ejercicio tbody tr:nth-child(even) {
    /* Fondo */
    background-color: #f9f9f9;
}

.tabla {
    /* Dimensiones y modelo de caja */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;

    /* Fondo, tipografía y sombra */
    background-color: #fff;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.tabla th,
.tabla td {
    /* Espaciado y alineación */
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;

    /* Bordes */
    border: 1px solid #ccc;
}

.table-striped tbody tr:nth-child(odd) {
    /* Fondo */
    background-color: #f9f9f9;
}

.table-bordered {
    /* Bordes */
    border: 1px solid #ccc;
}

.tabla-responsive {
    /* Dimensiones y desbordamiento */
    width: 100%;
    overflow-x: auto;
}

.tabla-responsive table {
    /* Dimensiones y modelo de caja */
    width: 100%;
    border-collapse: collapse;
}

/* Estilo estético y moderno para enlaces dentro de tablas */
.tabla-estetica thead {
    /* Fondo, color de texto y peso de fuente */
    background-color: #e0e7f8;
    color: #003366;
    font-weight: 600;
}

.tabla-estetica tbody tr:nth-child(even) {
    /* Fondo */
    background-color: #f9f9f9;
}

.tabla-estetica tbody tr:hover {
    /* Fondo y transiciones al pasar el cursor */
    background-color: #f0f8ff;
    transition: background-color 0.2s ease-in-out;
}

.tabla-estetica td:first-child {
    /* Tipografía */
    font-weight: 500;
    color: #333;
}

.tabla-estetica a {
    /* Display y espaciado */
    display: inline-block;
    padding: 4px 6px;

    /* Decoración, bordes y transiciones */
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;

    /* Posicionamiento y color */
    position: relative;
    color: #005a9c;
}

.tabla-estetica a:hover {
    /* Fondo, color y sombra al pasar el cursor */
    background-color: #e8f4ff;
    color: #005a9c;
    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
}

.tabla-estetica a:hover::after {
    /* Contenido generado */
    content: " 🔗";

    /* Posicionamiento y tipografía */
    position: absolute;
    right: -1.2em;
    top: 0;
    font-size: 0.9em;
}

.tabla-estetica td ul {
    /* Espaciado y estilo de lista */
    padding-left: 1.2em;
    margin: 0.3em 0;
    list-style-type: disc;
}

.tabla-estetica td li {
    /* Espaciado */
    margin-bottom: 4px;
}
/* =====================================================
 /* ACORDEÓN GENERAL PARA BLOQUES COLAPSABLES */
.accordion {
  background-color: #e0e7f8;
  color: #003366;
  cursor: pointer;
  padding: 12px 16px;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  transition: background-color 0.2s ease;
  margin: 10px 0 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.accordion:hover {
  background-color: #d4dcf2;
}

.accordion.active {
  background-color: #c3d0f1;
}

.accordion .arrow {
  display: inline-block;
  margin-right: 10px;
  transition: transform 0.3s ease;
}

.accordion.active .arrow {
  transform: rotate(90deg);
}

.panel {
  display: none;
  overflow: hidden;
  padding: 10px 16px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  margin-bottom: 10px;
}


/* imagenes.css */
/* ===== Estilo base para imágenes centradas y responsivas ===== */
.img-base {
    /* Display y centrado */
    display: block;
    margin: 1.5em auto;

    /* Dimensiones */
    max-width: 100%;
    height: auto;
}

/* ===== Tamaños específicos ===== */
.img-medium {
    /* Display y centrado */
    display: block;
    margin: 1.5em auto;

    /* Dimensiones */
    width: 50%;
    max-width: 450px;
    min-width: 280px;
    height: auto;
}

.img-small {
    /* Dimensiones */
    width: 30%;
    max-width: 300px;
    height: auto;

    /* Display y centrado */
    display: block;
    margin: 1.5em auto;
}

.img-large {
    /* Dimensiones */
    width: 90%;
    max-width: 700px;
    height: auto;

    /* Display y centrado */
    display: block;
    margin: 1.5em auto;
}

/* ===== Bordes redondeados opcionales ===== */
.rounded {
    /* Bordes */
    border-radius: 10px;
}

/* ===== Imágenes individuales centradas y responsive ===== */
.img-responsive {
    /* Display y centrado */
    display: block;
    margin: 1.5em auto;

    /* Dimensiones */
    max-width: 100%;
    height: auto;

    /* Bordes */
    border-radius: 10px;
}

/* ===== Imagen + texto en dos columnas (flexbox) ===== */
.image-text-box {
    /* Flexbox */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;

    /* Espaciado */
    margin-bottom: 2rem;
}

.image-text-box .image-side {
    /* Flexbox y dimensiones */
    flex: 1 1 250px;
    max-width: 300px;
}

.image-text-box .text-side {
    /* Flexbox */
    flex: 2 1 400px;
}

.image-text-box img.responsive {
    /* Dimensiones y display */
    max-width: 100%;
    height: auto;
    display: block;
}

/* === Galería flexible en 2 o 3 columnas === */
.galeria-columnas {
    /* Grid */
    display: grid;
    gap: 1.5rem;

    /* Espaciado y dimensiones */
    margin: 2em auto;
    width: 100%;
}

.galeria-columnas.cols-2 {
    /* Grid */
    grid-template-columns: repeat(2, 1fr);
}

.galeria-columnas.cols-3 {
    /* Grid */
    grid-template-columns: repeat(3, 1fr);
}

.galeria-columnas figure {
    /* Alineación de texto */
    text-align: center;
}

.galeria-columnas img {
    /* Dimensiones y bordes */
    width: 100%;
    height: auto;
    border-radius: 8px;

    /* Display y centrado */
    display: block;
    margin: 0 auto;
}

.galeria-columnas figcaption {
    /* Espaciado y tipografía */
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}
figure {
  margin: 1.5em auto;
  text-align: center;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #444;
  text-align: center;
}


/* === Responsive === */
@media (max-width: 768px) {
    .galeria-columnas {
        /* Grid */
        grid-template-columns: 1fr !important;
    }
}

/* === Botones generales === */
.toggle-mode,
.toggle-section,
.boton,
.boton-flotante,
.boton-retorno {
    /* Tipografía */
    font-family: 'Montserrat', sans-serif;

    /* Contorno */
    outline: none;
}

.toggle-mode:focus,
.toggle-section:focus,
.boton:focus,
.boton-flotante:focus,
.boton-retorno:focus {
    /* Contorno al enfocar */
    outline: 2px solid #ffa500;
    outline-offset: 2px;
}

.toggle-mode {
    /* Posicionamiento */
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999;

    /* Espaciado */
    padding: 6px 12px;

    /* Fondo, color de texto y bordes */
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 4px;

    /* Cursor */
    cursor: pointer;
}

.toggle-section {
    /* Fondo, color de texto y bordes */
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 6px;

    /* Espaciado y tipografía */
    padding: 10px 16px;
    font-size: 16px;

    /* Cursor, transición y sombra */
    cursor: pointer;
    transition: background 0.3s ease;
    margin-bottom: 10px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}

.toggle-section:hover {
    /* Fondo al pasar el cursor */
    background-color: #003d73;
}

.boton {
    /* Display y espaciado */
    display: inline-block;
    padding: 12px 24px;

    /* Fondo, color de texto y bordes */
    background-color: #007acc;
    color: white;
    border: none;
    border-radius: 6px;

    /* Tipografía y transiciones */
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.boton:hover {
    /* Fondo al pasar el cursor */
    background-color: #005fa3;
}

.boton-flotante,
.boton-retorno {
    /* Fondo, color de texto, transiciones y sombra */
    background-color: #2b8a3e;
    color: white;
    transition: background-color 0.3s;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.boton-flotante {
    /* Posicionamiento y espaciado */
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 15px;

    /* Bordes */
    border-radius: 8px;
}

.boton-flotante:hover,
.boton-retorno:hover {
    /* Fondo al pasar el cursor */
    background-color: #237032;
}

.boton-retorno-wrapper {
    /* Alineación de texto y espaciado */
    text-align: right;
    margin-top: 30px;
}

.boton-retorno {
    /* Espaciado y tipografía */
    margin-left: 0;
    font-size: 20px;
    padding: 6px 12px;

    /* Bordes */
    border-radius: 6px;
}

.boton-centro {
    /* Alineación de texto y espaciado */
    text-align: center;
    margin-top: 30px;
}

:root {
    /* Sobreescritura de color de acento - se recomienda consolidar */
    --accent-color: #007BFF;
}

:root {
    /* Sobreescritura de color de acento - se recomienda consolidar */
    --accent-color: #007BFF;
}

/* Estilo general del índice */
.indice-flotante {
    /* Display */
    display: none;
}

.indice-flotante.visible {
    /* Display y posicionamiento */
    display: block;
    position: static;

    /* Dimensiones */
    width: 100%;

    /* Espaciado */
    margin: 15px 0;
    padding: 12px 16px;

    /* Fondo, bordes, sombra y tipografía */
    background: #f0f8ff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
    font-size: 16px;
}

.indice-flotante ul {
    /* Flexbox */
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* Espaciado */
    padding-left: 0;
    margin: 0;
}

.indice-flotante a {
    /* Display y espaciado */
    display: block;
    padding: 10px;

    /* Fondo, color de texto, bordes y decoración */
    background-color: var(--accent-color);
    color: white !important;
    border-radius: 6px;
    text-decoration: none;

    /* Alineación de texto, peso de fuente y transiciones */
    text-align: center;
    font-weight: bold;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Estilo al pasar el cursor (excepto si ya es activo) */
.indice-flotante a:hover:not(.activo) {
    /* Fondo y decoración */
    background-color: #0056b3;
    text-decoration: underline;
}

/* Botón marcado como activo */
.indice-flotante a.activo {
    /* Fondo, color de texto, bordes, sombra y peso de fuente */
    background-color: #0056b3 !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

/* footer.css */
.footer {
    /* Fondo, espaciado y alineación de texto */
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;

    /* Tipografía */
    font-size: 14px;
    color: #555;

    /* Espaciado */
    margin-top: 40px;
}

.footer a {
    /* Color de texto, decoración y espaciado */
    color: #0077cc;
    text-decoration: none;
    margin: 0 8px;
}

.footer a:hover {
    /* Decoración al pasar el cursor */
    text-decoration: underline;
}

.volver-arriba {
    /* Display, espaciado y peso de fuente */
    display: inline-block;
    margin-top: 10px;
    font-weight: bold;
}

/* mediaqueries.css */
@media (max-width: 768px) {
    .footer-container {
        /* Flexbox */
        flex-direction: column;
    }

    .footer-section {
        /* Espaciado y alineación de texto */
        margin-bottom: 30px;
        text-align: center;
    }

    .footer-section h3::after {
        /* Posicionamiento */
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-social {
        /* Justificación de contenido */
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .exercise-item-final {
        /* Grid */
        grid-column: span 1;

        /* Flexbox */
        flex-direction: column;

        /* Espaciado */
        padding: 1rem;

        /* Dimensiones */
        min-height: auto;
    }

    .exercise-item-final-text {
        /* Tipografía y dimensiones */
        font-size: 1rem;
        max-width: 100%;
    }

    .indice-toggle {
        /* Display */
        display: block;
    }

    a, button, .menu-item, .toggle-section, .download-btn {
        /* Dimensiones y espaciado */
        min-height: 44px;
        padding: 12px 16px;

        /* Interacción táctil */
        touch-action: manipulation;
    }

    @media (max-width: 768px) {
        .imagenes-tres-columnas figure {
            /* Flexbox y dimensiones */
            flex: 1 1 100%;
            max-width: 100%;
        }
    }
}

.footer {
    /* Fondo, alineación de texto, espaciado y bordes */
    background-color: #e9e9e9; /* Gris claro */
    text-align: center;
    padding: 20px 10px;
    border-top: 1px solid #ccc;

    /* Espaciado y tipografía */
    margin-top: 40px;
    font-size: 0.9em;
    color: #333; /* Gris oscuro */
}

.footer-content {
    /* Dimensiones y centrado */
    max-width: 1200px;
    margin: 0 auto;
}

.footer-text {
    /* Espaciado */
    margin: 0;
}
/* Quita el marcador nativo del summary */
.accordion::-webkit-details-marker { display: none; }

/* Summary como bloque: clic en texto o flecha abre a la primera */
.accordion { display: block; cursor: pointer; }

/* Maquetación interna de flecha + texto */
.accordion .acc-row { display: flex; align-items: center; gap: 10px; }

/* Flecha girada al abrir (estado del <details>) */
.acc[open] .arrow { transform: rotate(90deg); }

/* Contenedor del contenido del acordeón (no usamos .panel) */
.ac-panel{
  padding: 10px 16px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  margin-bottom: 10px;
}