/* Definición de variables de color para consistencia */
:root {
    --color-primary: #F47B20; /* Naranja Principal */
    --color-primary-dark: #004F30; /* Verde Oscuro */
    --color-text-main: #004F30; /* Verde Oscuro para Texto */
    --color-primary-light: #606c38;
    --font-sans: 'Inter', sans-serif;
}

body {
    font-family: var(--font-sans);
    background-color: #f1f5f9; /* bg-slate-100 */
    color: #1e293b; /* text-slate-800 */
}

/* --- Estilo para el Encabezado --- */
.header-gradient {
    background: linear-gradient(to bottom right, var(--color-primary-dark), var(--color-primary-light));
    color: white;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2.5rem;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
}

.header-gradient h1 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
}

.header-gradient p {
    margin-top: 0.5rem;
    font-size: 1.125rem; /* text-lg */
    color: white; /* text-orange-200 (aproximado) */
}

/* --- Estilos para la Navegación de Pestañas --- */
.tab-btn {
    /* Forma y Tamaño */
    padding: 0.75rem 2rem; /* py-3 px-8 */
    border-radius: 9999px; /* rounded-full */
    margin: 0 4px;
    border: 1px solid #cbd5e1;
    
    /* Tipografía */
    font-size: 1.125rem; /* text-lg */
    font-weight: 500; /* font-medium */
    color: var(--color-primary-dark);
    text-align: center;

    /* Flexbox para alinear contenido */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* gap-x-2 */

    /* Otros */
    background-color: white;
    transition: all 300ms ease-in-out;
    cursor: pointer;
}

.tab-btn:hover {
    background-color: #f1f5f9; /* bg-slate-100 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
}

.tab-btn.active {
    background-color: var(--color-primary);
    color: white;
    font-weight: 600; /* font-semibold */
    border-color: transparent;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* shadow-xl */
    cursor: default;
}

.tab-btn.active:hover {
    background-color: #f97316; /* Un naranja ligeramente más oscuro que el primario */
}

/* --- Animación y Estilos para el Contenido de las Pestañas --- */
.tab-content {
    display: none;
    animation: fadeIn 0.6s ease-in-out;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Estilos para las Tarjetas de Contenido --- */
.content-card {
    padding: 1.5rem; /* p-6 */
    background-color: #FEF5ED;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
    border-left: 4px solid var(--color-primary);
    transition: box-shadow 300ms;
}

.content-card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-xl */
}

.card-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 1rem; /* mb-4 */
    color: var(--color-text-main);
}

.formula-box {
    text-align: center;
    font-size: 1.25rem; /* text-xl */
    font-family: monospace;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #FEF5ED; /* bg-slate-50 */
    border-radius: 0.375rem; /* rounded-md */
}

/* --- Estilos para la Tabla de Materiales --- */
#materials-table th {
    font-weight: 600; /* font-semibold */
}

#materials-table tbody tr {
    border-bottom: 1px solid #e2e8f0; /* border-b */
    transition: background-color 200ms;
}

#materials-table tbody tr:hover {
    background-color: #f8fafc; /* hover:bg-slate-50 */
}

/* --- Estilos para el Modal --- */
.video-container {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: opacity 300ms;
}

.video-iframe-wrapper {
    position: relative;
    background-color: black;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    width: 90%;
    max-width: 800px;
}

.close-video-btn {
    position: absolute;
    top: -1rem;
    right: -1rem;
    background-color: white;
    color: black;
    border-radius: 9999px;
    height: 2.5rem;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    transition: background-color 150ms, color 150ms;
}

.close-video-btn:hover {
    background-color: #ef4444; /* bg-red-500 */
    color: white;
}

.hidden {
    display: none;
}

/* --- Estilos para el Dropdown de Videos --- */
.dropdown-toggle {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #f1f5f9; /* bg-slate-100 */
    border-radius: 0.375rem; /* rounded-md */
    transition: background-color 200ms ease-in-out;
    width: fit-content;
}

.dropdown-toggle:hover {
    background-color: #e2e8f0; /* bg-slate-200 */
}

.dropdown-toggle svg.rotate-180 {
    transform: rotate(180deg);
}

.dropdown-content {
    transition: all 300ms ease-in-out;
    background-color: #FEF5ED;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
}

.video-thumbnail {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
    transition: transform 200ms ease-in-out;
}

.video-thumbnail:hover {
    transform: scale(1.05);
}