/* styles.css */

body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

.div-container {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 600px; /* Aumento el ancho para acomodar mejor los enlaces */
    text-align: center;
}

h1 {
    margin-bottom: 1.5rem;
    color: #333;
}

p {
    margin-bottom: 1rem;
    color: #666;
}

h2 {
    margin-top: 2rem; /* Aumentamos el espacio antes de los encabezados de los pasos */
    margin-bottom: 1rem; /* Agregamos espacio después de los encabezados */
    color: #333;
}

h3 {
    margin-top: 4rem; /* Aumentamos el espacio antes de los encabezados de los pasos */
    margin-bottom: 1rem; /* Agregamos espacio después de los encabezados */
    color: #333;
}

ol {
    margin-bottom: 1.5rem; /* Agregamos espacio después de las listas ordenadas */
}

.tools-container { /* Nueva clase para el contenedor de las herramientas */
    display: flex; /* Usamos Flexbox */
    justify-content: center; /* Centramos horizontalmente */
    align-items: center; /* Centramos verticalmente (opcional) */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea si no caben */
    gap: 10px; /* Espacio entre los rectángulos */
}

.tool-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 1rem;
    text-decoration: none;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-right: 0; /* Eliminamos el margen derecho */
    width: 200px;
    box-sizing: border-box;
    margin-bottom: 10px;
    text-align: center;
}

.tool-link:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.tool-link img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    vertical-align: top;
}
.g_id_signin {
    margin-top: 1rem;
}

.download-options {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.download-link {
    display: flex;
    align-items: center;
    margin: 0 10px;
    padding: 10px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.download-link:hover {
    border-color: #007bff;
}

.download-link img {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    vertical-align: middle;
}

.ol {
    text-align: left
}

.button-container {
    display: flex;
    justify-content: center; /* Centrar los botones */
    margin-top: 2rem; /* Espacio superior */
    margin-bottom: 1rem; /* Espacio inferior */
}

.small-button {
    display: inline-block;
    padding: 8px 12px; /* Ajustar el padding para un botón pequeño */
    margin: 0 5px; /* Espacio entre los botones */
    text-decoration: none;
    background-color: #6c757d; /* Color grisáceo para un estilo neutro */
    color: white;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9rem; /* Tamaño de fuente más pequeño */
}

.small-button:hover {
    background-color: #5a6268; /* Ligeramente más oscuro al pasar el ratón */
}

.os-option {
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.os-option:hover {
    border-color: #007bff;
}

.os-option.selected {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.os-option img {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    vertical-align: middle;
}

#steps-container {
    margin-top: 2rem;
}

.step {
    margin-bottom: 1.5rem;
}

.step img {
    max-width: 100%;
    height: auto;
}

.code-block {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px; /* Reducido el padding */
    overflow-x: auto;
    font-family: monospace, monospace;
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-break: break-all;
    display: inline-block; /* Ajustar al contenido */
    max-width: 90%; /* Ancho máximo (opcional) */
}

#logo-container {
    position: fixed;
    top: 15px;
    left: 59px;
    z-index: 1000; /* Ensure it's on top of other content */
}

#logo-container img {
    width: 200px; /* Adjust size as needed */
    height: auto;
}