body{font-family:Arial,sans-serif;margin:0;background:#f4f4f4;color:#222}main{max-width:1150px;margin:30px auto;background:white;padding:24px;border-radius:10px}.login-box{max-width:420px}.topbar{background:#222;color:white;padding:14px 24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.topbar a{color:white}.menu-principal{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.dropdown{position:relative;display:inline-block}.dropbtn{margin-top:0;padding:8px 12px;background:#444;color:white;border:0;border-radius:6px;cursor:pointer}.dropdown-content{display:none;position:absolute;background:white;min-width:245px;box-shadow:0 8px 16px rgba(0,0,0,.25);z-index:50;border-radius:6px;overflow:hidden}.dropdown-content a{color:#222;padding:10px 14px;display:block;text-decoration:none;margin:0}.dropdown-content a:hover{background:#eee}.dropdown:hover .dropdown-content{display:block}label{display:block;margin:14px 0;font-weight:bold}input,textarea,select{width:100%;box-sizing:border-box;margin-top:6px;padding:10px;border:1px solid #bbb;border-radius:6px;font-size:15px}button,.button-link{display:inline-block;margin-top:12px;padding:10px 16px;background:#222;color:white;border:0;border-radius:6px;text-decoration:none;cursor:pointer}.button-link:hover{background:#444}table{width:100%;border-collapse:collapse;margin-top:18px}th,td{border:1px solid #ddd;padding:9px;vertical-align:top}th{background:#eee}.card{background:#fafafa;border:1px solid #ddd;padding:18px;border-radius:8px;margin-bottom:24px}.error{color:#a40000;font-weight:bold}.msg{background:#eef8ee;border:1px solid #9ac89a;padding:10px;border-radius:6px}.small{font-size:13px;color:#666}.checkbox{display:flex;gap:8px;align-items:center}.checkbox input{width:auto}.exam-area{border:3px solid #444;padding:20px;background:#fffdf0;border-radius:10px}.pregunta{margin-bottom:22px}.guardar-dins-area{margin-top:25px;text-align:center}.bloqueig{position:fixed;z-index:9999;inset:0;background:#000;display:flex;align-items:center;justify-content:center}.bloqueig.ocult{display:none}.modal{background:#111;color:white;max-width:430px;padding:28px;border-radius:12px;text-align:center;border:1px solid #444}.modal input{background:white;color:#111}.json-preview{background:#111;color:#eee;padding:15px;border-radius:8px;overflow-x:auto;white-space:pre-wrap}.htmlcss-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.preview-iframe{width:100%;min-height:360px;border:1px solid #999;background:white;border-radius:6px}.code-preview{background:#111;color:#eee;padding:12px;border-radius:6px;white-space:pre-wrap;overflow-x:auto}@media(max-width:900px){.htmlcss-grid{grid-template-columns:1fr}.menu-principal{display:block}.menu-principal a,.dropbtn{display:block;margin:8px 0}.dropdown-content{position:static}}

/* Accessibilitat: mode d'alt contrast / colors invertits per a alumnes */
.access-btn{
    display:inline-block;
    margin:0;
    padding:8px 12px;
    background:#ffd400;
    color:#000;
    border:2px solid #fff;
    border-radius:6px;
    cursor:pointer;
    font-weight:bold;
}
body.mode-alt-contrast{
    background:#000 !important;
    color:#fff !important;
    font-size:18px;
    line-height:1.55;
}
body.mode-alt-contrast main,
body.mode-alt-contrast .card,
body.mode-alt-contrast .exam-area{
    background:#000 !important;
    color:#fff !important;
    border-color:#fff !important;
}
body.mode-alt-contrast .topbar,
body.mode-alt-contrast .modal{
    background:#000 !important;
    color:#fff !important;
    border-color:#fff !important;
}
body.mode-alt-contrast a{
    color:#00ffff !important;
    text-decoration:underline;
}
body.mode-alt-contrast input,
body.mode-alt-contrast textarea,
body.mode-alt-contrast select{
    background:#000 !important;
    color:#fff !important;
    border:2px solid #fff !important;
}
body.mode-alt-contrast button,
body.mode-alt-contrast .button-link,
body.mode-alt-contrast .dropbtn{
    background:#fff !important;
    color:#000 !important;
    border:2px solid #ffff00 !important;
    font-weight:bold;
}
body.mode-alt-contrast table,
body.mode-alt-contrast th,
body.mode-alt-contrast td{
    background:#000 !important;
    color:#fff !important;
    border-color:#fff !important;
}
body.mode-alt-contrast th{
    background:#222 !important;
}
body.mode-alt-contrast .small{
    color:#ddd !important;
}
body.mode-alt-contrast .msg{
    background:#003300 !important;
    color:#fff !important;
    border-color:#00ff00 !important;
}
body.mode-alt-contrast .error{
    color:#ff8080 !important;
}
body.mode-alt-contrast .code-preview,
body.mode-alt-contrast .json-preview,
body.mode-alt-contrast pre{
    background:#000 !important;
    color:#00ff00 !important;
    border:1px solid #fff;
}

.test-options{display:grid;gap:10px;margin-top:10px}.test-option{display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid #ccc;border-radius:7px;background:#fff;font-weight:normal}.test-option input{width:auto;margin:2px 0 0 0}.mode-alt-contrast .test-option{background:#000;color:#fff;border-color:#fff}

/* Detall del motiu i hora de bloqueig */
.detall-bloqueig{
    margin:16px 0;
    padding:12px 14px;
    border:1px solid #666;
    border-radius:8px;
    background:#1b1b1b;
    text-align:left;
}
.detall-bloqueig p{margin:6px 0;color:#fff;}
.detall-bloqueig strong{display:inline-block;min-width:62px;}