/* Estils del mòdul FO_ProductionCalendar (fitxer estàtic propi, com fo-production.css —
   els estils de mòduls nous no van a module.scss: module.css es regenera des d'aquell
   fitxer i les regles afegides a mà s'hi perdien).
   Color de la casa: #40b6bd. Semàntics i grisos, de Bootstrap. */

.fo-production-calendar {
    font-size: 16.5px;
    color: #212529;
}

/* ---------------------------------------------------------------- barra superior */

/* La barra es reparteix igual que la fila de sota: la navegació ocupa exactament les
   columnes de dia (per això space-between, amb "Anterior" i "Següent" als extrems del
   calendari) i els controls d'edició queden sobre el plafó d'observacions. */
.fo-pc-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 12px;
}

.fo-pc-toolbar-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}

.fo-pc-toolbar-side {
    flex: 0 0 320px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.fo-pc-week-title {
    font-size: 18.5px;
    font-weight: 700;
    color: #40b6bd;
    padding: 0 6px;
}

.fo-pc-role-chip {
    font-size: 14.5px;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 2px 10px;
    color: #6c757d;
}

/* Els tres elements de la dreta de la barra fan la mateixa alçada i el mateix radi, el més
   petit dels que tenien (el de .fo-pc-act). */
.fo-pc-toolbar-side .fo-pc-act,
.fo-pc-toolbar-side .fo-pc-role-chip {
    box-sizing: border-box;
    height: 30px;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
}

.fo-pc-role-chip-edit {
    border-color: #28a745;
    background: #f1f8f3;
    color: #1e7e34;
}

/* ------------------------------------------------- graella + plafó d'observacions */

/* A l'esquerra la graella, les notes i el repartiment; a la dreta el plafó. El plafó va
   posicionat dins del seu buit perquè no pugui fer créixer la pàgina: fa tota l'alçada de la
   columna de l'esquerra i fa scroll a dins si la setmana té moltes observacions. */
.fo-pc-week-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.fo-pc-week-main {
    flex: 1 1 auto;
    min-width: 0;
}

.fo-pc-observations-slot {
    flex: 0 0 320px;
    position: relative;
}

/* Les notes i el repartiment són cadascuna una altra cosa, així que respiren per sobre. */
.fo-pc-week-main .fo-pc-delivery {
    margin-top: 14px;
}

/* Les taules de notes van més juntes: la pestanya del nom ja fa de separació. */
.fo-pc-week-main .fo-pc-notes {
    margin-top: 6px;
}

/* ---------------------------------------------------------------- taules */

table.fo-pc-board {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid #dee2e6;
}

.fo-pc-board th,
.fo-pc-board td {
    border: 1px solid #dee2e6;
    vertical-align: top;
    padding: 6px 8px;
}

.fo-pc-board th {
    background: #f0f2f1;
    font-weight: 600;
    text-align: left;
}

.fo-pc-day-head {
    text-align: center;
}

.fo-pc-day-name {
    display: block;
    font-size: 16.5px;
    color: #212529;
}

.fo-pc-day-date {
    display: block;
    font-size: 14.5px;
    font-weight: 400;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

.fo-pc-today {
    background: #e6f5f6;
    box-shadow: inset 0 3px 0 #40b6bd;
}

.fo-pc-today .fo-pc-day-name {
    color: #2b8b91;
}

.fo-pc-today-pill {
    display: inline-block;
    background: #40b6bd;
    color: #fff;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 8px;
    padding: 0 6px;
    margin-left: 5px;
    vertical-align: 1px;
}

.fo-pc-row-label {
    font-size: 14.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6c757d;
}

/* Prou alta perquè la graella arribi tota sola a l'alçada que necessita el plafó
   d'observacions amb el formulari desplegat: així les dues columnes acaben al mateix lloc
   i les taules de sota queden enganxades sense forat. */
.fo-pc-slot-cell {
    height: 105px;
}

.fo-pc-band th {
    background: #e9ecef;
    font-size: 14px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #495057;
}

/* ---------------------------------------------------------------- xip de residència */

.fo-pc-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2px 6px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-left: 3px solid #40b6bd;
    border-radius: 2px;
    padding: 3px 6px;
    margin-bottom: 4px;
    font-size: 16px;
}

/* El nom sencer, encara que el xip creixi: hi ha residències amb noms molt semblants. Si no
   hi cap, són les icones (.fo-pc-chip-tools) les que baixen de línia. */
.fo-pc-chip-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

.fo-pc-chip-link {
    color: #40b6bd;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fo-pc-delivery .fo-pc-chip {
    border-left-color: #6c757d;
}

/* ---------------------------------------------------------------- distintius d'estat */

.fo-pc-status {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    cursor: help;
}

.fo-pc-status-ok { background: #28a745; }
.fo-pc-status-pouch { background: #ffc107; color: #493a00; }
.fo-pc-status-customer { background: #fd7e14; }
.fo-pc-status-failed { background: #dc3545; }
.fo-pc-status-cancelled { background: #6c757d; }

.fo-pc-status-pending {
    background: #fff;
    border: 1px dashed #adb5bd;
    color: #adb5bd;
}

/* ---------------------------------------------------------------- diàleg d'excepció */

/* Contorn taronja en repos i ple en apuntar-hi: es veu que hi es sense pintar la barra de
   taronja tot el dia.
   Va sobre .fo-pc-act i SENSE la classe .btn de Bootstrap. El .btn de l'skin
   (styles.min.css) posa border, background-color i color transparents o grisos, te la
   mateixa especificitat que aquesta regla i es carrega DESPRES del CSS del modul: guanyaria
   sempre. Treure-li la classe val mes que barallar-s'hi amb !important. */
/* Doble classe: .fo-pc-act es declara més avall i, amb la mateixa força, la seva vora grisa
   guanyava a la taronja. */
.fo-pc-act.fo-pc-act-exc {
    border-color: #fd7e14;
    color: #b25607;
    font-weight: 600;
}

.fo-pc-act.fo-pc-act-exc i { color: #fd7e14; }

.fo-pc-act.fo-pc-act-exc:hover:not(:disabled),
.fo-pc-act.fo-pc-act-exc:focus:not(:disabled) {
    border-color: #dc6502;
    background: #dc6502;
    color: #fff;
}

.fo-pc-act.fo-pc-act-exc:hover:not(:disabled) i,
.fo-pc-act.fo-pc-act-exc:focus:not(:disabled) i { color: #fff; }

.fo-pc-modal-scrim {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(33, 37, 41, .45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px;
    z-index: 1050;
    overflow-y: auto;
}

.fo-pc-modal {
    background: #fff;
    border-radius: 4px;
    width: 100%;
    max-width: 640px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}

.fo-pc-modal-head {
    background: #40b6bd;
    color: #fff;
    padding: 9px 14px;
    border-radius: 4px 4px 0 0;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fo-pc-modal-close {
    border: none;
    background: none;
    color: #fff;
    font-size: 25.5px;
    line-height: 1;
    padding: 0 2px;
}

.fo-pc-modal-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.fo-pc-modal-body label {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.fo-pc-modal-body label > .form-control {
    margin-top: 3px;
    font-weight: 400;
}

.fo-pc-modal-row {
    display: flex;
    gap: 10px;
}

.fo-pc-modal-row > label {
    flex: 1 1 0;
    min-width: 0;
}

.fo-pc-check {
    display: flex !important;
    align-items: center;
    gap: 7px;
    font-weight: 400 !important;
    font-size: 15.5px !important;
    color: #6c757d !important;
}

.fo-pc-modal-foot {
    border-top: 1px solid #dee2e6;
    padding: 10px 14px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* La previsualització parla amb dates, mai amb números de setmana. */
.fo-pc-preview {
    border: 1px solid #dee2e6;
    border-left: 3px solid #40b6bd;
    border-radius: 2px;
    background: #f8fdfd;
    padding: 8px 10px;
    font-size: 15.5px;
    color: #495057;
}

.fo-pc-preview-title {
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2b8b91;
    font-weight: 700;
    margin-bottom: 4px;
}

.fo-pc-preview-list {
    margin: 0;
    padding-left: 18px;
}

.fo-pc-preview-resume {
    color: #6c757d;
    margin-top: 5px;
}

.fo-pc-preview-empty {
    border-left-color: #ced4da;
    background: #f8f9fa;
    color: #adb5bd;
}

.fo-pc-preview-open,
.fo-pc-preview-bad {
    border-left-color: #fd7e14;
    background: #fff6ee;
    color: #8a4400;
}

.fo-pc-preview-open .fo-pc-preview-title {
    color: #8a4400;
}

/* ---------------------------------------------------------------- excepcions */

.fo-pc-exception {
    margin-bottom: 4px;
    border: 1px solid #fd7e14;
    border-left-width: 3px;
    border-radius: 2px;
    padding: 3px 6px;
    font-size: 15.5px;
    background-color: #fff6ee;
    background-image: repeating-linear-gradient(135deg, rgba(253, 126, 20, .09) 0 6px, transparent 6px 12px);
}

.fo-pc-exception-top {
    display: flex;
    align-items: center;
    gap: 5px;
}

.fo-pc-exception-warn {
    color: #fd7e14;
}

.fo-pc-exception-name {
    flex: 1 1 auto;
    font-weight: 600;
    color: #8a4400;
}

.fo-pc-exception-message {
    font-size: 14px;
    color: #6c757d;
}

/* Xip en pausa: qui pot editar el clica per treure la pausa (sempre amb pregunta). */
.fo-pc-exception-clickable {
    cursor: pointer;
}

.fo-pc-exception-clickable:hover {
    background-color: #ffeedd;
    border-color: #e8590c;
}

.fo-pc-exception-clickable:focus-visible {
    outline: 2px solid #e8590c;
    outline-offset: 1px;
}

/* ---------------------------------------------------------------- observacions */

.fo-pc-observations {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #40b6bd;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.fo-pc-observations-head {
    background: #40b6bd;
    color: #fff;
    padding: 7px 11px;
    font-size: 14.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 700;
}

.fo-pc-observations-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 11px 10px;
}

.fo-pc-observation {
    border-bottom: 1px solid #e9ecef;
    padding: 8px 0;
}

.fo-pc-observation:last-child {
    border-bottom: none;
}

.fo-pc-observation-center {
    font-weight: 700;
    font-size: 16px;
    color: #40b6bd;
}

.fo-pc-observation-note {
    font-size: 15.5px;
    color: #495057;
}

/* Quan l'observació parla d'una sola persona i no de tota la residència. */
.fo-pc-observation-customer {
    font-size: 14.5px;
    color: #2b8b91;
    margin-bottom: 2px;
}

.fo-pc-observation-meta {
    font-size: 13px;
    color: #adb5bd;
}

/* Ancorat al peu, fora de la llista amb scroll, perquè sempre s'hi pugui arribar. */
.fo-pc-observation-form {
    flex: 0 0 auto;
    border-top: 2px solid #40b6bd;
    background: #fff;
    padding: 9px 11px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---------------------------------------------------------------- notes del dia */

.fo-pc-note-cell {
    font-size: 15.5px;
}

/* El nom del tipus, en una pestanya enganxada a la vora de dalt de la taula. Pot ser més ample
   que la primera columna, que no es pot eixamplar. Una sola línia, com les altres etiquetes. */
.fo-pc-notes-tab {
    display: inline-block;
    max-width: 100%;
    padding: 1px 8px;
    border: 1px solid #dee2e6;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.fo-pc-notes .fo-pc-board th,
.fo-pc-notes .fo-pc-board td {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* El "+ Tipus de nota" va fora de les taules: si fos una fila més semblaria que hi ha un
   tipus de nota que es diu així. */
.fo-pc-type-add {
    padding: 6px 2px 0;
}

.fo-pc-type-creator {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* Les notes són el peu de pàgina del calendari, no una altra graella: només fons tenyit
   segons el tipus. Sense la barra lateral dels xips de residència, que les faria semblar
   tan importants com la producció. */
.fo-pc-note {
    background: #f0f0ef;
    padding: 2px 6px;
    margin-bottom: 3px;
    border-radius: 2px;
}

/* Vint colors de tipus de nota, prou clars perquè el text negre s'hi llegeixi. Qui reparteix
   els colors és DayNotes.colorClass: el tipus 21 torna a començar pel primer. */
.fo-pc-note-c1  { background: #e7f0fd; }
.fo-pc-note-c2  { background: #e6f4ea; }
.fo-pc-note-c3  { background: #fef3e2; }
.fo-pc-note-c4  { background: #fce8e6; }
.fo-pc-note-c5  { background: #f3e8fd; }
.fo-pc-note-c6  { background: #e0f4f5; }
.fo-pc-note-c7  { background: #fdf6d8; }
.fo-pc-note-c8  { background: #eceff1; }
.fo-pc-note-c9  { background: #fde8f1; }
.fo-pc-note-c10 { background: #e0f7fa; }
.fo-pc-note-c11 { background: #f0f4c3; }
.fo-pc-note-c12 { background: #efebe9; }
.fo-pc-note-c13 { background: #e8eaf6; }
.fo-pc-note-c14 { background: #f1f8e9; }
.fo-pc-note-c15 { background: #ffe9e0; }
.fo-pc-note-c16 { background: #e0f2ec; }
.fo-pc-note-c17 { background: #f8e7ef; }
.fo-pc-note-c18 { background: #e3f2fd; }
.fo-pc-note-c19 { background: #ede7f6; }
.fo-pc-note-c20 { background: #eceef0; }

/* ---------------------------------------------------------------- controls d'edició */

.fo-pc-add {
    display: inline-block;
    border: 1px dashed #adb5bd;
    background: none;
    border-radius: 2px;
    color: #6c757d;
    font-size: 14.5px;
    padding: 1px 8px;
    margin-top: 3px;
}

.fo-pc-add:hover:not(:disabled) {
    border-color: #40b6bd;
    color: #40b6bd;
}

.fo-pc-remove {
    border: none;
    background: none;
    color: #dc3545;
    font-size: 17.5px;
    line-height: 1;
    padding: 0 2px;
    float: right;
}

.fo-pc-link-button {
    border: none;
    background: none;
    color: #6c757d;
    font-size: 14.5px;
    text-decoration: underline;
    padding: 0;
}

.fo-pc-picker,
.fo-pc-editor {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.fo-pc-editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fo-pc-empty {
    color: #adb5bd;
    font-style: italic;
    font-size: 15.5px;
}

/* Focus visible: els botons del calendari perden el contorn per defecte del skin. */
.fo-pc-add:focus-visible,
.fo-pc-remove:focus-visible,
.fo-pc-link-button:focus-visible {
    outline: 2px solid #40b6bd;
    outline-offset: 1px;
}

@media (max-width: 900px) {
    .fo-pc-toolbar-side {
        flex: 1 1 auto;
        justify-content: flex-start;
    }

    .fo-pc-week-row {
        flex-direction: column;
    }

    .fo-pc-observations-slot {
        flex: 1 1 auto;
        position: static;
        min-height: 220px;
    }

    .fo-pc-observations {
        position: static;
    }
}

/* ---------------------------------------------------------------------------
   v01.00.04: festius, distintiu de pacients en pausa i tria de color.
   --------------------------------------------------------------------------- */

/* Un festiu tenyeix la columna sencera. Els xips no s'esborren, només no es pinten. */
.fo-pc-board th.fo-pc-holiday,
.fo-pc-board td.fo-pc-holiday { background: #fdecea; }

.fo-pc-holiday-tag {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #c9382c;
}

/* Quants pacients d'aquesta residència tenen una pausa aquell dia. */
.fo-pc-chip-people {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 5px;
    border: 1px solid #fd7e14;
    border-radius: 9px;
    background: #fff3e6;
    color: #fd7e14;
    font-size: 0.84rem;
    font-weight: 600;
}

.fo-pc-exception-type {
    margin-left: 6px;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .8;
}

/* Paleta: el que es desa és el número de slot, no el color. */
.fo-pc-colour-picker { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }

.fo-pc-colour-slot {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 4px;
    cursor: pointer;
}

.fo-pc-colour-slot.fo-pc-colour-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #2b8b91; }

.fo-pc-type-creator { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fo-pc-type-colour-label { font-size: 0.99rem; color: #7a8f93; }

.fo-pc-type-swatch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    font-size: 0.94rem;
    color: #7a8f93;
    cursor: pointer;
}

.fo-pc-type-swatch:hover { border-color: #dde8e9; }
.fo-pc-type-swatch span { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .12); }

/* Cerca de medicament del diàleg d'excepció. */

.fo-pc-load-failed { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fo-pc-load-failed .fo-pc-load-hint { font-size: 1.01rem; color: #7a8f93; max-width: 46em; }

/* Setmana que la tasca programada encara no ha creat: la graella es dibuixa buida i
   aquesta franja diu per què. */
.fo-pc-not-planned {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 8px;
    padding: 8px 12px;
    border-left: 3px solid #d9a441;
    background: #fdf6e6;
    border-radius: 3px;
    font-size: 1.01rem;
    color: #6b5320;
}

/* Dins l'horitzó de la tasca programada la setmana hauria d'existir: és una avaria. */
.fo-pc-not-planned.fo-pc-not-planned-missing {
    border-left-color: #d9534f;
    background: #fdeaea;
    color: #8a2b28;
}

/* ══ Pàgines de producció (PRD §6.3 i §6.4) ══════════════════════════════════
   Dosificador per tomes i Full de producció. Els colors segueixen la maqueta:
   teal per a l'acció, taronja per al parcial, vermell per a la pausa. */
.fo-pc-run-page { font-size: 1.01rem; }

.fo-pc-crumbs {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-bottom: 10px; margin-bottom: 14px;
    border-bottom: 1px solid #dde8e9; font-size: 0.99rem;
}
.fo-pc-crumb-back { color: #2b8b91; font-weight: 500; }
.fo-pc-crumb-sep { color: #7a8f93; }
.fo-pc-crumb-here { color: #1d2f33; font-weight: 600; }

.fo-pc-run-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.fo-pc-run-nav { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fo-pc-run-center { font-size: 1.29rem; font-weight: 600; }
/* Full de producció i comprovació: els dies de l'entrada del calendari en què s'ha produït
   alguna cosa, al lloc del dia, en una sola línia. Cantonada petita, com els altres xips. */
.fo-pc-daypills { display: inline-flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.fo-pc-daypill {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 4px;
    border: 1px solid #40b6bd; background: #f2fafb; color: #1d2f33; font-size: 0.96rem;
    line-height: 1.3; white-space: nowrap; cursor: pointer;
}
.fo-pc-daypill b { color: #2b8b91; font-weight: 600; }
.fo-pc-daypill:hover { background: #e3f4f5; }
.fo-pc-dayhead {
    display: flex; align-items: baseline; gap: 10px; margin: 14px 0 8px; padding-bottom: 4px;
    border-bottom: 2px solid #40b6bd; scroll-margin-top: 12px;
}
.fo-pc-dayhead b { font-size: 1.05rem; }
.fo-pc-dayhead span { color: #7a8f93; font-size: 0.94rem; }
.fo-pc-run-chip {
    padding: 5px 12px; border-radius: 4px; border: 1px solid #dde8e9;
    background: #fff; color: #7a8f93; font-size: 0.96rem; white-space: nowrap;
}

/* El dia planificat del dosificador, al costat de la residència: text sol, sense caixa. */
.fo-pc-run-planned { color: #7a8f93; font-size: 0.96rem; white-space: nowrap; }
.fo-pc-run-planned b { font-weight: 600; color: #4a5d61; }

.fo-pc-sect { border: 1px solid #dde8e9; border-radius: 5px; margin-bottom: 10px; overflow: hidden; }
.fo-pc-sect-head {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    background: #f4f8f8; border-bottom: 1px solid transparent; flex-wrap: wrap; cursor: pointer;
}
.fo-pc-sect-open > .fo-pc-sect-head { border-bottom-color: #dde8e9; }
.fo-pc-sect-exc > .fo-pc-sect-head { background: #fdecea; cursor: default; }
.fo-pc-caret { color: #7a8f93; width: 12px; }

/* El botó que obre les bosses d'un pacient al full de producció. Amb vora i nom, perquè es vegi
   que és un botó i què obre; tenyit mentre les bosses són obertes. */
.fo-pc-pouch-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border: 1px solid #7fa9ad; border-radius: 4px;
    background: #fff; color: #1d2f33; font-size: 0.8rem; line-height: 1.5;
    white-space: nowrap; cursor: pointer;
}
.fo-pc-pouch-toggle:hover { background: #eef6f7; border-color: #2b8b91; }
.fo-pc-pouch-toggle i { font-size: 0.7rem; color: #2b8b91; }
.fo-pc-pouch-toggle-on { background: #e3f4f5; border-color: #2b8b91; }
.fo-pc-sect-title { font-weight: 600; font-size: 1.07rem; }
.fo-pc-sect-title-exc { color: #c9382c; }
.fo-pc-sect-rng { color: #7a8f93; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.fo-pc-sect-sp { margin-left: auto; }
.fo-pc-sect-body { padding: 11px 12px; }
.fo-pc-sect-foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 12px; border-top: 1px solid #dde8e9; background: #f4f8f8;
}

table.fo-pc-pat { border-collapse: collapse; width: 100%; }
table.fo-pc-pat th {
    text-align: left; font-size: 0.86rem; letter-spacing: .07em; text-transform: uppercase;
    color: #7a8f93; padding: 4px 7px; border-bottom: 1px solid #dde8e9; font-weight: 600;
}
table.fo-pc-pat td {
    padding: 2px 7px; border-bottom: 1px solid #eef3f3; font-size: 0.96rem; vertical-align: middle;
}
table.fo-pc-pat tr:last-child td { border-bottom: none; }
table.fo-pc-pat td.fo-pc-c { text-align: center; }
table.fo-pc-pat td.fo-pc-mono { font-family: Consolas, ui-monospace, monospace; color: #7a8f93; }
table.fo-pc-pat tr.fo-pc-row-partial td,
table.fo-pc-pat tr.fo-pc-row-drug td { background: #fff3e6; }
table.fo-pc-pat tr.fo-pc-row-blocked td,
table.fo-pc-pat tr.fo-pc-row-stop td { background: #fdecea; color: #7a8f93; }
.fo-pc-prod-note { color: #7a8f93; font-family: Consolas, ui-monospace, monospace; }
.fo-pc-canvis {
    border: 1px solid #dde8e9; border-radius: 3px; padding: 2px 5px; width: 138px;
    font-family: Consolas, ui-monospace, monospace; font-size: 0.91rem;
}

.fo-pc-tag {
    display: inline-block; padding: 0 5px; border-radius: 3px; margin-right: 4px;
    font-family: Consolas, ui-monospace, monospace; font-size: 0.84rem; font-weight: 600;
}
.fo-pc-tag-done { background: #e8f6f7; color: #2b8b91; border: 1px solid #2b8b91; }
.fo-pc-tag-drug { background: #fff3e6; color: #b25c07; border: 1px solid #fd7e14; }
.fo-pc-tag-stop { background: #fdecea; color: #c9382c; border: 1px solid #c9382c; }
.fo-pc-tag-pending { background: #f4f8f8; color: #7a8f93; border: 1px dashed #b9c8cb; }
.fo-pc-tag-checked { background: #e7f0fd; color: #0c447c; border: 1px solid #85b7eb; }

/* La història d'un pacient al dosificador: una etiqueta per tanda, en ordre, amb fletxes. Si no
   hi cap en una línia, salta a la següent sense partir cap etiqueta. */
.fo-pc-hist { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; }
.fo-pc-hist .fo-pc-tag { white-space: nowrap; }
.fo-pc-hist-arrow { color: #9aa9ab; }
/* Dues línies a la columna «Estat»: a dalt la història, a sota els dies ja produïts. */
.fo-pc-hist-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.fo-pc-overlap-tags { display: inline-flex; flex-wrap: wrap; gap: 3px; }

.fo-pc-warn {
    display: flex; gap: 7px; padding: 6px 9px; border-radius: 4px; margin-bottom: 9px;
    background: #fffaf3; border-left: 3px solid #f5a25d; font-size: 0.94rem; color: #6b4508;
}
.fo-pc-warn-red { background: #fff6f5; border-left-color: #e2786e; color: #8f2a20; }
.fo-pc-hint { font-size: 0.91rem; color: #7a8f93; margin: 9px 0 0; }

.fo-pc-field { display: flex; flex-direction: column; gap: 4px; margin-top: 11px; }
.fo-pc-field > label {
    font-size: 0.86rem; letter-spacing: .07em; text-transform: uppercase;
    color: #7a8f93; font-weight: 600; margin: 0;
}
.fo-pc-run-comment { font-size: 0.99rem; }

/* Un botó s'ha de veure com un botó, també apagat: vora prou fosca sobre el peu clar, i apagat
   amb colors propis i no amb la transparència de Bootstrap, que el deixava com un text. */
.fo-pc-btn-teal { background: #40b6bd; border: 1px solid #2b8b91; color: #06272a; font-weight: 600; }
.fo-pc-btn-teal:hover { background: #2b8b91; border-color: #2b8b91; color: #fff; }
.fo-pc-btn-quiet { background: #fff; border: 1px solid #7fa9ad; color: #1d2f33; }
.fo-pc-btn-quiet:hover { background: #eef6f7; border-color: #2b8b91; color: #1d2f33; }
.btn.fo-pc-btn-teal:disabled { background: #dbe9ea; border-color: #cfd8da; color: #7d9295; opacity: 1; }
.btn.fo-pc-btn-quiet:disabled { background: #fff; border-color: #cfd8da; color: #9aa9ab; opacity: 1; }
.fo-pc-btn-ico { margin-right: 6px; }
.fo-pc-btn-orange { background: #fd7e14; border-color: #fd7e14; color: #fff; font-weight: 600; }

/* Full de producció */
.fo-pc-runinfo {
    display: flex; flex-wrap: wrap; gap: 8px 26px;
    padding: 9px 11px; margin-bottom: 11px;
    background: #f4f8f8; border: 1px solid #dde8e9; border-radius: 4px;
}
.fo-pc-ri { display: flex; flex-direction: column; gap: 2px; }
.fo-pc-ri b {
    font-family: Consolas, ui-monospace, monospace; font-size: 0.76rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: #7a8f93;
}
.fo-pc-ri span { font-size: 0.99rem; display: flex; align-items: center; gap: 5px; }
.fo-pc-ri i { font-style: normal; font-size: 0.86rem; color: #7a8f93; margin-left: 6px; }
.fo-pc-ri-pending { color: #7a8f93; }
.fo-pc-time { width: 122px; font-size: 0.96rem; }

/* El comentari que es va escriure al dosificador. Va a fora de la franja de dades i no com una
   dada més: és text lliure i pot ser llarg, i encabir-lo en una columna el partiria en escala. */
.fo-pc-run-note {
    padding: 8px 11px; margin: -5px 0 11px; border-radius: 4px;
    background: #fffbf0; border: 1px solid #f0e3c4;
}
.fo-pc-run-note b {
    display: block; margin-bottom: 3px;
    font-family: Consolas, ui-monospace, monospace; font-size: 0.76rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: #9a8144;
}
.fo-pc-run-note span { font-size: 0.99rem; white-space: pre-wrap; }

.fo-pc-rowmenu { border: 0; background: none; color: #7a8f93; padding: 0 4px; line-height: 1; }
/* El comentari d'una incidencia, al costat del distintiu i amb la fila tancada. Es retalla amb
   punts suspensius en comptes d'eixamplar la fila: el text sencer va al title. */
.fo-pc-note-text {
    margin-left: 6px; color: #7a8f93; font-size: 0.91rem;
    display: inline-block; max-width: 100%; vertical-align: bottom;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------- revisio en linia */

/* El control de revisio d'una fila. "Correcte" es tan ample com les altres dues juntes: es la
   que es prem gairebe sempre, i una diana gran es una diana rapida. */
.fo-pc-seg { display: inline-flex; border-radius: 5px; overflow: hidden; border: 1px solid #dde8e9; }

.fo-pc-seg-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    font: inherit; line-height: 1.05; padding: 3px 6px; cursor: pointer;
    border: 0; border-right: 1px solid #dde8e9; background: #fff; color: #7a8f93;
    transition: background .12s, color .12s;
}
.fo-pc-seg-btn:last-child { border-right: 0; }
.fo-pc-seg-btn i { font-size: 0.8rem; line-height: 1; }
/* nowrap: "Incidencia" partit en dues linies feia el boto el doble d'alt.
   line-height sense unitats i no en rem: "Incidencia" porta accent i cedilla, i amb 1.05
   l'accent fregava la icona. En rem quedaria clavat a uns pixels i es trencaria el dia que
   l'etiqueta canvii de mida. */
.fo-pc-seg-btn span {
    font-size: 0.68rem; letter-spacing: .01em; white-space: nowrap; line-height: 1.3;
}
.fo-pc-seg-btn:disabled { opacity: .5; cursor: not-allowed; }
.fo-pc-seg-btn:focus-visible { outline: 2px solid #40b6bd; outline-offset: -2px; }

.fo-pc-seg-done { width: 126px; }
.fo-pc-seg-drug { width: 78px; }
.fo-pc-seg-stop { width: 64px; }

.fo-pc-seg-done i { color: #28a745; }
.fo-pc-seg-drug i { color: #b25c07; }
.fo-pc-seg-stop i { color: #c9382c; }

.fo-pc-seg-btn:hover:not(:disabled):not(.fo-pc-seg-on) { background: #f2f7f7; color: #40555a; }

/* Triada: s'omple del color del seu estat, el mateix que tindra la fila. */
.fo-pc-seg-on { font-weight: 600; }
.fo-pc-seg-done.fo-pc-seg-on { background: #28a745; color: #fff; }
.fo-pc-seg-drug.fo-pc-seg-on { background: #fd7e14; color: #fff; }
.fo-pc-seg-stop.fo-pc-seg-on { background: #c9382c; color: #fff; }

/* Blanc escrit a sobre de la icona I de l'etiqueta, i no heretat del boto: qualsevol regla de
   l'skin que toqui directament un span o una i d'aqui dins guanyaria al color heredat, per
   fluixa que fos. Amb la classe del boto al davant queda per damunt de res que pugui venir
   de fora. */
.fo-pc-seg-btn.fo-pc-seg-on i,
.fo-pc-seg-btn.fo-pc-seg-on span { color: #fff; }

/* La nota s'edita alla mateix. Sense marc mentre no cal: una fila correcta ha de ser tranquilla,
   pero s'hi pot escriure igualment sense obrir res. */
.fo-pc-note-cell { padding-right: 14px !important; }
.fo-pc-note-input {
    width: 100%; font: inherit; font-size: 0.88rem; color: #162326;
    padding: 3px 8px; border-radius: 4px;
    border: 1px solid transparent; background: transparent;
}
.fo-pc-note-input::placeholder { color: #a8b7ba; }
.fo-pc-note-input:hover:not(:disabled) { border-color: #dde8e9; background: #fff; }
.fo-pc-note-input:focus { border-color: #40b6bd; background: #fff; outline: none; }
.fo-pc-note-input-open { border-color: #f0d3b4; background: #fff; }

/* Files de la taula de revisio, pel color del seu estat. */
table.fo-pc-pat.fo-pc-rev-table tr.fo-pc-row-drug td {
    background: #fff8f0;
}
table.fo-pc-pat.fo-pc-rev-table tr.fo-pc-row-stop td {
    background: #fdf2f1;
    color: #162326;
}
table.fo-pc-pat.fo-pc-rev-table tr.fo-pc-row-stop td input { cursor: auto; }
table.fo-pc-pat.fo-pc-rev-table tr.fo-pc-row-stop td button { cursor: pointer; }
table.fo-pc-pat.fo-pc-rev-table td { vertical-align: middle; }

/* La columna Estat es la que cedeix espai: la resta van a mida fixa. */
table.fo-pc-pat td.fo-pc-estat { max-width: 0; }

/* Qui ha revisat la fila: el nom mana, l'hora va a sota i mes fluixa. */
.fo-pc-rev { display: flex; flex-direction: column; line-height: 1.15; }
.fo-pc-rev b { font-weight: 500; font-size: 0.88rem; }
.fo-pc-rev i {
    font-style: normal; font-size: 0.72rem; color: #7a8f93;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fo-pc-incidence { padding: 10px 12px !important; }
.fo-pc-incidence-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.fo-pc-incidence-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Els botons d'aquest editor porten el seu propi aspecte sencer i no compten amb el .btn de
   Bootstrap: en aquest skin de DNN no hi arriba, i sense caixa propia es veien com text pla. */
.fo-pc-choice, .fo-pc-act {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 0.9rem; line-height: 1.2;
    padding: 5px 11px; border-radius: 5px; cursor: pointer;
    border: 1px solid #dde8e9; background: #fff; color: #40555a;
    transition: background .12s, border-color .12s, color .12s;
}
.fo-pc-choice i, .fo-pc-act i { font-size: 0.85em; }
.fo-pc-choice:disabled, .fo-pc-act:disabled { opacity: .55; cursor: not-allowed; }
.fo-pc-choice:focus-visible, .fo-pc-act:focus-visible {
    outline: 2px solid #40b6bd; outline-offset: 1px;
}

/* Cada tria porta el color del distintiu que en sortira: apagat mentre no esta triada, ple
   quan ho esta, de manera que la fila ja s'assembla al que quedara. */
.fo-pc-choice-done i    { color: #2b8b91; }
.fo-pc-choice-drug i    { color: #b25c07; }
.fo-pc-choice-stop i    { color: #c9382c; }
.fo-pc-choice-pending i { color: #7a8f93; }

.fo-pc-choice:hover:not(.fo-pc-choice-on) { border-color: #b9c8cb; background: #f7fafa; }

.fo-pc-choice-on { font-weight: 600; }
.fo-pc-choice-done.fo-pc-choice-on    { background: #e8f6f7; border-color: #2b8b91; color: #1d5f63; }
.fo-pc-choice-drug.fo-pc-choice-on    { background: #fff3e6; border-color: #fd7e14; color: #8a4405; }
.fo-pc-choice-stop.fo-pc-choice-on    { background: #fdecea; border-color: #c9382c; color: #96271e; }
.fo-pc-choice-pending.fo-pc-choice-on { background: #f4f8f8; border-color: #b9c8cb; color: #4c5f63; }

/* Desa mana sobre Cancel.la: es l'accio que tanca la feina. */
.fo-pc-act-quiet:hover { border-color: #b9c8cb; background: #f7fafa; }
.fo-pc-act-save {
    background: #40b6bd; border-color: #40b6bd; color: #06272a; font-weight: 600;
}
.fo-pc-act-save:hover:not(:disabled) { background: #2b8b91; border-color: #2b8b91; color: #fff; }

/* Les dues accions en bloc de la capcalera d'una tanda. Van de contorn i no farcides: totes
   dues toquen TOTS els pacients d'un clic, i un boto ple crida a premer-lo sense llegir-lo.
   El color s'omple en passar-hi per sobre, que es quan ja s'ha apuntat a proposit. */
.fo-pc-act-ok   { border-color: #9ed3ac; color: #1e7e34; background: #fff; }
.fo-pc-act-ok i { color: #28a745; }
.fo-pc-act-ok:hover:not(:disabled) {
    background: #28a745; border-color: #28a745; color: #fff;
}
.fo-pc-act-ok:hover:not(:disabled) i { color: #fff; }

.fo-pc-act-fail   { border-color: #eeb4ae; color: #c9382c; background: #fff; }
.fo-pc-act-fail i { color: #c9382c; }
.fo-pc-act-fail:hover:not(:disabled) {
    background: #c9382c; border-color: #c9382c; color: #fff;
}
.fo-pc-act-fail:hover:not(:disabled) i { color: #fff; }

/* La capcalera es clicable sencera per obrir/tancar; els botons no han d'heretar-ho. */
.fo-pc-sect-head .fo-pc-act { cursor: pointer; }

.fo-pc-field label em { font-style: normal; color: #7a8f93; font-weight: 400; }
.fo-pc-error { color: #c9382c; font-size: 0.91rem; }

/* ---------------------------------------------------------------------------
   Rang de tomes, etiqueta de màquina, files en pausa i el panell del distintiu.
   --------------------------------------------------------------------------- */

.fo-pc-sect-warn { font-size: 0.91rem; color: #c9382c; margin-right: 4px; }

/* L'etiqueta és configuració del dosificador, no d'aquesta tanda: viu a la barra. */
.fo-pc-label-field { display: inline-flex; align-items: center; gap: 6px; }
.fo-pc-label-field > label {
    margin: 0;
    font-family: Consolas, ui-monospace, monospace;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7a8f93;
}
.fo-pc-label-field input { width: 94px; font-size: 0.96rem; }

/* Una fila en pausa per una excepció: apagada sencera, no només la casella. Es queda a la
   llista perquè es vegi que hi és i per què no entra. */
table.fo-pc-pat tr.fo-pc-row-blocked td,
table.fo-pc-pat tr.fo-pc-row-stop td {
    background: #fdecea;
    color: #96a7ab;
}
table.fo-pc-pat tr.fo-pc-row-blocked td input,
table.fo-pc-pat tr.fo-pc-row-stop td input { cursor: not-allowed; }
table.fo-pc-pat tr.fo-pc-row-blocked .fo-pc-tag-stop { color: #c9382c; }

/* El panell del distintiu 👤 N. Obre amb el ratolí i amb el tabulador: la informació que
   estalvia baixar al dosificador no pot dependre de tenir-hi el cursor a sobre. */
.fo-pc-pop-host { position: relative; display: inline-flex; }
.fo-pc-pop-host .fo-pc-chip-people { cursor: help; }

.fo-pc-pop {
    position: absolute;
    z-index: 30;
    left: 0;
    bottom: calc(100% + 6px);
    display: none;
    box-sizing: border-box;
    width: 450px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0 10px 6px;
    background: #fff;
    border: 1px solid #fd7e14;
    border-radius: 4px;
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .45);
    text-align: left;
    white-space: normal;
}

/* On no hi cap a dalt, s'obre a sota; on no hi cap a la dreta, s'alinea a la dreta del distintiu.
   Ho decideix CustomerStopsPopover en obrir-se. */
.fo-pc-pop.fo-pc-pop-below { bottom: auto; top: calc(100% + 6px); }
.fo-pc-pop.fo-pc-pop-right { left: auto; right: 0; }

/* Pont invisible sobre els 6px entre el distintiu i el panell: sense ell, el ratolí perd el
   :hover en travessar-los i el panell es tanca abans de poder-hi desplaçar res. */
.fo-pc-pop-host::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 8px;
    display: none;
}
.fo-pc-pop-host:hover::after { display: block; }
.fo-pc-pop-host:has(.fo-pc-pop-below)::after { bottom: auto; top: 100%; }

.fo-pc-pop-host:hover .fo-pc-pop,
.fo-pc-pop-host:focus-within .fo-pc-pop { display: block; }

.fo-pc-pop-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 -10px 4px;
    padding: 7px 10px 5px;
    background: #fff;
    border-bottom: 1px solid #eef4f4;
    font-family: Consolas, ui-monospace, monospace;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7a8f93;
}
.fo-pc-pop-head .fo-pc-tag { flex: 0 0 auto; letter-spacing: normal; }

.fo-pc-pop-list { list-style: none; margin: 0; padding: 0; }
.fo-pc-pop-row {
    display: block;
    padding: 4px 0;
    border-top: 1px solid #eef4f4;
    font-size: 0.91rem;
}
.fo-pc-pop-row:first-child { border-top: 0; }

/* Model B: el nom i les dates a la primera línia; el motiu a sota, amb tota l'amplada i com a
   molt dues línies (el text sencer surt al passar-hi el ratolí). */
.fo-pc-pop-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.fo-pc-pop-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    color: #1d2f33;
}
.fo-pc-pop-reason {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.86rem;
    color: #7a8f93;
}
.fo-pc-pop-when {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: Consolas, ui-monospace, monospace;
    font-size: 0.86rem;
    color: #7a8f93;
}

/* ---------------------------------------------------------------------------
   Repartiment arrossegable, medicament afegit i la llista sense medicació.
   --------------------------------------------------------------------------- */

/* L'ordre d'un dia de repartiment és el de la ruta, així que s'arrossega. El cursor i la nansa
   només apareixen per a qui pot editar. */
.fo-pc-chip-draggable { cursor: grab; }
.fo-pc-chip-draggable:active { cursor: grabbing; }
.fo-pc-chip-draggable::before {
    content: "⠿";
    margin-right: 2px;
    color: #adb5bd;
    font-size: 14px;
    line-height: 1;
}

.fo-pc-drag-source { opacity: .45; }

/* La línia marca ON caurà, no què s'arrossega: la referència que falta mentre es mou. */
.fo-pc-drag-over { box-shadow: 0 -2px 0 0 #40b6bd; }

/* Els pacients que no prenen res. Secció informativa: tancada, grisa i sense cap control. */
.fo-pc-sect-info .fo-pc-sect-head { background: #f1f3f5; }
.fo-pc-sect-info .fo-pc-sect-title { color: #495057; }

/* Canvis de tomes amb un recompte que no quadra: el servidor el rebutjaria i no generaria res
   per a ningú de la tanda, així que val més dir-ho abans d'enviar-la. */
.fo-pc-canvis-bad {
    border-color: #c9382c;
    background: #fdecea;
}

/* ---------------------------------------------------------------------------
   Notes, enllaç al full de producció i amplada del camp de canvis de tomes.
   --------------------------------------------------------------------------- */

/* El camp ha de deixar veure els noms de les tomes que substitueix: amb set tomes,
   "7H,ESMORZAR,12H,DINAR,17H,SOPAR,NIT" no cabia ni de bon tros. */
.fo-pc-canvis { width: 100%; min-width: 210px; }

/* La nota permanent i les observacions d'aquesta setmana comparteixen columna. La temporal va
   en cursiva i més fluixa: totes dues s'han de llegir, però una caduca i l'altra no. */
/* Una línia per cosa a llegir. La nota permanent va primer i sense etiqueta; les excepcions
   porten el nom del tipus davant, del color del tipus. */
.fo-pc-prod-note > span { display: block; line-height: 1.45; }

.fo-pc-note-standing { color: #1d2f33; }

.fo-pc-note-line { font-size: 0.94rem; }

.fo-pc-note-kind { font-weight: 600; }
.fo-pc-note-stop { color: #c9382c; }
.fo-pc-note-drug { color: #c25e08; }
.fo-pc-note-add { color: #2c7a52; }
.fo-pc-note-note { color: #2b6cb0; }

.fo-pc-note-value {
    margin-left: 4px;
    color: #1d2f33;
    font-family: Consolas, ui-monospace, monospace;
}

.fo-pc-note-when {
    margin-left: 6px;
    font-style: normal;
    font-family: Consolas, ui-monospace, monospace;
    font-size: 0.86rem;
    color: #7a8f93;
}

/* Observacions de tota la residència: informen, no aturen res, i per això blau. */
/* Observacions: groc clar. Informen, no aturen res. */
.fo-pc-warn-note {
    background: #fffbea;
    border-left-color: #e0b52c;
    color: #5c4a0a;
}

.fo-pc-callout-list { margin: 4px 0 0; padding-left: 18px; }
.fo-pc-callout-list li { margin-bottom: 2px; }

.fo-pc-callout-when {
    margin-left: 8px;
    font-style: normal;
    font-family: Consolas, ui-monospace, monospace;
    font-size: 0.86rem;
    opacity: .75;
}

/* L'enllaç al full de producció: al xip del calendari i a la molla de pa del dosificador.
   Els estats :link i :visited hi son perque el a:visited del skin no guanyi un cop visitat. */
.fo-pc-chip-sheet,
.fo-pc-chip-sheet:link,
.fo-pc-chip-sheet:visited {
    flex: 0 0 auto;
    color: #7a8f93;
    text-decoration: none;
    font-size: 15.5px;
    line-height: 1;
    padding: 0 2px;
}
.fo-pc-chip-sheet:hover { color: #2b8b91; }

/* La rodeta de configuracio del centre. Taronja quan al centre li falta alguna de les quatre
   columnes de finestra: es l'unic lloc on aixo es veu sense obrir el Data Explorer. L'ordre
   compta: el taronja va despres del :hover gris perque guanyi a igualtat d'especificitat. */
.fo-pc-chip-cog,
.fo-pc-chip-cog:link,
.fo-pc-chip-cog:visited {
    flex: 0 0 auto;
    color: #b9c8cb;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
}
.fo-pc-chip-cog:hover { color: #2b8b91; }
.fo-pc-chip-cog-todo,
.fo-pc-chip-cog-todo:link,
.fo-pc-chip-cog-todo:visited { color: #fd7e14; }
.fo-pc-chip-cog-todo:hover { color: #dc6502; }

.fo-pc-crumb-also {
    margin-left: auto;
    color: #2b8b91;
    font-size: 0.99rem;
    text-decoration: none;
}
.fo-pc-crumb-also:hover { text-decoration: underline; }
.fo-pc-prod-icon { margin-right: 5px; }

/* ---------------------------------------------------------------- control de cobertura */

/* Els quatre numeros del peu: quants pacients hi ha i quants en queden. La vora esquerra
   canvia de color amb el resultat, que es l'unic que cal veure de lluny. */
.fo-pc-cov {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0;
    margin: 16px 0 0; padding: 0;
    border: 1px solid #dde8e9; border-left: 4px solid #b9c8cb; border-radius: 5px;
    background: #fff; overflow: hidden;
}
.fo-pc-cov-todo { border-left-color: #fd7e14; background: #fffaf4; }
.fo-pc-cov-done { border-left-color: #28a745; }
.fo-pc-cov-wait {
    margin: 16px 0 0; padding: 10px 14px; color: #7a8f93; font-style: italic;
    border: 1px solid #dde8e9; border-radius: 5px; background: #fff;
}

.fo-pc-cov-item {
    padding: 9px 18px; border-right: 1px solid #eef3f3;
    display: flex; flex-direction: column; gap: 2px;
}
.fo-pc-cov-item dt {
    font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: #7a8f93;
    font-weight: 600; margin: 0;
}
.fo-pc-cov-item dd {
    margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1;
    font-variant-numeric: tabular-nums; color: #162326;
}
.fo-pc-cov-ok dd    { color: #1e7e34; }
.fo-pc-cov-todo dd  { color: #b25607; }
.fo-pc-cov-muted dd { color: #7a8f93; }

.fo-pc-cov-note {
    padding: 9px 18px; font-size: 0.88rem; color: #40555a; margin-left: auto;
}

/* ---------------------------------------------------------------- desplegables amb cerca */

/* react-select vestit de form-control-sm, que és el que eren aquests camps abans: al costat
   d'un input de data del mateix diàleg no s'ha de notar que són de dues menes diferents.
   Els gruixos i els radis són els de Bootstrap; els colors, els de la casa. */
.fo-sel { width: 100%; }

.fo-sel .fo-sel__control {
    min-height: calc(1.5em + .5rem + 2px);
    border: 1px solid #ced4da;
    border-radius: .2rem;
    background: #fff;
    box-shadow: none;
    font-size: 16px;
}

.fo-sel .fo-sel__control--is-focused,
.fo-sel .fo-sel__control--is-focused:hover {
    border-color: #40b6bd;
    box-shadow: 0 0 0 .2rem rgba(64, 182, 189, .25);
}

.fo-sel .fo-sel__control--is-disabled { background: #e9ecef; }

.fo-sel .fo-sel__value-container { padding: 1px 8px; }
.fo-sel .fo-sel__single-value { color: #212529; }
.fo-sel .fo-sel__placeholder { color: #8c979d; }

/* La barra vertical entre el text i la fletxa no diu res i fa soroll en un camp petit. */
.fo-sel .fo-sel__indicator-separator { display: none; }
.fo-sel .fo-sel__indicator { padding: 4px 6px; color: #8c979d; }
.fo-sel .fo-sel__indicator:hover { color: #495057; }

/* El menú va a document.body, així que aquestes classes no pengen de .fo-sel. */
.fo-sel__menu {
    font-size: 16px;
    border: 1px solid #dde8e9;
    border-radius: .2rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    margin-top: 3px;
}

.fo-sel__option { padding: 6px 10px; }
.fo-sel__option--is-focused { background: #e6f5f6; color: #212529; }
.fo-sel__option--is-selected { background: #40b6bd; color: #fff; }
.fo-sel__menu-notice { font-size: 15.5px; color: #adb5bd; font-style: italic; }

/* ---------------------------------------------------------------------------------------
   Estat per bossa (full de produccio). Tres nivells: tanda, pacient i bossa.
   --------------------------------------------------------------------------------------- */

/* Una tria mes fluixa que la pitjor bossa de sota. Apagada pero clicable: porta a la bossa
   que fa nosa, que un boto mort no fa. */
.fo-pc-seg-btn.fo-pc-seg-off,
.fo-pc-seg-btn.fo-pc-seg-off i,
.fo-pc-seg-btn.fo-pc-seg-off span {
    color: #b6bfc2;
    cursor: not-allowed;
}

.fo-pc-seg-btn.fo-pc-seg-off {
    background: repeating-linear-gradient(135deg, #fff, #fff 6px, #f1f3f5 6px, #f1f3f5 12px);
}

/* Les bosses de sota no van totes igual: l'estat que es veu no l'ha triat ningu, ha sortit
   del recompte, i per aixo va ratllat i no ple. */
.fo-pc-seg-done.fo-pc-seg-part {
    background: repeating-linear-gradient(135deg, #fff, #fff 5px, #e9f7ee 5px, #e9f7ee 10px);
    color: #1e7e34;
}

.fo-pc-seg-drug.fo-pc-seg-part {
    background: repeating-linear-gradient(135deg, #fff, #fff 5px, #ffe9d3 5px, #ffe9d3 10px);
    color: #b25c07;
}

.fo-pc-seg-stop.fo-pc-seg-part {
    background: repeating-linear-gradient(135deg, #fff, #fff 5px, #fdecea 5px, #fdecea 10px);
    color: #c9382c;
}

.fo-pc-act.fo-pc-act-off,
.fo-pc-act.fo-pc-act-off i {
    background: #f1f3f5;
    border-color: #ced4da;
    color: #adb5bd;
    cursor: not-allowed;
}

.fo-pc-blockmsg { font-size: 0.85rem; color: #c9382c; white-space: nowrap; }

/* Qui ha revisat: una icona just fora del canto inferior dret del que ha marcat, amb el seu
   espai reservat perque no es mogui res quan apareix o desapareix. */
.fo-pc-segwrap { position: relative; display: inline-block; padding-right: 22px; }

.fo-pc-revchip {
    position: absolute;
    right: 0;
    bottom: -2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dde8e9;
    color: #7a8f93;
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.fo-pc-revchip:hover { border-color: #40b6bd; color: #2b8b91; }

/* Fitxa clara i no el globus negre del navegador: el del sistema triga a sortir, no deixa
   dues linies i no es pot llegir a estones. */
.fo-pc-revcard {
    display: none;
    position: absolute;
    top: 21px;
    right: -3px;
    z-index: 25;
    width: 210px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .35);
    padding: 7px 10px;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.35;
    color: #212529;
    text-align: left;
}

.fo-pc-revcard i { display: block; font-style: normal; font-size: 0.78rem; color: #7a8f93; margin-top: 2px; }
.fo-pc-revchip:hover .fo-pc-revcard,
.fo-pc-revchip:focus .fo-pc-revcard { display: block; }

/* A la capcalera del blister el nom va escrit: normalment un sol torn repassa tota la tanda. */
.fo-pc-revline {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.85rem;
    color: #7a8f93;
    background: #f4f8f8;
    border: 1px solid #dde8e9;
    border-radius: 999px;
    padding: 2px 11px;
    white-space: nowrap;
}

.fo-pc-revline b { color: #212529; font-weight: 600; }
.fo-pc-revline i { font-style: normal; font-size: 0.78rem; }

/* Com van les bosses d'un pacient sense obrir-lo. */
.fo-pc-pbar-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.fo-pc-pbar {
    display: inline-flex;
    width: 96px;
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    background: #eef3f4;
}

.fo-pc-pbar-done { background: #28a745; }
.fo-pc-pbar-drug { background: #fd7e14; }
.fo-pc-pbar-stop { background: #c9382c; }
.fo-pc-pbar-txt { width: 100%; font-size: 0.8rem; color: #b25c07; }
.fo-pc-pbar-txt.fo-pc-pbar-bad { color: #c9382c; }

/* La graella de bosses, sota la fila del pacient: un dia per fila i una toma per columna. */
tr.fo-pc-pouches-row > td {
    background: #fbfdfd !important;
    padding: 6px 10px 9px 14px;
    border-bottom: 1px solid #dde8e9;
}

.fo-pc-grid-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #7a8f93;
}

.fo-pc-grid-head b { color: #212529; }
.fo-pc-grid-legend { display: inline-flex; gap: 10px; }

.fo-pc-grid-legend span::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: -1px;
}

.fo-pc-lg-done::before { background: #28a745; }
.fo-pc-lg-drug::before { background: #fd7e14; }
.fo-pc-lg-stop::before { background: #c9382c; }
.fo-pc-lg-pend::before { background: #fff; border: 1px dashed #b9c8cb; }

/* Totes les tomes del blíster, repartides per igual a l'amplada que hi ha. El límit evita que
   un blíster de dues tomes faci bosses de mitja pantalla; per sota del mínim, la franja es
   desplaça de costat. */
table.fo-pc-grid {
    border-collapse: separate; border-spacing: 6px 4px; table-layout: fixed;
    width: 100%;
    max-width: calc(96px + var(--fo-pc-doses, 5) * 250px);
    min-width: calc(96px + var(--fo-pc-doses, 5) * 128px);
}
table.fo-pc-grid th.fo-pc-grid-daycol { width: 84px; }
/* Un dia de reserva no és de cap data: es diu «Dia extra N», amb el color del distintiu «+N dies». */
table.fo-pc-grid th.fo-pc-grid-extra { color: #8a5a09; }
table.fo-pc-grid th.fo-pc-grid-off { color: #a9b6b8; text-decoration: line-through; }
.fo-pc-grid-taken { color: #2b6b70; font-weight: 600; }

/* Una toma sense bossa: no hi ha res a validar, i s'ha de veure que és així i no que falta. */
.fo-pc-tile-none {
    display: flex; align-items: center; justify-content: center;
    height: 100%; min-height: 47px; margin-right: 17px;
    border: 1px dashed #cfd8da; border-radius: 5px; color: #9aa9ab; font-size: 0.78rem;
    background: repeating-linear-gradient(135deg, #f1f4f4 0, #f1f4f4 6px, #fbfdfd 6px, #fbfdfd 12px);
}
.fo-pc-lg-none::before { background: #eef2f2; border: 1px dashed #cfd8da; }

/* Amb les bosses més amples, un blíster de moltes tomes en una pantalla estreta es desplaça de
   costat dins de la seva franja, sense eixamplar la pàgina. */
.fo-pc-grid-wrap { overflow-x: auto; }

table.fo-pc-grid th {
    font-size: 0.78rem;
    color: #7a8f93;
    font-weight: 600;
    text-align: center;
    padding: 0 2px;
    white-space: nowrap;
    background: none;
    border: 0;
}

table.fo-pc-grid th.fo-pc-grid-day { text-align: right; padding-right: 6px; }
table.fo-pc-grid td { padding: 0; border: 0; }

/* La bossa, partida per la meitat: a dalt l'hora, que obre el que porta dins, i a sota les
   tres marques. Tota la bossa pren el color de la marca, l'hora inclosa, perque llegir una
   columna de dalt a baix es fa amb el color. */
.fo-pc-tilewrap { position: relative; display: block; padding-right: 17px; }
.fo-pc-tilewrap .fo-pc-revchip { width: 15px; height: 15px; font-size: 0.5rem; bottom: 1px; }

.fo-pc-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 5px;
    border: 1px dashed #b9c8cb;
    background: #fff;
    color: #7a8f93;
    overflow: hidden;
}

.fo-pc-tile-top {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.86rem;
    line-height: 1;
    padding: 5px 0 4px;
    text-align: center;
    cursor: pointer;
}

.fo-pc-tile-top:hover { background: rgba(0, 0, 0, .05); }
.fo-pc-tile-acts { display: flex; border-top: 1px solid rgba(0, 0, 0, .1); }

.fo-pc-mini {
    flex: 1;
    border: 0;
    border-right: 1px solid rgba(0, 0, 0, .1);
    background: transparent;
    color: #98a9ad;
    font-size: 0.82rem;
    line-height: 1;
    padding: 4px 0 5px;
    cursor: pointer;
}

.fo-pc-mini:last-child { border-right: 0; }
.fo-pc-mini:hover:not(:disabled) { background: rgba(0, 0, 0, .07); }
.fo-pc-mini:disabled { cursor: not-allowed; }
.fo-pc-mini.fo-pc-mini-on { color: #fff; }
.fo-pc-mini-done.fo-pc-mini-on { background: #28a745; }
.fo-pc-mini-drug.fo-pc-mini-on { background: #fd7e14; }
.fo-pc-mini-stop.fo-pc-mini-on { background: #c9382c; }

.fo-pc-tile-done { border: 1px solid #9fd8ae; background: #e9f7ee; color: #1e7e34; }
.fo-pc-tile-drug { border: 1px solid #fd7e14; background: #fff3e6; color: #b25c07; font-weight: 600; }
.fo-pc-tile-stop { border: 1px solid #c9382c; background: #fdecea; color: #c9382c; font-weight: 600; }
.fo-pc-tile-flash { animation: fo-pc-tile-flash .9s ease-out; }

@keyframes fo-pc-tile-flash {
    from { box-shadow: 0 0 0 4px rgba(64, 182, 189, .45); }
}

/* Que porta la bossa que tens a la ma. */
.fo-pc-pouch-pop {
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 20;
    width: 260px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 7px;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45);
    padding: 8px 10px;
    text-align: left;
    white-space: normal;
}

.fo-pc-pouch-pop .fo-pc-remove { position: absolute; top: 2px; right: 6px; }
.fo-pc-pouch-pop-head { display: block; font-size: 0.9rem; margin-bottom: 6px; }

.fo-pc-pouch-items {
    margin: 0 0 8px;
    padding: 6px 8px 6px 22px;
    background: #f4f8f8;
    border-radius: 4px;
    font-size: 0.82rem;
}

.fo-pc-pouch-pop-foot { display: block; margin-top: 8px; font-size: 0.78rem; color: #7a8f93; }

/* Abans de marcar-ho tot amb una marca pitjor. */
.fo-pc-confirm-modal { max-width: 460px; }
/* Una pregunta damunt d'un altre diàleg: per sobre seu, i més avall perquè no el tapi sencer. */
.fo-pc-modal-scrim.fo-pc-confirm-scrim { z-index: 1060; padding-top: 18vh; }
.fo-pc-confirm-warn { color: #b25c07; }
.fo-pc-confirm-go-done { background: #28a745; border-color: #28a745; color: #fff; }
.fo-pc-confirm-go-drug { background: #fd7e14; border-color: #fd7e14; color: #fff; }
.fo-pc-confirm-go-stop { background: #c9382c; border-color: #c9382c; color: #fff; }

/* ------------------------------------------------------------------ tanda combinada */
/* Enganxada a baix: la pàgina és llarga i el recompte ha de ser visible des d'on sigui.
   Fons clar com la resta de la pantalla; una franja fosca aquí crida més que el que diu. */
.fo-pc-jobbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
    padding: 10px 14px;
    background: #eef6f7;
    border: 1px solid #cfe4e6;
    border-radius: 8px;
}
.fo-pc-jobbar b { color: #2b6b70; }
.fo-pc-jobbar-hint { font-size: 13px; color: #6c757d; }

.fo-pc-jobsum-totals { color: #6c757d; font-size: 13.5px; margin: 0 0 10px; }
.fo-pc-jobsum-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 12px 0 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid #eef3f3;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6c757d;
}
.fo-pc-jobsum-count { margin-left: auto; text-transform: none; letter-spacing: 0; }
.fo-pc-jobsum-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.fo-pc-jobsum-name { flex: 1; }
.fo-pc-jobsum-drop {
    border: 0;
    background: none;
    color: #adb5bd;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}
.fo-pc-jobsum-drop:hover { color: #d9534f; }

/* Una producció (un fitxer, amb un blíster o amb diversos), amb l'hora a dalt. El marge de
   l'esquerra la posa sota la capçalera del dia on es va generar. */
.fo-pc-job {
    border: 1px solid #40b6bd;
    border-radius: 8px;
    background: #f7fbfb;
    padding: 10px 12px;
    margin: 0 0 12px 24px;
}
.fo-pc-job-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 2px 2px 8px;
}
.fo-pc-job-title { font-weight: 700; }
.fo-pc-job > .fo-pc-runinfo { padding-bottom: 10px; }
.fo-pc-job > .fo-pc-sect { background: #fff; }

/* ------------------------------------------------------------------ comprovació */

/* Els dos estats en un sol botó. Apagat vol dir pendent i no vol dir "deshabilitat", així que
   manté la vora i el contrast: un gris fluix es llegiria com si no s'hi pogués clicar.
   Només el botó: l'etiqueta "Sense data de fi" comparteix la classe i no porta vora. */
button.fo-pc-check {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 11px; border-radius: 999px;
    border: 1px solid #cfe0e2; background: #fff; color: #56707a;
    font-size: 0.9rem; white-space: nowrap; cursor: pointer;
}
.fo-pc-check:hover:not(:disabled) { border-color: #40b6bd; color: #2b8b91; }
.fo-pc-check:disabled { opacity: .5; cursor: default; }
.fo-pc-check i { font-size: 0.86rem; }
button.fo-pc-check-on {
    border-color: #bfe3c9; background: #e6f4ea; color: #1e7e34; font-weight: 600;
}
.fo-pc-check-on:hover:not(:disabled) { border-color: #1e7e34; color: #1e7e34; }

.fo-pc-val-table td { vertical-align: middle; }
.fo-pc-row-done > td { background: #f4fbf6; }

.fo-pc-val-done { color: #1e7e34; font-weight: 600; }
.fo-pc-val-todo { color: #7a8f93; }

/* El total del dia, a dalt de tot: qui entra vol saber quant queda abans de mirar cap tanda. */
.fo-pc-val-total {
    padding: 8px 14px; margin-bottom: 12px; border-radius: 5px;
    border: 1px solid #cfe4e6; background: #f2fafb; color: #1d2f33; font-size: 0.98rem;
}
.fo-pc-val-total-done { border-color: #bfe3c9; background: #e6f4ea; color: #1e7e34; }

/* ------------------------------------------------------------------ dies de reserva */

/* Cinc botonets, uns 125px. Apagats són grisos i no "deshabilitats": el cas normal és no
   prémer-ne cap, i una fila sense reserva s'ha de llegir tan tranquil·la com avui. */
.fo-pc-xd { display: inline-flex; gap: 2px; }
.fo-pc-xd button {
    width: 23px; height: 23px; padding: 0; line-height: 21px; font-size: 12px;
    border: 1px solid #cfe0e2; background: #fff; color: #7a8f93; border-radius: 4px;
    cursor: pointer; font-family: inherit;
}
.fo-pc-xd button:hover:not(:disabled) { border-color: #40b6bd; color: #2b8b91; }
.fo-pc-xd button:disabled { opacity: .45; cursor: default; }
.fo-pc-xd-off button { color: #b9c7ca; }
.fo-pc-xd button.fo-pc-xd-on {
    background: #fffbea; border-color: #e0b52c; color: #5c4a0a; font-weight: 700;
}

/* La marca que arrossega la reserva fins al full i la comprovació: sense ella, un pacient
   amb dotze bosses de més no té explicació enlloc. */
.fo-pc-xd-tag {
    display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    background: #fffbea; color: #5c4a0a; border: 1px solid #e0b52c;
}

/* El botó de copiar els festius va a la dreta de les fletxes d'any: al costat del número que
   diu a quin any aniran a parar. */
.fo-pc-hol-copy { margin-left: auto; }

/* ------------------------------------------------------------------ filtre per pacient */

.fo-pc-pfilter { display: inline-flex; align-items: center; gap: 8px; }
.fo-pc-pfilter label {
    font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
    color: #2b8b91; font-weight: 600; margin: 0;
}
/* El desplegable amb cerca. Amb un pacient triat es tenyeix, perquè es vegi que la pantalla
   està filtrada. */
.fo-pc-pfilter .fo-sel { width: 280px; font-size: 14px; }
.fo-pc-pfilter-on .fo-sel .fo-sel__control { border-color: #40b6bd; background: #f2fafb; }

/* La franja que explica què s'està veient. Sense ella, una pantalla que de sobte ensenya una
   fila sembla que hagi perdut la resta. */
.fo-pc-pfnote {
    display: flex; gap: 10px; flex-wrap: wrap;
    border-left: 3px solid #40b6bd; background: #f2fafb; color: #1d3c40;
    padding: 6px 12px; border-radius: 4px; margin: 0 0 12px; font-size: 0.94rem;
}

/* Un blíster on el pacient filtrat no hi és. Apagat i no fora: que existeixi i que ell no hi
   sigui també és una resposta. */
.fo-pc-sect-away { opacity: .4; }