@extends('layouts.app')

@section('content')
    <style>
        /* Estilos generales para el contenedor principal */
        main#idContenedor2 {
            display: flex;
            justify-content: center; /* Centra horizontalmente */
            align-items: center;     /* Centra verticalmente */
            height: calc(100vh - 150px); /* Altura total menos el margen superior */
            width:100%;
        }

        /* Estilo específico para el contenedor modal en desktop */
        .modal-container2 {
            width: 100%;
        }

        .modal-content2 {
            background-color: #fff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
       #secContactanos2{
           width: 70%;
           margin-top:350px;
       }
        /* Estilo específico para el contenedor modal en móvil */
        @media (max-width: 768px) {
            .modal-container2 {
                width: 100%;
            }
            #secContactanos2{
                width: 80%;
                margin-top:500px;
            }
            .modal-content2 {
                border-radius: 0;
            }
        }
        .btn-container {
            margin-top: 20px; /* espacio entre el mensaje y el botón */
        }

        .btn-primary-custom {
            display: block;
            width: 100%;
            padding: 10px 15px;
            background-color: #007BFF;
            border: none;
            border-radius: 5px;
            color: #fff;
            text-align: center;
            text-decoration: none;
            transition: background-color 0.2s;

            /* Añade estilos de fuente si es necesario */
            font-weight: 500;
            font-size: 1rem;
            line-height: 1.5;
        }

        .btn-primary-custom:hover,
        .btn-primary-custom:focus {
            background-color: #0056b3; /* color ligeramente más oscuro al pasar el mouse */
            color: #fff; /* mantiene el texto blanco al pasar el mouse */
            text-decoration: none; /* quita cualquier subrayado al pasar el mouse */
        }

        .btn-primary-custom:active {
            background-color: #004085; /* color aún más oscuro cuando se hace clic */
            color: #fff;
        }

    </style>
    <main id="idContenedor2">
        <section id="secContactanos2" class="paddingtop2">
            <div class="container2 modal-container2">
                <div class="modal-content2">
                    <center><b>IMPORTANTE - INSPECCIONES</b></center>
                    <br>
                    <br>

Recorda que para realizar la inspección debes ingresar al PAS Portal <b>desde tu celular</b> y luego al módulo "Inspección de Motos”. <br>
<br> GRACIAS!
                    <br><br>
                    <a href="/portales" class="btn-primary-custom col col-md-4 mx-auto">Continuar al Portal</a>
                </div>
            </div>
            <br><br>
            <br><br>
        </section>
    </main>
@endsection