/* Estilos aplicados al cuerpo de la página. */
        body {
            background-color: #f2f4f6; /* Fondo general de la página en un gris muy claro. */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Define una tipografía moderna y segura. */
        }
        /* Estilos para el contenedor principal. */
        .main-card {
            background-color: #ffffff; /* El fondo del contenedor principal es blanco. */
            border-radius: 20px; /* Esquinas redondeadas. */
            box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Una sombra sutil para un efecto de elevación. */
            padding: 3rem; /* Espacio interno grande. */
        }
        /* Estilos para el encabezado de la tarjeta principal. */
        .card-header-custom {
            background-color: transparent; /* Fondo transparente. */
            border-bottom: 2px solid #e9ecef; /* Línea divisoria gris claro en la parte inferior. */
            padding-bottom: 1rem; /* Espacio debajo del contenido del encabezado. */
            margin-bottom: 2rem; /* Espacio entre el encabezado y el contenido del formulario. */
        }
        /* Estilos para las tarjetas de sección (Información de Contacto, Dirección, etc.). */
        .card.section-card {
            background-color: #e9ecef; /* Fondo gris claro. */
            border: 1px solid #dee2e6; /* Borde gris. */
            border-radius: 10px; /* Esquinas redondeadas. */
            margin-bottom: 1.5rem; /* Espacio entre las secciones. */
            box-shadow: none; /* Sin sombra. */
        }
        /* Estilos para los campos de formulario (inputs, selects). */
        .form-control {
            border-radius: 10px; /* Esquinas redondeadas. */
            border-color: #ced4da; /* Borde de color gris. */
            padding: 0.75rem 1rem; /* Relleno interno para un mejor aspecto. */
        }
        /* Estilos del campo de formulario cuando está en foco (seleccionado). */
        .form-control:focus {
            border-color: #007bff; /* Cambia el color del borde a azul. */
            box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Agrega una sombra azul. */
        }
        /* Estilos para el texto que acompaña a los iconos en los inputs. */
        .input-group-text {
            background-color: #f8f9fa; /* Fondo gris muy claro. */
            border-right: none; /* Elimina el borde derecho para que se una visualmente con el input. */
            border-radius: 10px 0 0 10px; /* Solo redondea las esquinas izquierdas. */
            border-color: #ced4da; /* Color del borde. */
        }
        /* Estilos para el input dentro de un grupo con icono. */
        .input-with-icon .form-control {
            border-left: none; /* Elimina el borde izquierdo. */
            border-radius: 0 10px 10px 0; /* Solo redondea las esquinas derechas. */
        }
        /* Estilos para los botones de colapso (+/-). */
        .toggle-btn {
            width: 30px; /* Ancho fijo. */
            height: 30px; /* Altura fija. */
            border-radius: 50%; /* Lo hace circular. */
            background-color: #007bff; /* Fondo azul. */
            color: white; /* Icono blanco. */
            border: none; /* Sin borde. */
            display: flex; /* Utiliza flexbox para centrar el icono. */
            align-items: center;
            justify-content: center;
            font-size: 1.5rem; /* Tamaño del icono. */
            line-height: 1;
            transition: transform 0.2s ease; /* Transición suave para el efecto de escala. */
        }
        /* Efecto al pasar el cursor sobre el botón de colapso. */
        .toggle-btn:hover {
            transform: scale(1.1); /* Agranda el botón ligeramente. */
        }
        /* Estilos para el botón principal "Guardar Cambios". */
        .btn-primary-custom {
            background-color: #007bff; /* Fondo azul. */
            border-color: #007bff; /* Borde azul. */
            padding: 1rem 2rem; /* Relleno grande. */
            border-radius: 50px; /* Forma de píldora. */
            font-weight: 600; /* Texto en negrita. */
            transition: all 0.3s; /* Transición suave para el hover. */
        }
        /* Efecto al pasar el cursor sobre el botón "Guardar Cambios". */
        .btn-primary-custom:hover {
            background-color: #0056b3; /* Fondo azul más oscuro. */
            border-color: #0056b3; /* Borde azul más oscuro. */
            transform: translateY(-2px); /* Mueve el botón ligeramente hacia arriba. */
        }
        /* Estilos para el botón "Cancelar". */
        .btn-secondary-custom {
            background-color: #e9ecef; /* Fondo gris claro. */
            border-color: #ced4da; /* Borde gris. */
            color: #495057; /* Texto gris oscuro. */
            padding: 1rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
        }
        /* Efecto al pasar el cursor sobre el botón "Cancelar". */
        .btn-secondary-custom:hover {
            background-color: #d2d6dc; /* Fondo gris más oscuro. */
            border-color: #c0c4c9; /* Borde gris más oscuro. */
            transform: translateY(-2px);
        }
        /* Ajuste de ancho para el plugin de teléfono. */
        .iti {
            width: 100%; /* Asegura que ocupe todo el ancho de su contenedor. */
        }
        /* Estilos para el icono de ayuda. */
        .help-icon {
            font-size: 1rem;
            color: #007bff;
            cursor: pointer; /* Muestra un cursor de mano. */
            margin-left: 5px;
        }