@charset "UTF-8";

/* ==========================================================================
   SISTEMA DE TEMAS (VARIABLES)
   ========================================================================== */
:root {
    /* Tema Predeterminado (Dark Neon) */
    --primary: #bb86fc;
    --secondary: #03dac6;
    --bg: #121212;
    --card-bg: #1e1e1e;
    --text: #e0e0e0;
    --accent: #03dac6;
    --error: #cf6679;
    --border: rgba(255, 255, 255, 0.1);
    --shadow: rgba(0, 0, 0, 0.5);
}

[data-theme='rose'] {
    /* Tema Aesthetic Rose - Legibilidad Optimizada */
    --primary: #ff85a1;
    --secondary: #fbb1bd;
    --bg: #fff0f3;
    --card-bg: #ffffff;
    
    /* TEXTO: Cambiado de #594d5b a un tono mucho más oscuro para contraste real */
    --text: #3d2b2f; 
    
    --accent: #ffb3c1;
    --border: rgba(255, 133, 161, 0.4); /* Más visible */
    --shadow: rgba(255, 182, 193, 0.5); /* Más profundo */
}

[data-theme='ocean'] {
    /* Tema Deep Ocean */
    --primary: #03dac6;
    --secondary: #bb86fc;
    --bg: #001219;
    --card-bg: #00212e;
    --text: #e9d8a6;
    --border: rgba(3, 218, 198, 0.2);
    --shadow: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   ESTILOS BASE
   ========================================================================== */
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    transition: background-color 0.4s ease, color 0.4s ease;
    overflow-x: hidden;
}

.main-container {
    max-width: 1200px;
    margin: 1rem auto 3rem auto; /* 1rem arriba para que no pegue, 3rem abajo */
    padding: 0 2rem;
    min-height: 70vh;
}

.test-container {
    max-width: 800px;
    margin: 1rem auto 3rem auto; /* 1rem arriba para que no pegue, 3rem abajo */
    padding: 0 2rem;
}

/* ==========================================================================
   HEADER (ESTILO SOLICITADO)
   ========================================================================== */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    background: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border);
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    background-size: 200% auto; /* Necesario para la animación de color */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    user-select: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block; /* Para que el transform funcione bien */
}

.logo:hover {
    /* Efecto de desplazamiento de color */
    background-position: right center;
    
    /* El "Glow": crea un resplandor del color del logo detrás del texto */
    text-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4);
    
    /* Un ligero escalado para que parezca que se acerca */
    transform: scale(1.05);
    
    /* Efecto extra: un poco más de brillo general */
    filter: brightness(1.2);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

.user-profile {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-profile::before {
    content: '●';
    color: #4caf50; /* Indicador de conectado */
    font-size: 0.8rem;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   GRID Y TARJETAS (NIVELES 1, 2 Y 3)
   ========================================================================== */
.grid-lms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 2.5rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
    text-align: center;
    position: relative;
    display: block;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px var(--shadow);
}

.card:hover:not(.inactive) {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 15px 30px var(--shadow);
}

.card.inactive {
    filter: grayscale(1) opacity(0.5);
    cursor: not-allowed;
}

.card .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.card h3 {
    margin: 10px 0;
    color: var(--primary);
    font-size: 1.5rem;
}

.card p {
    font-size: 0.9rem;
    opacity: 0.8;
    line-height: 1.5;
}

/* ==========================================================================
   BOTONES Y UI
   ========================================================================== */
.btn-nav {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s;
}

.btn-nav:hover {
    background: var(--primary);
    color: var(--bg);
}

.btn-nav.active {
    background: var(--primary);
    color: var(--bg);
    font-weight: bold;
}

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--error);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    z-index: 2000;
}
/* Esconder el input nativo horrible */
.input-hidden {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/* Estilo personalizado para el botón de examinar */
.btn-video-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px !important;
    background: linear-gradient(45deg, var(--primary), var(--secondary)) !important;
    color: var(--bg) !important; /* Texto oscuro para que resalte */
    border: none !important;
    font-weight: 700 !important;
    cursor: pointer;
    border-radius: 50px !important; /* Forma de píldora */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 15px var(--shadow);
}

.btn-video-custom:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 20px var(--shadow);
    filter: brightness(1.1);
}

/* Ajuste para el tema Rose: que el botón sea más llamativo */
[data-theme='rose'] .btn-video-custom {
    background: #ff4d6d !important;
    color: #ffffff !important;
}

/* ==========================================================================
   SELECTOR DE TEMAS (BOTONES)
   ========================================================================== */
.theme-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.2s;
}

.theme-dot:hover {
    transform: scale(1.3);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }
    
    .header-right {
        width: 100%;
        justify-content: space-between;
    }
}



.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}


/* ==========================================================================
   AJUSTES EXCLUSIVOS PARA EL TEMA ROSE (PINK)
   ========================================================================== */

[data-theme='rose'] h1, 
[data-theme='rose'] .logo {
    /* Degradado con mucha más fuerza para que no sea clarito */
    background: linear-gradient(45deg, #ff4d6d, #c9184a) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme='rose'] .card h3 {
    /* Forzamos el texto a negro/café oscuro en las tarjetas */
    color: var(--text) !important; 
    font-weight: 800;
}

[data-theme='rose'] .card p {
    /* Texto de descripción más legible y oscuro */
    color: var(--text) !important;
    opacity: 1 !important;
    font-weight: 500;
}

[data-theme='rose'] .btn-nav {
    /* El texto de los botones (incluido Cerrar Sesión) en negro */
    color: var(--text) !important;
    font-weight: 700;
}

/* --- PREGUNTAS: Adaptables al tema --- */
.q-text {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    display: block;
    text-align: center;
    margin-bottom: 25px;
    line-height: 1.3;
    /* Usamos var(--text) para que en Pink sea oscuro y en Dark sea blanco */
    color: var(--text) !important; 
}

/* --- RESPUESTAS: Visibilidad total --- */
.option-label {
    display: block; 
    padding: 12px 18px; 
    margin: 8px 0; 
    border-radius: 12px; 
    /* Cambiado background para que use la variable del tema */
    background: var(--card-bg) !important; 
    border: 1px solid var(--border);
    cursor: pointer;
    transition: 0.3s;
    font-size: 1rem !important;
    font-weight: 500 !important;
    /* BORRADO color: #000000 (esto era lo que lo hacía invisible en modo oscuro) */
    color: var(--text) !important;
    opacity: 1 !important;
}

/* Evita que el navegador ponga el texto gris al terminar el test */
.option-label input[disabled],
.option-label input[disabled] + * {
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
    opacity: 1 !important;
}

.option-label:hover:not([disabled]) { 
    background: var(--secondary) !important; 
    color: #ffffff !important; /* Para que resalte al pasar el ratón */
}

/* --- VALIDACIÓN: Colores de acierto y error --- */
.opt-correct {
    border: 2px solid #82c91e !important; 
    background: rgba(130, 201, 30, 0.1) !important;
}

.opt-error {
    border: 2px solid #fa5252 !important; 
    background: rgba(250, 82, 82, 0.1) !important;
}

/* Colores fijos pero aplicados solo al borde para no tapar el fondo del tema */
.correct-border { 
    border-left: 8px solid #82c91e !important; 
    /* El fondo lo dejamos transparente o con un toque muy leve */
    background: rgba(130, 201, 30, 0.05) !important; 
}

.error-border { 
    border-left: 8px solid #fa5252 !important; 
    background: rgba(250, 82, 82, 0.05) !important; 
}

.f-ok { color: #82c91e !important; font-weight: bold; margin-top: 10px; text-align: center; }
.f-err { color: #fa5252 !important; font-weight: bold; margin-top: 10px; text-align: center; }

/* --- EFECTO DE SELECCIÓN ACTIVA --- */

/* Cuando el radio button está marcado, cambiamos el estilo del label que lo contiene */
.option-label:has(input:checked) {
    border: 2px solid var(--secondary) !important; /* Borde del color del tema */
    background: rgba(var(--secondary-rgb, 130, 201, 30), 0.15) !important; /* Fondo sutil del tema */
    transform: translateX(5px); /* Pequeño desplazamiento a la derecha para dar vida */
    box-shadow: 0 4px 12px var(--shadow);
}

/* Opcional: Si quieres que el texto de la opción seleccionada brille un poco más */
.option-label:has(input:checked) {
    font-weight: 700 !important;
}

/* ==========================================================================
   COMPONENTES GLOBALES DE NAVEGACIÓN (CURSOS, MATERIAS, TEMAS)
   ========================================================================== */

/* Cabecera universal para todas las vistas de lista */
.page-header {
    text-align: center; 
    margin-bottom: 4rem;
}

.page-header h1 {
    font-size: 2.8rem; 
    margin-bottom: 0.5rem; 
    /* Gradiente dinámico: Usa el color de texto del tema y el primario */
    background: linear-gradient(to right, var(--text), var(--primary)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* La tarjeta con la animación "Signature" de la plataforma */
.card-nav {
    opacity: 0;
    transform: translateX(100px) scale(0.8);
    animation: slideInBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    text-decoration: none;
    border-top: 4px solid var(--secondary) !important;
    display: block; /* Asegura que ocupe su espacio en el grid */
}

@keyframes slideInBounce {
    0% { opacity: 0; transform: translateX(100px) scale(0.8); }
    70% { transform: translateX(-10px) scale(1.02); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Pie de tarjeta para fechas o metadatos */
.card-meta {
    margin-top: 1rem; 
    padding-top: 1rem; 
    border-top: 1px solid var(--border);
}

.card-meta small {
    opacity: 0.5; 
    font-size: 0.7rem; 
    text-transform: uppercase;
    color: var(--text);
}

/* Estilo base para el subtítulo (temas Dark y Ocean) */
.platform-subtitle {
    opacity: 0.7;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text); /* Por defecto usa el color de la variable */
    margin-top: -0.5rem;
}

/* Ajuste específico: Blanco puro cuando el tema sea ROSA */
[data-theme='rose'] .platform-subtitle {
    color: #000000 !important;
    opacity: 1; /* Subimos un poco la opacidad para que brille más */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para despegarlo del fondo */
    font-weight: 600;
}
/* Eliminar el fondo oscuro/gris en el tema Rose */
[data-theme='rose'] .header-content, 
[data-theme='rose'] .subheader-lms { 
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ==========================================================================
   META-INFORMACIÓN DE TARJETAS (FECHAS)
   ========================================================================== */

.card-meta {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    transition: all 0.3s ease;
}

.card-meta small {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    /* Color suave para los temas oscuros */
    color: var(--text);
    opacity: 0.5;
}

/* Ajuste específico para el tema PINK (ROSE) */
[data-theme='rose'] .card-meta {
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* Línea divisoria más visible en rosa */
}

[data-theme='rose'] .card-meta small {
    /* Negro sólido para máxima legibilidad en el tema rosa */
    color: #000000 !important;
    opacity: 0.9 !important;
}

/* Esto ya lo tienes, pero asegúrate de que incluya el hover */
.card-nav:hover:not(.inactive) {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 15px 30px var(--shadow);
    border-color: var(--primary);
    z-index: 10;
}

/* Para la tarjeta de Estadísticas que está desactivada */
.card-nav.inactive {
    filter: grayscale(1) opacity(0.5);
    cursor: not-allowed;
    pointer-events: none; /* Evita el hover en las inactivas */
}

/* Contenedor principal del encabezado (Fondo rosado claro natural) */
.header-minimal {
    display: flex;
    justify-content: space-between; /* Esto empuja el botón a la derecha */
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1.5rem 0;
    background: transparent; /* Importante: para que no salga el gris */
}

.title-primary {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Subtítulo de bienvenida */
.subtitle-welcome {
    margin-top: 0.5rem;
    opacity: 0.6;
    font-size: 1rem;
    color: var(--text);
}
[data-theme='rose'] .subtitle-welcome {
     /* Texto negro para el subtítulo en el tema rosa */
    opacity: 1 !important;
    font-weight: 700;      
}

/* Botón de Cerrar Sesión (Estilo minimalista con borde) */
.btn-logout-minimal {
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--error);
    border-radius: 12px;
    color: var(--error);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-logout-minimal:hover {
    background: var(--error);
    color: white;
    box-shadow: 0 5px 15px rgba(214, 48, 49, 0.2);
}
/* Forzar texto negro en botones de acción del tema Rose */
[data-theme='rose'] .btn-logout-minimal {
    color: #000000 !important; /* Texto negro puro */
    border-color: #ff4d6d !important; /* Mantenemos el borde en un rosa fuerte para que se vea */
    font-weight: 700;
}

[data-theme='rose'] .btn-logout-minimal:hover {
    background: #ff4d6d !important;
    color: #ffffff !important; /* Al hacer hover, que pase a blanco para que resalte */
}

/* ==========================================================================
   FORMULARIOS DEL CONSTRUCTOR
   ========================================================================== */

.form-container-lms {
    max-width: 800px;
    margin: 2rem auto;
    padding: 3rem !important;
}

.form-title {
    text-align: center;
    margin-bottom: 2.5rem;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
}

.lms-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.8;
    text-transform: uppercase;
}

/* Estilo de los Inputs */
.lms-form input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.lms-form input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
}

/* El botón de acción principal */
.btn-full {
    width: 100%;
    margin-top: 1rem;
    padding: 15px !important;
    font-size: 1rem !important;
    letter-spacing: 1px;
}

/* Ajuste específico para el tema ROSE (Pink) */
[data-theme='rose'] .lms-form input[type="text"] {
    background: #ffffff;
    border-color: rgba(255, 133, 161, 0.3);
    color: #000000;
}

/* Contenedor del selector de iconos */
.icon-picker-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}

[data-theme='rose'] .icon-picker-trigger {
    background: #ffffff;
    border-color: rgba(255, 133, 161, 0.3);
}

/* La cuadrícula de iconos (El arreglo principal) */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 iconos por fila */
    gap: 10px;
    padding: 15px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-top: 10px;
    max-height: 250px;
    overflow-y: auto; /* Por si añades muchos más */
}

/* Cada icono individual */
.icon-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.icon-item:hover {
    background: var(--primary);
    transform: scale(1.1);
}

.icon-item.active {
    background: rgba(var(--primary-rgb), 0.2);
    border: 1px solid var(--primary);
}

/* Dropdown absoluto para que no empuje el formulario */
.icon-dropdown {
    position: absolute;
    z-index: 100;
    width: 100%;
    box-shadow: 0 10px 25px var(--shadow);
}

/* --- ESTILOS PARA INPUTS DEL CONSTRUCTOR --- */
.input-lms-form, .textarea-pool {
    width: 100%;
    box-sizing: border-box; /* Evita que se solapen */
    padding: 12px;
    background: var(--card-bg) !important; /* Usa el fondo del tema */
    border: 1px solid var(--border) !important;
    border-radius: 10px;
    color: var(--text) !important; /* Texto adaptativo */
    font-family: inherit;
    transition: 0.3s;
}

.textarea-pool {
    font-family: monospace;
    color: var(--secondary) !important; /* El JSON resalta en el color secundario del tema */
}

/* Placeholder universal que se adapta al texto del tema con transparencia */
.input-lms-form::placeholder, .textarea-pool::placeholder {
    color: var(--text) !important;
    opacity: 0.7 !important;
}

/* En el tema Rose, forzamos un poco más de contraste para el placeholder */
[data-theme='rose'] .input-lms-form::placeholder, 
[data-theme='rose'] .textarea-pool::placeholder {
    color: #000000;
    opacity: 0.7;
}


/* ============================================
   INPUT NUMBER PERSONALIZADO - TEMA ADAPTABLE
   ============================================ */

.number-input-custom {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
    width: fit-content;
    transition: all var(--transition-fast);
}

.number-input-custom:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* Ocultar spinners nativos completamente */
.input-lms-number {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    width: 60px;
    padding: var(--space-sm);
    
    /* Ocultar flechas en todos los navegadores */
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    /* Firefox */
    &[type=number] {
        -moz-appearance: textfield;
    }
}

/* Botones + y - */
.number-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.number-btn.minus {
    background: rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
}

.number-btn.minus:hover:not(:disabled) {
    background: var(--accent);
    color: var(--bg);
    transform: scale(1.1);
}

.number-btn.plus {
    background: rgba(var(--secondary-rgb), 0.2);
    color: var(--secondary);
}

.number-btn.plus:hover:not(:disabled) {
    background: var(--secondary);
    color: var(--bg);
    transform: scale(1.1);
}

.number-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}

.number-btn:active:not(:disabled) {
    transform: scale(0.95);
}

/* Display grande opcional */
.number-display {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin-top: var(--space-md);
    font-family: var(--font-mono);
    text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
}

/* ============================================
   VARIANTE: SLIDER + NUMBER COMBINADO
   ============================================ */

.number-slider-combo {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    max-width: 300px;
}

.number-slider-combo input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
    outline: none;
}

.number-slider-combo input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast);
}

.number-slider-combo input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.number-slider-combo .number-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

/* ============================================
   VARIANTE: SEGMENTED CONTROL (PILLS)
   ============================================ */

.segmented-number {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    padding: 4px;
    gap: 4px;
    width: fit-content;
}

.segmented-number button {
    padding: var(--space-sm) var(--space-lg);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.segmented-number button:hover {
    color: var(--text);
}

.segmented-number button.active {
    background: var(--primary);
    color: var(--bg);
    box-shadow: var(--shadow-sm);
}



/* ============================================
   PLACEHOLDERS NEGROS SOLO PARA TEMA ROSE
   ============================================ */

[data-theme="rose"] ::placeholder,
[data-theme="rose"] input::placeholder,
[data-theme="rose"] textarea::placeholder {
    color: #000000 !important;
    opacity: 1;
}

/* Para navegadores específicos */
[data-theme="rose"] ::-webkit-input-placeholder {
    color: #000000 !important;
    opacity: 1;
}

[data-theme="rose"] :-moz-placeholder {
    color: #000000 !important;
    opacity: 1;
}

[data-theme="rose"] ::-moz-placeholder {
    color: #000000 !important;
    opacity: 1;
}

[data-theme="rose"] :-ms-input-placeholder {
    color: #000000 !important;
    opacity: 1;
}

/* Opcional: Placeholder más oscuro al hacer focus */
[data-theme="rose"] input:focus::placeholder,
[data-theme="rose"] textarea:focus::placeholder {
    opacity: 0.8;
}

.test-stats { 
    display: flex; 
    gap: 10px; 
    justify-content: flex-end; 
    margin-bottom: 20px; 
}

[data-theme="rose"] .test-stats{
    color: #ffffff !important; 
    font-weight: 700;
}

/* ==========================================================================
   PARCHE DE VISIBILIDAD: REFUERZO PARA INPUTS EN TEMA ROSE
   (Añadir al final del archivo para asegurar prioridad por cascada)
   ========================================================================== */

[data-theme='rose'] input[type="text"], 
[data-theme='rose'] .input-lms-form, 
[data-theme='rose'] .textarea-pool,
[data-theme='rose'] .icon-picker-trigger {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid rgba(255, 133, 161, 0.5) !important;
    -webkit-text-fill-color: #000000 !important; /* Fuerza el color en Chrome/Safari */
    opacity: 1 !important;
}

[data-theme='rose'] .input-lms-number {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Asegura que los textos de las estadísticas se vean en el fondo rosa */
[data-theme="rose"] .test-stats {
    color: #3d2b2f !important;
    font-weight: 700;
}

/* Mejora el contraste de los placeholders en el tema rosa */
[data-theme="rose"] ::placeholder {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   REFUERZO DEFINITIVO PARA "RESUMEN O DESCRIPCIÓN" (TEMA ROSE)
   ========================================================================== */

[data-theme='rose'] textarea, 
[data-theme='rose'] .textarea-pool,
[data-theme='rose'] [name="resumen"], 
[data-theme='rose'] [name="descripcion"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important; /* Vital para navegadores Webkit */
    border: 2px solid rgba(255, 133, 161, 0.6) !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* Forzar visibilidad absoluta cuando el usuario está escribiendo */
[data-theme='rose'] textarea:focus, 
[data-theme='rose'] .textarea-pool:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    outline: 2px solid var(--primary) !important;
}

/* Estilo por defecto para la descripción (Temas oscuros) */
.video-description-text {
    color: #ccc; /* Gris claro para Dark/Ocean */
    opacity: 0.9;
}

/* REFUERZO PARA EL TEMA ROSE (PINK) */
[data-theme='rose'] .video-description-text {
    color: #000000 !important; /* Negro puro */
    opacity: 1 !important;
    font-weight: 500;
}

[data-theme='rose'] .video-description-container {
    background: rgba(0, 0, 0, 0.05) !important; /* Un fondo grisáceo muy leve para que se note el área en el rosa */
    border: 1px solid rgba(255, 133, 161, 0.3);
}