*{box-sizing:border-box}
:root{
    --blau:#123e6d;--blau2:#1b5fa8;--verd:#27ae60;--vermell:#c0392b;
    --fons:#f4f6f8;--linea:#d9e2ee;--ombra:rgba(18,62,109,.12);
}
body{font-family:Arial,Helvetica,sans-serif;background:var(--fons);color:#222;margin:0;padding:64px 0 0 0;min-height:100vh}

/* Capçalera fixa */
header.fix{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--blau);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.menu-hor{max-width:1300px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;gap:2px}
.menu-hor a{color:#fff;text-decoration:none;padding:8px 12px;border-radius:6px;font-weight:bold;font-size:14px;white-space:nowrap}
.menu-hor a:hover{background:rgba(255,255,255,.15)}
.menu-hor a.actiu{background:#fff;color:var(--blau)}
.menu-hor a.marca{display:flex;align-items:center;gap:8px;margin-right:8px;font-size:17px}
.menu-hor a.marca img{height:30px;border-radius:3px}
.menu-hor a.marca span{display:none}
.menu-hor .sep{flex:1}

/* Pàgina */
main{max-width:1300px;margin:0 auto;padding:24px 20px 40px}
.pagina-cap{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 16px;flex-wrap:wrap}
.pagina-cap h2{margin:0;color:var(--blau);font-size:24px}
.pagina-sub{margin:2px 0 0;color:#666;font-size:13px}

.card{background:#fff;border-radius:10px;box-shadow:0 3px 14px var(--ombra);padding:22px;margin-bottom:16px}
p.missatge{background:#eafaf1;border:1px solid #c8ead7;color:#1e7e4c;padding:10px 14px;border-radius:6px}
p.error{background:#fdecea;border:1px solid #f5c6cb;color:#a93226;padding:10px 14px;border-radius:6px}

/* Botons */
.accions{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-size:15px;font-weight:bold;text-decoration:none;text-align:center;font-family:inherit}
.btn.verd{background:var(--verd);color:#fff}
.btn.blau{background:var(--blau);color:#fff}
.btn.gris{background:#6c757d;color:#fff}
.btn.vermell{background:var(--vermell);color:#fff}
.btn:hover{filter:brightness(1.1)}

/* Menú principal */
.menu-wrap{text-align:center;background:#fff;border-radius:14px;box-shadow:0 6px 30px var(--ombra);padding:44px 56px;max-width:644px;margin:8px auto 0}
.menu-wrap img{max-width:100%;height:auto;width:auto}
.menu-wrap h1{color:var(--blau);margin:18px 0 6px;font-size:34px}
.menu-wrap p{color:#666;margin:0 0 28px}
.menu-btns{display:flex;flex-direction:column;gap:16px}
.menu-btns .btn{width:100%;padding:20px;font-size:20px;border-radius:10px}
.btn.big{background:var(--blau2);color:#fff}
.btn.big:hover{background:var(--blau)}
.btn.big2{background:var(--verd);color:#fff}
.btn.big2:hover{background:#229955}
.btn.big3{background:#6c757d;color:#fff}
.btn.big3:hover{background:#5a6268}

/* Graelles */
table.grid{width:100%;border-collapse:collapse;background:#fff}
table.grid th,table.grid td{border:1px solid var(--linea);padding:8px 10px;text-align:left;font-size:14px}
table.grid th{background:#eaf0f8;color:var(--blau)}
table.grid tr.clickable{cursor:pointer}
table.grid tr.clickable:hover{background:#f0f6ff}
table.grid td.num{text-align:right}
table.grid td.acc a{color:var(--blau2);text-decoration:none;margin-right:8px;font-weight:bold}
table.grid td.acc a.vermell{color:var(--vermell)}
.nores{color:#888;padding:14px;text-align:center}
td.fit > a{color:var(--blau2);text-decoration:none;font-weight:bold;word-break:break-all}
td.fit > a:hover{text-decoration:underline}
td.fit small{display:block;color:#888;font-size:12px}
.ic-tipus{display:inline-flex;align-items:center;background:#eaf0f8;color:var(--blau);border-radius:6px;padding:3px 7px;line-height:1}
.ic-tipus svg.ic{width:16px;height:16px}

/* Formularis */
form.gd label{display:block;font-weight:bold;margin:14px 0 4px;color:var(--blau)}
form.gd input[type=text],form.gd input[type=date],form.gd input[type=password],form.gd select,form.gd textarea{width:100%;padding:9px 12px;border:1px solid #c7d4e4;border-radius:6px;font-size:15px;font-family:inherit}
form.gd input[readonly]{background:#eef1f5;color:#666}
form.gd textarea{min-height:90px}
.camp-pw{position:relative}
.camp-pw input{padding-right:82px!important}
.btn-ull{position:absolute;top:50%;transform:translateY(-50%);right:6px;background:#eaf0f8;border:1px solid #c7d4e4;color:var(--blau);border-radius:6px;font-size:12px;font-weight:bold;padding:5px 10px;cursor:pointer;font-family:inherit}
.btn-ull:hover{background:#d9e4f2}
.camps{display:grid;grid-template-columns:1fr 2fr;gap:0 24px}
@media(max-width:700px){.camps{grid-template-columns:1fr}}
.helptext{color:#888;font-size:13px;margin-top:6px}

/* Login */
.menu-wrap.login{max-width:495px;padding:36px 42px}
.menu-wrap.login h1{font-size:26px}
.login-camps label{display:block;font-weight:bold;margin:14px 0 4px;color:var(--blau)}
.login-camps input[type=text],.login-camps input[type=password]{width:100%;padding:10px 12px;border:1px solid #c7d4e4;border-radius:6px;font-size:16px;font-family:inherit}
.login-camps .btn{margin-top:20px}
.btn-block{display:block;width:100%}
.login-creds{background:#f4f6f8;border:1px solid var(--linea);border-radius:8px;padding:12px 16px;font-size:13px;color:#555;margin:20px 0 0;text-align:left;line-height:1.7}
.login-creds b{color:var(--blau)}
.fit-actual{display:flex;align-items:center;gap:10px;background:#eafaf1;border:1px solid #c8ead7;border-radius:6px;padding:10px 14px;margin-top:6px;flex-wrap:wrap}
.fit-actual a{color:#1b5fa8;font-weight:bold;text-decoration:none}
.fit-actual a:hover{text-decoration:underline}
.fit-actual .ic-tipus{background:#27ae60;color:#fff;padding:2px 7px}
.fit-actual small{color:#1e7e4c}

/* Taula de línies (reservat) */
@media(max-width:700px){.menu-hor a{font-size:13px;padding:6px 8px}.menu-hor a.marca span{display:none}}

/* Filtres i cerca */
.filtres{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.filtres input[type=text],.filtres select{padding:8px 12px;border:1px solid #c7d4e4;border-radius:6px;font-size:14px;font-family:inherit}
.filtres input[type=text]{flex:1;min-width:180px}
.filtres form.filtres{width:100%;margin:0}
table.grid th a.sort{color:var(--blau);text-decoration:none;white-space:nowrap}
table.grid th a.sort:hover{text-decoration:underline}

/* Icònics Streamline (SVG inline) */
svg.ic{width:1em;height:1em;vertical-align:-0.14em}
.menu-hor a svg.ic{width:17px;height:17px;vertical-align:-3px;margin-right:6px}
.btn svg.ic{width:1.1em;height:1.1em;vertical-align:-0.18em;margin-right:6px}
.menu-btns .btn svg.ic{width:1.3em;height:1.3em;vertical-align:-0.22em}
table.grid td.acc{white-space:nowrap}
table.grid td.acc a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:var(--blau2);text-decoration:none;margin-right:2px}
table.grid td.acc a:hover{background:#eaf0f8}
table.grid td.acc a.vermell{color:var(--vermell)}
table.grid td.acc a svg.ic{width:17px;height:17px;margin:0}
table.grid th a.sort svg.ic{width:13px;height:13px;vertical-align:-2px;margin-left:3px;color:var(--blau2)}
.orgao{display:inline-block}

/* Peu / atribució */
footer.peu{margin-top:8px;padding:14px 0 6px;border-top:1px solid var(--linea);text-align:center;color:#98a3b3;font-size:12px}
footer.peu a.atribucio{color:#7d8ca1;text-decoration:none}
footer.peu a.atribucio:hover{text-decoration:underline}

/* Usuari a la barra */
.menu-hor .usuari{color:#cfe0f5;font-size:12px;padding:0 10px;white-space:nowrap;font-weight:bold}

/* Marca d'origen */
td.fit small .origen,.origen{display:inline-block;background:#fdf3dc;color:#b06a00;border-radius:4px;padding:1px 7px;font-size:11px;font-weight:bold;vertical-align:middle}

/* Cerca */
.cerca{position:relative;flex:1;min-width:180px}
.cerca > svg.ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#8a9ab0;pointer-events:none}
.filtres .cerca input[type=text]{padding:8px 12px 8px 38px;width:100%;min-width:0}

/* ===== Versió mòbil / tauleta ===== */
@media (max-width: 900px) {
    .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
    table.grid{min-width:640px}
}
@media (max-width: 700px) {
    main{padding:12px 12px 32px}
    .pagina-cap h2{font-size:21px}
    .menu-hor{padding:0 8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
    .menu-hor a.marca{margin-right:2px}
    .menu-hor a svg.ic{margin-right:4px}
    .card{padding:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
    table.grid{min-width:600px}
    .menu-wrap{padding:26px 16px;margin:0 auto}
    .menu-wrap.login{padding:26px 18px}
    .menu-btns{gap:12px}
    .menu-btns .btn{padding:16px;font-size:18px;border-radius:9px}
    .accions{gap:8px;margin:14px 0}
    .accions .btn{flex:1 1 auto}
    .filtres{gap:8px;margin-bottom:12px}
    .filtres select{flex:1;min-width:140px}
    .cerca{min-width:0}
    .login-camps input[type=text],.login-camps input[type=password],
    form.gd input[type=text],form.gd input[type=date],form.gd input[type=password],form.gd select,form.gd textarea{font-size:16px}
    .fit-actual{padding:8px 10px}
}