/* Laguna Live – stile dei componenti. Tutte le regole sono sotto .ll per non toccare il tema. */
.ll {
	--ll-bg: #ffffff;
	--ll-surface: #f3f6f7;
	--ll-ink: #14232b;
	--ll-muted: #5b6b73;
	--ll-line: #d6e0e4;
	--ll-accent: #0f6e7a;
	--ll-c-bassa-eccezionale: #5a4fcf;
	--ll-c-bassa: #3f7fbf;
	--ll-c-normale: #2e8b57;
	--ll-c-sostenuta: #c98a00;
	--ll-c-molto-sostenuta: #d9541e;
	--ll-c-eccezionale: #b3122e;
	--ll-c-nd: #8a979d;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--ll-ink);
	background: var(--ll-bg);
	border: 1px solid var(--ll-line);
	border-radius: 10px;
	padding: 16px;
	margin: 0 0 1.5em;
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
}
.ll *, .ll *::before, .ll *::after { box-sizing: border-box; }
.ll .ll-title { margin: 0 0 12px; font-size: 1.15em; }
.ll .ll-muted { color: var(--ll-muted); }
.ll .ll-small { font-size: .85em; }
.ll .ll-r { text-align: right; }
.ll .ll-empty { margin: 0; color: var(--ll-muted); }
.ll .ll-stale { display: block; color: var(--ll-c-sostenuta); font-size: .85em; }
.ll .ll-credits { margin: 12px 0 0; font-size: .75em; color: var(--ll-muted); }
.ll .ll-credits a { color: inherit; }

/* Colori per fascia */
.ll .ll-c-bassa-eccezionale { --ll-c: var(--ll-c-bassa-eccezionale); }
.ll .ll-c-bassa { --ll-c: var(--ll-c-bassa); }
.ll .ll-c-normale { --ll-c: var(--ll-c-normale); }
.ll .ll-c-sostenuta { --ll-c: var(--ll-c-sostenuta); }
.ll .ll-c-molto-sostenuta { --ll-c: var(--ll-c-molto-sostenuta); }
.ll .ll-c-eccezionale { --ll-c: var(--ll-c-eccezionale); }
.ll .ll-c-nd { --ll-c: var(--ll-c-nd); }

/* Livello attuale */
.ll .ll-now { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 4px 0 12px; }
.ll .ll-now-val { display: flex; align-items: baseline; gap: 4px; color: var(--ll-c); }
.ll .ll-num { font-size: 3em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ll .ll-unit { font-size: 1.1em; font-weight: 600; }
.ll .ll-now-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ll .ll-badge { display: inline-block; align-self: flex-start; background: var(--ll-c); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: .85em; }

.ll .ll-alert { background: color-mix(in srgb, var(--ll-c-molto-sostenuta) 12%, var(--ll-bg)); border-left: 4px solid var(--ll-c-molto-sostenuta); padding: 10px 12px; border-radius: 6px; margin: 0 0 12px; font-size: .95em; }

/* Tabelle */
.ll .ll-table { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: .95em; font-variant-numeric: tabular-nums; }
.ll .ll-table caption { text-align: left; font-weight: 600; padding: 0 0 6px; }
.ll .ll-table th { text-align: left; font-weight: 600; color: var(--ll-muted); font-size: .85em; border-bottom: 1px solid var(--ll-line); padding: 6px 4px; }
.ll .ll-table td { border-bottom: 1px solid var(--ll-line); padding: 7px 4px; }
.ll .ll-table tr[class*="ll-c-"] td:first-child { border-left: 4px solid var(--ll-c); padding-left: 8px; }
.ll .ll-table strong { color: var(--ll-c, inherit); }

/* Grafico */
.ll .ll-chart { margin: 4px 0 8px; }
.ll .ll-chart svg { width: 100%; height: auto; display: block; }
.ll .ll-chart figcaption { font-size: .75em; margin-top: 2px; }
.ll .ll-chart .ll-line { fill: none; stroke: var(--ll-accent); stroke-width: 2.2; }
.ll .ll-chart .ll-area { fill: var(--ll-accent); opacity: .1; }
.ll .ll-chart .ll-grid { stroke: var(--ll-line); stroke-width: 1; }
.ll .ll-chart .ll-v { stroke-dasharray: 2 4; }
.ll .ll-chart .ll-th { stroke-width: 1; stroke-dasharray: 5 4; }
.ll .ll-chart .ll-th-80 { stroke: var(--ll-c-sostenuta); }
.ll .ll-chart .ll-th-110 { stroke: var(--ll-c-molto-sostenuta); }
.ll .ll-chart .ll-th-140 { stroke: var(--ll-c-eccezionale); }
.ll .ll-chart .ll-axis { fill: var(--ll-muted); font-size: 11px; font-family: inherit; }
.ll .ll-chart .ll-pt { fill: var(--ll-c); stroke: var(--ll-bg); stroke-width: 1.5; }
.ll .ll-chart .ll-nowline { stroke: var(--ll-ink); stroke-width: 1; opacity: .5; }
.ll .ll-chart .ll-obs { fill: var(--ll-ink); stroke: var(--ll-bg); stroke-width: 2; }

/* Meteo */
.ll .ll-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ll .ll-tile { background: var(--ll-surface); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ll .ll-tile strong { font-size: 1.35em; font-variant-numeric: tabular-nums; }
.ll .ll-hours { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; }
.ll .ll-hour { flex: 0 0 auto; min-width: 64px; text-align: center; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--ll-line); border-radius: 8px; font-variant-numeric: tabular-nums; }

/* Partenze */
.ll .ll-search input { width: 100%; padding: 8px 10px; border: 1px solid var(--ll-line); border-radius: 8px; font: inherit; margin-bottom: 10px; background: var(--ll-bg); color: var(--ll-ink); }
.ll .ll-stop-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ll .ll-deps { list-style: none; margin: 0; padding: 0; }
.ll .ll-dep { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ll-line); }
.ll .ll-line { display: inline-block; min-width: 2.6em; text-align: center; font-weight: 700; border-radius: 6px; padding: 3px 6px; font-size: .9em; }
.ll .ll-dir { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll .ll-plat { display: inline-block; border: 1px solid var(--ll-line); border-radius: 4px; padding: 0 5px; font-size: .75em; color: var(--ll-muted); vertical-align: 1px; }
.ll .ll-when { text-align: right; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.ll .ll-when .ll-muted { font-size: .8em; }

/* Mappa */
.ll .ll-map { width: 100%; border-radius: 8px; z-index: 0; }
.ll .ll-map .leaflet-popup-content { margin: 10px 12px; }
.ll.ll-placeholder { text-align: center; color: var(--ll-muted); }

.ll.ll-loading { opacity: .7; transition: opacity .2s; }
.ll .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }