@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Open+Sans:wght@400;600;700&family=Merriweather:wght@300;400;700&display=swap');

:root {
    --bg-color: #fdf6e3;
    --bg-pattern: #e6d5b8;
    --text-main: #1f2937;
    --text-heading: #78350f;
    --card-bg: #ffffff;
    --card-border: #fcd34d;
    --highlight: #fffbeb;
    --accent: #d97706;
}

body.dark-mode {
    --bg-color: #1f2937;
    --bg-pattern: #374151;
    --text-main: #f3f4f6;
    --text-heading: #fcd34d;
    --card-bg: #374151;
    --card-border: #78350f;
    --highlight: #111827;
    --accent: #f59e0b;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg-color);
    background-image: radial-gradient(var(--bg-pattern) 1px, transparent 1px);
    background-size: 20px 20px;
    color: var(--text-main);
    transition: background-color 0.3s, color 0.3s;
    touch-action: pan-y;
}

/* Dark Mode Overrides específicos para Tailwind clases */
body.dark-mode .bg-white { background-color: var(--card-bg); color: var(--text-main); border-color: #4b5563; }
body.dark-mode .text-amber-900 { color: var(--text-heading); }
body.dark-mode .text-amber-800 { color: #fde68a; }
body.dark-mode .text-amber-700 { color: #d1d5db; }
body.dark-mode .bg-amber-50 { background-color: #111827; border-color: #4b5563; }
body.dark-mode .bg-amber-100 { background-color: #4b5563; color: #fff; border-color: #6b7280; }
body.dark-mode .border-amber-200 { border-color: #4b5563; }
body.dark-mode .border-amber-300 { border-color: #6b7280; }
body.dark-mode .bg-yellow-100 { background-color: #78350f; color: #fff; }

/* Tipografía */
h1, h2, h3, h4, .title-font {
    font-family: 'Amatic SC', cursive;
}

/* LECTURA */
.reading-content {
    font-family: 'Merriweather', serif;
    line-height: 1.8;
    font-size: 1.1rem;
}
.reading-content h3 {
    font-family: 'Amatic SC', cursive;
    font-size: 2rem;
    color: #78350f;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #d97706;
    padding-bottom: 0.5rem;
}
body.dark-mode .reading-content h3 { color: #fcd34d; border-color: #f59e0b; }
.verse-num {
    font-weight: bold;
    color: #d97706;
    margin-right: 0.5rem;
    font-size: 0.9em;
}
body.dark-mode .verse-num { color: #f59e0b; }

/* JUEGOS GENERALES */
.letter-cell { user-select: none; transition: all 0.2s; }
.letter-cell.selected { background-color: #d97706; color: white; transform: scale(1.1); }
.letter-cell.found { background-color: #10b981; color: white; animation: pulse 1s; }
body.dark-mode .letter-cell { color: #111827; }

/* CROSSOVER DRAG & DROP */
.crossover-row-container {
    display: flex; justify-content: center; margin-bottom: 12px; padding: 8px; border-radius: 12px; transition: background-color 0.3s;
}
.crossover-row-container.active-row { background-color: rgba(217, 119, 6, 0.1); border: 1px dashed #d97706; }
.crossover-slot { width: 40px; height: 40px; margin: 0 4px; background-color: rgba(0,0,0,0.05); border-radius: 8px; position: relative; }
.crossover-tile {
    width: 100%; height: 100%; background-color: #fff; border: 2px solid #d97706; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.25rem;
    color: #78350f; cursor: grab; user-select: none; touch-action: none; position: absolute; top: 0; left: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.1s, box-shadow 0.1s, background-color 0.3s; z-index: 1;
}
.crossover-tile:active { cursor: grabbing; transform: scale(1.1); z-index: 100; box-shadow: 0 5px 10px rgba(0,0,0,0.3); }
.crossover-tile.locked { background-color: #10b981; border-color: #059669; color: white; cursor: default; }

@media (max-width: 640px) {
    .crossover-slot { width: 32px; height: 32px; margin: 0 2px; }
    .crossover-tile { font-size: 1rem; border-width: 1px; }
}

body.dark-mode .crossover-tile { background-color: #4b5563; border-color: #f59e0b; color: #fff; }
body.dark-mode .crossover-tile.locked { background-color: #059669; border-color: #047857; }

/* STEPPER */
.step-circle {
    width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.9rem; cursor: pointer; transition: all 0.3s; position: relative; z-index: 10;
}
.step-line { position: absolute; top: 50%; left: 0; width: 100%; height: 4px; background-color: #e5e7eb; z-index: 0; transform: translateY(-50%); }
.step-circle.locked { background-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
.step-circle.active { background-color: #d97706; color: white; transform: scale(1.2); box-shadow: 0 0 10px rgba(217,119,6,0.5); }
.step-circle.completed { background-color: #10b981; color: white; }

/* CRUCIGRAMA */
.crossword-cell {
    width: 40px; height: 40px; border: 1px solid #78350f; text-align: center; font-weight: bold; text-transform: uppercase;
    background: white; position: relative; transition: background-color 0.3s;
}
.crossword-cell input { cursor: pointer; }
.crossword-cell.black { background-color: #292524; border: 1px solid #292524; }
.crossword-cell.correct input { background-color: #d1fae5; color: #047857; }
.crossword-cell.incorrect { background-color: #fca5a5 !important; animation: shake 0.5s; }
.cursor-magic { cursor: crosshair !important; }
body.dark-mode .crossword-cell { background-color: #d1d5db; color: #000; }
body.dark-mode .crossword-cell.black { background-color: #111827; border-color: #000; }

/* TARJETAS */
.flip-card { background-color: transparent; perspective: 1000px; cursor: pointer; height: 220px; }
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
    position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.flip-card-front { background-color: #fffbeb; border: 2px solid #fcd34d; color: #78350f; }
.flip-card-back { background-color: #92400e; color: white; transform: rotateY(180deg); border: 2px solid #78350f; }
body.dark-mode .flip-card-front { background-color: #1f2937; border-color: #f59e0b; color: #fcd34d; }

/* UTILIDADES Y ANIMACIONES */
.article-content h3 { font-size: 1.8rem; color: var(--text-heading); margin-top: 2rem; border-bottom: 2px solid #fcd34d; display: inline-block; }
.article-content h4 { font-size: 1.4rem; color: #92400e; margin-top: 1rem; font-weight: bold; }
body.dark-mode .article-content h4 { color: #fcd34d; }
.highlight-box { background-color: #fffbeb; border-left: 4px solid #d97706; padding: 1rem; margin: 1.5rem 0; border-radius: 0 8px 8px 0; }
body.dark-mode .highlight-box { background-color: #111827; border-left-color: #f59e0b; }
.midrash-note { font-size: 0.9em; color: #6b7280; font-style: italic; background: #f3f4f6; padding: 8px; border-radius: 6px; margin-top: 5px; display: block; }
body.dark-mode .midrash-note { background-color: #374151; color: #d1d5db; }
.tab-btn.active { background-color: #92400e; color: white; border-color: #92400e; transform: scale(1.05); }
body.dark-mode .tab-btn.active { background-color: #f59e0b; border-color: #f59e0b; color: #111827; }
.modal-overlay { background-color: rgba(0,0,0,0.5); }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.fade-in { animation: fadeIn 0.5s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Estilo para tarjeta bloqueada */
.locked-card {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(100%);
    cursor: default;
}

/* --- CORRECCIONES PARA MÓVIL (RESPONSIVE) --- */

/* 1. CRUCIGRAMA: Habilitar Scroll y ajustar celdas */
#crossword-grid {
    /* Permite mover el crucigrama si es más grande que la pantalla */
    overflow: auto; 
    display: grid;
    /* Centrarlo visualmente */
    margin: 0 auto;
    /* Scroll suave */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    max-width: 100%;
    padding: 10px;
    background-color: #78350f; /* Fondo oscuro para que se vea el borde */
    border-radius: 8px;
}

/* Reducir ligeramente las celdas en móvil para ver más */
@media (max-width: 640px) {
    .crossword-cell {
        width: 35px !important; /* Forzamos tamaño más pequeño que 40px */
        height: 35px !important;
        font-size: 14px !important;
    }
    /* Truco: Ajustar las columnas generadas por JS */
    #crossword-grid {
        /* Esto anula el estilo en línea de JS de 40px y usa 35px */
        grid-template-columns: repeat(var(--cols, 15), 35px) !important; 
    }
}

/* 2. SOPA DE LETRAS: Ajuste extremo para 14x14 */
@media (max-width: 640px) {
    #word-search-grid {
        gap: 1px !important; /* Menos espacio entre letras */
        padding: 4px !important;
    }
    .letter-cell {
        /* Tamaño flexible basado en el ancho de pantalla */
        width: auto !important; 
        height: auto !important;
        aspect-ratio: 1 / 1; /* Mantenerlas cuadradas */
        font-size: 0.8rem !important; /* Letra más pequeña */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
    }
}

/* 3. INPUTS: Evitar zoom automático en iPhone */
input {
    font-size: 16px !important; /* iOS hace zoom si es menor a 16px */
}

/* 4. CROSSOVER: Ajuste de fichas */
@media (max-width: 640px) {
    .crossover-tile {
        font-size: 1rem !important;
        border-width: 1px !important;
    }
    .crossover-slot {
        width: 32px !important;
        height: 32px !important;
        margin: 0 1px !important;
    }
}