/* ==========================================================================
   Accesia — full d'estils propi
   CSS lleuger amb variables, mòbil-first, sense build. Pensat per complir
   WCAG 2.2 AA (contrast, focus visible) — dogfooding del propi producte.
   ========================================================================== */

:root {
    --brand-50:#ecfdf5; --brand-100:#d1fae5; --brand-200:#a7f3d0; --brand-400:#34d399;
    --brand-500:#10b981; --brand-600:#059669; --brand-700:#047857; --brand-800:#065f46;

    --danger:#dc2626; --danger-bg:#fef2f2; --danger-700:#b91c1c;
    --warn:#d97706; --warn-bg:#fffbeb;
    --info:#0369a1; --info-bg:#f0f9ff;
    --ok:#059669; --ok-bg:#ecfdf5;

    --bg:#f4f6f8; --surface:#fff; --surface-2:#f9fafb;
    --text:#111827; --muted:#5b6470; --border:#e5e8ee;

    --radius-sm:8px; --radius:14px; --radius-lg:20px;
    --shadow-sm:0 1px 2px rgba(15,23,42,.06);
    --shadow:0 4px 16px rgba(15,23,42,.07);
    --shadow-lg:0 12px 40px rgba(15,23,42,.14);

    --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { font-family:var(--font-sans); background:var(--bg); color:var(--text); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--brand-700); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { margin:0; font-weight:660; letter-spacing:-.01em; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em; }

:focus-visible { outline:3px solid var(--brand-500); outline-offset:2px; border-radius:4px; }

.skip-link { position:absolute; left:-9999px; top:0; background:var(--brand-700); color:#fff; padding:.6rem 1rem; z-index:100; border-radius:0 0 var(--radius-sm) 0; }
.skip-link:focus { left:0; }

/* --- Botons --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.62rem 1.05rem; border-radius:var(--radius-sm); font-size:.92rem; font-weight:600; cursor:pointer; border:1px solid transparent; transition:background .15s,transform .05s; white-space:nowrap; text-decoration:none; }
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-primary { background:var(--brand-600); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--brand-700); }
.btn-ghost { background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-ghost:hover { background:var(--surface-2); }
.btn-light { background:#fff; color:var(--brand-700); }
.btn-danger-ghost { background:transparent; color:var(--danger); border-color:#fecaca; }
.btn-danger-ghost:hover { background:var(--danger-bg); }
.btn-block { width:100%; } .btn-lg { padding:.8rem 1.3rem; font-size:1rem; } .btn-sm { padding:.4rem .75rem; font-size:.82rem; }

/* --- Formularis --- */
.field { margin-bottom:1.1rem; } fieldset { border:none; padding:0; margin:0; }
.label { display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; }
.input { width:100%; padding:.7rem .85rem; font-size:.95rem; font-family:inherit; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); transition:border-color .15s,box-shadow .15s; }
.input:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-100); }
.input-sm { padding:.42rem .6rem; font-size:.85rem; width:auto; }
textarea.input { resize:vertical; }
.hint { font-size:.8rem; color:var(--muted); margin:.35rem 0 0; }
.check { display:flex; align-items:center; gap:.5rem; font-size:.9rem; cursor:pointer; margin-bottom:.8rem; }
.check input { width:1.05rem; height:1.05rem; accent-color:var(--brand-600); }
.check-row { display:flex; flex-wrap:wrap; gap:1rem; } .check-inline { margin-bottom:0; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-actions { display:flex; gap:.75rem; margin-top:.5rem; flex-wrap:wrap; }
.form-card { max-width:720px; }

/* --- Alertes --- */
.alert { padding:.75rem .95rem; border-radius:var(--radius-sm); font-size:.92rem; margin-bottom:1.1rem; border:1px solid transparent; }
.alert-success { background:var(--ok-bg); color:var(--brand-800); border-color:var(--brand-200); }
.alert-danger { background:var(--danger-bg); color:var(--danger-700); border-color:#fecaca; }
.alert-warning { background:var(--warn-bg); color:#92400e; border-color:#fde68a; }
.alert-info { background:var(--info-bg); color:var(--info); border-color:#bae6fd; }
.alert-list { margin:0; padding-left:1.1rem; } .alert-list li { margin:.15rem 0; }

/* --- Topbar / nav --- */
.topbar { background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:20; }
.topbar-inner { max-width:1080px; margin:0 auto; padding:.7rem 1.25rem; display:flex; align-items:center; gap:1.25rem; }
.brand { font-weight:800; font-size:1.25rem; color:var(--brand-700); letter-spacing:-.02em; }
.brand-light { color:#fff; }
.mainnav { display:flex; gap:.35rem; margin-right:auto; }
.mainnav a { padding:.45rem .8rem; border-radius:var(--radius-sm); font-size:.9rem; font-weight:600; color:var(--muted); }
.mainnav a:hover { background:var(--surface-2); text-decoration:none; }
.mainnav a.active { background:var(--brand-50); color:var(--brand-700); }
.topbar-right { display:flex; align-items:center; gap:.9rem; }
.user-name { font-size:.86rem; color:var(--muted); font-weight:600; }

/* --- Selector d'idioma --- */
.lang-switch { position:relative; }
.lang-switch summary { list-style:none; cursor:pointer; font-size:.82rem; font-weight:600; color:var(--muted); padding:.4rem .6rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); }
.lang-switch summary::-webkit-details-marker { display:none; }
.lang-switch[open] summary { color:var(--text); }
.lang-menu { position:absolute; right:0; top:calc(100% + 4px); z-index:30; margin:0; padding:.3rem; list-style:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); min-width:140px; }
.lang-menu a { display:block; padding:.4rem .6rem; border-radius:6px; font-size:.88rem; color:var(--text); }
.lang-menu a:hover { background:var(--surface-2); text-decoration:none; }
.lang-menu a.active { background:var(--brand-50); color:var(--brand-700); font-weight:600; }
.lang-switch.on-dark summary { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.corner-lang { position:absolute; top:1rem; right:1rem; z-index:40; }

.subnav { display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem; overflow-x:auto; }
.subnav a { padding:.6rem .9rem; font-size:.9rem; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; }
.subnav a:hover { color:var(--text); text-decoration:none; }
.subnav a.active { color:var(--brand-700); border-bottom-color:var(--brand-600); }

/* --- Layout --- */
.container { max-width:1080px; margin:0 auto; padding:1.75rem 1.25rem 3rem; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.page-head h1 { font-size:1.55rem; }
.muted { color:var(--muted); } .small { font-size:.82rem; } .right { text-align:right; }
.text-danger { color:var(--danger); font-weight:600; }
.link-strong { font-weight:650; color:var(--text); } .link-strong:hover { color:var(--brand-700); }
.link-more { display:inline-block; margin-top:.75rem; font-size:.86rem; font-weight:600; }

/* --- Cards --- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.4rem; margin-bottom:1.25rem; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.card-head h2 { font-size:1.05rem; }
.empty { text-align:center; padding:2.5rem 1.4rem; }
.empty h2 { margin-bottom:.5rem; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.site-card { display:block; margin-bottom:0; transition:box-shadow .15s,transform .05s; }
.site-card:hover { box-shadow:var(--shadow-lg); text-decoration:none; }
.site-card-head { display:flex; align-items:center; gap:.9rem; margin-bottom:.7rem; }
.site-card-meta { display:flex; gap:.4rem; }

/* --- Stat grid --- */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.25rem; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow-sm); }
.stat-alert { border-color:#fecaca; background:var(--danger-bg); }
.stat-label { font-size:.8rem; color:var(--muted); font-weight:600; }
.stat-value { font-size:1.7rem; font-weight:700; margin-top:.2rem; }

/* --- Dashboard grids --- */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.dash-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.score-card .score-hero { display:flex; align-items:center; gap:1rem; margin-bottom:.6rem; }
.score-band-label { font-size:1.15rem; font-weight:700; }

/* --- Score badge --- */
.score { display:inline-flex; align-items:center; justify-content:center; min-width:2.4rem; padding:.25rem .55rem; border-radius:var(--radius-sm); font-weight:750; color:#fff; font-size:.95rem; }
.score-big { min-width:3.6rem; height:3.6rem; font-size:1.7rem; border-radius:var(--radius); }
.score-good { background:var(--brand-600); } .score-warn { background:var(--warn); } .score-bad { background:var(--danger); } .score-unknown { background:#9ca3af; }

/* --- Badges / severitat --- */
.badge { display:inline-block; padding:.15rem .55rem; border-radius:20px; font-size:.75rem; font-weight:650; }
.sev-critical { background:#fee2e2; color:var(--danger-700); } .sev-serious { background:#fee2e2; color:#dc2626; }
.sev-moderate { background:var(--warn-bg); color:#92400e; } .sev-minor { background:#f3f4f6; color:#4b5563; }
.badge-auto { background:var(--brand-50); color:var(--brand-800); }
.badge-human { background:#ede9fe; color:#5b21b6; }
.badge-partial { background:var(--warn-bg); color:#92400e; }
.pill { display:inline-block; min-width:1.5rem; padding:.1rem .5rem; border-radius:20px; font-size:.8rem; font-weight:700; text-align:center; }
.pill-alert { background:var(--danger); color:#fff; }

.status-tag { display:inline-block; padding:.15rem .55rem; border-radius:20px; font-size:.75rem; font-weight:650; }
.status-tag-open { background:var(--warn-bg); color:#92400e; }
.status-tag-in_progress { background:var(--info-bg); color:var(--info); }
.status-tag-fixed { background:var(--ok-bg); color:var(--brand-800); }
.status-tag-dismissed { background:#f3f4f6; color:#6b7280; }
.status-dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; background:#9ca3af; margin-right:.3rem; }
.status-done { background:var(--brand-600); } .status-running,.status-queued { background:var(--warn); } .status-failed { background:var(--danger); }

/* --- Sev list / spark --- */
.sev-list { list-style:none; padding:0; margin:0; }
.sev-list li { display:flex; justify-content:space-between; align-items:center; padding:.4rem 0; border-bottom:1px solid var(--border); }
.sev-count { font-weight:700; }
.spark { display:flex; align-items:flex-end; gap:4px; height:90px; padding-top:.5rem; }
.spark-bar { flex:1; background:var(--brand-400); border-radius:3px 3px 0 0; min-height:4px; }
.coverage-note { background:var(--info-bg); border-color:#bae6fd; font-size:.9rem; }
.sector-pct { color:var(--brand-800); }
.audit-principle { font-size:1rem; color:var(--brand-800); margin:1.4rem 0 .5rem; padding-bottom:.3rem; border-bottom:2px solid var(--brand-100); }
.audit-table td { vertical-align:middle; }
.mailbox-note { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.code-block { display:inline-block; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.4rem .6rem; margin-top:.35rem; word-break:break-all; }

/* --- Tables --- */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:.5rem .7rem; border-bottom:2px solid var(--border); }
.table td { padding:.65rem .7rem; border-bottom:1px solid var(--border); vertical-align:top; }
.table tr:last-child td { border-bottom:none; }
.url-cell { font-size:.85rem; word-break:break-all; max-width:340px; }
.row-overdue { background:var(--danger-bg); }

/* --- Scan list --- */
.scan-list { list-style:none; padding:0; margin:0; }
.scan-list li { display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--border); }
.scan-list li:last-child { border-bottom:none; }

/* --- Filter / pager --- */
.filter-bar { display:flex; gap:.6rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }
.pagination-wrap { margin-top:1rem; }
.pager { display:flex; align-items:center; gap:.6rem; justify-content:center; }
.pager-btn { display:inline-flex; width:2.2rem; height:2.2rem; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-weight:700; }
.pager-btn.disabled { opacity:.4; }
.pager-info { font-size:.86rem; color:var(--muted); }

/* --- Definition list / issue detail --- */
.def { margin:0; } .def dt { font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-top:.7rem; }
.def dd { margin:.15rem 0 0; }
.occurrences { display:flex; flex-direction:column; gap:.8rem; }
.occ { border:1px solid var(--border); border-radius:var(--radius-sm); padding:.7rem .85rem; background:var(--surface-2); }
.occ-url { font-weight:600; margin-bottom:.3rem; }
.occ-selector { display:inline-block; background:#eef2ff; color:#3730a3; padding:.15rem .4rem; border-radius:4px; }
.occ-html { margin:.4rem 0 0; padding:.5rem .6rem; background:#111827; color:#e5e7eb; border-radius:var(--radius-sm); overflow-x:auto; font-size:.78rem; }
.quote { background:var(--surface-2); border-left:3px solid var(--brand-500); padding:.7rem .9rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0; white-space:pre-wrap; margin:.6rem 0; }
.decl-status,.publish-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.publish-bar { background:var(--brand-50); border:1px solid var(--brand-200); border-radius:var(--radius); padding:1.1rem 1.3rem; }

/* --- Login (guest) --- */
.auth-body { min-height:100vh; background:linear-gradient(160deg,var(--brand-600),var(--brand-800)); }
.auth-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.25rem; }
.auth-card { width:100%; max-width:400px; background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:2rem 1.75rem; }
.auth-head { text-align:center; margin-bottom:1.5rem; }
.auth-logo { font-size:1.6rem; font-weight:800; color:var(--brand-700); }
.auth-sub { margin:.35rem 0 0; color:var(--muted); font-size:.92rem; }
.auth-foot { margin-top:1.25rem; color:rgba(255,255,255,.85); font-size:.8rem; }
.auth-alt { margin:1.1rem 0 0; text-align:center; font-size:.9rem; color:var(--muted); }

/* --- Public pages (declaració, queixa) --- */
.public-body { background:var(--bg); }
.public-wrap { max-width:760px; margin:0 auto; padding:2.5rem 1.25rem; }
.public-footer { max-width:760px; margin:0 auto; padding:1.5rem 1.25rem 3rem; color:var(--muted); font-size:.85rem; border-top:1px solid var(--border); }
.doc { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:2rem; }
.doc-head { border-bottom:2px solid var(--brand-100); padding-bottom:1rem; margin-bottom:1.25rem; }
.doc h2 { font-size:1.15rem; color:var(--brand-800); margin:1.5rem 0 .5rem; }
.doc-pre { white-space:pre-wrap; background:var(--surface-2); border-radius:var(--radius-sm); padding:.8rem 1rem; }

/* --- Landing --- */
.landing-body { background:#fff; color:var(--text); }
.lp-nav { background:var(--brand-800); }
.lp-nav-inner { max-width:1080px; margin:0 auto; padding:.9rem 1.25rem; display:flex; align-items:center; justify-content:space-between; }
.lp-nav nav { display:flex; align-items:center; gap:1rem; }
.lp-nav a { color:#fff; font-weight:600; }
.lp-hero { background:linear-gradient(160deg,var(--brand-700),var(--brand-800)); color:#fff; padding:3.5rem 1.25rem 4rem; }
.lp-hero-inner { max-width:760px; margin:0 auto; text-align:center; }
.lp-hero h1 { font-size:2.3rem; line-height:1.15; }
.lp-lead { font-size:1.15rem; color:rgba(255,255,255,.92); margin:1rem 0 2rem; }
.lp-scan { background:#fff; color:var(--text); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:1.75rem; text-align:left; }
.lp-scan h2 { font-size:1.25rem; }
.lp-scan-form { display:flex; gap:.6rem; margin-top:1rem; }
.lp-scan-form .input { flex:1; }
.lp-error { color:var(--danger); font-weight:600; margin:.6rem 0 0; }
.lp-result { padding:2.5rem 1.25rem; background:var(--surface-2); }
.lp-result-inner { max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:1.75rem; }
.lp-result-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.lp-issues { list-style:none; padding:0; margin:1rem 0; }
.lp-issues li { display:flex; align-items:center; gap:.6rem; padding:.55rem 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.lp-issue-name { font-weight:600; }
.lp-honest { background:var(--info-bg); border-left:4px solid var(--info); padding:.9rem 1.1rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:1.25rem 0; }
.lp-pending { text-align:center; padding:1.5rem 0; }
.spinner { width:44px; height:44px; margin:0 auto 1rem; border:4px solid var(--brand-100); border-top-color:var(--brand-600); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .spinner { animation:none; } }
.lp-capture { background:var(--brand-50); border-radius:var(--radius); padding:1.1rem 1.3rem; margin-top:1rem; }
.lp-capture-row { display:flex; gap:.6rem; margin-top:.4rem; }
.lp-capture-row .input { flex:1; }
.lp-anti { padding:3rem 1.25rem; }
.lp-anti-inner { max-width:1080px; margin:0 auto; text-align:center; }
.lp-anti h2 { font-size:1.8rem; margin-bottom:1.75rem; }
.lp-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; text-align:left; }
.lp-col h3 { color:var(--brand-700); margin-bottom:.5rem; }
.lp-pricing { padding:3rem 1.25rem; background:var(--surface-2); }
.lp-pricing-inner { max-width:1080px; margin:0 auto; text-align:center; }
.lp-pricing h2 { font-size:1.8rem; margin-bottom:2rem; }
.lp-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; text-align:left; }
.lp-plan { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.75rem; }
.lp-plan-feat { border:2px solid var(--brand-500); box-shadow:var(--shadow-lg); }
.lp-plan h3 { color:var(--brand-700); }
.lp-price { font-size:2rem; font-weight:800; margin:.5rem 0 1rem; }
.lp-price span { font-size:1rem; font-weight:600; color:var(--muted); }
.lp-plan ul { padding-left:1.1rem; margin:0; } .lp-plan li { margin:.4rem 0; }
.lp-audit { margin-top:2rem; color:var(--muted); }
.lp-footer { background:var(--brand-800); color:rgba(255,255,255,.85); text-align:center; padding:1.5rem; font-size:.85rem; }

/* --- Responsive --- */
@media (max-width:760px) {
    .dash-grid-2 { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .lp-hero h1 { font-size:1.8rem; }
    .lp-scan-form { flex-direction:column; }
    .mainnav { gap:0; }
    .user-name { display:none; }
}