/* Estilos básicos y accesibles para el formulario PQRS */
.ita-pqrsd-form {
    max-width: 800px;              /* Limita el ancho máximo del formulario */
    margin: 1rem auto;             /* Centra el formulario horizontalmente y da margen vertical */
    padding: 1rem;                 /* Espacio interno */
    border: 1px solid #e5e7eb;     /* Borde gris claro */
    border-radius: 16px;           /* Bordes redondeados */
    background: #fff;              /* Fondo blanco */
}

/* Cada campo del formulario */
.ita-pqrsd-form .ita-field {
    margin-bottom: 1rem;           /* Separación inferior entre campos */
}

/* Estilo de las etiquetas */
.ita-pqrsd-form label {
    display: block;                /* Que ocupen toda la fila */
    font-weight: 600;              /* Texto en seminegrita */
    margin-bottom: .25rem;         /* Pequeño espacio debajo */
}

/* Campos de entrada: texto, email, teléfono, selects y textarea */
.ita-pqrsd-form input[type=text],
.ita-pqrsd-form input[type=email],
.ita-pqrsd-form input[type=tel],
.ita-pqrsd-form select,
.ita-pqrsd-form textarea {
    width: 100%;                   /* Que ocupen todo el ancho disponible */
    padding: .6rem;                /* Relleno interno */
    border: 1px solid #cbd5e1;     /* Borde gris azulado */
    border-radius: 10px;           /* Bordes suavemente redondeados */
}

/* Radios con separación entre etiquetas */
.ita-pqrsd-form .ita-radio label {
    margin-right: 1rem;            /* Espacio entre opciones de radio */
}

/* Botón principal del formulario */
.ita-pqrsd-form .ita-btn {
    display: inline-block;         /* Se comporta como bloque en línea */
    padding: .7rem 1.2rem;         /* Tamaño del botón */
    border-radius: 999px;          /* Botón con forma de pastilla */
    border: none;                  /* Sin borde */
    background: #1d4ed8;           /* Azul fuerte */
    color: #fff;                   /* Texto en blanco */
    font-weight: 700;              /* Texto en negrita */
    cursor: pointer;               /* Mano al pasar el ratón */
}

/* Efecto hover para el botón */
.ita-pqrsd-form .ita-btn:hover {
    filter: brightness(1.05);      /* Aclara un poco el color */
}

/* Elementos en línea, como inputs y labels juntos */
.ita-pqrsd-form .ita-inline {
    display: flex;                 /* Usa Flexbox */
    gap: .5rem;                    /* Espacio entre elementos */
    align-items: center;           /* Centrado vertical */
}

/* Texto descriptivo */
.ita-pqrsd-form .desc {
    color: #475569;                /* Gris oscuro */
}

/* Mensajes de error */
.ita-pqrsd-form .error {
    color: #b91c1c;                /* Rojo fuerte */
    margin-top: .25rem;            /* Espacio encima del error */
}

/* Campo trampa (honeypot): invisible para usuarios, visible para bots */
.ita-pqrsd-form .ita-hp {
    position: absolute;            /* Fuera del flujo */
    left: -9999px;                 /* Lo mueve muy a la izquierda */
    opacity: 0;                    /* Invisible */
    height: 0;
    width: 0;
}

/* Contenedor de resultados o mensajes tras enviar */
.ita-pqrsd-form .ita-result {
    margin-top: 1rem;
}

/* Contenedor de resultados de consultas */
.ita-consulta-res {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed #94a3b8;    /* Borde punteado gris azulado */
    border-radius: 10px;
}

/* Cuando el resultado es error */
.ita-consulta-res.error {
    border-color: #b91c1c;         /* Borde rojo */
    color: #b91c1c;                /* Texto rojo */
}

/* Ajustes para móviles (pantallas pequeñas) */
@media (max-width:600px) {
    .ita-pqrsd-form {
        padding: .75rem;           /* Menos relleno en pantallas reducidas */
    }
}

/* --- Estilos específicos para errores en la casilla de aceptación legal --- */

/* Mensaje de error debajo de la casilla */
.ita-pqrsd-form .ita-legal .error {
    color: #b91c1c;                /* Texto rojo */
    margin-top: .25rem;
}

/* Resaltar toda la fila de aceptación cuando hay error */
.ita-pqrsd-form .ita-legal.error label {
    border: 1px solid #b91c1c;     /* Borde rojo */
    background: #fff5f5;           /* Fondo rosado claro */
    padding: .4rem;                /* Espaciado interno */
    border-radius: .25rem;         /* Bordes levemente redondeados */
}