/*
 * Telefono (Team del professionista): regole SOLO per schermi larghi meno
 * di 768 px. Il foglio va caricato con media="(max-width: 767.98px)" da
 * resources/views/includes/telefono-css.blade.php: sul computer e sul
 * tablet non viene applicato, quindi la loro impaginazione non cambia.
 *
 * Pagine: doctors/team/index (le figure), doctors/team/figura (chi e',
 * tariffa, prenotazione) e doctors/team/appuntamento. Le loro regole sono
 * scritte nella vista (tutte da #tm): qui solo misure e disposizione per
 * il telefono, con gli stessi colori e gli stessi componenti.
 * Misure di riferimento: testi >= 12,8 px, campi 16 px (niente zoom di
 * iPhone), bersagli da toccare >= 44 px.
 */

/* ================================================================
   0. CONTENITORE E TESTATA (tutte e tre le pagine)
   ================================================================ */
/* Il corpo della pagina ha gia' 20 px di margine sui telefoni: il Team non
   ne aggiunge altri, cosi' le carte usano tutta la larghezza utile. */
body.d-flex #tm {
    padding-left: 0;
    padding-right: 0;
    padding-top: .6rem;
}
#tm a.tm-torna { min-height: 44px; }
#tm .tm-occhiello,
#tm .tm-figura-area { font-size: .8rem; }
/* L'occhiello sta sul fondo della pagina (piu' scuro del bianco delle
   carte): di giorno il ciano della casa un gradino piu' scuro regge i 4,5:1. */
html[data-tema="giorno"] #tm .tm-occhiello { color: #155E75; }

/* Distintivi e stati: leggibili senza strizzare gli occhi. */
#tm :is(.tm-distintivo, .tm-stato) { font-size: .8rem; padding: .25rem .65rem; }

/* Collegamento in fondo ("Come funziona il Team"): bersaglio pieno. */
#tm .tm-piede a.tm-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
html[data-tema="giorno"] #tm .tm-piede a.tm-link { color: #155E75; }

/* ================================================================
   1. LE FIGURE (doctors/team/index)
   ================================================================ */
#tm .tm-figura { padding: .95rem .9rem; gap: .8rem; }
#tm .tm-figura-breve,
#tm .tm-app-chi { font-size: .875rem; }
#tm a.tm-app { padding: .75rem .85rem; }

/* ================================================================
   2. UNA FIGURA (doctors/team/figura)
   ================================================================ */
#tm .tm-carta { padding: 1rem .95rem; }
#tm .tm-temi li { font-size: .82rem; padding: .35rem .7rem; }

/* Le regole "#tm .tm-carta p" della vista vincono su quelle dei paragrafi
   con una classe propria: l'aiuto, il sottotitolo dei passati, l'errore e
   la scelta fatta tornano ai loro colori e alle loro misure. */
#tm .tm-carta p.tm-aiuto {
    margin: .35rem 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--doc-text-muted);
}
#tm .tm-carta p.tm-sottotitolo {
    margin: 1.1rem 0 .5rem;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--doc-text-muted);
}
#tm .tm-carta p.tm-errore {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: #FCA5A5;
}
html[data-tema="giorno"] #tm .tm-carta p.tm-errore { color: #B91C1C; }
#tm .tm-carta p.tm-scelto { margin: 0; color: var(--doc-text-strong); font-weight: 700; }

/* Prenotazione: giorni e orari in una griglia regolare di quattro colonne,
   ogni casella alta almeno 52 px (niente righe sfalsate). */
#tm .tm-gruppo legend,
#tm .tm-gruppo > label { font-size: .8rem; }
#tm .tm-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
#tm .tm-chip {
    min-width: 0;
    min-height: 52px;
    padding: .4rem .2rem;
    font-size: .9rem;
}
#tm .tm-chip[hidden] { display: none; }
#tm .tm-chip small { font-size: .8rem; }
#tm .tm-altri {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: .35rem;
}

/* Videochiamata / Telefono: due caselle uguali quando ci stanno, una
   sotto l'altra sui telefoni piu' stretti. */
#tm .tm-scelte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}
#tm .tm-scelta span {
    width: 100%;
    min-height: 48px;
    justify-content: center;
}

/* Campi a 16 px e alti 48: iPhone non ingrandisce la pagina. */
#tm .tm-campo {
    font-size: 16px;
    min-height: 48px;
}
#tm textarea.tm-campo { min-height: 96px; }

/* Il pulsante che invia la richiesta: a tutta larghezza. */
#tm .tm-modulo .tm-btn,
#tm .tm-scrivi .tm-btn,
#tm .tm-evidenza .tm-btn {
    width: 100%;
    min-height: 48px;
}
#tm .tm-carta .tm-nota { font-size: .875rem; }

/* ================================================================
   3. L'APPUNTAMENTO (doctors/team/appuntamento)
   ================================================================ */
#tm .tm-dati dt { font-size: .8rem; }
/* Telefono ed e-mail del consulente: si toccano su 44 px. */
#tm .tm-dati dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    overflow-wrap: anywhere;
}
/* Entra nella videochiamata, Accetta, Scrivi, Annulla: uno sotto l'altro,
   a tutta larghezza. Nella conferma dell'annullamento "Si', annulla" e
   "No" restano affiancati, meta' e meta'. */
#tm .tm-blocco > .tm-btn { width: 100%; min-height: 48px; }
#tm .tm-azioni {
    flex-direction: column;
    align-items: stretch;
}
#tm .tm-azioni > .tm-btn { width: 100%; min-height: 48px; }
#tm .tm-conferma .tm-azioni { flex-direction: row; }
#tm .tm-conferma .tm-azioni > .tm-btn { flex: 1 1 0; width: auto; }
#tm .tm-conferma label { font-size: .875rem; }
#tm .tm-carta h2 { overflow-wrap: anywhere; }