body {
	background: #fff;
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, sans-serif
}

:root {
	--primary: #022238
}

html {
	font-size: 1rem
}

* {
	user-select: auto !important
}

@media (max-width:968px) {
	html {
		font-size: .875rem
	}

	* {
		user-select: none !important
	}

}

nav {
	z-index: 1000
}

.form-control:focus, .form-select:focus {
	background: #fff;
	border-color: #6395f1;
	box-shadow: 0 0 0 .2rem rgba(99, 149, 241, .25)
}

.modal-content {
	background: hsla(0, 0%, 100%, .95);
	backdrop-filter: blur(1.25rem);
	border: .0625rem solid hsla(0, 0%, 100%, .2);
	border-radius: 1.25rem;
	box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .04), 0 .625rem 1.625rem -.875rem rgba(2, 34, 56, .18) !important;
	border-radius: 1.375rem !important;
	border: none !important
}

.status-badge {
	padding: .5rem 1rem;
	border-radius: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .0313rem;
	font-size: .75rem;
	letter-spacing: .05em;
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	border-radius: 62.4375rem !important;
	font-weight: 700 !important;
	font-size: .6562rem !important;
	letter-spacing: .04em;
	padding: .375rem .8125rem !important;
	backdrop-filter: saturate(140%)
}

.sugerencia-item {
	padding: .625rem;
	border-bottom: .0625rem solid #eee;
	cursor: pointer;
	display: flex;
	justify-content: space-between
}

.sugerencia-item:hover {
	background: #f8f9fa
}

input[type=number], input[type=text] {
	border: .0625rem solid #e2e8f0
}

.alert.alert-success {
	position: fixed;
	top: 1rem;
	left: 50%;
	width: max-content;
	transform: translateX(-50%);
	z-index: 1055;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	border-radius: .75rem;
	transition: opacity .15s ease-in-out, transform .15s ease-in-out
}

a {
	text-decoration: none !important
}

.resumen-caja p {
	font-size: 1.15rem
}

.page-header {
	padding: 1.75rem 1.5rem 1.25rem;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem
}

.page-header, .page-title {
	display: flex;
	align-items: center
}

.page-title {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.03em;
	gap: .625rem
}

.page-title .icon-wrap {
	width: 2.5rem;
	height: 2.5rem;
	background: #1a1814;
	color: #fff;
	border-radius: .625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem
}

.export-split {
	display: flex;
	border-radius: .625rem;
	overflow: visible;
	position: relative
}

.btn-whatsapp {
	background: #25d366;
	color: #fff;
	border-radius: .625rem 0 0 .625rem;
	padding: .625rem .875rem;
	font-family: Sora, sans-serif;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .5rem;
	transition: background .15s;
	border: none;
	border-right: .0625rem solid hsla(0, 0%, 100%, .25)
}

.btn-whatsapp:hover {
	background: #1ebe5d
}

.btn-export-chevron {
	background: #25d366;
	color: #fff;
	border: none;
	border-radius: 0 .625rem .625rem 0;
	padding: .625rem .6875rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-size: .72rem;
	transition: background .15s
}

.btn-export-chevron:hover {
	background: #1ebe5d
}

.export-sections-dropdown {
	position: absolute;
	top: calc(100% + .5rem);
	right: 0;
	background: #fff;
	border: .0938rem solid #e2ddd6;
	border-radius: .75rem;
	box-shadow: 0 .5rem 1.875rem rgba(0, 0, 0, .12);
	min-width: 12.5rem;
	z-index: 1000;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-.375rem) scale(.97);
	transform-origin: top right;
	transition: opacity .18s ease, transform .18s ease
}

.export-sections-dropdown.open {
	opacity: 1;
	pointer-events: all;
	transform: translateY(0) scale(1)
}

.export-sec-header {
	padding: .625rem .875rem .375rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8a8278
}

.export-sec-item {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .5625rem .875rem;
	cursor: pointer;
	transition: background .12s;
	user-select: none
}

.export-sec-item:hover {
	background: #f5f4f0
}

.export-sec-icon {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: .4375rem;
	background: #e8f4ee;
	color: #2d6a4f;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .75rem;
	flex-shrink: 0
}

.export-sec-label {
	flex: 1;
	font-size: .85rem;
	font-weight: 500;
	color: #1a1814
}

.export-sec-checkbox {
	width: 1.125rem;
	height: 1.125rem;
	border-radius: .3125rem;
	border: .125rem solid #e2ddd6;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all .15s;
	background: #fff;
	font-size: .65rem;
	color: transparent
}

.export-sec-item.checked .export-sec-checkbox {
	background: #25d366;
	border-color: #25d366;
	color: #fff
}

.cat-filter-wrap {
	position: relative
}

.btn-cat-filter {
	background: #fff;
	border: .0938rem solid #e2ddd6;
	border-radius: .625rem;
	padding: .5rem .75rem;
	font-family: Sora, sans-serif;
	font-size: .82rem;
	font-weight: 600;
	color: #1a1814;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .4375rem;
	transition: border-color .15s, background .15s;
	white-space: nowrap
}

.btn-cat-filter:hover {
	border-color: #1a1814;
	background: #f5f4f0
}

.cat-filter-dropdown {
	position: absolute;
	top: calc(100% + .5rem);
	right: 0;
	background: #fff;
	border: .0938rem solid #e2ddd6;
	border-radius: .75rem;
	box-shadow: 0 .5rem 1.875rem rgba(0, 0, 0, .12);
	min-width: 13.125rem;
	z-index: 1000;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-.375rem) scale(.97);
	transform-origin: top left;
	transition: opacity .18s ease, transform .18s ease
}

.cat-filter-dropdown.open {
	opacity: 1;
	pointer-events: all;
	transform: translateY(0) scale(1)
}

.cat-filter-header {
	padding: .625rem .875rem .375rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8a8278
}

.cat-check-item {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .5625rem .875rem;
	cursor: pointer;
	transition: background .12s;
	user-select: none
}

.cat-check-item:hover {
	background: #f5f4f0
}

.cat-check-label {
	flex: 1;
	font-size: .85rem;
	font-weight: 500;
	color: #1a1814
}

.cat-checkbox {
	width: 1.125rem;
	height: 1.125rem;
	border-radius: .3125rem;
	border: .125rem solid #e2ddd6;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all .15s;
	background: #fff;
	font-size: .65rem;
	color: transparent
}

.cat-check-item.checked .cat-checkbox {
	background: #1a1814;
	border-color: #1a1814;
	color: #fff
}

.cat-filter-footer {
	padding: .5rem .625rem .625rem;
	border-top: .0625rem solid #e2ddd6;
	display: flex;
	gap: .375rem
}

.btn-cat-all, .btn-cat-none {
	flex: 1;
	padding: .4375rem;
	border: .0938rem solid #e2ddd6;
	border-radius: .4375rem;
	background: none;
	font-family: Sora, sans-serif;
	font-size: .75rem;
	font-weight: 600;
	cursor: pointer;
	color: #8a8278;
	transition: all .12s
}

.btn-cat-all:hover {
	background: #e8f4ee;
	border-color: #2d6a4f;
	color: #2d6a4f
}

.btn-cat-none:hover {
	background: #fee2e2;
	border-color: #991b1b;
	color: #991b1b
}

.tabs-wrap {
	padding: 0 1.5rem;
	display: flex;
	gap: .25rem;
	border-bottom: .125rem solid #e2ddd6
}

.tab-btn {
	background: none;
	border: none;
	border-bottom: .125rem solid transparent;
	margin-bottom: -.125rem;
	padding: .625rem 1rem;
	font-family: Sora, sans-serif;
	font-size: .85rem;
	font-weight: 500;
	color: #8a8278;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .4375rem;
	transition: color .2s, border-color .2s;
	border-radius: .375rem .375rem 0 0
}

.tab-btn:hover {
	color: #1a1814
}

.tab-btn.active {
	color: #1a1814;
	border-bottom-color: #1a1814;
	font-weight: 700
}

.tab-content-wrap {
	padding: 1.25rem 1.5rem 2.5rem
}

.tab-panel {
	display: none
}

.tab-panel.active {
	display: block
}

.toolbar {
	display: flex;
	gap: .625rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	align-items: center
}

.search-box {
	position: relative;
	flex: 1;
	min-width: 12.5rem
}

.search-box i {
	position: absolute;
	left: .75rem;
	top: 50%;
	transform: translateY(-50%);
	color: #8a8278;
	font-size: .85rem
}

.search-box input {
	border: .0938rem solid #e2ddd6;
	width: 100%;
	padding: .5625rem .75rem .5625rem 2.125rem;
	border-radius: .625rem;
	font-family: Sora, sans-serif;
	font-size: .85rem;
	background: #fff;
	color: #1a1814;
	outline: none;
	transition: border-color .2s
}

.search-box input:focus {
	border-color: none
}

.filter-pills {
	display: flex;
	gap: .375rem;
	flex-wrap: wrap
}

.pill {
	padding: .375rem .75rem;
	border-radius: 1.25rem;
	border: .0938rem solid #e2ddd6;
	background: #fff;
	font-family: Sora, sans-serif;
	font-size: .78rem;
	font-weight: 500;
	cursor: pointer;
	color: #8a8278;
	transition: all .15s
}

.pill.active {
	border-color: #1a1814;
	background: #1a1814;
	color: #fff
}

.stock-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
	gap: .75rem
}

.stock-card {
	background: #fff;
	border: .0938rem solid #e2ddd6;
	border-radius: .875rem;
	padding: 1rem;
	display: flex;
	align-items: center;
	gap: .875rem;
	transition: box-shadow .2s, transform .15s;
	cursor: default
}

.stock-card:hover {
	box-shadow: 0 .25rem 1.25rem rgba(0, 0, 0, .07);
	transform: translateY(-.0625rem)
}

.card-icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: .6875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	flex-shrink: 0
}

.icon-green {
	background: #e8f4ee;
	color: #2d6a4f
}

.icon-yellow {
	background: #fef3c7;
	color: #b45309
}

.icon-red {
	background: #fee2e2;
	color: #991b1b
}

.card-info {
	flex: 1;
	min-width: 0
}

.card-name {
	font-size: .88rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: .125rem
}

.card-sub {
	font-size: .75rem;
	color: #8a8278
}

.card-stock, .card-sub {
	font-family: DM Mono, monospace
}

.card-stock {
	font-size: 1.2rem;
	font-weight: 500;
	text-align: right;
	flex-shrink: 0
}

.card-stock.low {
	color: #991b1b
}

.card-stock.mid {
	color: #b45309
}

.card-stock.ok {
	color: #2d6a4f
}

.btn-edit-card {
	background: #f0ede8;
	border: none;
	border-radius: .5rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8a8278;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .15s, color .15s
}

.btn-edit-card:hover {
	background: #1a1814;
	color: #fff
}

.empty-state {
	text-align: center;
	padding: 3.75rem 1.25rem;
	color: #8a8278
}

.empty-state i {
	font-size: 2.5rem;
	margin-bottom: .75rem;
	opacity: .3;
	display: block
}

.empty-state p {
	font-size: .9rem
}

.loading-state {
	text-align: center;
	padding: 3.75rem 1.25rem;
	color: #8a8278
}

.spinner {
	width: 2.25rem;
	height: 2.25rem;
	border: .1875rem solid #e2ddd6;
	border-top-color: #1a1814;
	border-radius: 50%;
	animation: spin .7s linear infinite;
	margin: 0 auto .75rem
}

@keyframes spin {
	to {
		transform: rotate(1turn)
	}

}

.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .4);
	backdrop-filter: blur(.25rem);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s
}

.modal-overlay.open {
	opacity: 1;
	pointer-events: all
}

.modal-box {
	background: #fff;
	border-radius: 1.125rem;
	padding: 1.75rem;
	width: 100%;
	max-width: 23.75rem;
	margin: 1rem;
	transform: translateY(.75rem) scale(.97);
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1)
}

.modal-overlay.open .modal-box {
	transform: translateY(0) scale(1)
}

.modal-title {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: .25rem;
	letter-spacing: -.01em;
	font-weight: 700 !important
}

.modal-subtitle {
	font-size: .8rem;
	color: #8a8278;
	margin-bottom: 1.5rem
}

.stock-display {
	grid-column: span 5;
	text-align: center;
	font-family: DM Mono, monospace;
	font-size: 2.5rem;
	font-weight: 500;
	padding: 1rem;
	background: #f5f4f0;
	border-radius: .75rem;
	letter-spacing: -.02em
}

.stock-btn {
	background: #f0ede8;
	border: .0938rem solid #e2ddd6;
	border-radius: .625rem;
	padding: .625rem;
	font-family: Sora, sans-serif;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s;
	color: #1a1814
}

.stock-btn:hover {
	background: #1a1814;
	color: #fff;
	border-color: #1a1814
}

.stock-input-row {
	display: flex;
	gap: .5rem;
	margin-bottom: 1.25rem
}

.stock-input-row input {
	flex: 1;
	padding: .625rem .875rem;
	border: .0938rem solid #e2ddd6;
	border-radius: .625rem;
	font-family: DM Mono, monospace;
	font-size: 1rem;
	text-align: center;
	color: #1a1814;
	background: #fff;
	outline: none
}

.stock-input-row input:focus {
	border-color: #1a1814
}

.modal-actions {
	display: flex;
	gap: .5rem
}

.btn-cancel {
	flex: 1;
	padding: .6875rem;
	border: .0938rem solid #e2ddd6;
	border-radius: .625rem;
	background: none;
	font-family: Sora, sans-serif;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	color: #8a8278;
	transition: all .15s
}

.btn-cancel:hover {
	background: #f0ede8;
	color: #1a1814
}

.btn-save {
	flex: 2;
	padding: .6875rem;
	border: none;
	border-radius: .625rem;
	background: #1a1814;
	color: #fff;
	font-family: Sora, sans-serif;
	font-size: .85rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .15s
}

.btn-save:hover {
	opacity: .85
}

.view-toggle {
	display: flex;
	gap: .1875rem;
	background: #f0ede8;
	border-radius: .625rem;
	padding: .1875rem
}

.view-btn {
	background: none;
	border: none;
	border-radius: .5rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8a8278;
	cursor: pointer;
	font-size: .85rem;
	transition: all .15s
}

.view-btn.active {
	background: #fff;
	color: #1a1814;
	box-shadow: 0 .0625rem .25rem rgba(0, 0, 0, .1)
}

.stock-table-wrap {
	border: .0938rem solid #e2ddd6;
	border-radius: .75rem;
	overflow: hidden
}

.stock-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem
}

.stock-table thead th {
	background: #f0ede8;
	padding: .625rem .875rem;
	text-align: left;
	font-weight: 600;
	font-size: .78rem;
	color: #8a8278;
	text-transform: uppercase;
	letter-spacing: .05em;
	border-bottom: .0938rem solid #e2ddd6
}

.stock-table tbody tr {
	border-bottom: .0625rem solid #e2ddd6;
	transition: background .1s
}

.stock-table tbody tr:last-child {
	border-bottom: none
}

.stock-table tbody tr:hover {
	background: #f5f4f0
}

.stock-table td {
	padding: .625rem .875rem;
	vertical-align: middle
}

.stock-table .tbl-name {
	font-weight: 500
}

.stock-table .tbl-sub {
	font-size: .75rem;
	color: #8a8278
}

.stock-table .tbl-stock {
	font-family: DM Mono, monospace;
	font-weight: 500
}

.dot {
	display: inline-block;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	margin-right: .375rem
}

.dot.ok {
	background: #2d6a4f
}

.dot.mid {
	background: #b45309
}

.dot.low {
	background: #991b1b
}

.toast-wrap {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: .5rem
}

.toast {
	background: #1a1814;
	color: #fff;
	padding: .75rem 1.125rem;
	border-radius: .75rem;
	font-size: .85rem;
	font-weight: 500;
	box-shadow: 0 .25rem 1.25rem rgba(0, 0, 0, .15);
	animation: slideIn .3s ease, fadeOut .3s ease 2.2s forwards
}

@keyframes slideIn {
	0% {
		transform: translateX(1.875rem);
		opacity: 0
	}

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

}

@keyframes fadeOut {
	to {
		opacity: 0;
		transform: translateX(1.25rem)
	}

}

@media (max-width:576px) {
	.page-header {
		padding: 1rem
	}

	.tabs-wrap {
		padding: 0 1rem;
		overflow-x: auto
	}

	.tab-content-wrap {
		padding: 1rem 1rem 2.5rem
	}

	.stock-grid {
		grid-template-columns: 1fr
	}

}

.app-hero {
	padding: .375rem .125rem .25rem
}

.hero-eyebrow {
	font-size: .8125rem;
	color: #6e6e73;
	font-weight: 500
}

.hero-title {
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--primary)
}

.btn-hero-fill {
	font-weight: 600;
	font-size: .8438rem;
	background: var(--primary);
	color: #fff;
	border: none;
	padding: .625rem 1.25rem;
	transition: background .15s ease, transform .15s ease
}

.btn-hero-fill:hover {
	background: #04314f;
	color: #fff
}

.btn-hero-subtle {
	font-weight: 600;
	font-size: .8438rem;
	background: rgba(2, 34, 56, .06);
	color: var(--primary);
	border: none;
	padding: .625rem 1.25rem;
	transition: background .15s ease
}

.btn-hero-subtle:hover {
	background: rgba(2, 34, 56, .1);
	color: var(--primary)
}

.btn-hero-fill:active, .btn-hero-subtle:active {
	transform: scale(.97)
}

.filter-bar {
	background: #fff;
	border: .0625rem solid rgba(2, 34, 56, .1);
	border-radius: 62.4375rem;
	box-shadow: 0 .0625rem .0625rem rgba(0, 0, 0, .03), 0 .125rem .5rem rgba(2, 34, 56, .05);
	padding: .5rem .625rem
}

.filter-field {
	display: flex;
	flex-direction: column;
	padding: .6rem 1rem;
	min-width: 9.375rem
}

.filter-field.filter-search {
	min-width: 12.5rem
}

.filter-label {
	font-size: .6562rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #98989d;
	font-weight: 700;
	margin-bottom: .125rem
}

.filter-input, .filter-select {
	border: none;
	background: transparent;
	font-size: .875rem;
	font-weight: 500;
	color: var(--primary);
	padding: .125rem 0;
	width: 100%
}

.filter-input:focus, .filter-select:focus {
	outline: none
}

.filter-divider {
	width: .0625rem;
	align-self: stretch;
	background: rgba(2, 34, 56, .1);
	margin: .25rem 0
}

.filter-search-icon {
	color: #98989d;
	font-size: .8125rem;
	padding-right: .375rem
}

@media (max-width:991px) {
	.filter-bar {
		border-radius: 1rem
	}

	.filter-divider {
		display: none
	}

	.filter-field {
		min-width: 45%
	}

}

.stat-card-apple {
	background: #fff;
	border: .0625rem solid rgba(2, 34, 56, .1);
	border-radius: 1rem;
	box-shadow: 0 .0625rem .0625rem rgba(0, 0, 0, .03), 0 .125rem .5rem rgba(2, 34, 56, .05);
	padding: 1.25rem 1.375rem;
	height: 100%
}

.stat-label {
	display: flex;
	align-items: center;
	gap: .4375rem;
	font-size: .75rem;
	color: #6e6e73;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: .875rem
}

.stat-dot {
	width: .4375rem;
	height: .4375rem;
	border-radius: 50%;
	flex-shrink: 0
}

.stat-dot.dot-orange {
	background: #c76a00
}

.stat-dot.dot-green {
	background: #248a3d
}

.stat-dot.dot-navy {
	background: var(--primary)
}

.stat-dot.dot-gray {
	background: #98989d
}

.stat-value {
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--primary)
}

.pedido-card {
	overflow: hidden;
	border-radius: 1.375rem !important;
	box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .04), 0 .625rem 1.625rem -.875rem rgba(2, 34, 56, .18) !important;
	transition: transform .2s ease, box-shadow .2s ease;
	position: relative;
	overflow: visible;
	background: #fff;
	border-radius: 1.625rem !important;
	border: none !important;
	box-shadow: 0 .0625rem .0625rem rgba(0, 0, 0, .03), 0 1.25rem 2.75rem -1.375rem rgba(2, 34, 56, .28) !important;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease
}

.pedido-card:hover {
	transform: translateY(-.125rem);
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05), 0 1.125rem 2.125rem -1rem rgba(2, 34, 56, .24) !important;
	transform: translateY(-.1875rem) scale(1.005);
	box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .05), 0 1.875rem 3.75rem -1.625rem rgba(2, 34, 56, .34) !important;
	z-index: 2
}

.order-type {
	font-size: 1.0625rem;
	letter-spacing: -.01em;
	color: var(--primary);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -.025em;
	color: #022238
}

.order-id {
	color: #98989d;
	letter-spacing: -.01em
}

.order-id, .order-time {
	font-size: .75rem;
	font-weight: 500
}

.order-time {
	color: #6e6e73;
	font-weight: 600;
	color: #98989d;
	white-space: nowrap;
	font-variant-numeric: tabular-nums
}

.btn-gear {
	width: 1.875rem;
	height: 1.875rem;
	background: #fff;
	color: var(--primary);
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: none;
	background: #f5f5f7;
	color: #022238;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .7812rem;
	transition: background .15s ease, transform .15s ease
}

.btn-gear:focus, .btn-gear:hover {
	background: rgba(2, 34, 56, .06);
	color: var(--primary);
	background: #ebebee;
	transform: rotate(20deg)
}

.status-badge.bg-warning {
	background: #fdf0dd !important;
	color: #c76a00 !important;
	background: #fff2dd !important;
	color: #b06400 !important
}

.status-badge.bg-success {
	background: #e6f5ea !important;
	color: #248a3d !important;
	background: #e2f6e7 !important;
	color: #1f7a38 !important
}

.status-badge.bg-danger {
	background: #fce7e7 !important;
	color: #d70015 !important;
	background: #fde4e4 !important;
	color: #c81e1e !important
}

.badge-boleta-pill, .status-badge.badge-ubicacion {
	background: rgba(2, 34, 56, .06) !important;
	color: #022238 !important
}

.badge-boleta-pill {
	background: #eef4fb !important;
	color: #0a6ecf !important;
	font-size: .625rem !important;
	font-weight: 700 !important;
	border-radius: 62.4375rem !important;
	padding: .3125rem .625rem !important;
	letter-spacing: .03em
}

.order-price-row {
	margin: 1rem 0 .125rem
}

.price-display {
	font-size: 1.5625rem;
	letter-spacing: -.02em;
	color: var(--primary);
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: -.03em;
	color: #022238;
	font-variant-numeric: tabular-nums
}

.pago-pill {
	background: #e6f5ea !important;
	color: #248a3d !important;
	font-weight: 700 !important;
	background: #f0f0f2 !important;
	color: #48484a !important;
	font-weight: 600 !important;
	font-size: .6562rem !important;
	border-radius: 62.4375rem !important;
	padding: .3125rem .6875rem !important
}

.pago-pill.no-pagado {
	background: #fce7e7 !important;
	color: #d70015 !important;
	background: #fde4e4 !important;
	color: #c81e1e !important
}

.discount-pill {
	display: inline-block;
	color: var(--primary);
	background: rgba(2, 34, 56, .06);
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
	font-size: .7188rem;
	font-weight: 600;
	color: #b06400;
	background: #fff2dd;
	padding: .3125rem .6875rem;
	border-radius: 62.4375rem;
	margin-top: .625rem
}

.ticket-divider {
	background: rgba(2, 34, 56, .1);
	height: .0625rem;
	background: rgba(60, 60, 67, .1);
	margin: 1.125rem 0 .875rem
}

.detalle-item {
	padding: .5rem .625rem;
	margin: 0 -.625rem .125rem;
	border-radius: .75rem;
	transition: background .15s ease
}

.qty-badge {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: rgba(2, 34, 56, .06);
	color: var(--primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: .4375rem;
	background: #022238;
	color: #fff;
	font-size: .6562rem;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: .0625rem
}

.item-name {
	font-size: .875rem;
	color: var(--primary);
	font-size: .9062rem;
	font-weight: 600;
	color: #022238;
	letter-spacing: -.01em
}

.item-note {
	font-size: .7188rem
}

.item-note, .more-items {
	color: #6e6e73;
	color: #98989d
}

.more-items {
	font-weight: 600;
	font-size: .75rem
}

.order-note {
	background: rgba(2, 34, 56, .06);
	border-radius: .875rem;
	color: var(--primary);
	background: #f5f5f7;
	border-radius: 1rem;
	padding: .75rem .9375rem;
	color: #022238;
	margin-top: .25rem
}

.btn-pill {
	border-radius: 62.4375rem;
	transition: transform .15s ease, background .15s ease, opacity .15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 61.25rem;
	border: none;
	font-weight: 600;
	font-size: .7812rem;
	letter-spacing: -.005em;
	padding: .6875rem .875rem;
	transition: transform .15s cubic-bezier(.2, .8, .2, 1), opacity .15s ease, background .15s ease;
	text-decoration: none
}

.btn-pill:active {
	transform: scale(.96);
	transform: scale(.94);
	opacity: .85
}

.btn-pill-pay {
	background: #248a3d;
	color: #fff;
	box-shadow: 0 .25rem .75rem -.25rem rgba(36, 138, 61, .5)
}

.btn-pill-pay:hover {
	background: #1d7433;
	color: #fff
}

.btn-pill-subtle {
	background: rgba(2, 34, 56, .06);
	color: var(--primary);
	background: #f5f5f7;
	color: #022238
}

.btn-pill-subtle:hover {
	background: rgba(2, 34, 56, .1);
	color: var(--primary);
	background: #ebebee;
	color: #022238
}

.btn-pill-fill {
	background: var(--primary);
	background: #022238;
	color: #fff;
	box-shadow: 0 .25rem .75rem -.25rem rgba(2, 34, 56, .45)
}

.btn-pill-fill:hover {
	background: #04314f;
	color: #fff
}

.no-pedidos {
	padding: 4.375rem 1.25rem;
	color: #6e6e73
}

.dropdown-menu {
	border-radius: .875rem !important;
	box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .04), 0 .625rem 1.625rem -.875rem rgba(2, 34, 56, .18) !important;
	border-radius: 1rem !important;
	border: none !important;
	box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .04), 0 1.25rem 2.75rem -1.125rem rgba(2, 34, 56, .3) !important;
	padding: .5rem !important;
	backdrop-filter: blur(1.25rem) saturate(180%);
	background: hsla(0, 0%, 100%, .85) !important
}

.dropdown-item {
	border-radius: .5rem !important;
	font-size: .8438rem !important;
	border-radius: .625rem !important;
	font-size: .75rem !important;
	padding: .3rem .75rem !important;
	font-weight: 500
}

.dropdown-item:hover {
	background: rgba(2, 34, 56, .06) !important;
	background: #f0f0f2 !important
}

.alert {
	border-radius: 1rem !important;
	border: none !important
}

.alert-info {
	background: rgba(2, 34, 56, .06) !important;
	color: #022238 !important
}

.alert-success {
	background: #e6f5ea !important;
	color: #248a3d !important
}

.alert-warning {
	background: #fdf0dd !important;
	color: #c76a00 !important
}

.alert-danger {
	background: #fce7e7 !important;
	color: #d70015 !important
}

.bg-info-subtle {
	background: rgba(2, 34, 56, .06) !important
}

.border-info {
	border-color: rgba(2, 34, 56, .12) !important
}

.text-info {
	color: #022238 !important
}

.btn-light.rounded-pill {
	background: rgba(2, 34, 56, .06) !important;
	color: #022238 !important;
	border: none !important
}

.btn-light.rounded-pill:hover {
	background: rgba(2, 34, 56, .1) !important
}

.badge.bg-primary.rounded-pill {
	background: rgba(2, 34, 56, .06) !important;
	color: #022238 !important;
	font-weight: 700 !important
}

.badge.bg-light.text-muted {
	background: #f0f0f2 !important;
	color: #6e6e73 !important;
	border-radius: 62.4375rem !important;
	font-weight: 500 !important
}

.badge.bg-info.text-dark {
	background: rgba(2, 34, 56, .06) !important;
	color: #022238 !important
}

.badge.bg-success.rounded-pill {
	background: #e6f5ea !important;
	color: #248a3d !important;
	font-weight: 600 !important
}

.badge.bg-danger.rounded-pill {
	background: #fce7e7 !important;
	color: #d70015 !important;
	font-weight: 600 !important
}

.persona-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .875rem;
	border-radius: 62.4375rem;
	border: .125rem solid var(--persona-color, #6c757d);
	background: #fff;
	color: var(--persona-color, #6c757d);
	font-weight: 600;
	cursor: pointer;
	transition: all .15s ease;
	user-select: none
}

.persona-chip .persona-dot {
	width: .625rem;
	height: .625rem;
	border-radius: 50%;
	background: var(--persona-color, #6c757d);
	flex-shrink: 0
}

.persona-chip.activa {
	background: var(--persona-color, #6c757d);
	color: #fff;
	box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .15)
}

.persona-chip.activa .persona-dot {
	background: #fff
}

.persona-chip .persona-monto {
	font-weight: 700;
	font-size: .85rem;
	opacity: .85
}

.persona-chip .btn-quitar-persona {
	border: none;
	background: transparent;
	color: inherit;
	opacity: .6;
	padding: 0 .125rem;
	line-height: 1
}

.persona-chip .btn-quitar-persona:hover {
	opacity: 1
}

.producto-dividir-row {
	border-radius: .875rem;
	padding: .625rem .875rem;
	margin-bottom: .5rem;
	background: #fafbfc;
	background: rgba(2, 34, 56, .02);
	border: .0625rem solid rgba(2, 34, 56, .08)
}

.producto-dividir-nombre {
	font-weight: 600;
	font-size: .92rem
}

.producto-dividir-sub {
	font-size: .78rem
}

.stepper-asignar {
	display: flex;
	align-items: center;
	gap: 0;
	border-radius: .625rem;
	overflow: hidden;
	width: fit-content;
	border: .0625rem solid rgba(2, 34, 56, .14);
	border-radius: .75rem
}

.stepper-asignar button {
	width: 1.875rem;
	height: 1.875rem;
	border: none;
	background: #f1f3f5;
	color: #495057;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(2, 34, 56, .05);
	color: #022238
}

.stepper-asignar button:disabled {
	opacity: .4
}

.stepper-asignar button:active:not(:disabled) {
	background: #dee2e6;
	background: rgba(2, 34, 56, .12)
}

.stepper-asignar .stepper-valor {
	width: 1.875rem;
	text-align: center;
	font-weight: 700;
	font-size: .9rem
}

.stepper-restantes {
	font-size: .75rem;
	color: #adb5bd;
	margin-left: .375rem
}

.resumen-persona-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .375rem .75rem;
	border-radius: .625rem;
	border-left: .3125rem solid var(--persona-color, #6c757d);
	background: #f8f9fa;
	margin-bottom: .375rem
}

.total-pagar-card {
	background: rgba(2, 34, 56, .06);
	border: none;
	border-radius: 1.125rem;
	padding: 1.125rem 1.25rem
}

.total-pagar-card .total-pagar-label {
	font-size: .8125rem;
	font-weight: 600;
	color: #022238;
	text-transform: uppercase;
	letter-spacing: .05em
}

.total-pagar-card .total-pagar-monto {
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #248a3d
}

.metodo-pago-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .375rem;
	padding: .875rem 1.375rem;
	border-radius: 1rem;
	border: .0625rem solid rgba(2, 34, 56, .14);
	background: #fff;
	color: #022238;
	font-weight: 600;
	font-size: .85rem;
	cursor: pointer;
	transition: all .15s ease;
	width: 100%
}

.metodo-pago-btn .metodo-icon {
	font-size: 1.3rem
}

.metodo-pago-btn:hover {
	background: rgba(2, 34, 56, .05)
}

.metodo-pago-btn.active {
	background: #022238;
	border-color: #022238;
	color: #fff
}

.metodos-extra {
	max-height: 0;
	overflow: hidden;
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	transition: max-height .25s ease
}

.metodos-extra.open {
	max-height: 12.5rem;
	margin-top: .5rem
}

.btn-ver-mas-metodos {
	border: none;
	background: transparent;
	color: #022238;
	font-weight: 600;
	font-size: .82rem;
	display: flex;
	align-items: center;
	gap: .375rem;
	padding: .375rem 0;
	margin-top: .375rem
}

#calculadoraVuelto {
	border-radius: 1rem !important;
	background: rgba(2, 34, 56, .04) !important
}

.form-check-input:checked {
	background-color: #022238;
	border-color: #022238
}

.btn-custom {
	border-radius: 62.4375rem !important;
	font-weight: 600 !important;
	border: none !important
}

.btn-success.btn-custom {
	background: #248a3d !important
}

.btn-success.btn-custom:hover {
	background: #1d7433 !important
}

.btn-outline-primary.rounded-pill {
	border-color: rgba(2, 34, 56, .18) !important;
	color: #022238 !important
}

.btn-outline-primary.rounded-pill:hover {
	background: rgba(2, 34, 56, .06) !important;
	border-color: #022238 !important
}

.modal-footer-custom {
	gap: .5rem
}

.modal-footer-custom .btn {
	height: 3rem
}

#modalDetalles .modal-content {
	border-radius: 1.375rem !important;
	border: none !important;
	box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .04), 0 .625rem 1.625rem -.875rem rgba(2, 34, 56, .18) !important
}

#modalDetalles .modal-header {
	padding: 1.5rem 1.75rem .5rem
}

#modalDetalles .modal-title {
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -.01em;
	color: #022238
}

#modalDetalles .modal-title .text-primary {
	color: #022238 !important
}

#modalDetallesContent {
	padding: 1.25rem 1.75rem .25rem;
	font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, Inter, Segoe UI, sans-serif;
	color: #022238
}

#modalDetallesContent .row.mb-4 > div {
	border-radius: .875rem;
	padding: .15rem .875rem !important
}

#modalDetallesContent .row.mb-4 strong {
	font-weight: 600;
	font-size: .8438rem;
	color: #022238
}

#modalDetallesContent .row.mb-4 i.text-primary {
	color: #022238 !important;
	font-size: .8125rem
}

#modalDetallesContent .row.mb-4 .text-muted {
	color: #6e6e73 !important;
	font-size: .8438rem
}

#modalDetallesContent .badge.bg-primary.rounded-pill {
	background: rgba(2, 34, 56, .1) !important;
	color: #022238 !important;
	font-weight: 700 !important;
	font-size: .75rem;
	padding: .3125rem .75rem
}

#modalDetallesContent .status-badge {
	border-radius: 62.4375rem !important;
	font-weight: 700 !important;
	font-size: .6562rem !important;
	letter-spacing: .05em;
	padding: .3125rem .75rem !important
}

#modalDetallesContent .status-badge.badge-ubicacion {
	background: rgba(2, 34, 56, .08) !important;
	color: #022238 !important
}

#modalDetallesContent h6.fw-bold {
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #6e6e73;
	font-weight: 700 !important
}

#modalDetallesContent h6.fw-bold i.text-primary {
	color: #022238 !important
}

#modalDetallesContent .list-group {
	gap: .5rem;
	display: flex;
	flex-direction: column
}

#modalDetallesContent .list-group-item {
	background: #fff !important;
	border: .0625rem solid rgba(2, 34, 56, .07) !important;
	border-radius: 1rem !important;
	padding: .875rem 1rem !important;
	margin-bottom: 0 !important
}

#modalDetallesContent .list-group-item strong.text-dark {
	color: #022238 !important;
	font-weight: 600;
	font-size: .9062rem
}

#modalDetallesContent .list-group-item .badge.bg-primary.rounded-pill {
	width: 1.375rem;
	height: 1.375rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	font-size: .6875rem
}

#modalDetallesContent .list-group-item small.text-muted {
	color: #98989d !important;
	font-size: .75rem
}

#modalDetallesContent .list-group-item .text-info {
	color: #022238 !important;
	font-weight: 600
}

#modalDetallesContent .list-group-item .text-success.fw-bold {
	color: #248a3d !important;
	font-weight: 700 !important;
	font-size: .9375rem !important
}

#modalDetallesContent .card.border-info.bg-info-subtle {
	background: rgba(2, 34, 56, .04) !important;
	border: none !important;
	border-radius: 1rem !important
}

#modalDetallesContent .card.border-info .card-title.text-info {
	color: #022238 !important;
	font-size: .8438rem
}

#modalDetallesContent .card.border-info .list-group-item {
	background: transparent !important;
	border: none !important;
	border-bottom: .0625rem dashed rgba(2, 34, 56, .12) !important;
	border-radius: 0 !important;
	padding: .5rem 0 !important
}

#modalDetallesContent .card.border-info .list-group-item:last-child {
	border-bottom: none !important
}

#modalDetallesContent .card.border-info .text-dark.fw-medium {
	color: #6e6e73 !important;
	font-weight: 500 !important;
	font-size: .8438rem
}

#modalDetallesContent .card.border-info .fw-bold {
	color: #022238 !important
}

#modalDetallesContent .card:not(.border-info) {
	background: rgba(2, 34, 56, .035) !important;
	border: none !important;
	border-radius: 1.125rem !important
}

#modalDetallesContent .card .card-title {
	font-size: .8438rem;
	font-weight: 700;
	color: #022238
}

#modalDetallesContent .card .card-title i.text-primary {
	color: #022238 !important
}

#modalDetallesContent .card strong {
	font-weight: 600;
	font-size: .875rem;
	color: #022238
}

#modalDetallesContent .card .text-warning {
	color: #c76a00 !important
}

#modalDetallesContent .card hr.my-2 {
	border-top: .0625rem solid rgba(2, 34, 56, .12);
	opacity: 1;
	margin: .75rem 0 !important
}

#modalDetallesContent .card h5.text-dark {
	font-size: .9375rem;
	font-weight: 700;
	color: #022238 !important
}

#modalDetallesContent .card h4.text-success {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	letter-spacing: -.02em;
	color: #248a3d !important
}

#modalDetalles .modal-footer {
	padding: .5rem 1.75rem 1.5rem
}

#modalDetalles .btn-light.rounded-pill {
	background: rgba(2, 34, 56, .06) !important;
	color: #022238 !important;
	border: none !important;
	font-weight: 600;
	font-size: .8438rem;
	transition: background .15s ease
}

#modalDetalles .btn-light.rounded-pill:hover {
	background: rgba(2, 34, 56, .1) !important
}

.pedido-item {
	font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, Inter, Segoe UI, sans-serif
}

.pedido-card:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6.25rem;
	background: #f5f5f7;
	border-radius: 1.625rem 1.625rem 0 0;
	z-index: 0
}

.pedido-card.estado-pendiente:before {
	background: linear-gradient(180deg, #fff6e9, #fff)
}

.pedido-card.estado-completado:before {
	background: linear-gradient(180deg, #eaf7ee, #fff)
}

.pedido-card.estado-cancelado:before {
	background: linear-gradient(180deg, #fdecec, #fff)
}

.pedido-card > * {
	position: relative
}

.status-badge:before {
	content: "";
	width: .375rem;
	height: .375rem;
	border-radius: 50%;
	display: inline-block
}

.status-badge.bg-warning:before {
	background: #ff9f0a
}

.status-badge.bg-success:before {
	background: #30a349
}

.status-badge.bg-danger:before {
	background: #ff3b30
}

.detalle-item:hover {
	background: #f5f5f7
}

#metodosMainRow {
	display: flex;
	gap: .5rem;
	flex-wrap: nowrap
}

#metodosMainRow .metodo-pago-btn {
	flex: 1;
	min-width: 0
}