/* =========================================================
   Carta Digital - Taperia La Vegana
   Estilo moderno, limpio y minimalista: fondo blanco, texto
   negro, detalles en verde. Mobile-first, pensado para verse
   y navegarse como una app, mostrando el maximo contenido
   posible en pantalla.
   ========================================================= */

:root {
	--cdt-bg: #ffffff;
	--cdt-bg-elevada: #ffffff;
	--cdt-bg-sutil: #f6f7f6;
	--cdt-borde: #e4e4e4;
	--cdt-texto: #171717;
	--cdt-texto-tenue: #6f6f6f;
	--cdt-acento: #2e8b57;
	--cdt-acento-suave: #eaf6f0;
	--cdt-radius: 12px;
	--cdt-radius-sm: 8px;
	--cdt-topbar-h: 50px;
	--cdt-bottomnav-h: 58px;
	--cdt-app-max: 1400px;
	/* La tipografia se sobreescribe desde Ajustes > Carta Digital (CDT_Frontend_Assets). */
	--cdt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Cualquier elemento con el atributo "hidden" debe permanecer siempre oculto,
   incluso si alguna regla de abajo define su propio "display" (modales,
   herramientas del modo camarero, panel de filtros...). Sin esta regla el
   atributo hidden queda anulado y esos bloques se ven todo el rato. */
.cdt-app [hidden] { display: none !important; }

.cdt-app, .cdt-app * {
	font-family: var(--cdt-font) !important;
}

.cdt-app {
	background: var(--cdt-bg);
	color: var(--cdt-texto);
	max-width: var(--cdt-app-max);
	width: 100%;
	margin: 0 auto;
	padding-bottom: calc(var(--cdt-bottomnav-h) + 12px);
	position: relative;
	min-height: 100vh;
	box-sizing: border-box;
}
.cdt-app *, .cdt-app *::before, .cdt-app *::after { box-sizing: border-box; }
.cdt-app h1, .cdt-app h2, .cdt-app h3, .cdt-app h4 { font-weight: 700; color: var(--cdt-texto); }
.cdt-app p, .cdt-app span, .cdt-app button, .cdt-app input, .cdt-app textarea { font-weight: 400; }

/* Iconos de interfaz: SVG incrustado, no dashicons (ver CDT_Shortcode::icon_svg). */
.cdt-icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; }
.cdt-icon svg { width: 100%; height: 100%; display: block; }

/* -------------------- Topbar -------------------- */
.cdt-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	height: var(--cdt-topbar-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--cdt-borde);
}
.cdt-brand-name {
	font-weight: 700 !important;
	letter-spacing: .3px;
	font-size: 16px;
}
.cdt-lang-toggle {
	background: transparent;
	border: 1px solid var(--cdt-acento);
	color: var(--cdt-acento);
	border-radius: 20px;
	padding: 4px 11px;
	font-size: 11.5px;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.cdt-lang-toggle:active { background: var(--cdt-acento); color: #fff; }

/* -------------------- Buscador y filtros -------------------- */
.cdt-search-bar {
	display: flex;
	gap: 8px;
	padding: 8px 14px 4px;
	position: sticky;
	top: var(--cdt-topbar-h);
	background: var(--cdt-bg);
	z-index: 35;
}
.cdt-search-input {
	flex: 1;
	background: var(--cdt-bg-sutil);
	border: 1px solid var(--cdt-borde);
	color: var(--cdt-texto);
	border-radius: var(--cdt-radius-sm);
	padding: 8px 12px;
	font-size: 14px;
}
.cdt-search-input::placeholder { color: var(--cdt-texto-tenue); }
.cdt-search-input:focus { outline: none; border-color: var(--cdt-acento); }

.cdt-filter-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--cdt-bg-sutil);
	border: 1px solid var(--cdt-borde);
	color: var(--cdt-texto);
	border-radius: var(--cdt-radius-sm);
	padding: 0 12px;
	font-size: 12.5px;
	cursor: pointer;
}
.cdt-filter-toggle.is-active { border-color: var(--cdt-acento); color: var(--cdt-acento); background: var(--cdt-acento-suave); }
.cdt-filter-toggle .cdt-icon { width: 14px; height: 14px; }

.cdt-filter-panel {
	margin: 0 14px 8px;
	padding: 12px;
	background: var(--cdt-bg-sutil);
	border: 1px solid var(--cdt-borde);
	border-radius: var(--cdt-radius);
}
.cdt-filter-group h4 { margin: 0 0 8px; font-size: 12.5px; color: var(--cdt-texto-tenue); font-weight: 600 !important; }
.cdt-filter-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.cdt-chip {
	--chip-color: #2e8b57;
	display: flex;
	align-items: center;
	gap: 5px;
	background: #fff;
	border: 1px solid var(--cdt-borde);
	border-radius: 20px;
	padding: 4px 9px;
	font-size: 11.5px;
	cursor: pointer;
}
.cdt-chip input { accent-color: var(--chip-color); }
.cdt-chip-icon { width: 16px; height: 16px; display: inline-flex; }
.cdt-chip-icon .cdt-allergen-badge { width: 16px; height: 16px; font-size: 9px; }
.cdt-btn-clear-filters {
	background: none;
	border: 1px solid var(--cdt-borde);
	color: var(--cdt-texto-tenue);
	border-radius: var(--cdt-radius-sm);
	padding: 7px 13px;
	font-size: 12.5px;
	cursor: pointer;
}

/* -------------------- Tabs de categoria -------------------- */
.cdt-category-tabs {
	position: sticky;
	top: calc(var(--cdt-topbar-h) + 46px);
	z-index: 30;
	display: flex;
	gap: 7px;
	overflow-x: auto;
	padding: 4px 14px 8px;
	background: var(--cdt-bg);
	scrollbar-width: none;
}
.cdt-category-tabs::-webkit-scrollbar { display: none; }
.cdt-tab {
	flex: 0 0 auto;
	background: var(--cdt-bg-sutil);
	border: 1px solid var(--cdt-borde);
	color: var(--cdt-texto-tenue);
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 12.5px;
	font-weight: 600 !important;
	cursor: pointer;
	white-space: nowrap;
}
.cdt-tab.is-active { background: var(--cdt-acento); border-color: var(--cdt-acento); color: #fff; }

/* -------------------- Secciones y platos -------------------- */
.cdt-menu { padding: 2px 14px 6px; }
.cdt-category-section { margin-bottom: 20px; scroll-margin-top: 150px; }
.cdt-category-title { font-size: 19px; margin: 8px 0 2px; letter-spacing: .2px; }
.cdt-category-desc { color: var(--cdt-texto-tenue); font-size: 12.5px; margin: 0 0 8px; }
.cdt-subcategory-title { font-size: 13px; color: var(--cdt-acento); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .6px; }

/* Los platos siempre se muestran uno debajo de otro (lista), tambien en escritorio,
   en modo "tarjetita": fondo blanco, esquinas redondeadas y sombra suave. */
.cdt-dish-grid { display: flex; flex-direction: column; gap: 12px; }

.cdt-dish {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: #fff;
	border-radius: var(--cdt-radius);
	box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
	padding: 12px;
	transition: box-shadow .15s ease, opacity .15s ease;
}
.cdt-dish.is-agotado { opacity: .5; }
.cdt-dish.cdt-highlight-margen { background: #fffaf0; box-shadow: 0 0 0 2px #d4a017; }
.cdt-dish.cdt-just-shared { box-shadow: 0 0 0 3px var(--cdt-acento); }

.cdt-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.cdt-badge {
	font-size: 9.5px;
	font-weight: 700 !important;
	color: #fff;
	background: #333;
	padding: 2px 7px;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.cdt-badge-agotado { background: #8E8E93; }
.cdt-badge-recodia { background: var(--cdt-acento); }

/* Fila principal: foto cuadrada a la izquierda, contenido a la derecha. */
.cdt-dish-main { display: flex; align-items: flex-start; gap: 10px; }

.cdt-dish-media { flex: 0 0 auto; }
.cdt-dish-img, .cdt-dish-img-placeholder {
	width: 74px;
	height: 74px;
	object-fit: cover;
	border-radius: var(--cdt-radius-sm);
	display: block;
	background: linear-gradient(135deg,#eee,#f6f6f6);
}

.cdt-dish-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cdt-dish-title { margin: 0 0 2px; font-size: 14.5px; font-weight: 700 !important; line-height: 1.3; }
.cdt-dish-desc { margin: 0 0 6px; font-size: 12px; color: var(--cdt-texto-tenue); line-height: 1.35; }

/* Debajo de la descripcion, en dos columnas: precio a la izquierda, alergenos +
   compartir a la derecha. */
.cdt-dish-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; }

.cdt-dish-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cdt-dish-allergens { display: flex; gap: 4px; flex-wrap: wrap; }

/* Insignia de alergeno: circulo de color con un emoji o unas letras dentro.
   Solo texto (sin <img> ni <svg>), para que nunca pueda desaparecer. */
.cdt-allergen-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	font-size: 10.5px;
	line-height: 1;
	color: #fff;
	flex: 0 0 auto;
}

.cdt-pairing { font-size: 11.5px; color: var(--cdt-texto-tenue); margin: 4px 0 0; }
.cdt-pairing-label { color: var(--cdt-acento); font-weight: 600 !important; }

/* Precios en texto plano (sin fondo de color), en negrita, columna izquierda
   de la fila inferior (junto a los alergenos a la derecha). */
.cdt-prices { flex: 0 0 auto; display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.cdt-price-line { display: flex; flex-direction: row; align-items: baseline; gap: 4px; line-height: 1.1; }
.cdt-price-label { font-size: 10px; color: var(--cdt-texto-tenue); text-transform: uppercase; letter-spacing: .3px; }
.cdt-price-value { font-size: 14px; font-weight: 700 !important; color: var(--cdt-acento); white-space: nowrap; }
.cdt-prices-unico .cdt-price-value { font-size: 16px; }

/* Boton de compartir: solo icono, junto a los alergenos. */
.cdt-share-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: transparent;
	border: 1px solid var(--cdt-borde);
	color: var(--cdt-texto-tenue);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
}
.cdt-share-btn .cdt-icon { width: 13px; height: 13px; }
.cdt-share-btn:active { border-color: var(--cdt-acento); color: var(--cdt-acento); }

/* Controles exclusivos del modo camarero: fila aparte, solo visible sin el atributo hidden. */
.cdt-staff-controls {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	padding: 8px 4px 2px;
	border-top: 1px dashed #d4a017;
	margin-top: 4px;
}
.cdt-staff-controls button {
	font-size: 10.5px;
	font-weight: 600 !important;
	padding: 4px 8px;
	border-radius: 8px;
	border: 1px solid #d4a017;
	background: #fff8e6;
	color: #8a6d1f;
	cursor: pointer;
}

/* -------------------- Leyenda de alergenos -------------------- */
.cdt-allergen-legend { padding: 16px 14px 8px; border-top: 1px solid var(--cdt-borde); margin-top: 8px; }
.cdt-allergen-legend h2 { font-size: 15px; margin: 0 0 10px; }
.cdt-legend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cdt-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--cdt-texto-tenue); }
.cdt-legend-icon { width: 26px; height: 26px; flex: 0 0 26px; }
.cdt-legend-icon .cdt-allergen-badge { width: 26px; height: 26px; font-size: 14px; }

/* -------------------- Bottom nav estilo app -------------------- */
.cdt-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--cdt-bottomnav-h);
	max-width: var(--cdt-app-max);
	margin: 0 auto;
	background: rgba(255,255,255,.97);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--cdt-borde);
	display: flex;
	z-index: 50;
	box-shadow: 0 -2px 10px rgba(0,0,0,.05);
}
.cdt-bottom-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: var(--cdt-texto-tenue);
	text-decoration: none;
	font-size: 10.5px;
	background: none;
	border: none;
	cursor: pointer;
}
.cdt-bottom-item .cdt-icon { width: 19px; height: 19px; }
.cdt-icon-whatsapp { width: 19px; height: 19px; display: inline-flex; }
.cdt-icon-whatsapp svg { width: 100%; height: 100%; fill: currentColor; }
.cdt-bottom-item:active, .cdt-bottom-item.is-active { color: var(--cdt-acento); }

/* -------------------- Modales (compartir / PIN camarero) -------------------- */
.cdt-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 100;
	align-items: flex-end;
	justify-content: center;
}
.cdt-modal:not([hidden]) { display: flex; }
.cdt-modal-box {
	background: #fff;
	border: 1px solid var(--cdt-borde);
	border-radius: 18px 18px 0 0;
	width: 100%;
	max-width: 480px;
	padding: 20px;
	animation: cdt-slide-up .18s ease;
}
@keyframes cdt-slide-up { from { transform: translateY(30px); opacity:0; } to { transform: translateY(0); opacity:1; } }
.cdt-modal h3 { margin: 0 0 14px; font-size: 15px; }
.cdt-modal-options { display: flex; flex-direction: column; gap: 8px; }
.cdt-modal-options button, .cdt-modal-options a {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--cdt-bg-sutil);
	border: 1px solid var(--cdt-borde);
	color: var(--cdt-texto);
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 13.5px;
	text-decoration: none;
	cursor: pointer;
}
.cdt-modal-close {
	margin-top: 14px;
	width: 100%;
	background: none;
	border: 1px solid var(--cdt-borde);
	color: var(--cdt-texto-tenue);
	border-radius: 10px;
	padding: 10px;
	cursor: pointer;
}
.cdt-pin-input {
	width: 100%;
	font-size: 20px;
	letter-spacing: 8px;
	text-align: center;
	background: var(--cdt-bg-sutil);
	border: 1px solid var(--cdt-borde);
	color: var(--cdt-texto);
	border-radius: 10px;
	padding: 11px;
	margin-bottom: 12px;
}

/* -------------------- Toolbar del modo camarero -------------------- */
.cdt-staff-toolbar {
	display: none;
	position: sticky;
	top: calc(var(--cdt-topbar-h));
	z-index: 45;
	background: #fff8e6;
	border-bottom: 2px solid #d4a017;
	padding: 8px 14px;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.cdt-staff-toolbar:not([hidden]) { display: flex; }
.cdt-staff-toolbar span.cdt-staff-flag { font-size: 11.5px; color: #8a6d1f; font-weight: 700 !important; text-transform: uppercase; }
.cdt-staff-toolbar button {
	background: #d4a017;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 6px 11px;
	font-size: 11.5px;
	font-weight: 700 !important;
	cursor: pointer;
}

.cdt-empty { text-align: center; color: var(--cdt-texto-tenue); padding: 24px 0; }

/* -------------------- Escritorio (pantallas mas grandes) -------------------- */
@media (min-width: 760px) {
	.cdt-legend-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
	.cdt-legend-grid { grid-template-columns: repeat(4, 1fr); }
}

/* En pantallas muy pequenas, la foto se reduce un poco para dejar mas sitio al texto. */
@media (max-width: 380px) {
	.cdt-dish-img, .cdt-dish-img-placeholder { width: 62px; height: 62px; }
	.cdt-dish-bottom-row { gap: 6px; }
}