/* Copia del certificato medico: the picker (camera or file) in the management app and in the members' app, the copy
   on the member page, the copies waiting in Scadenze, the rejection reasons. Every class starts with cm-; the shared
   pieces (card, btn, pill, vd-cert form grid, aiuto-pop popups, ma-card, ma-btn, ma-cta) come from the base sheets. */

/* ------------------------------------------------------------------------------------------------ picker (both apps) */
.cm-pick { display: grid; gap: 8px; min-width: 0 }
.cm-pick-btns { display: flex; flex-wrap: wrap; gap: 8px }
.cm-pick-btns label { position: relative; flex: 1 1 140px; min-height: 44px; margin: 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; user-select: none }
.cm-pick-btns label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand-primary) 55%, white); outline-offset: 2px }
.cm-pick.has-file .cm-pick-btns label { opacity: .72 }
/* the camera button only where there is a camera to hold: phones and tablets */
@media (hover: hover) and (pointer: fine) { .cm-pick-btns .cm-cam { display: none } }
.cm-chosen { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere }
.cm-chosen:empty { display: none }
.cm-chosen.is-error { color: var(--ko); font-weight: 600 }
.cm-thumb { flex: none; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: rgba(0, 0, 0, .06); animation: cm-in .22s ease-out }
.cm-name { flex: 1 1 auto; min-width: 0 }
.cm-off { flex: none; min-height: 44px; padding: 0 6px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
@keyframes cm-in { from { opacity: 0; transform: scale(.96) } }
@media (prefers-reduced-motion: reduce) { .cm-thumb { animation: none } }

/* ------------------------------------------------------------------------------------------------ management app */
.gx .vd-cert .cm-field { grid-column: 1 / -1; min-width: 0 }
.gx .cm-lab { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 14px; color: var(--ink-2) }
.gx .cm-lab small { font-weight: 500; color: var(--ink-3) }
.gx .cm-pick-btns .btn { min-height: 44px }
.gx .cm-file { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-2) }
.gx .cm-file > span { flex: 1 1 auto; min-width: 0; font-weight: 600 }
.gx .cm-file small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-3) }
.gx .cm-file .btn { min-height: 44px }

/* a member's copy waiting on the member page */
.gx .cm-attesa { margin: 12px 0 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--warn) 30%, white); border-radius: 12px; background: var(--warn-soft) }
.gx .cm-attesa-head { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--ink) }
.gx .cm-attesa-come { margin: 10px 0 0; color: var(--ink-2); font-size: 14px }
.gx .cm-open { width: 100%; min-height: 44px; margin: 12px 0 0 }
.gx .cm-attesa .vd-cert { margin-top: 4px }
.gx .cm-no-row { margin: 4px 0 0 }

/* Scadenze: the copies to look at come first, across the whole width */
.gx .vd-scad > .cm-verifica { grid-column: 1 / -1 }
.gx .vd-pop .cm-open { margin: 4px 0 2px }
@media (max-width: 899px) {
  .gx .cm-verifica .vd-row-act .btn { min-height: 44px }
}

/* rejection: frequent reasons as chips that fill the field */
.gx .cm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px }
.gx .cm-chip { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 600 13.5px/1.2 var(--font); text-align: left; cursor: pointer }
.gx .cm-chip:hover { border-color: var(--brand-primary) }
.gx .cm-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 55%, white); outline-offset: 2px }
.gx .cm-no input[type=text] { width: 100% }

/* ------------------------------------------------------------------------------------------------ members' app */
.ma .cm-m-row .ma-pill { flex: none }
.ma .ma-pill.cm-warn { background: rgba(255, 196, 77, .16); color: #FFC44D }
.ma .cm-m { margin-top: 12px; gap: 12px }
.ma .cm-m-lead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px }
.ma .cm-m-lead p { margin: 0; color: var(--testo); font-size: 14.5px; line-height: 1.45 }
.ma .cm-m-lead .aiuto { flex: none; margin: 0 }
.ma .cm-pick-btns .ma-btn { flex: 1 1 140px; height: auto; min-height: 48px; margin: 0 }
.ma .cm-pick-btns label:has(input:focus-visible) { outline: 3px solid var(--acc); outline-offset: 3px }
.ma .cm-chosen { color: var(--testo) }
.ma .cm-chosen.is-error { color: var(--ko) }
.ma .cm-thumb { background: var(--ghisa2) }
.ma .cm-m .cm-send { margin: 2px 0 0; height: 52px; font-size: 18px }
.ma .cm-m .cm-send[disabled] { opacity: .65; cursor: progress }
@media (max-width: 560px) {
  /* inside the yellow box the half column is too narrow for «Non agonistico» */
  .gx .cm-attesa .vd-cert > div:has(select) { grid-column: 1 / -1 }
}

/* ------------------------------------------------------------------------------------------------ consent to keep it
   (Domain\ConsensoSalute): its state in the Certificato zone, «Consenso raccolto su carta» in the desk's forms, the
   checkbox and the withdrawal in the members' app */
.gx .cm-consenso { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 4px; font-size: .92rem; color: var(--ink-2) }
.gx .cm-consenso .pill { flex: none }
.gx .cm-carta { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); cursor: pointer; font-weight: 600 }
.gx .cm-carta input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--brand-primary) }
.gx .cm-carta small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-3); margin-top: 2px }
.gx .cm-carta:has(input:focus-visible) { outline: 3px solid var(--brand-primary); outline-offset: 2px }
.ma .cs-m { margin-top: 12px; gap: 12px }
.ma .cs-m p { margin: 0; color: var(--testo); font-size: 14.5px; line-height: 1.45 }
.ma .cs-m .pv-check { background: transparent }
.ma .cs-m details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--testo) }
.ma .cs-nota { margin: 6px 0 0; color: var(--tenue); font-size: 13.5px; line-height: 1.45 }
.ma .cs-tesserato { margin: 12px 16px 0 }
.ma .cs-m form { display: flex; flex-direction: column; gap: 10px }
.ma .cs-m .ma-btn { flex: none; margin: 0; width: 100% }
.ma .pv-nota { margin: 4px 0 0; font-size: 14px }