@media (max-width: 440px) {
    fieldset {
        padding: 0.5rem;
    }
}

.card-list-container {
    display: flex;
    flex-wrap: wrap;
    columns: 3;
    padding: 1rem;
}

.card-list-container .form-control {
    flex-basis: calc(50% - 1rem);
    margin-bottom: 0.3rem;
}

@media (min-width: 600px) {
    .card-list-container .form-control {
        flex-basis: calc(33.33% - 1rem);
    }
}

/* --- Secciones Desplegables de Cartas --- */
#collapsible-card-sections {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.collapsible-section {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-normal);
    transition: background-color 0.2s ease;
    overflow: hidden;
}

.collapsible-section summary {
    padding: 0.8rem 1rem 0.8rem 2.5rem;
    cursor: pointer;
    position: relative;
    list-style: none; /* Oculta el marcador por defecto */
    outline: none;
    font-weight: bold;
    color: var(--text-color-light);
}

.collapsible-section summary::-webkit-details-marker {
    display: none;
}

.collapsible-section summary::before {
    content: '▶';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease-in-out;
    color: var(--info-color);
}

.collapsible-section[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
}

.collapsible-section[open] > summary {
    background-color: var(--bg-lightest);
    border-bottom: 1px solid var(--border-color);
}

.collapsible-section .card-list-container {
    padding-top: 1rem; /* Añade espacio superior cuando está abierto */
    background-color: var(--section-deep);
}


/* Controles para añadir carta (sin wrap) */
#add-card-controls {
    display: flex; /* Elementos en línea */
    gap: 0.5rem; /* Espacio entre input y botón */
    align-items: center; /* Alinear verticalmente */
    padding: 0 1rem 1rem 1rem;
}

#add-card-controls input[type="text"] {
     flex-grow: 1; /* Input ocupa el espacio disponible */
     min-width: 120px; /* Ancho mínimo para el input */
     margin-bottom: 0; /* Sobreescribir margen por defecto */
}

#add-card-controls button {
    white-space: nowrap; /* Texto del botón en una línea */
    flex-shrink: 0; /* Evita que el botón se encoja */
}

/* Contenedor de botones de selección */
#selection-controls {
    display: flex;
    flex-wrap: wrap; 
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

/* Contenedor principal de los sets recomendados */
#set-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Contenedor de botones dentro de cada sección desplegable */
.set-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: var(--section-deep);
}

/* Estilos para la pantalla de resultados */
#result-screen {
    background-color: var(--bg-color);
    display: flex; /* Para centrar el content-section */
    flex-direction: column;
    justify-content: center; /* Centra verticalmente el section */
    align-items: center;
    padding: 1rem; /* Padding global */
    box-sizing: border-box;
    flex-grow: 1; /* Ocupa el espacio disponible en el body flex */
    overflow: hidden; /* Evita scrollbars propios, el scroll está en el section */
}

/* Hacer que el content-section ocupe el espacio disponible pero con máx. ancho */
#result-screen .content-section {
    width: 100%;
    max-width: 500px; /* Ajustar según necesidad */
    margin: auto; /* Centrado horizontal y vertical */
    height: 100%; /* Ocupa la altura del #result-screen */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Evitar que el section tenga scroll propio inicialmente */
}

#result-list-container {
    margin: 1rem 0; /* Espacio vertical alrededor de la lista */
    flex-grow: 1; /* Permite que la lista ocupe el espacio vertical */
    border: 1px solid var(--border-color); /* Opcional: Borde para delimitar */
    border-radius: var(--border-radius-md);
    padding: 0.5rem; /* Padding interno */
    background-color: var(--section-deep); /* Fondo ligeramente diferente */
    columns: 2;
}

#result-list-container .nav-list {
    display: flex; /* Usar flex para controlar los items */
    flex-direction: column; /* Apilar los items verticalmente */
    gap: 0.5rem; /* Espacio entre cartas */
    list-style: none;
    padding: 0;
    margin: 0;
}

#result-list-container .nav-list .btn {
    display: block; /* Hace que cada botón ocupe todo el ancho disponible */
    width: 100%; /* Asegura que ocupen el ancho */
    text-align: left; /* Alinear texto a la izquierda */
    margin: 0; /* Resetear márgenes del botón */
    padding: 0.6rem 1rem; /* Ajustar padding si es necesario */
    font-size: 1.1rem; /* Ajustar tamaño de fuente */
    background-color: var(--bg-normal); /* Fondo consistente para items */
}

/* Estilos para los botones de acción en la pantalla de resultados */
#result-action-buttons {
    display: flex;
    flex-wrap: wrap; /* Permitir wrap si no caben */
    gap: 0.8rem; /* Espacio entre botones */
    justify-content: space-around; /* Distribuir espacio */
    margin-top: 1.5rem; /* Separación de la lista */
    padding-top: 1rem; /* Separación visual con borde */
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; /* Evitar que se encoja */
}

#result-action-buttons .btn {
    flex-grow: 1; /* Intentar que ocupen espacio similar */
    min-width: 130px; /* Ancho mínimo para evitar que se vean mal */
}