/* ===== Barche interattive: ricreazione fedele del tabellone /barche del gestionale (jckite/src/stili/barche.css, prefisso .br-) =====
   Stessi colori, misure, pallini, stati, riquadro "Da mettere in barca" tratteggiato arancio, riga del turno con la tinta della mattina. */
.br { --br-navy: #163459; --br-azzurro: #07bce7; --br-azzurrino: #91dcf5; --br-chiaro: #eef9fd; --br-bordo: #d9edf6; --br-muted: #5d6e86;
    --br-ok: #0f9d6b; --br-attenzione: #f59e0b; --br-critico: #dc2626; --br-turno: #f59e0b; --br-turno-soft: #fff6e0;
    position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #fcfcfc; color: var(--br-navy);
    font: 400 14px/1.4 var(--sans); user-select: none; -webkit-user-select: none; }
.br svg { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; }

/* testa della pagina: titolo, data, chip */
.br-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 2px 4px; }
.br-titolo { display: flex; align-items: baseline; gap: 8px; }
.br-titolo svg { align-self: center; font-size: 18px; color: var(--br-azzurro); }
.br-titolo b { font-size: 17px; font-weight: 600; }
.br-titolo small { font-size: 13px; color: var(--br-muted); }
.br-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.br-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: #fff; border: 1px solid var(--br-bordo); font-size: 12.5px; color: var(--br-muted); white-space: nowrap; }
.br-chip svg { font-size: 12px; color: var(--br-azzurro); }
.br-chip b { color: var(--br-navy); font-weight: 600; }

/* pulsanti (inv-btn del gestionale, misura "piccolo") */
.br-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--br-bordo); background: #fff; color: var(--br-navy); font: inherit; font-size: 12.5px; font-weight: 600;
    transition: background .15s, box-shadow .15s, transform .05s, border-color .15s, opacity .15s; }
.br-btn svg { font-size: 13px; }
.br-btn:hover { background: var(--br-chiaro); }
.br-btn:active { transform: translateY(1px); }
.br-btn:disabled { opacity: .55; cursor: default; }
.br-btn.is-primary { background: var(--br-azzurro); border-color: var(--br-azzurro); color: var(--lp-navy-profondo); box-shadow: 0 4px 12px rgba(7, 188, 231, .28); }
.br-btn.is-primary:hover:not(:disabled) { background: var(--lp-azzurro-hover); }
.br-btn.is-suggerito { animation: br-anello 1.6s infinite; }
@keyframes br-anello { 0% { box-shadow: 0 4px 12px rgba(7, 188, 231, .28), 0 0 0 0 rgba(145, 220, 245, .7); } 100% { box-shadow: 0 4px 12px rgba(7, 188, 231, .28), 0 0 0 14px rgba(145, 220, 245, 0); } }

/* la riga del turno: testa con icona e tinta, numeri, azioni */
.br-riga { border-radius: 14px; border: 1px solid var(--br-bordo); background: #fff; overflow: hidden; }
.br-riga-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px;
    background: var(--br-turno-soft); border-bottom: 1px solid var(--br-bordo); border-left: 5px solid var(--br-turno); }
.br-riga-icona { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--br-turno); font-size: 17px; box-shadow: 0 1px 3px rgba(22, 52, 89, .12); }
.br-riga-titolo { display: flex; flex-direction: column; }
.br-riga-titolo b { font-size: 15px; font-weight: 600; }
.br-riga-titolo small { color: var(--br-muted); font-size: 12px; }
.br-riga-numeri { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: #44546a; margin-left: 6px; font-variant-numeric: tabular-nums; }
.br-riga-numeri b { color: var(--br-navy); font-size: 15px; font-weight: 600; margin-right: 3px; }
.br-riga-azioni { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.br-badge-vento { display: none; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #fde8e8; color: var(--br-critico); font-size: 12px; font-weight: 600; }
.br-riga.is-annullato { --br-turno: #8a99ad; --br-turno-soft: #f1f4f7; }
.br-riga.is-annullato .br-badge-vento { display: inline-flex; }
.br-riga.is-annullato .br-tabellone { opacity: .55; }
.br-riga.is-annullato .br-persona { cursor: default; }

/* anteprima della proposta di Autoplan: barra navy */
.br-anteprima { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 10px 0;
    padding: 9px 14px; border-radius: 12px; background: var(--br-navy); color: #fff; font-size: 13px; }
.br-anteprima.is-visibile { display: flex; animation: br-sale .25s var(--uscita) both; }
@keyframes br-sale { from { opacity: 0; transform: translateY(-6px); } }
.br-anteprima > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.br-anteprima > span:first-child svg { color: var(--br-azzurrino); font-size: 14px; }
.br-anteprima b { font-weight: 600; }
.br-anteprima-azioni { display: flex; gap: 8px; }
.br-anteprima .br-btn:not(.is-primary) { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.br.is-anteprima .br-barca:not(.br-terra) { border-style: dashed; }

/* tabellone: colonne affiancate che scorrono */
.br-tabellone { display: flex; gap: 12px; overflow-x: auto; padding: 10px; align-items: flex-start; scrollbar-width: thin; scrollbar-color: var(--br-azzurrino) transparent; }
.br-barca { --br-colore: var(--br-azzurro); flex: 0 0 272px; min-width: 240px; background: #fff; border: 1px solid var(--br-bordo); border-radius: 14px;
    box-shadow: 0 2px 8px rgba(22, 52, 89, .06); display: flex; flex-direction: column; overflow: hidden; transition: border-color .2s, background .2s, outline-color .15s; }
.br-barca-testa { padding: 10px 12px; border-bottom: 1px solid var(--br-bordo); background: linear-gradient(180deg, #fff, #f7fcfe); }
.br-barca.is-sopra { outline: 2px dashed var(--br-azzurro); outline-offset: -3px; background: var(--br-chiaro); }
.br-barca.is-sopra .br-barca-testa { background: transparent; }
.br-barca-nome { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.br-barca-nome b { font-weight: 600; }
.br-barca-nome svg { color: #b45309; font-size: 15px; }
.br-barca-segno { width: 10px; height: 10px; border-radius: 50%; background: var(--br-colore); flex: 0 0 auto; box-shadow: 0 0 0 2px var(--br-turno-soft); }
.br-barca-numeri { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.br-barca-numeri small, .br-barca-testa > small { color: var(--br-muted); font-size: 12px; }
.br-barca-corpo { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 90px; }
.br-barca-vuota { border: 1px dashed var(--br-bordo); border-radius: 10px; padding: 18px 10px; text-align: center; color: #8a99ad; font-size: 13px; }
.br-barca.is-affollata { border-color: var(--br-attenzione); }
.br-barca.is-oltre { border-color: var(--br-critico); }
/* "Da mettere in barca": prima colonna, tratteggiata e arancio chiaro (lezioni del turno senza barca) */
.br-terra { background: #fffaf0; border-style: dashed; border-color: #f5c77e; }
.br-terra .br-barca-testa { background: transparent; border-bottom-color: #f5e0b8; }
.br-terra.is-sopra { outline-color: #b45309; background: #fff3dc; }

/* riempimento: un pallino per posto */
.br-pallini { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.br-pallino { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--br-azzurrino); background: #fff; transition: background .2s, border-color .2s; }
.br-pallino.is-scomodo { border-style: dashed; border-color: #c6d3df; }
.br-pallino.is-pieno { background: var(--br-azzurro); border-color: var(--br-azzurro); }
.br-pallino.is-stretto { background: var(--br-attenzione); border-color: var(--br-attenzione); }
.br-pallino.is-oltre { background: var(--br-critico); border-color: var(--br-critico); }
.br-stato { display: inline-block; align-self: flex-start; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: #eef2f6; color: var(--br-muted); }
.br-stato--comoda { background: #e3f7ee; color: var(--br-ok); }
.br-stato--piena { background: var(--br-chiaro); color: #0a7299; }
.br-stato--affollata { background: #fff4e0; color: #b45309; }
.br-stato--oltre { background: #fde8e8; color: var(--br-critico); }

/* gruppi per istruttore e schede persona */
.br-gruppo { border-radius: 10px; background: #f7fbfd; padding: 6px; border: 1px solid #e6f1f7; }
.br-gruppo-testa { display: flex; align-items: center; gap: 6px; padding: 2px 4px 6px; font-size: 13px; }
.br-gruppo-testa svg { color: var(--br-azzurro); font-size: 14px; }
.br-gruppo-testa b { font-weight: 600; }
.br-gruppo-testa small { margin-left: auto; color: var(--br-muted); font-variant-numeric: tabular-nums; }
.br-gruppo-persone { display: flex; flex-direction: column; gap: 5px; }
.br-persona { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--br-bordo);
    border-left: 3px solid var(--br-colore); border-radius: 9px; padding: 6px 8px; cursor: grab; touch-action: none;
    transition: border-color .15s, box-shadow .15s, opacity .15s, transform .35s var(--uscita); }
.br-persona:hover { border-color: var(--br-azzurro); box-shadow: 0 4px 10px rgba(22, 52, 89, .1); }
.br-persona.is-nuova { border-left-style: dashed; }
.br-persona.is-shuttle { border-left-color: #0f9d8a; }
.br-persona.is-shuttle .br-persona-icona { color: #0f9d8a; }
.br-persona-icona { color: var(--br-azzurro); width: 16px; display: inline-flex; justify-content: center; font-size: 15px; }
.br-persona-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.br-persona-testo b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-persona-testo small { font-size: 11.5px; color: #6b7a90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-persona-segni { display: inline-flex; gap: 5px; align-items: center; color: #0f9d8a; font-size: 13px; }
/* mentre si trascina: l'originale sbiadito, il clone sopra tutto (fuori dal tabellone che scorre) */
.br-persona.is-origine { opacity: .35; box-shadow: none; cursor: grabbing; }
.br-persona.is-clone { position: absolute; z-index: 60; pointer-events: none; transition: none; cursor: grabbing;
    box-shadow: 0 18px 36px rgba(22, 52, 89, .3); rotate: 1.2deg; scale: 1.03; }
.br-persona.is-suggerita::after { content: ""; position: absolute; inset: -1px; border-radius: 9px; animation: br-anello 1.6s infinite; pointer-events: none; }
/* shuttle sulla barca: rider indipendenti, zona verde acqua */
.br-shuttle { font-size: 12px; color: #8a99ad; padding: 4px; border-radius: 10px; display: flex; flex-direction: column; gap: 5px; }
.br-shuttle:not(.is-vuota) { background: #f2fbf8; border: 1px solid #cdeee3; }
.br-shuttle.is-vuota { border: 1px dashed var(--br-bordo); }
.br-shuttle-testa { display: flex; align-items: center; gap: 6px; padding: 0 2px; }
.br-shuttle-testa svg { color: #0f9d8a; font-size: 13px; }

/* freccia "c'è altro a destra" e linguette delle colonne: servono quando le colonne non stanno tutte (da telefono) */
.br-tabellone-box { position: relative; }
.br-avanti { position: absolute; right: 6px; top: 64px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
    display: grid; place-items: center; background: var(--br-navy); color: #fff; cursor: pointer; box-shadow: 0 8px 20px rgba(22, 52, 89, .35);
    opacity: 0; scale: .7; pointer-events: none; transition: opacity .25s, scale .25s var(--uscita); }
.br-avanti svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.br-avanti.is-visibile { opacity: 1; scale: 1; pointer-events: auto; }
.br-avanti.is-visibile:not(.is-usata) svg { animation: br-spinta 1.4s ease-in-out infinite; }
@keyframes br-spinta { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }
.br-pagine { display: none; }
@media (max-width: 760px) {
    .br-pagine { display: flex; gap: 6px; padding: 10px 10px 0; overflow-x: auto; scrollbar-width: none; }
    .br-pagina { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--br-bordo);
        background: #fff; color: var(--br-muted); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
    .br-pagina span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
    .br-pagina.is-on { background: var(--br-navy); border-color: var(--br-navy); color: #fff; }
    .br-pagina.is-on span { opacity: 1; background: var(--br-azzurro); }
}

/* guida e messaggi (stessa veste dell'agenda interattiva) */
.br-guida-passi { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.br-guida-passi i { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal;
    font-size: 11.5px; font-weight: 700; background: #fff; color: var(--br-muted); box-shadow: inset 0 0 0 1px var(--br-bordo); }
.br-guida-passi i.is-ora { background: var(--br-azzurro); color: var(--lp-navy-profondo); box-shadow: none; }
.br-guida-passi i.is-fatto { background: #d1fae5; color: #05603a; box-shadow: none; }
.br-guida.is-fine .br-guida-passi i { background: #6ee7b7; color: #05603a; }
.br-guida.is-nuova { animation: br-guida-nuova .7s var(--uscita); }
@keyframes br-guida-nuova { 0% { scale: .97; box-shadow: 0 0 0 0 rgba(7, 188, 231, .6); } 100% { scale: 1; box-shadow: 0 0 0 12px rgba(7, 188, 231, 0); } }
.br-guida { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 12px; background: var(--lp-tenue); color: var(--br-navy); font-size: 13.5px; }
.br-guida-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--br-azzurro); color: var(--lp-navy-profondo); font-size: 12px; font-weight: 700; }
.br-guida p { margin: 0; flex: 1; }
.br-guida b { font-weight: 600; }
.br-guida button, .br-guida a { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 600; color: var(--lp-azzurro-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.br-guida.is-fine { background: var(--br-navy); color: #fff; }
.br-guida.is-fine .br-guida-n { background: #6ee7b7; color: #05603a; }
.br-guida.is-fine a, .br-guida.is-fine button { color: var(--br-azzurrino); }
.br-toast { position: absolute; left: 50%; bottom: 74px; z-index: 40; translate: -50% 12px; max-width: min(92%, 460px); padding: 10px 14px; border-radius: 10px;
    background: var(--br-navy); color: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 12px 30px rgba(22, 52, 89, .3); opacity: 0; pointer-events: none;
    transition: opacity .25s, translate .25s var(--uscita); }
.br-toast.is-neg { background: #fef2f2; color: #b42318; box-shadow: 0 12px 30px rgba(180, 35, 24, .18), inset 0 0 0 1px #fecaca; }
.br-toast.is-visibile { opacity: 1; translate: -50% 0; }

@media (max-width: 760px) {
    .br { padding: 10px; gap: 10px; }
    .br-riga-numeri { margin-left: 0; flex-basis: 100%; }
    .br-riga-azioni { margin-left: 0; width: 100%; }
    .br-riga-azioni .br-btn { flex: 1 1 40%; min-height: 40px; justify-content: center; }
    .br-riga-azioni .br-btn.is-primary { flex-basis: 100%; }
    /* colonne alte quanto il tabellone: si può lasciare la scheda in qualsiasi punto della barca, non solo sul riquadro */
    .br-tabellone { scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 14px; align-items: stretch; }
    .br-barca { flex: 0 0 80vw; min-width: 0; scroll-snap-align: center; }
    .br-persona { padding: 9px 8px; }
    .br-anteprima-azioni { width: 100%; }
    .br-anteprima-azioni .br-btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
    .br-guida { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .br-btn.is-suggerito, .br-persona.is-suggerita::after, .br-anteprima.is-visibile, .br-avanti svg, .br-guida.is-nuova { animation: none !important; }
    .br-persona, .br-toast, .br-pallino, .br-barca { transition: none; }
}

/* scheda sopra il gruppo di un altro istruttore: si accende il gruppo (l'allievo passa a lui) */
.br-gruppo { transition: outline-color .15s, background .15s; outline: 2px solid transparent; outline-offset: 1px; }
.br-gruppo.is-sopra { outline-color: var(--br-azzurro); background: #e7f8fd; }