* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

:root {
    --azul-fondo: #000025;
    --dorado: #DAA520;
    --texto: white;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--azul-fondo);
    color: var(--texto);
    display: flex;
    flex-direction: column; /* Apilar header y main-content-container */
    min-height: 100dvh; /* Asegurar que el body ocupe toda la altura de la ventana */
    overflow: hidden; /* Evitar scroll en el body */
}

.app-header {
    width: 100%;
    height: 10dvh; /* 10% de la altura de la ventana */
    background-color: var(--azul-oscuro);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.main-content-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ocupar el espacio restante */
    height: 90dvh; /* 90% de la altura de la ventana */
    overflow: hidden; /* Asegurar que el contenido interno pueda hacer scroll si es necesario */
}

.container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    overflow: hidden; /* Asegurar que el contenido interno pueda hacer scroll si es necesario */
}
.qr-options-section *{
    margin: 5px;
}
.qr-options-section {
    width: 90%;
    height: 45%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--dorado); /* Borde añadido */
}

.qr-preview-section {
    width: 90%;
    height: 45%;
    display: flex;
    flex-direction: column; /* Apilar elementos verticalmente */
    justify-content: center;
    align-items: center;
    border: 1px solid var(--dorado); /* Borde añadido */
}

h1 {
    font-family: 'Michroma', sans-serif;
    color: var(--dorado);
    font-size: 2.5em;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--texto);
    font-size: 16px;
}

.form-group {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el checkbox y el label */
}

label {
    font-weight: bold;
    color: var(--texto);
    font-size: 16px;
}

input[type="text"],
input[type="number"],
input[type="color"],
select {
    width: 100%;
    border: 1px solid var(--dorado);
    border-radius: 5px;
    font-size: 16px;
    padding: 5px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    background-color: #00001a;
    color: var(--texto);
}

input[type="file"] {
    width: 100%;
    border: 1px solid var(--dorado);
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    background-color: #00001a;
    color: var(--texto);
}

input[type="file"]::file-selector-button {
    background-color: var(--dorado);
    color: var(--azul-fondo);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--dorado);
    border-radius: 4px;
    background-color: var(--azul-fondo);
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}

input[type="checkbox"]:checked {
    background-color: var(--dorado);
    border-color: var(--dorado);
}

input[type="checkbox"]:checked::before {
    content: '✔';
    display: block;
    color: var(--azul-fondo);
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn {
    background-color: var(--dorado);
    color: var(--azul-fondo);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
}

.btn:hover {
    background-color: #c49a2a;
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.qr-output-section {
    display: flex;
    place-items: center; /* Centrar todos los elementos */
    flex-direction: column; /* Mantener la dirección de columna para el flujo */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 0; /* Eliminar el gap ya que las alturas son fijas */
}

.qr-output-section h2 {
    color: var(--dorado);
    font-size: 20px;
    height: 10%; /* 20% de la altura del padre */
    width: 100%;
    display: grid; /* Para centrar el texto dentro del h2 */
    place-items: center;
}

#qrcode {
    display: grid; /* Usar grid para centrar el contenido del QR */
    place-items: center;
    width: 100%; /* Fijo 60% del ancho del padre */
    height: 70%; /* Fijo 60% de la altura del padre */
}

.download-buttons-group {
    display: grid; /* Usar grid para centrar el botón */
    place-items: center;
    width: 100%;
    height: 20%; /* 20% de la altura del padre */
}

.download-buttons-group .btn {
    width: 80%; /* Ajustar el ancho del botón dentro de su grupo */
    height: 80%; /* Ajustar la altura del botón dentro de su grupo */
}

.download-btn {
    background-color: #28a745; /* Green for download */
}

.download-btn:hover {
    background-color: #218838;
}

.secondary-btn {
    background-color: #6c757d; /* Grey color for secondary action */
    width: 80%;
    display: grid;
    place-items: center;
    height: 80%;
}

.secondary-btn:hover {
    background-color: #5a6268;
}

.qr-options-section > *:not(h1):not(p) {
    width: 80%;
}

.qr-options-section::-webkit-scrollbar {
    width: 8px;
}

.qr-options-section::-webkit-scrollbar-track {
    background: var(--azul-fondo);
    border-radius: 10px;
}

.qr-options-section::-webkit-scrollbar-thumb {
    background: var(--dorado);
    border-radius: 10px;
}

.qr-options-section::-webkit-scrollbar-thumb:hover {
    background: #c49a2a;
}

@media (min-aspect-ratio: 1/1) { /* Para pantallas anchas (landscape) */
    .container {
        flex-direction: row;
    }

    .qr-options-section,
    .qr-preview-section {
        width: 40%;
        height: 90%;
    }
}