/* --- Alilo Interactive Demo CSS - Version 6.0 (Final UI) --- */

/* --- Foundational Styles & Brand Variables --- */
:root {
    --alilo-blue: #007AFF;
    --alilo-navy: #004080;
    --alilo-text: #334155;
    --alilo-text-light: #64748b;
    --alilo-white: #FFFFFF;
    --alilo-green: #22c55e;
    --alilo-green-light: #dcfce7;
    --alilo-green-dark: #166534;
    --alilo-red: #ef4444;
    --alilo-red-light: #fee2e2;
    --alilo-red-dark: #991b1b;
    --alilo-yellow: #f59e0b;
    --alilo-orange: #FF9500;
    --alilo-gray-border: #e2e8f0;
    --alilo-panel-bg: rgba(255, 255, 255, 0.7);
}

/* Main plugin container */
#alilo-interactive-demo-container {
    background: #f0f4f8;
    border-radius: 28px;
    padding: 1rem;
    max-width: 420px;
    margin: 2rem auto;
    box-shadow: 0 20px 40px -10px rgba(0, 64, 128, 0.2);
    position: relative;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--alilo-text);
}

.alilo-screen {
    text-align: center;
    padding: 1.5rem;
    animation: fade-in 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.hidden { display: none !important; }

/* --- Typography --- */
#alilo-interactive-demo-container h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 700; color: var(--alilo-navy); }
#alilo-interactive-demo-container h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; color: var(--alilo-navy); }
#alilo-interactive-demo-container p { font-size: 1rem; line-height: 1.6; color: var(--alilo-text-light); }
.p-lg { font-size: 1.125rem; }

/* --- Screen: Upload --- */
#alilo-screen-upload h1 { margin-bottom: 0.5rem; }
#alilo-screen-upload p { max-width: 90%; margin: 0 auto 2rem auto; }
#start-simulation-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; width: auto; padding: 1rem 2rem; }

/* --- Screen: Analyzing --- */
#alilo-screen-analyzing .analyzing-content-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; }
#alilo-screen-analyzing .robot-illustration { width: 64px; height: auto; color: var(--alilo-navy); }
#alilo-screen-analyzing .analyzing-title { margin-top: 1rem; font-size: 1.25rem; color: var(--alilo-navy); }
#alilo-screen-analyzing .analyzing-filename-display { font-family: monospace; font-size: 0.875rem; margin-top: 0.25rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(0,0,0,0.05); border-radius: 9999px; padding: 0.25rem 0.75rem; }
#alilo-screen-analyzing .analyzing-description { font-size: 0.9rem; margin-top: 0.25rem; margin-bottom: 1.5rem; max-width: 90%; }
.concepts-wrapper { width: 100%; background: var(--alilo-panel-bg); backdrop-filter: blur(10px); border-radius: 20px; padding: 1rem; text-align: left; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.concepts-title { font-size: 1rem; font-weight: 600; color: var(--alilo-navy); margin-bottom: 0.5rem; padding-left: 0.5rem; }
.concepts-list-container { height: 180px; overflow-y: auto; padding-right: 5px; }
#alilo-key-concepts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
#alilo-key-concepts-list li { background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.9rem; font-weight: 500; animation: fade-in 0.5s forwards; opacity: 0; }
.concepts-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.1); text-align: center; }
.concepts-footer p { font-size: 0.9rem; font-weight: 600; }

/* --- Screen: Results --- */
#alilo-screen-results { padding: 0; background-color: var(--alilo-blue); color: var(--alilo-white); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 600px; }
.sunburst-bg-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.sunburst-bg { position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; background: repeating-conic-gradient(from 0deg, #0088FF 0deg 15deg, #0060d8 15deg 30deg); transform-origin: center center; animation: sunburst 40s linear infinite; transform: translate(-50%, -50%); opacity: 0.4; }
.results-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; padding: 1.5rem; }
.results-level-badge { background-color: var(--alilo-orange); color: white; padding: 0.25rem 1rem; border-radius: 9999px; font-weight: 700; font-size: 0.875rem; }
.results-score-container { position: relative; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; }
.progress-ring { width: 100%; height: 100%; }
.progress-ring-track { stroke: rgba(255, 255, 255, 0.3); }
.progress-ring-indicator { stroke: var(--alilo-white); transition: stroke-dashoffset 1.5s cubic-bezier(0.65, 0, 0.35, 1); }
.score-text { position: absolute; text-align: center; }
#alilo-animated-score { font-size: 3rem; font-weight: 800; color: var(--alilo-white); line-height: 1; }
.score-label { font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,0.8); }
.stat-card { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); color: var(--alilo-text); padding: 1rem; width: 100%; max-width: 320px; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.stat-card-message { font-weight: 600; color: var(--alilo-navy); }
.stat-card-data { display: flex; justify-content: space-around; margin-top: 1rem; }
.stat-value { font-size: 1.25rem; font-weight: 700; color: var(--alilo-navy); }
.stat-label { font-size: 0.75rem; color: var(--alilo-text-light); }
.results-actions { width: 100%; max-width: 320px; margin-top: 1rem; }
.alilo-primary-btn { width: 100%; padding: 1rem; background: var(--alilo-white); color: var(--alilo-blue); border: none; border-radius: 16px; font-weight: 700; font-size: 1.1rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.2s; }
.alilo-primary-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(0,0,0,0.15); }
.results-secondary-actions { display: flex; justify-content: space-around; margin-top: 1rem; }
.alilo-link-btn { background: none; border: none; color: rgba(255,255,255,0.8); font-weight: 600; cursor: pointer; transition: color 0.2s; }
.alilo-link-btn:hover { color: var(--alilo-white); }

/* --- Quark Activity Engine --- */
#alilo-screen-engine { padding: 0.5rem; }
.alilo-quark-inner { display: flex; flex-direction: column; min-height: 480px; padding: 1rem; }
.alilo-quark-header { margin-bottom: 2rem; text-align: left; }
.alilo-quark-title { font-size: 1.5rem; font-weight: 700; color: var(--alilo-navy); }
.alilo-quark-instruction { font-size: 1rem; color: var(--alilo-text-light); margin-top: 0.5rem; }
.alilo-quark-footer { margin-top: auto; padding-top: 1.5rem; }

/* --- Component Styles --- */
.alilo-option-button, .alilo-sortable-item, .alilo-class-btn { width: 100%; padding: 1rem; border: 2px solid var(--alilo-gray-border); border-radius: 16px; background-color: var(--alilo-white); font-weight: 600; color: #334155; cursor: pointer; transition: all 0.2s ease-in-out; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.08); text-align: left; font-size: 1rem; }
.alilo-option-button:hover:not(:disabled), .alilo-sortable-item:hover, .alilo-class-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--alilo-blue); box-shadow: 0 8px 20px -5px rgba(0, 122, 255, 0.15); }
.alilo-options-container, .alilo-sortable-list { display: flex; flex-direction: column; gap: 0.75rem; flex-grow: 1; list-style: none; padding: 0; margin: 0; }
.alilo-option-button.selected { border-color: var(--alilo-blue); background-color: #eff6ff; box-shadow: 0 0 0 3px var(--alilo-blue); }
.alilo-option-button.correct, .alilo-sortable-item.correct, .alilo-class-btn.correct { border-color: var(--alilo-green); background-color: var(--alilo-green-light); color: var(--alilo-green-dark); }
.alilo-option-button.incorrect, .alilo-sortable-item.incorrect, .alilo-class-btn.incorrect { border-color: var(--alilo-red); background-color: var(--alilo-red-light); color: var(--alilo-red-dark); }
.alilo-class-btn.incorrect { animation: shake 0.5s; }
.alilo-sortable-item { display: flex; align-items: center; cursor: grab; }
.alilo-sortable-item:active { cursor: grabbing; }
.drag-handle-icon { width: 24px; height: 24px; margin-right: 1rem; color: #94a3b8; }
.alilo-tf-card { flex-grow: 1; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 20px; padding: 2rem; margin: 1rem 0; font-size: 1.25rem; font-weight: 600; color: var(--alilo-navy); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08); }
.alilo-tf-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.alilo-tf-btn { padding: 1.25rem; border: none; border-radius: 16px; font-size: 1.25rem; font-weight: 700; color: white; cursor: pointer; transition: all 0.2s; box-shadow: 0 6px 20px -5px rgba(0,0,0,0.15); }
.alilo-tf-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(0,0,0,0.2); }
.alilo-tf-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.alilo-tf-falso { background-color: var(--alilo-red); }
.alilo-tf-verdadero { background-color: var(--alilo-green); }
.alilo-classification-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.5rem; flex-grow: 1; }
.alilo-classification-column { display: flex; flex-direction: column; gap: 0.75rem; }
.alilo-class-btn { text-align: center; height: 100%; }
.alilo-class-btn.selected { border-color: var(--alilo-blue); background-color: #eff6ff; box-shadow: 0 0 0 3px var(--alilo-blue); }

/* --- General Buttons & Feedback --- */
.alilo-verify-btn, .liquid-glass-upload-button { width: 100%; padding: 1rem; border: none; border-radius: 16px; font-size: 1.1rem; font-weight: 700; color: white; background-color: var(--alilo-blue); cursor: pointer; transition: all 0.2s; }
.alilo-verify-btn:hover, .liquid-glass-upload-button:hover { background-color: #0056b3; transform: translateY(-2px); box-shadow: 0 8px 20px -5px rgba(0, 122, 255, 0.3); }
.alilo-verify-btn:disabled, .liquid-glass-upload-button:disabled { background-color: #94a3b8; cursor: not-allowed; box-shadow: none; transform: none; }
#feedback-drawer { position: absolute; bottom: 0; left: 0; right: 0; background: #ffffff; border-top-left-radius: 24px; border-top-right-radius: 24px; padding: 1.5rem; box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.15); transform: translateY(0); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: 10; }
#feedback-drawer.hidden { transform: translateY(100%); }
.feedback-content { display: flex; align-items: center; gap: 1rem; }
.feedback-icon svg { width: 24px; height: 24px; }
#feedback-title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--alilo-text); }
#feedback-message { font-size: 0.9rem; margin: 0.25rem 0 0 0; color: var(--alilo-text-light); }
#feedback-xp { margin-left: auto; font-weight: 700; font-size: 1rem; color: var(--alilo-green); }
#feedback-continue-btn { margin-top: 1.5rem; width: 100%; }

/* --- Animations & Skeletons --- */
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes sunburst { 0% { transform: rotate(0deg) scale(1.5); } 100% { transform: rotate(360deg) scale(1.5); } }
.loading-dots span { display: inline-block; animation: dot-fade 1.5s infinite; }
.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-fade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes shimmer { 0% { background-position: -40rem 0; } 100% { background-position: 40rem 0; } }
.liquid-glass-skeleton { background-color: rgba(0,0,0,0.08); border-radius: 0.75rem; position: relative; overflow: hidden; height: 100%; }
.liquid-glass-skeleton::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); animation: shimmer 2s infinite; }