:root {
	--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--font-size: 17px;
	--font-size-small: .92rem;
	--line-height: 1.55;

	--page-width: 1200px;
	--space-xs: .25rem;
	--space-sm: .5rem;
	--space-md: .75rem;
	--space-lg: 1rem;
	--space-xl: 1.5rem;

	--radius: .25rem;

	--color-bg: #f6f6f4;
	--color-surface: #ffffff;
	--color-surface-soft: #f0f0ed;
	--color-text: #242424;
	--color-muted: #666666;
	--color-border: #cfcfca;
	--color-border-soft: #ddddda;

	--color-accent: #4f6475;
	--color-accent-hover: #435766;
	--color-danger: #8a4b45;
	--color-danger-hover: #773f3a;

	--code-bg: #eeeeeb;
	--code-text: #242424;
	--code-keyword: #004cff;
	--code-string: #008a00;
	--code-number: #d35400;
	--code-comment: #7a00cc;

	--control-bg: #ffffff;
	--control-border: var(--color-border);
	--control-padding-y: .35rem;
	--control-padding-x: .65rem;

	--shadow-focus: 0 0 0 .15rem rgb(79 100 117 / .18);
	
	--brand: #D24317;
	--brand-light: #F8B79F
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
}

body {
	overscroll-behavior: contain;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--font-size);
	line-height: var(--line-height);
}

body[hidden] {
	display: none !important;
}

header,
main,
footer {
	width: min(var(--page-width), calc(100% - 2rem));
	margin-inline: auto;
}

header {
	padding-block: var(--space-xl) var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

main {
	flex: 1;
	padding-block: var(--space-lg) var(--space-xl);
}

footer {
	margin-top: auto;
	padding-block: var(--space-lg);
	border-top: 1px solid var(--color-border);
	color: var(--color-muted);
	/*font-size: var(--font-size-small);*/
}

footer > *:not(:last-child) {
	margin-right: var(--space-sm);
}

section {
	/* padding-block: var(--space-lg); */
	/* border-bottom: 1px solid var(--color-border-soft); */
}

section:last-child {
	border-bottom: 0;
}

h1,
h2 {
	margin: 0 0 var(--space-md);
	line-height: 1.2;
	font-weight: 650;
}

h1 {
	font-size: 1.8rem;
}

h2 {
	font-size: 1.25rem;
}

p {
	margin: var(--space-sm) 0;
}

label {
	display: block;
	margin-bottom: var(--space-sm);
	font-weight: 600;
}

input,
textarea,
button,
select {
	font: inherit;
}

button:disabled,
button[disabled] {
	opacity: .45;
	cursor: not-allowed;
	filter: grayscale(.35);
}

button:disabled:hover,
button[disabled]:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

input,
textarea,
select {
	width: 100%;
	border: 1px solid var(--control-border);
	border-radius: var(--radius);
	padding: var(--control-padding-y) var(--control-padding-x);
	background: var(--control-bg);
	color: var(--color-text);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: var(--shadow-focus);
}

button {
	border: 1px solid var(--color-accent);
	border-radius: var(--radius);
	padding: calc(var(--control-padding-y) * 0.25) var(--control-padding-x);
	background: var(--color-accent);
	color: #ffffff;
	cursor: pointer;
}

button:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

button[data-action*="delete"], 
button[data-action*="clear"] {
	border-color: var(--color-danger);
	background: var(--color-danger);
}

button[data-action*="delete"]:hover, 
button[data-action*="clear"]:hover  {
	border-color: var(--color-danger-hover);
	background: var(--color-danger-hover);
}

/* Brand */

.brand {
	color: var(--brand);
}

/* Custom link underline animation */

a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 4px;  /* Espacio reservado para la línea */
	transition: background-size 0.3s;
}

a:hover {
	background-size: 100% 2px;
}

/* External links with different color */

a[href^="http"]:not([role="button"], nav ul li a, .sponsors a) {
	background-image: linear-gradient(tomato, tomato);
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-md);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
	margin-block: var(--space-md);
}

.muted {
	color: var(--color-muted);
	font-size: var(--font-size-small);
}

.editor-shell {
	position: relative;
	height: 280px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--code-bg);
}

#sqlEditor,
#sqlHighlight {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: var(--space-md);
	border: 0;
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: .95rem;
	line-height: 1.5;
	white-space: pre;
	overflow: auto;
	tab-size: 4;
}

#sqlEditor {
	background: transparent;
	color: transparent;
	caret-color: var(--code-text);
	resize: none;
	z-index: 2;
}

#sqlHighlight {
	color: var(--code-text);
	pointer-events: none;
	z-index: 1;
}

.sql-keyword {
	color: var(--code-keyword);
	font-weight: 800;
}

.sql-string {
	color: var(--code-string);
	font-weight: 650;
}

.sql-number {
	color: var(--code-number);
	font-weight: 700;
}

.sql-comment {
	color: var(--code-comment);
	font-style: italic;
	font-weight: 650;
}

.sql-function {
	color: #d000ff;
	font-weight: 800;
}

.sql-type {
	color: #0080ff;
	font-weight: 750;
}

.sql-identifier {
	color: #a16207;
	font-weight: 650;
}

/* Table */

.table-wrap {
	overflow: auto;
	max-height: 60vh;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-surface);
}

thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--color-surface-soft);
	box-shadow: 0 1px 0 var(--color-border);
}


th,
td {
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--color-border-soft);
	text-align: left;
	vertical-align: middle;
}

th {
	position: sticky;
	top: 0;
	background: var(--color-surface-soft);
	font-weight: 650;
}

tr:last-child td {
	border-bottom: 0;
}

pre {
	overflow: auto;
	margin: 0;
	padding: var(--space-md);
	background: var(--code-bg);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius);
	color: var(--code-text);
	font-family: var(--font-mono);
	font-size: .95rem;
}

/* /// */

header {
	display: flex;
	gap: var(--space-lg);
	align-items: end;
	justify-content: space-between;
}

.status-bar {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding-block: var(--space-xs);
	color: var(--color-muted);
	white-space: nowrap;
}

.status-bar strong {
	color: var(--color-text);
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
	padding-block: var(--space-md);
}

.toolbar button,
.toolbar select {
	width: auto;
}

.separator {
	width: 1px;
	align-self: stretch;
	background: var(--color-border);
	margin-inline: var(--space-xs);
}

.inline-control {
	display: inline-flex;
	gap: var(--space-sm);
	align-items: center;
	margin: 0;
	font-weight: 500;
	color: var(--color-muted);
}

.inline-control select {
	min-width: 7rem;
}

.section-header {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
}

.actions.compact {
	margin: 0;
}

dialog {
	width: min(42rem, calc(100vw - 2rem));
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0;
	background: var(--color-surface);
	color: var(--color-text);
}

dialog::backdrop {
	background: rgb(0 0 0 / .35);
}

dialog article {
	margin: 0;
}

dialog header,
dialog footer {
	width: auto;
	margin: 0;
	padding: var(--space-md);
	border-color: var(--color-border-soft);
}

dialog header {
	border-bottom: 1px solid var(--color-border-soft);
}

dialog footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-sm);
	border-top: 1px solid var(--color-border-soft);
}

#appDialogBody {
	padding: var(--space-md);
}

@media (max-width: 760px) {
	header,
	.section-header {
		align-items: stretch;
		flex-direction: column;
	}

	.status-bar {
		white-space: normal;
	}

	.separator {
		display: none;
	}
}

#appOverlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: rgb(246 246 244 / .82);
	backdrop-filter: blur(2px);
}

#appOverlay[hidden] {
	display: none;
}

.overlay-box {
	min-width: min(24rem, calc(100vw - 2rem));
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	text-align: center;
}

.spinner {
	width: 2rem;
	height: 2rem;
	margin: 0 auto var(--space-md);
	border: .2rem solid var(--color-border-soft);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: spin .8s linear infinite;
}

.is-busy body {
	cursor: wait;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Help */

.help-section {
	max-height: 45vh;
	margin-bottom: var(--space-md);
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	overflow: hidden;
}

.help-section[hidden] {
	display: none;
}

.help-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-sm);
}

.help-content {
	max-height: calc(45vh - 4rem);
	overflow: auto;
	padding-right: var(--space-sm);
}

.help-content h1,
.help-content h2,
.help-content h3 {
	margin-top: var(--space-lg);
}

.help-content h1:first-child,
.help-content h2:first-child,
.help-content h3:first-child {
	margin-top: 0;
}

@media (max-width: 999px) {
	.help-section {
		max-height: 65vh;
	}
}

/* Icons */

.icon {
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle;
}

.icon.mini {
	width: 1em;
	height: 1em;
}

.icon-trigger {
	all: unset;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	color: inherit;
}

.baseline {
	vertical-align: baseline !important;
}

.middle {
	vertical-align: middle !important;
}

.text-top {
	vertical-align: text-top !important;
}

.text-bottom {
	vertical-align: text-bottom !important;
}

.text-right {
	text-align: right !important;
}

.float-right {
	float: right;
}