:root { --ink:#16243a; --muted:#64748b; --line:#dfe7f1; --canvas:#f5f8fc; --surface:#fff; --blue:#1769e0; --blue-dark:#1054b5; --blue-soft:#eaf3ff; --green:#137a53; --amber:#a66300; --radius:14px; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } a { color:var(--blue); } .shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; }
.site-header { background:var(--surface); border-bottom:1px solid var(--line); } .header-content { min-height:72px; display:flex; align-items:center; gap:28px; } .brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:750; text-decoration:none; white-space:nowrap; } .brand-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--blue); color:#fff; font-size:20px; font-weight:800; } .main-nav { display:flex; gap:20px; align-items:center; margin-left:auto; } .main-nav > a:not(.button) { color:var(--muted); text-decoration:none; font-weight:650; } .user-menu { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.9rem; } .user-menu form { margin:0; } .page-content { padding-top:42px; padding-bottom:56px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:8px; font-size:clamp(1.65rem,3vw,2.2rem); line-height:1.2; letter-spacing:-.025em; } h2 { font-size:1.1rem; line-height:1.3; } .page-heading,.ticket-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:28px; } .page-heading p,.ticket-header p,.form-intro p,.login-intro p { color:var(--muted); } .eyebrow,.ticket-number { color:var(--blue); font-size:.78rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:42px; padding:0 18px; border:1px solid transparent; border-radius:8px; font:inherit; font-weight:750; text-decoration:none; cursor:pointer; } .button-primary { background:var(--blue); color:#fff; } .button-primary:hover { background:var(--blue-dark); } .button-ghost { background:transparent; border-color:var(--line); color:var(--ink); } .button-ghost:hover { background:#f0f5fb; } .button-compact { min-height:36px; padding:0 12px; font-size:.9rem; } .button-full { width:100%; } .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 20px rgb(33 53 79 / 4%); }
.ticket-list { display:grid; gap:12px; } .ticket-card { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 22px; color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:11px; text-decoration:none; } .ticket-card:hover { border-color:#b7cce9; box-shadow:0 8px 24px rgb(31 76 128 / 8%); } .ticket-card h2 { margin:3px 0; font-size:1.05rem; } .ticket-card p { margin:0; color:var(--muted); font-size:.9rem; } .status { display:inline-flex; align-items:center; white-space:nowrap; padding:4px 9px; border-radius:999px; background:#edf2f7; color:#425466; font-size:.8rem; font-weight:750; } .status-open,.status-new { color:var(--blue-dark); background:var(--blue-soft); } .status-in_progress,.status-pending { color:var(--amber); background:#fff3d7; } .status-resolved,.status-closed { color:var(--green); background:#e5f7ee; }
.empty-state { max-width:600px; margin:56px auto; padding:42px 30px; text-align:center; } .empty-icon { margin:0 auto 14px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--blue); background:var(--blue-soft); } .empty-state p { color:var(--muted); } .breadcrumb { display:flex; gap:8px; align-items:center; margin-bottom:22px; color:var(--muted); font-size:.9rem; } .breadcrumb a { text-decoration:none; }
.form-layout { display:grid; grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr); align-items:start; gap:52px; max-width:1040px; margin:20px auto; } .form-intro { padding-top:20px; } .ticket-form,.login-card,.reply-card { padding:28px; } .form-field { margin-bottom:22px; } .form-field > label { display:block; margin-bottom:7px; color:#27384f; font-size:.92rem; font-weight:750; } .form-field > label span { color:#c32d2d; } .form-control,input[type="file"],.login-card input { width:100%; border:1px solid #bdcad9; border-radius:8px; background:#fff; color:var(--ink); font:inherit; } .form-control,.login-card input { min-height:43px; padding:10px 12px; } textarea.form-control { min-height:130px; resize:vertical; } input[type="file"] { padding:9px; } .form-control:focus,.login-card input:focus,.rich-editor-content:focus { outline:3px solid rgb(23 105 224 / 17%); border-color:var(--blue); } .field-hint { margin:6px 0 0; color:var(--muted); font-size:.82rem; } .field-error,.form-errors { color:#b42318; font-size:.88rem; } .field-error { margin:6px 0 0; } .form-errors { margin-bottom:18px; padding:10px 12px; background:#fff0ef; border-radius:8px; } .form-actions { display:flex; justify-content:flex-end; gap:12px; padding-top:4px; }
.portal-enhanced .rich-text-input { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; opacity:0; pointer-events:none; } .rich-editor { border:1px solid #bdcad9; border-radius:8px; overflow:hidden; background:#fff; } .rich-editor:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgb(23 105 224 / 17%); } .rich-editor-toolbar { display:flex; flex-wrap:wrap; gap:4px; padding:7px; background:#f6f9fc; border-bottom:1px solid var(--line); } .rich-editor-toolbar button { min-height:30px; padding:2px 8px; border:0; border-radius:5px; background:transparent; color:#3d5068; font:inherit; cursor:pointer; } .rich-editor-toolbar button:hover,.rich-editor-toolbar button:focus-visible { background:#e2ebf6; } .rich-editor-content { min-height:178px; padding:12px; outline:0; } .rich-editor-content:empty::before { content:"Descreva a sua solicitação com o máximo de detalhes possível."; color:#8795a8; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:24px; } .detail-main { min-width:0; } .ticket-description,.message-card { padding:24px; } .rich-text { overflow-wrap:anywhere; } .rich-text > *:last-child { margin-bottom:0; } .rich-text a { overflow-wrap:anywhere; } .conversation { margin-top:30px; } .conversation > h2 { margin-bottom:14px; } .message-card { margin-bottom:12px; } .message-card p { margin-bottom:0; overflow-wrap:anywhere; } .message-meta { display:flex; justify-content:space-between; gap:16px; margin-bottom:12px; color:var(--muted); font-size:.87rem; } .message-meta strong { color:var(--ink); } .detail-sidebar { display:grid; align-content:start; gap:16px; } .attachments-card { padding:20px; } .attachment-list { display:grid; gap:8px; padding:0; margin:0; list-style:none; } .attachment-list li { display:flex; flex-direction:column; gap:1px; padding-left:13px; border-left:2px solid #d4e4f9; } .attachment-list a { font-size:.9rem; overflow-wrap:anywhere; } .attachment-list span { color:var(--muted); font-size:.78rem; } .empty-inline { padding:20px; color:var(--muted); background:#fff; border:1px dashed #cbd7e5; border-radius:10px; }
.login-layout { display:grid; grid-template-columns:1fr minmax(300px,410px); align-items:center; gap:82px; min-height:calc(100vh - 180px); max-width:930px; margin:0 auto; } .login-intro h1 { max-width:510px; font-size:clamp(2rem,4vw,3rem); } .login-card h2 { margin-bottom:22px; font-size:1.35rem; }
@media (max-width:760px) { .shell { width:min(100% - 28px,1120px); } .header-content { min-height:auto; flex-wrap:wrap; gap:10px 16px; padding:13px 0; } .main-nav { order:3; width:100%; margin:0; justify-content:space-between; } .user-menu { margin-left:auto; } .user-menu > span { display:none; } .page-content { padding-top:28px; } .page-heading,.ticket-header { align-items:stretch; flex-direction:column; gap:14px; } .page-heading .button { width:100%; } .ticket-header .status { align-self:flex-start; } .ticket-card { align-items:flex-start; flex-direction:column; gap:10px; padding:17px; } .form-layout,.detail-grid,.login-layout { grid-template-columns:1fr; gap:22px; } .form-layout { margin-top:0; } .form-intro { padding-top:0; } .ticket-form,.login-card,.reply-card,.ticket-description,.message-card { padding:20px; } .login-layout { min-height:auto; padding-top:32px; } }
@media (max-width:420px) { .brand { font-size:.92rem; } .main-nav { gap:10px; } .main-nav > a:not(.button) { font-size:.88rem; } .button { padding:0 14px; } .form-actions { justify-content:stretch; flex-direction:column-reverse; } .form-actions .button { width:100%; } }