/* Rotulado de estibas — producto terminado (vista previa en pantalla) */

.logistica-rotulos-module {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.logistica-rotulos-module__tabs.logistica-user-panel__tabs,
.logistica-rotulos-module .logistica-user-panel__tabs {
	align-items: stretch;
	background: #eef2f6;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
}

.logistica-rotulos-module .logistica-user-panel__tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: #475569;
	cursor: pointer;
	flex: 1 1 auto;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.25;
	min-height: 42px;
	padding: 0.55rem 0.9rem;
	text-align: center;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.logistica-rotulos-module .logistica-user-panel__tab:hover {
	background: rgba(255, 255, 255, 0.7);
	color: #0f172a;
}

.logistica-rotulos-module .logistica-user-panel__tab.is-active,
.logistica-rotulos-module .logistica-user-panel__tab[aria-selected="true"] {
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
	color: #0f766e;
}

.logistica-rotulos-module .logistica-user-panel__tab-panel[hidden] {
	display: none !important;
}

.logistica-rotulos-module__panels {
	min-width: 0;
}

.logistica-rotulo-estibas-board {
	--lg-rotulo-teal: #13776d;
	--lg-rotulo-teal-dark: #0f5f57;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.logistica-rotulo-estibas-board .logistica-rotulo-rollos-section-head__icon {
	align-items: center;
	background: linear-gradient(135deg, #13776d 0%, #0f5f57 100%);
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(19, 119, 109, 0.22);
	color: #fff;
	display: inline-flex;
	flex-shrink: 0;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.logistica-rotulo-estibas-board .logistica-rotulo-rollos-section-head__icon .dashicons {
	color: #fff;
	display: inline-block;
	font-family: dashicons !important;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	height: 18px;
	line-height: 1;
	speak: never;
	text-decoration: inherit;
	vertical-align: top;
	width: 18px;
}

.logistica-rotulo-estibas-board .logistica-rotulo-rollos-section-head__icon .dashicons-edit::before {
	content: "\f464";
}

.logistica-rotulo-estibas-board .logistica-rotulo-rollos-section-head__icon .dashicons-visibility::before {
	content: "\f177";
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn .dashicons {
	color: inherit;
	display: inline-block;
	font-family: dashicons !important;
	font-size: 18px;
	height: 18px;
	line-height: 1;
	width: 18px;
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn .dashicons-visibility::before {
	content: "\f177";
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn .dashicons-printer::before {
	content: "\f193";
}

.logistica-rotulo-estibas-board .logistica-rotulo-rollos-toolbar__intro {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	gap: 14px;
	min-width: 0;
}

.logistica-rotulo-estibas-board .logistica-rotulo-rollos-toolbar__intro > div:last-child {
	flex: 1 1 auto;
	min-width: 0;
}

.logistica-rotulo-estibas-board .logistica-rotulo-rollos-toolbar__intro h2 {
	margin: 0 0 0.35em;
}

.logistica-rotulo-estibas-board .logistica-rotulo-rollos-toolbar__intro p {
	margin: 0;
}

.logistica-rotulo-estibas-board .logistica-rotulo-rollos-toolbar__badge {
	align-items: center;
	background: linear-gradient(135deg, #e8f6f3 0%, #d1fae5 100%);
	border: 1px solid #99f6e4;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(19, 119, 109, 0.12);
	color: var(--lg-rotulo-teal-dark, #0f5f57);
	display: flex;
	flex-shrink: 0;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.logistica-rotulo-estibas-board .logistica-rotulo-rollos-toolbar__badge .dashicons {
	color: var(--lg-rotulo-teal-dark, #0f5f57);
	display: inline-block;
	font-family: dashicons !important;
	font-size: 22px;
	height: 22px;
	line-height: 1;
	width: 22px;
}

.logistica-rotulo-estibas-board .logistica-rotulo-rollos-toolbar__badge .dashicons-products::before {
	content: "\f312";
}

.logistica-rotulo-estibas-size-note {
	align-items: center;
	background: #f8fffe;
	border: 1px solid #ccfbf1;
	border-radius: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	padding: 12px 14px;
}

.logistica-rotulo-estibas-size-note p {
	color: #475569;
	font-size: 0.9rem;
	margin: 0;
}

.logistica-rotulo-estibas-status {
	color: #0f766e;
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0;
	min-height: 1.2em;
}

.logistica-rotulo-estibas-status.is-error {
	color: #b91c1c;
}

.logistica-rotulo-estibas-layout {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	min-width: 0;
}

.logistica-rotulo-estibas-form,
.logistica-rotulo-estibas-preview-column {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	min-width: 0;
	padding: 16px;
}

.logistica-rotulo-estibas-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 100%;
	overflow: hidden;
}

.logistica-rotulo-estibas-form__field,
.logistica-rotulo-estibas-form label {
	display: flex;
	flex-direction: column;
	font-size: 0.85rem;
	font-weight: 700;
	gap: 6px;
	min-width: 0;
}

.logistica-rotulo-estibas-form input[type="text"],
.logistica-rotulo-estibas-form input[type="number"] {
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	box-sizing: border-box;
	font: inherit;
	font-weight: 600;
	max-width: 100%;
	min-width: 0;
	padding: 0.55rem 0.7rem;
	width: 100%;
}

.logistica-rotulo-estibas-form input[readonly] {
	background: #f8fafc;
	color: #0f172a;
}

.logistica-rotulo-estibas-form input[data-estiba-referencia] {
	text-transform: uppercase;
}

.logistica-rotulo-estibas-form__row {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-width: 0;
}

.logistica-rotulo-estibas-form__row--meta {
	align-items: end;
}

.logistica-rotulo-estibas-color {
	align-items: center;
	display: flex;
	gap: 10px;
	min-width: 0;
}

.logistica-rotulo-estibas-color input[type="color"] {
	appearance: none;
	background: transparent;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	cursor: pointer;
	flex: 0 0 auto;
	height: 42px;
	padding: 4px;
	width: 56px;
}

.logistica-rotulo-estibas-color__swatch {
	border: 1px solid rgba(15, 23, 42, 0.18);
	border-radius: 8px;
	flex: 1 1 auto;
	height: 42px;
	min-width: 0;
}

.logistica-rotulo-estibas-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn.button {
	align-items: center;
	border-radius: 12px;
	box-shadow: none;
	display: inline-flex;
	flex: 1 1 calc(50% - 5px);
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	padding: 0.65rem 1rem;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn.button .dashicons {
	font-size: 18px;
	height: 18px;
	line-height: 1;
	margin: 0;
	width: 18px;
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--preview.button {
	background: #f0fdfa;
	border: 1px solid #99f6e4;
	color: #0f766e;
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--preview.button:hover,
.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--preview.button:focus {
	background: #ccfbf1;
	border-color: #5eead4;
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
	color: #115e59;
	outline: none;
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button,
.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button-primary {
	background: var(--lg-rotulo-teal, #13776d);
	border: 1px solid var(--lg-rotulo-teal, #13776d);
	box-shadow: none;
	color: #ffffff;
	text-shadow: none;
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button .dashicons,
.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button-primary .dashicons {
	color: #ffffff;
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button:hover,
.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button:focus,
.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button-primary:hover,
.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button-primary:focus {
	background: var(--lg-rotulo-teal-dark, #0f5f57);
	border-color: var(--lg-rotulo-teal-dark, #0f5f57);
	box-shadow: none;
	color: #ffffff;
	outline: none;
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button:hover .dashicons,
.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button:focus .dashicons,
.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button-primary:hover .dashicons,
.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn--print.button-primary:focus .dashicons {
	color: #ffffff;
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn.button:active {
	transform: translateY(1px);
}

.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn.button:focus-visible {
	outline: 2px solid #0f766e;
	outline-offset: 2px;
}

@media (max-width: 420px) {
	.logistica-rotulo-estibas-board .logistica-rotulo-estibas-btn.button {
		flex: 1 1 100%;
	}
}

.logistica-rotulo-estibas-preview-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.logistica-rotulo-estibas-preview {
	align-items: flex-start;
	background:
		linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
		linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
		linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
	background-size: 16px 16px;
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	min-height: 320px;
	overflow: auto;
	padding: 16px;
}

.logistica-estiba-label-preview-scaler {
	aspect-ratio: var(--estiba-preview-w, 215.9) / var(--estiba-preview-h, 279.4);
	background: #fff;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
	display: block;
	margin: 0 auto;
	max-width: min(100%, 300px);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.logistica-estiba-label-preview-scaler > .logistica-estiba-label,
.logistica-estiba-label-preview-scaler > .logistica-estiba-label.is-preview {
	height: 100% !important;
	inset: 0;
	margin: 0;
	max-height: none !important;
	max-width: none !important;
	min-height: 0 !important;
	position: absolute !important;
	width: 100% !important;
}

.logistica-estiba-label {
	background: #fff;
	border: 2px solid #111827;
	box-sizing: border-box;
	color: #111827;
	display: flex;
	flex-direction: column;
	font-family: Arial, Helvetica, sans-serif;
	overflow: hidden;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.logistica-estiba-label.is-preview {
	height: 100% !important;
	width: 100% !important;
}

.logistica-estiba-label__block {
	border-bottom: 1.5px solid #111827;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.logistica-estiba-label__block:last-child {
	border-bottom: 0;
}

/* Escala fija del rótulo (vista previa e impresión): 44% / 26% / 30%. */
.logistica-estiba-label__block--ref {
	flex: 0 0 44%;
	height: 44%;
}

.logistica-estiba-label__split {
	display: flex;
	flex: 0 0 26%;
	height: 26%;
	min-height: 0;
}

.logistica-estiba-label__block--half {
	border-right: 1.5px solid #111827;
	flex: 1 1 50%;
	height: 100%;
	min-width: 0;
	overflow: hidden;
}

.logistica-estiba-label__block--half:last-child {
	border-right: 0;
}

.logistica-estiba-label__block--total {
	flex: 0 0 30%;
	height: 30%;
}

.logistica-estiba-label__head {
	align-items: center;
	box-sizing: border-box;
	color: #111827;
	display: flex;
	flex: 0 0 22%;
	font-size: 0.72rem;
	font-weight: 800;
	height: 22%;
	justify-content: center;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 0 0.4rem;
	text-align: center;
	text-transform: uppercase;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.logistica-estiba-label__value {
	align-items: center;
	background: #fff;
	box-sizing: border-box;
	display: flex;
	flex: 0 0 78%;
	height: 78%;
	justify-content: center;
	min-height: 0;
	overflow: hidden;
	padding: 0.5rem 0.65rem;
	text-align: center;
	width: 100%;
}

.logistica-estiba-label__fit-text {
	display: inline-block;
	font-weight: 800;
	text-align: center;
}

.logistica-estiba-label__value[data-estiba-fit="nowrap"] .logistica-estiba-label__fit-text {
	white-space: nowrap;
}

@media (max-width: 900px) {
	.logistica-rotulo-estibas-layout {
		grid-template-columns: 1fr;
	}

	.logistica-rotulo-estibas-form__row,
	.logistica-rotulo-estibas-form__row--meta {
		grid-template-columns: 1fr;
	}
}
