/* ==========================================================================
   Hash Tool — Neo-Brutalism (claro)
   ========================================================================== */

:root {
	/* Fondo de página (negro) vs. paneles "hundidos" dentro de cards blancas
	   (--panel, claro) — antes ambos usaban la misma variable --bg y, al
	   oscurecer la página, los paneles internos quedaban negro-sobre-negro. */
	--bg: #0d0d0d;
	--panel: #e4ded0;
	--dot-color: rgba(255, 222, 89, 0.35);
	--dot-color-active: rgba(255, 222, 89, 0.95);
	--surface: #ffffff;
	--ink: #111111;
	--on-dark: #f3efe2;
	--border-w: 3px;
	--shadow-off: 5px;
	/* Los elementos que apoyan directo sobre la página (cards, header,
	   banner, ad-slots) necesitan una sombra clara para que se note contra
	   el fondo negro — una sombra negra ahí se vuelve invisible. */
	--shadow: var(--shadow-off) var(--shadow-off) 0 0 var(--yellow);
	--shadow-sm: 3px 3px 0 0 var(--ink);
	--shadow-sm-onpage: 3px 3px 0 0 var(--yellow);

	--yellow: #ffde59;
	--pink: #ff6f91;
	--blue: #5ec8f2;
	--green: #b6f36a;
	--red: #ff5c5c;
	--purple: #c9a6ff;

	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--radius: 10px;
}

* {
	box-sizing: border-box;
}

/* El atributo nativo `hidden` debe ganarle a cualquier `display` de las
   reglas de abajo (ej. `.field { display: flex }`), que si no lo pisan por
   tener la misma especificidad que la hoja de estilos por defecto. */
[hidden] {
	display: none !important;
}

html {
	color-scheme: light;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	line-height: 1.45;
}

/* ---------- Fondo: grilla de puntos ---------- */

#dot-grid-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.page {
	position: relative;
	z-index: 1;
}

code, .result-hash {
	font-family: var(--font-mono);
}

.page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 20px 60px;
}

/* ---------- Header ---------- */

.site-header {
	margin-bottom: 28px;
}

.site-header__inner {
	background: var(--yellow);
	border: var(--border-w) solid var(--ink);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 22px 26px;
	margin-bottom: 14px;
}

.site-title {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.site-tagline {
	margin: 6px 0 0;
	font-weight: 600;
}

.security-banner {
	margin: 0;
	background: var(--surface);
	border: var(--border-w) solid var(--ink);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm-onpage);
	padding: 12px 16px;
	font-size: 0.92rem;
}

.security-banner code {
	background: var(--panel);
	padding: 1px 5px;
	border: 1px solid var(--ink);
	border-radius: 4px;
}

/* ---------- Layout ---------- */

.layout {
	display: grid;
	grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 180px);
	gap: 20px;
	align-items: start;
}

/* Columnas fijas por elemento: sin esto, ocultar un sidebar con
   display:none lo saca del auto-placement del grid y el contenido
   principal cae en la primera columna (angosta) en vez de la del medio. */
.layout > [data-slot="sidebar-left"] {
	grid-column: 1;
}

.layout > .main-content {
	grid-column: 2;
}

.layout > [data-slot="sidebar-right"] {
	grid-column: 3;
}

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

	.layout > [data-slot="sidebar-left"],
	.layout > .main-content,
	.layout > [data-slot="sidebar-right"] {
		grid-column: 1;
	}
}

.main-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* ---------- Tabs ---------- */

.tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tab {
	font: inherit;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.85rem;
	padding: 10px 16px;
	border: var(--border-w) solid var(--ink);
	border-radius: 6px;
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	box-shadow: var(--shadow-sm-onpage);
	transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.1s ease;
}

.tab:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 0 var(--yellow);
}

.tab:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 0 var(--yellow);
}

.tab[aria-selected="true"] {
	background: var(--yellow);
}

/* ---------- Cards ---------- */

.card {
	background: var(--surface);
	border: var(--border-w) solid var(--ink);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 22px;
}

.card__head-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.card__head-row .card__title {
	margin: 0;
}

.card__head-actions {
	display: flex;
	gap: 8px;
}

.card__title {
	margin: 0 0 16px;
	font-size: 1.3rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

/* ---------- Forms ---------- */

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
	flex: 1;
	min-width: 0;
}

.field--checkbox {
	flex-direction: row;
	align-items: center;
}

.field--checkbox label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	cursor: pointer;
}

.field-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

label {
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

input[type="text"],
select {
	font: inherit;
	font-family: var(--font-mono);
	padding: 10px 12px;
	border: var(--border-w) solid var(--ink);
	border-radius: 6px;
	background: var(--surface);
	color: var(--ink);
	box-shadow: 3px 3px 0 0 var(--ink);
}

input[type="text"]:focus,
select:focus {
	outline: none;
	box-shadow: 3px 3px 0 0 var(--ink), 0 0 0 3px var(--blue);
}

input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--pink);
}

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

.btn {
	font: inherit;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 12px 20px;
	border: var(--border-w) solid var(--ink);
	border-radius: 6px;
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: transform 0.06s ease, box-shadow 0.06s ease;
}

.btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 0 var(--ink);
}

.btn:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 0 var(--ink);
}

.btn--primary {
	background: var(--pink);
}

.btn--secondary {
	background: var(--blue);
}

.btn--copy {
	background: var(--yellow);
	padding: 8px 14px;
	font-size: 0.8rem;
	white-space: nowrap;
}

.btn--copy.is-copied {
	background: var(--green);
}

.btn--small {
	padding: 6px 12px;
	font-size: 0.75rem;
}

/* ---------- Salt inputs ---------- */

.field--salt .salt-row {
	display: flex;
	gap: 8px;
}

.field--salt input[type="text"] {
	flex: 1;
	min-width: 0;
}

/* ---------- Legacy warning ---------- */

.legacy-warning {
	margin: 14px 0 0;
	background: var(--red);
	border: var(--border-w) solid var(--ink);
	border-radius: 6px;
	box-shadow: var(--shadow-sm);
	padding: 10px 14px;
	font-weight: 700;
	font-size: 0.9rem;
}

/* ---------- Result panel ---------- */

.result-panel {
	margin-top: 22px;
	padding-top: 20px;
	border-top: var(--border-w) dashed var(--ink);
}

.result-panel__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.result-panel__algo {
	font-weight: 700;
}

.badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border: 2px solid var(--ink);
	border-radius: 4px;
	background: var(--green);
	box-shadow: 2px 2px 0 0 var(--ink);
}

.badge--legacy { background: var(--red); }
.badge--hash { background: var(--blue); }
.badge--password { background: var(--purple); }
.badge--recommended { background: var(--green); }
.badge--cms { background: var(--yellow); }

.result-box {
	display: flex;
	align-items: stretch;
	gap: 10px;
	background: var(--panel);
	border: var(--border-w) solid var(--ink);
	border-radius: 6px;
	padding: 10px 12px;
	flex-wrap: wrap;
}

.result-hash {
	flex: 1;
	min-width: 0;
	word-break: break-all;
	font-size: 0.92rem;
	align-self: center;
}

.result-hash--sql {
	white-space: pre-wrap;
}

.sql-panel {
	margin-top: 20px;
}

.sql-panel__title {
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
}

.variants-panel {
	margin-top: 20px;
}

.variants-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.variant-item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.variant-item__label {
	font-weight: 800;
	font-size: 0.8rem;
	text-transform: uppercase;
	min-width: 110px;
}

/* ---------- Detector ---------- */

.detector-result {
	margin-top: 16px;
	background: var(--panel);
	border: var(--border-w) solid var(--ink);
	border-radius: 6px;
	padding: 14px 16px;
}

.detector-result dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
}

.detector-result dt {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.78rem;
}

.detector-result dd {
	margin: 0;
	font-family: var(--font-mono);
}

.disclaimer {
	margin: 14px 0 0;
	font-size: 0.82rem;
	opacity: 0.75;
}

/* ---------- Verify ---------- */

.verify-result {
	margin-top: 14px;
	padding: 12px 16px;
	border: var(--border-w) solid var(--ink);
	border-radius: 6px;
	box-shadow: var(--shadow-sm);
	font-weight: 800;
	background: var(--surface);
}

.verify-result--ok {
	background: var(--green);
}

.verify-result--fail {
	background: var(--red);
}

/* ---------- History ---------- */

.history-list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.history-item {
	background: var(--panel);
	border: var(--border-w) solid var(--ink);
	border-radius: 6px;
	padding: 12px 14px;
}

.history-item__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.history-item__time {
	font-size: 0.78rem;
	opacity: 0.7;
	flex: 1;
}

.history-item__password {
	display: block;
	margin-bottom: 8px;
	font-size: 0.85rem;
}

.history-empty {
	margin: 14px 0 0;
	opacity: 0.6;
	font-size: 0.88rem;
}

/* ---------- File hash ---------- */

.dropzone {
	border: var(--border-w) dashed var(--ink);
	border-radius: var(--radius);
	background: var(--panel);
	padding: 28px 20px;
	text-align: center;
	cursor: pointer;
	margin-bottom: 16px;
	transition: background 0.1s ease, transform 0.06s ease;
	position: relative;
}

.dropzone:hover,
.dropzone:focus-visible {
	background: var(--yellow);
	outline: none;
}

.dropzone.is-dragover {
	background: var(--blue);
	transform: translate(-2px, -2px);
	box-shadow: var(--shadow-sm);
}

.dropzone__text {
	margin: 0 0 4px;
	font-weight: 800;
}

.dropzone__hint {
	margin: 0;
	font-size: 0.82rem;
	opacity: 0.7;
}

.dropzone__input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
}

.file-info {
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 0.9rem;
}

.progress-bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.progress-bar {
	flex: 1;
	height: 18px;
	border: var(--border-w) solid var(--ink);
	border-radius: 20px;
	background: var(--surface);
	overflow: hidden;
}

.progress-bar__fill {
	height: 100%;
	width: 0%;
	background: var(--green);
	transition: width 0.1s linear;
}

.large-file-warning {
	margin-bottom: 14px;
	padding: 12px 16px;
	background: var(--yellow);
	border: var(--border-w) solid var(--ink);
	border-radius: 6px;
	box-shadow: var(--shadow-sm);
}

.large-file-warning p {
	margin: 0 0 10px;
	font-weight: 700;
}

.large-file-warning__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.checksum-result {
	margin-top: 14px;
	padding: 12px 16px;
	border: var(--border-w) solid var(--ink);
	border-radius: 6px;
	box-shadow: var(--shadow-sm);
	font-weight: 800;
	background: var(--surface);
}

.checksum-result--ok {
	background: var(--green);
}

.checksum-result--fail {
	background: var(--red);
}

/* ---------- Contenido (Guía / FAQ) ---------- */

.prose {
	margin-bottom: 28px;
	max-width: 68ch;
}

.prose:last-child {
	margin-bottom: 0;
}

.prose h3 {
	font-size: 1.05rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--ink);
}

.prose p {
	margin: 0 0 12px;
	line-height: 1.6;
}

.prose ul,
.prose ol {
	margin: 0 0 12px;
	padding-left: 22px;
	line-height: 1.6;
}

.prose li {
	margin-bottom: 6px;
}

.prose code {
	background: var(--panel);
	padding: 1px 6px;
	border: 1px solid var(--ink);
	border-radius: 4px;
	font-size: 0.88em;
}

.prose a {
	color: var(--ink);
	text-decoration-color: var(--pink);
	text-decoration-thickness: 2px;
}

.prose--faq details {
	background: var(--panel);
	border: var(--border-w) solid var(--ink);
	border-radius: 6px;
	box-shadow: var(--shadow-sm);
	padding: 12px 16px;
	margin-bottom: 10px;
}

.prose--faq details[open] {
	background: var(--surface);
}

.prose--faq summary {
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}

.prose--faq summary::-webkit-details-marker {
	display: none;
}

.prose--faq summary::before {
	content: "+ ";
	color: var(--pink);
}

.prose--faq details[open] summary::before {
	content: "− ";
}

.prose--faq details p {
	margin: 10px 0 0;
}

/* ---------- Ad slots ---------- */

.ad-slot {
	background: var(--panel);
	border: var(--border-w) solid var(--ink);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm-onpage);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ad-slot::before {
	content: "Ad";
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	opacity: 0.4;
}

.ad-slot--banner {
	margin-top: 20px;
	min-height: 90px;
}

/* ---------- Footer ---------- */

.site-footer {
	margin-top: 30px;
	text-align: center;
	font-size: 0.82rem;
	color: var(--on-dark);
	opacity: 0.7;
}

/* ---------- Responsive ---------- */

@media (max-width: 560px) {
	.card {
		padding: 16px;
	}

	.site-header__inner {
		padding: 16px 18px;
	}

	.field-row {
		flex-direction: column;
	}
}