/* =========================================================================
 * ESTILOS DEDICADOS PARA EL MODAL DE TUTORIAL
 * ========================================================================= */

.modal--tutorial .modal__content { 
    flex-direction: row; 
    align-items: stretch; 
    gap: 0; 
    max-width: 750px; 
    padding: 0; 
    overflow: hidden; 
    background: #1f2937;
    border: 2px solid #a78bfa;
    animation: tutorial-border-glow 3s ease-in-out infinite;
    transition: border-color 0.5s ease;
}
.budi-tutorial-visual-col { 
    flex: 0 0 45%;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 15px; 
    color: white; 
    padding: 20px;
    box-sizing: border-box;
    transition: background 0.5s ease;
}
.budi-tutorial-image-container { 
    position: relative; 
    width: 100%; 
}

#budi-tutorial-image { 
    width: 80%; 
    max-height: none; 
    margin: 0 auto; 
    display: block; 
    object-fit: contain; 
    border-radius: 8px; 
    animation: tutorial-pet-glow 3s ease-in-out infinite;
}

@keyframes tutorial-pet-glow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.9)); }
}

#budi-tutorial-pet-type-tag { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    background-color: rgba(0, 0, 0, 0.7); 
    color: white; 
    padding: 4px 8px; 
    border-radius: 5px; 
    font-size: 0.8em; 
    font-weight: bold; 
}

/* --- INICIO DE LA MODIFICACIÓN --- */
.budi-tutorial-text-col { 
    flex: 1 1 55%;
    text-align: left; 
    padding: 0 20px; /* ANTES: 20px. Se elimina padding superior e inferior. */
    display: flex; 
    flex-direction: column;
    justify-content: center;
    color: #e5e7eb;
    position: relative;
}

.budi-tutorial-text-col .modal__text { 
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    flex-grow: 0;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
    padding-right: 10px; 
    margin: 0; /* ANTES: 15px 0. Se eliminan los márgenes. */
}

.budi-tutorial-navigation { 
    position: static;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
    padding-top: 0; /* ANTES: 15px. Se elimina el padding. */
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 0; /* ANTES: 15px. Se elimina el margen. */
}

.budi-tutorial-skip-wrapper { 
    position: static;
    width: 100%;
    text-align: center;
    margin-top: 0; /* ANTES: 15px. Se elimina el margen. */
}
/* --- FIN DE LA MODIFICACIÓN --- */


.budi-tutorial-text-col .modal__title { 
    text-align: left; 
    color: #c4b5fd;
}

.budi-tutorial-navigation .btn { 
    width: auto; 
    flex-grow: 1; 
    padding: 1.2vh 1.5vh; 
    font-size: clamp(0.7em, 2.2vh, 0.9em); 
}
#budi-tutorial-dots { 
    display: flex; 
    gap: 0.8vh; 
    padding: 0 10px;
}
.budi-tutorial-dot { 
    width: 1.5vh; 
    height: 1.5vh; 
    background-color: #6b7280; 
    border-radius: 50%; 
    transition: background-color: 0.3s; 
}
.budi-tutorial-dot.active { 
    background-color: #0d6efd; 
}

.budi-skip-btn { 
    background: none; 
    border: none; 
    color: #9ca3af; 
    text-decoration: underline; 
    cursor: pointer; 
    font-size: clamp(0.65em, 1.8vh, 0.75em); 
}

@media (orientation: landscape) {
    .modal--tutorial .modal__content {
        height: 85vh;
        max-height: 550px;
    }
}

@media (orientation: portrait) {
  .modal--tutorial .modal__content { 
      flex-direction: column; 
      text-align: center; 
      height: auto; 
      margin: auto;
  }
  .budi-tutorial-visual-col { 
      border-radius: 12px 12px 0 0; 
      align-self: stretch;
  }
  .budi-tutorial-text-col, .budi-tutorial-text-col .modal__title { 
      text-align: center; 
  }
}

/* Clases de Tema para los Colores de Fondo */
.budi-tutorial-visual-col.theme-correct {
    background: radial-gradient(ellipse at center, #422d03, #1a1502);
}
.budi-tutorial-visual-col.theme-hint {
    background: linear-gradient(145deg, #0284c7, #0891b2);
}
.budi-tutorial-visual-col.theme-prize {
    background: radial-gradient(ellipse at center, #fde047, #f59e0b);
}
.budi-tutorial-visual-col.theme-decoy {
    background: linear-gradient(145deg, #4c1d95, #2c1255);
}

/* Clases de Tema para el Color del Borde */
.modal--tutorial .modal__content.theme-correct {
    border-color: #f59e0b;
}
.modal--tutorial .modal__content.theme-hint {
    border-color: #0891b2;
}
.modal--tutorial .modal__content.theme-prize {
    border-color: #fde047;
}
.modal--tutorial .modal__content.theme-decoy {
    border-color: #a78bfa;
}

@keyframes tutorial-border-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 35px rgba(245, 158, 11, 0.8); }
}