/* CSS Puro para el diseño */

       
        .main-container {
            max-width: 1900px; /* Ancho máximo del contenido */
            width: 100%;
            display: flex;
            flex-direction: column; /* Por defecto, las columnas se apilan (móvil) */
            gap: 2rem; /* Espacio entre las columnas */
        }

        /* Media Query para pantallas grandes (PC) */
        @media (min-width: 1024px) { /* Similar al breakpoint 'lg' de Tailwind */
            .main-container {
                flex-direction: row; /* En PC, las columnas se ponen una al lado de la otra */
            }
        }

        /* Estilo base para las tarjetas (formulario y detalles) */
        .card {
            background-color: #fff;
            padding: 2rem; /* Padding interno de las tarjetas */
            border-radius: 0.5rem; /* Bordes redondeados */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
            flex: 1; /* Permite que las tarjetas crezcan para llenar el espacio */
        }

        /* Ajustes específicos de ancho para PC */
        @media (min-width: 1024px) {
            .form-section {
                flex: 2; /* El formulario ocupa 2/3 del ancho en PC */
                max-width: 66.666%; /* Equivalente a w-2/3 */
            }
            .info-section {
                flex: 1; /* La info ocupa 1/3 del ancho en PC */
                max-width: 33.333%; /* Equivalente a w-1/3 */
            }
        }
        
        /* Títulos principales de las secciones */
        .section-title {
            font-size: 2.25rem; /* text-3xl */
            font-weight: bold;
            color: #333; /* text-gray-800 */
            margin-bottom: 1.5rem; /* mb-6 */
        }

        /* Contenedor de los campos de formulario */
        .form-fields-grid {
            display: grid;
            grid-template-columns: 1fr; /* Una columna por defecto (móvil) */
            gap: 1rem; /* Espacio entre campos */
            margin-bottom: 1rem; /* Espacio entre el grupo de 3 y el mensaje */
        }

        /* Media Query para 3 columnas en pantallas medianas */
        @media (min-width: 768px) { /* Similar al breakpoint 'md' de Tailwind */
            .form-fields-grid {
                grid-template-columns: repeat(3, 1fr); /* 3 columnas en PC */
            }
        }

        .form-group {
            margin-bottom: 0; /* Ya usamos gap en el grid */
        }

        /* Estilo de los campos de entrada y textarea */
        .form-input,
        .form-textarea {
            width: 100%;
            padding: 0.75rem; /* p-3 */
            border: 1px solid #ccc; /* Borde gris claro */
            border-radius: 0.375rem; /* rounded-md */
            font-size: 1rem;
            box-sizing: border-box; /* Incluye padding en el width */
            outline: none; /* Elimina el contorno azul al hacer foco */
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }

        .form-input:focus,
        .form-textarea:focus {
            border-color: #3b82f6; /* Azul de foco (como focus:border-blue-500) */
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); /* Anillo de foco */
        }

        .form-textarea {
            resize: vertical; /* Permitir solo redimensionar verticalmente */
            min-height: 8rem; /* Altura mínima similar a rows="5" */
        }

        /* Estilo del botón Enviar */
        .submit-button-container {
            text-align: center; /* Centrar en móvil */
            padding-top: 0.5rem; /* pt-2 */
        }

        @media (min-width: 768px) {
            .submit-button-container {
                text-align: left; /* Alinear a la izquierda en PC */
            }
        }

        .submit-button {
            background-color: #22c55e; /* bg-green-500 */
            color: white;
            font-weight: 600; /* font-semibold */
            padding: 0.75rem 2rem; /* py-3 px-8 */
            border: none;
            border-radius: 0.375rem; /* rounded-md */
            cursor: pointer;
            transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); /* shadow-md */
        }

        .submit-button:hover {
            background-color: #16a34a; /* hover:bg-green-600 */
            transform: translateY(-1px); /* Pequeña elevación al pasar el mouse */
        }

        /* Estilos de los títulos dentro de la sección de información */
        .info-card-title {
            font-size: 1.25rem; /* text-xl */
            font-weight: 600; /* font-semibold */
            color: #333; /* text-gray-800 */
            margin-bottom: 0.75rem; /* mb-3 */
        }

        /* Estilo de los párrafos de información con iconos */
        .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem; /* space-y-3 */
            color: #555; /* text-gray-700 */
            font-size: 1rem;
        }

        .info-item:last-child {
            margin-bottom: 0; /* Elimina margen del último elemento */
        }

        .info-icon {
            font-size: 1.125rem; /* text-lg */
            margin-right: 0.75rem; /* mr-3 */
            line-height: 1; /* Ajuste para la alineación vertical */
        }

        .info-icon.green {
            color: #10b981; /* un verde de Tailwind (green-500) */
        }

        .info-icon.gray {
            color: #9ca3af; /* un gris de Tailwind (gray-400) */
        }

        .info-item a {
            color: #10b981; /* Enlace verde */
            text-decoration: none;
        }
        .info-item a:hover {
            text-decoration: underline;
        }