/* ==================================================
           SECCIÓN: ESTILOS GENERALES
           FUNCIÓN: Establece reglas base para todos los elementos y el cuerpo de la página
        ================================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* Incluye bordes y relleno dentro del tamaño total del elemento */
            font-family: 'Arial', sans-serif; /* Fuente principal de todo el sitio */
        }

        body {
            background-color: #f0f0f0; /* Color de fondo gris claro */
            padding: 20px; /* Espacio alrededor de todo el contenido */
            margin: 0;
        }


        /*ESPACIOS BLANCOS COMO H6*/

        .espacio h6{
            color: white;
        }

        /* ==================================================
           SECCIÓN: ENCABEZADO
           FUNCIÓN: Barra superior con el nombre de la zona y elementos decorativos
        ================================================== */
        .header {
            background-color: #e5004f; /* Color rojo característico de la marca */
            color: white; /* Color del texto */
            width: 100%; /* Ocupa todo el ancho disponible */
            padding-left: 10px; /* Espacio interno izquierdo */
            padding-right: 2px; /* Espacio interno derecho */
            margin: 0;
            display: flex; /* Distribuye elementos en línea */
            justify-content: space-between; /* Separa el texto y las líneas a los extremos */
            align-items: center; /* Centra verticalmente los elementos */
            position: sticky; /* Se mantiene visible al desplazarse hacia abajo */
            top: 0; /* Se fija en la parte superior */
            z-index: 1000; /* Se coloca por encima de otros elementos */
        }


        .header h1 {
            font-size: 22px;
            font-weight: bold;
        }

        .lineas {
            width: 13%; /* Ancho del contenedor de líneas decorativas */
            display: flex;
            padding: 0;
            gap: 9px; /* Espacio entre cada línea */
        }

        .linea {
            width: 9px; /* Ancho de cada línea */
            height: 65px; /* Altura de cada línea */
            background-color: #ffffff; /* Color blanco para las líneas */
        }

        /* ==================================================
           SECCIÓN: CONTENEDOR PRINCIPAL
           FUNCIÓN: Caja blanca que contiene el formulario y todo el contenido central
        ================================================== */
        .contenedor {
            background-color: white; /* Fondo blanco */
            margin-top: 25px; /* Espacio superior respecto al encabezado */
            border-radius: 15px; /* Bordes redondeados */
            padding: 35px; /* Espacio interno alrededor del contenido */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave para dar profundidad */
            max-width: 600px; /* Ancho máximo para pantallas grandes */
            margin-left: auto; /* Centra horizontalmente */
            margin-right: auto; /* Centra horizontalmente */
        }

        /* ==================================================
           SECCIÓN: TÍTULO DE SECCIÓN
           FUNCIÓN: Encabezado del formulario con imagen y descripción
        ================================================== */
        .titulo-seccion {
            text-align: center; /* Alineación centrada */
            margin-bottom: 30px; /* Espacio inferior */
        }

        .titulo-seccion h2 {
            color: #e5004f; /* Color rojo característico */
            font-size: 36px;
            display: flex;
            align-items: center; /* Centra verticalmente texto e imagen */
            justify-content: center; /* Centra todo el contenido */
            gap: 15px; /* Espacio entre el texto y la imagen */
            margin-bottom: 10px; /* Espacio inferior */
        }

        .titulo-seccion img {
            height: 50px; /* Tamaño de la imagen del logotipo */
        }

        .titulo-seccion p {
            font-size: 20px;
            color: #333; /* Texto gris oscuro */
        }

        /* ==================================================
           SECCIÓN: FORMULARIO
           FUNCIÓN: Estilos para los campos de entrada de datos del usuario
        ================================================== */
        .formulario-grupo {
            margin-bottom: 20px; /* Espacio entre cada campo */
        }

        .formulario-grupo input {
            width: 100%; /* Ocupa todo el ancho disponible */
            padding: 15px; /* Espacio interno */
            border: 2px solid #86b3a7; /* Borde de color verde azulado */
            border-radius: 8px; /* Bordes redondeados */
            font-size: 16px;
        }

        .formulario-grupo input:focus {
            outline: none; /* Quita el borde predeterminado del navegador al hacer clic */
            border-color: #e5004f; /* Cambia el color del borde al color principal */
        }

        /* ==================================================
           SECCIÓN: BOTONES
           FUNCIÓN: Estilos para los botones de acción principales
        ================================================== */
        .botones {
            display: flex;
            gap: 15px; /* Espacio entre los dos botones */
            margin-bottom: 20px; /* Espacio inferior */
        }

        .btn {
            padding: 15px 25px; /* Espacio interno vertical y horizontal */
            border: none; /* Sin borde */
            border-radius: 8px; /* Bordes redondeados */
            font-size: 16px;
            font-weight: bold;
            cursor: pointer; /* Cambia el cursor al pasar por encima */
            transition: background-color 0.3s; /* Cambio suave de color al pasar el ratón */
        }

        .btn-gps {
            background-color: #e5004f; /* Color rojo característico */
            color: white; /* Texto blanco */
            flex: 1; /* Ocupa el mismo ancho que el otro botón */
        }

        .btn-gps:hover {
            background-color: #f74a61; /* Color más claro al pasar el ratón */
        }

        .btn-entrar {
            background-color: #24f811; /* Color rojo característico */
            color: rgb(0, 0, 0); /* Texto blanco */
        }

        .btn-entrar:disabled {
            background-color: #ccc; /* Color gris cuando no está disponible */
            cursor: not-allowed; /* Cursor de prohibido para indicar que no se puede usar */
        }

        /* ==================================================
           SECCIÓN: TEXTO INFORMATIVO
           FUNCIÓN: Estilos para el texto de ayuda debajo de los botones
        ================================================== */
        .instruccion {
            text-align: center;
            color: #666; /* Texto gris medio */
            font-size: 14px;
            margin-bottom: 30px; /* Espacio inferior */
        }

        /* ==================================================
           SECCIÓN: ENLACES
           FUNCIÓN: Estilos para los enlaces de términos y continuación
        ================================================== */
        .terminos {
            text-align: center;
        }

        .terminos a {
            color: #1565c0; /* Color azul para enlaces */
            font-size: 16px;
            text-decoration: underline; /* Subrayado para indicar que es un enlace */
        }

        .terminos a:hover {
            color: #0d47a1; /* Azul más oscuro al pasar el ratón */
        }