/* ============================================================
   ProjectSiu - full d'estils
   Mateixa estructura visual que VolSiu, amb una paleta mes grisa.
   ============================================================ */
:root {
    --color-primary: #454f5b;
    --color-primary-light: #55606d;
    --color-primary-lighter: #6b7684;
    --color-accent: #7f8a99;
    --color-bg: #f2f3f5;
    --color-card: #ffffff;
    --color-text: #232830;
    --color-muted: #6b7280;
    --color-border: #e0e3e7;
    --color-ok: #4f8a6b;
    --color-off: #98a0aa;
    --color-danger: #bd5a55;
    --color-warn: #c19a48;
    --color-info: #5b6b7d;
    --radius: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

a { color: var(--color-primary); }

/* ---------- Auth ---------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--color-primary), #2f363f);
    padding: 16px;
}
.auth-card {
    background: var(--color-card);
    padding: 32px;
    border-radius: var(--radius);
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.auth-card h1 { margin: 0 0 4px; color: var(--color-primary); }
.auth-card-640 { max-width: 640px; }
.subtitle { color: var(--color-muted); margin-top: 0; margin-bottom: 24px; }
.auth-footer { color: var(--color-muted); font-size: .8rem; margin: 24px 0 0; }
.auth-footer a { color: var(--color-muted); text-decoration: underline; }

/* ---------- Peu de pagina ---------- */
.app-footer {
    text-align: center;
    color: var(--color-muted);
    font-size: .8rem;
    padding: 20px 16px 28px;
}
.app-footer a { color: var(--color-muted); text-decoration: underline; }

/* ---------- Topbar ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-primary);
    color: #fff;
    padding: 12px 20px;
    flex-wrap: wrap;
}
.topbar-brand { font-weight: 700; font-size: 1.2rem; }
.topbar-brand span { opacity: .6; font-weight: 400; }
.topbar-nav { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; }
.topbar-nav a { color: #dde1e6; text-decoration: none; padding: 4px 2px; }
.topbar-nav a:hover, .topbar-nav a.actiu { color: #fff; text-decoration: underline; }

/* Menus desplegables de la barra (<details>): funcionen tambe sense JavaScript */
.topbar-nav .nav-menu { position: relative; }
.topbar-nav summary { list-style: none; cursor: pointer; color: #dde1e6; padding: 4px 2px; user-select: none; }
.topbar-nav summary::-webkit-details-marker { display: none; }
.topbar-nav summary::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    border-bottom-width: 0;
    vertical-align: middle;
    transition: transform .15s;
}
.topbar-nav details[open] > summary::after { transform: rotate(180deg); }
.topbar-nav .nav-menu > summary:hover, .topbar-nav .nav-menu[open] > summary, .topbar-nav .nav-menu > summary.actiu { color: #fff; }
.topbar-nav .nav-menu > summary.actiu { text-decoration: underline; }
.topbar-nav .nav-menu-llista {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 50;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.topbar-nav .nav-menu-llista a, .topbar-nav .nav-submenu > summary {
    display: block;
    color: var(--color-text);
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
}
.topbar-nav .nav-menu-llista a:hover, .topbar-nav .nav-submenu > summary:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.topbar-nav .nav-menu-llista a.actiu { color: var(--color-primary); font-weight: 600; background: var(--color-bg); text-decoration: none; }
.topbar-nav .nav-submenu > summary::after { float: right; margin-top: 7px; }
.topbar-nav .nav-sub-llista { display: flex; flex-direction: column; padding-left: 14px; }
@media (max-width: 720px) {
    .topbar-nav { position: relative; }
    .topbar-nav .nav-menu { position: static; }
    .topbar-nav .nav-menu-llista { left: 0; right: 0; min-width: 0; }
}

.topbar-user { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar-user span { opacity: .9; }
.rol-switch { display: flex; align-items: center; gap: 6px; }
.rol-switch label { font-size: .72rem; opacity: .75; }
.rol-switch select {
    font-size: .8rem;
    padding: 3px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.12);
    color: #fff;
}
.rol-switch select option { color: var(--color-text); }

/* ---------- Layout ---------- */
.content {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}
h1 { color: var(--color-primary); }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.page-head h1 { margin: 0; flex: 1; }
.breadcrumb { font-size: .85rem; color: var(--color-muted); margin: 0 0 16px; }
.breadcrumb a { color: var(--color-muted); }

/* ---------- Cards / panels ---------- */
.cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.card {
    background: var(--color-card);
    border-radius: var(--radius);
    padding: 18px 24px;
    min-width: 150px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.card h2 { margin: 0; font-size: 2rem; color: var(--color-primary); }
.card p { margin: 4px 0 0; color: var(--color-muted); }
.card-link { text-decoration: none; cursor: pointer; transition: box-shadow .15s; display: block; }
.card-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); }

.quick-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.quick-action-btn { padding: 14px 22px; font-size: 1rem; }

.panel {
    background: var(--color-card);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.panel-header h2 { margin: 0; flex: 1; font-size: 1.1rem; }
.fila-separada { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { font-weight: 600; font-size: .9rem; display: block; }
.form label > input, .form label > select, .form label > textarea { margin-top: 4px; }
.form input, .form select, .form textarea {
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
    font-family: inherit;
    background: #fff;
    color: var(--color-text);
}
.form textarea { min-height: 90px; resize: vertical; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.form-grid .span-2 { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.form-inline { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.form-inline > div { display: flex; flex-direction: column; gap: 4px; }
.hint { color: var(--color-muted); font-size: .8rem; }

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    border: none;
    border-radius: 6px;
    padding: 9px 16px;
    font-size: .95rem;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    background: var(--color-muted);
    line-height: 1.2;
}
.btn:disabled { opacity: .6; cursor: default; }
.btn-primary { background: var(--color-primary); }
.btn-secondary { background: var(--color-accent); }
.btn-danger { background: var(--color-danger); }
.btn-ok { background: var(--color-ok); }
.btn-small { padding: 6px 12px; font-size: .85rem; }
.btn-block { display: block; width: 100%; text-align: center; }
.inline-form { display: inline; }

/* ---------- Table ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    font-size: .92rem;
    vertical-align: top;
}
.table th { color: var(--color-muted); font-weight: 600; }
.table tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover { background: var(--color-bg); }
.table .num { text-align: right; white-space: nowrap; }
.table-actions { white-space: nowrap; text-align: right; }

/* Files desplegables al mobil */
.btn-expand-fila {
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary-lighter);
    color: #fff;
    font-size: 1rem; font-weight: 700; line-height: 1;
    cursor: pointer; padding: 0;
}
@media (max-width: 720px) {
    .table th.col-secondary, .table td.col-secondary { display: none; }
    .table td.col-expand { display: table-cell; }
    .btn-expand-fila { display: inline-flex; }
    tr.row-expanded .btn-expand-fila { background: var(--color-danger); }
    .table tr.row-expanded td.col-secondary {
        display: block;
        border-bottom: none;
        padding: 3px 10px;
    }
    .table tr.row-expanded td.col-secondary::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--color-muted);
    }
}
.table th.col-expand, .table td.col-expand { display: none; width: 32px; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-muted);
    white-space: nowrap;
}
.badge-off, .badge-cancelat { background: var(--color-off); }
.badge-finalitzat { background: var(--color-ok); }
.badge-en-curs { background: var(--color-info); }
.badge-planificacio, .badge-pendent { background: var(--color-primary-lighter); }
.badge-pausat, .badge-revisio { background: var(--color-warn); }
.badge-bloquejada { background: var(--color-danger); }
.badge-admin { background: var(--color-primary); }
.badge-usuari { background: var(--color-off); }

.estat-llegenda {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    font-size: .82rem; color: var(--color-muted); margin: 0 0 12px;
}
.estat-llegenda span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Alerts ---------- */
.alert { padding: 10px 14px; border-radius: 6px; font-size: .92rem; margin-bottom: 16px; }
.alert-error { background: #f6e3e2; color: #8a3b37; }
.alert-success { background: #e4efe9; color: #2f6b4e; }
.alert-info { background: #e7ebef; color: #3f4c5a; }
a.alert-link { display: block; text-decoration: none; font-weight: 600; }

/* ---------- Progres ---------- */
.progress {
    background: var(--color-border);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin: 6px 0;
}
.progress-bar { background: var(--color-ok); height: 100%; }
.progress-label { font-size: .8rem; color: var(--color-muted); }

/* ---------- Definition list ---------- */
.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.detail-list dt { font-weight: 600; color: var(--color-muted); }
.detail-list dd { margin: 0; }
@media (max-width: 520px) { .detail-list { grid-template-columns: 1fr; gap: 2px; } .detail-list dd { margin-bottom: 8px; } }

.subseccio { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.subseccio h3 { margin: 0 0 8px; font-size: 1rem; color: var(--color-primary); }

.text-muted { color: var(--color-muted); }
.text-danger { color: var(--color-danger); font-weight: 600; }
.card h2.text-danger { color: var(--color-danger); }
.form .checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.form .checkbox-label input { width: auto; }
.table tfoot th { border-top: 2px solid var(--color-border); border-bottom: none; color: var(--color-text); }
.mt-0 { margin-top: 0; }

/* ---------- Recurrencia de tasques ---------- */
.badge-recurrent { background: var(--color-info); }

.tasca-accions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tasca-accions .inline-form { display: inline-flex; align-items: center; gap: 4px; }
.form-ajornar input[type="number"] {
    width: 58px;
    padding: 5px 6px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: .85rem;
}

.afer-list { list-style: none; margin: 0; padding: 0; }
.afer-item {
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}
.afer-item:first-child { border-top: none; }
.afer-endarrerida { border-left: 3px solid var(--color-danger); padding-left: 12px; margin-left: -12px; }
.afer-propera { border-left: 3px solid var(--color-warn); padding-left: 12px; margin-left: -12px; }
.text-warn { color: var(--color-warn); font-weight: 600; }
.afer-cap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.afer-cap a { text-decoration: none; color: var(--color-text); }
.afer-cap a:hover { text-decoration: underline; }
.afer-meta { color: var(--color-muted); font-size: .85rem; margin: 4px 0 8px; }

/* ---------- Tasques rapides ---------- */
.mt-8 { margin-top: 8px; }
.rapida-list { list-style: none; margin: 12px 0 0; padding: 0; }
.rapida-item {
    padding: 8px 0;
    border-top: 1px solid var(--color-border);
}
.rapida-item:first-child { border-top: none; }
.rapida-fila { display: flex; align-items: center; gap: 8px; }
.rapida-text { flex: 1; }
.rapida-text a { color: var(--color-text); }
.rapida-feta .rapida-text { text-decoration: line-through; color: var(--color-muted); }

/* Notes prioritaries: estrella + ratlla lateral; es llisten les primeres */
.rapida-estrella {
    background: none;
    border: none;
    padding: 0 4px;
    margin: 0;
    font: inherit;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-muted);
}
.rapida-estrella.activa { color: var(--color-warn); }
button.rapida-estrella:hover { color: var(--color-warn); }
span.rapida-estrella { cursor: inherit; padding: 0; font-size: 1rem; }
.rapida-prioritaria { border-left: 3px solid var(--color-warn); padding-left: 8px; }
.rapida-pri-op { display: inline-flex; align-items: center; gap: 5px; font-weight: normal; align-self: center; }

/* Filtre de notes per projecte (Inici) */
.rapida-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.btn-filtre {
    background: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn-filtre:hover { background: var(--color-bg); }
/* Botons dels projectes actius (Inici de l'administrador): mateix aspecte que els filtres de notes */
.projectes-botons { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.btn-filtre[aria-pressed="true"] {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.rapida-dirigida { margin: 2px 0 0 32px; font-size: .85rem; }
.rapida-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--color-primary);
    color: #fff;
    vertical-align: middle;
}
.rapida-dest { margin-top: 6px; }
.rapida-dest-fieldset { border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 10px; margin: 4px 0 0; }
.rapida-dest-opcions { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.rapida-dest-op { display: inline-flex; align-items: center; gap: 5px; font-weight: normal; }

/* Nota clicable que obre el dialeg */
.rapida-obre {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 4px 6px;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: var(--color-text);
    border-radius: 6px;
}
.rapida-obre:hover { background: var(--color-bg); }
.rapida-obre-icon { font-size: 1.15rem; line-height: 1; color: var(--color-primary); }
.rapida-obre .rapida-dates { flex: none; }

.nota-dialog .nota-cos { font-size: 1.05rem; margin: 0 0 6px; }
.nota-dialog .form-actions { justify-content: flex-end; align-items: center; }

.nota-compartir { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nota-compartir .js-compartir { background: var(--color-accent); }
.share-links { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.share-links .btn { background: var(--color-primary-lighter); }
.rapida-dates { font-size: .78rem; white-space: nowrap; }
.rapida-check {
    border: none;
    background: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-primary);
    padding: 0 2px;
}
.form select[multiple] { padding: 4px; }
@media (max-width: 560px) {
    .rapida-dates { display: none; }
}

/* ---------- Clients ---------- */
.estel {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--color-off);
    padding: 0;
}
.estel-on { color: var(--color-warn); }
.cerca-form { margin-bottom: 14px; }

/* ---------- Full de treball ---------- */
.ftl-card .panel-header h2 { flex: none; margin-left: auto; font-size: 1.1rem; }
.ftl-facturada { opacity: .72; }
.ftl-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 12px 0;
}
.ftl-foto { position: relative; display: inline-block; }
.ftl-foto img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: block;
}
.ftl-foto-x {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--color-danger);
    color: #fff;
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.ftl-foto-add label { cursor: pointer; }

/* Afegir fotos (camera / galeria) */
.foto-add { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.foto-add label { cursor: pointer; margin: 0; }
.ftl-fotos .foto-add { margin-left: 4px; }
.nowrap { white-space: nowrap; }
.d-none { display: none !important; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kanban-col { background: var(--color-bg); border-radius: var(--radius); padding: 10px; }
.kanban-col h3 { margin: 0 0 8px; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.kanban-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: .88rem;
    display: block;
    text-decoration: none;
    color: var(--color-text);
}
.kanban-card:hover { border-color: var(--color-primary-lighter); }
.kanban-card a { color: var(--color-text); text-decoration: none; }
.kanban-card a:hover { text-decoration: underline; }
.kanban-card .meta { color: var(--color-muted); font-size: .78rem; margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kanban-card .meta .btn { padding: 3px 8px; font-size: .75rem; }

/* ---------- Dialegs modals ---------- */
dialog {
    border: none;
    border-radius: var(--radius);
    padding: 24px;
    max-width: 560px;
    width: calc(100% - 32px);
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    color: var(--color-text);
}
dialog::backdrop { background: rgba(20, 24, 28, .55); }
dialog h2 { margin-top: 0; color: var(--color-primary); font-size: 1.15rem; }
dialog .form-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Comentaris ---------- */
.comentari { border-top: 1px solid var(--color-border); padding: 10px 0; }
.comentari:first-child { border-top: none; }
.comentari .cap { font-size: .8rem; color: var(--color-muted); margin-bottom: 2px; }
.comentari .cos { white-space: pre-wrap; }

/* ---------- Accions de tasca (correu / web) i editor de text ---------- */
/* Les caselles amb text dins un .form: .form label (display:block) guanyaria per especificitat */
.form label.rapida-dest-op,
.form label.rapida-pri-op { display: inline-flex; align-items: center; gap: 5px; font-weight: normal; }
.form label.rapida-dest-op input,
.form label.rapida-pri-op input { width: auto; }

.badge-accio { background: var(--color-warn); color: #fff; }
.panel-header-accions { display: flex; gap: 8px; flex-wrap: wrap; }
.accions-titol { margin: 16px 0 8px; font-size: .95rem; color: var(--color-primary); }
.accions-titol:first-of-type { margin-top: 4px; }
.accions-avis {
    background: #fbf3e0;
    border: 1px solid var(--color-warn);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .88rem;
    margin: 0 0 10px;
}

.accio-correu {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.accio-cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.accio-per { margin: 4px 0; font-size: .9rem; overflow-wrap: anywhere; }
.accio-cos {
    background: var(--color-bg);
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 8px 0;
    overflow-wrap: anywhere;
}
.accio-cos p, .accio-cos ul, .accio-cos ol, .accio-cos blockquote { margin: 0 0 6px; }
.accio-cos ul, .accio-cos ol { padding-left: 22px; }
.accio-cos a { color: var(--color-primary); text-decoration: underline; }
.accio-adjunts { list-style: none; margin: 6px 0; padding: 0; font-size: .9rem; }
.accio-adjunts li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 0; }
/* Documents de DocuSiu compartits amb una tasca (partials/docusiu_tasca_panel.php): cada document es un bloc,
   amb els seus fitxers en files (nom a l'esquerra, botons a la dreta). */
.docusiu-docs { list-style: none; margin: 6px 0 10px; padding: 0; font-size: .9rem; }
.docusiu-doc { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.docusiu-doc:last-child { border-bottom: 0; }
.docusiu-doc-cap { display: flex; align-items: flex-start; gap: 10px; }
.docusiu-doc-info { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.docusiu-doc-titol { font-weight: 600; }
.docusiu-doc-cap .inline-form { margin-left: auto; flex-shrink: 0; }
.docusiu-fitxers { list-style: none; margin: 6px 0 0 28px; padding: 0; }
.docusiu-fitxer { display: flex; align-items: center; gap: 4px 12px; padding: 5px 0; flex-wrap: wrap; }
.docusiu-fitxer + .docusiu-fitxer { border-top: 1px dashed var(--color-border); }
.docusiu-fitxer-nom { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.docusiu-fitxer-accions { display: flex; gap: 6px; flex-shrink: 0; }
.docusiu-avis { margin: 6px 0 0 28px; font-size: .85rem; color: var(--color-muted); }
@media (max-width: 560px) {
    .docusiu-fitxers, .docusiu-avis { margin-left: 8px; }
    .docusiu-fitxer-accions { width: 100%; }
}
.accio-estat { margin: 4px 0; font-size: .85rem; }
.accio-botons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

.accio-webs { list-style: none; margin: 0 0 10px; padding: 0; }
.accio-web {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-top: 1px solid var(--color-border);
}
.accio-web:first-child { border-top: none; }
.accio-url { flex: 1; min-width: 160px; overflow-wrap: anywhere; font-size: .92rem; }
.accio-web .accio-botons { margin-top: 0; }

dialog.dialeg-ample { max-width: 760px; }

.editor { border: 1px solid var(--color-border); border-radius: 6px; background: #fff; }
.editor-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: 6px 6px 0 0;
}
.editor-barra button {
    background: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 4px 9px;
    font-size: .85rem;
    cursor: pointer;
    min-width: 32px;
}
.editor-barra button:hover { background: #fff; border-color: var(--color-accent); }
.editor-sep { width: 1px; background: var(--color-border); margin: 2px 4px; }
.editor-area {
    min-height: 160px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 10px 12px;
    outline: none;
    overflow-wrap: anywhere;
}
.editor-area:focus { box-shadow: inset 0 0 0 2px rgba(69, 79, 91, .25); }
.editor-area p, .editor-area ul, .editor-area ol { margin: 0 0 6px; }
.editor-area ul, .editor-area ol { padding-left: 22px; }
.editor-area a { color: var(--color-primary); text-decoration: underline; }

/* ---------- Registre de correus ---------- */
.text-ok { color: var(--color-ok); font-weight: 600; }
.filtres-registre input[type="search"] { width: 100%; }
.filtres-accions { align-items: center; flex-wrap: wrap; }
.filtres-rapids { margin-right: auto; font-size: .85rem; }
.filtres-rapids a { color: var(--color-primary); }


/* ---------- Recurrencia de tasques (estil Outlook) ---------- */
.rec-bloc { border: 1px solid var(--color-border); border-radius: 6px; padding: 10px 14px 12px; margin: 0 0 12px; min-width: 0; }
.rec-bloc legend { font-size: .85rem; color: var(--color-muted); padding: 0 6px; }
.rec-freq { display: flex; gap: 18px; flex-wrap: wrap; }
.rec-freq-tipus { display: flex; flex-direction: column; gap: 8px; padding-right: 18px; border-right: 1px solid var(--color-border); min-width: 110px; }
.rec-freq-opcions { flex: 1; min-width: 220px; }
.rec-opcio { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 6px 0; font-size: .9rem; }
.form .rec-opcio input[type="number"] { width: 80px; margin-top: 0; }
.form .rec-opcio input[type="date"] { width: auto; margin-top: 0; }
.form .rec-opcio select { width: auto; margin-top: 0; }
.rec-opcio > label { margin: 0; }
.rec-dies-setmana { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0; }
@media (max-width: 640px) {
    .rec-freq-tipus { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--color-border); padding: 0 0 8px; width: 100%; }
}


/* ---------- Correu: camps CCO (copia oculta) ---------- */
.cco-bloc { margin: 4px 0 2px; }
.cco-titol { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.cco-fila { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.form .cco-fila input { flex: 1; margin-top: 0; }
.estat-desti { display: inline-block; white-space: nowrap; }
.estat-desti .badge { margin-left: 4px; }