/**
 * La Bitácora — Carta component family (SSOT).
 *
 * Owns the public menu page (Paper 9K8-0 page header, BT9-0 category card and
 * items, file 01KWFDRR5XNBWEYHFQ2KEVV01Y). Consumes canonical --* tokens
 * from windpress/bitacora-theme.css; composes no shell layout classes.
 *
 * Fonts per SSOT: all typography on canonical tokens — display token for the
 * page-header and category-card titles, body token for items (names, prices,
 * descriptions, tags). The Paper mock's Jost was a drafting font, not shipped.
 *
 * Fluid per project rule: clamp()/rem for spacing and type; verified at 393,
 * 768 and 1280 wide.
 */

.signo-carta {
	box-sizing: border-box;
	width: 100%;
	background: var(--color-background-page);
	color: var(--color-text-default);
	font-family: var(--font-body);
	font-size: 0.75rem;             /* 12px base text root */
	line-height: 1rem;              /* 16px */
	-webkit-font-smoothing: antialiased;
	font-synthesis: none;
	overflow-wrap: anywhere;        /* wrap-anywhere */
}

.signo-carta *,
.signo-carta *::before,
.signo-carta *::after {
	box-sizing: border-box;
}

/* ---------- Page header (9K8-0) ---------- */

.signo-carta__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.9375rem, 1.6vw, 1.125rem);      /* 18px */
	padding-top: clamp(2rem, 5vw, 3rem);         /* 48px */
	padding-bottom: clamp(1.75rem, 4vw, 2.25rem); /* 36px */
	padding-inline: clamp(1.25rem, 4vw, 3.75rem); /* page gutter */
	border-bottom: 1px solid var(--color-border-decorative);
	text-align: center;
}

.signo-carta__kicker {
	display: flex;
	align-items: center;
	gap: 0.625rem;                               /* 10px */
	margin: 0;
}

.signo-carta__kicker-rule {
	width: 1.75rem;                              /* 28px */
	height: 1px;
	background: var(--color-action-primary);
}

.signo-carta__kicker-text {
	font-size: 0.8125rem;                        /* 13px */
	line-height: 1.125rem;                       /* 18px */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: var(--font-weight-600);
	color: var(--color-action-primary);
}

.signo-carta__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.125rem, 5.5vw, 3rem);     /* 48px @ desktop */
	line-height: 1.08;                           /* 52px @ 48px */
	letter-spacing: -0.02em;
	font-weight: var(--font-weight-600);
	color: var(--color-text-default);
	text-align: center;
	text-wrap: balance;
}

.signo-carta__subtitle {
	margin: 0;
	max-width: 38rem;                            /* max-w-reading-tablet */
	font-size: 1.0625rem;                        /* 17px */
	line-height: 1.625rem;                       /* 26px */
	color: var(--color-text-secondary);
}

/* ---------- Top-category chip navigation (round 6) ---------- */

.signo-carta__group-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;                                 /* 8px */
	margin-top: 0.25rem;
}

/* Allergen legend below the category chips (2026-09-18) */
.signo-carta__allergens-note {
	margin: var(--spacing-32) auto 0;            /* >= 2rem clear of the chips */
	max-width: 52ch;
	text-align: center;
	font-size: var(--text-small);
	line-height: 1.5;
	color: var(--color-text-muted);
}

.signo-carta__group-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;                         /* 36px desktop */
	padding: 0.3125rem 1rem;                     /* 5px 16px */
	border: 1px solid transparent;
	border-radius: var(--radius-pill, 999px);
	background: var(--color-background-subtle);
	color: var(--color-text-default);
	font-family: inherit;
	font-size: 0.8125rem;                        /* 13px */
	line-height: 1.125rem;                       /* 18px */
	font-weight: var(--font-weight-500);
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.signo-carta__group-chip:hover {
	border-color: var(--color-border-decorative);
}

.signo-carta__group-chip.is-active {
	background: var(--color-background-inverse);
	border-color: var(--color-background-inverse);
	color: var(--color-text-inverse);
}

.signo-carta__group-chip:focus-visible {
	outline: 2px solid var(--color-action-primary);
	outline-offset: 2px;
}

/* Comfortable tap targets on phones */
@media (max-width: 30rem) {
	.signo-carta__group-chip {
		min-height: 2.75rem;                     /* 44px */
	}
}

/* Editor denotation: hidden top category.
   Inactive = outline, no background. Active = grey background (beats active). */
.signo-carta__group-chip.is-admin-hidden {
	background: transparent;
	border-color: currentColor;
	color: var(--color-text-secondary);
}

/* Admin denotation: hidden category tree = light grey card */
.signo-carta__category.is-admin-hidden .signo-carta__card {
	background: var(--color-disabled-background);
}

/* Admin denotation: hidden item = light grey card */
.signo-carta__item.is-admin-hidden {
	background: var(--color-disabled-background);
}

/* Visibility toggles: eye open when visible, eye closed when hidden */
.signo-carta__admin-eye .i-eye-off,
.signo-carta__cats-eye .i-eye-off {
	display: none;
}

.signo-carta__admin-eye.is-hidden .i-eye,
.signo-carta__cats-eye.is-hidden .i-eye {
	display: none;
}

.signo-carta__admin-eye.is-hidden .i-eye-off,
.signo-carta__cats-eye.is-hidden .i-eye-off {
	display: block;
}

/* Item drag handle (reorder inside the subcategory) */
.signo-carta__item.is-editor-draggable {
	cursor: grabbing;
	opacity: 0.5;
}

.signo-carta__item.is-drop-above {
	box-shadow: 0 -2px 0 0 var(--color-action-primary);
}

.signo-carta__admin-grip {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	cursor: grab;
	color: var(--color-text-inverse);
}

.signo-carta__admin-grip:hover {
	color: var(--color-text-inverse);
	opacity: 0.8;
}

/* Schedule clock in the item admin row */
.signo-carta__admin-clock {
	display: inline-flex;
	align-items: center;
	color: var(--color-text-inverse);
}

.signo-carta__admin-clock--off {
	color: #B9B9B5;
}

/* Swap-in-flight guard */
.signo-carta__group-nav.is-busy .signo-carta__group-chip {
	pointer-events: none;
	opacity: 0.6;
}

/* Non-blocking swap-error notice */
.signo-carta__nav-notice {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;                        /* 13px */
	line-height: 1.125rem;                       /* 18px */
	color: var(--color-alert-text-error, #B4483C);
	text-align: center;
}

/* ---------- Body / category cards (BT9-0) ---------- */

.signo-carta__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.5rem);               /* 16px card gap */
	padding: clamp(1.25rem, 3vw, 1.25rem) clamp(1.25rem, 3vw, 2.5rem) 0;
}

.signo-carta__category {
	width: 100%;
	max-width: 45.5rem;                          /* 728px card */
	scroll-margin-top: 10.25rem;                 /* clear sticky shell header */
	scroll-margin-bottom: 10.25rem;
}

/* Category banner (client art above the first subcategory card).
   Fluid per project rule: fills the card column, intrinsic ratio kept
   (the media pipeline normalizes every asset to 1456×834). */
.signo-carta__cat-banner {
	width: 100%;
	max-width: 45.5rem;                          /* matches card width */
	margin: 0;
}

.signo-carta__cat-banner img {
	display: block;
	width: 100%;
	height: auto;
}

.signo-carta__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.75rem, 5vw, 3rem);              /* 48px header→items */
	padding-block: clamp(1rem, 2.5vw, 1rem);     /* 16px */
	padding-inline: clamp(1.25rem, 3vw, 1.5rem); /* 24px */
	border-radius: 0.5rem;                       /* 8px */
	overflow: clip;
	/* Round-4 (C): lighter surface over the page (#FFFDF8 vs page #FAF5F0),
	   per mock — round-3 sweep to background-page erased the card surface. */
	background: var(--color-card);            /* #FFFDF8, = background-surface */
}

/* border overlay (absolute inset, per spec) */
.signo-carta__card::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--color-border-decorative);
	border-radius: 0.5rem;
	pointer-events: none;
}

/* ---------- Category header row ---------- */

.signo-carta__cat-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.signo-carta__cat-title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: clamp(0.75rem, 2vw, 1rem);              /* 16px */
	overflow: clip;
}

.signo-carta__ornament {
	flex: 0 1 5.125rem;                          /* 82px */
	height: 1.5rem;                              /* 24px */
	background-color: var(--color-border-decorative);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	/* 82×24 flourish mask: line into curl */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 24'%3E%3Cpath d='M0 12h52c8 0 10-6 16-6s8 5 8 5-2 5-8 5-10-6-16-6' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 24'%3E%3Cpath d='M0 12h52c8 0 10-6 16-6s8 5 8 5-2 5-8 5-10-6-16-6' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
}

.signo-carta__ornament--right {
	transform: scaleX(-1);
}

.signo-carta__cat-title {
	margin: 0;
	width: max-content;
	max-width: 100%;
	overflow-wrap: normal;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 4vw, 2rem);         /* 24px @ 393 → 32px @ md+, continuous */
	line-height: clamp(2.0625rem, 5.5vw, 2.75rem); /* proportional 33px → 44px */
	/* Title Case display approved (round 6) — no uppercase transform. */
	font-weight: var(--font-weight-500);
	color: var(--color-text-default);
	text-align: center;
}

.signo-carta__cat-teaser {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	margin: 0;
	font-size: var(--text-label, 0.875rem);
	line-height: 1.25rem;                        /* 20px */
	color: var(--color-text-muted);
	text-align: center;
}

.signo-carta__empty {
	margin: 0;
	padding-block: 1.5rem;
	color: var(--color-text-muted);
	text-align: center;
	width: 100%;
}

/* ---------- Items ---------- */

.signo-carta__items {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: 0.625rem;                               /* 10px */
}

.signo-carta__item {
	width: 100%;
	padding-top: 1rem;                           /* 16px */
}

/* Incomplete items (missing title or any price) — editor-only flag:
   light-red surface from the alert token set; they also carry
   is-admin-hidden, so preview mode hides them like hidden items.
   The doubled class keeps the red surface over the grey hidden rule. */
.signo-carta__item.signo-carta__item--incomplete {
	background: var(--color-alert-surface-error);
	border-radius: var(--radius-card);
	padding: 0.75rem 1rem;
}

.signo-carta__item-row {
	display: flex;
	align-items: flex-start;
	width: 100%;
	gap: clamp(0.75rem, 2vw, 1rem);              /* 16px */
}

/* Photo items (Signo, 2026-09-15): two-column top — photo left, title and
   top tags right — while the dotted-line/price row and everything below sit
   full-width at the left margin (they are article-level elements now). */

/* Round 8: fixed 4/3 slot (128×96 md, 96×72 mobile) — any aspect ratio fits */
.signo-carta__item-photo {
	flex: 0 0 auto;
	width: 8rem;                                 /* 128px */
	aspect-ratio: 4 / 3;                         /* 128×96 */
	margin: 0;
	border-radius: 0.5rem;                       /* 8px */
	overflow: clip;
}

.signo-carta__item-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0.5rem;                       /* 8px */
}

/* On narrow phones the photo shrinks rather than squeezing the title column */
@media (max-width: 30rem) {
	.signo-carta__item-photo {
		width: clamp(4.5rem, 24vw, 8rem);
	}
}

/* Photo items keep the same left-margin alignment as plain items at every
   width (the former photo-column indent was removed, Signo 2026-09-15). */

.signo-carta__item-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;                                /* 4px */
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;                         /* round 9: keep stretch */
	justify-content: flex-end;                   /* round 9: bottom-cluster text block */
}

.signo-carta__item-name {
	margin: 0;
	width: 100%;
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 2vw, 1.25rem);   /* 20px */
	line-height: 1.2;                            /* 24px */
	letter-spacing: 0.2px;
	text-transform: uppercase;
	font-weight: var(--font-weight-600);
	color: var(--color-text-default);
}

.signo-carta__item-tags-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem;                                /* 4px */
	margin: 0;
}

/* Top tags (spec: 13/18, brand-primary-300, bare rounded-full) */
.signo-carta__item-tag {
	display: inline-block;
	border-radius: var(--radius-pill, 999px);
	font-size: 0.8125rem;                        /* 13px */
	line-height: 1.125rem;                       /* 18px */
	color: var(--color-brand-primary-300);
}

/* Middle-dot separator between top tags (round-4 E) */
.signo-carta__item-tag-sep {
	font-size: 0.8125rem;                        /* 13px */
	line-height: 1.125rem;                       /* 18px */
	color: var(--color-brand-primary-300);
}

/* Secondary tags bottom row (spec: 11/18, warning amber, subtle bg pill) */
.signo-carta__item-tags-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;                                /* 4px */
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.signo-carta__item-tag-secondary {
	display: inline-block;
	padding: 0.1875rem 0.5rem;                   /* 3px 8px */
	border-radius: var(--radius-pill, 999px);
	background: var(--color-background-subtle);
	border: 1px solid var(--color-border-decorative);
	font-size: 0.6875rem;                        /* 11px */
	line-height: 1.125rem;                       /* 18px */
	color: var(--color-alert-text-warning);
}

.signo-carta__item-price-row {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	margin-block-start: 0.25rem;                 /* full-width row under the photo/head (Signo, 2026-09-15) */
	/* round 9: removed margin-top auto — flex-end packs column to bottom */
}

.signo-carta__leader {
	position: relative;
	flex: 1 1 auto;
	height: 1px;
	min-width: 1rem;
}

.signo-carta__leader::before {
	content: "";
	position: absolute;
	inset-block-start: -0.5px;
	inset-inline: 0;
	border-top: 2px dashed var(--color-border-decorative);
}

.signo-carta__item-price {
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 2vw, 1.25rem);   /* 20px */
	line-height: 1.2;                            /* 24px */
	letter-spacing: 0.2px;
	text-transform: uppercase;
	font-weight: var(--font-weight-500);
	color: var(--color-text-default);
	white-space: nowrap;
}

/* Second format: label + price, no leader; labels share a right-aligned
   column so main and second serving styles align vertically */
/* Serving-style labels align because both price columns share a fixed
   right-aligned width; the dotted line stops 1.5rem before the label. */
.signo-carta__item-second {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 1.5rem;
	width: 100%;
}

.signo-carta__item-price,
.signo-carta__item-second-price {
	min-width: 4rem;
	text-align: right;
}

.signo-carta__item-second-label {
	padding-inline: 0;
	font-size: 0.75rem;                          /* 12px */
	line-height: 0.9375rem;                      /* 15px */
	color: var(--color-text-muted);
}

.signo-carta__item-second-price {
	font-family: var(--font-body);
	font-size: 1rem;                             /* 16px */
	line-height: 1.25rem;                        /* 20px */
	letter-spacing: 0.2px;
	color: var(--color-text-default);
}

.signo-carta__item-desc {
	margin: 0.5rem 0 0;
	font-size: clamp(1rem, 1.6vw, 1.125rem);     /* 18px */
	line-height: 1.4;                            /* 25px */
	color: var(--color-text-secondary);
}

/* ---------- Editor chrome: category admin_order ---------- */

.signo-carta__admin-order {
	position: absolute;
	top: 0.875rem;                               /* 14px */
	right: 0.875rem;                             /* 14px */
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.25rem;                                /* 4px */
	padding: 0.5rem;                             /* 8px */
	border-radius: var(--radius-small, 0.25rem);
	background: var(--color-background-inverse);
}

.signo-carta__admin-box {
	background: #fff;
	border: 1px solid var(--color-border-decorative);
	border-radius: 0.375rem;                     /* 6px */
	color: var(--color-text-default);
	font-family: inherit;
	font-size: var(--text-label, 0.875rem);
	line-height: 1.125rem;                       /* 18px */
	text-align: center;
}

.signo-carta .signo-carta__admin-order-input {
	flex: 0 0 auto;
	width: 3.25rem;                              /* 52px, fixed — no wide empty area */
	min-width: 0;
	max-width: 3.25rem;
	height: 1.875rem;                            /* 30px */
	padding-inline: 0.25rem;
	-moz-appearance: textfield;
	appearance: textfield;
}

.signo-carta .signo-carta__admin-order-input::-webkit-outer-spin-button,
.signo-carta .signo-carta__admin-order-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	display: none;
	margin: 0;
}

.signo-carta .signo-carta__admin-order-input--sm {
	width: 2.125rem;                             /* 34px */
	max-width: 2.125rem;
	height: 1.5rem;                              /* 24px */
	font-size: 0.75rem;                          /* 12px */
}

@media (max-width: 30rem) {
	.signo-carta .signo-carta__admin-order-input {
		width: 2.75rem;
		max-width: 2.75rem;
	}
}

.signo-carta__admin-eye {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.875rem;                             /* 30px */
	height: 1.875rem;                            /* 30px */
	padding: 0;
	cursor: pointer;
	color: var(--color-text-default);
	transition: color 120ms ease, background-color 120ms ease;
}

/* Hidden state = grey icon only; the button background never changes */
.signo-carta__admin-eye.is-hidden {
	color: #9C9C97;
}

.signo-carta__admin-eye:focus-visible,
.signo-carta__admin-order-input:focus-visible,
.signo-carta__admin-availability:focus-visible,
.signo-carta__navbar-select:focus-visible {
	outline: 2px solid var(--color-action-primary);
	outline-offset: 1px;
}

/* ---------- Editor chrome: item admin_row ---------- */

.signo-carta__admin-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5625rem;                              /* 9px */
	width: 100%;
	padding: 0.25rem 0.375rem;                   /* 4px 6px */
	margin-top: 0.5rem;                          /* row sits below the price block (round-4 A) */
	border-radius: 0.1875rem;                    /* 3px */
	min-height: 2rem;                            /* ~32px row (F) */
	background: var(--color-background-inverse);
}

.signo-carta__admin-row-left {
	display: flex;
	align-items: center;
	gap: 0.4375rem;                              /* 7px */
	min-width: 0;
}

.signo-carta__admin-availability {
	width: auto;
	max-width: 9.375rem;                         /* ~150px, compact (F) */
	height: 1.5rem;                              /* 24px control (F) */
	padding-inline: 0.25rem;
	font-size: 0.6875rem;                        /* small text (F) */
	text-overflow: ellipsis;
}

.signo-carta__admin-edit {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;                               /* 6px */
	padding: 0.1875rem 1rem;                     /* 3px 16px */
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--color-border-decorative);
	color: var(--color-text-secondary);
	font-size: 0.75rem;                          /* 12px */
	line-height: 1rem;                           /* 16px */
	font-weight: var(--font-weight-500);
	text-decoration: none;
	white-space: nowrap;
}

.signo-carta__admin-edit:hover {
	color: var(--color-text-default);
	border-color: #B9B9B5;
}

/* Per-control save state (subtle) */

.signo-carta .is-saving {
	border-color: var(--color-action-primary);
}

.signo-carta .is-saved {
	border-color: var(--color-alert-border-success, #7BA05B);
}

.signo-carta .is-error {
	border-color: var(--color-alert-border-error, #B4483C);
	color: var(--color-alert-text-error, #B4483C);
}

/* ---------- Sticky bottom bar ---------- */

.signo-carta__navbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 30;
	display: flex;
	justify-content: center;
	padding: 0.625rem clamp(1.25rem, 4vw, 2rem) calc(0.625rem + env(safe-area-inset-bottom, 0px));
	background: var(--color-background-page);
	border-top: 1px solid var(--color-border-decorative);
}

.signo-carta__navbar-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;                                 /* 8px */
	width: 100%;
	max-width: 45.5rem;                          /* matches card width */
}

/* Allergens hidden state + per-item marker dot. */
.signo-carta--allergens-off .signo-carta__allergens {
	display: none;
}

.signo-carta__allergen-dot {
	display: inline-block;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	margin-inline-start: 0.4rem;
	border-radius: 50%;
	background: #C43D3D;
	vertical-align: super;
}

.signo-carta__navbar-select {
	min-width: 0;
	height: 2.75rem;                             /* 44px touch target */
	padding-inline: 0.75rem;
	border: 1px solid var(--color-border-decorative);
	border-radius: 0.5rem;
	background: #fff;
	color: var(--color-text-default);
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.25rem;
	text-overflow: ellipsis;
}

/* Sub select: the single navigator — bold categories, indented subs. */
.signo-carta__navbar-select--sub option.signo-carta__nav-category {
	font-weight: 600;
}

.signo-carta__navbar-select--sub option.signo-carta__nav-sub {
	padding-inline-start: 1.25rem;
}

.signo-carta__navbar-select--sub {
	flex: 1 1 auto;
	width: auto;
}

/* Preview toggle (round 7, editors only): compact pill like the Edit pill */
.signo-carta__preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 2.75rem;                         /* 44px touch target */
	padding: 0.1875rem 1rem;                     /* 3px 16px */
	border: 1px solid var(--color-border-decorative);
	border-radius: 999px;
	background: #fff;
	color: var(--color-text-secondary);
	font-family: inherit;
	font-size: 0.75rem;                          /* 12px */
	line-height: 1rem;                           /* 16px */
	font-weight: var(--font-weight-500);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.signo-carta__allergens-toggle {
	flex: 0 0 auto;
	height: 2.75rem;                             /* 44px touch target */
	padding: 0 0.875rem;
	border: 1px solid var(--color-border-decorative);
	border-radius: 0.5rem;
	background: #fff;
	color: var(--color-text-secondary);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: var(--font-weight-600);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Enabled: primary treatment, same as the promoted active buttons. */
.signo-carta__allergens-toggle[aria-pressed="true"] {
	background: var(--color-button-primary);
	border-color: var(--color-button-primary);
	color: var(--color-on-button-primary);
}

.signo-carta__preview:hover {
	color: var(--color-text-default);
	border-color: #B9B9B5;
}

.signo-carta__preview[aria-pressed="true"] {
	background: var(--color-background-inverse);
	border-color: var(--color-background-inverse);
	color: var(--color-text-inverse);
}

.signo-carta__preview:focus-visible {
	outline: 2px solid var(--color-action-primary);
	outline-offset: 1px;
}

/* Preview ON: hide all editor chrome — visual only, data/filters unchanged.
   The class lives on the carta root, above the AJAX-swapped container, so it
   survives top-category swaps. */
.signo-carta.is-preview .signo-carta__admin-order,
.signo-carta.is-preview .signo-carta__admin-row {
	display: none;
}

/* Preview = client view: hidden content disappears entirely. */
.signo-carta.is-preview .signo-carta__item.is-admin-hidden,
.signo-carta.is-preview .signo-carta__category.is-admin-hidden,
.signo-carta.is-preview .signo-carta__group-chip.is-admin-hidden {
	display: none;
}

/* Content never hides behind the bar */
.signo-carta__body {
	padding-bottom: 6.5rem;
}

/* ---------- Category manager (editor only) ---------- */
.signo-carta__cats-edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 1.75rem;
	margin-inline-start: 0.25rem;
	border: 1px solid var(--color-base-900);
	border-radius: 999px;
	background: var(--color-base-900);
	color: var(--color-action-on-primary);
	cursor: pointer;
}

.signo-carta__cats-edit:hover {
	border-color: var(--color-base-700);
	background: var(--color-base-700);
	color: var(--color-action-on-primary);
}

.signo-carta__cats-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(21, 21, 39, 0.55);
}

.signo-carta__cats-dialog {
	box-sizing: border-box;
	inline-size: min(30rem, 100%);
	max-block-size: min(80vh, 40rem);
	overflow: auto;
	padding: 1.5rem;
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-feature);
	background: var(--color-background-page);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.signo-carta__cats-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.signo-carta__cats-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-h3);
}

.signo-carta__cats-close {
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-text-secondary);
	cursor: pointer;
	padding: 0.25rem;
}

.signo-carta__cats-error {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-input);
	background: var(--color-error, #b3261e14);
	color: var(--color-error, #b3261e);
	font-size: var(--text-small);
}

.signo-carta__cats-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.signo-carta__cats-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-input);
	background: var(--color-input-background);
}

.signo-carta__cats-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.signo-carta__cats-counts {
	flex: 0 0 auto;
	color: var(--color-text-secondary);
	font-size: var(--text-small);
	white-space: nowrap;
}

.signo-carta__cats-actions {
	flex: 0 0 auto;
	display: inline-flex;
	gap: 0.25rem;
}

.signo-carta__cats-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.75rem;
	block-size: 1.75rem;
	padding: 0 0.375rem;
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-input);
	background: var(--color-background-page);
	color: var(--color-text-secondary);
}

/* Nav-enabled categories (Signo, 2026-09-17): the toggle reads as an
   active primary button while the category is in the navigation menu. */
.signo-carta__cats-btn.is-in-nav {
	background: var(--color-button-primary);
	border-color: var(--color-button-primary);
	color: var(--color-on-button-primary);
	cursor: pointer;
	font-size: 0.875rem;
	line-height: 1;
}

.signo-carta__cats-btn:hover:not(:disabled) {
	border-color: var(--color-action-primary);
	color: var(--color-action-primary);
}

.signo-carta__cats-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Move-to-category picker (Signo, 2026-09-14): list of top categories
   anchored to the row's move button. */
.signo-carta__cats-move-menu {
	position: absolute;
	z-index: 80;
	min-inline-size: 10rem;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	background: var(--color-background-page);
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-input);
	box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 18%);
}

.signo-carta__cats-move-menu button {
	display: block;
	inline-size: 100%;
	padding: 0.5rem 0.75rem;
	border: 0;
	background: none;
	color: var(--color-text-default);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.signo-carta__cats-move-menu button:hover {
	background: var(--color-background-subtle);
	color: var(--color-action-primary);
}

.signo-carta__cats-add {
	display: flex;
	gap: 0.5rem;
}

.signo-carta__cats-input {
	flex: 1 1 auto;
	min-width: 0;
}

.signo-carta__cats-add-btn {
	flex: 0 0 auto;
}

/* The hidden attribute must win over the flex display above. */
.signo-carta__cats-backdrop[hidden] {
	display: none;
}

/* Category modal refinements: grip handle, plus button, drag states. */
.signo-carta__cats-head-actions {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.signo-carta__cats-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border: 1px solid var(--color-input-border);
	border-radius: 999px;
	background: var(--color-background-page);
	color: var(--color-text-secondary);
	cursor: pointer;
}

.signo-carta__cats-plus:hover {
	border-color: var(--color-action-primary);
	color: var(--color-action-primary);
}

.signo-carta__cats-grip {
	display: inline-flex;
	align-items: center;
	cursor: grab;
	color: var(--color-text-secondary);
	touch-action: none;
}

.signo-carta__cats-row.is-dragging {
	opacity: 0.45;
}

.signo-carta__cats-row.is-drop-target {
	border-color: var(--color-action-primary);
	box-shadow: inset 0 0 0 1px var(--color-action-primary);
}

/* Editor view: the active chip uses the secondary action role (purple,
   Signo 2026-09-16) — ink blue stays reserved for admin items (Editar
   buttons), so the navigation doesn't read as admin chrome. */
.signo-carta[data-is-editor="1"] .signo-carta__group-chip.is-active {
	background: var(--color-action-secondary);
	border-color: var(--color-action-secondary);
	color: var(--color-text-inverse);
}

.signo-carta[data-is-editor="1"] .signo-carta__group-chip.is-active.is-admin-hidden {
	background: var(--color-background-hidden);
	border-color: var(--color-background-hidden);
	color: var(--color-text-default);
}

/* Editar is an admin item: dark blue. */
.signo-carta .signo-carta__admin-edit {
	background: var(--color-background-inverse);
	border-color: var(--color-background-inverse);
	color: var(--color-text-inverse);
}

.signo-carta .signo-carta__admin-edit:hover {
	background: var(--color-brand-primary-800);
	border-color: var(--color-brand-primary-800);
	color: var(--color-text-inverse);
}

/* Preview hides every piece of editor chrome, including the pencil. */
.signo-carta.is-preview .signo-carta__cats-edit {
	display: none;
}

/* Subcategory manager pencil (card header) */
.signo-carta__admin-cats-edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	cursor: pointer;
}

/* ---------- Allergens: icon row + legend dialog ---------- */

.signo-carta__allergens {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;                               /* 6px */
	padding: 0;
	margin: 0.5rem 0 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.signo-carta__allergen-icon {
	inline-size: 1.75rem;                        /* 28px */
	block-size: 1.75rem;
	object-fit: contain;
}

.signo-carta__allergens-dialog {
	max-inline-size: 22rem;
}

.signo-carta__allergens-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.signo-carta__allergens-row {
	display: flex;
	align-items: center;
	gap: 0.625rem;                               /* 10px */
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--color-text-default);
}

/* ---------- Menu item photo lightbox (public) ---------- */

.signo-carta__item-photo-zoom {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.signo-carta__item-photo-zoom:focus-visible {
	outline: 2px solid var(--color-action-primary);
	outline-offset: 2px;
}

.signo-carta__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100001;                             /* above cats dialogs (100000) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;                             /* 24px */
	background: rgba(21, 21, 39, 0.85);
}

.signo-carta__lightbox[hidden] {
	display: none;
}

.signo-carta__lightbox-close {
	position: fixed;
	inset-block-start: 1rem;                     /* 16px */
	inset-inline-end: 1rem;                      /* 16px */
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	cursor: pointer;
}

.signo-carta__lightbox-figure {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	max-inline-size: 100%;
}

.signo-carta__lightbox-img {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: calc(100vh - 3rem);          /* viewport minus overlay padding */
	max-block-size: calc(100dvh - 3rem);
	border-radius: 0.5rem;                       /* 8px */
}