/*
 * Verification and directory styling.
 *
 * Every selector repeats its own class three times (.syg-x.syg-x.syg-x). That matches exactly
 * the same elements as the single class but raises specificity to 0,3,x, which outranks the
 * theme's and Elementor's own rules (.elementor-widget-container input, .entry-content table th,
 * body .theme-button, ...) without a single !important. Repeating the class instead of adding a
 * .syg-panel ancestor matters because a notice can BE the panel (class="syg-panel syg-notice"),
 * so a descendant selector would miss it.
 *
 * Anything the theme is likely to set on a bare input/button/table is re-declared explicitly in
 * the reset below, so an undeclared property can never leak in from outside.
 *
 * The verdict block never relies on colour alone: the heading text states the verdict, and the
 * wording works in greyscale and for a colour-blind reader.
 */

.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;
	--syg-ok: #1e7b4c;
	--syg-ok-bg: #ecf7f1;

	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. */
.syg-panel.syg-panel.syg-panel input,
.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-verify__title.syg-verify__title.syg-verify__title,
.syg-directory__title.syg-directory__title.syg-directory__title {
	margin: 0 0 16px;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--syg-ink);
	text-transform: none;
	letter-spacing: normal;
}

.syg-rule.syg-rule.syg-rule {
	height: 0;
	margin: 24px 0;
	border: 0;
	border-top: 1px solid var(--syg-line);
	background: none;
}

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

.syg-mono.syg-mono.syg-mono {
	font-family: Consolas, Monaco, "Courier New", monospace;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

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

/* Lookup form ------------------------------------------------------ */

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

.syg-verify__row.syg-verify__row.syg-verify__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.syg-verify__row.syg-verify__row.syg-verify__row input[type="text"] {
	flex: 1 1 240px;
	min-width: 0;
	width: auto;
	height: auto;
	padding: 11px 13px;
	border: 1px solid var(--syg-line);
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 1.05rem;
	line-height: 1.5;
	/* The ID is uppercase on paper; matching it here avoids the "did I type it right?"
	   moment even though the lookup normalises case anyway. */
	text-transform: uppercase;
	color: var(--syg-ink);
}

.syg-verify__row.syg-verify__row.syg-verify__row input[type="text"]:focus {
	outline: 2px solid var(--syg-accent);
	outline-offset: 1px;
	border-color: var(--syg-accent);
	box-shadow: none;
}

/* Verdict ---------------------------------------------------------- */

.syg-verdict.syg-verdict.syg-verdict {
	margin: 0 0 20px;
	padding: 18px 20px;
	border: 0;
	border-left: 6px solid var(--syg-muted);
	border-radius: 6px;
	background: var(--syg-info-bg);
}

.syg-verdict__heading.syg-verdict__heading.syg-verdict__heading {
	margin: 0 0 6px;
	padding: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
}

.syg-verdict__body.syg-verdict__body.syg-verdict__body {
	margin: 0;
}

.syg-verdict__meta.syg-verdict__meta.syg-verdict__meta {
	margin: 8px 0 0;
	font-size: 0.9rem;
	color: var(--syg-muted);
}

.syg-verdict--valid.syg-verdict--valid.syg-verdict--valid {
	border-left-color: var(--syg-ok);
	background: var(--syg-ok-bg);
}

.syg-verdict--valid.syg-verdict--valid.syg-verdict--valid .syg-verdict__heading {
	color: var(--syg-ok);
}

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

.syg-verdict--expired.syg-verdict--expired.syg-verdict--expired .syg-verdict__heading {
	color: var(--syg-warning);
}

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

.syg-verdict--revoked.syg-verdict--revoked.syg-verdict--revoked .syg-verdict__heading {
	color: var(--syg-error);
}

.syg-verdict--unknown.syg-verdict--unknown.syg-verdict--unknown {
	border-left-color: var(--syg-muted);
	background: #f5f7f9;
}

/* 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--warning.syg-notice--warning.syg-notice--warning {
	border-left-color: var(--syg-warning);
	background: var(--syg-warning-bg);
	color: var(--syg-warning);
}

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

/* Detail table ----------------------------------------------------- */

.syg-summary.syg-summary.syg-summary {
	width: 100%;
	margin: 0 0 20px;
	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;
}

/* Directory -------------------------------------------------------- */

.syg-directory__filters.syg-directory__filters.syg-directory__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: flex-end;
	margin: 0 0 18px;
	padding: 16px;
	border: 1px solid var(--syg-line);
	border-radius: 8px;
	background: #fbfcfd;
}

.syg-directory__filters.syg-directory__filters.syg-directory__filters .syg-field {
	flex: 0 1 auto;
	margin: 0;
}

.syg-directory__filters.syg-directory__filters.syg-directory__filters .syg-field--grow {
	flex: 1 1 220px;
	min-width: 0;
}

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

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

.syg-directory__count.syg-directory__count.syg-directory__count {
	margin: 0 0 12px;
	font-size: 0.9rem;
	color: var(--syg-muted);
}

/* Horizontal scroll rather than a squeezed table: names and course titles are long in
   Spanish, and a wrapped 7-column table on a phone is unreadable. */
.syg-tablewrap.syg-tablewrap.syg-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.syg-table.syg-table.syg-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.92rem;
}

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

.syg-table.syg-table.syg-table thead th {
	border-bottom-width: 2px;
	font-weight: 600;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--syg-muted);
}

.syg-table.syg-table.syg-table tbody tr:hover {
	background: var(--syg-info-bg);
}

.syg-pill.syg-pill.syg-pill {
	display: inline-block;
	padding: 3px 10px;
	border: 0;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
}

.syg-pill--vigente.syg-pill--vigente.syg-pill--vigente {
	background: var(--syg-ok-bg);
	color: var(--syg-ok);
}

.syg-pill--vencido.syg-pill--vencido.syg-pill--vencido {
	background: var(--syg-warning-bg);
	color: var(--syg-warning);
}

.syg-pill--revocado.syg-pill--revocado.syg-pill--revocado {
	background: var(--syg-error-bg);
	color: var(--syg-error);
}

.syg-pagination.syg-pagination.syg-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 18px;
}

.syg-pagination__status.syg-pagination__status.syg-pagination__status {
	font-size: 0.9rem;
	color: var(--syg-muted);
}

/* Buttons ---------------------------------------------------------- */

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

.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);
}

@media (max-width: 640px) {
	.syg-panel.syg-panel.syg-panel {
		padding: 18px;
	}

	.syg-summary.syg-summary.syg-summary th {
		width: 45%;
	}

	.syg-directory__filters.syg-directory__filters.syg-directory__filters .syg-field,
	.syg-directory__filters.syg-directory__filters.syg-directory__filters .syg-field--action {
		flex: 1 1 100%;
	}

	.syg-directory__filters.syg-directory__filters.syg-directory__filters .syg-button {
		width: 100%;
	}
}

@media print {
	.syg-verify__form.syg-verify__form.syg-verify__form,
	.syg-directory__filters.syg-directory__filters.syg-directory__filters,
	.syg-pagination.syg-pagination.syg-pagination,
	.syg-actions.syg-actions.syg-actions {
		display: none;
	}

	.syg-panel.syg-panel.syg-panel {
		border: 0;
		padding: 0;
	}
}