/* Archivo: style.css
   Estilos para el Generador de Códigos QR (qrs.ebits.cl)
   Incluye estilos para el header y el contenido principal.
   Última actualización basada en la conversación.
   Fecha: 2025-05-02 (Santiago, Chile)
*/

/* === Estilos Base === */
body {
    font-family: 'Roboto', sans-serif; /* Fuente principal */
    margin: 0;                         /* Sin margen exterior */
    padding: 0;                        /* Sin relleno interior */
    background-color: #f4f4f4;         /* Color de fondo general */
    color: #333;                      /* Color de texto principal */
    line-height: 1.6;                  /* Altura de línea para legibilidad */
}

/* === Estilos para el Header === */
.site-header {
    background-color: #f8f9fa; /* Color de fondo del header (gris claro) */
    padding: 10px 0;          /* Espaciado vertical */
    border-bottom: 1px solid #e9ecef; /* Línea sutil debajo */
    width: 100%;              /* Ocupa todo el ancho */
    margin-bottom: 30px;      /* Espacio debajo del header antes del contenido */
    box-sizing: border-box;   /* Incluye padding y border en el width/height */
}

.header-container {
    max-width: 1200px;        /* Ancho máximo del contenido del header */
    margin: 0 auto;           /* Centra el contenedor del header */
    padding: 0 20px;          /* Espaciado horizontal interno */
    display: flex;            /* Activa Flexbox */
    justify-content: space-between; /* Logo a la izquierda, nav a la derecha */
    align-items: center;      /* Centra verticalmente logo y nav */
}

.logo img {
    display: block;           /* Evita espacio extra bajo la imagen */
    height: 40px;             /* Altura fija del logo (ajustar si es necesario) */
    width: auto;              /* Ancho automático para mantener proporción */
}

.main-nav ul {
    list-style: none;         /* Quita los puntos de la lista */
    margin: 0;
    padding: 0;
    display: flex;            /* Menú horizontal */
    gap: 25px;                /* Espacio entre elementos del menú */
}

.main-nav a {
    text-decoration: none;    /* Sin subrayado */
    color: #333;              /* Color del enlace */
    font-weight: 500;
    padding: 5px 0;
    transition: color 0.3s ease; /* Transición suave al pasar el ratón */
}

.main-nav a:hover,
.main-nav a:focus {
    color: #007bff;           /* Color al pasar el ratón (azul) */
}

/* === Estilos para el Contenedor Principal del QR === */
.container {
    background-color: #fff;         /* Fondo blanco para el contenedor */
    padding: 30px;                  /* Relleno interno */
    border-radius: 8px;             /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center;             /* Centra el texto interno */
    max-width: 450px;               /* Ancho máximo del contenedor QR */
    width: 90%;                     /* Ancho relativo para pantallas pequeñas */
    margin: 0 auto;                 /* Centra horizontalmente */
    box-sizing: border-box;         /* Incluye padding y border en el width/height */
}


h1 {
    color: #333;
    margin-top: 0; /* Quita margen superior si está dentro del container */
    margin-bottom: 25px;
    font-weight: 500; /* Un poco más ligero que bold */
}

label {
    display: block;          /* Etiqueta en su propia línea */
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
    text-align: left;       /* Alinea la etiqueta a la izquierda */
}

input[type="text"] {
    width: calc(100% - 22px); /* Ancho completo menos padding y borde */
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}

button {
    background-color: #007bff; /* Botón primario azul */
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Espacio sobre el botón */
    display: inline-block; /* Para que el margen funcione bien */
}

button:hover {
    background-color: #0056b3; /* Azul más oscuro al pasar el ratón */
}

#qrcode-container {
    margin-top: 30px;          /* Espacio sobre el área del QR */
    padding: 20px;
    border: 1px dashed #ddd;   /* Borde punteado */
    border-radius: 4px;
    min-height: 150px;         /* Altura mínima para ver el texto inicial */
    display: flex;             /* Centra el contenido (párrafo y QR) */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#qrcode-container p {
    color: #888;              /* Color del texto placeholder */
    margin: 0;
    font-size: 0.9em;
}

#qrcode {
    margin-top: 15px;          /* Espacio entre texto y QR generado */
    line-height: 0;            /* Evita espacio extra si se genera img */
    /* Si qrcode.js genera un canvas, puede necesitar display: block */
}

#qrcode img,
#qrcode canvas {
    display: block;            /* Asegura comportamiento de bloque */
    margin: 0 auto;            /* Centra el QR si tiene ancho fijo */
    max-width: 100%;         /* Asegura que no se desborde del contenedor */
    height: auto;             /* Mantiene proporción */
}

#downloadBtn {
    background-color: #28a745; /* Botón de descarga verde */
    margin-top: 20px;
    display: none;             /* Oculto inicialmente */
}

#downloadBtn:hover {
    background-color: #218838; /* Verde más oscuro al pasar el ratón */
}

/* === Estilos Descripción === */
.description-container {
    background-color: #fff;         /* Fondo blanco similar al container */
    padding: 30px;                  /* Relleno interno */
    border-radius: 8px;             /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    max-width: 800px;               /* Puede ser más ancho que el generador QR */
    width: 90%;                     /* Ancho relativo */
    margin: 30px auto;              /* Centra horizontalmente y añade espacio arriba/abajo */
    box-sizing: border-box;
    text-align: left;               /* Texto alineado a la izquierda para mejor lectura */
}

.description-container h2 {
    text-align: center;             /* Centra el título principal de esta sección */
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-weight: 500;
}

.description-container h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    color: #444;
    font-weight: 500;
    border-bottom: 1px solid #eee; /* Línea sutil bajo el subtítulo */
    padding-bottom: 5px;
}

.description-container p {
    margin-bottom: 15px;           /* Espacio entre párrafos */
    color: #555;                   /* Color de texto ligeramente más suave */
}

.description-container strong {
    color: #333;                   /* Resalta texto en negrita */
}

.features-list {
    list-style: none;             /* Quita los puntos por defecto */
    padding-left: 0;              /* Quita el relleno izquierdo por defecto */
    margin-top: 0;
    margin-bottom: 20px;
}

.features-list li {
    margin-bottom: 10px;          /* Espacio entre características */
    color: #555;
    line-height: 1.5;             /* Mejora legibilidad de la lista */
}

.description-container small {
    display: block;               /* Notas en líneas separadas */
    margin-top: 10px;
    color: #777;
    font-style: italic;
}


/* === Estilos para el Footer === */

.site-footer {
    background-color: #343a40; /* Color de fondo oscuro (ej: gris oscuro bootstrap) */
    color: #dee2e6;          /* Color de texto claro principal para el footer */
    padding: 30px 0;          /* Relleno vertical */
    margin-top: 40px;         /* Espacio sobre el footer */
    width: 100%;
    box-sizing: border-box;
}

.footer-container {
    max-width: 800px;         /* Ancho máximo similar a la descripción */
    margin: 0 auto;           /* Centra horizontalmente */
    padding: 0 20px;          /* Relleno horizontal */
    text-align: center;       /* Centra el contenido por defecto */
}

.footer-nav {
    margin-bottom: 20px;      /* Espacio entre la navegación y el copyright */
}

.footer-links {
    list-style: none;         /* Sin puntos */
    padding: 0;
    margin: 0;
    display: flex;            /* Enlaces en línea */
    justify-content: center;  /* Centra los enlaces horizontalmente */
    flex-wrap: wrap;          /* Permite que los enlaces pasen a la siguiente línea en pantallas pequeñas */
    gap: 20px 30px;           /* Espacio vertical y horizontal entre enlaces */
}

.footer-links a {
    color: #f8f9fa;           /* Color de enlace más brillante */
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.footer-links a:hover,
.footer-links a:focus {
    color: #ffffff;           /* Blanco al pasar el ratón */
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

.footer-copyright {
    font-size: 0.85em;        /* Texto de copyright ligeramente más pequeño */
    color: #adb5bd;           /* Color de texto de copyright un poco más apagado */
}