body {
            font-family: Arial, sans-serif;
            background-image: url('bg.png');
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            height: 100vh;
            padding-top: 10px;
        }

        /* Estilo para el menú desplegable */
        .menu-bar {
            background-color: #333;
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            transform: translateX(100%);
            transition: transform 0.5s ease-in-out;
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .menu-bar.show {
            transform: translateX(0);
        }

        .menu-bar a {
            display: block;
            color: white;
            text-align: center;
            border-radius: 5px;
            padding: 14px 20px;
            text-decoration: none;
            margin: 10px 0;
        }

        .menu-bar a:hover {
            background-color: #ddd;
            color: black;
        }

        .menu-bar .close-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 36px;
            color: white;
            cursor: pointer;
        }

        .hamburger-icon {
            display: block;
            cursor: pointer;
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1001;
        }

        .hamburger-icon div {
            width: 30px;
            height: 5px;
            background-color: white;
            margin: 6px 0;
        }

        .menu-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }

        .dropdown {
            display: inline-block;
            position: relative;
            text-align: center;
            
            
        }

        .dropdown .dropbtn {
            font-size: 16px;
            border: none;
            outline: none;
            color: white;
            padding: 14px 20px;
            background-color: inherit;
            font-family: inherit;
            margin: 0;
            
        }

        .dropdown:hover .dropbtn {
            background-color: #ddd;
            color: black;
        }

        .dropdown-content {
            display: none;
            position: relative;
            background-color: #333;
            min-width: 160px;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
            text-align: left;
            
        }

        .dropdown-content a {
            color: white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #ddd;
            color: black;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .valid-message,
        .alert-message {
            font-size: 20px;
            font-weight: bold;
            margin-top: 20px;
            text-align: center;
            padding: 10px;
            border-radius: 10px;
        }

        .valid-message {
            margin-top: 2px;
            color: green;
            border: 2px solid green;
            background-color: #d4edda;
        }

        /* Estilo para los mensajes de alerta */
        .alert-message {
            font-size: 20px;
            font-weight: bold;
            margin: 5px;
            margin-top: 2px;
            margin-right: -1px;
            margin-left: -1px;
            padding: 10px;
            border-radius: 10px;
            color: red;
            border: 2px solid red;
            background-color: #f8d7da;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 0.9;
            word-wrap: break-word;
            width: 341px;
            white-space: normal;
        }

        /* Ajuste para pantallas pequeñas (como móviles) */
        @media (max-width: 600px) {
            .alert-message {
                width: 100%;
                margin-right: auto;
                margin-left: auto;
            }
        }

        .alert-message .small-text {
            font-size: 18px;
            display: block;
            margin-top: 0;
        }

        .comment-text {
            font-size: 18px;
            /* Tamaño de la fuente */
            font-weight: normal;
            display: block;
            position: relative;
            top: 0;
        }


        .device-info {
            background-color: #f0f0f0;
        }

        .menu-item {
            font-size: 16px;
            font-weight: normal;
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            display: block;
        }

        .menu-item:hover {
            background-color: #ddd;
            color: black;
        }

        .phone-select {
            background: none;
            border: none;
            color: white;
            font-size: 16px;
            padding: 14px 20px;
            cursor: pointer;
            text-align: left;
            width: 100%;
        }

        .phone-select:focus {
            outline: none;
        }

        .incidencias-box {
            font-size: 18px;
            font-weight: normal;
            text-align: left;
            margin-top: 10px;
            padding: 10px 20px;
            border-radius: 5px;
            border: 1px solid #ccc;
            background-color: #4E4D4D;
            color: white;
            white-space: pre-line;
            font-family: Arial, sans-serif;
        }

        .incidencias-box h1 {
            font-weight: bold;
            /* Negrita para el título */
        }

        .incidencias-box h3 {
            font-weight: bold;
             
            /* Negrita solo para el título */
            margin-bottom: 10px;
            color: white;
        }

        .incidencias-box p {
            font-weight: normal;
            /* Texto normal debajo del título */
            text-align: left;
            margin-left: 0;
            text-decoration: none;
            color: white;
            /* Texto en gris claro */
        }

        a {
            text-decoration: none;
            border: none;
        }

        /* Estilos para la ventana emergente */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(128, 128, 128, 0.5);
            /* Fondo gris con 50% de opacidad */
            justify-content: center;
            align-items: center;
            z-index: 1002;
        }

        .buttons2 {
            width: 100%;
            height: 45px;
            padding: 10px;
            margin: 14px 0;
            border: none;
            border-radius: 5px;
            background-color: #017BAB;
            color: white;
            cursor: pointer;
            font-size: 16px;
            /* Tamaño de fuente más grande */
            font-weight: bold;
            /* Letra en negrita */
            transition: background 0.9s ease;
        }

        .buttons2:hover {
            background: #01618a;
        }

        .modal-content {
            background: #4E4D4D;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            width: 300px;
            
        }

        .modal-content select {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .modal-content button {
            padding: 15px 20px;
            /* Aumentar el padding */
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            background-color: #017BAB;
            color: white;
            cursor: pointer;
            margin: 10px 0;
            /* Aumentar el margen */
            width: 100%;
            /* Ocupa el ancho del contenedor */
        }

        .modal-content button:last-child {
            margin-right: 0;
            /* Eliminar margen derecho del último botón */
        }


        .modal-content button:hover {
            background-color: #01618a;
        }

         .alias-results {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #4E4D4D;
            text-align: center;
            
        }

        .alias-results h3 {
            margin-bottom: 10px;
        }

        .alias-results p {
    margin: 7px 0;  /* Espacio entre párrafos */
    font-size: 18px;
    border-bottom: none;
    line-height: 1; /* Ajusta la separación entre líneas */
}

        /* Contenedor de sugerencias */
        #autocomplete-container {
            position: absolute;
            background: #4E4D4D;
            border: 1px solid #ccc;
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
            width: 100%;
            z-index: 1000;
            display: none;
            border-radius: 5px;
            font-family: Arial, sans-serif;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            top: 100%;
            left: 0;
            margin-top: 2px;
        }

        /* Asegura que el contenido no sobresalga del contenedor */
        #autocomplete-container::-webkit-scrollbar-track {
            background: #333;
            /* Fondo de la guía */
            border-radius: 5px;
            /* Bordes redondeados */
        }

        /* Barra de desplazamiento */
        #autocomplete-container::-webkit-scrollbar {
            width: 8px;
            /* Ancho de la barra */
        }

        #autocomplete-container::-webkit-scrollbar-thumb {
            background: #017BAB;
            /* Color de la barra */
            border-radius: 4px;
            /* Bordes redondeados */
        }

        #autocomplete-container::-webkit-scrollbar-thumb:hover {
            background: #01618a;
            /* Color de hover en la barra */
        }

        /* Cada sugerencia */
        .autocomplete-item {
            padding: 10px;
            cursor: pointer;
            color: white;
            /* Texto blanco */
            font-size: 16px;
        }

        /* Hover para cada sugerencia */
        .autocomplete-item:hover {
            background-color: #017BAB;
            /* Color de hover consistente */
        }