body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #e2daf1; /* Lila claro de fondo general */
    padding: 20px;
    color: #2b1b4d;     /* Texto morado muy oscuro para contrastar */
}

header {
    background: #3a225d; /* Morado oscuro principal de la portada */
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(58, 34, 93, 0.15);
}

header ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: flex;         
    flex-wrap: wrap;      
    justify-content: center; 
    gap: 8px;             
}

header ul li {
    background: transparent; 
}

header ul li a {
    background: #5c3b8c; /* Morado intermedio para los botones del menú */
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 8px 12px;    
    text-decoration: none;
    font-size: 0.85rem;
    border-radius: 5px;
    display: inline-block; 
    transition: 0.3s;
}

header ul li a:hover {
    background: #8e62cc; /* Morado brillante al pasar el cursor */
    transform: translateY(-2px); 
}

footer {
    background: #3a225d; /* Morado oscuro para cerrar el diseño */
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    margin-top: 20px;
    box-shadow: 0 -4px 10px rgba(58, 34, 93, 0.15);
}

/* ==========================================================================
   ESTILOS ADAPTADOS PARA LA TABLA DE JQUERY (PALETA MORADO/LILA)
   ========================================================================== */

main {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(58, 34, 93, 0.1);
    border-top: 5px solid #8e62cc; /* Borde superior morado vivo */
    overflow-x: auto; 
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

th, td {
    border: 1px solid #cbd5e1;
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

th {
    background-color: #3a225d; /* Fondo de encabezados morado oscuro */
    color: white;
    font-size: 0.95rem;
    font-weight: bold;
}

#panel1 {
    padding: 10px;
    text-align: center;
    background-color: #5c3b8c; /* Morado medio en el panel deslizable */
    color: white;
    border: solid 1px #3a225d;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* Filas intercaladas usando un tono lila extremadamente suave */
tr:nth-child(even) {
    background-color: #f6f3fc;
}

/* Control estricto de anchos para las columnas */
th:nth-child(1), td:nth-child(1) { width: 6%; text-align: center; font-weight: bold; color: #3a225d; }
th:nth-child(2), td:nth-child(2) { width: 24%; }
th:nth-child(3), td:nth-child(3) { width: 35%; }
th:nth-child(4), td:nth-child(4) { width: 35%; }

/* Estilo para los bloques de código */
code {
    display: block;
    background: #f7f5fa; /* Fondo grisáceo tirando a lila */
    padding: 8px;
    font-family: monospace;
    font-size: 0.85rem;
    border-radius: 4px;
    color: #a11b5c; /* Color vino/fucsia oscuro que combina con el morado */
    white-space: pre-wrap;
    border-left: 3px solid #8e62cc;
}

/* Botones dentro de la tabla */
button {
    cursor: pointer;
    background: #5c3b8c; /* Botón morado */
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    transition: 0.2s;
    margin: 2px;
    font-size: 0.85rem;
}

button:hover {
    background: #8e62cc; /* Cambio de color interactivo */
}

/* Contenedores interactivos internos */
.demo-area {
    min-height: 35px;
    margin-top: 10px;
    padding: 10px;
    border: 1px dashed #a78bfa; /* Línea discontinua color lila */
    border-radius: 4px;
    background: #fdfbf7;
    font-size: 0.9rem;
}

/* Efectos jQuery */
.resaltado {
    background-color: #f1c40f !important; /* Mantenemos el amarillo para que resalte visualmente */
    font-weight: bold;
    padding: 4px;
    border-radius: 3px;
    color: #333;
}