:root {
    --bg: #f4f6f8;
    --card-bg: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e2e5e9;
    --primary: #004EB3;        /* blau corporatiu Vall d'Hebron (botons, enllaços, topbar) */
    --primary-dark: #003A86;   /* to fosc per a hover */
    --primary-soft: #E6EEFB;   /* fons blau clar per a estats actius/hover neutres */
    --dui: #0E7C86;            /* teal, color de la categoria DUI */
    --dui-bg: #E1F2F2;         /* tint clar del teal per a les targetes DUI */
    --tcai: #b5652a;           /* taronja, color de la categoria TCAI (sense canvis) */
    --tcai-bg: #fbeee1;
    --suplent: #6B46C1;        /* morat, etiqueta de vinculació Suplent */
    --error-bg: #fdecea;
    --error-text: #b3261e;
    --pot: #9a5b00;            /* ambre fosc: estat «Pot (només si cal)» */
    --pot-bg: #fff1d6;
    --reforc: #b8860b;         /* daurat fosc: franja i etiqueta «REFORÇ» */
    --reforc-bg: #fffbeb;      /* groc molt pàl·lid: fons de les cel·les de reforç */
}

* { box-sizing: border-box; }

/* L'atribut `hidden` sempre amaga l'element, encara que una classe li fixi un
   `display` (p. ex. .planilla-lloc { display: flex } o .btn { display:
   inline-block }). El JS fa servir `element.hidden` per filtrar/ocultar. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.4;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Alçada de la topbar: s'usa als càlculs de min-height de sota */
:root {
    --topbar-h: 60px;
    --topbar-bg: #004EB3;  /* blau corporatiu Vall d'Hebron */
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--topbar-h);
    padding: 0.5rem 1.5rem;
    background: var(--topbar-bg);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar .brand {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
}
.topbar .brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 40px; width: auto; }
.brand-text {
    margin-left: 0.85rem;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.topbar .topbar-user { display: flex; align-items: center; gap: 1rem; }
.topbar .who { opacity: 0.92; font-size: 0.9rem; }

@media (max-width: 520px) {
    .brand-logo { height: 32px; }
    .brand-text { margin-left: 0.6rem; padding-left: 0.6rem; font-size: 0.9rem; }
    .topbar { padding: 0.5rem 0.9rem; }
}

/* Estructura general: topbar a dalt, i a sota dues columnes a pantalla completa
   (sidebar d'ample fix + contingut que ocupa la resta). El contenidor .layout
   té una alçada mínima que arriba fins al final de la finestra, i els dos fills
   s'estiren (align-items: stretch per defecte) perquè la sidebar arribi fins
   baix encara que el contingut sigui curt. */
.layout {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--topbar-h));
}
.sidebar {
    flex: 0 0 250px;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
}
.sidebar nav ul { list-style: none; margin: 0; padding: 0.5rem 0; }
.sidebar nav a {
    display: block;
    padding: 0.6rem 1.25rem;
    color: var(--text);
    font-size: 0.92rem;
    border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: var(--bg); text-decoration: none; }
.sidebar nav a.actiu {
    border-left-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 600;
}
.sidebar nav .subnav { list-style: none; margin: 0; padding: 0; }
.sidebar nav .subnav a { padding-left: 2.25rem; font-size: 0.86rem; }
.content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem 2rem;
}

@media (max-width: 720px) {
    .layout { flex-direction: column; min-height: 0; }
    .sidebar {
        flex: 0 0 auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .content { padding: 1.25rem; }
}

.btn {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
}
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; }
.btn-secondary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-secondary:hover { background: var(--primary-dark); text-decoration: none; }
.btn-link { background: none; border: none; color: var(--primary); text-decoration: underline; padding: 0.2rem 0.4rem; cursor: pointer; font-size: 0.95rem; }
.topbar .btn-link { color: #fff; }
.btn-danger { background: var(--error-text); color: #fff; border-color: var(--error-text); }
.btn-danger:hover { background: #8f1e17; text-decoration: none; }

.container { max-width: 960px; margin: 0 auto; padding: 1.5rem; }

.login-box {
    max-width: 360px;
    margin: 4rem auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
}
.login-box form { display: flex; flex-direction: column; gap: 0.75rem; text-align: left; margin-top: 1rem; }
.login-box label { font-weight: 600; font-size: 0.9rem; }
.subtitle { color: var(--muted); margin-top: -0.5rem; }

input, select, textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    background: #fff;
    color: var(--text);
}
label { font-weight: 600; font-size: 0.85rem; color: var(--muted); display: block; margin-bottom: 0.25rem; }

.error {
    background: var(--error-bg);
    color: var(--error-text);
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.list-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.list-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.legend { display: flex; gap: 1rem; font-size: 0.9rem; color: var(--muted); margin-top: 0.5rem; }
.legend-item { display: flex; align-items: center; gap: 0.4rem; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.swatch-dui { background: var(--dui); }
.swatch-tcai { background: var(--tcai); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.prof-card {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 6px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    color: var(--text);
}
.prof-card:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.prof-card.cat-dui { border-left-color: var(--dui); background: var(--dui-bg); }
.prof-card.cat-tcai { border-left-color: var(--tcai); background: var(--tcai-bg); }
.prof-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.prof-card h2 { margin: 0.2rem 0 0.5rem; font-size: 1.1rem; }
.denari { color: #000; font-size: 1.05rem; font-weight: 700; }
.prof-meta { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; color: var(--text); }
.prof-meta li { margin-bottom: 0.15rem; }

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.badge-dui { background: var(--dui); color: #fff; }
.badge-tcai { background: var(--tcai); color: #fff; }
.badge-arxivat { background: var(--muted); color: #fff; }
.badge-suplent { background: var(--suplent); color: #fff; }

/* Estat d'un dia a «Dies de la planilla» (vegeu estat_dia_planilla a app.py). */
.badge-estat-importat { background: var(--muted); color: #fff; }
.badge-estat-assignat { background: var(--primary-soft); color: var(--primary-dark); }
.badge-estat-desactualitzat { background: var(--pot-bg); color: var(--pot); }
.badge-estat-confirmat { background: var(--dui); color: #fff; }

/* Etiqueta "SUPLENT" junt al nom del professional (targetes i llista). Es
   mostra sempre que vinculacio = Suplent, independentment de si la fitxa té
   contracte actiu (el grisat de .es-sense-contracte és un efecte apart). */
.badge-suplent-nom { margin-left: 0.4rem; vertical-align: middle; }

.view-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.view-header h1 { margin: 0.3rem 0 0.2rem; }
.actions { display: flex; gap: 0.5rem; align-items: center; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
}
.card h3 { margin-top: 0; font-size: 1rem; color: var(--primary-dark); }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; margin: 0; }
.detail-grid dt { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.detail-grid dd { margin: 0.1rem 0 0; }

.chip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; }

.formacio-llista { list-style: none; padding: 0; margin: 0 0 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; }
.formacio-item {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--primary-soft); color: var(--primary-dark);
    border-radius: 8px; padding: 0.35rem 0.7rem; font-size: 0.9rem;
}
.formacio-nom { flex: 1; }
.formacio-data { font-size: 0.8rem; color: var(--muted); }
.formacio-treu { padding: 0 0.2rem; line-height: 1; font-size: 1rem; }
.formacio-nova { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.formacio-nova input[type="text"] { flex: 1; min-width: 180px; }

.empty { color: var(--muted); }

.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; }
.field { margin-bottom: 0.9rem; }
.subsection { margin-top: 0.5rem; }
.subsection-title {
    margin: 1.3rem 0 0.7rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-dark);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.3rem;
}
.subsection-title:first-child { margin-top: 0.4rem; }
.card .subsection-title:first-of-type { margin-top: 0.8rem; }
.radio-group { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.radio-group label { font-weight: 400; color: var(--text); display: flex; align-items: center; gap: 0.3rem; }
.radio-group input { width: auto; }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
.checkbox-item { font-weight: 400; color: var(--text); display: flex; align-items: center; gap: 0.4rem; }
.checkbox-item input { width: auto; }

.hint { color: var(--muted); font-size: 0.85rem; margin-top: -0.3rem; }
.avis-count { color: var(--error-text); font-weight: 600; }

.form-actions { display: flex; gap: 0.8rem; align-items: center; margin-top: 1rem; }
.opcional { font-weight: 400; color: var(--muted); text-transform: none; }

/* Fitxa de professional: la targeta de «Formacions específiques» viu, per
   necessitat (vegeu el comentari a professional_form.html), FORA del <form>
   de la fitxa, però ha d'aparèixer just després de «Nivell d'expertesa» i
   abans de «La meva planilla». `.ficha-form` es fa transparent a la
   disposició (`display: contents`) perquè les seves targetes s'ordenin en
   el mateix contenidor flex que la targeta externa; només cal endarrerir
   les dues que han de quedar sempre al final. */
.ficha-layout { display: flex; flex-direction: column; }
.ficha-form { display: contents; }
.ficha-layout .planilla-card,
.ficha-layout .form-actions { order: 1; }

/* -------- Barra d'eines del llistat: cerca + filtre + canvi de vista -------- */
.toolbar-wrap { display: flex; align-items: stretch; gap: 0.6rem; margin-top: 1rem; }
.toolbar {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.8rem 1rem;
}

/* Desplegable de configuració de camps visibles (engranatge) */
.config-columnes { position: relative; flex: 0 0 auto; }
.config-columnes > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 44px;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--muted);
    font-size: 1.15rem;
    cursor: pointer;
}
.config-columnes > summary::-webkit-details-marker { display: none; }
.config-columnes > summary:hover { color: var(--primary); border-color: var(--primary); }
.config-columnes[open] > summary { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.config-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 40;
    width: 232px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    padding: 0.8rem 0.9rem;
}
.config-panel .config-titol {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    font-weight: 700;
}
.config-panel label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text);
    text-transform: none;
    cursor: pointer;
}
.config-panel label input { width: auto; margin: 0; }
.config-panel .config-nota { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--muted); }

/* Filtre desplegable per àrea de coneixement (selecció múltiple) */
.filtre-menu { position: relative; flex: 0 0 auto; }
.filtre-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}
.filtre-menu > summary::-webkit-details-marker { display: none; }
.filtre-menu > summary::after { content: "▾"; color: var(--muted); }
.filtre-menu > summary:hover { border-color: var(--primary); color: var(--primary); }
.filtre-menu[open] > summary { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.filtre-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 5px);
    z-index: 40;
    width: 260px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    padding: 0.8rem 0.9rem;
}
.filtre-panel .config-titol {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    font-weight: 700;
}
.filtre-panel label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text);
    text-transform: none;
    cursor: pointer;
}
.filtre-panel label input { width: auto; margin: 0; flex: 0 0 auto; }

/* Amaga columnes/camps segons la preferència desada al navegador */
html.amaga-vinculacio .col-vinculacio,
html.amaga-torn .col-torn,
html.amaga-supervisor .col-supervisor,
html.amaga-arees .col-arees { display: none !important; }
.toolbar-cerca { display: flex; gap: 0.5rem; flex: 1 1 320px; min-width: 240px; }
.toolbar-cerca input { flex: 1 1 auto; }
.toolbar-cerca .btn { flex: 0 0 auto; }

.toolbar-categories { display: flex; gap: 0.4rem; }
.cat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.cat-toggle input { width: auto; margin: 0; }
.cat-toggle.actiu.cat-toggle-dui { background: var(--dui); border-color: var(--dui); color: #fff; }
.cat-toggle.actiu.cat-toggle-tcai { background: var(--tcai); border-color: var(--tcai); color: #fff; }

.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-left: auto; }
.view-toggle a {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    color: var(--muted);
    background: #fff;
}
.view-toggle a:hover { text-decoration: none; background: var(--bg); }
.view-toggle a + a { border-left: 1px solid var(--border); }
.view-toggle a.actiu { background: var(--primary); color: #fff; }

.result-count { color: var(--muted); font-size: 0.85rem; margin: 1rem 0 0.25rem; }

/* -------- Vista de llista / taula -------- */
.table-wrap { overflow-x: auto; margin-top: 0.5rem; }
.prof-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
}
.prof-table th, .prof-table td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border);
}
.prof-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.prof-table tbody tr:last-child td { border-bottom: none; }
.prof-table tbody tr { cursor: pointer; }
.prof-table tbody tr:hover { background: var(--primary-soft); }
.prof-table td a { font-weight: 600; }
.prof-table td:last-child { max-width: 340px; }

/* Etiquetes compactes d'àrea de coneixement, als llistats */
.area-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.prof-table .area-chips { margin-top: 0; }
.area-chip {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
}

/* -------- Informació de contracte (suplents) als llistats -------- */
:root { --avis: #b45309; }

.contracte-box {
    margin: 0.4rem 0 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.035);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.contracte-box .contracte-concepte { font-weight: 600; }
.contracte-fi { color: var(--muted); }
.contracte-fi.alerta { color: var(--avis); font-weight: 700; }
.alerta-icona { font-style: normal; }
.td-contracte .contracte-fi { white-space: nowrap; }

.contracte-linia { margin: 0.3rem 0 0.55rem; }
.tag-sense-contracte {
    display: inline-block;
    background: var(--border);
    color: var(--muted);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Menys contrast per a qui no té contracte actiu */
.prof-card.es-sense-contracte { opacity: 0.6; filter: grayscale(0.55); }
.prof-card.es-sense-contracte:hover { opacity: 0.85; }
.prof-table tr.es-sense-contracte td { color: var(--muted); background: #fafafa; }
.prof-table tr.es-sense-contracte:hover td { background: #f0f0f0; }

/* Planilla diària: assignació automàtica de llocs, format «full Excel» */

.excel-capcalera {
    display: flex; align-items: center; gap: 1rem;
    background: var(--primary); color: #fff;
    border-radius: 10px; padding: 0.9rem 1.4rem; margin-bottom: 1rem;
}
.excel-logo { height: 40px; width: auto; flex: 0 0 auto; }
.excel-titols h2 { margin: 0; font-size: 1.4rem; }
.excel-titols p { margin: 0.15rem 0 0; font-weight: 700; letter-spacing: 0.04em; opacity: 0.9; }

.excel-planilla { border-collapse: collapse; width: 100%; table-layout: fixed; }
.excel-planilla th, .excel-planilla td {
    border: 1px solid var(--border); padding: 0.3rem 0.5rem; font-size: 0.85rem;
    overflow-wrap: break-word;
}
.excel-planilla thead th {
    background: var(--primary-soft); color: var(--primary-dark);
    font-weight: 700; text-align: center;
}
.fila-zona td {
    background: var(--muted); color: #fff; font-weight: 700; text-align: center;
    letter-spacing: 0.03em; padding: 0.35rem 0.5rem;
}
.cel-centrada { text-align: center; white-space: nowrap; }
.cel-nom-lloc { text-align: left; }
/* Color de la fila segons «Revisió»: ACR groc, PIXYS blau clar (igual que a l'Excel i al PDF) */
.cel-marca-acr { background: #FFFF00; font-weight: 700; }
.cel-marca-pixys { background: #00B0F0; font-weight: 700; }
.cel-assignat {
    position: relative; text-align: center;
    display: table-cell; vertical-align: middle;
}
.cel-assignat.cel-sense-cobrir { background: var(--error-bg); color: var(--error-text); font-weight: 700; }
.cel-assignat.cel-drop-actiu { outline: 2px dashed var(--primary); outline-offset: -2px; }
.cel-nom {
    display: inline-block; min-width: 3rem; min-height: 1.2em;
    outline: none; cursor: text;
}
.cel-nom:focus { background: var(--primary-soft); border-radius: 4px; }
.cel-buit { color: var(--muted); }
.cel-arrossega {
    cursor: grab; color: var(--muted); margin-right: 0.3rem;
    font-size: 0.85rem; user-select: none;
}
.cel-arrossega:active { cursor: grabbing; }

.peu-planilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; }
.peu-planilla label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 700; font-size: 0.85rem; }
.peu-planilla textarea { font-family: inherit; font-size: 0.9rem; font-weight: 400; resize: vertical; }

/* -------- Comentaris del supervisor/a a la fitxa -------- */
.comentari-nou { margin: 0.6rem 0 1rem; }
.comentari-nou textarea { width: 100%; margin-bottom: 0.5rem; }
.comentari-llista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.comentari {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    background: var(--card-bg);
}
.comentari-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.comentari-autor { font-weight: 700; }
.comentari-data { font-size: 0.8rem; color: var(--muted); }
.comentari-text { white-space: pre-wrap; word-break: break-word; }
.comentari-accions { margin-top: 0.4rem; display: flex; gap: 0.6rem; }
.comentari-accions .btn { padding: 0; font-size: 0.85rem; }
.comentari-edita { margin-top: 0.5rem; }
.comentari-edita textarea { width: 100%; margin-bottom: 0.5rem; }
.comentari-edita-accions { display: flex; gap: 0.6rem; align-items: center; }

/* -------- Secció desplegable «La meva planilla» (fitxa i formulari) -------- */
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h3 { display: inline; }
details.card > summary::before { content: "▸"; color: var(--muted); margin-right: 0.45rem; }
details.card[open] > summary::before { content: "▾"; }

.planilla-grups {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--primary-soft);
    padding: 0.7rem 0.9rem;
    margin: 0.4rem 0 1rem;
}
.planilla-grups-titol {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary-dark);
    margin: 0 0 0.5rem;
}
.planilla-grups-llista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 0.35rem 1.2rem;
}
.planilla-grup { display: flex; align-items: center; gap: 0.4rem; }
.planilla-grup-nom { flex: 1 1 auto; font-size: 0.85rem; color: var(--text); }
.planilla-grup-btn {
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
    min-width: 2.6rem;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
}
.planilla-grup-btn:hover { background: var(--primary-soft); text-decoration: none; }
/* «Actiu» = últim botó clicat a la fila (marca l'estat, no és un toggle de
   selecció múltiple: en marcar-ne un es desmarca l'altre de la mateixa fila).
   En carregar la pàgina cap botó porta aquesta classe. */
.planilla-grup-btn.actiu { background: var(--primary); border-color: var(--primary); color: #fff; }
.planilla-grup-btn.actiu:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.planilla-grups .hint { margin: 0.5rem 0 0; }

.planilla-zona { margin-top: 0.2rem; }
.planilla-lloc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
}
.planilla-lloc:last-child { border-bottom: none; }
.planilla-lloc-nom { font-size: 0.9rem; }
.planilla-lloc-meta { color: var(--muted); font-size: 0.78rem; }
.planilla-lloc-tria { flex: 0 0 auto; align-items: center; }
.planilla-neteja { padding: 0; font-size: 0.8rem; }

.planilla-resum { list-style: none; padding: 0; margin: 0; }
.planilla-resum li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.planilla-resum li:last-child { border-bottom: none; }
.planilla-estat { font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.planilla-estat-si { color: var(--dui); }
.planilla-estat-pot { color: var(--pot); }
.planilla-estat-no { color: var(--tcai); }
.planilla-estat-buit { color: var(--muted); }

/* Un lloc (o una zona) inactiu segueix sortint a «La meva planilla» —marcable
   i amb les marques Sí/No ja fetes intactes— però es distingeix clarament en
   gris, amb l'etiqueta «inactiva», perquè no es confongui amb un lloc
   «sense revisar». No s'aplica a «Estructura planilla», que ja té el seu
   propi estil per als inactius (`pt-lloc-inactiu` / `pt-zona-inactiva`). */
.planilla-tag-inactiu {
    display: inline-block;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.planilla-lloc.planilla-lloc-inactiu,
.planilla-resum li.planilla-lloc-inactiu {
    opacity: 0.6;
    background: var(--bg);
}
.planilla-lloc.planilla-lloc-inactiu .planilla-lloc-nom,
.planilla-resum li.planilla-lloc-inactiu span:first-child {
    color: var(--muted);
}

/* Un bloc de «La meva planilla» per cada supervisor/a assignat a la fitxa. */
.planilla-bloc {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.9rem 0.9rem;
    margin: 0.8rem 0;
}
.planilla-bloc-titol {
    margin: 0.2rem 0 0.6rem;
    font-size: 0.95rem;
    color: var(--primary-dark);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
}

/* -------- Pantalla «Estructura de planilla» --------
   Taula amb INFERMERIA a l'esquerra i TCAI a la dreta; cada meitat té 4
   columnes: NOM DEL LLOC | HORARI | NIVELL MÍNIM | TIPUS. La configuració de
   cada lloc s'edita a la mateixa cel·la i es desa sola (fetch a cada canvi).
   Capçalera de zona a tot l'ample, centrada i en negreta. */
.planilla-taula-wrap { overflow-x: auto; }
.planilla-taula {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
    background: var(--card-bg);
}
.planilla-taula caption {
    caption-side: top;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    padding: 0.5rem 0;
    text-align: left;
}
.planilla-taula th,
.planilla-taula td {
    border: 1px solid var(--border);
    padding: 0.3rem 0.6rem;
    text-align: left;
    vertical-align: middle;
}
.planilla-taula thead th {
    text-align: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.planilla-taula tr.pt-zona th {
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.6rem 0.35rem 0.5rem;
    background: var(--primary-soft);
    border-top: 3px solid var(--primary);
}
.planilla-taula .pt-sep { border-left: 3px solid var(--muted); }

/* Separador més gruixut i fosc entre un lloc i el següent, i fons alternat
   per fila perquè es pugui seguir amb la vista d'esquerra a dreta. Aquest fons
   alternat és PER FILA (0,0,3,1 d'especificitat): les regles de reforç/inactiu
   de sota fan servir `!important` perquè guanyin sempre, tant si la cel·la
   cau en una fila «a» com «b» —abans hi havia reforços que es veien grisos
   enlloc de grocs només perquè la seva fila era «b». */
.planilla-taula tr.pt-fila-lloc > td { border-bottom: 2px solid #374151; }
.planilla-taula tr.pt-fila-lloc.pt-fila-b > td { background: #f7f8fa; }
.pt-nom-input { font-weight: 700; }

.pt-nomcol { min-width: 12rem; }
.pt-lloc-nom.pt-reforc { font-size: 0.75rem; color: var(--muted); }

.pt-cfg { white-space: nowrap; text-align: center; }
.pt-horari label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0.35rem;
    font-size: 0.82rem;
}
.pt-cfg select { padding: 0.15rem 0.3rem; font-size: 0.85rem; }

.pt-estat {
    display: block;
    font-size: 0.72rem;
    line-height: 1.2;
    min-height: 1em;
    margin-top: 0.15rem;
}
.pt-estat.pt-desant { color: var(--muted); }
.pt-estat.pt-desat { color: var(--primary); }
.pt-estat.pt-error { color: var(--error-text); }

/* -------- Importació de fitxes des d'Excel: columnes reconegudes -------- */
.import-cols { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.import-cols li { margin: 0.2rem 0; font-size: 0.9rem; }
.import-col-falta { color: var(--error-text); font-weight: 600; }

/* -------- «Estructura planilla»: edició (Fase 1) --------
   Capçalera de zona editable (nom + interruptor actiu + reordenar + eliminar),
   i cada cel·la de lloc amb els seus propis controls (fila, columna, nom,
   actiu, formacions requerides, eliminar). Un lloc o una zona inactius es
   pinten en gris perquè es distingeixin d'un cop d'ull, sense confondre's amb
   un lloc «sense revisar». */
.pt-zona-cap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
.pt-zona-cap .pt-zona-nom {
    flex: 1;
    min-width: 10rem;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    text-align: left;
    padding: 0.2rem 0.4rem;
}
.pt-zona-accions { display: inline-flex; align-items: center; gap: 0.1rem; white-space: nowrap; }
.pt-zona-accions form { display: inline; }
.pt-zona-accions .btn-link { padding: 0.1rem 0.3rem; font-size: 0.9rem; }
.pt-zona-accions .btn-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.pt-zona-elimina { color: var(--error-text); }
tr.pt-zona-inactiva { opacity: 0.55; }
tr.pt-zona-inactiva .pt-zona-nom { text-decoration: line-through; text-decoration-color: var(--muted); }

.pt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}
.pt-toggle input { width: auto; margin: 0; }

.pt-nomcol { min-width: 14rem; vertical-align: top; }
/* Reforç: fons propi molt suau perquè es distingeixi de seguida d'un obligatori,
   més una franja de 4px al costat esquerre de la seva primera cel·la i una
   etiqueta «REFORÇ» al costat del nom (perquè no depengui només del color).
   Inactiu: gris i text apagat; es declara després perquè guanyi si un lloc és
   alhora reforç i inactiu. Totes dues s'apliquen a les 6 cel·les del lloc
   (`data-lloc-cel`), no només al nom, amb `!important`: sense això, el fons
   alternat per fila (més amunt, més específic perquè encadena 3 classes) les
   guanyava a les files «b» i els reforços de la fila 2 es veien grisos.
   `box-shadow: inset` en lloc de `border-left` perquè no competeixi amb el
   `border-left` de `.pt-sep` (el separador INFERMERIA/TCAI) al mateix costat. */
td.pt-reforc { background: var(--reforc-bg) !important; }
.pt-nomcol.pt-reforc { box-shadow: inset 4px 0 0 var(--reforc); }
.pt-badge-reforc {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--reforc);
    border-radius: 3px;
    vertical-align: middle;
}
td.pt-lloc-inactiu { opacity: 0.5; background: var(--bg) !important; }
.pt-nomcol.pt-lloc-inactiu .pt-nom-input { text-decoration: line-through; text-decoration-color: var(--muted); }
.pt-tipus { min-width: 6.5rem; }

/* Destaca uns segons el lloc o la zona a què torna la pàgina després
   d'afegir, moure o eliminar (vegeu l'script de baix): mai es queda dalt de
   tot sense indicar on ha anat a parar el canvi. La transició, sempre present
   a l'element, fa que s'esvaeixi sol en treure la classe `pt-destacat`. */
.pt-nomcol, .planilla-taula tr.pt-zona > th { transition: background-color 1s ease; }
.pt-destacat { background-color: #fff3b0 !important; }

.pt-lloc-fila1 { display: flex; gap: 0.3rem; margin-bottom: 0.2rem; }
.pt-fila { width: 3.2rem; padding: 0.15rem 0.25rem; font-size: 0.8rem; }
.pt-columna { flex: 1; padding: 0.15rem 0.25rem; font-size: 0.72rem; }
.pt-nom-input { width: 100%; padding: 0.2rem 0.35rem; font-size: 0.85rem; margin-bottom: 0.25rem; }

.pt-lloc-fila3 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pt-lloc-elimina { color: var(--error-text); padding: 0 0.2rem; }

.pt-formacions { font-size: 0.78rem; position: relative; }
.pt-formacions summary { cursor: pointer; color: var(--primary); list-style: none; }
.pt-formacions summary::-webkit-details-marker { display: none; }
.pt-formacions[open] summary { font-weight: 600; }
.formacions-pop {
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 0;
    min-width: 14rem;
    max-height: 14rem;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    margin-top: 0.2rem;
}
.formacions-llista { display: flex; flex-direction: column; gap: 0.2rem; }
.formacions-item { display: flex; align-items: center; gap: 0.35rem; font-weight: 400; white-space: normal; }
.formacions-item input { width: auto; margin: 0; }
.formacions-avis { color: var(--primary-dark); font-size: 0.75rem; margin: 0 0 0.3rem; }
.formacions-nova { display: flex; gap: 0.3rem; margin-top: 0.4rem; border-top: 1px solid var(--border); padding-top: 0.4rem; }
.formacions-nova input { flex: 1; padding: 0.15rem 0.3rem; font-size: 0.78rem; }

tr.pt-afegeix td { background: var(--bg); text-align: center; padding: 0.3rem; }
tr.pt-afegeix .btn-link { font-size: 0.8rem; }

.pt-nova-zona { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; max-width: 24rem; }
.pt-nova-zona input { flex: 1; }

.pt-qui-hi-pot { font-size: 0.72rem; padding: 0.05rem 0.3rem; }

/* -------- «Qui hi pot anar»: marcar Sí/No d'un lloc des del seu propi costat -------- */
.qhpa-capcalera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.2rem;
    margin-bottom: 0.5rem;
}
.qhpa-capcalera input[type="search"] { flex: 1 1 16rem; min-width: 12rem; }
.qhpa-massiu { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.qhpa-massiu form { display: inline; }
.qhpa-massiu-etiqueta { font-size: 0.85rem; color: var(--muted); margin-right: 0.2rem; }
.qhpa-comptador { font-weight: 600; font-size: 0.9rem; margin: 0 0 0.6rem; }

.qhpa-llista { list-style: none; margin: 0; padding: 0; }
.qhpa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
}
.qhpa-item:last-child { border-bottom: none; }
.qhpa-nom { font-size: 0.92rem; }
.qhpa-tria { flex: 0 0 auto; }

/* -------- «Historial d'ubicacions» (fitxa del professional) -------- */
.historial-filtre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 0.5rem; }
.historial-filtre label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; color: var(--muted); }
.historial-zona { margin-top: 0.6rem; }
.historial-total {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    margin-left: 0.3rem;
}

/* -------- Estat «Pot (només si cal)» de la rotació -------- */
/* Assignació d'una planilla que ha sortit d'un «Pot»: fons ambre i etiqueta. */
.cel-assignat.cel-pot { background: var(--pot-bg); box-shadow: inset 3px 0 0 var(--pot); }
.marca-pot {
    display: inline-block;
    color: var(--pot);
    background: #fff;
    border: 1px solid var(--pot);
    border-radius: 999px;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: middle;
    white-space: nowrap;
}
.marca-pot[hidden] { display: none; }
.historial-total-pot { background: var(--pot-bg); color: var(--pot); }
.historial-pot-titol { margin-top: 1.2rem; }
.pt-normes { margin-top: 1.5rem; }
.pt-normes h3 { margin-top: 0; }
.pt-normes-llista { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.pt-normes-llista li { margin-bottom: 0.45rem; }

/* Ajustos de la rotació (Estructura planilla) */
.pt-rotacio { margin-bottom: 1rem; }
.pt-rotacio h3 { margin-top: 0; }
.pt-rot-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.6rem 0 0; }
.pt-rot-fila input[type="number"] { width: 4.5rem; }
.pt-nom-servei input[type="text"] { width: min(24rem, 100%); }
.pt-rot-principal { font-size: 0.95rem; }
.pt-rot-atalls { display: inline-flex; gap: 0.15rem; }
.pt-rotacio .hint { margin: 0.2rem 0 0.4rem; }

.pt-zona-lloc { max-width: 8.5rem; font-size: 0.75rem; padding: 0.1rem 0.2rem; }

/* -------- Estructura planilla: columnes de la fulla (Revisió ACR/PIXYS, Torn sopar) -------- */
.pt-fulla-interruptor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0.6rem 0; }
.pt-fulla-interruptor .hint { margin: 0; flex: 1 1 22rem; }
.planilla-taula .pt-fulla { display: none; }
.pt-mostra-fulla .planilla-taula th.pt-fulla,
.pt-mostra-fulla .planilla-taula td.pt-fulla { display: table-cell; }
.pt-fulla input { width: 7.5rem; padding: 0.15rem 0.3rem; font-size: 0.85rem; text-align: center; }

.avis-disseny { border-color: var(--error-text); background: var(--error-bg); color: var(--error-text); }
.avis-disseny ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* -------- Planilla: panell de treball (només pantalla) i notes del full -------- */
.pt-panell { border: 2px dashed var(--muted); background: repeating-linear-gradient(135deg, #fafbfc, #fafbfc 12px, #f3f5f7 12px, #f3f5f7 24px); }
.pt-panell-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.pt-panell-cap h3 { margin: 0; }
.pt-panell-etiqueta { background: var(--muted); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; }
.pt-panell-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.pt-panell-col { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.9rem; }
.pt-panell-col h4 { margin: 0 0 0.3rem; font-size: 0.95rem; letter-spacing: 0.05em; }
.pt-panell-col h5 { margin: 0.7rem 0 0.25rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.pt-comptador { background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; padding: 0 0.5rem; margin-left: 0.3rem; font-weight: 700; }
.pt-persones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.pt-persona { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; padding: 0.25rem 0.4rem; border-radius: 6px; border: 1px solid var(--border); }
.pt-denari { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 800; color: var(--primary-dark); background: var(--primary-soft); padding: 0 0.45rem; border-radius: 4px; user-select: all; }
.pt-persona-nom { font-weight: 600; }
.pt-motiu { flex-basis: 100%; font-size: 0.75rem; color: var(--muted); }
.pt-persona.pt-collocada { opacity: 0.45; background: var(--bg); }
.pt-persona.pt-collocada .pt-persona-nom, .pt-persona.pt-collocada .pt-denari { text-decoration: line-through; }
.pt-buit { margin: 0; color: var(--muted); font-size: 0.85rem; }
.pt-panell-sense-cat { margin-top: 1rem; }
.pt-notes .pt-nota { display: block; width: 100%; margin: 0.4rem 0; font-size: 1rem; }

/* -------- Avisos de restriccions dures a la planilla (només pantalla) -------- */
/* Una assignació que se salta una restricció (marca, categoria, horari, nivell,
   formació) es permet però es veu: vora i fons vermells i el motiu a la cel·la. */
.cel-assignat.cel-incompleix { background: #fff0ef; box-shadow: inset 4px 0 0 var(--error-text); }
.cel-incompliment {
    display: block;
    margin-top: 0.15rem;
    color: var(--error-text);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
}
.cel-incompliment[hidden] { display: none; }
.avis-incompliments { border: 2px solid var(--error-text); background: var(--error-bg); }
.avis-incompliments[hidden] { display: none; }
.avis-incompliments h3 { margin: 0; color: var(--error-text); }
.avis-incompliments ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.avis-incompliments li { margin: 0.2rem 0; }
.cel-assignat.cel-flaix { outline: 3px solid var(--error-text); outline-offset: -3px; }
@media print { .avis-incompliments, .cel-incompliment { display: none !important; } }

/* Comprovació que ningú no es perd (només pantalla; mai a l'Excel ni al PDF) */
.avis-desapareguts { border: 3px solid var(--error-text); background: var(--error-bg); color: var(--error-text); }
.avis-desapareguts[hidden], .avis-sense-lloc[hidden] { display: none; }
.avis-desapareguts h3 { margin: 0; font-size: 1.25rem; }
.avis-desapareguts ul { margin: 0.5rem 0 0; padding-left: 1.2rem; font-weight: 700; }
.avis-desapareguts ul:empty { display: none; }
.avis-sense-lloc { border: 2px solid #e0a030; background: #fff4e0; color: #7a4f00; }
.pt-suma { margin: 0.6rem 0 0.2rem; font-weight: 700; }
.pt-suma #suma-marca { margin-left: 0.6rem; color: var(--primary-dark); }
.pt-suma.pt-suma-error, .pt-suma.pt-suma-error #suma-marca { color: var(--error-text); }
.pt-persona.pt-perduda { border-color: #e0a030; border-left-width: 5px; background: #fff4e0; }
.pt-persona.pt-perduda .pt-motiu { color: #7a4f00; font-weight: 600; }
.pt-buit[hidden] { display: none; }
@media print { .avis-desapareguts, .avis-sense-lloc, .pt-suma { display: none !important; } }

/* Marca manual (Pendent / Ubicat manualment / Festa extra / Baixa) al panell de treball
   i a l'apartat «Incidències» (només pantalla) */
.pt-marca-input { flex-basis: 100%; font-size: 0.78rem; color: var(--muted); padding: 0.1rem 0.2rem; }
.pt-persona.pt-manual .pt-marca-input { color: var(--primary-dark); font-weight: 700; }

/* -------- Apartat «Incidències» (només pantalla; mai a l'Excel ni al PDF) -------- */
.pt-incidencies .hint { margin-top: 0.5rem; }
.pt-incidencies-llista { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pt-incidencia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; padding: 0.25rem 0.4rem; border-radius: 6px; border: 1px solid var(--border); }
.pt-incidencia-cat { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.pt-incidencia-motiu { font-size: 0.8rem; font-weight: 600; }
.pt-incidencia-origen { margin-left: auto; font-size: 0.72rem; color: var(--muted); }
@media print { .pt-panell, .pt-incidencies { display: none !important; } }

/* Obligatoris sense cobrir i per què (només pantalla; mai a l'Excel ni al PDF) */
.avis-sense-cobrir { border: 2px solid var(--error-text); background: var(--error-bg); }
.avis-sense-cobrir[hidden] { display: none; }
.avis-sense-cobrir h3 { margin: 0; color: var(--error-text); }
.avis-sense-cobrir ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.avis-sense-cobrir li { margin: 0.35rem 0; }
.sc-etiqueta { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.05rem 0.5rem; border-radius: 999px; margin: 0 0.4rem; }
.sc-real .sc-etiqueta { background: var(--error-text); color: #fff; }
.sc-podria .sc-etiqueta { background: #e0a030; color: #3a2600; }
.sc-motiu { display: block; font-size: 0.85rem; color: var(--text); }
@media print { .avis-sense-cobrir { display: none !important; } }
.sc-fitxa .sc-etiqueta { background: #2f5d8a; color: #fff; }

/* Bloc «Normes d'assignació» (per a la supervisora; text que surt del codi de cada regla) */
.pt-norma-seccio { margin-top: 1.1rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.pt-norma-seccio h4 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.pt-normes-llista { margin: 0.4rem 0 0; padding-left: 1.3rem; }
.pt-normes-llista li { margin: 0.5rem 0; }
.pt-norma-general { margin: 0.5rem 0; }
.pt-norma-estat { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.05rem 0.55rem; border-radius: 999px; margin-left: 0.3rem; vertical-align: 0.05em; }
.pt-norma-on { background: var(--primary-soft); color: var(--primary-dark); }
.pt-norma-off { background: var(--border); color: var(--muted); }

/* -------- «Pacients avui»: dotació automàtica per zona -------- */
.pt-pacients { margin-bottom: 1rem; }
.pt-pacients h3 { margin-top: 0; }
.pt-pacients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.7rem;
    margin-top: 0.6rem;
}
.pt-pacients-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
}
.pt-pacients-nom { font-size: 1rem; font-weight: 700; color: var(--text); }
.pt-pacients-input { width: 4.5rem; padding: 0.25rem 0.4rem; font-size: 0.95rem; }
.pt-pacients-resultat-bloc { display: flex; flex-direction: column; gap: 0.15rem; }
.pt-pacients-resultat { font-size: 0.78rem; color: var(--muted); }
.pt-pacients-avis { font-size: 0.78rem; color: var(--error-text); font-weight: 600; }
.pt-pacients-pendent { font-size: 0.72rem; font-weight: 700; color: var(--pot); text-transform: uppercase; letter-spacing: 0.02em; }
.pt-pacients-card.pt-pacients-tancada { background: #eceff1; }
.pt-pacients-card.pt-pacients-tancada .pt-pacients-nom { color: var(--muted); }
.pt-pacients-card.pt-pacients-dirty { border-color: var(--pot); background: var(--pot-bg); }
.pt-pacients-aplica { margin-top: 0.8rem; }
@media (max-width: 520px) {
    .pt-pacients-grid { grid-template-columns: 1fr; }
}

/* -------- Regla de dotació d'una zona (dins la capçalera, a «Estructura planilla») -------- */
.pt-dotacio { margin-top: 0.4rem; font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 0.82rem; }
.pt-dotacio summary { cursor: pointer; color: var(--primary); list-style: none; }
.pt-dotacio summary::-webkit-details-marker { display: none; }
.pt-dotacio[open] summary { font-weight: 600; }
.pt-dotacio-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 32rem; margin-top: 0.4rem; }
.pt-dotacio-form .hint { margin: 0; }
.pt-dotacio-form label { display: block; font-size: 0.8rem; font-weight: 600; }
.pt-dotacio-form input, .pt-dotacio-form select, .pt-dotacio-form textarea {
    display: block; margin-top: 0.15rem; width: 100%; max-width: 14rem; padding: 0.2rem 0.35rem; font-size: 0.82rem;
}
.pt-dotacio-form textarea { max-width: 18rem; font-family: monospace; }
.pt-dotacio-camps { flex-wrap: wrap; gap: 0.6rem 1rem; }
.pt-dotacio-ratio, .pt-dotacio-taula, .pt-dotacio-tcai { display: none; }
.pt-dotacio-form.pt-mostra-ratio .pt-dotacio-ratio { display: flex; }
.pt-dotacio-form.pt-mostra-taula .pt-dotacio-taula { display: block; }
.pt-dotacio-form.pt-mostra-ratio .pt-dotacio-tcai,
.pt-dotacio-form.pt-mostra-taula .pt-dotacio-tcai { display: block; }

/* =====================================================================
   Planilla diària: els tres estats visibles d'un dia
   IMPORTADA (gris) · ESBORRANY (taronja) · CONFIRMADA (verd)
   ===================================================================== */
:root {
    --estat-importada: #6b7280;
    --estat-esborrany: #c25e00;
    --estat-esborrany-bg: #fff3e2;
    --estat-confirmada: #1f7a3d;
    --estat-confirmada-bg: #e3f4e8;
}
.estat {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
}
.estat-importada { background: var(--estat-importada); }
.estat-esborrany { background: var(--estat-esborrany); }
.estat-confirmada { background: var(--estat-confirmada); font-size: 0.85rem; }
h1 .estat { font-size: 0.8rem; margin-left: 0.5rem; }
.nowrap { white-space: nowrap; }

/* «Les meves planilles» */
.dies-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin: 0.8rem 0 1rem; }
.dies-filtres .field { margin: 0; min-width: 12rem; }
.dies-filtres-n { margin-left: auto; color: var(--muted); font-size: 0.85rem; }
.dies-taula td { vertical-align: middle; }
.dies-taula tr.fila-confirmada, .dies-taula tr.fila-confirmada:hover { background: var(--estat-confirmada-bg); }
.dies-taula tr.fila-confirmada td { border-bottom-color: #c5e6cf; }
.dies-taula tr.dia-avui { box-shadow: inset 6px 0 0 var(--primary); font-weight: 600; }
.dies-taula tr.dia-avui:not(.fila-confirmada) { background: var(--primary-soft); }
.dia-avui-etiqueta { display: inline-block; margin-left: 0.5rem; background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.1rem 0.5rem; border-radius: 4px; vertical-align: 0.1em; }

/* ESBORRANY amb la rotació vella: línia d'avís taronja (a la llista i a dalt del dia) */
.fila-avis-rotacio td { background: var(--estat-esborrany-bg); border-top: none; padding-top: 0.2rem; }
.avis-rotacio-text { color: #8a4300; font-weight: 600; margin-right: 0.8rem; }
.linia-avis-rotacio { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0.6rem 0.9rem; background: var(--estat-esborrany-bg); border: 1px solid var(--estat-esborrany); border-left-width: 6px; border-radius: 8px; }
.btn-avis-rotacio { background: var(--estat-esborrany); border-color: var(--estat-esborrany); color: #fff; padding: 0.25rem 0.75rem; font-size: 0.88rem; }
.btn-avis-rotacio:hover { background: #9a4a00; border-color: #9a4a00; color: #fff; text-decoration: none; }

/* «Crear planilla»: resum del fitxer, ja desat */
.imp-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1.2rem; }
.imp-form .field { margin: 0; min-width: 16rem; }
.imp-form .form-actions { margin: 0; }
.imp-taula td { vertical-align: middle; }
.imp-fila { cursor: pointer; }
.imp-fila.fila-confirmada, .imp-fila.fila-confirmada:hover { background: var(--estat-confirmada-bg); }
.imp-check input { width: 1.15rem; height: 1.15rem; }
.imp-plega::before { content: "▸"; display: inline-block; color: var(--muted); transition: transform 0.15s; }
.imp-obert .imp-plega::before { transform: rotate(90deg); }
.imp-detall { display: none; }
.imp-obert .imp-detall { display: table-row; }
.imp-detall > td { background: #fafbfc; }
.imp-detall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.8rem; }
.imp-detall-grid h4 { margin: 0 0 0.3rem; font-size: 0.85rem; letter-spacing: 0.03em; }
.imp-n { background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; padding: 0 0.5rem; font-weight: 700; }
.imp-persones { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.15rem; }
.imp-persones .pt-denari { font-size: 0.85rem; }
.imp-codi { display: inline-block; margin-right: 0.35rem; padding: 0 0.4rem; border-radius: 4px; background: var(--border); font-size: 0.78rem; font-weight: 700; }
.imp-perdua { color: #8a4300; font-weight: 700; }
.imp-confirmada > td { background: var(--estat-confirmada-bg); }
.imp-confirmada-avis { margin: 0; border-color: var(--estat-confirmada); }
.imp-fila.fila-esborrany, .imp-fila.fila-esborrany:hover { background: var(--estat-esborrany-bg); }
.imp-esborrany > td { background: var(--estat-esborrany-bg); }
.imp-esborrany-avis { margin: 0; border-color: var(--estat-esborrany); }
.imp-desat { color: var(--estat-confirmada); font-weight: 700; margin-left: 0.3rem; }
.imp-form-fila { margin: 0; }
.imp-avis-ok { border-color: var(--estat-confirmada); background: var(--estat-confirmada-bg); }
.imp-avis-ok p { margin: 0; }

/* Planilla: desat automàtic de l'esborrany («Desant…» / «Desat ✓ hh:mm» al costat de l'estat) */
.autodesat { margin-left: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); vertical-align: middle; white-space: nowrap; }
.autodesat-ok { color: var(--estat-confirmada); }
.autodesat-error { color: var(--error-text); font-weight: 800; }
.autodesat-avis { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; margin: 0; max-width: 48rem; margin-inline: auto;
    background: var(--error-bg); border: 2px solid var(--error-text); color: var(--error-text); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); }
.autodesat-avis[hidden] { display: none; }
.autodesat-avis p { margin: 0 0 0.5rem; }

/* Paperera: esborrar un dia, confirmació i llista de dies esborrats */
.icona-paperera { vertical-align: -0.15em; }
.dies-accions { text-align: right; }
.btn-paperera { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-left: 0.4rem; border-radius: 6px; color: var(--muted); vertical-align: middle; }
.btn-paperera:hover, .btn-paperera:focus-visible { color: var(--error-text); background: var(--error-bg); text-decoration: none; }
.btn-esborra-dia { color: var(--error-text); }
.esborra-card { border-left: 6px solid var(--muted); }
.esborra-card.esborra-confirmada { border: 2px solid var(--error-text); border-left-width: 8px; background: var(--error-bg); }
.esborra-titol { font-size: 1.05rem; margin-top: 0; }
.esborra-confirmada .esborra-titol { color: var(--error-text); font-weight: 700; }
.esborra-perdues li { margin-bottom: 0.25rem; }
.esborra-paraula { max-width: 18rem; }
.esborra-paraula input { font-weight: 700; letter-spacing: 0.08em; }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.paperera-accions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.3rem 0.6rem; }
.paperera-accions form { margin: 0; }
.paperera-elimina { color: var(--error-text); }
.btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
.enllac-paperera { text-align: right; margin: 0.4rem 0 0; font-size: 0.85rem; }
.enllac-paperera a { color: var(--muted); }
.enllac-paperera a:hover { color: var(--text); }