.sir-hs-test {
	max-width: 640px;
	margin: 60px auto;
	padding: 0 20px;
	width: 100%;
}
.sir-hs-title { text-align: center; margin-bottom: 32px; }
.sir-hs-group { margin-bottom: 20px; display: flex; flex-direction: column; }
.sir-hs-group label { margin-bottom: 6px; font-size: 14px; }
.sir-hs-req { color: #d3232f; font-weight: 700; }
/* intl-tel-input: make the wrapper fill the field column (default is inline-block). */
.sir-hs-form .iti { display: block; width: 100%; }
.sir-hs-form input,
.sir-hs-form select,
.sir-hs-form textarea {
	padding: 10px 12px; border: 1px solid #d5dbe0; border-radius: 4px;
	background: #f5f8fa; font: inherit; width: 100%;
}
/* Honeypot: display:none (not off-screen) so browser autofill / password
   managers skip it — off-screen fields still get auto-filled, which tripped
   the bot check and silently dropped legit submits. Bots that parse the DOM
   still see it, which is the point. */
.sir-hs-hp { display: none; }
.sir-hs-submit {
	background: #0d2340; color: #fff; border: 0; padding: 12px 28px;
	border-radius: 4px; cursor: pointer; font: inherit;
}
.sir-hs-submit:hover { background: #16345c; }
.sir-hs-message { margin-top: 16px; font-size: 14px; }
.sir-hs-message.success { color: #1a7f37; }
.sir-hs-message.error { color: #b42318; }

/* Searchable multi-select checkbox group with chips (CR zona_de_interes_detalle) */
.sir-hs-ms { border: 1px solid #d5dbe0; border-radius: 4px; background: #f5f8fa; overflow: hidden; }
.sir-hs-ms-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid #e3e8ee; }
.sir-hs-ms-chips { display: contents; }
.sir-hs-ms-chip {
	display: inline-flex; align-items: center; gap: 4px;
	background: #0d2340; color: #fff; border-radius: 999px;
	padding: 3px 6px 3px 10px; font-size: 12px; line-height: 1.4;
}
.sir-hs-ms-chip-x {
	background: rgba(255, 255, 255, .2); color: #fff; border: 0; border-radius: 50%;
	width: 16px; height: 16px; line-height: 14px; padding: 0; cursor: pointer;
	font-size: 13px; text-align: center;
}
.sir-hs-ms-chip-x:hover { background: rgba(255, 255, 255, .4); }
.sir-hs-form .sir-hs-ms-search {
	flex: 1 1 120px; min-width: 120px; border: 0; background: transparent;
	padding: 4px 2px; width: auto; box-shadow: none; outline: none;
}
.sir-hs-ms-list { list-style: none; margin: 0; padding: 4px 0; max-height: 220px; overflow-y: auto; background: #fff; }
.sir-hs-ms-opt { margin: 0; }
.sir-hs-ms-opt label {
	display: flex; align-items: flex-start; gap: 8px; margin: 0;
	padding: 7px 12px; cursor: pointer; font-size: 14px;
}
.sir-hs-ms-opt label:hover { background: #eef3f8; }
.sir-hs-form .sir-hs-ms-opt input[type="checkbox"] {
	width: auto; margin: 2px 0 0; padding: 0; flex: 0 0 auto; accent-color: #0d2340;
}

/* Debug panel (pilot page only). */
.sir-hs-debug:empty { display: none; }
.sir-hs-debug {
	margin: 40px auto 80px;
	max-width: 860px;
	padding: 0 20px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: #1c2b3a;
}
.sir-dbg-head {
	display: flex; align-items: center; gap: 12px;
	font-size: 15px; font-weight: 700; color: #0d2340;
	padding: 10px 12px; background: #eef3f8; border-radius: 6px 6px 0 0;
	border: 1px solid #d5dbe0; border-bottom: 0;
}
.sir-dbg-refresh {
	margin-left: auto; font: inherit; font-size: 12px; cursor: pointer;
	background: #0d2340; color: #fff; border: 0; border-radius: 4px; padding: 5px 10px;
}
.sir-hs-debug h3 {
	font-size: 13px; margin: 18px 0 6px; color: #0d2340;
	border-bottom: 1px solid #e3e8ee; padding-bottom: 4px;
}
.sir-dbg-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sir-dbg-t th, .sir-dbg-t td {
	text-align: left; vertical-align: top; padding: 4px 8px;
	border: 1px solid #e3e8ee; word-break: break-word;
}
.sir-dbg-t th { width: 210px; background: #f7f9fb; font-weight: 600; }
.sir-dbg-fields th { width: auto; background: #f7f9fb; }
.sir-dbg-fields td { font-size: 11px; }
.sir-dbg-fields tr.st-sent td, .sir-dbg-fields tr.st-resolved td { background: #f0faf3; }
.sir-dbg-fields tr.st-unmapped td { background: #fff7ed; }
.sir-dbg-fields tr.st-empty td { color: #9aa7b4; }
.sir-dbg-empty { color: #9aa7b4; font-style: italic; padding: 6px 0; }
.sir-dbg-json {
	background: #0d2340; color: #d6e4f5; padding: 12px; border-radius: 4px;
	overflow-x: auto; font-size: 11.5px; line-height: 1.5; margin: 0;
	white-space: pre; max-width: 100%;
}
.sir-hs-debug code { background: #eef3f8; padding: 1px 4px; border-radius: 3px; }