/* UI de Tickets: heredada de af-app-plugins (tema). Aquí solo estilos específicos. */
:root {
	/* Variables principales definidas en app-plugins.css */
}

.af-tickets--embedded .af-app-usuario-shell {
	grid-template-columns: 1fr;
}
.af-tickets--embedded.af-app-usuario-wrapper {
	padding: clamp(16px, 1.2vw + 10px, 28px);
}
.af-tickets--embedded,
.af-tickets--embedded .af-app-usuario-main {
	min-width: 0;
}

.af-required {
	color: var(--af-usuario-primary, #09aeb8);
	margin-left: 4px;
}

/* Nota: el tamaño/título del sidebar lo gestiona el tema (app-menu.css) vía .af-app-menu */

/* Integración con tabs/panels del tema (af-app-theme/js/app-pages.js + css/app-pages.css)
 * - En el sidebar usamos el look&feel del nav del tema (app-plugins.css),
 *   pero añadimos clases af-app-tabs* para reutilizar el JS de tabs.
 * - Evitamos que los estilos de tabs (app-pages.css) conviertan el sidebar en "inline-flex".
 */
.af-tickets-wrapper .af-app-usuario-nav.af-app-tabs {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 12px;
}
.af-tickets-wrapper .af-app-usuario-nav__item.af-app-tabs__item {
	flex: 0 0 auto;
	width: 100%;
	text-align: left;
}

/* TPV es un "launcher" (no tab): mantener el mismo ancho/alineación. */
.af-tickets-wrapper .af-app-usuario-nav__item[data-af-tpv-launch="1"] {
	width: 100%;
	text-align: left;
}

/* Sidebar oscuro: los items que también son "tabs" no deben heredar el color muted de app-pages.css */
.af-tickets-wrapper.af-app-menu .af-app-usuario-nav__item.af-app-tabs__item {
	color: #eef2ff;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: transparent;
	font-size: 16px;
	font-weight: 500;
}

.af-tickets-wrapper.af-app-menu .af-app-usuario-nav__item.af-app-tabs__item:hover,
.af-tickets-wrapper.af-app-menu .af-app-usuario-nav__item.af-app-tabs__item:focus-visible {
	outline: none;
	background: rgba(255, 255, 255, 0.1);
}

.af-tickets-wrapper.af-app-menu .af-app-usuario-nav__item.af-app-tabs__item.is-active {
	background: var(--af-app-focus-ring-soft, rgba(9, 174, 184, 0.18));
	border-color: rgba(9, 174, 184, 0.35);
	color: #eef2ff;
}

/* Líneas del ticket (servicios no lo tiene) */
.af-tickets-lines {
	margin-top: 18px;
	border-radius: var(--af-app-radius-3xl, 0);
	border: 1px solid var(--af-usuario-border, rgba(15, 23, 42, 0.12));
	background: var(--af-usuario-card, #ffffff);
	padding: 12px;
	display: grid;
	gap: 10px;
}

/* Cuando "líneas" va dentro de una card, no necesitamos margen superior extra. */
.af-tickets-wrapper .af-app-card .af-tickets-lines {
	margin-top: 0;
}

/* Mensajes simples dentro de cards (evitar márgenes por defecto). */
.af-tickets-wrapper .af-app-card > p.af-app-usuario-muted {
	margin: 0;
}

/* Cierre de caja: CTA fuera de la card (alineado a la izquierda). */
.af-tickets-wrapper .af-tickets-cierre-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* Asegurar que el botón no quede "cuadrado" por overrides externos. */
.af-tickets-wrapper .af-tickets-cierre-actions .af-app-usuario-button {
	border-radius: 0 !important;
}

/* Resumen: minigráfica (SVG) */
.af-tickets-wrapper .af-tickets-summary-chart svg {
	width: 100%;
	height: 96px;
	display: block;
	border-radius: var(--af-app-radius-xl, 0);
}

.af-tickets-wrapper .af-tickets-summary-breakdown {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.af-tickets-wrapper .af-tickets-summary-pill {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 8px 10px;
	border-radius: 0;
	border: 1px solid rgba(15, 23, 42, 0.10);
	background: rgba(248, 250, 252, 0.85);
}

.af-tickets-wrapper .af-tickets-summary-pill strong {
	font-variant-numeric: tabular-nums;
}

.af-tickets-wrapper .af-tickets-summary-pill--positive {
	border-color: rgba(46, 125, 50, 0.22);
	background: rgba(46, 125, 50, 0.06);
}

.af-tickets-wrapper .af-tickets-summary-pill--positive strong {
	color: #2e7d32;
}

.af-tickets-wrapper .af-tickets-summary-pill--danger {
	border-color: rgba(198, 40, 40, 0.24);
	background: rgba(198, 40, 40, 0.06);
}

.af-tickets-wrapper .af-tickets-summary-pill--danger strong {
	color: #c62828;
}

.af-tickets-wrapper .af-tickets-summary-pill--muted {
	opacity: 0.92;
}

/* Resumen: headers tipo "Detalles" (título izquierda, CTA derecha). */
.af-tickets-wrapper .af-tickets-card-header {
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.af-tickets-wrapper .af-tickets-card-header h4 {
	margin: 0;
}

.af-tickets-wrapper .af-tickets-summary-actions {
	justify-content: flex-end;
}

.af-tickets-wrapper .af-tickets-summary-actions .af-app-usuario-button {
	width: auto;
}

@media (min-width: 900px) {
	/* KPIs en fila (desktop) */
	.af-tickets-wrapper .af-tickets-kpi-row {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (max-width: 520px) {
	.af-tickets-wrapper .af-tickets-card-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

.af-tickets-lines__head,
.af-tickets-line-row {
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr) 44px;
	gap: 10px;
	align-items: center;
}

.af-tickets-lines__head {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(71, 85, 105, 0.7);
	padding: 8px 4px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.af-tickets-line-row {
	padding: 8px 4px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.af-tickets-line-row:last-child {
	border-bottom: 0;
}

.af-tickets-remove-line {
	width: 40px;
	height: 40px;
	border-radius: var(--af-app-radius-xl, 0);
	border: 1px solid var(--af-usuario-border, rgba(15, 23, 42, 0.12));
	background: transparent;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: rgba(71, 85, 105, 0.9);
	transition: all var(--af-app-transition, 0.2s ease);
}

.af-tickets-remove-line:hover {
	background: rgba(229, 72, 72, 0.08);
	border-color: rgba(229, 72, 72, 0.25);
	color: rgba(229, 72, 72, 0.95);
}

/* Botón de refresco AEAT (icon-only) */
.af-ticket-poll--icon {
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.af-ticket-poll--icon i {
	font-size: 16px;
	line-height: 1;
}

.af-tickets-row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
}

.af-tickets-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--af-app-radius-xl, 0);
	border: 1px solid var(--af-usuario-border, rgba(15, 23, 42, 0.12));
	background: var(--af-usuario-card, #ffffff);
	color: rgba(71, 85, 105, 0.95);
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	transition: background var(--af-app-transition, 0.2s ease), border-color var(--af-app-transition, 0.2s ease), transform var(--af-app-transition, 0.2s ease);
}

.af-tickets-icon-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 18px;
}

.af-tickets-icon-btn:hover,
.af-tickets-icon-btn:focus-visible {
	outline: none;
	background: rgba(9, 174, 184, 0.08);
	border-color: rgba(9, 174, 184, 0.35);
	transform: translateY(-1px);
}

.af-tickets-icon-btn.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none !important;
	background: rgba(15, 23, 42, 0.04);
}

.af-tickets-icon-btn--danger {
	border-color: rgba(229, 72, 72, 0.35);
	color: rgba(229, 72, 72, 0.95);
}

.af-tickets-icon-btn--danger:hover,
.af-tickets-icon-btn--danger:focus-visible {
	background: rgba(229, 72, 72, 0.08);
	border-color: rgba(229, 72, 72, 0.45);
}

@media (max-width: 720px) {
	.af-tickets-lines__head {
		display: none;
	}

	.af-tickets-line-row {
		grid-template-columns: 1fr 1fr;
	}

	.af-tickets-remove-line {
		grid-column: 1 / -1;
		width: 100%;
	}
}

/* ===== Checkbox "precio incluye impuesto" + total preview ===== */
.af-tickets-tax-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 4px 2px;
}

.af-tickets-tax-options__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}

.af-tickets-tax-options__label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var(--af-app-primary, #4f46e5);
}

/* Tax inputs bloqueados visualmente cuando price_includes_tax está activo */
.af-tickets-line-row input[name="lines_tax[]"]:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background: rgba(15, 23, 42, 0.04);
}

.af-tickets-total-preview {
	display: none;
	font-size: 15px;
	font-weight: 700;
	color: var(--af-app-text, #0f172a);
	text-align: right;
	padding: 4px 0;
}

/* ===== TPV ===== */
.af-tpv-header-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

.af-tpv-kiosk-shell {
	width: 100%;
}

.af-tpv-kiosk-topbar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--af-app-radius-3xl, 0);
	background: var(--af-usuario-card, #ffffff);
	border: 1px solid var(--af-usuario-border, rgba(15, 23, 42, 0.12));
	box-shadow: var(--af-usuario-shadow-soft, 0 14px 34px rgba(15, 23, 42, 0.08));
	margin-bottom: 14px;
}

.af-tpv-kiosk-views {
	height: calc(100vh - 110px);
}

.af-tpv-kiosk-view {
	height: 100%;
}

.af-tpv-print {
	height: 100%;
	border-radius: var(--af-app-radius-3xl, 0);
	border: 1px solid var(--af-usuario-border, rgba(15, 23, 42, 0.12));
	background: var(--af-usuario-card, #ffffff);
	box-shadow: var(--af-usuario-shadow-soft, 0 14px 34px rgba(15, 23, 42, 0.08));
	overflow: hidden;
}

.af-tpv-print__frame {
	width: 100%;
	height: 100%;
	border: 0;
	background: #ffffff;
}

.af-tpv-kiosk-title strong {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
}

.af-tpv-kiosk-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.af-tpv {
	display: grid;
	grid-template-columns: 260px 1fr 360px;
	gap: 14px;
	align-items: start;
}

.af-tpv--kiosk {
	height: 100%;
}

.af-tpv--kiosk .af-tpv__sidebar,
.af-tpv--kiosk .af-tpv__cart {
	top: 76px;
}

.af-tpv__sidebar,
.af-tpv__cart,
.af-tpv__products {
	border-radius: var(--af-app-radius-3xl, 0);
	border: 1px solid var(--af-usuario-border, rgba(15, 23, 42, 0.12));
	background: var(--af-usuario-card, #ffffff);
	box-shadow: var(--af-usuario-shadow-soft, 0 14px 34px rgba(15, 23, 42, 0.08));
}

.af-tpv__sidebar {
	padding: 14px;
	display: grid;
	gap: 14px;
	position: sticky;
	top: 12px;
}

.af-tpv__user-label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(71, 85, 105, 0.7);
}

.af-tpv__user-name {
	font-size: 18px;
	font-weight: 700;
}

.af-tpv__block-title {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	color: rgba(71, 85, 105, 0.75);
	padding: 12px 14px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.af-tpv__category-list {
	padding: 12px;
	display: grid;
	gap: 8px;
}

.af-tpv__cat {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: var(--af-app-radius-xl, 0);
	border: 1px solid rgba(15, 23, 42, 0.1);
	background: var(--af-usuario-card, #fff);
	cursor: pointer;
	text-align: left;
}

.af-tpv__cat.is-active {
	background: rgba(9, 174, 184, 0.14);
	border-color: rgba(9, 174, 184, 0.35);
}

.af-tpv__cat-dot {
	width: 14px;
	height: 14px;
	border-radius: 0;
	border: 1px solid rgba(15, 23, 42, 0.18);
	background: rgba(9, 174, 184, 0.25);
	flex: 0 0 auto;
}

.af-tpv__cat-label {
	font-size: 14px;
	font-weight: 600;
	color: #111827;
}

.af-tpv__products {
	overflow: hidden;
}

.af-tpv__grid {
	padding: 14px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.af-tpv__tile {
	min-height: 120px;
	border-radius: var(--af-app-radius-3xl, 0);
	border: 1px solid rgba(15, 23, 42, 0.1);
	background: linear-gradient(180deg, rgba(9, 174, 184, 0.08), rgba(9, 174, 184, 0.02));
	cursor: pointer;
	padding: 14px;
	display: grid;
	align-content: center;
	gap: 10px;
	text-align: center;
}

.af-tpv__tile-name {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.1;
}

.af-tpv__tile-price {
	font-size: 18px;
	font-weight: 700;
	color: var(--af-usuario-primary-dark, #078a92);
}

.af-tpv__cart {
	position: sticky;
	top: 12px;
	overflow: hidden;
}

.af-tpv__cart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.af-tpv__total {
	padding: 12px 14px;
	text-align: right;
}

.af-tpv__total span {
	display: block;
	font-size: 12px;
	color: rgba(71, 85, 105, 0.7);
}

.af-tpv__total strong {
	font-size: 20px;
}

.af-tpv__cart-lines {
	padding: 14px;
	display: grid;
	gap: 10px;
	max-height: 52vh;
	overflow: auto;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.af-tpv__line {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 10px;
	align-items: center;
	padding: 10px 12px;
	border-radius: var(--af-app-radius-2xl, 0);
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: var(--af-usuario-card, #fff);
}

.af-tpv__line-name {
	font-weight: 700;
	color: #0f172a;
}

.af-tpv__line-meta {
	font-size: 12px;
	color: rgba(71, 85, 105, 0.75);
	margin-top: 2px;
}

.af-tpv__line-controls {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.af-tpv__qty-btn,
.af-tpv__del-btn {
	width: 36px;
	height: 36px;
	border-radius: var(--af-app-radius-xl, 0);
	border: 1px solid var(--af-usuario-border, rgba(15, 23, 42, 0.12));
	background: var(--af-usuario-card, #fff);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
}

.af-tpv__del-btn {
	border-color: rgba(229, 72, 72, 0.25);
	color: rgba(229, 72, 72, 0.95);
}

.af-tpv__qty {
	min-width: 24px;
	text-align: center;
	font-weight: 700;
}

.af-tpv__line-sum {
	font-weight: 800;
	white-space: nowrap;
}

.af-tpv__cart-actions {
	padding: 14px;
	display: grid;
	gap: 12px;
}

.af-tpv__payment {
	display: grid;
	gap: 6px;
}

.af-tpv__payment span {
	font-size: 12px;
	color: rgba(71, 85, 105, 0.7);
}

.af-tpv__buttons {
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.af-tpv__empty {
	padding: 14px;
	border-radius: var(--af-app-radius-2xl, 0);
	border: 1px dashed rgba(15, 23, 42, 0.18);
	color: rgba(71, 85, 105, 0.8);
	text-align: center;
}

@media (max-width: 1280px) {
	.af-tpv {
		grid-template-columns: 240px 1fr 320px;
	}
	.af-tpv__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.af-tpv {
		grid-template-columns: 1fr;
	}
	.af-tpv__sidebar,
	.af-tpv__cart {
		position: relative;
		top: auto;
	}
	.af-tpv__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.af-tpv__cart-lines {
		max-height: none;
	}
}

/* ===== TPV Kiosk (ocultar layout global del panel) ===== */
body.af-tpv-kiosk {
	background: var(--af-usuario-bg, #f2f5f7) !important;
}

body.af-tpv-kiosk header,
body.af-tpv-kiosk footer {
	display: none !important;
}

body.af-tpv-kiosk .af-app-sidebar-container,
body.af-tpv-kiosk .af-app-mobile-topbar,
body.af-tpv-kiosk .af-app-mobile-overlay {
	display: none !important;
}

body.af-tpv-kiosk .af-app-layout {
	display: block !important;
	min-height: 100vh;
}

body.af-tpv-kiosk .af-app-content-area {
	padding: 16px !important;
	box-shadow: none !important;
	background: transparent !important;
}

body.af-tpv-kiosk .af-app-usuario-wrapper.af-tickets-wrapper {
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* ===== TPV Overlay (loader/diálogo) ===== */
@keyframes afSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

[data-af-tpv-overlay] {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 999999;
}

.af-tpv-overlay__box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: rgba(20, 20, 20, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
	border-radius: var(--af-app-radius-2xl, 0);
	padding: 18px 16px;
	width: min(560px, calc(100vw - 48px));
	font-family: var(--af-font-body, 'Segoe UI', Arial, sans-serif);
	text-align: center;
	color: #fff;
}

.af-tpv-overlay__spinner {
	width: 44px;
	height: 44px;
	margin: 0 auto 14px auto;
	border: 4px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: afSpin 0.9s linear infinite;
}

.af-tpv-overlay__title {
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 8px;
}

.af-tpv-overlay__msg {
	font-size: 14px;
	opacity: 0.95;
	margin-bottom: 8px;
}

.af-tpv-overlay__hint {
	font-size: 12px;
	opacity: 0.78;
	margin-bottom: 12px;
}

.af-tpv-overlay__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.af-tpv-overlay__btn {
	border-radius: var(--af-app-radius-xl, 0);
	padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.af-tpv-overlay__btn--primary {
	border: 0;
	background: linear-gradient(135deg, rgba(9, 174, 184, 0.95), rgba(7, 138, 146, 0.95));
}

/* ===== Aviso post-creación de ticket ===== */
.af-tickets-notice-actions {
	margin-top: 10px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.af-tickets-notice-hint {
	margin: 8px 0 0;
	color: rgba(71, 85, 105, 0.8);
	font-size: 12px;
}

/* ===== Forms inline en tabla de acciones ===== */
.af-app-inline-actions {
	display: inline;
}

/* ===== Botones de acción del historial ===== */
.af-tickets-icon-btn.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: auto;
}

.af-tickets-icon-btn.is-polling .dashicons {
	animation: afSpin 0.8s linear infinite;
}

.af-tickets-icon-btn.is-polling {
	opacity: 0.55;
	cursor: wait;
}

/* Clases del modal (.af-modal--centered, __panel--sm, __title, __body*, __footer--actions)
 * centralizadas en af-app-theme/css/app-plugins.css */