/* ╔══════════════════════════════════════════════════════════╗
   ║  LAS HOJAS — y cómo se comportan en un ordenador           ║
   ╚══════════════════════════════════════════════════════════╝

   Esta página se diseñó para un móvil y se hizo bien: una columna de 440 px y
   tres hojas que suben desde abajo. En un portátil de 1440 px eso se rompía de
   una forma concreta y fea — las hojas seguían midiendo 440 px y seguían
   pegadas al borde inferior, así que aparecía una tira estrecha encajada en la
   parte de abajo de una pantalla enorme, con el contenido a un palmo del filo.

   Lo que hace este archivo:
     · `.da-hoja` es el velo y `.da-hoja__caja` la hoja, para las TRES (billete,
       formulario y ficha de zona). Antes cada una traía sus estilos a mano.
     · Por debajo de 720 px se comportan como siempre: suben desde abajo,
       ancladas al borde, con la esquina de arriba redondeada. No se toca nada
       de lo que ya funcionaba en el móvil.
     · A partir de 720 px dejan de ser cajones y pasan a ser tarjetas centradas,
       con las cuatro esquinas redondeadas, un poco más anchas, y entran con un
       escalado corto en vez de subiendo. En un ratón, una hoja que sube del
       borde inferior no significa nada; centrada, sí.

   El punto de corte son 720 px y no 768 porque una tablet en vertical (768)
   tiene sitio de sobra para la tarjeta centrada, y porque a 720 la columna
   principal (440 + aire) ya está claramente rodeada de fondo.

   ⚠️ Todo lo de aquí es CSS de posición. Ni un tamaño de letra cambia entre
   móvil y ordenador: el contenido es el mismo y se lee igual. */

/* ─────────── el velo ─────────── */

.da-hoja {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(10, 10, 10, 0.42);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overscroll-behavior: contain;
}

/* ─────────── la hoja ─────────── */

.da-hoja__caja {
	width: 100%;
	max-width: 440px;
	max-height: 94vh;
	max-height: 94dvh; /* dvh evita que la barra del navegador móvil la corte */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: var(--da-paper);
	border-radius: 22px 22px 0 0;
	box-shadow: 0 -10px 40px rgba(47, 36, 24, 0.22);
	animation: sheetUp 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* En ordenador: tarjeta centrada, no cajón. */
@media (min-width: 720px) {
	.da-hoja {
		align-items: center;
		padding: 24px;
	}

	.da-hoja__caja {
		max-width: 480px;
		max-height: 88vh;
		border-radius: 24px;
		box-shadow: 0 24px 70px rgba(47, 36, 24, 0.34);
		animation: hojaEntra 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	}
}

@keyframes hojaEntra {
	from {
		opacity: 0;
		transform: scale(0.96) translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  EL BILLETE                                                ║
   ╚══════════════════════════════════════════════════════════╝

   La forma viene de la Ficha del alta del Design System, con su regla: el
   billete es el dibujo, nunca el vocabulario. Aquí no se lee "matriz" ni
   "picado" en ningún sitio — se lee "tu correo" y "sellar".

   Tres piezas, y cada una trabaja:
     · la banda de arriba, que lo identifica de un vistazo
     · el troquel, que es lo que lo convierte en billete y no en tarjeta
     · el talón, donde va lo que rellenas */

.da-billete {
	background: var(--da-paper);
	font-family: var(--font-body);
}

.da-billete__banda {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px 10px 16px;
	background: var(--da-ink-warm);
	color: var(--da-paper);
}

.da-billete__marca {
	font: 8px/1 var(--font-mono);
	letter-spacing: 0.14em;
	color: var(--da-accent);
}

/* 44 px, como todo lo pulsable de esta página. Los márgenes negativos son lo
   que impide que un botón de 44 engorde una banda de 34. */
.da-billete__x {
	flex: none;
	width: 44px;
	height: 44px;
	margin: -10px -9px -10px 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--da-paper);
	font-size: 13px;
	cursor: pointer;
}

.da-billete__x:hover {
	background: rgba(255, 255, 255, 0.22);
}

.da-billete__cuerpo {
	padding: 16px 18px 4px;
}

/* La ruta: salida → llegada. Es adorno honesto — dice cuándo acaba esto. */
.da-billete__ruta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.da-billete__parada {
	flex: none;
}

.da-billete__parada.is-fin {
	text-align: right;
}

.da-billete__lbl {
	display: block;
	font: 7px/1 var(--font-mono);
	letter-spacing: 0.12em;
	color: var(--da-gray);
}

.da-billete__val {
	display: block;
	margin-top: 3px;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: var(--fw-black);
	letter-spacing: var(--tracking-tight);
	color: var(--text-primary);
}

.da-billete__via {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.da-billete__via i {
	flex: 1 1 auto;
	height: 2px;
	background: repeating-linear-gradient(90deg, rgba(47, 36, 24, 0.24) 0 5px, transparent 5px 10px);
}

.da-billete__via span {
	font-size: 13px;
	line-height: 1;
}

.da-billete__titular {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 26px;
	font-weight: var(--fw-black);
	letter-spacing: -0.045em;
	line-height: 1.02;
	color: var(--text-primary);
	text-wrap: balance;
}

.da-billete__sub {
	margin: 7px 0 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--da-gray);
	text-wrap: pretty;
}

/* El aviso de la llave. Es el que evita el error que no se puede arreglar
   después: un correo que no es el de la cuenta se pierde en silencio. */
.da-billete__llave {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin-top: 13px;
	padding: 11px 12px;
	border-radius: var(--radius);
	background: var(--accent-tint);
	border: 1.5px solid rgba(185, 201, 28, 0.55);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--text-primary);
	text-wrap: pretty;
}

.da-billete__llave-i {
	flex: none;
	font-size: 17px;
	line-height: 1.25;
}

.da-billete__llave b {
	background: linear-gradient(transparent 62%, rgba(185, 201, 28, 0.55) 62%);
	font-weight: var(--fw-black);
}

.da-billete__comprobar {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin-top: 2px;
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	color: var(--da-accent-ink);
	text-decoration: underline;
	text-decoration-color: var(--da-accent);
	text-underline-offset: 3px;
}

/* ─────────── el troquel ───────────
   Los dos semicírculos son el agujero del picado. Van con el color del velo
   detrás para que parezcan un hueco de verdad y no dos lunares. */

.da-billete__troquel {
	display: flex;
	align-items: center;
	height: 18px;
	margin: 10px 0 0;
}

.da-billete__troquel i {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--da-veil, rgba(10, 10, 10, 0.42));
}

.da-billete__troquel i:first-child {
	margin-left: -9px;
}

.da-billete__troquel i:last-child {
	margin-right: -9px;
}

.da-billete__troquel span {
	flex: 1 1 auto;
	height: 2px;
	background: repeating-linear-gradient(90deg, rgba(47, 36, 24, 0.28) 0 6px, transparent 6px 12px);
}

/* ─────────── el talón ─────────── */

.da-billete__talon {
	padding: 12px 18px calc(18px + env(safe-area-inset-bottom));
	background: var(--da-paper-soft);
}

.da-billete__campo-lbl {
	display: block;
	margin: 0 0 6px;
	font: 8px/1 var(--font-mono);
	letter-spacing: 0.12em;
	color: var(--da-gray);
	text-transform: uppercase;
}

.da-billete__error {
	margin: 8px 0 0;
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	color: #dc00d3;
}

.da-billete__sug {
	margin: 9px 0 0;
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--da-gray);
}

.da-billete__sug button {
	border: 0;
	border-radius: var(--radius-xs);
	padding: 4px 8px;
	background: rgba(185, 201, 28, 0.32);
	font: var(--fw-black) var(--text-xs) var(--font-body);
	color: var(--da-accent-ink);
	cursor: pointer;
}

.da-billete__accion {
	margin-top: 13px;
}

.da-billete__pie {
	margin: 11px 0 0;
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--da-gray);
	text-align: center;
	text-wrap: pretty;
}

.da-billete__pie b {
	color: var(--text-primary);
	font-weight: var(--fw-black);
}

.da-billete__nuevo {
	margin: 13px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--da-gray-line);
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--da-gray);
	text-align: center;
}

.da-billete__nuevo a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	font-weight: var(--fw-bold);
	color: var(--da-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.da-hoja__caja {
		animation: none;
	}
}

/* ─────────── el formulario ───────────
   Mismo velo y misma caja que el billete; sólo cambian el fondo (gris, para
   que los botones de opción en papel destaquen) y el relleno, que el marcado
   del formulario ya traía puesto por dentro. */

.da-hoja--form {
	z-index: 70;
	background: rgba(10, 10, 10, 0.5);
}

.da-hoja__caja--form {
	background: var(--da-paper-2, #f1f1f1);
	padding: 16px 18px calc(22px + env(safe-area-inset-bottom));
}

@media (min-width: 720px) {
	.da-hoja__caja--form {
		padding: 18px 22px 24px;
	}
}

/* ─────────── la ficha de zona en ordenador ───────────
   Vive en css/mapa.css porque viene del Design System y allí se queda; aquí
   sólo se le cambia el sitio en pantallas grandes, igual que a las otras dos.
   Se hace por separado y no con .da-hoja porque su marcado (velo y hoja como
   hermanos, no anidados) viene del componente y no se toca. */

@media (min-width: 720px) {
	.da-zona__hoja {
		top: 50%;
		bottom: auto;
		left: 50%;
		right: auto;
		transform: translate(-50%, -50%);
		max-width: 480px;
		width: calc(100% - 48px);
		max-height: 86vh;
		border-radius: 24px;
		box-shadow: 0 24px 70px rgba(47, 36, 24, 0.34);
		animation: hojaEntra 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* El tirador es el gesto de arrastrar un cajón. Centrada no hay cajón que
	   arrastrar, así que pasa a ser lo que de verdad hace: cerrar. */
	.da-zona__tirador i {
		width: 34px;
		opacity: 0.55;
	}

	/* El hueco de 64px de abajo era para que el reproductor de música no se
	   comiera el botón de votar. Centrada ya no se pisan. */
	.da-zona__cuerpo {
		padding-bottom: var(--space-6);
	}
}