/* Formularios públicos de CI Canadá. Todo va dentro de .cicfb para no tocar el tema.
   Cada formulario trae sus colores en variables (--cicfb-*). */
.cicfb {
	--cicfb-primary: #c8102e;
	--cicfb-font: inherit;
	--cicfb-font-size: 16px;
	--cicfb-text: #1f2328;
	--cicfb-muted: #5b636e;
	--cicfb-title-size: 1.5em;
	--cicfb-title-color: var(--cicfb-text);
	--cicfb-title-align: left;
	--cicfb-label-size: .95em;
	--cicfb-label-weight: 600;
	--cicfb-label-color: var(--cicfb-text);
	--cicfb-required: var(--cicfb-error);
	--cicfb-error: #b42318;
	--cicfb-success: #067647;
	--cicfb-form-bg: transparent;
	--cicfb-form-border-color: #dcdfe4;
	--cicfb-form-border-width: 0px;
	--cicfb-form-radius: 12px;
	--cicfb-form-padding: 0px;
	--cicfb-max-width: 760px;
	--cicfb-gap: 18px;
	--cicfb-col-gap: 20px;
	--cicfb-input-bg: #fff;
	--cicfb-input-text: var(--cicfb-text);
	--cicfb-border: #c9ced6;
	--cicfb-input-border-width: 1px;
	--cicfb-radius: 8px;
	--cicfb-input-py: 10px;
	--cicfb-input-px: 12px;
	--cicfb-btn-bg: var(--cicfb-primary);
	--cicfb-btn-text: #fff;
	--cicfb-btn-hover: var(--cicfb-btn-bg);
	--cicfb-btn-radius: var(--cicfb-radius);
	container-type: inline-size;
	box-sizing: border-box;
	color: var(--cicfb-text);
	font-family: var(--cicfb-font);
	font-size: var(--cicfb-font-size);
	line-height: 1.5;
	max-width: var(--cicfb-max-width);
	margin: 0 0 1.5em;
}
.cicfb *, .cicfb *::before, .cicfb *::after { box-sizing: border-box; }
.cicfb.cicfb-centered { margin-left: auto; margin-right: auto; }
.cicfb-spacing-compact { --cicfb-gap: 12px; }
.cicfb-spacing-relaxed { --cicfb-gap: 26px; }

/* Contenedor */
.cicfb .cicfb-form { margin: 0; padding: 0; border: 0; background: none; }
.cicfb.cicfb-boxed .cicfb-form {
	background: var(--cicfb-form-bg);
	border: var(--cicfb-form-border-width) solid var(--cicfb-form-border-color);
	border-radius: var(--cicfb-form-radius);
	padding: var(--cicfb-form-padding);
}
.cicfb.cicfb-shadow-sm .cicfb-form { box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.cicfb.cicfb-shadow-md .cicfb-form { box-shadow: 0 6px 18px rgba(16, 24, 40, .12); }
.cicfb.cicfb-shadow-lg .cicfb-form { box-shadow: 0 18px 40px rgba(16, 24, 40, .18); }
.cicfb .cicfb-title { font-family: inherit; font-size: var(--cicfb-title-size); color: var(--cicfb-title-color); text-align: var(--cicfb-title-align); margin: 0 0 .4em; line-height: 1.25; }
.cicfb .cicfb-intro { margin: 0 0 var(--cicfb-gap); color: var(--cicfb-muted); text-align: var(--cicfb-title-align); }

/* Cuadrícula de 12 columnas */
.cicfb .cicfb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--cicfb-gap); column-gap: var(--cicfb-col-gap); }
.cicfb .cicfb-field { grid-column: span 12; }
.cicfb .cicfb-span-9 { grid-column: span 9; }
.cicfb .cicfb-span-8 { grid-column: span 8; }
.cicfb .cicfb-span-6 { grid-column: span 6; }
.cicfb .cicfb-span-4 { grid-column: span 4; }
.cicfb .cicfb-span-3 { grid-column: span 3; }
/* En tableta 1/3 y 1/4 pasan a media fila; en celular todo va a fila completa. */
@container (max-width: 720px) {
	.cicfb .cicfb-span-4, .cicfb .cicfb-span-3 { grid-column: span 6; }
}
@container (max-width: 520px) {
	.cicfb .cicfb-field { grid-column: span 12 !important; }
	.cicfb.cicfb-boxed .cicfb-form { padding: min(var(--cicfb-form-padding), 20px); }
}
@supports not (container-type: inline-size) {
	@media (max-width: 600px) { .cicfb .cicfb-field { grid-column: span 12 !important; } }
}

/* Campos */
.cicfb .cicfb-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.cicfb.is-js .cicfb-field[data-cond-hidden], .cicfb .cicfb-field[hidden] { display: none; }
.cicfb .cicfb-label { font-weight: var(--cicfb-label-weight); font-size: var(--cicfb-label-size); margin: 0; color: var(--cicfb-label-color); }
.cicfb .cicfb-req { color: var(--cicfb-required); margin-left: 2px; }
.cicfb .cicfb-sr, .cicfb .cicfb-hp, .cicfb .cicfb-label-hidden .cicfb-label {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cicfb .cicfb-desc { margin: 0; font-size: .85em; color: var(--cicfb-muted); }
.cicfb .cicfb-test-note { color: #8a6d00; }
.cicfb .cicfb-unavailable { color: var(--cicfb-error); }
.cicfb input[type=text], .cicfb input[type=email], .cicfb input[type=tel], .cicfb input[type=date], .cicfb select, .cicfb textarea {
	display: block; width: 100%; max-width: 100%; margin: 0;
	font: inherit; color: var(--cicfb-input-text); background: var(--cicfb-input-bg);
	border: var(--cicfb-input-border-width) solid var(--cicfb-border); border-radius: var(--cicfb-radius);
	padding: var(--cicfb-input-py) var(--cicfb-input-px); min-height: 44px; box-shadow: none; appearance: auto;
	transition: border-color .15s, box-shadow .15s;
}
.cicfb.cicfb-inputs-filled input[type=text], .cicfb.cicfb-inputs-filled input[type=email], .cicfb.cicfb-inputs-filled input[type=tel],
.cicfb.cicfb-inputs-filled input[type=date], .cicfb.cicfb-inputs-filled select, .cicfb.cicfb-inputs-filled textarea {
	background: color-mix(in srgb, var(--cicfb-border) 22%, var(--cicfb-input-bg)); border-color: transparent;
}
.cicfb.cicfb-inputs-underline input[type=text], .cicfb.cicfb-inputs-underline input[type=email], .cicfb.cicfb-inputs-underline input[type=tel],
.cicfb.cicfb-inputs-underline input[type=date], .cicfb.cicfb-inputs-underline select, .cicfb.cicfb-inputs-underline textarea {
	border-width: 0 0 max(var(--cicfb-input-border-width), 1px); border-radius: 0; padding-left: 0; padding-right: 0; background: transparent;
}
.cicfb textarea { min-height: 110px; resize: vertical; }
.cicfb input[type=file] { font: inherit; font-size: .95em; padding: 8px; border: 1px dashed var(--cicfb-border); border-radius: var(--cicfb-radius); width: 100%; background: var(--cicfb-input-bg); color: var(--cicfb-input-text); }
.cicfb input:focus, .cicfb select:focus, .cicfb textarea:focus {
	outline: none; border-color: var(--cicfb-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cicfb-primary) 22%, transparent);
}
.cicfb input::placeholder, .cicfb textarea::placeholder { color: var(--cicfb-muted); opacity: .8; }
.cicfb input:disabled, .cicfb select:disabled, .cicfb textarea:disabled { opacity: .65; cursor: not-allowed; }
.cicfb .has-error input, .cicfb .has-error select, .cicfb .has-error textarea { border-color: var(--cicfb-error); }
.cicfb .cicfb-error { margin: 0; color: var(--cicfb-error); font-size: .85em; }
.cicfb .cicfb-error:empty { display: none; }

/* Botón */
.cicfb .cicfb-actions { margin-top: calc(var(--cicfb-gap) + 4px); display: flex; }
.cicfb.cicfb-btn-align-center .cicfb-actions { justify-content: center; }
.cicfb.cicfb-btn-align-right .cicfb-actions { justify-content: flex-end; }
.cicfb .cicfb-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font: inherit; font-weight: 600; color: var(--cicfb-btn-text); background: var(--cicfb-btn-bg);
	border: 0; border-radius: var(--cicfb-btn-radius); padding: 12px 28px; min-height: 46px;
	cursor: pointer; text-transform: none; letter-spacing: normal; line-height: 1.2;
	transition: background-color .15s, filter .15s, opacity .15s;
}
.cicfb.cicfb-btn-sm .cicfb-submit { padding: 8px 18px; min-height: 38px; font-size: .9em; }
.cicfb.cicfb-btn-lg .cicfb-submit { padding: 16px 36px; min-height: 56px; font-size: 1.1em; }
.cicfb.cicfb-btn-w-full .cicfb-submit { width: 100%; }
.cicfb.cicfb-btn-upper .cicfb-submit { text-transform: uppercase; letter-spacing: .04em; }
.cicfb .cicfb-submit:hover:not(:disabled) { background: var(--cicfb-btn-hover); filter: brightness(.94); }
.cicfb .cicfb-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--cicfb-btn-bg) 45%, transparent); outline-offset: 2px; }
.cicfb .cicfb-submit:disabled { opacity: .6; cursor: not-allowed; }
.cicfb .cicfb-spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cicfb-spin .8s linear infinite; }
.cicfb .cicfb-submit.is-loading .cicfb-spinner { display: inline-block; }
@keyframes cicfb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cicfb .cicfb-spinner { animation-duration: 2s; } }

/* Mensajes */
.cicfb .cicfb-alert { padding: 12px 14px; border-radius: var(--cicfb-radius); margin: 0 0 var(--cicfb-gap); font-size: .95em; border: 1px solid transparent; }
.cicfb .cicfb-alert:focus { outline: none; }
.cicfb .cicfb-alert--success { background: color-mix(in srgb, var(--cicfb-success) 10%, #fff); color: var(--cicfb-success); border-color: color-mix(in srgb, var(--cicfb-success) 35%, #fff); }
.cicfb .cicfb-alert--error { background: color-mix(in srgb, var(--cicfb-error) 8%, #fff); color: var(--cicfb-error); border-color: color-mix(in srgb, var(--cicfb-error) 30%, #fff); }
.cicfb .cicfb-alert--info { background: #f0f6fc; color: #135e96; border-color: #c5d9ed; }
.cicfb .cicfb-banner { padding: 8px 12px; border-radius: 6px; margin-bottom: 16px; font-size: .8em; font-weight: 700; letter-spacing: .02em; }
.cicfb .cicfb-banner--preview { background: #f0f6fc; color: #135e96; }
.cicfb .cicfb-banner--simulate { background: #fcf9e8; color: #7a5b00; }
.cicfb .cicfb-sim-output { margin-top: 16px; font-size: .85em; }
.cicfb .cicfb-sim-output pre { background: #1f2328; color: #e6edf3; padding: 12px; border-radius: 6px; overflow: auto; max-height: 360px; white-space: pre-wrap; }
.cicfb-admin-notice { padding: 10px 12px; border-left: 4px solid #dba617; background: #fcf9e8; font-size: 14px; margin: 1em 0; }

/* Secciones del formulario */
.cicfb .cicfb-section { grid-column: 1 / -1; margin-top: calc(var(--cicfb-gap) * .6); padding-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--cicfb-btn-bg) 25%, transparent); }
.cicfb .cicfb-grid > .cicfb-section:first-child { margin-top: 0; }
.cicfb .cicfb-section-title { margin: 0; font-family: inherit; font-size: 1.15em; font-weight: 700; color: var(--cicfb-title-color); line-height: 1.3; }
.cicfb .cicfb-section-desc { margin: 4px 0 0; font-size: .9em; color: var(--cicfb-muted); }

/* Casilla sí/no */
.cicfb .cicfb-checkbox { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.cicfb .cicfb-checkbox input[type=checkbox] { width: 22px; height: 22px; margin: 0; accent-color: var(--cicfb-primary); cursor: pointer; }

/* Aviso de formulario de prueba */
.cicfb .cicfb-sim-note { margin: 0 0 var(--cicfb-gap); padding: 8px 12px; border-radius: var(--cicfb-radius); background: #fcf9e8; color: #7a5b00; font-size: .85em; font-weight: 600; }