/**
 * Mesa de expediciones y página de seguimiento.
 *
 * La pantalla de expediciones está pensada para mirarse de pie y de lejos,
 * con las manos ocupadas. Por eso el campo donde entra la pistola es
 * enorme: quien está ahí no va a acercarse a leer un campo de formulario
 * normal, y necesita ver de un vistazo si ha entrado lo que esperaba.
 */

:root {
	--gp-navy: #002c64;
	--gp-azul: #0072ce;
	--gp-graf: #242d36;
	--gp-gris: #f1f1f1;
	--gp-suave: #5a6470;
	--gp-line: #e2e6ec;
}

/* ---------------------------------------------------------- expediciones */
.gp-exp-form {
	border: 1px solid var(--gp-line);
	border-top: 3px solid var(--gp-azul);
	padding: 22px;
	margin: 0 0 22px;
	background: #fff;
}

.gp-exp-form label {
	display: block;
	font-size: .95em;
	font-weight: 600;
	color: var(--gp-navy);
	margin: 0 0 8px;
}

.gp-exp-form input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.5em;
	letter-spacing: .06em;
	padding: .5em .6em;
	border: 2px solid var(--gp-navy);
	border-radius: 2px;
	margin: 0 0 12px;
}

.gp-exp-form input[type="text"]:focus {
	outline: 3px solid rgba(0, 114, 206, .28);
	outline-offset: 1px;
}

.gp-exp-pie {
	margin: 10px 0 0;
	font-size: .82em;
	color: var(--gp-suave);
}

.gp-exp-aviso {
	padding: 12px 14px;
	margin: 0 0 18px;
	font-size: .95em;
	border-left: 4px solid var(--gp-suave);
	background: var(--gp-gris);
}

.gp-exp-aviso.gp-bien {
	border-left-color: #1d7a43;
	background: #eef7f1;
	font-weight: 600;
}

.gp-exp-aviso.gp-mal {
	border-left-color: #9a2b31;
	background: #fdf3f3;
	font-weight: 600;
}

.gp-exp-aviso.gp-ojo {
	border-left-color: #c98a00;
	background: #fdf7e9;
}

/* La ficha de confirmación antes de cerrar */
.gp-exp-ficha {
	border: 1px solid var(--gp-line);
	padding: 16px 18px;
	margin: 0 0 16px;
	background: #fff;
}

.gp-exp-ficha h3 {
	margin: 0;
	font-size: 1.3em;
	color: var(--gp-navy);
}

.gp-exp-cliente {
	margin: 2px 0 12px;
	color: var(--gp-suave);
	font-size: .92em;
}

.gp-exp-lineas {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-exp-lineas li {
	padding: 7px 0;
	border-top: 1px solid var(--gp-line);
	font-size: .93em;
}

.gp-exp-lineas b {
	display: inline-block;
	min-width: 3.6em;
	color: var(--gp-navy);
}

.gp-exp-lineas code {
	background: none;
	padding: 0;
	font-weight: 600;
}

.gp-exp-ultimos {
	margin: 26px 0 0;
}

.gp-exp-ultimos h3 {
	font-size: 1em;
	color: var(--gp-navy);
	margin: 0 0 8px;
}

.gp-exp-ultimos table {
	width: 100%;
	border-collapse: collapse;
	font-size: .85em;
}

.gp-exp-ultimos td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--gp-line);
	color: var(--gp-suave);
}

.gp-exp-ultimos td:nth-child(2),
.gp-exp-ultimos td:nth-child(3) {
	color: var(--gp-graf);
}

/* ------------------------------------------------------------ seguimiento */
.gp-seg {
	max-width: 680px;
	margin: 0 auto;
	padding: 28px 18px 48px;
}

.gp-seg h1 {
	font-size: 1.7em;
	color: var(--gp-navy);
	margin: 0 0 2px;
}

.gp-seg-fecha {
	color: var(--gp-suave);
	font-size: .9em;
	margin: 0 0 26px;
}

.gp-seg-pasos {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	counter-reset: paso;
}

.gp-seg-pasos li {
	position: relative;
	padding: 0 0 22px 38px;
	border-left: 2px solid var(--gp-line);
	margin-left: 9px;
}

.gp-seg-pasos li:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

/* El punto de cada paso. Relleno cuando está hecho, hueco cuando falta:
   se entiende de un vistazo sin leer nada. */
.gp-seg-pasos li::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--gp-line);
	box-sizing: border-box;
}

.gp-seg-pasos li.gp-hecho::before {
	background: var(--gp-azul);
	border-color: var(--gp-azul);
}

.gp-seg-pasos li strong {
	display: block;
	color: var(--gp-navy);
	font-size: 1.02em;
}

.gp-seg-pasos li.gp-pendiente strong {
	color: var(--gp-suave);
}

.gp-seg-pasos li span {
	display: block;
	color: var(--gp-suave);
	font-size: .88em;
	margin-top: 2px;
}

.gp-seg-exp {
	padding: 12px 14px;
	background: var(--gp-gris);
	border-left: 4px solid var(--gp-azul);
	font-size: .95em;
	margin: 0 0 8px;
}

.gp-seg-exp code {
	background: none;
	font-weight: 700;
	letter-spacing: .04em;
}

.gp-seg-nota {
	font-size: .82em;
	color: var(--gp-suave);
	margin: 0 0 24px;
}

.gp-seg h2 {
	font-size: 1.1em;
	color: var(--gp-navy);
	margin: 26px 0 8px;
}

.gp-seg-lineas {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-seg-lineas li {
	padding: 9px 0;
	border-top: 1px solid var(--gp-line);
	font-size: .93em;
}

.gp-seg-lineas b {
	display: inline-block;
	min-width: 3.6em;
	color: var(--gp-navy);
}

/* ------------------------------------------------------------- impresión */
.gp-barras {
	margin: 0 0 14px;
	text-align: center;
}

.gp-barras svg {
	max-width: 100%;
	height: auto;
}

@media print {

	/* El código de barras no se recorta ni se parte entre dos páginas:
	   medio código impreso no lo lee ninguna pistola. */
	.gp-barras {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.gp-exp-form,
	.gp-exp-ultimos {
		display: none;
	}
}