/* 
   ╔══════════════════════════════════════════════════════════════════╗
   ║  JAVA POO LEARNING - LEARNING COMPONENTS                   ║
   ║  Estilos para componentes de aprendizaje                    ║
   ╚═══════════════════════════════════════════════════════════╝ 
 */

/* ==================== CODE BLOCKS ==================== */
.code-block {
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 1.25rem;
    overflow-x: auto;
    line-height: 1.8;
    font-size: 0.875rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.code-block pre {
    margin: 0;
    font-family: 'Fira Code', monospace;
}

/* ==================== DARK CODE BLOCKS ==================== */
/* Asegurar color para todo el texto en bloques de código oscuros */
.bg-slate-900.font-mono,
.bg-slate-900.rounded-xl.font-mono {
    color: #cbd5e1;
}

.bg-slate-900.font-mono *,
.bg-slate-900.rounded-xl.font-mono * {
    color: inherit;
}

/* Tokens específicos para bloques oscuros - ya tienen colores pero reforzamos */
.bg-slate-900 .token-keyword,
.bg-slate-900.font-mono .token-keyword {
    color: #c792ea;
}

.bg-slate-900 .token-class,
.bg-slate-900.font-mono .token-class {
    color: #82aaff;
}

.bg-slate-900 .token-string,
.bg-slate-900.font-mono .token-string {
    color: #c3e88d;
}

.bg-slate-900 .token-comment,
.bg-slate-900.font-mono .token-comment {
    color: #676e95;
}

.bg-slate-900 .token-function,
.bg-slate-900.font-mono .token-function {
    color: #82aaff;
}

.bg-slate-900 .token-variable,
.bg-slate-900.font-mono .token-variable {
    color: #ff5370;
}

.bg-slate-900 .token-number,
.bg-slate-900.font-mono .token-number {
    color: #f78c6c;
}

/* Additional token types for Java */
.bg-slate-900 .token-type,
.bg-slate-900.font-mono .token-type {
    color: #89ddff;
}

.bg-slate-900 .token-annotation,
.bg-slate-900.font-mono .token-annotation {
    color: #c792ea;
}

/* ==================== SYNTAX HIGHLIGHTING ==================== */
.token-keyword {
    color: #4c1d95;
    font-weight: 700;
}

.token-class {
    color: #1e40af;
    font-weight: 700;
}

.token-string {
    color: #047857;
}

.token-comment {
    color: #374151;
    font-style: italic;
}

.token-function {
    color: #b45309;
}

.token-variable {
    color: #be123c;
}

.token-number {
    color: #0891b2;
}

.token-generic {
    color: #0d9488;
    font-style: italic;
}

.token-constant {
    color: #059669;
    font-weight: 600;
}

/* ==================== FLIP CARDS ==================== */
.perspective-1000 {
    perspective: 1000px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.perspective-1000.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.card-front {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.card-back {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    transform: rotateY(180deg);
    border: 2px solid #6366f1;
}

/* ==================== CONTENT CARDS ==================== */
.content-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* ==================== LEARN SECTIONS ==================== */
.learn-section {
    animation: fadeIn 0.3s ease-out;
}

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

/* ==================== NAVIGATION TABS ==================== */
.learn-tab {
    transition: all 0.3s ease;
}

.learn-tab:hover {
    transform: translateY(-2px);
}

/* ==================== PROGRESS BAR ==================== */
.progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width 0.5s ease;
}

/* ==================== MODE BUTTONS ==================== */
.mode-btn {
    transition: all 0.3s ease;
}

.mode-btn.active {
    transform: scale(1.05);
}

/* ==================== STUDY CARDS ==================== */
.study-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.study-card {
    background: transparent;
    cursor: pointer;
    perspective: 1000px;
    height: 220px;
}

.study-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    border-radius: 16px;
}

.study-card.flipped .study-card-inner {
    transform: rotateY(180deg);
}

.study-card-front,
.study-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.study-card-front {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.study-card-back {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    transform: rotateY(180deg);
    border: 2px solid #6366f1;
    overflow-y: auto;
    max-height: 220px;
}

.study-card-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
}

.study-card-category.basico { background: #dbeafe; color: #1d4ed8; }
.study-card-category.intermedio { background: #fef3c7; color: #b45309; }
.study-card-category.avanzado { background: #fce7f3; color: #be185d; }
.study-card-category.colecciones { background: #d1fae5; color: #047857; }
.study-card-category.swing { background: #cffafe; color: #155e75; }

.study-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.study-card-summary {
    font-size: 0.875rem;
    opacity: 0.9;
    line-height: 1.5;
}

.study-card-hint {
    position: absolute;
    bottom: 1rem;
    font-size: 0.75rem;
    opacity: 0.7;
}

.study-card-back-content {
    text-align: left;
    width: 100%;
    font-size: 0.875rem;
    color: #1e293b;
}

.study-card-back-content h4 {
    font-weight: 700;
    color: #6366f1;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.study-card-back-content h4:first-child {
    margin-top: 0;
}

.study-card-back-content ul {
    margin-left: 1rem;
    list-style: disc;
}

.study-card-back-content li {
    margin-bottom: 0.25rem;
}

.study-card-code {
    background: #1e293b;
    color: #e2e8f0;
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 0.75rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    overflow-x: auto;
}

.study-card-code pre {
    margin: 0;
}

.study-card-tip {
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: #fef9c3;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #854d0e;
}

/* ==================== QUIZ STYLES ==================== */
.quiz-container {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 2px solid #bae6fd;
}

.quiz-question {
    transition: all 0.3s ease;
}

.quiz-question:hover {
    border-color: #0ea5e9 !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
}

.quiz-question input[type="radio"]:checked + span {
    font-weight: 600;
}

.quiz-question label {
    transition: all 0.2s ease;
}

.quiz-question label:has(input[type="radio"]:checked) {
    background-color: #f0f9ff;
    border-color: #0ea5e9;
}

.quiz-feedback {
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

#quiz-result {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Correct answer highlight */
.quiz-question label.bg-green-100 {
    background-color: #dcfce7 !important;
    border-color: #22c55e !important;
}

/* Incorrect answer highlight */
.quiz-question label.bg-red-100 {
    background-color: #fee2e2 !important;
    border-color: #ef4444 !important;
}

/* ==================== ESTILOS DE IMPRESIÓN ==================== */
@media print {
    /* Ocultar elementos no necesarios */
    header, 
    #learn-tabs-nav, 
    .mode-btn,
    #mode-learn,
    #mode-lab,
    #global-progress-bar,
    #mode-lab-content,
    .toast-container {
        display: none !important;
    }
    
    /* Estilos generales para impresión */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
    }
    
    .learn-section {
        display: block !important;
        page-break-inside: avoid;
    }
    
    /* Ocultar elementos interactivos */
    .study-card,
    .flip-card,
    button,
    .no-print {
        display: none !important;
    }
    
    /* Ajustar colores para impresión */
    .bg-gradient-to-r,
    .bg-gradient-to-l,
    .bg-gradient-to-br {
        background: none !important;
        border: 1px solid #ccc !important;
    }
    
    /* Código en impresión */
    .code-block {
        background: #f5f5f5 !important;
        border: 1px solid #ddd !important;
        font-size: 10pt;
    }
    
    /* Links */
    a {
        color: black !important;
        text-decoration: underline !important;
    }
    
    /* Títulos */
    h1, h2, h3, h4 {
        color: black !important;
        page-break-after: avoid;
    }
    
    /* Imágenes */
    img {
        max-width: 100% !important;
    }
    
    /* Tables */
    table {
        border-collapse: collapse !important;
    }
    
    th, td {
        border: 1px solid #ddd !important;
        padding: 8px !important;
    }
}


/* ==================== BUG FIX: EXERCISE FEEDBACK STYLES ==================== */
/* Estilos para feedback de ejercicios - faltaban en CSS original */

.feedback-correct {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border: 1.5px solid #22c55e;
    color: #166534;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.feedback-warning {
    background: linear-gradient(135deg, #fef9c3, #fef08a);
    border: 1.5px solid #eab308;
    color: #713f12;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.feedback-incorrect {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 1.5px solid #ef4444;
    color: #991b1b;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ==================== BUG FIX: LAB INPUT STYLES ==================== */
/* Estilos para inputs en ejercicios de laboratorio */

.lab-input {
    background: #1e293b;
    color: #93c5fd;
    border: 1.5px solid #334155;
    border-radius: 6px;
    padding: 2px 8px;
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 0.875em;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    vertical-align: middle;
}

.lab-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.lab-input.correct {
    border-color: #22c55e !important;
    background: #14291c;
    color: #86efac;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.lab-input.incorrect {
    border-color: #ef4444 !important;
    background: #2d1212;
    color: #fca5a5;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px); }
}

/* ============================================================
   IDE-STYLE CODE BLOCKS
   Simula VS Code / IntelliJ con tema One Dark Pro.
   Aplica a todos los bloques oscuros de la sección de aprendizaje
   y del laboratorio de ejercicios.
   ============================================================ */

/* ─── Base: fuente con ligaduras, antialiasing y color de texto ─── */
.bg-slate-900.font-mono {
    color: #abb2bf;
    font-family: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
    font-feature-settings: "calt" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    line-height: 1.75;
}

/* <pre> dentro de bloques oscuros */
.bg-slate-900 pre {
    color: #abb2bf;
    line-height: 1.75;
    font-family: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
    font-feature-settings: "calt" 1, "liga" 1;
}

/* ─── Bloques compactos (rounded-lg) — tarjetas y referencias rápidas ─── */
/* Acento lateral azul como indicador de lenguaje, fondo ligeramente más cálido */
.bg-slate-900.rounded-lg.font-mono {
    background: #1e2030;
    border-left: 3px solid #5c8ef0;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* ─── Bloques grandes (rounded-xl) — chrome completo estilo IDE ─── */
/* Barra de título con puntos macOS + badge "☕ JAVA" */
.bg-slate-900.rounded-xl.font-mono {
    position: relative;
    padding-top: 2.75rem;
    background: #1a1b26;
    border: 1px solid #2a2f5e;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Barra de título */
.bg-slate-900.rounded-xl.font-mono::before {
    content: '☕  JAVA';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    line-height: 36px;
    text-align: right;
    padding-right: 14px;
    border-radius: 0.75rem 0.75rem 0 0;
    background-color: #0f1117;
    border-bottom: 1px solid #2a2f5e;
    color: #e5c07b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    /* Puntos macOS: rojo, amarillo, verde */
    background-image:
        radial-gradient(circle, #ff5f57 6px, transparent 6px),
        radial-gradient(circle, #febc2e 6px, transparent 6px),
        radial-gradient(circle, #28c840 6px, transparent 6px);
    background-size: 12px 12px, 12px 12px, 12px 12px;
    background-position: 12px center, 30px center, 48px center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* ─── Scrollbar personalizada ─── */
.bg-slate-900.font-mono::-webkit-scrollbar          { height: 5px; width: 5px; }
.bg-slate-900.font-mono::-webkit-scrollbar-track    { background: transparent; }
.bg-slate-900.font-mono::-webkit-scrollbar-thumb    { background: #3b4261; border-radius: 3px; }
.bg-slate-900.font-mono::-webkit-scrollbar-thumb:hover { background: #565f89; }

/* ─── Tokens de sintaxis — Paleta One Dark Pro ─── */
/*     !important garantiza que ganan frente a Tailwind CDN              */

/* Keywords: public, class, void, static, return, new, extends... */
.bg-slate-900 .text-purple-400 { color: #c678dd !important; }

/* Tipos y clases: Persona, ArrayList, String, int... */
.bg-slate-900 .text-blue-400   { color: #61afef !important; }

/* Métodos y constructores: saludar(), calcularArea()... */
.bg-slate-900 .text-yellow-400 { color: #e5c07b !important; }

/* Strings literales: "Toyota", "Hola mundo"... */
.bg-slate-900 .text-green-400  { color: #98c379 !important; }

/* this, super y referencias especiales */
.bg-slate-900 .text-cyan-300   { color: #56b6c2 !important; }

/* Números: 180, 3.14, 0... */
.bg-slate-900 .text-cyan-400   { color: #d19a66 !important; }

/* Comentarios — en cursiva y más tenues para no distraer */
.bg-slate-900 .text-gray-400,
.bg-slate-900 .text-gray-500   { color: #5c6370 !important; font-style: italic; }

/* Anotaciones: @Override, @FunctionalInterface */
.bg-slate-900 .text-orange-300 { color: #c678dd !important; }

/* Modificadores de acceso (private, protected) marcados con text-red-400
   → se muestran como keywords (purple) igual que en cualquier IDE */
.bg-slate-900 .text-red-400    { color: #c678dd !important; }

/* ─── Código inline en texto descriptivo ─── */
/* Mejora visual para <code class="bg-slate-100 px-1 rounded"> en descripciones */
code.bg-slate-100 {
    background-color: #f0ebff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 0.82em;
    font-weight: 500;
    padding: 0.12em 0.4em;
    border-radius: 5px;
}

/* ==================== RESPONSIVE LEARNING ==================== */

/* Code blocks responsive */
@media (max-width: 640px) {
    .code-block {
        padding: 0.875rem;
        font-size: 0.8rem;
        border-radius: 8px;
        line-height: 1.6;
    }
    
    .code-block pre {
        font-size: 0.8rem;
    }
}

/* Study cards responsive */
.study-card {
    perspective: 1000px;
    width: 100%;
    min-height: 200px;
}

@media (min-width: 640px) {
    .study-card {
        min-height: 250px;
    }
}

.study-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.study-card.flipped .study-card-inner {
    transform: rotateY(180deg);
}

.study-card-front,
.study-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

@media (min-width: 640px) {
    .study-card-front,
    .study-card-back {
        padding: 1.5rem;
    }
}

.study-card-back {
    transform: rotateY(180deg);
}

/* Expandable cards */
.expandable-card {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.expandable-header {
    padding: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

@media (min-width: 640px) {
    .expandable-header {
        padding: 1.25rem;
    }
}

.expandable-content {
    padding: 0 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
}

.expandable-card.expanded .expandable-content {
    padding: 1rem;
    max-height: 500px;
}

@media (min-width: 640px) {
    .expandable-card.expanded .expandable-content {
        padding: 1.25rem;
    }
}

/* Quiz questions responsive */
.quiz-question {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

@media (min-width: 640px) {
    .quiz-question {
        padding: 1.5rem;
    }
}

.quiz-question label {
    display: block;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

@media (min-width: 640px) {
    .quiz-question label {
        padding: 1rem 1.25rem;
    }
}

.quiz-question label:hover {
    border-color: #6366f1;
    background: #f5f3ff;
}