/* Firmar PDF — la hoja de la herramienta (app IA → Herramientas → Firmar PDF).
   Es global (va en _Host) y no un .razor.css porque media pantalla la pinta
   firmarpdf.js —el lienzo de la página y las firmas que se arrastran encima—, y el
   CSS con ámbito de componente no llega a lo que crea el JavaScript. */

/* Dos columnas: el documento manda y la firma acompaña. El alto se hereda del hueco
   que da la ventana (el cuerpo del dialog ya tiene alto propio), así que no hay que
   descontar a ojo lo que ocupan cabecera, pie y márgenes. */
.fpdf { display: flex; gap: 16px; height: 100%; min-height: 340px; align-items: stretch; }

/* ── Columna del documento: la hoja y, pegada debajo, su propia barra ─────── */
.fpdf-col-doc {
	flex: 1 1 auto; min-width: 0; min-height: 0;
	display: flex; flex-direction: column;
	border: 1px solid var(--rz-base-300); border-radius: 10px; overflow: hidden;
	background: var(--play-fondo-sutil);
}

/* Sin PDF la columna entera ES la zona de soltar, y se ve que lo es aunque no estés
   arrastrando nada: el borde discontinuo solo mientras arrastras llegaba tarde. */
.fpdf:not(.fpdf-con-doc) .fpdf-col-doc { border-style: dashed; border-width: 2px; border-color: var(--rz-base-400); }
.fpdf-soltando .fpdf-col-doc { border-color: var(--rz-primary); background: var(--rz-primary-lighter); }

.fpdf-doc { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 16px; }
.fpdf:not(.fpdf-con-doc) .fpdf-doc { align-items: center; overflow: hidden; }

/* La hoja: el lienzo y la capa de firmas comparten sitio y tamaño exactos. */
.fpdf-hoja { position: relative; line-height: 0; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); }
.fpdf-hoja canvas { display: block; }
.fpdf-capa { position: absolute; left: 0; top: 0; }

/* ── Estado vacío ─────────────────────────────────────────────────────────── */
.fpdf-vacio {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	width: 100%; padding: 20px; text-align: center; cursor: pointer;
}
.fpdf-vacio-icono {
	display: flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 50%; margin-bottom: 10px;
	background: var(--rz-primary-lighter); color: var(--rz-primary);
}
.fpdf-vacio-icono .rzi { font-size: 32px; }
.fpdf-vacio-titulo { font-size: 16px; font-weight: 600; color: var(--rz-text-color); }
.fpdf-vacio-texto { font-size: 13px; color: var(--rz-text-secondary-color); }

/* Por qué esta herramienta y no la primera web que sale en Google. Vive aquí y no en
   una franja fija arriba: en cuanto hay documento estorba, y el alto que ocupaba es
   justo el que le falta a la hoja para leerse. */
.fpdf-vacio-nota {
	display: flex; align-items: flex-start; gap: 8px;
	max-width: 460px; margin-top: 20px; padding: 10px 12px;
	border-radius: 8px; background: var(--play-fondo-marcado);
	font-size: 12.5px; line-height: 1.45; text-align: left; color: var(--rz-text-secondary-color);
}
.fpdf-vacio-nota .rzi { font-size: 17px; flex-shrink: 0; margin-top: 1px; }

.fpdf-con-doc .fpdf-vacio { display: none; }
.fpdf:not(.fpdf-con-doc) .fpdf-hoja { display: none; }

/* ── La barra del documento: páginas y de qué archivo hablamos ────────────── */
/* Pasar página gobierna el documento, así que vive con el documento: en la columna
   de la firma estaba lo más lejos posible de lo que mueve. */
.fpdf-barra {
	flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
	padding: 5px 8px; border-top: 1px solid var(--rz-base-300);
	background: var(--rz-base-background); font-size: 13px;
}
.fpdf-barra-pagina { min-width: 104px; text-align: center; font-weight: 500; color: var(--rz-text-color); }
.fpdf-barra-pagina span { font-weight: 400; color: var(--rz-text-tertiary-color); }
.fpdf-barra-sep { flex: 1 1 auto; }
.fpdf-barra-doc {
	display: flex; align-items: center; gap: 5px; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	color: var(--rz-text-secondary-color);
}
.fpdf-barra-doc .rzi { font-size: 17px; flex-shrink: 0; }

/* Elegir archivo va en <label> y no en botón: así el explorador se abre con el clic
   de verdad del usuario, sin pasar por el servidor. Se viste de botón de texto: el
   único relleno de la ventana es «Descargar firmado», que es a lo que se viene. */
.fpdf-cambiar {
	display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
	padding: 5px 10px; border-radius: var(--rz-border-radius); cursor: pointer;
	color: var(--rz-primary); font-size: 13px; font-weight: 500; user-select: none; white-space: nowrap;
}
.fpdf-cambiar:hover { background: var(--rz-primary-lighter); }
.fpdf-cambiar .rzi { font-size: 18px; }

/* ── Una firma colocada sobre la página ───────────────────────────────────── */
/* El borde se ve siempre, flojito: sin él nadie adivina que la firma se arrastra.
   Es un outline de pantalla, no entra en el PDF: el descargado sale limpio. */
.fpdf-firma { position: absolute; cursor: grab; touch-action: none; outline: 1px dashed color-mix(in srgb, var(--rz-primary) 40%, transparent); }
.fpdf-firma img { width: 100%; height: 100%; display: block; pointer-events: none; }
.fpdf-firma:hover, .fpdf-firma-moviendo { outline: 1px dashed var(--rz-primary); }
.fpdf-firma-moviendo { cursor: grabbing; }

.fpdf-firma-x {
	position: absolute; top: -11px; right: -11px; width: 22px; height: 22px;
	border: 0; border-radius: 50%; padding: 0; line-height: 20px; font-size: 16px;
	background: var(--rz-danger); color: #ffffff; cursor: pointer;
	opacity: 0; transition: opacity .12s ease;
}
.fpdf-firma-asa {
	position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px;
	border-radius: 3px; background: var(--rz-primary); border: 2px solid #ffffff;
	cursor: nwse-resize; touch-action: none;
	opacity: 0; transition: opacity .12s ease;
}
.fpdf-firma:hover .fpdf-firma-x, .fpdf-firma:hover .fpdf-firma-asa { opacity: 1; }

/* En pantalla táctil no existe «pasar por encima»: sin esto, quitar o estirar una
   firma desde una tablet es imposible. */
@media (hover: none) {
	.fpdf-firma-x, .fpdf-firma-asa { opacity: 1; }
}

/* ── La columna de la derecha: dibujar la firma y descargar ───────────────── */
.fpdf-lado { flex: 0 0 300px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }

/* El relleno se cambia por la variable que consume Radzen, no por la propiedad: su
   hoja se carga después y `padding` a secas perdería. Es el truco de dinazen.css. */
.fpdf-panel { --rz-card-padding: 12px; }
.fpdf-lado .fpdf-panel { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
.fpdf-panel-titulo {
	display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
	font-size: 13px; font-weight: 600; color: var(--rz-text-secondary-color);
}
.fpdf-panel-titulo .rzi { font-size: 18px; color: var(--rz-primary); }
/* «Borrar» sube al título: abajo, al lado del botón principal, los dos textos se
   partían en dos líneas y el secundario pesaba lo mismo que el que importa. */
.fpdf-panel-titulo .rz-button { margin-left: auto; margin-right: -6px; }
.fpdf-panel-titulo .rz-button .rzi { margin-right: 4px; color: inherit; }
.fpdf-poner { width: 100%; margin-top: 10px; }

.fpdf-pad-caja {
	position: relative;
	border: 1px solid var(--rz-base-300); border-radius: 8px;
	background: #ffffff;   /* la firma se dibuja en negro: el pad es papel, también en oscuro */
	/* Una firma es apaisada: el pad crece con el hueco pero guardando la proporción,
	   que si no en pantalla alta sale un cuadro vertical donde nadie firma bien. */
	flex: 1 1 auto; aspect-ratio: 3 / 2; min-height: 150px; max-height: 300px;
}
.fpdf-pad-caja canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
/* La raya de "firme aquí", como en el papel. */
.fpdf-pad-caja::after {
	content: ""; position: absolute; left: 16px; right: 16px; bottom: 28px;
	border-bottom: 1px solid #d9dce0; pointer-events: none;
}
.fpdf-pad-pista {
	position: absolute; left: 0; right: 0; bottom: 8px;
	/* Gris fijo y no un token: el pad es papel blanco en los dos temas, así que el
	   color de tinta del tema no vale aquí. Este llega a 4,6:1 sobre blanco. */
	text-align: center; font-size: 12px; color: #6b7075; pointer-events: none;
}
.fpdf-pad-usado .fpdf-pad-pista { display: none; }

/* ── Cuántas firmas llevas y qué ha ido mal ───────────────────────────────── */
.fpdf-estado { display: flex; align-items: center; gap: 6px; padding: 0 2px; font-size: 13px; color: var(--rz-text-tertiary-color); }
.fpdf-estado .rzi { font-size: 18px; }
.fpdf-estado-ok { color: var(--rz-text-secondary-color); }
.fpdf-estado-ok .rzi { color: var(--rz-success); }

/* Es un problema, así que se ve como un problema: en gris neutro se leía como un pie
   de página y la gente volvía a darle al botón sin enterarse. */
.fpdf-aviso {
	display: none; align-items: flex-start; gap: 8px;
	padding: 9px 11px; border-radius: 8px; font-size: 13px; line-height: 1.45;
	background: var(--rz-danger-lighter); color: var(--rz-danger-dark);
}
.fpdf-aviso-visible { display: flex; }
.fpdf-aviso .rzi { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* Descargar va detrás de lo que hay que leer antes, no clavado abajo del todo: pegado
   al fondo quedaba medio palmo de nada entre el aviso y el botón, y el ojo tenía que
   saltárselo para encontrar la única acción que importa. */
.fpdf-fin { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.fpdf-nota { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: var(--rz-text-tertiary-color); }
.fpdf-nota .rzi { font-size: 15px; }

/* En hueco estrecho la firma se dibuja debajo del documento, no al lado.

   Se mide el CONTENEDOR y no la pantalla: play fija el <meta viewport> a 920 o 1460px
   (js.js), así que una `@media (max-width: 900px)` no salta jamás —ni en un móvil— y
   esto se quedaba en dos columnas de 300px. Con el contenedor salen los tres casos
   que importan: móvil (~840px, apila), escritorio (~1170px, no) y ventana estrecha.
   Es lo mismo que el TPV resuelve con un observador en JavaScript, pero aquí basta
   con CSS. Si el navegador no entiende @container se ignora el bloque y se queda
   en dos columnas, que es exactamente lo que hacía antes. */
.fpdf-hueco { container-type: inline-size; }

@container (max-width: 900px) {
	.fpdf { flex-direction: column; height: auto; }
	/* Alto fijo y no mínimo: el visor mide su hueco para decidir el zoom de la página,
	   así que si el hueco lo marcase la propia página se estarían midiendo el uno al
	   otro y el observador de tamaño no pararía de repintar. */
	.fpdf-col-doc { height: 52vh; }
	.fpdf-lado { flex: 0 0 auto; overflow: visible; }
}