/*
 * Panel de tarjetas regalo.
 *
 * Se usa de pie en un mostrador, casi siempre desde un móvil y a veces con mala
 * luz: por eso el contraste es alto, los objetivos táctiles son grandes y los
 * importes y códigos van en una tipografía monoespaciada con cifras tabulares,
 * que es lo que permite comparar un código carácter a carácter con el PDF que
 * trae el cliente.
 */

.fcp {
	--fcp-tinta: #16191d;
	--fcp-tinta-suave: #5b636e;
	--fcp-papel: #f6f7f8;
	--fcp-superficie: #ffffff;
	--fcp-linea: #dde1e6;
	--fcp-linea-fuerte: #b9c0c9;
	--fcp-canje: #0b6e4f;
	--fcp-canje-claro: #e6f2ed;
	--fcp-parcial: #a15c07;
	--fcp-parcial-claro: #fdf3e3;
	--fcp-alerta: #a4242c;
	--fcp-alerta-claro: #fbeaeb;
	--fcp-foco: #1a56db;

	--fcp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--fcp-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--fcp-radio: 6px;

	box-sizing: border-box;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 0 4rem;
	color: var(--fcp-tinta);
	font-family: var(--fcp-ui);
	font-size: 16px;
	line-height: 1.45;
}

.fcp *,
.fcp *::before,
.fcp *::after {
	box-sizing: inherit;
}

.fcp :focus-visible {
	outline: 3px solid var(--fcp-foco);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Cabecera y totales
 * ----------------------------------------------------------------------- */

.fcp-cabecera {
	border-bottom: 2px solid var(--fcp-tinta);
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

.fcp-cabecera__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.fcp-titulo {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 650;
	letter-spacing: -0.015em;
}

.fcp-sesion {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	font-size: 0.85rem;
	color: var(--fcp-tinta-suave);
}

.fcp-sesion a {
	color: var(--fcp-tinta);
	text-underline-offset: 3px;
}

.fcp-totales {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	margin: 1.25rem 0 0;
	padding: 0;
	background: var(--fcp-linea);
	border: 1px solid var(--fcp-linea);
	border-radius: var(--fcp-radio);
	overflow: hidden;
}

.fcp-total {
	background: var(--fcp-superficie);
	padding: 0.75rem 0.9rem;
	margin: 0;
}

.fcp-total dt {
	margin: 0 0 0.15rem;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fcp-tinta-suave);
}

.fcp-total dd {
	margin: 0;
	font-family: var(--fcp-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.15rem;
	font-weight: 600;
}

.fcp-total--canjeado dd { color: var(--fcp-canje); }
.fcp-total--pendiente dd { color: var(--fcp-parcial); }

/* --------------------------------------------------------------------------
 * Escáner y buscador rápido
 * ----------------------------------------------------------------------- */

.fcp-escaner {
	background: var(--fcp-tinta);
	color: #fff;
	border-radius: var(--fcp-radio);
	padding: 1rem;
	margin-bottom: 1.25rem;
}

.fcp-escaner__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #a8b1bd;
	margin-bottom: 0.5rem;
}

.fcp-escaner__campos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.fcp-input-codigo {
	flex: 1 1 12rem;
	min-height: 52px;
	padding: 0.5rem 0.75rem;
	border: 2px solid transparent;
	border-radius: var(--fcp-radio);
	background: #fff;
	color: var(--fcp-tinta);
	font-family: var(--fcp-mono);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fcp-input-codigo::placeholder {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #9aa3ae;
}

.fcp-camara {
	margin-top: 0.75rem;
}

.fcp-camara video {
	width: 100%;
	max-height: 320px;
	border-radius: var(--fcp-radio);
	background: #000;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
 * Botones
 * ----------------------------------------------------------------------- */

.fcp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 52px;
	padding: 0.5rem 1.1rem;
	border: 2px solid transparent;
	border-radius: var(--fcp-radio);
	font-family: var(--fcp-ui);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.fcp-btn--principal {
	background: var(--fcp-canje);
	border-color: var(--fcp-canje);
	color: #fff;
}

.fcp-btn--principal:hover { background: #095a41; border-color: #095a41; }

.fcp-btn--camara {
	background: transparent;
	border-color: #566070;
	color: #fff;
}

.fcp-btn--camara:hover { border-color: #fff; }

.fcp-btn--secundario {
	background: var(--fcp-superficie);
	border-color: var(--fcp-linea-fuerte);
	color: var(--fcp-tinta);
}

.fcp-btn--secundario:hover { border-color: var(--fcp-tinta); }

.fcp-btn--peligro {
	background: transparent;
	border-color: var(--fcp-alerta);
	color: var(--fcp-alerta);
}

.fcp-btn--peligro:hover { background: var(--fcp-alerta-claro); }

.fcp-btn--texto {
	min-height: 44px;
	padding: 0.4rem 0.6rem;
	background: none;
	border: none;
	color: var(--fcp-tinta);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}

.fcp-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
 * Filtros
 * ----------------------------------------------------------------------- */

.fcp-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.fcp-filtro {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1 1 10rem;
}

.fcp-filtro label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fcp-tinta-suave);
}

.fcp-filtro input,
.fcp-filtro select {
	min-height: 48px;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--fcp-linea-fuerte);
	border-radius: var(--fcp-radio);
	background: var(--fcp-superficie);
	color: var(--fcp-tinta);
	font-family: var(--fcp-ui);
	font-size: 0.95rem;
}

.fcp-filtro--acciones {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

/* --------------------------------------------------------------------------
 * Listado
 * ----------------------------------------------------------------------- */

.fcp-tabla {
	border: 1px solid var(--fcp-linea);
	border-radius: var(--fcp-radio);
	overflow: hidden;
	background: var(--fcp-superficie);
}

.fcp-tabla__cabecera {
	display: none;
}

.fcp-fila {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"codigo saldo"
		"destinatario saldo"
		"estado caducidad";
	gap: 0.15rem 0.75rem;
	width: 100%;
	padding: 0.85rem 0.9rem;
	border: none;
	border-top: 1px solid var(--fcp-linea);
	border-left: 4px solid transparent;
	background: var(--fcp-superficie);
	font-family: var(--fcp-ui);
	text-align: left;
	cursor: pointer;
}

.fcp-fila:first-of-type { border-top: none; }
.fcp-fila:hover { background: var(--fcp-papel); }

.fcp-fila--pendiente { border-left-color: var(--fcp-linea-fuerte); }
.fcp-fila--parcial { border-left-color: var(--fcp-parcial); }
.fcp-fila--usado { border-left-color: var(--fcp-canje); }
.fcp-fila--caducada { border-left-color: var(--fcp-alerta); }

.fcp-celda--codigo {
	grid-area: codigo;
	font-family: var(--fcp-mono);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.fcp-celda--destinatario {
	grid-area: destinatario;
	font-size: 0.9rem;
	color: var(--fcp-tinta-suave);
}

.fcp-celda--saldo {
	grid-area: saldo;
	align-self: center;
	text-align: right;
	font-family: var(--fcp-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.15rem;
	font-weight: 600;
}

.fcp-celda--saldo small {
	display: block;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--fcp-tinta-suave);
}

.fcp-celda--estado { grid-area: estado; }

.fcp-celda--caducidad {
	grid-area: caducidad;
	text-align: right;
	font-size: 0.8rem;
	color: var(--fcp-tinta-suave);
}

.fcp-fila--usado .fcp-celda--saldo { color: var(--fcp-tinta-suave); }

/* Chips de estado */

.fcp-chip {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.fcp-chip--pendiente { background: var(--fcp-papel); color: var(--fcp-tinta-suave); }
.fcp-chip--parcial { background: var(--fcp-parcial-claro); color: var(--fcp-parcial); }
.fcp-chip--usado { background: var(--fcp-canje-claro); color: var(--fcp-canje); }
.fcp-chip--caducada { background: var(--fcp-alerta-claro); color: var(--fcp-alerta); margin-left: 0.35rem; }

.fcp-vacio {
	padding: 2.5rem 1rem;
	border: 1px dashed var(--fcp-linea-fuerte);
	border-radius: var(--fcp-radio);
	text-align: center;
	color: var(--fcp-tinta-suave);
}

.fcp-paginacion {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 1.25rem;
}

.fcp-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	border: 1px solid var(--fcp-linea-fuerte);
	border-radius: var(--fcp-radio);
	background: var(--fcp-superficie);
	color: var(--fcp-tinta);
	text-decoration: none;
	font-size: 0.9rem;
}

.fcp-paginacion .page-numbers.current {
	background: var(--fcp-tinta);
	border-color: var(--fcp-tinta);
	color: #fff;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Ficha (modal)
 * ----------------------------------------------------------------------- */

.fcp-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.fcp-modal[hidden] { display: none; }

.fcp-modal__fondo {
	position: absolute;
	inset: 0;
	background: rgba(22, 25, 29, 0.55);
}

.fcp-modal__caja {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: 92vh;
	overflow-y: auto;
	background: var(--fcp-superficie);
	border-radius: 12px 12px 0 0;
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
	animation: fcp-subir 0.18s ease-out;
}

@keyframes fcp-subir {
	from { transform: translateY(16px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.fcp-modal__caja { animation: none; }
	.fcp-btn { transition: none; }
}

.fcp-modal__cerrar {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--fcp-tinta);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.fcp-modal__cerrar:hover { background: var(--fcp-papel); }

.fcp-ficha { padding: 1.25rem; }

/* Marcador de saldo: el elemento central de la ficha. */

.fcp-marcador {
	border: 2px solid var(--fcp-tinta);
	border-radius: var(--fcp-radio);
	padding: 0.9rem 1rem;
	margin-bottom: 1rem;
}

.fcp-marcador__codigo {
	font-family: var(--fcp-mono);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	word-break: break-all;
}

.fcp-marcador__etiqueta {
	margin-top: 0.6rem;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fcp-tinta-suave);
}

.fcp-marcador__saldo {
	font-family: var(--fcp-mono);
	font-variant-numeric: tabular-nums;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.fcp-marcador__original {
	font-family: var(--fcp-mono);
	font-size: 0.85rem;
	color: var(--fcp-tinta-suave);
}

.fcp-marcador--usado .fcp-marcador__saldo { color: var(--fcp-tinta-suave); }
.fcp-marcador--parcial .fcp-marcador__saldo { color: var(--fcp-parcial); }

.fcp-marcador__avisos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.6rem;
}

/* Datos */

.fcp-datos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1rem;
	margin: 0 0 1.25rem;
	padding: 0;
}

.fcp-dato { margin: 0; }

.fcp-dato dt {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fcp-tinta-suave);
	margin-bottom: 0.1rem;
}

.fcp-dato dd {
	margin: 0;
	font-size: 0.95rem;
	overflow-wrap: anywhere;
}

.fcp-dedicatoria {
	grid-column: 1 / -1;
	background: var(--fcp-papel);
	border-left: 3px solid var(--fcp-linea-fuerte);
	padding: 0.6rem 0.8rem;
	border-radius: 0 var(--fcp-radio) var(--fcp-radio) 0;
}

.fcp-dedicatoria dd {
	font-style: italic;
	white-space: pre-wrap;
}

/* Bloques de la ficha */

.fcp-bloque {
	border-top: 1px solid var(--fcp-linea);
	padding-top: 1rem;
	margin-top: 1rem;
}

.fcp-bloque__titulo {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--fcp-tinta-suave);
}

.fcp-canje-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.fcp-canje-form__importe {
	flex: 1 1 8rem;
	min-height: 52px;
	padding: 0.4rem 0.7rem;
	border: 2px solid var(--fcp-linea-fuerte);
	border-radius: var(--fcp-radio);
	font-family: var(--fcp-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.3rem;
	font-weight: 600;
	text-align: right;
}

.fcp-canje-form__nota {
	flex: 1 1 100%;
	min-height: 48px;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--fcp-linea-fuerte);
	border-radius: var(--fcp-radio);
	font-family: var(--fcp-ui);
	font-size: 0.95rem;
}

.fcp-atajos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.6rem;
}

.fcp-atajo {
	min-height: 40px;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--fcp-linea-fuerte);
	border-radius: 999px;
	background: var(--fcp-superficie);
	font-family: var(--fcp-mono);
	font-size: 0.85rem;
	cursor: pointer;
}

.fcp-atajo:hover { border-color: var(--fcp-tinta); }

/* Historial */

.fcp-historial {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fcp-movimiento {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.1rem 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--fcp-linea);
	font-size: 0.88rem;
}

.fcp-movimiento:last-child { border-bottom: none; }

.fcp-movimiento__cabecera { font-weight: 600; }
.fcp-movimiento__meta { color: var(--fcp-tinta-suave); font-size: 0.8rem; }

.fcp-movimiento__importe {
	grid-row: 1 / 3;
	grid-column: 2;
	align-self: center;
	font-family: var(--fcp-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
}

.fcp-movimiento--canje .fcp-movimiento__importe { color: var(--fcp-canje); }
.fcp-movimiento--reverso .fcp-movimiento__importe { color: var(--fcp-alerta); }

.fcp-movimiento__nota {
	grid-column: 1 / -1;
	color: var(--fcp-tinta-suave);
	font-size: 0.82rem;
}

/* Nota interna */

.fcp-nota-form textarea {
	width: 100%;
	min-height: 80px;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--fcp-linea-fuerte);
	border-radius: var(--fcp-radio);
	font-family: var(--fcp-ui);
	font-size: 0.95rem;
	resize: vertical;
}

.fcp-nota-form .fcp-btn { margin-top: 0.5rem; }

/* Mensajes dentro de la ficha */

.fcp-mensaje {
	padding: 0.7rem 0.85rem;
	border-radius: var(--fcp-radio);
	font-size: 0.9rem;
	margin-bottom: 0.85rem;
}

.fcp-mensaje--error {
	background: var(--fcp-alerta-claro);
	border-left: 4px solid var(--fcp-alerta);
	color: #7d1a20;
}

.fcp-mensaje--ok {
	background: var(--fcp-canje-claro);
	border-left: 4px solid var(--fcp-canje);
	color: #084c37;
}

/* Aviso flotante */

.fcp-aviso {
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	z-index: 100000;
	max-width: 90vw;
	padding: 0.8rem 1.1rem;
	border-radius: var(--fcp-radio);
	background: var(--fcp-tinta);
	color: #fff;
	font-size: 0.92rem;
	font-weight: 500;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.fcp-aviso[hidden] { display: none; }
.fcp-aviso--error { background: var(--fcp-alerta); }
.fcp-aviso--ok { background: var(--fcp-canje); }

/* --------------------------------------------------------------------------
 * Login
 * ----------------------------------------------------------------------- */

.fcp--login { max-width: 420px; padding-top: 2rem; }

.fcp-login {
	background: var(--fcp-superficie);
	border: 1px solid var(--fcp-linea);
	border-radius: var(--fcp-radio);
	padding: 1.5rem;
}

.fcp-login__texto { color: var(--fcp-tinta-suave); font-size: 0.95rem; }

.fcp-login input[type="text"],
.fcp-login input[type="password"] {
	width: 100%;
	min-height: 52px;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--fcp-linea-fuerte);
	border-radius: var(--fcp-radio);
	font-size: 1rem;
}

.fcp-login .button,
.fcp-login input[type="submit"] {
	width: 100%;
	min-height: 52px;
	border: none;
	border-radius: var(--fcp-radio);
	background: var(--fcp-canje);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
 * Escritorio
 * ----------------------------------------------------------------------- */

@media (min-width: 720px) {
	.fcp-totales { grid-template-columns: repeat(4, 1fr); }

	.fcp-tabla__cabecera {
		display: grid;
		grid-template-columns: 10rem 1fr 8rem 9rem 9rem;
		gap: 0.75rem;
		padding: 0.6rem 0.9rem;
		background: var(--fcp-papel);
		border-bottom: 1px solid var(--fcp-linea);
		font-size: 0.7rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--fcp-tinta-suave);
	}

	.fcp-tabla__cabecera span:nth-child(3) { text-align: right; }
	.fcp-tabla__cabecera span:nth-child(5) { text-align: right; }

	.fcp-fila {
		grid-template-columns: 10rem 1fr 8rem 9rem 9rem;
		grid-template-areas: "codigo destinatario saldo estado caducidad";
		align-items: center;
		gap: 0.75rem;
	}

	.fcp-celda--destinatario { font-size: 0.95rem; color: var(--fcp-tinta); }

	.fcp-modal { align-items: center; }
	.fcp-modal__caja { border-radius: 12px; }

	.fcp-ficha { padding: 1.75rem; }
}

/* --------------------------------------------------------------------------
 * Defensa contra los estilos del tema
 *
 * Los <button>, <input>, <select> y <textarea> no heredan el color del texto:
 * usan el que les ponga el tema. Muchos temas los pintan en blanco, y eso
 * dejaba invisibles el código, el saldo y los atajos de importe, que son
 * precisamente los elementos que van dentro de un botón.
 *
 * Aquí se fija todo de forma explícita y con especificidad suficiente para
 * ganarle al tema sin recurrir a !important.
 * ----------------------------------------------------------------------- */

.fcp button,
.fcp input,
.fcp select,
.fcp textarea {
	font-family: inherit;
	background-image: none;
	text-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Las celdas son <span>, así que heredan el color de la fila sin problema. */
.fcp .fcp-fila,
.fcp .fcp-atajo,
.fcp .fcp-canje-form__importe,
.fcp .fcp-canje-form__nota,
.fcp .fcp-nota-form textarea,
.fcp .fcp-login input {
	color: var(--fcp-tinta);
}

.fcp .fcp-fila--usado .fcp-celda--saldo {
	color: var(--fcp-tinta-suave);
}

/* Cada variante de botón conserva su color. */
.fcp .fcp-btn--principal,
.fcp .fcp-btn--camara { color: #fff; }
.fcp .fcp-btn--secundario { color: var(--fcp-tinta); }
.fcp .fcp-btn--texto { color: var(--fcp-tinta); }
.fcp .fcp-btn--peligro { color: var(--fcp-alerta); }
.fcp .fcp-input-codigo { color: var(--fcp-tinta); }

/* wc_price() envuelve el importe en etiquetas propias que algunos temas
   colorean y redimensionan por su cuenta. */
.fcp .amount,
.fcp bdi,
.fcp .woocommerce-Price-amount,
.fcp .woocommerce-Price-currencySymbol {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	background: none;
}

/* --------------------------------------------------------------------------
 * Botón de cerrar la ficha
 *
 * En transparente se perdía sobre el fondo blanco y se le echaba encima la
 * barra de desplazamiento. Ahora es un círculo sólido con borde, y el marcador
 * le deja sitio para que el código no pase por debajo.
 * ----------------------------------------------------------------------- */

.fcp .fcp-modal__caja {
	scrollbar-gutter: stable;
}

.fcp .fcp-modal__cerrar {
	top: 0.75rem;
	right: 0.75rem;
	background: var(--fcp-papel);
	border: 1px solid var(--fcp-linea-fuerte);
	color: var(--fcp-tinta);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	z-index: 2;
}

.fcp .fcp-modal__cerrar:hover {
	background: var(--fcp-tinta);
	border-color: var(--fcp-tinta);
	color: #fff;
}

.fcp .fcp-marcador {
	padding-right: 3.5rem;
}

/* --------------------------------------------------------------------------
 * Atajos de importe
 * ----------------------------------------------------------------------- */

.fcp .fcp-atajo:hover {
	border-color: var(--fcp-tinta);
	background: var(--fcp-papel);
	color: var(--fcp-tinta);
}

/* Enlace para vaciar los filtros. */
.fcp .fcp-borrar-filtros {
	color: var(--fcp-alerta);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fcp .fcp-borrar-filtros:hover {
	background: var(--fcp-alerta-claro);
	border-radius: var(--fcp-radio);
}

/* --------------------------------------------------------------------------
 * El atributo hidden debe ganar siempre
 *
 * Los estilos del autor pisan la hoja del navegador, así que reglas como
 * `.fcp-btn { display: inline-flex }` dejaban visible un elemento marcado con
 * hidden. Era el motivo de que el botón de escanear apareciese en móviles
 * donde no había nada detrás.
 * ----------------------------------------------------------------------- */

.fcp [hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Fila recién actualizada
 *
 * Tras un canje, la fila del listado cambia sola. Un destello breve señala
 * cuál, para que no parezca que no ha pasado nada.
 * ----------------------------------------------------------------------- */

.fcp .fcp-fila--recien-actualizada {
	animation: fcp-destello 1.6s ease-out;
}

@keyframes fcp-destello {
	0%, 25% { background: var(--fcp-canje-claro); }
	100% { background: var(--fcp-superficie); }
}

@media (prefers-reduced-motion: reduce) {
	.fcp .fcp-fila--recien-actualizada {
		animation: none;
		background: var(--fcp-canje-claro);
	}
}