/* ======================================= */
/* 1. Reset Básico y Tipografía Global */
/* ======================================= */
body {
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #f4f4f7;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
}

section {
    padding: 60px 0;
}

/* ======================================= */
/* 2. ESTADO DE OCUPACIÓN (HERO) */
/* ======================================= */
.hero-status-section {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); /* Azul oscuro moderno */
    color: white;
    text-align: center;
    padding: 80px 15px 120px;
}

/* --- ESTILOS PARA EL TÍTULO DE COLORES EN EL HERO SECTION --- */

/* Aseguramos que el main-title no pierda el estilo base */
.main-title {
    font-size: 2.8em;
    font-weight: 700;
    margin-bottom: 5px;
    /* Necesario si se le dio color blanco al h1 en el CSS anterior */
    color: white; 
}

.main-title .color-1 {
    color: #FFC107; /* Amarillo/Ámbar: Destacado */
}

.main-title .color-2 {
    color: #FFFFFF; /* Blanco: Neutro */
}

.subtitle {
    font-size: 1.5em;
    font-weight: 300;
    margin-bottom: 40px;
}

/* Contenedor del semáforo (Para centrar) */
.status-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

/* Estilos de botones de acción */
.btn-primary-action, .btn-secondary-action, .btn-card {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
    margin: 10px 10px;
}

.btn-primary-action {
    background-color: #f5a623; /* Naranja/Ámbar */
    color: #1e3c72; /* Color principal inverso */
}

.btn-secondary-action {
    background-color: transparent;
    border: 2px solid white;
    color: white;
}

.btn-primary-action:hover, .btn-secondary-action:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}


/* --- INTEGRACIÓN DE CLASES DE SEMÁFORO (Tomadas de la versión anterior) --- */

.parking-status-box {
    text-align: center;
    /* Reducir el padding y el box-shadow para que encaje mejor en el Hero */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    max-width: 320px;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo translúcido */
}

.porcentaje-ocupacion {
    /* Mantenemos los estilos base de color del semáforo */
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px; 
    color: white;
    font-weight: bold;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
}

.porcentaje-ocupacion .numero {
    font-size: 3em;
}

.porcentaje-ocupacion .texto {
    font-size: 0.9em;
}

.disponibilidad-texto {
    font-size: 1.2em;
    font-weight: 500;
    color: white; /* Color blanco para el Hero Section */
}

/* Colores dinámicos del semáforo */
.status-verde { background-color: #4CAF50; }
.status-ambar { background-color: #FFC107; color: #333; }
.status-rojo { background-color: #F44336; }


/* ======================================= */
/* 3. TARIFAS Y ABONOS (Grid) */
/* ======================================= */
.tarifas-section {
    text-align: center;
    background-color: white;
}

.section-description {
    font-size: 1.1em;
    margin-bottom: 40px;
    color: #666;
}

.tarifas-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.tarifa-card {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    background-color: #fff;
    border-top: 5px solid #ccc;
    transition: all 0.3s;
}

.tarifa-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.tarifa-card.featured {
    border-top-color: #f5a623;
    background-color: #fff8e1;
}

.tarifa-card h3 {
    font-size: 1.4em;
    margin-bottom: 15px;
    color: #1e3c72;
}

.tarifa-card .price {
    display: block;
    font-size: 2em;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 20px;
}

.tarifa-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 25px;
}

.tarifa-card ul li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    color: #555;
}

.tarifa-card .btn-card {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
}

/* ======================================= */
/* 4. UBICACIÓN Y CONTACTO (Grid) */
/* ======================================= */
.contact-section {
    background-color: #f4f4f7;
}

.location-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr; /* 50% / 50% en desktop */
    align-items: flex-start;
}

.map-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-form-container {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.simple-form input, .simple-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* ======================================= */
/* 5. FOOTER */
/* ======================================= */
.main-footer {
    background-color: #222;
    color: #ccc;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
}

.main-footer a {
    color: #f5a623;
    text-decoration: none;
}

/* ======================================= */
/* 6. RESPONSIVE DESIGN (Mobile First) */
/* ======================================= */

/* Teléfonos y dispositivos pequeños */
@media (max-width: 768px) {
    .main-title {
        font-size: 2.2em;
    }
    
    .subtitle {
        font-size: 1.2em;
    }
    
    .hero-status-section {
        padding: 50px 15px 80px;
    }

    .location-grid {
        /* Pasa a una sola columna en móvil */
        grid-template-columns: 1fr;
    }
    
    .contact-form-container {
        order: 1; /* Coloca el formulario primero en móvil */
    }
    
    .map-container {
        order: 2; /* Coloca el mapa debajo del formulario */
    }
}
/* --- ESTILOS ADICIONALES PARA EL CAMPO MATRÍCULA --- */

/* Estilo para la etiqueta superior */
.simple-form label {
    display: block;
    font-size: 0.85em;
    font-weight: bold;
    color: #1e3c72;
    margin-bottom: 5px;
}

/* Estilo específico del campo de matrícula */
.simple-form .matricula-input {
    /* Fuerza las mayúsculas al escribir, imitando el formato de matrícula */
    text-transform: uppercase; 
    /* Aumenta el tamaño del texto dentro del campo */
    font-size: 1.4em; 
    /* Alinea el texto al centro para un look más limpio */
    text-align: center;
    /* Añade espacio vertical para que sea más prominente */
    padding: 15px 10px; 
    letter-spacing: 2px;
}

/* --- ESTILOS PARA EL FAQ --- */

.faq-content {
    max-width: 900px;
    margin: 0 auto;
}

.faq-group-title {
    font-size: 1.8em;
    color: #f5a623; /* Usando el color naranja/ambar de tu marca */
    border-bottom: 2px solid #f5a623;
    padding-bottom: 5px;
    margin-top: 40px;
    margin-bottom: 20px;
}

.faq-item {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.faq-item h4 {
    color: #1e3c72; /* Color principal de tu marca */
    font-size: 1.2em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
}

.faq-item p {
    color: #555;
    margin-bottom: 0;
}

/* ======================================= */
/* ESTILOS ESPECÍFICOS DE LA PÁGINA DE PAGO */
/* ======================================= */

/* --- Contenedores de Datos y Tarjetas --- */
.payment-info-card {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 20px;
}

.card-title {
    font-size: 1.6em;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1e3c72;
}

.message-card {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 20px;
}

.message-title {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 10px;
    color: white; /* El color de fondo de la tarjeta lo determinará */
}

.message-text {
    font-size: 1.1em;
    color: white;
}

/* --- Estilos por Estado (Semáforo de Pagos) --- */
.status-pending { /* Pendiente de pago normal */
    background-color: #e8f5e9; /* Verde claro */
    border: 2px solid #4CAF50;
}
.status-paid { /* Ya pagado (dentro de tiempo) */
    background-color: #e3f2fd; /* Azul claro */
    border: 2px solid #007bff;
}
.status-recargo { /* Recargo/Pago posterior */
    background-color: #fff8e1; /* Amarillo claro */
    border: 2px solid #FFC107;
}
.status-post { /* Pago posterior */
    background-color: #e0f7fa; /* Azul claro oscuro */
    border: 2px solid #00acc1;
}

.status-error { /* Errores */
    background-color: #ffebee; /* Rojo suave */
    border: 2px solid #F44336;
    color: #F44336;
}
.status-error .message-title, .status-error .message-text {
    color: #F44336;
}

/* --- ID de Vehículo --- */
.car-id-box {
    background-color: #1e3c72;
    color: white;
    padding: 15px 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.matricula-display {
    font-size: 2em;
    font-weight: bold;
    margin-left: 10px;
}

/* --- Grid de Datos (Entrada/Duración) --- */
.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: left;
    margin-bottom: 20px;
}

.data-item {
    padding: 10px 0;
}

.data-item .label {
    display: block;
    font-size: 0.9em;
    color: #555;
    font-weight: 600;
}

.data-item .value {
    display: block;
    font-size: 1.2em;
    color: #333;
    font-weight: 500;
}

.data-item .duration {
    font-weight: bold;
    color: #4CAF50; /* Color verde para destacar la duración */
}

/* --- Importe Total --- */
.total-amount-box {
    padding: 15px;
    background-color: #f7f7f7;
    border-radius: 5px;
    margin-bottom: 20px;
}

.total-amount-box .label {
    display: block;
    font-size: 1em;
    color: #555;
}

.amount-value {
    font-size: 3em;
    font-weight: 900;
    color: #F44336; /* Color rojo para el precio final */
    margin: 5px 0 0 0;
}

/* --- Botones --- */
.payment-button-container button,
.ticket-download-buttons input[type="submit"] {
    display: block;
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.payment-button-container img {
    height: 30px;
    vertical-align: middle;
    margin-left: 10px;
}

/* Estilo para el botón de ticket */
.ticket-download-buttons input[type="submit"] {
    background-color: #007bff;
    color: white;
}
.ticket-download-buttons input[type="submit"]:hover {
    background-color: #0056b3;
}
/* ESTILOS PARA EL BOTÓN DE PAGO FINAL DE REDSYS */
.payment-button-container .payment-redsys-btn {
    /* El btn-primary-action ya debe darle un estilo base (ej. fondo naranja) */
    background-color: #f5a623; /* Naranja/Ámbar para destacar el paso final */
    color: #1e3c72; 
    font-size: 1.3em; 
    padding: 18px 25px; 
    font-weight: 900;
    margin-top: 10px;
}

.payment-button-container .payment-redsys-btn:hover {
    background-color: #e0951c; /* Tono más oscuro al pasar el ratón */
}


/* --- ESTILOS DE LA SECCIÓN DE ACCESO Y REGISTRO --- */

.registro-section {
    background-color: #f4f4f7;
    text-align: center;
}

.acceso-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    text-align: left;
    margin-top: 40px;
}

.acceso-card {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    background-color: white;
    border-top: 5px solid #1e3c72;
}

.acceso-card.featured {
    border-top-color: #f5a623;
    background-color: #fff8e1;
}

.acceso-card h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #1e3c72;
}

/* Estilos básicos para todos los inputs/selects en los formularios simples */
.simple-form input[type="text"],
.simple-form input[type="email"],
.simple-form input[type="password"],
.simple-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.simple-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.forgot-password {
    display: block;
    margin-top: -5px;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #007bff;
    text-decoration: none;
}

.nota-registro {
    font-size: 0.9em;
    margin-top: 15px;
    color: #555;
    text-align: center;
}

/* El botón de Solicitud de Registro usa un color verde de éxito */
.acceso-card.featured .btn-primary-action {
    background-color: #4CAF50 !important; 
    color: white !important;
}
/* --- ESTILOS PARA CHECKBOXES DE CONSENTIMIENTO --- */

.checkbox-group {
    display: flex; /* Alinea el checkbox y la etiqueta */
    align-items: flex-start; /* Alineación vertical */
    margin-bottom: 15px;
    font-size: 0.9em;
}

.checkbox-group input[type="checkbox"] {
    /* Asegura que el checkbox no se estire y lo separa de la etiqueta */
    width: auto; 
    margin: 5px 10px 0 0;
    flex-shrink: 0; /* Evita que el checkbox se haga pequeño */
}

/* Estilo para la etiqueta dentro del grupo de checkbox (anula el 'font-weight: bold' general) */
.checkbox-group label {
    font-weight: normal;
    margin: 0;
    color: #555;
    cursor: pointer;
}
/* --- ESTILOS DEL BOTÓN EN LÍNEA --- */
.btn-link-action {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9em;
    color: #007bff; /* Color azul para destacar el enlace */
    text-decoration: underline;
    cursor: pointer;
    display: block;
    margin: 10px auto 0;
    width: 100%;
    text-align: center;
}

/* --- ESTILOS DEL MODAL --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; /* Alto índice para estar por encima de todo */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.5); /* Fondo semitransparente oscuro */
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Centrado vertical y horizontal */
    padding: 25px;
    border: 1px solid #888;
    width: 90%; 
    max-width: 400px; /* Tamaño máximo */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: left;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-content h3 {
    color: #1e3c72;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
}

@media (max-width: 600px) {
    .modal-content {
        margin: 20% auto;
    }
}

/* --- ESTILO PARA NOTAS INFORMATIVAS PEQUEÑAS EN TARIFAS --- */
.small-notice {
    font-size: 0.85em;
    color: #F44336; /* Color rojo o naranja para asegurar que se lea la condición */
    background-color: #fce4e4; /* Fondo muy suave para la nota */
    padding: 5px 10px;
    border-radius: 4px;
    margin-top: 5px;
    margin-bottom: 15px; /* Espacio antes de la lista <ul> */
    line-height: 1.3;
    font-weight: 500;
}

/* --- ESTILO PARA ENFATIZAR EL LÍMITE DIARIO --- */
.limit-emphasis {
    font-size: 1em;
    font-weight: bold;
    color: #1e3c72; /* Azul fuerte de tu marca */
    background-color: #d8e5ff; /* Fondo muy claro para la garantía */
    padding: 10px;
    border-radius: 4px;
    margin-top: -5px; /* Acercar al precio */
    margin-bottom: 15px;
    line-height: 1.3;
}