/**
 * Dashboard Carta de Vinos — Tuétano
 * Modern SPA-style admin panel styles
 *
 * @package TuetanoCartaVinos
 */

/* Asegurar que [hidden] funcione siempre */
[hidden] {
	display: none !important;
}

/* ================================================================
   FUENTES LOCALES
   ================================================================ */
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/newsreader-latin-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/newsreader-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================================
   VARIABLES DE DISEÑO
   ================================================================ */
:root {
	/* Sistema único de 4 variables (Universal en todo el plugin) */
	--tcv-color-fondo: #F5F2ED;
	--tcv-color-fondo-alt: #EDEAE4;
	--tcv-color-acento: #6B5E4C;
	--tcv-color-texto: #2C2C2C;

	/* Sidebar */
	--tcv-d-sidebar-w: 240px;

	/* Tipografía */
	--tcv-d-fuente-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
	--tcv-d-fuente-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Feedback */
	--tcv-d-success: #16a34a;
	--tcv-d-success-bg: #f0fdf4;
	--tcv-d-danger: #dc2626;
	--tcv-d-danger-bg: #fef2f2;
	--tcv-d-warn: #d97706;
	--tcv-d-info: var(--tcv-color-acento);

	/* Forma */
	--tcv-d-radius: 8px;
	--tcv-d-radius-sm: 4px;
	--tcv-d-radius-md: 6px;
	--tcv-d-radius-lg: 12px;

	/* Sombras */
	--tcv-d-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--tcv-d-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
	--tcv-d-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
	--tcv-d-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.25);

	/* Movimiento */
	--tcv-d-ease: cubic-bezier(.4, 0, .2, 1);
	--tcv-d-dur-fast: 150ms;
	--tcv-d-dur: 220ms;
	--tcv-d-dur-slow: 350ms;
}

/* ================================================================
   0. TEMATIZACIÓN DINÁMICA DEL PANEL (Sincronizado con front)
   ================================================================ */

.tcv-admin-app {
	/* Mapeo para componentes modernos (Compatibilidad con layouts SPA) */
	--tcv-d-bg: var(--tcv-color-fondo);
	--tcv-d-surface: var(--tcv-color-fondo-alt);
	--tcv-d-text: var(--tcv-color-texto);
	--tcv-d-text-muted: var(--tcv-color-texto);
	--tcv-d-accent: var(--tcv-color-acento);
	--tcv-d-accent-hover: var(--tcv-color-acento);
	--tcv-d-primary: var(--tcv-color-acento);
	--tcv-d-border: var(--tcv-color-fondo-alt);
}

/* Guarda global: un SVG sin tamaño intrínseco dentro de un botón flex (display:flex)
   colapsa a ancho 0 por su min-width:auto y queda invisible. flex-shrink:0 lo evita en
   todos los iconos del dashboard de una vez. Los iconos tienen tamaños fijos pequeños,
   así que no necesitan encogerse. */
.tcv-admin-app svg {
	flex-shrink: 0;
}

.tcv-admin-app.tema-reserva {
	--tcv-color-fondo: #FDFCF0;
	--tcv-color-fondo-alt: #F5F2DF;
	--tcv-color-acento: #8B0000;
	--tcv-color-texto: #2B2620;
}

.tcv-admin-app.tema-blanco {
	--tcv-color-fondo: #F9FFF5;
	--tcv-color-fondo-alt: #EDF5E8;
	--tcv-color-acento: #4E6E5D;
	--tcv-color-texto: #1F2925;
}

.tcv-admin-app.tema-rosado {
	--tcv-color-fondo: #FFF7F9;
	--tcv-color-fondo-alt: #F9ECEF;
	--tcv-color-acento: #cb7c6b;
	--tcv-color-texto: #614c47;
}

.tcv-admin-app.tema-crianza {
	--tcv-color-fondo: #F9F1EB;
	--tcv-color-fondo-alt: #EFE4DA;
	--tcv-color-acento: #6B4226;
	--tcv-color-texto: #2D1B10;
}

.tcv-admin-app.tema-vendimia {
	--tcv-color-fondo: #320101;
	--tcv-color-fondo-alt: #631b1a;
	--tcv-color-acento: #ff5b89;
	--tcv-color-texto: #ffd6e0;
}

.tcv-admin-app.tema-terraza {
	--tcv-color-fondo: #FDF8F2;
	--tcv-color-fondo-alt: #F5E8D8;
	--tcv-color-acento: #3D5A80;
	--tcv-color-texto: #1D2D44;
}

.tcv-admin-app.tema-luxury {
	--tcv-color-fondo: #fffaec;
	--tcv-color-fondo-alt: #f1da9a;
	--tcv-color-acento: #a18321;
	--tcv-color-texto: #3f3107;
}

.tcv-admin-app.tema-uva-negra {
	--tcv-color-fondo: #190228;
	--tcv-color-fondo-alt: #390251;
	--tcv-color-acento: #baa4df;
	--tcv-color-texto: #f7edfd;
}

.tcv-admin-app.tema-corcho {
	--tcv-color-fondo: #F5FAF5;
	--tcv-color-fondo-alt: #E8F5E9;
	--tcv-color-acento: #2D5A27;
	--tcv-color-texto: #1B2E1B;
}

/* ================================================================
   RESET Y PÁGINA COMPLETA — Solo aplica en páginas del dashboard
   ================================================================ */

/* En el admin de WP, necesitamos respetar el margen del sidebar izquierdo (#adminmenuwrap) 
   No quitamos el margin de #wpcontent para no ocultar la vista detrás del menú negro. */
body.tcv-dashboard-page #wpbody-content {
	padding: 0 !important;
	padding-bottom: 0 !important;
}

body.tcv-dashboard-page #wpfooter {
	display: none !important;
}

body.tcv-dashboard-page .wrap {
	margin: 0 !important;
	max-width: none !important;
}

body.tcv-dashboard-page {
	overflow: hidden !important;
	/* Evitar scroll doble en el body de WP */
}


/* ================================================================
   APP CONTAINER — Layout principal
   ================================================================ */
.tcv-admin-app,
.tcv-admin-app input,
.tcv-admin-app button,
.tcv-admin-app select,
.tcv-admin-app textarea {
	font-family: var(--tcv-d-fuente-serif);
}

/* ================================================================
   STOCK TOGGLE (SWITCH)
   ================================================================ */
.tcv-stock-toggle-wrap {
	display: flex;
	align-items: center;
}

.tcv-stock-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}


.tcv-stock-toggle input {
	display: none;
}

.tcv-stock-toggle__ui {
	width: 42px;
	height: 22px;
	background-color: var(--tcv-color-fondo-alt);
	border-radius: 11px;
	position: relative;
	transition: background var(--tcv-d-dur) var(--tcv-d-ease);
}

.tcv-stock-toggle__ui::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background-color: var(--tcv-color-fondo);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: transform var(--tcv-d-dur) var(--tcv-d-ease);
}

.tcv-stock-toggle input:checked+.tcv-stock-toggle__ui {
	background-color: var(--tcv-d-success);
}

.tcv-stock-toggle input:checked+.tcv-stock-toggle__ui::after {
	transform: translateX(20px);
}

.tcv-stock-toggle__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--tcv-color-texto);
	letter-spacing: -0.01em;
}

.tcv-admin-app {
	display: flex;
	height: calc(100vh - 32px);
	background: var(--tcv-color-fondo-alt);
	color: var(--tcv-color-texto);
	overflow: hidden;
	position: relative;
}

/* Ajuste para la Admin Bar de WP en móviles (más alta) */
@media (max-width: 782px) {
	.tcv-admin-app {
		height: calc(100vh - 46px);
	}
}



/* ================================================================
   SIDEBAR
   ================================================================ */
.tcv-sidebar {
	width: var(--tcv-d-sidebar-w);
	flex-shrink: 0;
	background: var(--tcv-color-fondo-alt);
	color: var(--tcv-color-texto);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.tcv-sidebar-close {
	display: none;
}


/* Marca / Cabecera del sidebar */
.tcv-sidebar__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 24px 20px 20px;
	border-bottom: 1px solid var(--tcv-color-fondo-alt);
}

.tcv-sidebar__brand-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--tcv-color-acento);
	border-radius: 10px;
	color: var(--tcv-color-fondo);
}




.tcv-sidebar__brand-icon svg {
	width: 24px;
	height: 24px;
}


.tcv-sidebar__brand-name {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--tcv-color-texto);
	margin: 0;
	line-height: 1.3;
}

.tcv-sidebar__brand-sub {
	font-size: 11px;
	color: var(--tcv-color-texto);
	margin: 2px 0 0;
	line-height: 1;
}

/* Estilos base para iconos en botones y navegación */
.tcv-btn svg,
.tcv-nav-btn__icon,
.tcv-tab-btn__icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	display: block;
}


/* Navegación */
.tcv-sidebar__nav {
	flex: 1;
	padding: 12px 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow-y: auto;
}

.tcv-nav-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-radius: var(--tcv-d-radius-sm);
	border: none;
	background: transparent;
	color: var(--tcv-color-texto);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition:
		background-color var(--tcv-d-dur-fast) var(--tcv-d-ease),
		color var(--tcv-d-dur-fast) var(--tcv-d-ease);
}

.tcv-nav-btn:hover {
	background-color: var(--tcv-color-texto);
	color: var(--tcv-color-fondo)
}

.tcv-nav-btn--active {
	background: var(--tcv-color-acento) !important;
	color: var(--tcv-color-fondo);
	box-shadow: var(--tcv-d-shadow-sm);
}

.tcv-nav-btn__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	opacity: .7;
}

.tcv-nav-btn--active .tcv-nav-btn__icon {
	opacity: 1;
}


.tcv-nav-btn__badge {
	margin-left: auto;
	background-color: var(--tcv-color-fondo-alt);
	color: var(--tcv-color-acento);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 8px 2px;
	border-radius: 10px;
	line-height: normal;
	border: 1px solid var(--tcv-color-acento);
}


/* Botón Cambiar Portada */
.tcv-sidebar-bg-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: var(--tcv-d-radius-sm);
	color: var(--tcv-color-texto);
	background: none;
	border: 1px dashed var(--tcv-color-fondo-alt);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition:
		background-color var(--tcv-d-dur-fast) var(--tcv-d-ease),
		border-color var(--tcv-d-dur-fast) var(--tcv-d-ease),
		color var(--tcv-d-dur-fast) var(--tcv-d-ease),
		opacity var(--tcv-d-dur-fast) var(--tcv-d-ease);
}

.tcv-sidebar-bg-btn:hover {
	background-color: var(--tcv-color-acento);
	opacity: 0.05;
	color: var(--tcv-color-acento);
	border-color: var(--tcv-color-acento);
}

.tcv-sidebar-bg-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	opacity: .7;
}

/* Pie del sidebar */
.tcv-sidebar__footer {
	padding: 16px 20px;
	border-top: 1px solid var(--tcv-color-fondo-alt);
	display: flex;
	flex-direction: column;
	gap: 8px;
}


.tcv-logout-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	margin: 0 -4px;
	border-radius: var(--tcv-d-radius-sm);
	color: var(--tcv-color-texto);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition:
		background-color var(--tcv-d-dur-fast) var(--tcv-d-ease),
		color var(--tcv-d-dur-fast) var(--tcv-d-ease);
}

.tcv-logout-btn:hover {
	background-color: var(--tcv-d-danger-bg);
	/* danger-bg */
	color: var(--tcv-d-danger);
}




.tcv-logout-btn svg {
	width: 18px;
	height: 18px;
	opacity: .6;
	flex-shrink: 0;
}

.tcv-logout-btn:hover svg {
	opacity: 1;
}

.tcv-sidebar__version {
	font-size: 10px;
	color: var(--tcv-color-texto);
	padding: 0 8px;
	font-weight: 500;
}



/* ================================================================
   CONTENIDO PRINCIPAL
   ================================================================ */
.tcv-main {
	flex: 1;
	height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	background-color: var(--tcv-color-fondo);
}

/* ================================================================
   VISTAS
   ================================================================ */
.tcv-view {
	/* Eliminamos flex: 1 para que no fuerce altura innecesaria si hay poco contenido */
	padding: 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	animation: tcv-fade-in var(--tcv-d-dur) var(--tcv-d-ease);
}

@keyframes tcv-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Cabecera de vista */
.tcv-view__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.tcv-view__title {
	font-family: var(--tcv-d-fuente-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--tcv-color-texto);
	margin: 0 0 4px;
	line-height: 1.2;
}

.tcv-view__subtitle {
	font-size: 13px;
	color: var(--tcv-color-texto);
	margin: 0;
}

.tcv-view__header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* ================================================================
   CONTROLES DE FILTRO Y BÚSQUEDA
   ================================================================ */
.tcv-filter-group {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1;
}

@media (min-width: 1024px) {
	.tcv-filter-group {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.tcv-search-wrap {
		grid-column: span 3;
	}
}

.tcv-search-wrap {
	position: relative;
	width: 100%;
	min-width: 200px;
}


.tcv-search-icon {
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	color: var(--tcv-color-texto);
	pointer-events: none;
}

/* ================================================================
   ELEMENTOS DE FORMULARIO BASE
   ================================================================ */
.tcv-input,
.tcv-select,
.tcv-textarea {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--tcv-color-acento);
	border-radius: var(--tcv-d-radius-sm);
	background: var(--tcv-color-fondo);
	color: var(--tcv-color-texto);
	font-family: var(--tcv-d-fuente-serif);
	font-size: 15px;
	line-height: 1.5;
	transition:
		border-color var(--tcv-d-dur-fast) var(--tcv-d-ease),
		box-shadow var(--tcv-d-dur-fast) var(--tcv-d-ease);
	box-sizing: border-box;
	appearance: none;
}


.tcv-input:focus,
.tcv-select:focus,
.tcv-textarea:focus {
	outline: none;
	border-color: var(--tcv-color-acento);
	box-shadow: 1px 2px 7px var(--tcv-color-acento);
	background-color: var(--tcv-color-fondo);
}


.tcv-input--sm,
.tcv-select--sm {
	padding: 6px 10px;
	font-size: 13px;
}

.tcv-input--search {
	padding-left: 30px;
}

.tcv-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px;
	padding-right: 30px;
}

.tcv-select[multiple] {
	background-image: none;
	padding: 8px;
	height: auto;
	min-height: 80px;
}

.tcv-textarea {
	resize: vertical;
	min-height: 80px;
}

/* ─── Quill: wrapper y overrides de estilo ─── */
.tcv-quill-wrap {
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow 0.15s;
}

.tcv-quill-wrap:focus-within {
	box-shadow: 1px 2px 7px var(--tcv-color-acento);
}

/* Toolbar */
.tcv-quill-wrap .ql-toolbar.ql-snow {
	border: 1px solid var(--tcv-d-border);
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	background: var(--tcv-d-bg-secondary, #f5f5f5);
	padding: 4px 8px;
	font-family: inherit;
}

.tcv-quill-wrap .ql-toolbar.ql-snow .ql-formats {
	margin-right: 8px;
}

.tcv-quill-wrap .ql-toolbar.ql-snow button {
	width: 26px;
	height: 26px;
	padding: 3px;
	border-radius: 4px;
	color: var(--tcv-d-text);
}

.tcv-quill-wrap .ql-toolbar.ql-snow button:hover,
.tcv-quill-wrap .ql-toolbar.ql-snow button.ql-active {
	background: var(--tcv-color-acento-light, rgba(120, 80, 50, 0.12));
	color: var(--tcv-color-acento);
}

.tcv-quill-wrap .ql-toolbar.ql-snow button .ql-stroke {
	stroke: currentColor;
}

.tcv-quill-wrap .ql-toolbar.ql-snow button .ql-fill {
	fill: currentColor;
}

/* Editor area */
.tcv-quill-wrap .ql-container.ql-snow {
	border: 1px solid var(--tcv-d-border);
	border-radius: 0 0 6px 6px;
	background: var(--tcv-d-bg-input, #fff);
	font-family: inherit;
	font-size: 0.9rem;
}

.tcv-quill-wrap .ql-editor {
	min-height: 90px;
	max-height: 260px;
	padding: 10px 14px;
	color: var(--tcv-d-text);
	line-height: 1.55;
}

.tcv-quill-wrap .ql-editor.ql-blank::before {
	color: var(--tcv-d-text-muted);
	font-style: normal;
	left: 14px;
}

/* ================================================================
   BOTONES
   ================================================================ */
.tcv-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--tcv-d-radius-sm);
	border: 1.5px solid transparent;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.4;
	transition:
		background var(--tcv-d-dur-fast) var(--tcv-d-ease),
		border-color var(--tcv-d-dur-fast) var(--tcv-d-ease),
		box-shadow var(--tcv-d-dur-fast) var(--tcv-d-ease),
		color var(--tcv-d-dur-fast) var(--tcv-d-ease);
	white-space: nowrap;
	user-select: none;
}

.tcv-btn svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.tcv-btn:focus-visible {
	outline: 2px solid var(--tcv-color-acento);
	outline-offset: 2px;
}

/* Primario */
.tcv-btn--primary {
	background-color: var(--tcv-color-acento);
	color: var(--tcv-color-fondo);
	border-color: var(--tcv-color-acento);
}

.tcv-btn--primary:hover {
	background: var(--tcv-color-acento);
	border-color: var(--tcv-color-acento);
}

/* Secundario */
.tcv-btn--secondary {
	background: var(--tcv-color-fondo);
	color: var(--tcv-color-texto);
	border-color: var(--tcv-color-fondo-alt);
}

.tcv-btn--secondary:hover {
	border-color: var(--tcv-color-acento);
	color: var(--tcv-color-acento);
}

/* Ghost */
.tcv-btn--ghost {
	background: transparent;
	color: var(--tcv-color-texto);
	border-color: transparent;
}

.tcv-btn--ghost:hover {
	background: var(--tcv-color-fondo-alt);
	color: var(--tcv-color-texto);
}

/* Peligro ghost */
.tcv-btn--danger-ghost {
	color: var(--tcv-d-danger);
}

.tcv-btn--danger-ghost:hover {
	background: var(--tcv-d-danger-bg);
}

/* Pequeño */
.tcv-btn--sm {
	padding: 5px 10px;
	font-size: 12.5px;
}

/* Icono solo */
.tcv-btn--icon {
	padding: 6px;
	border-radius: var(--tcv-d-radius-sm);
}

/* Cargando */
.tcv-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* ================================================================
   ESTADOS — Cargando / Vacío
   ================================================================ */
.tcv-state-loading,
.tcv-state-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 60px 20px;
	text-align: center;
	color: var(--tcv-color-texto);
}

.tcv-state-empty__icon {
	color: var(--tcv-color-fondo-alt);
	opacity: .5;
}

.tcv-state-empty__icon svg {
	width: 64px;
	height: 64px;
	display: block;
}


.tcv-state-empty__text {
	font-size: 15px;
	color: var(--tcv-color-texto);
	margin: 0;
}

/* Spinner de carga */
.tcv-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--tcv-color-fondo-alt);
	border-top-color: var(--tcv-color-acento);
	border-radius: 50%;
	animation: tcv-spin .75s linear infinite;
}

.tcv-btn-spinner {
	width: 14px;
	height: 14px;
	animation: tcv-spin .75s linear infinite;
}

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

/* ================================================================
   GRID DE TARJETAS DE VINOS
   ================================================================ */
.tcv-wine-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));

	gap: 14px;
	align-content: start;
}

/* Tarjeta de vino */
.tcv-wine-card {
	display: flex;
	background: var(--tcv-color-fondo);
	border: 2px solid var(--tcv-color-fondo-alt);
	border-radius: var(--tcv-d-radius);
	overflow: hidden;
	position: relative;
	height: 160px;
	transition:
		box-shadow var(--tcv-d-dur-fast) var(--tcv-d-ease),
		border-color var(--tcv-d-dur-fast) var(--tcv-d-ease),
		transform var(--tcv-d-dur-fast) var(--tcv-d-ease);
	/* El cursor de arrastre vive ahora en el tirador (.tcv-wine-card__drag-handle),
	   no en toda la tarjeta, para no confundir clic con reordenamiento. */
	animation: tcv-card-in var(--tcv-d-dur) var(--tcv-d-ease);
}

/* Tirador de arrastre: única zona que inicia el reordenamiento (espejo del de platos). */
.tcv-wine-card__drag-handle {
	width: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	touch-action: none;
	background: rgba(0, 0, 0, 0.01);
	border-right: 1px solid rgba(0, 0, 0, 0.03);
	color: var(--tcv-d-text-muted);
	opacity: 0.6;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	transition:
		background var(--tcv-d-dur) var(--tcv-d-ease),
		color var(--tcv-d-dur) var(--tcv-d-ease);
}

.tcv-wine-card__drag-handle:hover {
	background: rgba(0, 0, 0, 0.03);
	color: var(--tcv-color-acento);
	opacity: 1;
}

.tcv-wine-card__drag-handle:active {
	cursor: grabbing;
}

.tcv-wine-card__drag-handle svg {
	width: 18px;
	height: 18px;
}



@keyframes tcv-card-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.tcv-wine-card:hover {
	box-shadow: var(--tcv-d-shadow);
	border-color: var(--tcv-color-fondo-alt);
}

/* Prevenir menú contextual en long-press (móvil) en elementos arrastrables */
.tcv-wine-card,
.tcv-term-item,
.tcv-tax-carta-box__header,
.tcv-tax-category-item {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.tcv-dish-card__drag-handle {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Estado de drag */
/* Estado de drag: el hueco en la lista (.sortable-ghost) */
.sortable-ghost {
	opacity: 0.2 !important;
	border: 1.5px solid var(--tcv-color-fondo-alt) !important;
	box-shadow: none !important;
	background: var(--tcv-color-fondo-alt) !important;
	border-radius: var(--tcv-d-radius);
	animation: none !important;
	transition: none !important;
}

/* Estado de selección (clic inicial) */
.sortable-chosen {
	cursor: grabbing;
	opacity: 0.4;
	animation: none !important;
}

/* La tarjeta que vuela con el ratón (.sortable-drag) */
.sortable-drag {
	opacity: 1 !important;
	box-shadow: var(--tcv-d-shadow-xl) !important;
	z-index: 100000;
	cursor: grabbing !important;
	animation: none !important;
	transition: none !important;
}





/* Tarjeta agotada: diseño más atenuado para mejor UX de stock */
.tcv-wine-card--exhausted {
	opacity: 0.4;
	transition: opacity var(--tcv-d-dur) var(--tcv-d-ease);
}

.tcv-wine-card--exhausted:hover {
	opacity: 0.7;
	/* Permitimos recuperar visibilidad al pasar el ratón para facilitar la edición */
}

.tcv-wine-card--exhausted img {
	filter: grayscale(1);
}


.tcv-wine-card__exhausted-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--tcv-d-danger);
	color: var(--tcv-color-fondo);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--tcv-d-radius-sm);
	letter-spacing: 0.05em;
	z-index: 10;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tcv-wine-card__media {
	width: 130px;
	height: 100%;
	position: relative;
	flex-shrink: 0;
	background: var(--tcv-color-fondo-alt);
}

.tcv-wine-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 70%;
	display: block;
}


.tcv-wine-card__img-placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--tcv-color-fondo-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
}

.tcv-wine-card__main {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16px;
	min-width: 0;
	/* Para evitar desbordamiento del título */
}

/* Cuerpo de la tarjeta */
.tcv-wine-card__body {
	flex: 1;
	padding: 0;
}

.tcv-wine-card__title {
	font-family: var(--tcv-d-fuente-serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--tcv-color-texto);
	margin: 0 0 4px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.tcv-wine-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 6px;
}

.tcv-wine-card__tag {
	font-size: 11px;
	padding: 2px 7px;
	border-radius: 20px;
	background-color: var(--tcv-color-fondo-alt);
	color: var(--tcv-color-acento);
	font-weight: 500;
	line-height: 1.4;
}

.tcv-wine-card__prices {
	display: flex;
	gap: 10px;
	font-size: 12.5px;
	color: var(--tcv-color-texto);
	margin-bottom: 4px;
}

.tcv-wine-card__price {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
}

/* Pie de la tarjeta: acciones */
.tcv-wine-card__actions {
	display: flex;
	gap: 8px;
	padding-top: 12px;
	margin-top: auto;
}


.tcv-wine-card__edit {
	flex: 1;
	justify-content: center;
	font-weight: 600;
}


/* ================================================================
   PESTAÑAS DE TAXONOMÍAS
   ================================================================ */
.tcv-tax-tabs {
	display: flex;
	gap: 2px;
	background: var(--tcv-color-fondo-alt);
	padding: 3px;
	border-radius: var(--tcv-d-radius-sm);
	width: fit-content;
	flex-wrap: wrap;
}

.tcv-tab-btn {
	padding: 6px 14px;
	border: none;
	border-radius: 5px;
	background: transparent;
	color: var(--tcv-color-texto);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition:
		background var(--tcv-d-dur-fast) var(--tcv-d-ease),
		color var(--tcv-d-dur-fast) var(--tcv-d-ease),
		box-shadow var(--tcv-d-dur-fast) var(--tcv-d-ease);
}

.tcv-tab-btn:hover {
	color: var(--tcv-color-texto);
	background-color: var(--tcv-color-fondo-alt);
}

.tcv-tab-btn--active {
	background: var(--tcv-color-fondo) !important;
	color: var(--tcv-color-acento) !important;
	font-weight: 600;
	box-shadow: var(--tcv-d-shadow-sm);
}

/* Panel de la taxonomía activa */
.tcv-tax-panel {
	background: var(--tcv-color-fondo);
	border: 1.5px solid var(--tcv-color-fondo-alt);
	border-radius: var(--tcv-d-radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Fila para añadir término */
.tcv-tax-add-row {
	display: flex;
	gap: 10px;
	align-items: center;
}

.tcv-tax-add-row .tcv-input {
	flex: 1;
	max-width: 380px;
}

/* Lista de términos */
.tcv-term-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tcv-term-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1.5px solid var(--tcv-color-fondo-alt);
	border-radius: var(--tcv-d-radius-sm);
	background: var(--tcv-color-fondo-alt);
	transition: border-color var(--tcv-d-dur-fast) var(--tcv-d-ease);
	animation: tcv-card-in var(--tcv-d-dur) var(--tcv-d-ease);
}

.tcv-term-item:hover {
	border-color: var(--tcv-color-fondo-alt);
}

.tcv-term-item__view,
.tcv-term-item__edit {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-height: 28px;
}

.tcv-term-item__drag {
	cursor: grab;
	color: var(--tcv-color-texto);
	display: flex;
	align-items: center;
	opacity: .4;
	transition: opacity var(--tcv-d-dur-fast) var(--tcv-d-ease);
	margin-left: -4px;
}

.tcv-term-item:hover .tcv-term-item__drag {
	opacity: 1;
}

.tcv-term-item__drag svg {
	width: 18px;
	height: 18px;
}


.tcv-term-item__name {
	flex: 1;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--tcv-color-texto);
}

.tcv-term-edit-input {
	flex: 1;
	height: 32px !important;
}


.tcv-term-item__count {
	font-size: 12px;
	color: var(--tcv-color-texto);
	background: var(--tcv-color-fondo);
	border: 1px solid var(--tcv-color-fondo-alt);
	padding: 1px 7px;
	border-radius: 10px;
}

/* ================================================================
   MODAL
   ================================================================ */
.tcv-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: tcv-overlay-in var(--tcv-d-dur-fast) var(--tcv-d-ease);
}

@keyframes tcv-overlay-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.tcv-modal {
	background: var(--tcv-color-fondo);
	border-radius: var(--tcv-d-radius-lg);
	width: 100%;
	max-width: 900px;
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	box-shadow: var(--tcv-d-shadow-xl);
	animation: tcv-modal-in var(--tcv-d-dur) var(--tcv-d-ease);
	overflow: hidden;
}

.tcv-modal--sm {
	max-width: 450px;
}


@keyframes tcv-modal-in {
	from {
		opacity: 0;
		transform: scale(.96) translateY(10px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Cabecera del modal */
.tcv-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 32px 20px;
	border-bottom: 1px solid var(--tcv-color-fondo-alt);
	flex-shrink: 0;
}

.tcv-modal__title {
	font-family: var(--tcv-d-fuente-serif);
	font-size: 24px;
	font-weight: 700;
	color: var(--tcv-color-texto);
	margin: 0;
}


.tcv-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--tcv-d-radius-sm);
	border: none;
	background: transparent;
	color: var(--tcv-color-texto);
	cursor: pointer;
	transition:
		background var(--tcv-d-dur-fast) var(--tcv-d-ease),
		color var(--tcv-d-dur-fast) var(--tcv-d-ease);
}

.tcv-modal__close svg {
	width: 16px;
	height: 16px;
}

.tcv-modal__close:hover {
	background: var(--tcv-color-fondo-alt);
	color: var(--tcv-color-texto);
}

/* Cuerpo del modal */
.tcv-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
}

/* Pie del modal */
.tcv-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 32px;
	border-top: 1px solid var(--tcv-color-fondo-alt);
	flex-shrink: 0;
	background: var(--tcv-color-fondo-alt);
}

.tcv-modal__footer-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}





/* ================================================================
   FORMULARIO DEL MODAL
   ================================================================ */
.tcv-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

@media (max-width: 680px) {
	.tcv-form-grid {
		grid-template-columns: 1fr;
	}
}

.tcv-form-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tcv-form-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tcv-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.tcv-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--tcv-color-acento);
	text-transform: uppercase;
	letter-spacing: .06em;
	display: block;
	margin-bottom: 4px;
}


.tcv-label--required::after {
	content: ' *';
	color: var(--tcv-d-danger);
}

.tcv-field-hint {
	font-size: 11.5px;
	color: var(--tcv-color-texto);
	margin: 0;
}

.tcv-field-error {
	font-size: 12px;
	color: var(--tcv-d-danger);
	font-weight: 500;
}

.tcv-char-count {
	text-align: right;
}

/* Selector de imagen */
.tcv-img-picker {
	display: flex;
	gap: 20px;
	align-items: center;
	background: var(--tcv-color-fondo-alt);
	padding: 16px;
	border-radius: var(--tcv-d-radius-md);
	border: 1px dashed var(--tcv-color-acento);
	transition: border-color var(--tcv-d-dur) var(--tcv-d-ease), background var(--tcv-d-dur) var(--tcv-d-ease);
}

.tcv-img-picker:hover {
	background: rgba(0, 0, 0, 0.02);
}

.tcv-img-picker__preview {
	width: 90px;
	height: 90px;
	border-radius: var(--tcv-d-radius-sm);
	overflow: hidden;
	background: var(--tcv-color-fondo);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--tcv-d-shadow-sm);
	border: 1px solid var(--tcv-d-border);
	flex-shrink: 0;
}

.tcv-img-picker__preview img,
.tcv-img-picker__preview video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcv-img-picker__placeholder {
	font-size: 28px;
	opacity: .5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tcv-img-picker__placeholder svg {
	width: 30px;
	height: 30px;
}

/* Vista previa de vídeo con póster + botón de reproducir */
.tcv-img-picker__video {
	position: relative;
	width: 100%;
	height: 100%;
}

.tcv-img-picker__video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tcv-img-picker__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}

.tcv-img-picker__play:hover {
	background: rgba(0, 0, 0, 0.72);
	transform: scale(1.08);
}

.tcv-img-picker__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ================================================================
   TOASTS
   ================================================================ */
.tcv-toast-zone {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 200000;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
	max-width: 340px;
}

.tcv-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: var(--tcv-d-radius);
	background: var(--tcv-color-texto);
	color: var(--tcv-color-fondo);
	font-size: 13.5px;
	font-weight: 500;
	box-shadow: var(--tcv-d-shadow-lg);
	pointer-events: all;
	animation: tcv-toast-in var(--tcv-d-dur) var(--tcv-d-ease);
}

@keyframes tcv-toast-in {
	from {
		opacity: 0;
		transform: translateX(100%) scale(.9);
	}

	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

.tcv-toast--out {
	animation: tcv-toast-out var(--tcv-d-dur) var(--tcv-d-ease) forwards;
}

@keyframes tcv-toast-out {
	from {
		opacity: 1;
		transform: translateX(0) scale(1);
	}

	to {
		opacity: 0;
		transform: translateX(100%) scale(.9);
	}
}

.tcv-toast--success {
	background: var(--tcv-d-success);
}

.tcv-toast--error {
	background: var(--tcv-d-danger);
}

.tcv-toast--info {
	background: var(--tcv-color-acento);
}

.tcv-toast__icon {
	font-size: 16px;
	flex-shrink: 0;
	line-height: 1;
}

/* ================================================================
   RESPONSIVE: Tablet / Móvil
   ================================================================ */
@media (max-width: 900px) {
	:root {
		--tcv-d-sidebar-w: 200px;
	}

	.tcv-view {
		padding: 20px 20px;
	}
}

/* ================================================================
   MOBILE NAVIGATION (HAMBURGER)
   ================================================================ */

.tcv-mobile-header {
	display: none;
}

/* El tema (GeneratePress) pinta TODOS los <button> con color #fff. El icono del menú
   hamburguesa heredaba ese blanco y quedaba invisible sobre la cabecera clara. Fijamos su
   color aquí —fuera del media query y con prioridad— para que SIEMPRE contraste con la
   cabecera (var(--tcv-color-fondo)). El SVG usa stroke="currentColor", así que sigue este color. */
.tcv-mobile-toggle {
	color: var(--tcv-color-texto) !important;
}

/* El SVG es un flex item dentro del botón (display:flex). Sin tamaño intrínseco, su
   min-width:auto resuelve a 0 y el icono colapsa a ancho 0 (invisible) aunque el color sea
   correcto. flex-shrink:0 lo impide; width/height le dan tamaño (y también van como atributos
   en la plantilla). Fuera del media query para que siempre aplique cuando el header se muestra. */
.tcv-mobile-toggle svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.tcv-sidebar-overlay {
	display: none;
}

@media (max-width: 720px) {
	.tcv-admin-app {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}

	.tcv-mobile-header {
		display: flex;
		align-items: center;
		padding: 0 16px;
		height: 56px;
		background-color: var(--tcv-color-fondo);
		border-bottom: 1px solid var(--tcv-color-fondo-alt);
		flex-shrink: 0;
		z-index: 100;
		gap: 12px;
	}


	.tcv-mobile-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: none;
		background: transparent;
		cursor: pointer;
		margin-right: -8px;
	}


	.tcv-mobile-toggle svg {
		width: 24px;
		height: 24px;
	}


	.tcv-mobile-header__brand {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: 1;
	}

	.tcv-mobile-header__brand .tcv-sidebar__brand-icon {
		width: 38px;
		height: 38px;
		margin: 0;
		background-color: var(--tcv-color-acento);
		color: var(--tcv-color-fondo);
		border-radius: var(--tcv-d-radius);
	}

	.tcv-mobile-header__brand .tcv-sidebar__brand-icon svg {
		width: 22px;
		height: 22px;
	}

	.tcv-mobile-header__brand-text {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}

	.tcv-mobile-header__name {
		font-family: var(--tcv-d-fuente-serif);
		font-size: 15px;
		font-weight: 700;
		color: var(--tcv-color-acento);
	}

	.tcv-mobile-header__sub {
		font-size: 11px;
		color: var(--tcv-color-texto);
		font-weight: 500;
	}


	.tcv-sidebar {
		position: fixed;
		top: 0;
		left: -280px;
		width: 260px;
		height: 100vh;
		z-index: 100000;
		transition: transform var(--tcv-d-dur-slow) var(--tcv-d-ease);
		box-shadow: 10px 0 25px rgba(0, 0, 0, 0.1);
	}

	.tcv-sidebar--open {
		transform: translateX(280px);
	}

	.tcv-sidebar-close {
		display: flex;
		position: absolute;
		top: 15px;
		right: 15px;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		background: var(--tcv-color-acento);
		border: none;
		border-radius: 10%;
		color: var(--tcv-color-fondo);
		cursor: pointer;
		z-index: 10;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
		transition: transform var(--tcv-d-dur-fast) var(--tcv-d-ease);
	}

	.tcv-sidebar-close:active {
		transform: scale(0.9);
	}

	.tcv-sidebar-close svg {
		width: 24px;
		height: 24px;
		/* Evita el colapso a ancho 0 del SVG como flex item (igual que en el hamburguesa). */
		flex-shrink: 0;
	}




	.tcv-sidebar-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(2px);
		z-index: 150;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--tcv-d-dur-slow) var(--tcv-d-ease);
	}

	.tcv-admin-app.tcv-mobile-menu-active .tcv-sidebar-overlay {
		opacity: 1;
		pointer-events: all;
	}

	.tcv-main {
		flex: 1;
		overflow-y: auto;
	}

	.tcv-view {
		padding: 16px;
	}


	.tcv-wine-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
}

/* La cuadrícula de vinos colapsa a 1 columna antes (a más anchura): por debajo de 600px,
   dos columnas dejan cada tarjeta demasiado estrecha (imagen + datos). */
@media (max-width: 600px) {
	.tcv-wine-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.tcv-mobile-header {
		top: 46px;
		/* WP Bar en móvil pequeño */
	}

	.tcv-admin-app {
		height: 100vh;
	}

	.tcv-view__header {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.tcv-form-row {
		grid-template-columns: 1fr;
	}

	.tcv-modal__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 20px;
	}

	.tcv-modal__footer-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.tcv-modal__footer-actions #tcv-btn-cancel {
		order: 2;
	}

	.tcv-modal__footer-actions #tcv-btn-save-wine {
		order: 1;
		margin-bottom: 12px;
	}
}



/* ================================================================
   LOGIN DEL FRONTEND
   ================================================================ */

.tcv-login-app {
	justify-content: center;
	align-items: center;
	background: var(--tcv-color-fondo-alt);
}

.tcv-login-container {
	width: 100%;
	max-width: 400px;
	padding: 20px;
}

.tcv-login-box {
	background-color: var(--tcv-color-fondo);
	border-radius: var(--tcv-d-radius);
	padding: 40px;
	box-shadow: var(--tcv-d-shadow);
}

.tcv-login-header {
	text-align: center;
	margin-bottom: 30px;
}

.tcv-login-header .tcv-sidebar__brand-icon {
	margin: 0 auto 16px;
	background-color: var(--tcv-color-acento);
	color: var(--tcv-color-fondo);
	width: 52px;
	height: 52px;
	border-radius: var(--tcv-d-radius-lg);
}

.tcv-login-header .tcv-sidebar__brand-icon svg {
	width: 32px;
	height: 32px;
}

.tcv-login-title {
	font-family: var(--tcv-d-fuente-serif);
	font-size: 32px;
	color: var(--tcv-color-acento);
	margin: 0 0 4px;
}

.tcv-login-subtitle {
	font-size: 14px;
	color: var(--tcv-color-texto);
	margin: 0;
}


.tcv-login-footer {
	text-align: center;
	margin-top: 25px;
	padding-top: 20px;
	border-top: 1px solid var(--tcv-color-fondo-alt);
}

.tcv-lost-pass-link {
	font-size: 13px;
	color: var(--tcv-color-texto);
	text-decoration: none;
	transition: color var(--tcv-d-dur-fast) var(--tcv-d-ease);
}

.tcv-lost-pass-link:hover {
	color: var(--tcv-color-acento);
}


/* ================================================================
   VISTA: CONFIGURACIÓN
   ================================================================ */
.tcv-settings-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 720px;
}

/* Cards de configuración */
.tcv-settings-card {
	background: var(--tcv-color-fondo-alt);
	border: 1px solid var(--tcv-color-fondo-alt);
	border-radius: var(--tcv-d-radius-md);
	overflow: hidden;
	box-shadow: var(--tcv-d-shadow-sm);
}

.tcv-settings-card__header {
	padding: 20px 24px 16px;
	border-bottom: 1px solid var(--tcv-color-fondo-alt);
}

.tcv-settings-card__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--tcv-color-texto);
	margin: 0 0 4px;
}

.tcv-settings-card__desc {
	font-size: 13px;
	color: var(--tcv-color-texto);
	margin: 0;
}

.tcv-settings-card__body {
	padding: 24px;
}

.tcv-settings-card__body--fields {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Campo de imagen */
.tcv-img-field {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.tcv-img-field__preview {
	width: 200px;
	height: 120px;
	border-radius: var(--tcv-d-radius-sm);
	border: 2px dashed var(--tcv-color-fondo-alt);
	background: var(--tcv-color-fondo-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.tcv-img-field__preview--logo {
	width: 140px;
	height: 100px;
	background-color: var(--tcv-color-fondo);
}

.tcv-img-field__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcv-img-field__preview--logo img {
	object-fit: contain;
	padding: 8px;
}

.tcv-img-field__placeholder {
	font-size: 12px;
	color: var(--tcv-color-texto);
	font-style: italic;
}

.tcv-img-field__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}

/* Acciones de guardado */
.tcv-settings-actions {
	display: flex;
	justify-content: flex-end;
	padding-top: 8px;
}

.tcv-settings-actions .tcv-btn svg {
	width: 16px;
	height: 16px;
	margin-right: 6px;
}

/* Responsive */
@media (max-width: 600px) {
	.tcv-img-field {
		flex-direction: column;
		align-items: stretch;
	}

	.tcv-img-field__preview,
	.tcv-img-field__preview--logo {
		width: 100%;
		height: 160px;
	}

	.tcv-settings-form {
		max-width: none;
	}
}

/* ============================================================
   EXPORTAR / IMPORTAR (Rediseño Integrado)
   ============================================================ */

.tcv-io-card {
	margin-top: 32px;
}

/* Caja de subida para Importar (estilo similar a tcv-img-field__preview) */
.tcv-io-upload-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 32px 24px;
	background-color: var(--tcv-color-fondo);
	border: 2px dashed var(--tcv-color-fondo-alt);
	border-radius: var(--tcv-d-radius);
	cursor: pointer;
	text-align: center;
	transition:
		border-color var(--tcv-d-dur) var(--tcv-d-ease),
		background-color var(--tcv-d-dur) var(--tcv-d-ease),
		opacity var(--tcv-d-dur) var(--tcv-d-ease);
}

.tcv-io-upload-box:hover {
	border-color: var(--tcv-color-acento);
	background-color: var(--tcv-color-acento);
	opacity: 0.03;
}

.tcv-io-upload-box svg {
	width: 32px;
	height: 32px;
	color: var(--tcv-color-acento);
	opacity: 0.6;
}

.tcv-io-upload-box span {
	font-size: 13px;
	color: var(--tcv-color-texto);
	font-weight: 500;
}

/* Ocultar input file */
.tcv-io-file-input {
	display: none;
}

/* Status y Feedback */
.tcv-io-status {
	padding: 12px 16px;
	border-radius: var(--tcv-d-radius-sm);
	font-size: 13px;
	font-weight: 500;
	margin-top: 16px;
	line-height: 1.4;
}

.tcv-io-status--success {
	background: var(--tcv-d-success-bg);
	color: var(--tcv-d-success);
	border: 1px solid rgba(22, 163, 74, 0.2);
}

.tcv-io-status--error {
	background: var(--tcv-d-danger-bg);
	color: var(--tcv-d-danger);
	border: 1px solid rgba(220, 38, 38, 0.2);
}

.tcv-io-status--processing {
	background: var(--tcv-color-fondo-alt);
	color: var(--tcv-color-texto);
	border: 1px solid color-mix(in srgb, var(--tcv-color-acento) 25%, transparent);
	display: flex;
	align-items: center;
	gap: 10px;
}

.tcv-io-spinner {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid color-mix(in srgb, var(--tcv-color-acento) 30%, transparent);
	border-top-color: var(--tcv-color-acento);
	border-radius: 50%;
	animation: tcv-spin .75s linear infinite;
}

/* ================================================================
   AJUSTES DEL PLUGIN (SETTINGS PAGE)
   ================================================================ */
.tcv-ajustes-wrap {
	margin-top: 30px;
}

.tcv-ajustes-wrap .tcv-settings-card {
	background-color: var(--tcv-color-fondo);
	padding: 30px;
	border: 1px solid var(--tcv-color-fondo-alt);
	border-radius: var(--tcv-d-radius);
	box-shadow: var(--tcv-d-shadow-sm);
	margin-bottom: 25px;
}

.tcv-ajustes-wrap h2 {
	margin: 0 0 25px 0;
	color: var(--tcv-color-acento);
	font-family: 'Newsreader', serif;
	font-size: 1.5rem;
	border-bottom: 2px solid var(--tcv-color-fondo-alt);
	padding-bottom: 15px;
	width: calc(100% + 10px);
}

.tcv-ajustes-wrap .form-table th {
	width: 240px;
	font-weight: 600;
	color: var(--tcv-color-texto);
	padding: 20px 10px 20px 0;
}

.tcv-ajustes-wrap .form-table td {
	padding: 15px 0;
}

/* Estilización de Inputs en Ajustes */
.tcv-ajustes-wrap .regular-text,
.tcv-ajustes-wrap input[type="url"],
.tcv-ajustes-wrap input[type="text"],
.tcv-ajustes-wrap textarea {
	border: 1px solid var(--tcv-color-fondo-alt);
	border-radius: var(--tcv-d-radius-sm);
	padding: 8px 12px;
	transition: border-color var(--tcv-d-dur-fast);
}

.tcv-ajustes-wrap .regular-text:focus {
	border-color: var(--tcv-color-acento);
	box-shadow: 0 0 0 1px var(--tcv-color-acento);
	outline: none;
}

/* ================================================================
   SELECTOR DE TEMAS (DASHBOARD SPA)
   ================================================================ */
.tcv-theme-selector-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 12px;
	margin-top: 10px;
}

.tcv-theme-option {
	border: 2px solid var(--tcv-color-fondo-alt);
	border-radius: var(--tcv-d-radius);
	padding: 10px;
	cursor: pointer;
	transition:
		border-color var(--tcv-d-dur-fast) var(--tcv-d-ease),
		transform var(--tcv-d-dur-fast) var(--tcv-d-ease);
	background-color: var(--tcv-color-fondo);
	text-align: center;
}

.tcv-theme-option:hover {
	border-color: var(--tcv-color-acento);
	transform: translateY(-2px);
}

.tcv-theme-option.is-active {
	border-color: var(--tcv-color-acento);
	background-color: var(--tcv-color-fondo-alt);
	box-shadow: var(--tcv-d-shadow);
}

.tcv-theme-option__palette {
	height: 38px;
	border-radius: var(--tcv-d-radius-md);
	overflow: hidden;
	margin-bottom: 8px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	position: relative;
	display: block;
}

.tcv-theme-option__palette-side {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 25%;
}

.tcv-theme-option__palette-accent {
	position: absolute;
	bottom: 6px;
	right: 6px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tcv-theme-option__palette-text {
	position: absolute;
	top: 8px;
	left: 35%;
	width: 40%;
	height: 2px;
	border-radius: 1px;
	opacity: 0.4;
}

.tcv-theme-option__label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--tcv-color-texto);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================
   DISH MANAGEMENT — Gestión de Platos
   ============================================================ */

/* Vista de platos — igual que wines */




/* Tarjeta de plato */
.tcv-dish-card {
	background: var(--tcv-d-surface);
	border: 4px solid var(--tcv-d-bg);
	border-radius: var(--tcv-d-radius-md);
	display: flex;
	overflow: hidden;
	transition: box-shadow var(--tcv-d-dur-fast) var(--tcv-d-ease) cubic-bezier(.4, 0, .2, 1), border-color var(--tcv-d-dur-fast) var(--tcv-d-ease);
	position: relative;
	box-shadow: var(--tcv-d-shadow-sm);
}

.tcv-dish-card__drag-handle {
	width: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	touch-action: none;
	background: rgba(0, 0, 0, 0.01);
	border-right: 1px solid rgba(0, 0, 0, 0.03);
	color: var(--tcv-d-text-muted);
	opacity: 0.6;
	transition:
		background var(--tcv-d-dur) var(--tcv-d-ease),
		color var(--tcv-d-dur) var(--tcv-d-ease);
}

.tcv-dish-card__drag-handle:hover {
	background: rgba(0, 0, 0, 0.03);
	color: var(--tcv-color-acento);
}

.tcv-dish-card__drag-handle svg {
	width: 18px;
	height: 18px;
}

.tcv-dish-card__drag-handle:active {
	cursor: grabbing;
}


.tcv-dish-card:hover {
	box-shadow: var(--tcv-d-shadow);
	border-color: color-mix(in srgb, var(--tcv-d-primary), transparent 70%)
}

.tcv-dish-card--exhausted {
	opacity: 0.65;
}

.tcv-dish-card__exhausted-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	background: var(--tcv-d-danger);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	pointer-events: none;
}

.tcv-dish-card__media {
	width: 80px;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tcv-d-bg);
}

.tcv-dish-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tcv-dish-card__img-placeholder {
	font-size: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.tcv-dish-card__main {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0.75rem 1rem;
	min-width: 0;
	gap: 0.5rem;
}

.tcv-dish-card__body {
	flex: 1;
}

.tcv-dish-card__title-row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.25rem;
	min-width: 0;
}

.tcv-dish-card__title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--tcv-d-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	min-width: 0;
}

.tcv-dish-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.tcv-dish-pill {
	display: inline-block;
	font-size: 0.72rem;
	padding: 4px 12px;
	border-radius: 100px;
	background: var(--tcv-color-fondo-alt);
	color: var(--tcv-color-texto);
	border: 1px solid var(--tcv-d-border);
	margin-bottom: 0.5rem;
}

.tcv-dish-pill strong {
	color: var(--tcv-color-acento);
	font-weight: 700;
}

.tcv-dish-card__dots {
	flex: 1;
	border-bottom: 1px dashed var(--tcv-color-acento);
	margin-bottom: 3px;
}

.tcv-dish-card__price {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--tcv-d-text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.tcv-dish-card__actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: flex-end;
	margin-top: auto;
}

.tcv-dish-card__description {
	font-size: 0.8rem;
	color: var(--tcv-d-text-muted);
	margin-top: 0.25rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	opacity: 0.8;
	overflow-wrap: break-word;
	min-width: 0;
}

.tcv-dish-card__description p,
.tcv-dish-card__description li {
	display: inline;
	margin: 0;
	padding: 0;
}

.tcv-dish-card__description ul,
.tcv-dish-card__description ol {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcv-dish-card__allergens {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 0.5rem;
}

.tcv-dish-card__allergen-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
	border-radius: 999px;
	border: 2px solid var(--tcv-d-accent);
	padding: 1px;
}

.tcv-dish-card__recommended {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px dashed var(--tcv-d-border);
}

.tcv-dish-card__recommended-label {
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--tcv-color-acento);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: block;
	margin-bottom: 4px;
}

.tcv-dish-card__recommended-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
}

.tcv-dish-card__recommended-list li {
	font-size: 1rem;
}

.tcv-dish-card__recommended-list li:not(:last-child):after {
	content: ",";
}

/* Grid layout para dishes (mismo que wine-grid) */
.tcv-dish-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1rem;
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
}

.tcv-label-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.25rem;
}

.tcv-btn-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--tcv-d-accent);
	font-size: 0.75rem;
	text-decoration: underline;
	cursor: pointer;
	font-family: inherit;
	transition: color var(--tcv-d-dur) var(--tcv-d-ease);
}

.tcv-btn-link:hover {
	color: var(--tcv-d-accent-hover);
}

.tcv-view__header-main-actions {
	display: flex;
	gap: 0.75rem;
}

/* ================================================================
   TABLERO VISUAL DE TAXONOMÍAS DE PLATOS
   ================================================================ */

.tcv-tax-dishes-board {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
	align-items: start;
}

.tcv-tax-carta-box {
	background: var(--tcv-color-fondo);
	border: 1px solid var(--tcv-d-border);
	border-radius: var(--tcv-d-radius-lg);
	overflow: hidden;
	transition:
		box-shadow var(--tcv-d-dur) var(--tcv-d-ease),
		opacity var(--tcv-d-dur) var(--tcv-d-ease);
	display: flex;
	flex-direction: column;
	box-shadow: var(--tcv-d-shadow-sm);
}

.tcv-tax-carta-box--uncategorized {
	background: rgba(0, 0, 0, 0.02);
	border-style: dashed;
}

.tcv-tax-carta-box--hidden {
	opacity: 0.6;
	filter: grayscale(0.5);
}

.tcv-tax-carta-box--hidden .tcv-tax-carta-box__title {
	text-decoration: line-through;
	opacity: 0.7;
}

.tcv-tax-carta-box__header {
	padding: 16px 20px;
	background: rgba(0, 0, 0, 0.02);
	border-bottom: 1px solid var(--tcv-d-border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	cursor: move;
}

.tcv-tax-carta-box__title-group {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.tcv-tax-carta-box__actions {
	display: flex;
	gap: 4px;
	transition: opacity var(--tcv-d-dur-fast);
	margin-left: auto;
}

.tcv-tax-carta-box:hover .tcv-tax-carta-box__actions {
	opacity: 1;
}

.tcv-tax-carta-box__title {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--tcv-color-texto);
	margin: 0;
}

.tcv-tax-carta-box__description {
	font-size: 0.85rem;
	color: var(--tcv-color-texto);
	opacity: 0.7;
	font-weight: 400;
	margin: 0;
	font-style: italic;
	width: 100%;
	line-height: 1.3;
	overflow-wrap: break-word;
	min-width: 0;
}

.tcv-tax-carta-box__description p {
	display: block;
	margin: 0 0 0.4em;
}

.tcv-tax-carta-box__description p:last-child {
	margin-bottom: 0;
}

.tcv-tax-carta-box__description ul,
.tcv-tax-carta-box__description ol {
	display: block;
	margin: 0 0 0.4em;
	padding-left: 1.4em;
}

.tcv-tax-carta-box__description ul:last-child,
.tcv-tax-carta-box__description ol:last-child {
	margin-bottom: 0;
}

.tcv-tax-carta-box__description ul {
	list-style: disc;
}

.tcv-tax-carta-box__description ol {
	list-style: decimal;
}

.tcv-tax-carta-box__description li {
	display: list-item;
}

.tcv-tax-carta-box__count {
	font-size: 0.75rem;
	background: var(--tcv-color-acento);
	color: var(--tcv-color-fondo);
	padding: 2px 8px;
	border-radius: var(--tcv-d-radius-lg);
	opacity: 0.8;
}

.tcv-tax-carta-box__list {
	min-height: 100px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tcv-tax-category-item {
	background: var(--tcv-color-fondo-alt);
	border: 1px solid var(--tcv-d-border);
	border-radius: var(--tcv-d-radius);
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: transform var(--tcv-d-dur-fast);
}

.tcv-tax-category-item__handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--tcv-color-texto);
	opacity: 0.35;
	cursor: grab;
}
.tcv-tax-category-item__handle:active {
	cursor: grabbing;
}
.tcv-tax-category-item__handle svg {
	width: 16px;
	height: 16px;
}

.tcv-tax-category-item__name {
	font-size: 0.95rem;
	font-weight: 500;
	flex: 1 1 auto;
}

.tcv-tax-category-item__actions {
	display: flex;
	gap: 4px;
	opacity: 0;
	transition: opacity var(--tcv-d-dur-fast);
}

.tcv-tax-category-item:hover .tcv-tax-category-item__actions {
	opacity: 1;
}

/* Sortable Specifics */
.tcv-tax-category-item.sortable-ghost {
	opacity: 0.3;
	border: 2px dashed var(--tcv-color-acento);
}

.tcv-tax-category-item.sortable-chosen {
	background: var(--tcv-color-acento) !important;
	color: var(--tcv-color-fondo) !important;
}

/* Checkbox Lists */
.tcv-checkbox-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 4px;
	padding: 10px;
	background: var(--tcv-color-fondo);
	border: 1px solid var(--tcv-d-border);
	border-radius: var(--tcv-d-radius-md);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

.tcv-checkbox-item {
	display: flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--tcv-d-radius-md);
	cursor: pointer;
	transition: background var(--tcv-d-dur-fast) var(--tcv-d-ease), transform 0.1s;
	user-select: none;
}

.tcv-checkbox-item:hover {
	background: var(--tcv-color-fondo-alt);
}

.tcv-checkbox-item:active {
	transform: scale(0.99);
}

.tcv-checkbox-item input[type="checkbox"] {
	margin: 0;
	margin-right: 10px;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.tcv-checkbox-item__label {
	font-size: 0.95rem;
	line-height: 1.2;
}


.tcv-tax-dishes-board .tcv-state-empty {
	grid-column: 1 / -1;
	padding: 60px;
	background: var(--tcv-color-fondo);
	border-radius: var(--tcv-d-radius-lg);
}

.tcv-tax-carta-box__add-row {
	padding: 12px;
	border-top: 1px solid var(--tcv-d-border);
	background: rgba(0, 0, 0, 0.01);
	display: flex;
	gap: 8px;
}

.tcv-tax-carta-box__add-input {
	flex: 1;
	font-size: 0.85rem !important;
	padding: 6px 10px !important;
	background: var(--tcv-color-fondo) !important;
}

.tcv-tax-dishes-visual-header {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--tcv-d-border);
}

/* Dish Grouping View */
.tcv-dish-view-group {
	margin-bottom: 30px;
	width: 100%;
	display: block;
	background: var(--tcv-color-fondo);
	border: 2px solid var(--tcv-color-acento);
	border-radius: var(--tcv-d-radius-lg);
	overflow: hidden;
	box-shadow: var(--tcv-d-shadow-sm);
}

.tcv-dish-view-group__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px 10px 20px;
	color: var(--tcv-color-fondo);
	background: var(--tcv-color-acento);
	cursor: pointer;
	transition: background var(--tcv-d-dur) var(--tcv-d-ease);
	user-select: none;
}

.tcv-dish-view-group__header:hover {
	background: var(--tcv-color-texto);
}

.tcv-dish-view-group__title {
	font-size: 1.3rem;
	font-weight: 800;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.tcv-dish-view-group__toggle {
	width: 24px;
	height: 24px;
	transition: transform var(--tcv-d-dur-slow) var(--tcv-d-ease);
}

.tcv-dish-view-group__toggle svg {
	width: 100%;
	height: 100%;
}

.tcv-dish-view-group--collapsed .tcv-dish-view-group__toggle {
	transform: rotate(-90deg);
}

.tcv-dish-view-group--collapsed .tcv-dish-view-group__content {
	display: none;
}

.tcv-dish-view-group__content {
	animation: tcv-fade-in 0.3s ease;
}

.tcv-dish-view-category {
	padding: 30px;
}

.tcv-dish-view-category:nth-child(even) {
	background-color: color-mix(in srgb, var(--tcv-color-fondo-alt), transparent 60%);
}

.tcv-dish-view-category:last-child {
	border-bottom: none;
}

.tcv-dish-view-category__title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--tcv-d-text);
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.tcv-dish-view-category__title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--tcv-color-acento);
}

.tcv-dish-view-category button.tcv-btn--secondary {
	background-color: var(--tcv-color-fondo-alt);
	border: 4px solid var(--tcv-color-fondo);
	box-shadow: var(--tcv-d-shadow-sm);
}

.tcv-dish-list-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	width: 100%;
}

/* Allergen Grid in Modal */
.tcv-alergenos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	gap: 10px;
	margin-top: 8px;
}

.tcv-alergen-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 4px;
	border-radius: var(--tcv-d-radius-md);
	background: var(--tcv-color-fondo-alt);
	border: 1px solid var(--tcv-d-border);
	cursor: pointer;
	transition:
		border-color var(--tcv-d-dur-fast) var(--tcv-d-ease),
		box-shadow var(--tcv-d-dur-fast) var(--tcv-d-ease),
		color var(--tcv-d-dur-fast) var(--tcv-d-ease);
	user-select: none;
	position: relative;
}

.tcv-alergen-item:hover {
	border-color: var(--tcv-color-acento);
}

.tcv-alergen-icon {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
	transition: opacity var(--tcv-d-dur) var(--tcv-d-ease);
	overflow: hidden;
}

.tcv-alergen-icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 100%;
}

.tcv-alergen-label {
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	color: var(--tcv-d-text-muted);
	opacity: 0.7;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.1;
}

/* Estado Seleccionado - Usamos :has() para soporte moderno */
.tcv-alergen-item:has(input:checked) {
	border-color: var(--tcv-color-acento);
	color: var(--tcv-color-acento);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tcv-alergen-item:has(input:checked) .tcv-alergen-icon {
	opacity: 1;
}

@media (min-width: 800px) {
	.tcv-alergenos-grid {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		gap: 12px;
	}

	.tcv-alergen-icon {
		width: 34px;
		height: 34px;
		border-radius: 100%;
		overflow: hidden;
	}

	.tcv-alergen-label {
		font-size: 9px;
	}
}

/* ================================================================
   SELECTOR DE VINOS RECOMENDADOS (HÍBRIDO)
   ================================================================ */
.tcv-vinos-selector {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 1px solid var(--tcv-d-border);
	border-radius: var(--tcv-d-radius-md);
	background: rgba(0, 0, 0, 0.015);
	padding: 10px;
}

.tcv-vinos-selector__search-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.tcv-vinos-selector__search-icon {
	position: absolute;
	right: 12px;
	opacity: 0.4;
	pointer-events: none;
	font-size: 14px;
}

.tcv-vinos-selector__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 0;
	padding-top: 4px;
}

.tcv-vinos-selector__pills:not(:empty) {
	padding: 8px 0;
	border-bottom: 1px dashed var(--tcv-d-border);
}

.tcv-vino-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--tcv-color-acento);
	color: var(--tcv-color-fondo);
	border: 1px solid var(--tcv-color-acento);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--tcv-d-radius-sm);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	animation: tcv-pill-in 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.tcv-vino-pill:hover {
	opacity: 0.95;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

@keyframes tcv-pill-in {
	from {
		opacity: 0;
		transform: scale(0.8);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.tcv-vino-pill__remove {
	cursor: pointer;
	opacity: 0.7;
	font-size: 14px;
	line-height: 1;
	transition: opacity var(--tcv-d-dur-fast);
}

.tcv-vino-pill__remove:hover {
	opacity: 1;
}

.tcv-vinos-selector__list {
	max-height: 450px;
	overflow-y: auto;
	background: var(--tcv-color-fondo);
	border: 1px solid var(--tcv-d-border);
	border-radius: var(--tcv-d-radius-sm);
	padding: 4px;
}

/* Reutilizamos tcv-checkbox-item para consistencia */
.tcv-vinos-selector__list .tcv-checkbox-item {
	padding: 8px 10px;
	font-size: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.tcv-vinos-selector__list .tcv-checkbox-item:last-child {
	border-bottom: none;
}

.tcv-vinos-selector__list .tcv-checkbox-item input:checked+span {
	font-weight: 700;
	color: var(--tcv-color-acento);
}


/* ================================================================
   UTILIDADES DE ESPACIADO
   ================================================================ */
.tcv-mt-md {
	margin-top: 16px !important;
}

.tcv-mt-lg {
	margin-top: 24px !important;
}

/* ================================================================
   ESTUDIO DE BOTELLAS
   ================================================================ */
.tcv-btn--block {
	width: 100%;
	justify-content: center;
}

/* — Configuración / plantilla — */
.tcv-studio-config {
	margin: 0 0 16px;
	background: var(--tcv-color-fondo-alt);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 8px 16px;
}
.tcv-studio-config > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--tcv-color-texto);
	padding: 8px 0;
}
.tcv-studio-config__body {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
	padding: 12px 0 16px;
}
.tcv-studio-config__template {
	display: flex;
	gap: 14px;
	align-items: center;
}
.tcv-studio-template-preview {
	width: 90px;
	height: 120px;
	border-radius: 8px;
	background: #fff center/cover no-repeat;
	border: 1px solid rgba(0, 0, 0, 0.12);
	flex: 0 0 auto;
}
.tcv-studio-template-preview--empty {
	background: repeating-linear-gradient(45deg, #eee, #eee 8px, #f6f6f6 8px, #f6f6f6 16px);
}
.tcv-studio-config__sliders {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 240px;
	flex: 1 1 240px;
}
.tcv-studio-field {
	display: grid;
	grid-template-columns: 130px 1fr;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--tcv-color-texto);
}
.tcv-studio-field input[type="range"] {
	width: 100%;
	accent-color: var(--tcv-color-acento);
}
.tcv-studio-field select,
.tcv-studio-field input[type="text"],
.tcv-studio-field input[type="password"] {
	width: 100%;
	padding: 5px 8px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	font-size: 13px;
	background: var(--tcv-color-fondo);
	color: var(--tcv-color-texto);
}
.tcv-studio-hint {
	margin: 4px 0 0;
	font-size: 12px;
	opacity: 0.7;
}
.tcv-studio-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-left: 5px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.15);
	color: var(--tcv-color-texto);
	font-size: 10px;
	font-style: italic;
	font-weight: 700;
	font-family: Georgia, serif;
	line-height: 1;
	cursor: pointer;
	vertical-align: middle;
	flex: 0 0 auto;
}
.tcv-studio-info:hover {
	background: var(--tcv-color-acento);
	color: #fff;
}
.tcv-studio-tip {
	position: fixed;
	z-index: 100000;
	max-width: 240px;
	padding: 9px 12px;
	background: #232323;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.tcv-studio-tip[hidden] {
	display: none;
}
.tcv-studio-group-title {
	margin: 10px 0 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.55;
	color: var(--tcv-color-texto);
}

/* — Cuerpo: cola + editor — */
.tcv-studio-body {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 20px;
	align-items: start;
}
.tcv-studio-side {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tcv-studio-preview {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 10px;
	background: #fff center/contain no-repeat;
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tcv-studio-preview__replace {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 0;
	border-radius: 999px;
	background: rgba(20, 20, 20, 0.72);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}
.tcv-studio-preview__replace:hover {
	background: rgba(20, 20, 20, 0.9);
}
.tcv-studio-preview__replace svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}
.tcv-studio-preview--empty {
	background-image: none;
}
.tcv-studio-preview__hint {
	font-size: 12px;
	opacity: 0.5;
	padding: 0 12px;
	text-align: center;
}
.tcv-studio-preview:not(.tcv-studio-preview--empty) .tcv-studio-preview__hint {
	display: none;
}
.tcv-studio-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
	background: var(--tcv-color-fondo);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
}
.tcv-studio-search__icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	opacity: 0.5;
}
.tcv-studio-search input {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	padding: 8px 0;
	font-size: 13px;
	color: var(--tcv-color-texto);
	outline: none;
}
.tcv-studio-queue {
	max-height: 50vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 4px;
}
.tcv-studio-queue__loading {
	padding: 16px;
	opacity: 0.6;
	font-size: 13px;
}
.tcv-studio-thumb {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	background: var(--tcv-color-fondo);
	cursor: pointer;
	text-align: left;
	position: relative;
	transition: border-color 0.15s, background 0.15s;
}
.tcv-studio-thumb:hover {
	border-color: var(--tcv-color-acento);
}
.tcv-studio-thumb.is-active {
	border-color: var(--tcv-color-acento);
	background: var(--tcv-color-fondo-alt);
}
.tcv-studio-thumb__img {
	width: 38px;
	height: 50px;
	flex: 0 0 auto;
	border-radius: 5px;
	background: #fff center/contain no-repeat;
	border: 1px solid rgba(0, 0, 0, 0.06);
}
.tcv-studio-thumb__name {
	font-size: 13px;
	line-height: 1.25;
	color: var(--tcv-color-texto);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.tcv-studio-thumb.is-done {
	border-color: rgba(46, 125, 50, 0.5);
}
.tcv-studio-thumb__check {
	position: absolute;
	top: 4px;
	right: 6px;
	color: #2e7d32;
	font-weight: 700;
	font-size: 13px;
}

/* — Editor — */
.tcv-studio-editor {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 20px;
	align-items: start;
}
.tcv-studio-canvas__placeholder {
	position: absolute;
	inset: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	opacity: 0.75;
	font-size: 14px;
	padding: 20px;
	pointer-events: none;
}

/* — Pestañas del panel de controles — */
.tcv-studio-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tcv-studio-tab {
	flex: 1 1 0;
	padding: 8px 6px;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tcv-color-texto);
	opacity: 0.55;
	border-bottom: 2px solid transparent;
	transition: opacity 0.15s, border-color 0.15s;
}
.tcv-studio-tab:hover { opacity: 0.85; }
.tcv-studio-tab.is-active {
	opacity: 1;
	border-bottom-color: var(--tcv-color-acento);
}
.tcv-studio-tabpanel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tcv-studio-tabpanel[hidden] {
	display: none;
}
.tcv-studio-canvas-wrap {
	position: relative;
	background: #2b2b2b;
	border-radius: 12px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 340px;
}
#tcv-studio-canvas {
	max-width: 100%;
	max-height: 70vh;
	height: auto;
	border-radius: 6px;
	background: #fff;
	touch-action: none;
	cursor: grab;
}
#tcv-studio-canvas:active {
	cursor: grabbing;
}
.tcv-studio-canvas__busy {
	position: absolute;
	inset: 10px;
	background: rgba(20, 20, 20, 0.78);
	color: #fff;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 14px;
}
.tcv-studio-spinner {
	width: 40px;
	height: 40px;
	animation: tcv-spin 0.9s linear infinite;
}
@keyframes tcv-spin {
	to { transform: rotate(360deg); }
}
.tcv-studio-controls {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tcv-studio-controls__title {
	font-size: 16px;
	margin: 0;
	color: var(--tcv-color-texto);
}
.tcv-studio-controls__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

@media (max-width: 900px) {
	.tcv-studio-body { grid-template-columns: 1fr; }
	.tcv-studio-queue { max-height: none; flex-direction: row; flex-wrap: wrap; }
	.tcv-studio-thumb { width: calc(50% - 6px); }
	.tcv-studio-editor { grid-template-columns: 1fr; }
}