/* La sezione «Richiami» della webapp (richiami.js), e i richiami nella
   scheda del paziente. Dopo webapp.css, con le sue regole: tutto alto
   almeno 44 px, i colori dello studio (css/colori.css), niente che allarga
   la pagina. */

/* ============ le quattro viste, coi loro numeri ============ */

.ric-viste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.ric-vista {
  min-width: 0; min-height: 60px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: 1px; padding: 8px 12px;
  border: 1px solid var(--bordo); border-radius: 14px; background: var(--carta); box-shadow: var(--ombra-1);
  text-align: left; color: var(--testo-2); font: inherit; cursor: pointer; touch-action: manipulation;
}
.ric-vista__n { font-size: 21px; font-weight: 750; line-height: 1.1; color: var(--testo); }
.ric-vista__nome { max-width: 100%; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ric-vista[aria-pressed="true"] { background: var(--blu-tenue); border-color: var(--blu); box-shadow: 0 0 0 1px var(--blu); color: var(--blu-scuro); }
.ric-vista[aria-pressed="true"] .ric-vista__n { color: var(--blu); }

/* Filtri e Nuovo richiamo; sotto, i filtri accesi con la X */
/* «Nuovo richiamo» ha più posto di «Filtri», così resta su una riga anche a 360 px */
.ric-barra { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; margin-bottom: 8px; }
.ric-filtri__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--blu); color: #fff; font-size: 12px; display: inline-grid; place-items: center; }
.ric-filtri-attivi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-width: 0; }
.ric-filtri-attivi[hidden] { display: none; }
.ric-filtro {
  position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 38px; padding: 0 8px 0 12px;
  border: 1px solid var(--blu-bordo); border-radius: 999px; background: var(--blu-chiaro); color: var(--blu-scuro);
  font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; touch-action: manipulation;
}
.ric-filtro::after { content: ''; position: absolute; inset: -3px 0; }
.ric-filtro svg { width: 16px; height: 16px; flex: none; }
.ric-spiega { margin: 0 2px 10px; }

/* ============ un richiamo nell'elenco ============ */

.ric-lista { min-width: 0; }
.ric-elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ric-carta {
  display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden;
  border: 1px solid var(--bordo); border-radius: 16px; background: var(--carta); box-shadow: var(--ombra-1);
}
.ric-carta--scaduto { border-left: 5px solid var(--rosso); }
.ric-carta__apri {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; padding: 12px 12px 10px 14px;
  border: 0; background: none; text-align: left; color: var(--testo); font: inherit; cursor: pointer; touch-action: manipulation;
}
.ric-carta__apri:active { background: var(--blu-tenue); }
.ric-carta__riga { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ric-carta__riga--testa { align-items: flex-start; justify-content: space-between; }
.ric-carta__chi { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ric-carta__nome { font-size: 16px; }
.ric-carta__chi small { font-size: 13px; }
/* la prestazione e il medico: se non ci stanno insieme, il medico va sotto (mai coi puntini al posto del nome) */
.ric-carta__riga--cosa { flex-wrap: wrap; row-gap: 4px; }
.ric-carta__riga--cosa .etichetta { flex: 0 1 auto; min-width: 0; }
.ric-carta__riga--cosa > .muto { flex: none; max-width: 100%; }
.ric-carta__ha { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--blu); font-weight: 600; }
.ric-carta__ha svg { width: 15px; height: 15px; flex: none; }
.ric-carta__azioni { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
html[data-guscio="telefono"] .ric-carta__azioni .btn { padding: 0 6px; gap: 6px; }
/* sui telefoni stretti le tre parole senza icone: con l'icona «WhatsApp» non ci starebbe */
@media (max-width: 400px) {
  html[data-guscio="telefono"] .ric-carta__azioni .btn svg { display: none; }
}
.ric-quando { flex: none; display: grid; justify-items: end; line-height: 1.2; text-align: right; }
.ric-quando strong { font-size: 13.5px; color: var(--testo-2); }
.ric-quando small { font-size: 12px; color: var(--testo-3); }
.ric-quando--scaduto strong { color: var(--rosso); }
.ric-quando--oggi strong { color: var(--blu); }
/* il messaggio WhatsApp del richiamo: partito, in partenza, o da chiamare */
.ric-wa { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--testo-2); }
.ric-wa svg { width: 16px; height: 16px; flex: none; color: var(--whatsapp); }
.ric-wa--ok { color: #0B5A40; }
.ric-wa--no, .ric-wa--no svg { color: var(--giallo); }

/* ============ il foglio di un richiamo ============ */

.ric-dati { grid-template-columns: max-content minmax(0, 1fr); align-items: center; font-size: 14.5px; }
.ric-dati dd .etichetta { max-width: 100%; }
.ric-dati__app { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ric-azioni-foglio .ric-annulla { grid-column: 1 / -1; }
.ric-scorciatoie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: -4px; }
html[data-guscio="telefono"] .ric-scorciatoie .btn[aria-pressed="true"] { background: var(--blu-chiaro); border-color: var(--blu-bordo); color: var(--blu-scuro); }
@media (min-width: 480px) { .ric-scorciatoie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============ i richiami nella scheda del paziente ============ */

.ric-del-paziente { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ric-riga {
  width: 100%; min-height: 58px; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--bordo); border-radius: 12px; background: var(--carta); text-align: left; color: var(--testo); font: inherit;
  cursor: pointer; touch-action: manipulation;
}
.ric-riga:active { background: var(--blu-tenue); }
.ric-riga__quando { display: grid; grid-template-columns: minmax(0, 1fr); line-height: 1.2; }
.ric-riga__quando strong { font-size: 14px; }
.ric-riga__quando small { font-size: 12px; color: var(--testo-3); }
.ric-riga__quando small.ric-quando--scaduto { color: var(--rosso); font-weight: 600; }
.ric-riga__quando small.ric-quando--oggi { color: var(--blu); font-weight: 600; }
/* minmax(0, 1fr): la pastiglia di una prestazione dal nome lungo finisce coi puntini invece di allargare la pagina.
   Con justify-items: start ogni pezzo è largo quanto il suo testo: anche la riga sotto («Dott. Verdi ·
   appuntamento mer 28 ott, 10:00», una-riga) va tenuta dentro, se no allarga la pagina (Chrome a 399 punti). */
.ric-riga__cosa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; justify-items: start; }
.ric-riga__cosa .etichetta, .ric-riga__cosa .una-riga { max-width: 100%; }

/* un telefono grande o un tablet: le quattro viste su una riga */
@media (min-width: 600px) {
  .ric-viste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}