/* ─── NDNS "cantina brutal" · capa de primitivas ──────────────────────
   La firma del sistema: borde de tinta de 3px, sombra sólida sin blur,
   radios orgánicos que se alternan, retícula de puntos y trazos de doodle.

   Aquí NO hay hex. Todo cuelga de ndns-tokens.css, que se genera desde
   11_work/ndns/brand.json — cárgalo ANTES que este archivo:

       <link rel="stylesheet" href="/static/brand/ndns-tokens.css">
       <link rel="stylesheet" href="/static/brand/ndns-brutal.css">

   Este archivo es la única implementación del sistema. Los patterns de
   07_tools/koa-base/patterns/ (neo-brutal-surface, price-tag-rotated,
   corner-badge-tilted, doodle-stroke-accent, trifold-print-sheet) son su
   cara-documento y apuntan acá.
   ------------------------------------------------------------------- */

/* ── suelo y papel ───────────────────────────────────────────────────
   `nb-ground` es lo que rodea; `nb-paper` es la superficie sobre la que
   se lee. La diferencia de tamaño de retícula (24 vs 12px) es lo que da
   la sensación de que el papel está encima. */
.nb-ground {
	background-color: var(--ndns-canvas);
	background-image: radial-gradient(var(--nb-dot) 2px, transparent 2px);
	background-size: 24px 24px;
	background-position: 0 0;
	color: var(--ndns-ink);
	-webkit-font-smoothing: antialiased;
}

.nb-paper {
	background-color: var(--ndns-cream);
	background-image: radial-gradient(var(--nb-dot-paper) 1px, transparent 1px);
	background-size: 12px 12px;
}

/* ── bordes y sombras ────────────────────────────────────────────── */
.nb-border {
	border: var(--nb-border);
}
.nb-border-heavy {
	border: var(--nb-border-heavy);
}
.nb-shadow {
	box-shadow: var(--nb-shadow);
}
.nb-shadow-md {
	box-shadow: var(--nb-shadow-md);
}
.nb-shadow-sm {
	box-shadow: var(--nb-shadow-sm);
}

/* ── radios orgánicos ────────────────────────────────────────────────
   Los cuatro son el mismo gesto rotado. Se ALTERNAN entre hermanos: esa
   irregularidad es la firma. Nunca dos veces el mismo radio seguido. */
.nb-r1 {
	border-radius: var(--nb-r1);
}
.nb-r2 {
	border-radius: var(--nb-r2);
}
.nb-r3 {
	border-radius: var(--nb-r3);
}
.nb-r4 {
	border-radius: var(--nb-r4);
}

/* Alternancia automática: pon `nb-r-cycle` en el contenedor y los hijos
   van rotando r1→r2→r3→r4 sin que tengas que numerarlos a mano. Esto es
   lo que evita que una lista generada por un `for` salga toda igual. */
.nb-r-cycle > *:nth-child(4n + 1) {
	border-radius: var(--nb-r1);
}
.nb-r-cycle > *:nth-child(4n + 2) {
	border-radius: var(--nb-r2);
}
.nb-r-cycle > *:nth-child(4n + 3) {
	border-radius: var(--nb-r3);
}
.nb-r-cycle > *:nth-child(4n + 4) {
	border-radius: var(--nb-r4);
}

/* ── inclinación ─────────────────────────────────────────────────────
   Alterna el signo entre hermanos. `nb-tilt-cycle` hace lo mismo que
   `nb-r-cycle` pero con la rotación. */
.nb-tilt-l {
	transform: rotate(-2deg);
}
.nb-tilt-r {
	transform: rotate(2deg);
}
.nb-tilt-sm-l {
	transform: rotate(-1deg);
}
.nb-tilt-sm-r {
	transform: rotate(1deg);
}
.nb-tilt-sheet {
	transform: rotate(0.5deg);
}

.nb-tilt-cycle > *:nth-child(4n + 1) {
	transform: rotate(-1deg);
}
.nb-tilt-cycle > *:nth-child(4n + 2) {
	transform: rotate(2deg);
}
.nb-tilt-cycle > *:nth-child(4n + 3) {
	transform: rotate(1deg);
}
.nb-tilt-cycle > *:nth-child(4n + 4) {
	transform: rotate(-2deg);
}

/* ── tarjeta ─────────────────────────────────────────────────────── */
.nb-card {
	position: relative;
	background: var(--ndns-cream);
	border: var(--nb-border);
	border-radius: var(--nb-r1);
	box-shadow: var(--nb-shadow-md);
	padding: 16px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nb-card--beige {
	background: var(--ndns-beige);
}

/* La tarjeta oscura invierte de verdad: fondo tinta fija, texto crema
   fijo. No voltea con el tema porque su contraste ya está resuelto. */
.nb-card--ink {
	background: var(--ndns-ink-fixed);
	color: var(--ndns-cream-fixed);
	border-color: var(--ndns-ink-fixed);
}

.nb-card:hover {
	transform: rotate(0deg) translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--ndns-ink);
}

/* ── títulos ────────────────────────────────────────────────────────
   Display uppercase, ligeramente rotado, con subrayado grueso. El
   `display: inline-block` es necesario: el subrayado tiene que medir el
   texto, no la columna. */
.nb-title {
	display: inline-block;
	font-family: var(--ndns-font-display);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.85;
	letter-spacing: 0.01em;
	color: var(--ndns-ink);
	border-bottom: var(--nb-border-heavy);
	padding-bottom: 4px;
	transform: rotate(-2deg);
}
.nb-title--terracotta {
	color: var(--ndns-terracotta);
	border-bottom-color: var(--ndns-terracotta);
}
.nb-title--agave {
	color: var(--ndns-agave);
	border-bottom-color: var(--ndns-agave);
}
.nb-title--plain {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Bajada de sección: la etiqueta chica en Space Grotesk que acompaña al
   título display ("Pa' Picar", "Pa' Empedarse", "Club Social"). */
.nb-kicker {
	font-family: var(--ndns-font-heading);
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--ndns-terracotta-deep);
}
.nb-kicker--agave {
	color: var(--ndns-agave-deep);
}

/* ── chip de precio ──────────────────────────────────────────────────
   Va rotado y con sombra chica. El precio es display, no body: es un
   número que se lee como título. */
.nb-price {
	display: inline-block;
	flex-shrink: 0;
	background: var(--ndns-beige);
	border: var(--nb-border);
	border-radius: var(--nb-r1);
	box-shadow: 3px 3px 0 var(--ndns-ink);
	padding: 4px 12px;
	font-family: var(--ndns-font-display);
	font-size: 1.5rem;
	line-height: 1.15;
	color: var(--ndns-terracotta);
	transform: rotate(2deg);
	transition: transform 0.2s ease;
}
.nb-price--agave {
	color: var(--ndns-agave);
}
.nb-card:hover .nb-price,
.nb-item:hover .nb-price {
	transform: rotate(0deg) scale(1.05);
}

/* ── badge de esquina ────────────────────────────────────────────────
   "Favorito", "La Casa", "Pica Rico". Se cuelga del borde de la tarjeta,
   por eso necesita `position: relative` en el padre. Los colores usan
   los tokens *_fill / *_fixed, que NO voltean con el tema: un badge es
   la misma etiqueta impresa en papel y en pantalla. */
.nb-badge {
	position: absolute;
	z-index: 10;
	display: inline-block;
	padding: 2px 8px;
	border: 2px solid var(--ndns-ink);
	border-radius: var(--nb-r3);
	box-shadow: var(--nb-shadow-sm);
	background: var(--ndns-mustard-fill);
	color: var(--ndns-ink-fixed);
	font-family: var(--ndns-font-heading);
	font-weight: 700;
	font-size: 9px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	transform: rotate(-3deg);
}
.nb-badge--agave {
	background: var(--ndns-agave-fill);
	color: var(--ndns-cream-fixed);
	transform: rotate(3deg);
}
.nb-badge--terracotta {
	background: var(--ndns-terracotta-fill);
	color: var(--ndns-cream-fixed);
	transform: rotate(2deg);
}
.nb-badge--cream {
	background: var(--ndns-cream-fixed);
	color: var(--ndns-ink-fixed);
}

/* Posiciones. `top-left` es la de default de los cascarones. */
.nb-badge--tl {
	top: -12px;
	left: 0;
}
.nb-badge--tr {
	top: -12px;
	right: 0;
}
.nb-badge--tl-out {
	top: -12px;
	left: -8px;
}
.nb-badge--tr-out {
	top: -12px;
	right: -8px;
}

/* ── chip de navegación ──────────────────────────────────────────────
   La píldora de categoría de la carta. `--active` invierte a tinta. */
.nb-chip {
	flex: 0 0 auto;
	display: inline-block;
	background: var(--ndns-cream);
	border: var(--nb-border);
	border-radius: var(--nb-r1);
	box-shadow: 3px 3px 0 var(--ndns-ink);
	padding: 8px 20px;
	font-family: var(--ndns-font-heading);
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ndns-ink);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nb-chip--active {
	background: var(--ndns-ink);
	color: var(--ndns-cream);
}
.nb-chip:active {
	transform: translate(3px, 3px);
	box-shadow: 0 0 0 var(--ndns-ink);
}

/* Fila de chips con scroll horizontal y snap. La barra se oculta porque
   el hint "Desliza →" ya comunica que hay más. */
.nb-chip-row {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/* Sin esto, `scroll-snap-align: start` alinea el primer chip al borde
	   del contenedor y se COME el padding lateral: el chip activo aparece
	   recortado contra el filo de la pantalla. El snapport tiene que
	   respetar el mismo padding que la caja. */
	scroll-padding-inline: 16px;
	-ms-overflow-style: none;
	scrollbar-width: none;
	/* el padding vertical deja respirar a la sombra sólida, que no es un
	   blur y sí ocupa espacio real */
	padding: 4px 16px 10px;
}
.nb-chip-row::-webkit-scrollbar {
	display: none;
}
.nb-chip-row > * {
	scroll-snap-align: start;
}

/* ── botón ──────────────────────────────────────────────────────── */
.nb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--ndns-mustard-fill);
	color: var(--ndns-ink-fixed);
	/* Relleno y texto fijos (un botón mostaza es mostaza en los dos temas);
	   borde y sombra con `--ndns-ink`, que SÍ voltea — con ink-fixed la
	   sombra se volvía negro sobre negro y desaparecía en oscuro. */
	border: var(--nb-border);
	border-radius: var(--nb-r2);
	box-shadow: 4px 4px 0 var(--ndns-ink);
	padding: 10px 22px;
	font-family: var(--ndns-font-heading);
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nb-btn--terracotta {
	background: var(--ndns-terracotta-fill);
	color: var(--ndns-cream-fixed);
}
.nb-btn--agave {
	background: var(--ndns-agave-fill);
	color: var(--ndns-cream-fixed);
}
.nb-btn--ghost {
	background: transparent;
	color: var(--ndns-ink);
	border-color: var(--ndns-ink);
	box-shadow: 4px 4px 0 var(--ndns-ink);
}
.nb-btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--ndns-ink);
}
.nb-btn:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--ndns-ink);
}

/* ── barra invertida ─────────────────────────────────────────────────
   El bloque de tinta del pie ("Bebe con moderación" + handle). El relleno
   siempre oscuro, en los dos temas; el FILO no.

   Fijar también el borde a `ink-fixed` (como estaba hasta 2026-08-12)
   incumple la regla 1 del sistema y se nota: sobre el suelo oscuro queda
   negro sobre casi-negro, la barra pierde el contorno y sólo se lee por la
   sombra. Con `--ndns-ink` el borde voltea a crema en oscuro y en claro no
   cambia nada, porque ahí `ink` e `ink-fixed` son el mismo #1A1A1A. */
.nb-inverted {
	background: var(--ndns-ink-fixed);
	color: var(--ndns-cream-fixed);
	border: var(--nb-border);
	border-radius: var(--nb-r2);
	box-shadow: var(--nb-shadow-md);
}
.nb-inverted a {
	color: var(--ndns-mustard-fill);
	text-decoration: none;
}
.nb-inverted a:hover {
	color: var(--ndns-cream-fixed);
}

/* ── item de lista con divisor punteado ──────────────────────────────
   El renglón de menú del cascarón físico: nombre + descripción a la
   izquierda, precio a la derecha, separados por línea punteada. */
.nb-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	/* `padding-block`, no `padding`: en la carta digital una tarjeta ES un
	   item (`nb-card nb-item`), y el atajo le borraba el padding horizontal
	   al `nb-card` dejando el texto pegado al borde de tinta. */
	padding-block: 14px;
	border-bottom: 2px dashed var(--nb-dot-divider, rgba(26, 26, 26, 0.2));
}
.nb-item:last-child {
	border-bottom: 0;
}
.nb-item__name {
	font-family: var(--ndns-font-display);
	font-size: 1.75rem;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ndns-ink);
	margin: 0 0 6px;
	transition: color 0.15s ease;
}
.nb-item__name .nb-qty {
	font-family: var(--ndns-font-body);
	font-size: 1rem;
	font-weight: 400;
	text-transform: none;
	color: var(--ndns-ink);
	opacity: 0.55;
}
.nb-item__desc {
	font-family: var(--ndns-font-body);
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.35;
	/* 0.8 sobre cream da 8.69:1 — el 0.75 del cascarón daba 7.28, ambos
	   pasan AA, pero en impresión el más oscuro aguanta mejor la tinta */
	color: color-mix(in srgb, var(--ndns-ink) 80%, var(--ndns-cream));
	margin: 0;
}
.nb-item:hover .nb-item__name {
	color: var(--ndns-terracotta);
}
.nb-item--agave:hover .nb-item__name {
	color: var(--ndns-agave);
}

[data-theme='dark'] .nb-item {
	--nb-dot-divider: rgba(248, 245, 240, 0.2);
}

/* ── doodles ─────────────────────────────────────────────────────────
   Trazo, nunca relleno. El `currentColor` deja que el contenedor decida
   si el doodle es tinta, terracota o agave. */
.doodle-stroke {
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.nb-doodle {
	color: var(--ndns-ink);
	pointer-events: none;
}
.nb-doodle--terracotta {
	color: var(--ndns-terracotta);
}
.nb-doodle--agave {
	color: var(--ndns-agave);
}
.nb-doodle--mustard {
	color: var(--ndns-mustard);
}

/* Los doodles de fondo son decoración: nunca deben robar el foco ni
   aparecer en un lector de pantalla. */
.nb-doodle-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0.3;
}

/* ── línea de doblez (menú impreso) ─────────────────────────────── */
.nb-fold {
	border-right: 3px dashed rgba(26, 26, 26, 0.2);
}

/* ── accesibilidad ───────────────────────────────────────────────────
   Todo el sistema se apoya en rotaciones. Para quien pidió menos
   movimiento, se enderezan: el borde y la sombra sólida ya cargan la
   personalidad sin necesidad del ángulo. */
@media (prefers-reduced-motion: reduce) {
	.nb-tilt-l,
	.nb-tilt-r,
	.nb-tilt-sm-l,
	.nb-tilt-sm-r,
	.nb-tilt-sheet,
	.nb-tilt-cycle > *,
	.nb-price,
	.nb-badge {
		transform: none;
	}
	.nb-card,
	.nb-price,
	.nb-chip,
	.nb-btn {
		transition: none;
	}
	.nb-card:hover,
	.nb-btn:hover {
		transform: none;
	}
	.nb-card:hover .nb-price,
	.nb-item:hover .nb-price {
		transform: none;
	}
}

/* Foco visible que no pelea con el borde de tinta. */
.nb-chip:focus-visible,
.nb-btn:focus-visible,
.nb-card a:focus-visible {
	outline: 3px solid var(--ndns-terracotta-deep);
	outline-offset: 3px;
}

/* ── impresión ───────────────────────────────────────────────────────
   Se conservan bordes y radios (son la identidad) y se apagan hover y
   transiciones. Las sombras sólidas SÍ imprimen: son tinta plana, no un
   blur, y es lo que hace que el papel se vea como la pantalla. */
@media print {
	.nb-card,
	.nb-price,
	.nb-chip,
	.nb-btn {
		transition: none;
	}
	.nb-card:hover {
		transform: none;
		box-shadow: var(--nb-shadow-md);
	}
	.nb-ground,
	.nb-paper,
	.nb-card,
	.nb-badge,
	.nb-price,
	.nb-inverted {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}