.caja1 {
  font-size: 20px;
  text-align: center;
  padding: 25px;
  margin: 20px;
  box-shadow: 6px 6px 10px #c2c2c2;
  width: 90%;
  line-height: 1.4;
  background-color: rgba(160, 160, 160, 0.3);
  margin-left: auto;
  margin-right: auto;
  border-radius: 3%;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);
}

.caja1:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(80, 80, 80, 0.5);
}

.caja2 {
  background-color: #fdf6ee; /* Fondo beige claro */
  border-left: 5px solid #c1442f; /* Borde rojo a la izquierda */
  border-radius: 6px; /* Bordes suavemente redondeados */
  padding: 15px 20px; /* Espaciado interno */
  color: #4a2e1f; /* Color del texto principal */
  line-height: 1.6; /* Mejora la legibilidad */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-left: auto;
  margin-right: auto;
  background-size: cover;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);
}

body.dark .caja2 {
  background-color: rgb(0, 80, 150);
  color: #cccccc;
}

.flota_d {
  float: right;
  margin-left: 20px;
  margin-bottom: 8px;
  max-width: 50%;
  height: auto;

  border-radius: 25%;
}

.flota_i {
  float: left;
  margin-right: 20px;
  margin-bottom: 8px;
  max-width: 50%;

  height: auto;
  border-radius: 3%;
}
/* TABLA - con efecto de "movimiento" en la celda con el cursor */
    table {
        width: 100%;
        max-width: 1200px;
        margin: 20px auto;
        border-collapse: collapse;
        background-color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        font-size: .7em;
        transition: background-color 0.3s ease, color 0.3s ease;
        border: 1px solid var(--text-color);
    }

    caption {
        font-size: 1.8em;
        font-weight: bold;
        padding: 12px;
        background-color: $fafafa;
        color: var(--h2-color);
        text-align: left;
        text-shadow: 1px 2px rgba(0, 0, 0, 0.15);
    }

   /* Tabla en modo oscuro */
    body.dark table {
        background-color: #2d2d2d;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        color: #e0e0e0;
    }

    /* Caption en modo oscuro */
    body.dark caption {
        background-color: #1a252f;
    }

    th {
        background-color: #34495e;
        color: white;
        padding: 12px;
        text-align: left;
        font-weight: bold;
        border: 1px solid var(--text-color);
    }

    /* Encabezados en modo oscuro */
    body.dark th {
        background-color: #1a252f;
        border: 1px solid #0d1821;
    }

    td {
        padding: 15px;
        border: 1px solid var(--text-color);
        transition: all 0.3s ease;
        font-size: 1.12em; 
    }

    /* Bordes de celdas en modo oscuro */
    body.dark td {
        border: 1px solid #404040;
    }

    tr {
        transition: background-color 0.3s ease;
    }

    /* Filas alternadas - Modo claro */
    tbody tr:nth-child(odd) {
        background-color: white;
    }

    tbody tr:nth-child(even) {
        background-color: var(--toc-over-color);
        
    }

    /* Filas alternadas - Modo oscuro */
    body.dark tbody tr:nth-child(odd) {
        background-color: #2d2d2d;
    }

    body.dark tbody tr:nth-child(even) {
        background-color: #3a3a3a;
    }

    /* Hover en fila completa - Modo claro */
    tbody tr:hover {
        background-color: #ecf0f1;
    }

    /* Hover en fila completa - Modo oscuro */
    body.dark tbody tr:hover {
        background-color: #4a4a4a;
    }

    /* Efecto destacado en la celda con cursor - Modo claro */
    td:hover {
        background-color: #3498db;
        color: white;
        transform: scale(1.02);
        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
        cursor: pointer;
        font-weight: 500;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.15);
    }

    /* Efecto destacado en la celda con cursor - Modo oscuro */
    body.dark td:hover {
        background-color: #2980b9;
        color: white;
        box-shadow: 0 4px 12px rgba(41, 128, 185, 0.6);
    }

    /* Primera columna destacada */
    td:first-child {
        font-weight: bold;
        color: #2c3e50;
    }

    body.dark td:first-child {
        color: #5dade2;
    }

    td:first-child:hover {
        color: white;
    }

    /* Responsive */
    @media (max-width: 768px) {
        table {
            font-size: 0.8em;
        }
        
        th, td {
            padding: 4px;
        }
    }

/** Tabla DUA **/

        .demo-container {
            width: 90%;
            margin: 20px auto;
            font-family: Arial, sans-serif;
        }

        .demo-title {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.3em;
        }

        body.dark .demo-title {
            color: #5dade2;
        }

        .tabla-anatomia {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 0.9em;
        }

        /* CAPTION - Color morado */
        .tabla-anatomia caption {
            background-color: #9b59b6;
            color: white;
            padding: 12px;
            font-weight: bold;
            font-size: 1.1em;
            border: 3px solid #8e44ad;
            transition: all 0.3s ease;
            position: relative;
        }

        .tabla-anatomia caption:hover {
            background-color: #8e44ad;
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(155, 89, 182, 0.5);
            cursor: help;
        }

        .tabla-anatomia caption::after {
            content: " <caption>";
            font-size: 0.8em;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .tabla-anatomia caption:hover::after {
            opacity: 1;
        }

        /* THEAD - Color azul */
        .tabla-anatomia thead {
            background-color: #3498db;
            transition: all 0.3s ease;
        }

        .tabla-anatomia thead:hover {
            background-color: #2980b9;
            box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
        }

        .tabla-anatomia thead th {
            padding: 10px;
            color: white;
            border: 2px solid #2980b9;
            transition: all 0.3s ease;
            position: relative;
        }

        .tabla-anatomia thead th:hover {
            background-color: #5dade2;
            transform: scale(1.05);
            cursor: help;
        }

        .tabla-anatomia thead th::after {
            content: " <th scope='col'>";
            font-size: 0.7em;
            display: block;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .tabla-anatomia thead th:hover::after {
            opacity: 1;
        }

        /* TBODY - Color verde */
        .tabla-anatomia tbody {
            background-color: #2ecc71;
            transition: all 0.3s ease;
        }

        .tabla-anatomia tbody:hover {
            background-color: #27ae60;
        }

        .tabla-anatomia tbody tr {
            transition: all 0.3s ease;
        }

        .tabla-anatomia tbody tr:hover {
            background-color: #52d98b !important;
        }

        .tabla-anatomia tbody th {
            background-color: #16a085;
            color: white;
            padding: 10px;
            border: 2px solid #138f75;
            font-weight: bold;
            transition: all 0.3s ease;
            position: relative;
        }

        .tabla-anatomia tbody th:hover {
            background-color: #1abc9c;
            transform: scale(1.05);
            cursor: help;
        }

        .tabla-anatomia tbody th::after {
            content: " <th scope='row'>";
            font-size: 0.7em;
            display: block;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .tabla-anatomia tbody th:hover::after {
            opacity: 1;
        }

        .tabla-anatomia tbody td {
            padding: 10px;
            border: 2px solid #27ae60;
            color: black; /* Negro para mejor contraste */
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
        }

        .tabla-anatomia tbody td:hover {
            background-color: #52d98b;
            transform: scale(1.05);
            cursor: help;
        }

        .tabla-anatomia tbody td::after {
            content: " <td>";
            font-size: 0.7em;
            display: block;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .tabla-anatomia tbody td:hover::after {
            opacity: 1;
        }

        /* TFOOT - Color naranja */
        .tabla-anatomia tfoot {
            background-color: #e67e22;
            transition: all 0.3s ease;
        }

        .tabla-anatomia tfoot:hover {
            background-color: #d35400;
            box-shadow: 0 4px 8px rgba(230, 126, 34, 0.4);
        }

        .tabla-anatomia tfoot td {
            padding: 10px;
            color: white;
            border: 2px solid #d35400;
            text-align: center;
            font-weight: bold;
            transition: all 0.3s ease;
            position: relative;
        }

        .tabla-anatomia tfoot td:hover {
            background-color: #f39c12;
            transform: scale(1.05);
            cursor: help;
        }

        .tabla-anatomia tfoot td::after {
            content: " <tfoot>";
            font-size: 0.7em;
            display: block;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .tabla-anatomia tfoot td:hover::after {
            opacity: 1;
        }

        /* Leyenda */
        .leyenda {
            margin-top: 20px;
            padding: 15px;
            background-color: #ecf0f1;
            border-radius: 5px;
            font-size: 0.85em;
        }

        body.dark .leyenda {
            background-color: rgba(130, 130, 130, 0.3);
            color: #e0e0e0;
        }

        .leyenda-item {
            display: inline-block;
            margin: 5px 10px;
            padding: 5px 10px;
            border-radius: 3px;
            color: white;
            font-weight: bold;
        }

        .leyenda-caption { background-color: #9b59b6; }
        .leyenda-thead { background-color: #3498db; }
        .leyenda-tbody { background-color: #2ecc71; }
        .leyenda-tfoot { background-color: #e67e22; }

        /* Modo oscuro */
        body.dark .tabla-anatomia caption,
        body.dark .tabla-anatomia thead th,
        body.dark .tabla-anatomia tbody th,
        body.dark .tabla-anatomia tbody td,
        body.dark .tabla-anatomia tfoot td {
            color: white;
        }

        /* Nota informativa */
        .info-note {
            text-align: center;
            margin-top: 10px;
            font-style: italic;
            color: #7f8c8d;
            font-size: 0.85em;
        }

        body.dark .info-note {
            color: #95a5a6;
        }
 /** fin de tabla DUA*/