/*
 * Issuance form styling.
 *
 * Same isolation strategy as public.css: every selector repeats its own class three times
 * (.syg-x.syg-x.syg-x). Same elements matched, but specificity rises to 0,3,x, which outranks
 * the Vamtam theme's and Elementor's rules on bare inputs, buttons, labels and tables without
 * any !important. The class is repeated rather than nested under .syg-panel because a notice can
 * BE the panel (class="syg-panel syg-notice"), which a descendant selector would miss.
 *
 * Typography still inherits from the theme by design (font: inherit); only properties that would
 * visibly break the layout are pinned down in the reset below.
 *
 * Both this file and public.css declare the same .syg-panel token set, so either can load alone.
 */

.syg-panel.syg-panel.syg-panel {
	--syg-ink: #1b2a3a;
	--syg-muted: #6b7a8c;
	--syg-line: #d8e0e8;
	--syg-accent: #1b6ca8;
	--syg-accent-dark: #14507c;
	--syg-error: #b32d2e;
	--syg-warning: #8a6100;
	--syg-warning-bg: #fff8e5;
	--syg-error-bg: #fdeceb;
	--syg-info-bg: #eef5fb;

	box-sizing: border-box;
	max-width: 900px;
	margin: 0 auto;
	padding: 28px;
	border: 1px solid var(--syg-line);
	border-radius: 10px;
	background: #fff;
	color: var(--syg-ink);
	line-height: 1.5;
	text-align: left;
	text-transform: none;
	box-shadow: none;
}

.syg-panel.syg-panel.syg-panel *,
.syg-panel.syg-panel.syg-panel *::before,
.syg-panel.syg-panel.syg-panel *::after {
	box-sizing: inherit;
}

/* Defensive reset: neutralises theme declarations on properties this stylesheet would
   otherwise leave unset. Checkboxes, radios and date inputs are left alone so their native
   controls keep working. */
.syg-panel.syg-panel.syg-panel input:not([type="checkbox"]):not([type="radio"]),
.syg-panel.syg-panel.syg-panel select,
.syg-panel.syg-panel.syg-panel textarea,
.syg-panel.syg-panel.syg-panel button,
.syg-panel.syg-panel.syg-panel a.syg-button {
	margin: 0;
	min-height: 0;
	max-width: none;
	background-image: none;
	box-shadow: none;
	text-transform: none;
	text-shadow: none;
	letter-spacing: normal;
	transition: none;
	transform: none;
}

.syg-panel.syg-panel.syg-panel table {
	background: none;
	border: 0;
	box-shadow: none;
	table-layout: auto;
}

.syg-panel.syg-panel.syg-panel tr,
.syg-panel.syg-panel.syg-panel thead,
.syg-panel.syg-panel.syg-panel tbody {
	background: none;
	border: 0;
}

.syg-issue__title.syg-issue__title.syg-issue__title {
	margin: 0 0 8px;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--syg-ink);
	text-transform: none;
	letter-spacing: normal;
}

.syg-issue__lead.syg-issue__lead.syg-issue__lead {
	margin: 0 0 20px;
	color: var(--syg-muted);
}

/* Fieldsets ------------------------------------------------------- */

.syg-fieldset.syg-fieldset.syg-fieldset {
	margin: 0 0 24px;
	padding: 18px 18px 6px;
	border: 1px solid var(--syg-line);
	border-radius: 8px;
	background: none;
	box-shadow: none;
}

.syg-fieldset.syg-fieldset.syg-fieldset legend {
	float: none;
	width: auto;
	margin: 0;
	padding: 0 8px;
	border: 0;
	background: none;
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--syg-muted);
}

.syg-grid.syg-grid.syg-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
}

.syg-field--wide.syg-field--wide.syg-field--wide {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.syg-grid.syg-grid.syg-grid {
		grid-template-columns: 1fr;
	}

	.syg-panel.syg-panel.syg-panel {
		padding: 18px;
	}
}

/* Fields ---------------------------------------------------------- */

.syg-field.syg-field.syg-field label {
	display: block;
	margin: 0 0 5px;
	padding: 0;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--syg-ink);
	text-transform: none;
	letter-spacing: normal;
}

.syg-field.syg-field.syg-field label span {
	color: var(--syg-error);
}

/* The signature field's caption. A <label for> pointing at a hidden input labels nothing a
   screen reader can reach, so the caption is a span styled to match the real labels. */
.syg-field__label.syg-field__label.syg-field__label {
	display: block;
	margin: 0 0 5px;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--syg-ink);
	text-transform: none;
	letter-spacing: normal;
}

/* Signature preview ------------------------------------------------ */

/* A chequerboard, faint, behind the thumbnail: the signature must be a transparent PNG, and a
   white-boxed JPG is invisible against a white panel and obvious against this. The validator
   refuses non-PNG anyway, but the issuer sees the problem here before submitting. */
.syg-signature.syg-signature.syg-signature {
	padding: 10px;
	border: 1px solid var(--syg-line);
	border-radius: 6px;
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #f1f1f1 25%, transparent 25% 75%, #f1f1f1 75%),
		linear-gradient(45deg, #f1f1f1 25%, transparent 25% 75%, #f1f1f1 75%);
	background-position: 0 0, 8px 8px;
	background-size: 16px 16px;
	background-repeat: repeat;
}

.syg-signature__img.syg-signature__img.syg-signature__img {
	display: block;
	max-width: 260px;
	max-height: 80px;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.syg-signature__empty.syg-signature__empty.syg-signature__empty {
	margin: 0;
	font-size: 0.85rem;
	color: var(--syg-muted);
}

.syg-signature__actions.syg-signature__actions.syg-signature__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
}

/* The pickers are secondary to the submit button, and full-size buttons here would compete
   with "Revisar y continuar" for the eye. */
.syg-signature__actions.syg-signature__actions.syg-signature__actions .syg-button {
	padding: 7px 14px;
	font-size: 0.88rem;
}

.syg-field.syg-field.syg-field input[type="text"],
.syg-field.syg-field.syg-field input[type="email"],
.syg-field.syg-field.syg-field input[type="tel"],
.syg-field.syg-field.syg-field input[type="date"],
.syg-field.syg-field.syg-field input[type="number"],
.syg-field.syg-field.syg-field select,
.syg-field.syg-field.syg-field textarea {
	width: 100%;
	height: auto;
	padding: 9px 11px;
	border: 1px solid var(--syg-line);
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--syg-ink);
}

.syg-field.syg-field.syg-field input:focus,
.syg-field.syg-field.syg-field select:focus,
.syg-field.syg-field.syg-field textarea:focus {
	outline: 2px solid var(--syg-accent);
	outline-offset: 1px;
	border-color: var(--syg-accent);
	box-shadow: none;
}

.syg-field--error.syg-field--error.syg-field--error input,
.syg-field--error.syg-field--error.syg-field--error select,
.syg-field--error.syg-field--error.syg-field--error textarea {
	border-color: var(--syg-error);
	background: var(--syg-error-bg);
}

.syg-help.syg-help.syg-help {
	margin: 5px 0 0;
	font-size: 0.82rem;
	color: var(--syg-muted);
}

.syg-error.syg-error.syg-error {
	margin: 5px 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--syg-error);
}

.syg-muted.syg-muted.syg-muted {
	color: var(--syg-muted);
}

/* Notices --------------------------------------------------------- */

.syg-notice.syg-notice.syg-notice {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 0;
	border-left: 4px solid var(--syg-muted);
	border-radius: 4px;
	background: var(--syg-info-bg);
	color: var(--syg-ink);
}

.syg-notice.syg-notice.syg-notice p:first-child {
	margin-top: 0;
}

.syg-notice.syg-notice.syg-notice p:last-child,
.syg-notice.syg-notice.syg-notice ul:last-child {
	margin-bottom: 0;
}

.syg-notice.syg-notice.syg-notice ul {
	margin: 8px 0 0;
	padding-left: 20px;
	list-style: disc outside;
}

.syg-notice--error.syg-notice--error.syg-notice--error {
	border-left-color: var(--syg-error);
	background: var(--syg-error-bg);
}

.syg-notice--warning.syg-notice--warning.syg-notice--warning {
	border-left-color: var(--syg-warning);
	background: var(--syg-warning-bg);
	color: var(--syg-warning);
}

.syg-notice--info.syg-notice--info.syg-notice--info,
.syg-notice--success.syg-notice--success.syg-notice--success {
	border-left-color: var(--syg-accent);
	background: var(--syg-info-bg);
}

/* Summary table --------------------------------------------------- */

.syg-summary.syg-summary.syg-summary {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.syg-summary.syg-summary.syg-summary th,
.syg-summary.syg-summary.syg-summary td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--syg-line);
	background: none;
	text-align: left;
	vertical-align: top;
	text-transform: none;
	letter-spacing: normal;
}

.syg-summary.syg-summary.syg-summary th {
	width: 38%;
	font-weight: 600;
	color: var(--syg-muted);
}

.syg-summary.syg-summary.syg-summary td {
	font-weight: 500;
	color: var(--syg-ink);
	word-break: break-word;
}

/* Kept small: this is a confirmation summary, and a signature blown up to full width would draw
   the eye away from the participant's name, which is the field that actually needs checking. */
.syg-summary__signature.syg-summary__signature.syg-summary__signature {
	display: block;
	max-width: 200px;
	max-height: 60px;
	width: auto;
	height: auto;
	margin: 0 0 4px;
	border: 0;
	box-shadow: none;
}

/* Certificate ID -------------------------------------------------- */

.syg-certid.syg-certid.syg-certid {
	margin: 0 0 20px;
	padding: 16px;
	border: 1px dashed var(--syg-accent);
	border-radius: 8px;
	background: var(--syg-info-bg);
	text-align: center;
}

.syg-certid__label.syg-certid__label.syg-certid__label {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--syg-muted);
}

.syg-certid__value.syg-certid__value.syg-certid__value {
	display: block;
	margin-top: 4px;
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--syg-accent-dark);
}

/* Actions --------------------------------------------------------- */

.syg-actions.syg-actions.syg-actions {
	margin-top: 8px;
}

.syg-actions--split.syg-actions--split.syg-actions--split {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.syg-button.syg-button.syg-button {
	display: inline-block;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: 6px;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	background-image: none;
	cursor: pointer;
}

.syg-button--primary.syg-button--primary.syg-button--primary {
	background: var(--syg-accent);
	border-color: var(--syg-accent);
	color: #fff;
}

.syg-button--primary.syg-button--primary.syg-button--primary:hover,
.syg-button--primary.syg-button--primary.syg-button--primary:focus {
	background: var(--syg-accent-dark);
	border-color: var(--syg-accent-dark);
	color: #fff;
}

.syg-button--ghost.syg-button--ghost.syg-button--ghost {
	background: #fff;
	border-color: var(--syg-line);
	color: var(--syg-ink);
}

.syg-button--ghost.syg-button--ghost.syg-button--ghost:hover,
.syg-button--ghost.syg-button--ghost.syg-button--ghost:focus {
	border-color: var(--syg-accent);
	color: var(--syg-accent-dark);
}

.syg-button.syg-button.syg-button[disabled],
.syg-button.syg-button.syg-button[aria-disabled="true"] {
	opacity: 0.6;
	cursor: progress;
}