/*
 * Estilos del sistema de PQRS - Front-end.
 *
 * Deliberadamente minimalista: no define colores de marca, tipografías,
 * radios de borde ni apariencia de botones. Todo eso lo hereda el tema
 * activo de WordPress (inputs, selects, textareas, <button>, tablas),
 * para que el formulario se vea visualmente igual que el resto del sitio.
 *
 * Solo se define lo indispensable para que el formulario sea usable
 * (distribución en columnas, separación entre campos, ancho de los
 * inputs) y lo estrictamente funcional (ocultar el campo trampa
 * anti-spam). La única excepción son los avisos de error/éxito/
 * advertencia y el asterisco de campo obligatorio, que usan un color
 * semántico universal (rojo/verde/ámbar) porque sin ninguna distinción
 * visual el usuario no podría notar si su envío falló o fue exitoso.
 *
 * Los errores de campo individuales (PQR-003 / CC24-CC25) siguen la misma
 * lógica: el borde rojo de .pqrs-campo-invalido es solo un refuerzo visual
 * que NUNCA es el único indicador, ya que siempre va acompañado del texto
 * explícito en .pqrs-error-mensaje (y de aria-invalid/aria-describedby en
 * el marcado) — así que el color nunca es la única señal de error.
 */

.pqrs-contenedor {
	max-width: 720px;
	margin: 0 auto;
}

.pqrs-form .pqrs-fila {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.pqrs-form .pqrs-fila .pqrs-campo {
	flex: 1 1 240px;
}

.pqrs-campo {
	margin-bottom: 16px;
}

.pqrs-campo label {
	display: block;
	margin-bottom: 4px;
}

.pqrs-campo input[type="text"],
.pqrs-campo input[type="email"],
.pqrs-campo input[type="tel"],
.pqrs-campo input[type="file"],
.pqrs-campo select,
.pqrs-campo textarea {
	width: 100%;
	box-sizing: border-box;
}

.pqrs-requerido {
	color: #d63638;
}

.pqrs-checkbox label,
.pqrs-opcion-radio {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.pqrs-checkbox input[type="checkbox"],
.pqrs-opcion-radio input[type="radio"] {
	margin-top: 4px;
	flex-shrink: 0;
}

.pqrs-radio-grupo > label:first-child {
	display: block;
	margin-bottom: 8px;
}

.pqrs-opcion-radio {
	margin-bottom: 6px;
	cursor: pointer;
}

.pqrs-datos-personales {
	margin-top: 16px;
}

.pqrs-recaptcha {
	margin-bottom: 20px;
}

/*
 * Campo trampa anti-spam (honeypot, PQR-004 / CC32): oculto con display:none
 * para que quede completamente fuera del árbol de accesibilidad (a
 * diferencia de una posición fuera de pantalla con position:absolute, que
 * algunos lectores de pantalla en modo de exploración libre SÍ pueden
 * encontrar). Ningún usuario real -visual, con teclado o con lector de
 * pantalla- puede percibirlo ni llegar a él; solo un bot que rellena todos
 * los campos del formulario automáticamente lo completaría, y el servidor
 * rechaza de inmediato cualquier envío donde llegue con un valor (ver
 * PQRS_Form::procesar_envio()).
 */
.pqrs-honeypot {
	display: none;
}

/*
 * Estado de error accesible por campo (PQR-003 / CC24-CC25). El mensaje de
 * texto (.pqrs-error-mensaje) es siempre lo que comunica el error; el borde
 * de .pqrs-campo-invalido es un refuerzo visual adicional, nunca la única
 * señal.
 */
.pqrs-error-mensaje {
	display: block;
	color: #d63638;
	font-size: 13px;
	margin-top: 4px;
}

.pqrs-campo-invalido {
	border: 2px solid #d63638 !important;
}

.pqrs-tabla-resultado {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}

.pqrs-tabla-resultado th,
.pqrs-tabla-resultado td {
	text-align: left;
	padding: 8px 10px;
}

.pqrs-tabla-resultado th {
	width: 40%;
}

.pqrs-badge {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid currentColor;
	border-radius: 3px;
}

.pqrs-consulta .pqrs-resultado {
	margin-top: 24px;
}

/*
 * Avisos semánticos: solo un borde lateral de color universal (no una
 * "tarjeta" con fondo, radio de borde o tipografía propia) para que el
 * usuario distinga error / éxito / advertencia sin depender del tema.
 */
.pqrs-errores {
	border-left: 4px solid #d63638;
	padding: 8px 16px;
	margin-bottom: 20px;
}

.pqrs-errores ul {
	margin: 0;
	padding-left: 18px;
}

/*
 * Igual que .pqrs-modal-overlay[hidden] más abajo: se refuerza el
 * comportamiento nativo del atributo "hidden" por si algún tema o reset de
 * CSS lo sobreescribe (por ejemplo con "display: flex" en todos los divs).
 */
.pqrs-errores[hidden] {
	display: none;
}

.pqrs-confirmacion {
	border-left: 4px solid #00a32a;
	padding: 8px 16px;
}

.pqrs-aviso-anonimo-form,
.pqrs-aviso-anonimo {
	border-left: 4px solid #dba617;
	padding: 8px 16px;
	margin: 4px 0 20px;
}

/*
 * Ventana emergente con el número de radicado. A diferencia del resto de
 * este archivo, aquí sí se define un fondo y color propios: un modal sin
 * fondo definido sería ilegible sobre cualquier tema (el overlay oscuro
 * necesita una tarjeta clara encima). Es la misma excepción funcional que
 * ya aplica a los avisos de error/éxito.
 */
.pqrs-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
}

.pqrs-modal-overlay[hidden] {
	display: none;
}

.pqrs-modal-caja {
	background: #fff;
	color: #1d2327;
	border-radius: 8px;
	padding: 32px;
	max-width: 420px;
	width: 100%;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.pqrs-modal-caja h3 {
	margin-top: 0;
}

.pqrs-modal-radicado-numero {
	font-size: 24px;
	margin: 12px 0;
	word-break: break-word;
}

.pqrs-modal-aviso {
	font-size: 13px;
	color: #646970;
}

.pqrs-modal-acciones {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 20px;
	flex-wrap: wrap;
}

.pqrs-modal-cerrar {
	background: transparent;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	padding: 10px 20px;
	cursor: pointer;
	color: #1d2327;
}