/* =====================================================
   PORTAL DE TREBALLADORS — Sistema de Disseny Global
   ===================================================== */

/* Google Fonts carregades al HTML de cada pàgina */
* { margin:0; padding:0; box-sizing:border-box; }

/* --- TOKENS DE COLOR --- */
:root {
    --bg:           #0a0e1a;
    --bg-2:         #0f1523;
    --surface:      #111827;
    --surface-2:    #1f2937;
    --surface-3:    #273548;
    --border:       rgba(255,255,255,.08);
    --border-hover: rgba(255,255,255,.15);

    --primary:      #3b82f6;
    --primary-dark: #2563eb;
    --primary-glow: rgba(59,130,246,.25);
    --accent:       #06b6d4;
    --accent-glow:  rgba(6,182,212,.2);

    --success:      #10b981;
    --success-bg:   rgba(16,185,129,.12);
    --warning:      #f59e0b;
    --warning-bg:   rgba(245,158,11,.12);
    --error:        #ef4444;
    --error-bg:     rgba(239,68,68,.12);
    --info:         #6366f1;
    --info-bg:      rgba(99,102,241,.12);

    --text:         #f1f5f9;
    --text-muted:   #94a3b8;
    --text-dim:     #64748b;

    --radius-sm:    8px;
    --radius:       12px;
    --radius-lg:    16px;
    --radius-xl:    20px;

    --shadow-sm:    0 2px 8px rgba(0,0,0,.3);
    --shadow:       0 8px 24px rgba(0,0,0,.4);
    --shadow-lg:    0 20px 50px rgba(0,0,0,.5);

    --transition:   .2s cubic-bezier(.4,0,.2,1);
    --sidebar-w:    260px;
}

/* --- TIPOGRAFIA --- */
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
    font-family:'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height:1.6;
    min-height:100vh;
}

/* --- LAYOUT ADMIN --- */
.layout { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; height:100vh;
    z-index:100;
    transition: transform var(--transition);
}
.sidebar-logo {
    padding:1.5rem 1.25rem;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:.75rem;
}
.sidebar-logo .logo-icon {
    width:40px; height:40px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem;
    box-shadow: 0 4px 12px var(--primary-glow);
    flex-shrink:0;
}
.sidebar-logo .logo-text { font-size:.9rem; font-weight:700; line-height:1.2; }
.sidebar-logo .logo-text small { display:block; font-size:.7rem; font-weight:400; color:var(--text-muted); }

.sidebar-nav { flex:1; padding:1rem .75rem; overflow-y:auto; }
.nav-section-title {
    font-size:.65rem; font-weight:700; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.1em;
    padding:.5rem .5rem .25rem;
    margin-top:.5rem;
}
.nav-item {
    display:flex; align-items:center; gap:.75rem;
    padding:.65rem .75rem;
    border-radius:var(--radius-sm);
    color:var(--text-muted);
    text-decoration:none;
    font-size:.875rem; font-weight:500;
    transition:all var(--transition);
    margin-bottom:2px;
}
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item.active {
    background: linear-gradient(135deg, var(--primary-glow), var(--accent-glow));
    color:var(--primary);
    border:1px solid rgba(59,130,246,.2);
}
.nav-item .nav-icon { font-size:1.1rem; width:22px; text-align:center; }
.nav-item .badge {
    margin-left:auto;
    background:var(--primary);
    color:#fff;
    font-size:.65rem; font-weight:700;
    padding:2px 7px;
    border-radius:999px;
}

.sidebar-footer {
    padding:1rem .75rem;
    border-top:1px solid var(--border);
}
.sidebar-user {
    display:flex; align-items:center; gap:.75rem;
    padding:.5rem .75rem;
    border-radius:var(--radius-sm);
}
.user-avatar {
    width:34px; height:34px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.875rem; font-weight:700;
    flex-shrink:0;
}
.sidebar-user .user-info { flex:1; min-width:0; }
.sidebar-user .user-name { font-size:.8rem; font-weight:600; truncate:true; }
.sidebar-user .user-role { font-size:.7rem; color:var(--text-muted); }
.btn-logout {
    display:flex; align-items:center; gap:.5rem;
    padding:.5rem .75rem;
    border-radius:var(--radius-sm);
    color:var(--error);
    text-decoration:none;
    font-size:.8rem; font-weight:500;
    transition:background var(--transition);
    margin-top:.25rem;
}
.btn-logout:hover { background:var(--error-bg); }

/* Main content */
.main {
    margin-left: var(--sidebar-w);
    flex:1;
    display:flex; flex-direction:column;
    min-height:100vh;
}
.topbar {
    padding:1rem 1.75rem;
    border-bottom:1px solid var(--border);
    background:var(--bg-2);
    display:flex; align-items:center; gap:1rem;
    position:sticky; top:0; z-index:50;
}
.topbar-title { font-size:1.1rem; font-weight:700; flex:1; }
.topbar-actions { display:flex; align-items:center; gap:.75rem; }

.content { padding:1.75rem; flex:1; }

/* --- CARDS ESTADÍSTIQUES --- */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1rem; margin-bottom:1.75rem; }
.stat-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:1.25rem;
    transition:all var(--transition);
}
.stat-card:hover { border-color:var(--border-hover); transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-card .stat-icon {
    width:44px; height:44px;
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem;
    margin-bottom:.75rem;
}
.stat-card .stat-value { font-size:2rem; font-weight:800; line-height:1; }
.stat-card .stat-label { font-size:.78rem; color:var(--text-muted); margin-top:.25rem; font-weight:500; }
.stat-card.blue  .stat-icon { background:rgba(59,130,246,.15); }
.stat-card.teal  .stat-icon { background:rgba(6,182,212,.15); }
.stat-card.green .stat-icon { background:var(--success-bg); }
.stat-card.amber .stat-icon { background:var(--warning-bg); }
.stat-card.red   .stat-icon { background:var(--error-bg); }

/* --- CARD GENÈRIC --- */
.card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:1.5rem;
}
.card-header {
    display:flex; align-items:center; gap:1rem;
    margin-bottom:1.25rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--border);
}
.card-title { font-size:1rem; font-weight:700; }
.card-actions { margin-left:auto; display:flex; gap:.5rem; }

/* --- BOTONS --- */
.btn {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.55rem 1.1rem;
    border-radius:var(--radius-sm);
    font-size:.875rem; font-weight:600;
    cursor:pointer; border:none;
    text-decoration:none;
    transition:all var(--transition);
    white-space:nowrap;
    font-family:inherit;
}
.btn-sm { padding:.35rem .75rem; font-size:.78rem; }
.btn-lg { padding:.75rem 1.5rem; font-size:1rem; }
.btn-xl { padding:1rem 2rem; font-size:1.1rem; border-radius:var(--radius); }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:#fff;
    box-shadow: 0 4px 12px var(--primary-glow);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 20px var(--primary-glow); }
.btn-primary:active { transform:translateY(0); }

.btn-accent {
    background: linear-gradient(135deg, var(--accent), #0284c7);
    color:#fff;
    box-shadow: 0 4px 12px var(--accent-glow);
}
.btn-success {
    background: linear-gradient(135deg, var(--success), #059669);
    color:#fff;
    box-shadow: 0 4px 10px rgba(16,185,129,.3);
}
.btn-danger  {
    background: linear-gradient(135deg, var(--error), #dc2626);
    color:#fff;
    box-shadow: 0 4px 10px rgba(239,68,68,.3);
}
.btn-ghost {
    background:transparent;
    color:var(--text-muted);
    border:1px solid var(--border);
}
.btn-ghost:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-hover); }
.btn-warning {
    background: linear-gradient(135deg, var(--warning), #d97706);
    color:#fff;
}

/* --- SEARCH BAR --- */
.search-bar {
    display:flex; align-items:center; gap:.75rem;
    margin-bottom:1.25rem;
}
.search-input-wrap {
    position:relative; flex:1;
}
.search-input-wrap .search-icon {
    position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
    color:var(--text-dim); font-size:.95rem; pointer-events:none;
}
.search-input {
    width:100%; padding:.65rem 1rem .65rem 2.5rem;
    background:var(--surface-2); border:1.5px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text); font-size:.875rem; font-family:inherit;
    transition:border-color var(--transition), box-shadow var(--transition);
}
.search-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.search-input::placeholder { color:var(--text-dim); }

/* --- TAULA --- */
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; }
thead th {
    background:var(--surface-2);
    padding:.65rem 1rem;
    font-size:.75rem; font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.06em;
    text-align:left;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}
tbody tr {
    border-bottom:1px solid var(--border);
    transition:background var(--transition);
}
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--surface-2); }
tbody td {
    padding:.75rem 1rem;
    font-size:.875rem;
    vertical-align:middle;
}
.td-actions { display:flex; gap:.4rem; align-items:center; }

/* --- BADGES --- */
.badge {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.25rem .65rem;
    border-radius:999px;
    font-size:.72rem; font-weight:600;
    white-space:nowrap;
}
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-warning { background:var(--warning-bg); color:var(--warning); }
.badge-error   { background:var(--error-bg);   color:var(--error);   }
.badge-info    { background:var(--info-bg);    color:var(--info);    }
.badge-muted   { background:var(--surface-3);  color:var(--text-muted); }

/* --- FORMULARIS --- */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.25rem; }
.form-group-full { grid-column:1/-1; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-label {
    font-size:.75rem; font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.05em;
}
.form-label .required { color:var(--error); margin-left:.2rem; }
.form-control {
    padding:.7rem 1rem;
    background:var(--surface-2); border:1.5px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text); font-size:.9rem; font-family:inherit;
    transition:border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.form-control::placeholder { color:var(--text-dim); }
textarea.form-control { resize:vertical; min-height:80px; }
.form-hint { font-size:.75rem; color:var(--text-dim); }

.form-divider {
    grid-column:1/-1;
    border:none; border-top:1px solid var(--border);
    margin:.25rem 0;
}
.form-section-title {
    grid-column:1/-1;
    font-size:.8rem; font-weight:700;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em;
    padding-top:.25rem;
}

.form-actions {
    display:flex; align-items:center; gap:.75rem;
    margin-top:1.5rem;
    padding-top:1.25rem;
    border-top:1px solid var(--border);
    flex-wrap:wrap;
}

/* --- ALERTS --- */
.alert {
    display:flex; align-items:center; gap:.65rem;
    padding:.85rem 1rem;
    border-radius:var(--radius-sm);
    font-size:.875rem;
    margin-bottom:1.25rem;
    animation: slideIn .3s ease;
}
.alert-icon { font-size:1rem; font-weight:700; }
.alert-success { background:var(--success-bg); color:var(--success); border:1px solid rgba(16,185,129,.25); }
.alert-error   { background:var(--error-bg);   color:#fca5a5;        border:1px solid rgba(239,68,68,.25); }
.alert-warning { background:var(--warning-bg); color:var(--warning); border:1px solid rgba(245,158,11,.25); }
.alert-info    { background:var(--info-bg);    color:#a5b4fc;        border:1px solid rgba(99,102,241,.25); }

@keyframes slideIn {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:translateY(0); }
}

/* --- DOCUMENT CARDS (worker) --- */
.doc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.25rem; }
.doc-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:all var(--transition);
    position:relative;
}
.doc-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow); transform:translateY(-3px); }
.doc-card.signed { border-color:rgba(16,185,129,.3); }
.doc-card.signed:hover { border-color:rgba(16,185,129,.5); }

.doc-thumb {
    height:180px;
    background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    cursor:pointer;
    position:relative;
}
.doc-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; }
.doc-thumb .thumb-placeholder {
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    color:var(--text-dim);
}
.doc-thumb .thumb-placeholder .pdf-icon { font-size:3.5rem; }
.doc-thumb .thumb-placeholder p { font-size:.78rem; }
.doc-thumb-overlay {
    position:absolute; inset:0;
    background:rgba(0,0,0,.5);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity var(--transition);
}
.doc-thumb:hover .doc-thumb-overlay { opacity:1; }
.doc-thumb-overlay span { color:#fff; font-size:.875rem; font-weight:600; }

.doc-signed-ribbon {
    position:absolute; top:10px; right:10px;
    background:var(--success);
    color:#fff;
    font-size:.65rem; font-weight:700;
    padding:.25rem .6rem;
    border-radius:999px;
    display:flex; align-items:center; gap:.3rem;
    box-shadow:0 2px 8px rgba(16,185,129,.4);
}

.doc-body { padding:1rem; }
.doc-slot { font-size:.7rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.25rem; }
.doc-title { font-size:.975rem; font-weight:600; margin-bottom:.5rem; line-height:1.3; }
.doc-meta { font-size:.78rem; color:var(--text-muted); margin-bottom:1rem; }
.doc-meta span { display:block; }

.doc-btn {
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.75rem;
    border-radius:var(--radius-sm);
    font-size:.9rem; font-weight:600;
    cursor:pointer; border:none;
    text-decoration:none; width:100%;
    font-family:inherit;
    transition:all var(--transition);
}
.doc-btn-sign {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color:#fff;
    box-shadow:0 4px 12px var(--primary-glow);
}
.doc-btn-sign:hover { transform:translateY(-1px); box-shadow:0 8px 20px var(--primary-glow); }
.doc-btn-signed {
    background:var(--success-bg);
    color:var(--success);
    cursor:default;
}

/* --- WORKER HEADER --- */
.worker-header {
    background: linear-gradient(135deg, var(--surface), var(--surface-2));
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:1.75rem;
    margin-bottom:1.75rem;
    display:flex; align-items:center; gap:1.25rem;
    position:relative; overflow:hidden;
}
.worker-header::before {
    content:'';
    position:absolute; top:-40px; right:-40px;
    width:200px; height:200px;
    background: radial-gradient(circle, var(--primary-glow), transparent);
    pointer-events:none;
}
.worker-avatar-lg {
    width:64px; height:64px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.8rem; font-weight:700;
    box-shadow:0 8px 20px var(--primary-glow);
    flex-shrink:0;
}
.worker-info h2 { font-size:1.3rem; font-weight:800; }
.worker-info p  { color:var(--text-muted); font-size:.875rem; margin-top:.2rem; }
.worker-chips { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.chip {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.25rem .7rem;
    background:var(--surface-3);
    border:1px solid var(--border);
    border-radius:999px;
    font-size:.75rem; color:var(--text-muted);
}

/* --- DOCUMENT SLOT ADMIN --- */
.doc-slot-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.doc-slot-card {
    background:var(--surface-2);
    border:1.5px dashed var(--border);
    border-radius:var(--radius-lg);
    padding:1.5rem;
    text-align:center;
    transition:all var(--transition);
}
.doc-slot-card.has-doc {
    border-style:solid;
    border-color:rgba(59,130,246,.3);
    background:rgba(59,130,246,.05);
}
.doc-slot-card.is-signed {
    border-color:rgba(16,185,129,.35);
    background:rgba(16,185,129,.05);
}
.doc-slot-num {
    font-size:.7rem; font-weight:700;
    color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em;
    margin-bottom:.75rem;
}
.doc-slot-icon { font-size:2.5rem; margin-bottom:.5rem; opacity:.6; }
.doc-slot-title { font-size:.875rem; font-weight:600; margin-bottom:.35rem; color:var(--text); }
.doc-slot-info  { font-size:.75rem; color:var(--text-muted); margin-bottom:1rem; }
.doc-slot-actions { display:flex; flex-direction:column; gap:.5rem; }
.doc-slot-drop {
    border:2px dashed rgba(59,130,246,.4);
    border-radius:var(--radius-sm);
    padding:1rem;
    cursor:pointer;
    transition:all var(--transition);
    background:transparent;
    width:100%;
}
.doc-slot-drop:hover { background:rgba(59,130,246,.08); border-color:var(--primary); }
.doc-slot-drop p { font-size:.8rem; color:var(--text-muted); margin-top:.35rem; }

/* --- MODAL --- */
.modal-backdrop {
    position:fixed; inset:0;
    background:rgba(0,0,0,.7);
    z-index:200;
    display:flex; align-items:center; justify-content:center;
    padding:1rem;
    opacity:0; visibility:hidden;
    transition:all .25s;
}
.modal-backdrop.open { opacity:1; visibility:visible; }
.modal {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    max-width:480px; width:100%;
    padding:1.75rem;
    transform:scale(.95);
    transition:transform .25s;
    box-shadow:var(--shadow-lg);
}
.modal-backdrop.open .modal { transform:scale(1); }
.modal-title { font-size:1.1rem; font-weight:700; margin-bottom:1.25rem; }
.modal-actions { display:flex; gap:.75rem; margin-top:1.5rem; justify-content:flex-end; flex-wrap:wrap; }

/* --- PAGE HEADER --- */
.page-header {
    display:flex; align-items:center; gap:1rem;
    margin-bottom:1.75rem;
    flex-wrap:wrap;
}
.page-title { font-size:1.4rem; font-weight:800; }
.page-subtitle { font-size:.875rem; color:var(--text-muted); margin-top:.15rem; }
.page-header-actions { margin-left:auto; display:flex; gap:.75rem; flex-wrap:wrap; }

/* --- EMPTY STATE --- */
.empty-state {
    text-align:center;
    padding:3rem 1rem;
    color:var(--text-muted);
}
.empty-state .empty-icon { font-size:3.5rem; margin-bottom:1rem; opacity:.5; }
.empty-state h3 { font-size:1.1rem; font-weight:700; margin-bottom:.5rem; color:var(--text); }
.empty-state p { font-size:.875rem; max-width:320px; margin:0 auto 1.5rem; }

/* --- WORKER INFO BOX --- */
.info-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.75rem; }
.info-item { }
.info-item dt { font-size:.7rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem; }
.info-item dd { font-size:.9rem; color:var(--text); }

/* --- PROGRESS BAR --- */
.progress-wrap { margin-top:.5rem; }
.progress-bar-bg { background:var(--surface-3); border-radius:999px; height:6px; overflow:hidden; }
.progress-bar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg, var(--primary), var(--accent)); transition:width .5s ease; }
.progress-label { font-size:.75rem; color:var(--text-muted); margin-top:.35rem; text-align:right; }

/* --- RESPONSIVE (Tablet) --- */
@media (max-width: 900px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main { margin-left:0; }
    .topbar { padding:.875rem 1rem; }
    .content { padding:1rem; }
    .doc-slot-grid { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
    .stats-grid { grid-template-columns:repeat(2, 1fr); }
    .doc-grid { grid-template-columns:1fr; }
    .form-grid { grid-template-columns:1fr; }
    .page-header { flex-direction:column; align-items:flex-start; }
    .page-header-actions { margin-left:0; }
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-hover); }

/* --- UTILITIES --- */
.text-muted { color:var(--text-muted); }
.text-success { color:var(--success); }
.text-error { color:var(--error); }
.text-warning { color:var(--warning); }
.mt-1 { margin-top:.25rem; }
.mt-2 { margin-top:.5rem; }
.mt-3 { margin-top:.75rem; }
.mt-4 { margin-top:1rem; }
.flex { display:flex; }
.items-center { align-items:center; }
.gap-2 { gap:.5rem; }
.gap-3 { gap:.75rem; }
.ml-auto { margin-left:auto; }
.w-full { width:100%; }
.hidden { display:none !important; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }