/*
 * v19 · Trabajar sin señal.
 *
 * La banda de pendientes es lo único que le dice a la persona que lo que
 * registró está en el teléfono y todavía no llegó al servidor. Tiene que
 * verse siempre, aunque esté al final de una pantalla larga.
 */

.offline-box{
	position:fixed;
	left:50%;
	bottom:calc(16px + env(safe-area-inset-bottom,0px));
	transform:translateX(-50%);
	z-index:119;
	width:calc(100% - 24px);
	max-width:470px;
	max-height:52vh;
	overflow-y:auto;
	padding:13px 15px;
	border:1px solid var(--line);
	border-left:5px solid #946318;
	border-radius:13px;
	background:var(--surface,#fff);
	box-shadow:0 14px 34px rgba(6,38,92,.26);
	color:var(--ink);
	font-size:12.5px;
	line-height:1.45;
}
.offline-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.offline-head b{font-size:13px;color:#946318}
.offline-head span{color:var(--muted,#6d818b);font-size:11px;font-weight:750}
.offline-head button{
	padding:6px 11px;border:0;border-radius:8px;
	background:var(--blue,#087db8);color:#fff;font-size:11px;font-weight:800;cursor:pointer;
}
.offline-box ul{margin:0;padding:0 0 0 16px;list-style:disc}
.offline-box li{margin:0 0 4px}
.offline-box li small{display:block;color:var(--muted,#6d818b);font-size:11px}
.offline-nota{margin:9px 0 0;color:var(--muted,#6d818b);font-size:11px;line-height:1.45}
.offline-rechazos{margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.offline-rechazos b{display:block;margin-bottom:5px;color:#b3261e;font-size:12px}
.offline-rechazos button{
	margin-top:8px;padding:5px 10px;border:1px solid var(--line);border-radius:8px;
	background:transparent;color:var(--muted,#6d818b);font-size:11px;font-weight:750;cursor:pointer;
}

/* Marca de un registro que se hizo sin conexión. */
.sin-senal{
	display:inline-block;
	margin-left:6px;
	padding:1px 7px;
	border-radius:20px;
	background:#fff5df;
	color:#946318;
	font-size:10px;
	font-weight:800;
	white-space:nowrap;
}

@media(max-width:900px){
	.offline-box{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}

/* La versión instalada, a la vista en Configuración: sirve para saber si una
   actualización llegó de verdad al sitio. */
.version-instalada{
	display:grid;
	gap:2px;
	padding:9px 14px;
	border:1px solid var(--line);
	border-radius:11px;
	background:var(--surface,#fff);
	color:var(--muted,#6d818b);
	font-size:11px;
	font-weight:750;
	text-align:right;
	white-space:nowrap;
}
.version-instalada b{color:var(--ink);font-size:14px;font-weight:850}