/* =====================================================================
   GMAO Paper - Full d'estil principal
   Disseny mobile-first, textos i botons grans, paleta sòbria.
   ===================================================================== */

:root {
    --accent: #248f6d;
    --accent-fosc: #1c7257;
    --accent-clar: #e6f3ef;
    --text: #1f2421;
    --text-suau: #5b635e;
    --fons: #f1f3f2;
    --blanc: #ffffff;
    --vora: #d6dbd8;
    --ok: #2e7d32;
    --avis: #e08600;
    --perill: #c62828;
    --ombra: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
    --radi: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--text);
    background: var(--fons);
}

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

/* ---------------------------------------------------------------------
   Estructura general
   --------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

.zona-contingut {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.principal {
    padding: 18px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------
   Menú lateral
   --------------------------------------------------------------------- */
.menu-lateral {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    background: #20302a;
    color: #e7ece9;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 50;
}
.app.menu-obert .menu-lateral { transform: translateX(0); }

.menu-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.menu-marca-icona {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    width: 40px; height: 40px;
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
}
.menu-marca-text { font-size: 1.15rem; font-weight: 600; }

.menu-llista { flex: 1; padding: 10px 0; overflow-y: auto; }

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: #d6ddd9;
    font-size: 1.05rem;
}
.menu-item:hover { background: rgba(255, 255, 255, .07); text-decoration: none; }
.menu-item.actiu {
    background: rgba(36, 143, 109, .25);
    color: #fff;
    border-left: 4px solid var(--accent);
    padding-left: 14px;
}
.menu-icona { display: flex; }
.menu-sortir { border-top: 1px solid rgba(255, 255, 255, .1); }

/* Fons fosc que apareix amb el menú obert (mòbil) */
.rerefons-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 40;
}
.app.menu-obert ~ .rerefons-menu { display: block; }

/* ---------------------------------------------------------------------
   Capçalera
   --------------------------------------------------------------------- */
.capcalera {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--blanc);
    border-bottom: 1px solid var(--vora);
    padding: 10px 16px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.boto-opcions {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
}
.capcalera-titol {
    font-size: 1.2rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.capcalera-dreta { display: flex; align-items: center; gap: 14px; }

.selector-idioma { display: flex; gap: 4px; }
.selector-idioma a {
    padding: 6px 9px;
    border-radius: 0;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-suau);
}
.selector-idioma a.idioma-actiu { background: var(--accent-clar); color: var(--accent-fosc); }

.capcalera-usuari { display: flex; align-items: center; line-height: 1.2; }
.usuari-nom { font-weight: 700; color: var(--text); font-size: 1.1rem; padding: 4px 10px; }
.capcalera-sortir {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    color: var(--text-suau);
    border: 1px solid var(--vora);
    border-radius: var(--radi);
    background: var(--blanc);
}
.capcalera-sortir:hover { color: var(--perill); border-color: var(--perill); text-decoration: none; }

/* ---------------------------------------------------------------------
   Botons
   --------------------------------------------------------------------- */
.boto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--blanc);
    color: var(--text);
    border: 1px solid var(--vora);
    border-radius: 0;
    padding: 12px 18px;
    font-size: 1rem;
    font-weight: 600;
    min-height: 48px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease;
}
.boto:hover { background: var(--fons); text-decoration: none; }
.boto-primari { background: var(--accent); color: #fff; border-color: var(--accent); }
.boto-primari:hover { background: var(--accent-fosc); }
.boto-secundari { background: var(--accent-clar); color: var(--accent-fosc); border-color: #bcdccf; }
.boto-perill { background: #fff; color: var(--perill); border-color: #e6b8b8; }
.boto-perill:hover { background: #fbe9e9; }
.boto-gran { min-height: 56px; font-size: 1.1rem; padding: 14px 22px; }
.boto-petit { min-height: 38px; padding: 6px 12px; font-size: .9rem; }

/* ---------------------------------------------------------------------
   Missatges flash
   --------------------------------------------------------------------- */
.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 0;
    margin-bottom: 14px;
    font-weight: 500;
    border-left: 5px solid;
}
.flash-ok { background: #e7f4e8; border-color: var(--ok); color: #205723; }
.flash-error { background: #fbe9e9; border-color: var(--perill); color: #8c1f1f; }
.flash-avis { background: #fdf1df; border-color: var(--avis); color: #8a5400; }
.flash-tanca { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: inherit; }

/* ---------------------------------------------------------------------
   Barres d'accions i navegació
   --------------------------------------------------------------------- */
.barra-accions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.barra-info { flex: 1; min-width: 200px; color: var(--text-suau); }
.barra-accions-grup { display: flex; gap: 8px; }
/* Iguala alçada de botons amb la dels inputs (50px) quan estan a la barra d'accions */
.barra-accions .boto,
.barra-accions .cercador .boto { min-height: 50px; }

/* Nota 'Requereix aturada' en cursiva, sense fons ni vora,
   conviu inline amb les etiquetes d'estat i prioritat. */
.ot-paro-nota {
    font-style: italic;
    color: var(--text-suau);
    background: transparent;
    border: none;
    padding: 0;
    font-size: .9rem;
    align-self: center;
}

/* Llistat d'hores agrupat per dies: capçalera de dia + files filles */
.taula-agrupada tbody.grup-dia + tbody.grup-dia { border-top: 1px solid var(--vora); }
.taula-agrupada .grup-dia-cap th {
    background: var(--accent-clar);
    color: var(--accent-fosc);
    text-align: left;
    font-weight: 700;
    padding: 10px 12px;
}
.grup-dia-titol { font-size: 1.02rem; }
.grup-dia-resum { color: var(--text-suau); font-weight: 500; font-size: .9rem; margin-left: 4px; }
.taula-agrupada .grup-dia tr:not(.grup-dia-cap) td:first-child { padding-left: 28px; color: var(--text-suau); }

/* Etiquetes de paro/aturada a la capçalera del detall d'OT */
.ot-encap-paro { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }

/* Casella d'aprovació horària: gran, sense relleno quan no està aprovada */
.aprovacio-col { text-align: center; }
.aprovacio-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.aprovacio-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.aprovacio-marca {
    width: 26px;
    height: 26px;
    border: 2px solid var(--vora);
    background: var(--blanc);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}
.aprovacio-check:hover .aprovacio-marca { border-color: var(--accent); }
.aprovacio-check input[type="checkbox"]:checked + .aprovacio-marca {
    background: var(--accent);
    border-color: var(--accent);
}
.aprovacio-check input[type="checkbox"]:checked + .aprovacio-marca::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 2px;
    width: 8px;
    height: 14px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.aprovacio-check.aprovat { cursor: default; }

.molla-pa {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .95rem;
    color: var(--text-suau);
    margin-bottom: 14px;
}
.molla-pa .actual { font-weight: 600; color: var(--text); }

.cercador { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 240px; }
.cercador input[type="search"] { flex: 1; min-width: 160px; }

/* ---------------------------------------------------------------------
   Targetes (dashboard i llistes)
   --------------------------------------------------------------------- */
.benvinguda { font-size: 1.15rem; margin-bottom: 16px; }

.targetes-resum {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.targeta {
    background: var(--blanc);
    border: 1px solid var(--vora);
    border-radius: 0;
    padding: 18px;
    text-align: center;
    box-shadow: var(--ombra);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
a.targeta:hover { border-color: var(--accent); text-decoration: none; }
.targeta-xifra { font-size: 2.1rem; font-weight: 700; color: var(--accent-fosc); }
.targeta-etiqueta { color: var(--text-suau); font-weight: 600; }

.targetes-llista { display: flex; flex-direction: column; gap: 10px; }
.targeta-fila {
    background: var(--blanc);
    border: 1px solid var(--vora);
    border-radius: 0;
    padding: 16px;
    box-shadow: var(--ombra);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.targeta-enllac { color: inherit; }
.targeta-enllac:hover { border-color: var(--accent); text-decoration: none; }
.targeta-fila-cos { flex: 1; min-width: 200px; }
.targeta-fila-titol { font-size: 1.1rem; font-weight: 600; }
.targeta-fila-desc { color: var(--text-suau); margin-top: 2px; }
.targeta-fila-meta { color: var(--text-suau); font-size: .9rem; margin-top: 4px; }
.targeta-fila-accions { display: flex; flex-wrap: wrap; gap: 8px; }
.targeta-fila-etiquetes { display: flex; flex-wrap: wrap; gap: 6px; }

.codi-equip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--accent-clar);
    color: var(--accent-fosc);
    padding: 2px 7px;
    border-radius: 0;
    font-size: .9rem;
}

.equip-nom { font-weight: 700; color: var(--text); }
.equip-codi-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    color: var(--text-suau);
    margin-left: 4px;
}
.ot-creador { margin-top: 2px; font-size: .82rem; }

/* ---------------------------------------------------------------------
   Etiquetes d'estat
   --------------------------------------------------------------------- */
.etiqueta {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 0;
    font-size: .82rem;
    font-weight: 700;
    background: var(--fons);
    color: var(--text-suau);
}
.crit-baixa { background: #e7f4e8; color: #205723; }
.crit-mitja { background: #fdf1df; color: #8a5400; }
.crit-alta { background: #fbe9e9; color: #8c1f1f; }
.etiqueta-paro { background: #ece3f7; color: #5b3a8c; }

/* ---------------------------------------------------------------------
   Taules
   --------------------------------------------------------------------- */
.taula-embolcall {
    overflow-x: auto;
    background: var(--blanc);
    border: 1px solid var(--vora);
    border-radius: 0;
    box-shadow: var(--ombra);
}
.taula { width: 100%; border-collapse: collapse; }
.taula th, .taula td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--vora);
}
.taula th { background: #f6f8f7; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-suau); }
.taula tr:last-child td { border-bottom: none; }
.taula .num { text-align: right; }
.taula .fila-avis { background: #fdf6ee; }
.text-vermell { color: var(--perill); font-weight: 700; }

.llista-simple { list-style: none; }
.llista-simple li { padding: 10px 0; border-bottom: 1px solid var(--vora); }
.llista-simple li:last-child { border-bottom: none; }

/* ---------------------------------------------------------------------
   Blocs i seccions
   --------------------------------------------------------------------- */
.bloc {
    background: var(--blanc);
    border: 1px solid var(--vora);
    border-radius: 0;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: var(--ombra);
}
.bloc-titol { font-size: 1.1rem; margin-bottom: 12px; }
.bloc-titol-avis { color: var(--avis); }
.accessos-rapids { display: flex; flex-wrap: wrap; gap: 12px; }
.nota-fase {
    margin-top: 14px;
    color: var(--text-suau);
    font-size: .92rem;
    background: var(--accent-clar);
    padding: 12px 14px;
    border-radius: 0;
}
.buit {
    text-align: center;
    color: var(--text-suau);
    padding: 30px;
    background: var(--blanc);
    border: 1px dashed var(--vora);
    border-radius: 0;
}

/* ---------------------------------------------------------------------
   Fitxa de detall
   --------------------------------------------------------------------- */
.fitxa-encap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.fitxa-encap-info { flex: 1; min-width: 200px; }
.fitxa-encap-accions { display: flex; gap: 8px; }
.fitxa-titol { font-size: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fitxa-etiquetes, .fitxa-encap .etiqueta { margin-top: 4px; }
.fitxa-desc { color: var(--text-suau); margin-bottom: 14px; }

.fitxa-dades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2px;
    background: var(--blanc);
    border: 1px solid var(--vora);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 16px;
}
.fitxa-dades > div { padding: 12px 14px; border-bottom: 1px solid var(--vora); }
.fitxa-dades dt { font-size: .82rem; text-transform: uppercase; color: var(--text-suau); letter-spacing: .03em; }
.fitxa-dades dd { font-size: 1.05rem; margin-top: 2px; }
.fitxa-notes { background: var(--blanc); border: 1px solid var(--vora); border-radius: 0; padding: 16px; }
.fitxa-notes h3 { margin-bottom: 6px; }

.foto-equip { max-width: 100%; border-radius: 0; border: 1px solid var(--vora); }
.documents { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.document-bloc h3 { margin-bottom: 10px; }

/* ---------------------------------------------------------------------
   Pestanyes
   --------------------------------------------------------------------- */
.pestanyes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--vora);
    margin-bottom: 16px;
}
.pestanya {
    padding: 12px 16px;
    color: var(--text-suau);
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.pestanya:hover { color: var(--text); text-decoration: none; }
.pestanya-activa { color: var(--accent-fosc); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------------
   Formularis
   --------------------------------------------------------------------- */
.form {
    background: var(--blanc);
    border: 1px solid var(--vora);
    border-radius: 0;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: var(--ombra);
    max-width: 760px;
}
.form-titol { font-size: 1.2rem; margin-bottom: 16px; }
.camp { margin-bottom: 16px; }
.camp-fila { display: flex; flex-wrap: wrap; gap: 16px; }
.camp-fila .camp { flex: 1; min-width: 200px; }
.camp label, .form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}
input[type="text"], input[type="search"], input[type="password"],
input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"],
input[type="file"], select, textarea {
    width: 100%;
    font-size: 1.05rem;
    font-family: inherit;
    padding: 12px 14px;
    border: 1px solid var(--vora);
    border-radius: 0;
    background: var(--blanc);
    min-height: 50px;
}
input:focus, select:focus, textarea:focus {
    outline: 3px solid var(--accent-clar);
    border-color: var(--accent);
}
input:disabled { background: var(--fons); color: var(--text-suau); }
textarea { min-height: 80px; resize: vertical; }

.camp-casella { display: flex; align-items: center; }
.casella { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.casella input[type="checkbox"] {
    width: 24px; height: 24px;
    min-height: auto; min-width: 0;
    flex: 0 0 auto;
    padding: 0; margin: 0;
}
.casella-inline { white-space: nowrap; gap: 6px; flex: 0 0 auto; padding: 0; }
.ajuda { display: block; color: var(--text-suau); font-size: .85rem; margin-top: 4px; }

.form-botons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.form-elimina { display: contents; }

/* Casella i botó de filtre d'OT sempre a la mateixa fila */
.filtres-accio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: var(--blanc);
    border: 1px solid var(--vora);
    border-radius: 0;
    padding: 14px;
    margin-bottom: 14px;
}
.form-inline select { flex: 1; min-width: 200px; }

/* ---------------------------------------------------------------------
   Pantalla de login
   --------------------------------------------------------------------- */
.pagina-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, #15171a 0%, #353c39 100%);
}
.login-caixa {
    background: var(--blanc);
    border-radius: 0;
    padding: 48px 36px;
    width: 100%;
    max-width: 410px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.login-marca { text-align: center; margin-bottom: 22px; }
.login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    background: var(--accent);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 0;
    margin-bottom: 12px;
}
.login-marca h1 { font-size: 1.5rem; }
.login-subtitol { color: var(--text-suau); font-size: .95rem; }
.login-form { display: flex; flex-direction: column; }
.login-form label { margin-top: 12px; }
.login-form input[type="email"] { margin-bottom: 4px; }
.login-recordar { display: flex; align-items: center; gap: 12px; margin: 24px 0 28px; font-weight: 500; }
.login-recordar input { width: 24px; height: 24px; min-height: auto; }
.login-form .boto { width: 100%; }
.login-idioma { text-align: center; margin-top: 18px; color: var(--text-suau); }
.login-idioma a.idioma-actiu { font-weight: 700; color: var(--accent-fosc); }

/* Selector d'idioma fix a la cantonada inferior dreta de la pàgina */
.idioma-pagina {
    position: fixed;
    right: 18px;
    bottom: 14px;
    display: flex;
    gap: 10px;
    font-size: .9rem;
}
.idioma-pagina a { color: rgba(255, 255, 255, .7); }
.idioma-pagina a:hover { color: #fff; }
.idioma-pagina a.idioma-actiu { color: #fff; font-weight: 700; }
.idioma-pagina span { color: rgba(255, 255, 255, .4); }

/* ---------------------------------------------------------------------
   Marca (logo + separador + PAUTA)
   --------------------------------------------------------------------- */
.marca { display: flex; align-items: center; gap: 10px; }
.marca-logo {
    display: block;
    width: 108px;
    height: 24px;
    background-color: #fff;
    -webkit-mask: url(../img/logo.png) center / contain no-repeat;
    mask: url(../img/logo.png) center / contain no-repeat;
}
.marca-separador { width: 1px; height: 22px; background: rgba(255, 255, 255, .35); }
.marca-nom { font-weight: 300; letter-spacing: .14em; font-size: 1.05rem; color: #fff; }
.marca-gran { justify-content: center; }
.marca-gran .marca-logo { width: 180px; height: 40px; }
.marca-gran .marca-separador { height: 36px; }
.marca-gran .marca-nom { font-size: 1.6rem; }
.pagina-login .marca-gran { margin-bottom: 32px; }
.pagina-login .marca-logo { background-color: var(--accent-fosc); }
.pagina-login .marca-nom { color: var(--accent-fosc); transform: translateY(0); }
.pagina-login .marca-separador { background: rgba(31, 36, 33, .22); }

/* ---------------------------------------------------------------------
   Login: codi, ajuda i enllaços
   --------------------------------------------------------------------- */
.login-ajuda { text-align: center; color: var(--text-suau); font-size: .92rem; margin-top: 16px; }
.login-reenvia { text-align: center; margin-top: 12px; }
.boto-text {
    background: none; border: none; color: var(--accent-fosc);
    font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: underline;
}
.camp-codi {
    font-size: 2rem !important;
    text-align: center;
    letter-spacing: .5em;
    font-weight: 700;
    padding-left: .5em !important;
}

/* ---------------------------------------------------------------------
   Etiquetes d'estat i prioritat d'OT
   --------------------------------------------------------------------- */
.estat-pendent,
.estat-assignada,
.estat-en-curs,
.estat-pausada,
.estat-pendent-validacio,
.estat-tancada,
.estat-cancellada,
.estat-at-planificada,
.estat-at-en-curs,
.estat-at-finalitzada,
.estat-at-cancellada,
.estat-it-pendent,
.estat-it-en-curs,
.estat-it-fet,
.estat-it-cancellat {
    background: transparent;
    border: 1px solid currentColor;
    padding: 3px 9px;
}

.estat-pendent { color: #4a514d; }
.estat-assignada { color: #1f5b94; }
.estat-en-curs { color: #1f7a2c; }
.estat-pausada { color: #8a5400; }
.estat-pendent-validacio { color: #5b3a8c; }
.estat-tancada { color: #3a4742; }
.estat-cancellada { color: #8c1f1f; }

.prio-baixa { background: #eceeed; color: #4a514d; }
.prio-normal { background: #e2ecf7; color: #1f5b94; }
.prio-urgent { background: #fdf1df; color: #8a5400; }
.prio-critica { background: #fbe3e3; color: #b3261e; }

/* ---------------------------------------------------------------------
   Llista i fila d'OT
   --------------------------------------------------------------------- */
.ot-fila { flex-direction: column; align-items: stretch; }
.ot-fila-cap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }

.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    background: var(--blanc);
    border: 1px solid var(--vora);
    border-radius: 0;
    padding: 12px;
}
.filtres input, .filtres select { width: auto; flex: 1; min-width: 130px; }

/* Botó flotant d'acció (reportar avaria) */
.boto-flotant {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    padding: 14px 20px;
    border-radius: 0;
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    z-index: 35;
}
.boto-flotant:hover { background: var(--accent-fosc); text-decoration: none; }
.boto-flotant[hidden] { display: none; }

/* Botó amb icona SVG i text alineats */
.boto-amb-icona { display: inline-flex; align-items: center; gap: 8px; }
.icona-boto { flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Detall d'OT
   --------------------------------------------------------------------- */
.ot-encap { margin-bottom: 12px; }
.ot-accions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.ot-cancella { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ot-cancella input[type="text"] { width: auto; flex: 1; min-width: 160px; }

/* ---------------------------------------------------------------------
   Execució d'OT (vista mòbil)
   --------------------------------------------------------------------- */
.exec-capcalera {
    background: var(--blanc);
    border: 1px solid var(--vora);
    border-radius: 0;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--ombra);
    position: sticky;
    top: 64px;
    z-index: 20;
}
.exec-cap-dalt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.exec-titol { font-size: 1.25rem; margin: 8px 0 2px; }
.exec-equip { color: var(--text-suau); font-size: .95rem; }

.cronometre {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #20302a;
    color: #fff;
    border-radius: 0;
    padding: 12px;
    margin: 12px 0;
}
.cronometre-temps {
    font-size: 2.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}
.cronometre-etiqueta { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }

.exec-botons { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.boto-ample { width: 100%; }
.boto-avis { background: var(--avis); color: #fff; border-color: var(--avis); }
.boto-avis:hover { background: #c47400; }

.pestanyes-exec { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
.pestanyes-exec .pestanya { white-space: nowrap; }
.pestanya-cos { overflow: visible; }

/* ---------------------------------------------------------------------
   Timeline d'events
   --------------------------------------------------------------------- */
.timeline { list-style: none; margin-top: 8px; }
.timeline-item {
    position: relative;
    padding: 0 0 16px 26px;
    border-left: 2px solid var(--vora);
}
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-punt {
    position: absolute;
    left: -8px;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 0;
    border: 2px solid var(--blanc);
}
.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    color: var(--text-suau);
    font-size: .88rem;
}
.timeline-text { margin-top: 2px; }
.timeline-foto { max-width: 220px; border-radius: 0; margin-top: 8px; border: 1px solid var(--vora); }

/* ---------------------------------------------------------------------
   Blocs i elements diversos
   --------------------------------------------------------------------- */
.bloc-destacat { border-left: 5px solid var(--accent); }
.comptador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    background: var(--accent);
    color: #fff;
    border-radius: 0;
    font-size: 1rem;
    margin-left: 8px;
}
.targeta-avis { border-color: var(--avis); background: #fdf6ee; }
.targeta-avis .targeta-xifra { color: var(--avis); }

.llista-caselles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.llista-caselles .casella {
    background: var(--fons);
    padding: 12px;
    border-radius: 0;
}

.form-compacte {
    background: var(--fons);
    border: 1px solid var(--vora);
    border-radius: 0;
    padding: 14px;
    margin-top: 14px;
}
.form-subtitol { font-size: 1.02rem; margin-bottom: 10px; }
.form-subtitol, .form-compacte h4 { font-weight: 700; }

/* ---------------------------------------------------------------------
   Plans de manteniment i calendari
   --------------------------------------------------------------------- */
.form-inline-min { display: inline-flex; }
.camp-quantitat { width: 90px !important; }

.camp-grup {
    border: 1px solid var(--vora);
    border-radius: 0;
    padding: 14px;
    margin-bottom: 16px;
}
.camp-grup legend { font-weight: 700; padding: 0 6px; }

.pla-peces {
    background: var(--accent-clar);
    border-radius: 0;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.pla-peces .llista-simple li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-color: rgba(0, 0, 0, .08);
}

.calendari-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 14px;
}
.calendari-titol { font-size: 1.3rem; text-align: center; min-width: 200px; }

.calendari {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    background: var(--blanc);
    border: 1px solid var(--vora);
    border-radius: 0;
    padding: 6px;
    box-shadow: var(--ombra);
}
.cal-capcalera {
    text-align: center;
    font-weight: 700;
    font-size: .8rem;
    color: var(--text-suau);
    padding: 6px 0;
    text-transform: uppercase;
}
.cal-dia {
    min-height: 86px;
    background: var(--fons);
    border-radius: 0;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cal-buit { background: transparent; }
.cal-avui { outline: 2px solid var(--accent); }
.cal-num { font-size: .8rem; font-weight: 700; color: var(--text-suau); }
.cal-event {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 5px;
    border-radius: 0;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--text);
}
.cal-event:hover { text-decoration: none; opacity: .85; }
.cal-previst {
    background: repeating-linear-gradient(45deg, #eef0ef, #eef0ef 5px, #e2e6e4 5px, #e2e6e4 10px);
    color: var(--text-suau);
}

/* Semàfor dels esdeveniments del planificador de preventius */
.cal-planificat { background: #fff7d6; color: #8a6d00; }
.cal-realitzat { background: #e0f3e6; color: #1f6b3a; }
.cal-fora-termini { background: #fbe2e2; color: #8c1f1f; }
.cal-cancellat {
    background: var(--fons);
    color: var(--text-suau);
    text-decoration: line-through;
}

.calendari-llegenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    color: var(--text-suau);
    font-size: .9rem;
}
.punt-llegenda {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 0;
    vertical-align: middle;
    margin-right: 4px;
}

/* ---------------------------------------------------------------------
   Inventari, hores i informes
   --------------------------------------------------------------------- */
.text-verd { color: var(--ok); font-weight: 700; }

.filtre-camp {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    font-size: .78rem;
    color: var(--text-suau);
    font-weight: 600;
}

.comptador-suau {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-suau);
    margin-left: 8px;
}

.graella-grafics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
.grafic-bloc { margin-bottom: 0; }
.grafic-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.grafic-cap .bloc-titol { margin-bottom: 0; }
.grafic-bloc canvas { max-width: 100%; }

@media (min-width: 760px) {
    .graella-grafics { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   Pantalles amples: el menú queda sempre visible
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
    .menu-lateral { position: static; transform: none; }
    .rerefons-menu { display: none !important; }
    .boto-opcions { display: none; }
    .principal { padding: 24px; }
    .exec-botons { flex-direction: row; }
    .boto-flotant { right: 28px; bottom: 28px; }
}

/* ---------------------------------------------------------------------
   Spinner de càrrega (única excepció a les cantonades quadrades)
   --------------------------------------------------------------------- */
.carregant {
    position: fixed;
    inset: 0;
    background: rgba(31, 36, 33, .5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.carregant.actiu { display: flex; }
.spinner {
    width: 56px;
    height: 56px;
    border: 6px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gira 0.8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   Codi QR i escàner
   --------------------------------------------------------------------- */
.qr-full {
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
    background: var(--blanc);
    border: 1px solid var(--vora);
    padding: 24px;
}
.qr-imatge { width: 280px; height: 280px; margin: 0 auto 14px; }
.qr-imatge svg, .qr-imatge img { width: 100%; height: 100%; }
.qr-codi { font-size: 1.5rem; font-weight: 700; }
.qr-nom { color: var(--text-suau); margin-bottom: 8px; }

.escaner { max-width: 480px; margin: 0 auto; }
.escaner-video {
    width: 100%;
    background: #000;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.escaner-estat { text-align: center; margin-top: 10px; color: var(--text-suau); }

@media print {
    .menu-lateral, .capcalera, .barra-accions, .rerefons-menu { display: none !important; }
    .qr-full { border: none; }
    .principal { padding: 0; }
}

/* ---------------------------------------------------------------------
   Arbre d'equips (navegació jeràrquica compacta)
   --------------------------------------------------------------------- */
.arbre, .arbre-fills { list-style: none; margin: 0; padding: 0; }
.arbre { background: var(--blanc); border: 1px solid var(--vora); }
.arbre-fills { padding-left: 22px; border-left: 1px solid var(--vora); margin-left: 14px; }
.arbre-fila {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-bottom: 1px solid #eef0ef;
}
.arbre-fila:hover { background: var(--accent-clar); }
.arbre-toggle {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--vora);
    background: var(--fons);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    color: var(--accent-fosc);
}
.arbre-fulla { border: none; background: none; cursor: default; visibility: hidden; }
.arbre-nom {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 2px;
    color: var(--text);
    overflow: hidden;
}
.arbre-nom:hover { text-decoration: none; color: var(--accent-fosc); }
.arbre-codi {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    color: var(--text-suau);
}
.arbre-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------------
   Autocompletat d'equips
   --------------------------------------------------------------------- */
.ac { position: relative; }
.ac-cerca { max-width: 520px; margin-bottom: 14px; }
.ac-resultats {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 25;
    background: var(--blanc);
    border: 1px solid var(--vora);
    max-height: 320px;
    overflow-y: auto;
    box-shadow: var(--ombra);
}
.ac-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eef0ef;
}
.ac-item:hover { background: var(--accent-clar); }
.ac-codi {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    color: var(--text-suau);
}

/* ---------------------------------------------------------------------
   Ajustos addicionals d'interfície
   --------------------------------------------------------------------- */

/* Borde esquerre de color a les OT segons el tipus */
.ot-fila { border-left: 5px solid var(--vora); }
.ot-bord-correctiu { border-left-color: var(--perill); }
.ot-bord-planificat { border-left-color: var(--avis); }

/* Etiquetes d'estat de l'OT alineades a la dreta, a la mateixa línia */
.ot-fila-cap { flex-wrap: nowrap; }
.ot-cap-etiquetes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Formularis a tota l'amplada disponible */
.form.form-ample { max-width: none; }

/* Stepper numèric amb botons - i + */
.num-stepper { display: flex; }
.num-stepper input { text-align: center; }
.num-boto {
    flex: 0 0 auto;
    width: 52px;
    min-height: 50px;
    border: 1px solid var(--vora);
    background: var(--fons);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    color: var(--accent-fosc);
}
.num-boto:first-child { border-right: none; }
.num-boto:last-child { border-left: none; }

/* Taula compacta (files de menys altura) */
.taula-compacta th, .taula-compacta td { padding: 5px 14px; }
.cel-truncada {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------
   Millores: login dual, vista de planta, filtres i sincronització
   --------------------------------------------------------------------- */

/* Marc discret del login de gestió */
.login-marc {
    border: 1px solid var(--vora);
    border-radius: var(--radi);
    padding: 16px 16px 18px;
    margin: 0;
}
.login-marc legend {
    padding: 0 8px;
    font-size: .9rem;
    color: var(--text-suau);
    font-weight: 600;
}
.boto-bloc { width: 100%; display: block; text-align: center; margin-top: 14px; }

/* Estat de comprovació de la vista de planta */
.planta-estat {
    text-align: center;
    padding: 18px 10px;
    color: var(--text-suau);
}
.planta-estat-error { color: var(--perill); font-weight: 600; }

/* Modal genèrica */
.modal-fons {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}
.modal-fons[hidden] { display: none; }
.login-form[hidden] { display: none; }
.modal-caixa {
    background: var(--blanc);
    border-radius: var(--radi);
    padding: 22px;
    max-width: 420px;
    width: 100%;
    box-shadow: var(--ombra);
}
.modal-caixa h2 { font-size: 1.15rem; margin-bottom: 8px; }
.modal-caixa p { color: var(--text-suau); margin-bottom: 18px; }
.modal-botons { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-botons .boto { flex: 1; text-align: center; }

/* Cerca d'equips i selector de profunditat a la mateixa línia */
.equips-barra {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.equips-barra .equips-cerca { flex: 1 1 280px; margin-bottom: 0; }

/* Selector de profunditat de l'arbre d'equips */
.nivell-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    flex-wrap: wrap;
}
.nivell-toggle-etiqueta { color: var(--text-suau); font-size: .95rem; }
.nivell-flux {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--vora);
    background: var(--blanc);
    padding: 4px 8px;
}
.nivell-opcio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.nivell-opcio:hover { text-decoration: none; border-color: var(--accent); color: var(--accent-fosc); }
.nivell-opcio.actiu {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.nivell-fletxa {
    color: var(--text-suau);
    font-size: 1rem;
    line-height: 1;
    user-select: none;
}

/* Cercador d'equips amb botó de filtre */
.equips-cerca {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: flex-start;
}
.equips-cerca .ac, .equips-cerca .ac-input { flex: 1; }
.equips-cerca > .ac-input { flex: 1; }

/* Toggle de prioritat de l'OT */
.prio-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.prio-opcio {
    flex: 1;
    min-width: 70px;
    position: relative;
    cursor: pointer;
}
.prio-opcio input { position: absolute; opacity: 0; pointer-events: none; }
.prio-opcio span {
    display: block;
    text-align: center;
    padding: 12px 6px;
    border-radius: var(--radi);
    border: 2px solid var(--vora);
    background: var(--blanc);
    font-weight: 600;
    color: var(--text-suau);
}
.prio-opcio input:checked + span {
    color: #fff;
    border-color: transparent;
}
.prio-opcio.prio-1 input:checked + span { background: #2e7d32; }
.prio-opcio.prio-2 input:checked + span { background: #c0a000; }
.prio-opcio.prio-3 input:checked + span { background: #e08600; }
.prio-opcio.prio-4 input:checked + span { background: #c62828; }

/* Codi d'ubicació amb prefix fix del pare */
.codi-jerarquia-camp { display: flex; align-items: stretch; }
.codi-prefix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--fons);
    border: 1px solid var(--vora);
    border-right: none;
    border-radius: var(--radi) 0 0 var(--radi);
    color: var(--text-suau);
    font-weight: 600;
    white-space: nowrap;
}
.codi-prefix[hidden] { display: none; }
.codi-jerarquia-camp input { flex: 1; border-radius: 0 var(--radi) var(--radi) 0; }
.codi-prefix[hidden] + input { border-radius: var(--radi); }

/* Desviació d'estoc i marca de producte pendent a NAV */
.text-positiu { color: var(--ok); font-weight: 600; }
.text-negatiu { color: var(--perill); font-weight: 600; }
.etiqueta-nou-nav {
    background: var(--avis);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 6px;
}
.form-inline { display: contents; }

/* ---------------------------------------------------------------------
   Registre horari diari
   --------------------------------------------------------------------- */
.dia-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 6px 0 18px;
}
.dia-fletxa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border: 1px solid var(--vora);
    border-radius: var(--radi);
    background: var(--blanc);
    font-size: 1.6rem;
    color: var(--accent-fosc);
    line-height: 1;
}
.dia-fletxa:hover { background: var(--accent-clar); text-decoration: none; }
.dia-nom {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: capitalize;
    min-width: 220px;
    text-align: center;
}
.al-dia-missatge {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ok);
    background: var(--accent-clar);
    border-radius: var(--radi);
    padding: 28px 18px;
}
.registre-bloc { margin-bottom: 16px; }
.casella-gran { font-size: 1.1rem; font-weight: 600; }
.casella-gran input { width: 22px; height: 22px; }
.registre-taula td input,
.registre-taula td select { width: 100%; min-width: 90px; }
.registre-taula .activitat-ot select,
.registre-taula .activitat-altres input { width: 100%; }
.avis-jornada {
    background: #fff4e0;
    border: 1px solid var(--avis);
    border-left: 5px solid var(--avis);
    border-radius: var(--radi);
    padding: 12px 16px;
    color: #6b4500;
    font-weight: 600;
    margin-bottom: 14px;
}
.avis-jornada[hidden] { display: none; }
.bloc-desactivat { opacity: .5; }
.registre-taula .fila-bloquejada { background: var(--fons); color: var(--text-suau); }

/* Aclariment de la desviació d'estoc */
.tip-desviacio {
    font-style: italic;
    color: var(--text-suau);
    margin: 18px 0;
}

/* Banner d'avís d'ajustos de NAV */
.banner-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: #fff4e0;
    border: 1px solid var(--avis);
    border-left: 5px solid var(--avis);
    border-radius: 0;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.banner-nav span { flex: 1; min-width: 220px; font-weight: 600; color: #6b4500; }

/* Banner d'instal·lació de la PWA */
.pwa-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #20302a;
    color: #e7ece9;
    padding: 12px 16px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .2);
}
.pwa-banner[hidden] { display: none; }
.pwa-banner-text { flex: 1; display: flex; flex-direction: column; font-size: .9rem; }
.pwa-banner-text strong { font-size: 1rem; }
.pwa-banner-tanca {
    background: transparent;
    border: 0;
    color: #e7ece9;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

/* Paginació */
.paginacio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
}
.paginacio-info { color: var(--text-suau); }

/* Filtres amb data i pujada de documents */
.filtre-data { display: inline-flex; flex-direction: column; font-size: .85rem; color: var(--text-suau); }
.document-puja { margin-top: 18px; border-top: 1px solid var(--vora); padding-top: 14px; }

/* =====================================================================
   ATURADES (paros de línia)
   ===================================================================== */
.aturada-fila { border-left: 4px solid var(--vora); }
.aturada-tipus-urgent { border-left-color: #c94c4c; }
.aturada-tipus-anual { border-left-color: #5b3a8c; }
.aturada-tipus-programada { border-left-color: var(--accent); }

/* Estats d'aturada (etiquetes a la capçalera i a la llista) */
.estat-at-planificada { color: #1f5b94; }
.estat-at-en-curs    { color: #1f7a2c; }
.estat-at-finalitzada{ color: #3a4742; }
.estat-at-cancellada { color: #8c1f1f; }

/* Estats d'ítem de planning */
.estat-it-pendent  { color: #4a514d; }
.estat-it-en-curs  { color: #1f7a2c; }
.estat-it-fet      { color: #3a4742; }
.estat-it-cancellat{ color: #8c1f1f; }

/* Capçalera de bloc amb botons a la dreta */
.bloc-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bloc-cap .bloc-titol { margin: 0; }

/* Mini-timeline */
.aturada-timeline {
    border: 1px solid var(--vora);
    border-radius: 4px;
    background: #fbfcfb;
    overflow: hidden;
}
.tl-eix {
    position: relative;
    height: 22px;
    background: #f6f8f7;
    border-bottom: 1px solid var(--vora);
}
.tl-marca {
    position: absolute;
    transform: translateX(-50%);
    top: 3px;
    font-size: .75rem;
    color: var(--text-suau);
    white-space: nowrap;
    pointer-events: none;
}
.tl-carril {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--vora);
}
.tl-carril:last-child { border-bottom: none; }
.tl-carril-nom {
    flex: 0 0 140px;
    padding: 8px 10px;
    font-size: .85rem;
    color: var(--text-suau);
    background: #f6f8f7;
    border-right: 1px solid var(--vora);
    word-break: break-word;
}
.tl-carril-pista {
    position: relative;
    flex: 1;
    min-height: 36px;
    padding: 6px 0;
}
.tl-marca-fons {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: rgba(0,0,0,.05);
    pointer-events: none;
}
.tl-bloc {
    position: absolute;
    top: 6px;
    bottom: 6px;
    border: 1px solid var(--accent);
    background: var(--accent-clar);
    color: var(--accent-fosc);
    border-radius: 3px;
    font-size: .8rem;
    padding: 2px 6px;
    overflow: hidden;
    box-sizing: border-box;
    cursor: default;
}
.tl-bloc.tl-ot {
    background: #ece3f7;
    border-color: #5b3a8c;
    color: #3b2461;
}
.tl-bloc-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-bloc-tag {
    display: inline-block;
    background: #5b3a8c;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: 1px;
}
/* Atenuació segons l'estat */
.tl-bloc.tl-estat-fet,
.tl-bloc.tl-estat-cancellat,
.tl-bloc.tl-estat-tancada,
.tl-bloc.tl-estat-cancellada { opacity: .55; }

.aturada-tl-llegenda { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tl-llegenda-mostra {
    display: inline-block;
    width: 16px; height: 12px;
    border: 1px solid var(--accent);
    background: var(--accent-clar);
    border-radius: 2px;
}
.tl-llegenda-mostra.tl-ot { background: #ece3f7; border-color: #5b3a8c; }

/* Llista de caselles en forma vertical (vincular OT) */
.llista-caselles-llista { display: block; }
.llista-caselles-llista .casella-fila {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-bottom: 1px solid var(--vora);
}
.llista-caselles-llista .casella-fila:last-child { border-bottom: none; }
.text-suau { color: var(--text-suau); }

/* Modal lleuger */
.modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.modal[hidden] { display: none; }
.modal-cos {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.modal-cos h3 { margin-top: 0; }
body.modal-obert { overflow: hidden; }

.form-inline-min { display: inline-block; margin-left: 6px; }
.form-elimina-bloc { margin-top: 16px; }

/* Eliminem el padding extern de la pista quan la línia tinguda no acapara
   tot l'ample en pantalles petites */
@media (max-width: 720px) {
    .tl-carril-nom { flex-basis: 90px; font-size: .75rem; }
    .tl-bloc { font-size: .7rem; padding: 2px 4px; }
}

/* =====================================================================
   Millores: validació de camps obligatoris, codi previst i selector
   d'equip per arbre dins un modal (nova OT).
   ===================================================================== */
.camp-error input,
.camp-error .ac-input,
.camp-error select { border-color: var(--perill); background: #fdf2f2; }

.ot-codi-previst {
    margin: -4px 0 16px;
    color: var(--text-suau);
    font-size: .92rem;
}
.ot-codi-previst .codi-equip { margin-left: 4px; }

.boto-arbre-equip { margin-top: 8px; }

/* El selector d'arbre dins el modal és un botó: reset visual com un enllaç. */
.arbre-selecciona {
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.arbre-selecciona:hover { color: var(--accent-fosc); }

.modal-arbre-caixa { max-width: 560px; display: flex; flex-direction: column; max-height: 80vh; }
.modal-arbre-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.modal-arbre-cap h2 { margin: 0; }
.modal-arbre-cos { overflow: auto; }
.modal-tanca {
    flex: 0 0 auto;
    border: 1px solid var(--vora);
    background: var(--fons);
    width: 34px;
    height: 34px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-suau);
}
.modal-tanca:hover { color: var(--perill); border-color: var(--perill); }

/* Estats de color dels plans de manteniment (pastilla a la llista). */
.pla-estat {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pla-estat-en_espera { background: #fff7d6; color: #8a6d00; border-color: #ecd98a; }
.pla-estat-esperant_aturada { background: #ffe9d1; color: #9a4f00; border-color: #f3c08a; }
.pla-estat-fora_termini { background: #fbe2e2; color: #8c1f1f; border-color: #e6a9a9; }
.pla-estat-al_dia { background: #e0f3e6; color: #1f6b3a; border-color: #a9d8ba; }
.pla-estat-sense_data { background: var(--fons); color: var(--text-suau); border-color: var(--vora); }

/* Control segmentat (p.ex. "Assignades a mi" / "Totes les OT"). */
.segmentat {
    display: inline-flex;
    border: 1px solid var(--vora);
    background: var(--blanc);
    margin-bottom: 14px;
    overflow: hidden;
}
.segmentat-opcio {
    padding: 7px 16px;
    color: var(--text);
    font-weight: 600;
    font-size: .9rem;
    border-right: 1px solid var(--vora);
}
.segmentat-opcio:last-child { border-right: none; }
.segmentat-opcio:hover { text-decoration: none; background: var(--accent-clar); }
.segmentat-opcio.actiu { background: var(--accent); color: #fff; }

.ot-zona { font-weight: 600; color: var(--accent-fosc); }
.ot-filtre-equip { flex: 1 1 200px; }