html,body{height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
main.section{flex:1}

.support-wrap{display:grid;gap:16px}
.page-head{margin-bottom:4px}
.page-head{
  background:linear-gradient(90deg,#1d7bc4,#319fe9);
  border:1px solid #3a9fe6;
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 12px 28px rgba(27,92,154,.24);
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.page-head-center{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  padding:6px 10px;
}
.page-head-logo{
  width:128px;
  height:auto;
  border-radius:8px;
  filter:drop-shadow(0 8px 18px rgba(10,43,74,.18));
}
.page-head-copy{
  display:grid;
  gap:2px;
}
.page-head-title{
  color:#eef8ff;
  font-size:34px;
  line-height:1;
  font-weight:800;
  letter-spacing:.01em;
}
.page-head-sub{
  color:#dbedff;
  font-size:14px;
  line-height:1;
}
.page-head-actions{
  position:relative;
  z-index:2;
}
.page-head .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42);color:#fff}
.page-head .btn:hover{background:rgba(255,255,255,.22)}
.auth-mode .page-head{justify-content:space-between}
.auth-mode .page-head > div:first-child{text-align:left}
.auth-mode .support-wrap{min-height:100%;grid-template-rows:auto 1fr}
.sys-title{margin:0;font-size:28px;line-height:1.1;letter-spacing:.01em}
.sys-sub{margin-top:6px}
.hidden{display:none!important}
.panel#loginBox{
  width:min(980px, 100%);
  margin:14px auto 0;
  padding:30px 28px;
  border-radius:20px;
  border:1px solid #2e5e99;
  background:
    radial-gradient(circle at 8% -10%, rgba(46,163,255,.18), transparent 40%),
    radial-gradient(circle at 92% 0%, rgba(15,159,92,.16), transparent 35%),
    linear-gradient(180deg,#0b2b52 0%,#0a2343 100%);
}
.auth-mode .panel#loginBox{margin:14px auto 0;align-self:start}
.panel#loginBox h2{text-align:center;margin-top:0}
.login-brand{
  display:grid;
  justify-items:center;
  gap:8px;
  margin:0 auto 12px;
  padding:10px 18px;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(106,164,231,.45);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(6,28,58,.82) 0%,rgba(7,24,48,.62) 100%);
}
.login-logo{
  width:190px;
  height:auto;
  filter:brightness(1.35) contrast(1.2) saturate(1.12) drop-shadow(0 8px 18px rgba(0,0,0,.34));
}
.login-name{
  font-size:34px;
  font-weight:800;
  letter-spacing:.02em;
  color:#e8f2ff;
}
.panel#loginBox form{max-width:620px;margin:0 auto}
.panel#loginBox .field label{display:block}
.panel#loginBox .field input{max-width:none}
.panel#loginBox .btn.primary{width:100%}
.panel#loginBox #loginError{text-align:center}
.panel#loginBox .small{max-width:620px;margin-left:auto;margin-right:auto}
.register-request-wrap{display:flex;justify-content:center;margin-top:10px}
.btn-small{padding:6px 10px;font-size:12px}
.panel#loginBox #registerRequestForm{max-width:620px;margin:12px auto 0;padding-top:10px;border-top:1px dashed #2b5284}
.panel#loginBox #registerRequestForm textarea{min-height:84px}
.phone-whatsapp-row{
  display:grid;
  grid-template-columns:minmax(220px, 380px) auto;
  gap:10px;
  align-items:end;
}
.phone-whatsapp-row .phone-field{margin:0}
.whatsapp-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 2px;
  color:inherit;
  font-weight:600;
  cursor:pointer;
}
.whatsapp-inline span{
  display:inline-block;
  color:#dbeafe;
  font-size:14px;
  line-height:1.2;
}
.whatsapp-inline input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.tab-btn{border:1px solid #204777;background:#0b2a50;color:#d7e8ff;border-radius:11px;padding:9px 14px;cursor:pointer;font-weight:700}
.tab-btn.active{background:#0a78ff;color:#fff;border-color:#0a78ff;box-shadow:0 12px 26px rgba(10,120,255,.35)}
.support-head{margin-bottom:18px}
.hidden-status-note{
  margin:-6px 0 12px;
  border:1px solid #b8d7f6;
  background:#eaf4ff;
  color:#244a75;
  border-radius:12px;
  padding:8px 12px;
  font-size:13px;
  line-height:1.4;
}
.filters-inline-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
}
.filters-inline-wrap .status-inline{
  background:rgba(11,47,88,.4);
}
.avatar-sm{width:44px;height:44px;border-radius:999px;border:2px solid #2b5a91;object-fit:cover;background:#0b1f3a}
.top-user-name{
  color:#eaf5ff;
  font-weight:700;
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.user-menu-wrap{display:flex;align-items:center;gap:8px}
.muted-text{opacity:.85}
.surface{border:1px solid #1f3f71;border-radius:16px;background:linear-gradient(180deg,#0d2342 0%,#0a1e39 100%);overflow:hidden}
.surface-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #204377}
.surface-head h3{margin:0;font-size:16px}
.status-filters{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid #214979;background:#0a2343}
.status-inline{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:5px 8px;border:1px solid #234a77;border-radius:999px;background:rgba(11,47,88,.55)}
.status-inline .status-label{font-size:12px;opacity:.86;white-space:nowrap}
.status-inline .status-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.status-chip-btn{position:relative;display:inline-flex;align-items:center;padding:0;border:0;background:transparent;cursor:pointer}
.status-chip-btn .badge-status{transition:filter .15s ease,opacity .15s ease,transform .12s ease}
.status-chip-btn:hover .badge-status{transform:translateY(-1px)}
.status-chip-btn.is-off .badge-status{opacity:.52;filter:saturate(.45)}
.status-chip-btn.is-off::after{content:"";position:absolute;left:6px;right:6px;top:50%;border-top:2px solid #ef4444;transform:rotate(-6deg)}
.table-wrap{overflow:auto;max-height:420px}
.ticket-table{width:100%;border-collapse:separate;border-spacing:0;min-width:1080px}
.ticket-table th{position:sticky;top:0;z-index:1;text-align:left;font-size:11px;text-transform:uppercase;color:#89a9d8;background:#0a2a52;padding:8px 10px;border-bottom:1px solid #214979;white-space:nowrap}
.ticket-table th{
  background:linear-gradient(180deg,#1978c2 0%,#145f9d 100%);
  color:#eff7ff;
  border-bottom-color:#2c80c2;
}
.ticket-table td{padding:9px 10px;border-bottom:1px solid #163662;vertical-align:middle;white-space:nowrap}
.ticket-row{cursor:pointer;transition:.18s background}
.ticket-row:hover{background:#0f2c54}
.ticket-row.active{background:#0f3768;box-shadow:inset 3px 0 0 #0a78ff}
.ticket-title{font-weight:700;color:#f0f6ff;font-size:14px;white-space:nowrap}
.ticket-sub{color:#9eb8de;font-size:12px;margin-top:3px}
.detail-wide{margin-top:12px;border:1px solid #2f5a90;border-radius:16px;background:radial-gradient(circle at 0 0,rgba(12,117,255,.18) 0,rgba(10,33,64,0) 48%),#081a33;padding:14px;min-height:260px}
.detail-wide.detail-enter{margin-top:0;min-height:72vh}
.detail-empty{color:#9bb8e0;border:1px dashed #2d598f;border-radius:12px;padding:18px;background:#0b2b52}
.detail-shell{display:grid;gap:12px}
.detail-head-compact{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  border:1px solid #295486;
  border-radius:12px;
  padding:10px;
  background:linear-gradient(180deg,#0b2f59 0%,#0a274c 100%);
}
.detail-head-main{display:grid;gap:6px}
.detail-topline{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}
.detail-id-pill{font-size:14px;padding:5px 10px}
.detail-title{
  margin:0;
  font-size:30px;
  line-height:1.05;
  color:#f2f7ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:220px;
}
.detail-dates{
  gap:6px;
  flex-wrap:nowrap;
  margin-left:auto;
  justify-content:flex-end;
}
.detail-section{
  border:1px solid #244b7b;
  border-radius:12px;
  padding:10px;
  background:#092645;
}
.detail-section h4{
  margin:0 0 8px 0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#9dc0ea;
}
.detail-description{margin:0;color:#e9f2ff;line-height:1.45}
.detail-reply-top{
  display:flex;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.detail-reply-top .btn-soft{
  padding:8px 12px;
  border-radius:9px;
}
.timeline{
  display:grid;
  gap:12px;
  max-height:none;
  overflow:visible;
  padding-right:0;
  scroll-behavior:auto;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(88,140,201,.18),rgba(88,140,201,.55),rgba(88,140,201,.18));
  border-radius:999px;
}
.timeline::-webkit-scrollbar{width:10px}
.timeline::-webkit-scrollbar-track{background:#071a33;border-radius:999px}
.timeline::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2f6cb1,#1e4d85);border-radius:999px;border:2px solid #071a33}
.timeline::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3b7ac4,#265c9a)}
.msg-row{display:flex;width:calc(50% - 14px);position:relative}
.msg-row.mine{justify-content:flex-end;padding-right:14px}
.msg-row.other{justify-content:flex-start;margin-left:50%;padding-left:14px}
.msg-row::before{
  content:"";
  position:absolute;
  top:20px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#8bb5e8;
  border:2px solid #e6f0fd;
  box-shadow:0 0 0 4px rgba(139,181,232,.25);
}
.msg-row.mine::before{right:-20px}
.msg-row.other::before{left:-20px}
.msg-gap{
  position:absolute;
  top:16px;
  font-size:11px;
  line-height:1.2;
  color:#6f85a3;
  white-space:nowrap;
  pointer-events:none;
}
.msg-gap.opposite-right{right:-210px;text-align:left}
.msg-gap.opposite-left{left:-210px;text-align:right}
.msg-wrap{display:block}
.msg-avatar-btn{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  border-radius:999px;
}
.msg-avatar-btn:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:2px;
}
.msg-avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid #2f5f9a;
  object-fit:cover;
  background:#0b1f3a;
  flex:0 0 auto;
}
.msg{
  max-width:100%;
  min-width:0;
  border:1px solid #2a4f80;
  border-radius:14px;
  padding:12px;
  background:#0a223f;
}
.msg.role-cliente{background:#0d2d25;border-color:#2a6152}
.msg.role-tecnico{background:#102c4a;border-color:#2f5f97}
.msg.role-admin{background:#3b2a1d;border-color:#8a6a4b}
.msg.role-system{background:#1f2937;border-color:#4b5563}
.msg-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.msg-meta{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;width:100%}
.msg-meta-main{display:grid;gap:1px}
.msg-author{font-size:17px;line-height:1.1;font-weight:700;color:#eaf2ff}
.msg-time{color:#a8c4ea;display:block;margin:0;font-size:12px}
.msg-text{color:inherit;white-space:pre-wrap}
.msg-role{
  display:inline-block;
  padding:1px 6px;
  border-radius:999px;
  font-size:11px;
  border:1px solid #3b6aa1;
  color:#dceaff;
}
.msg-role.role-cliente{background:#166534;border-color:#22c55e;color:#ecfdf3}
.msg-role.role-tecnico{background:#1d4ed8;border-color:#3b82f6;color:#eff6ff}
.msg-role.role-admin{background:#7c2d12;border-color:#fb923c;color:#fff7ed}
.msg-role.role-system{background:#374151;border-color:#6b7280;color:#f3f4f6}
.actions-box{border:1px solid #2d558a;border-radius:12px;background:#0a2a4f;padding:12px;margin-top:12px}
.actions-box textarea{width:100%;min-height:180px;resize:vertical}
.action-title{margin:0 0 8px 0;font-size:14px;color:#cfe3ff}
.survey-box{border:1px solid #3568a6;background:#0b315e;border-radius:12px;padding:12px}
.action-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn-soft{border:1px solid #2e5e99;background:#0b2f59;color:#e8f1ff;border-radius:10px;padding:9px 12px;cursor:pointer;font-weight:700}
.btn-soft.primary{background:#0a78ff;border-color:#0a78ff;color:#fff}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{border:1px solid #244a7d;border-radius:999px;padding:4px 10px;font-size:12px;color:#c5dbff;background:#0b2a4f}
.badge-status{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid transparent;font-weight:700}
.badge-aberto{background:#d1fae5;color:#065f46;border-color:#86efac}
.badge-em_atendimento{background:#2563eb;color:#fff;border-color:#1d4ed8}
.badge-pendente_cliente{background:#7c3aed;color:#fff;border-color:#6d28d9}
.badge-planejado{background:#f97316;color:#fff;border-color:#ea580c}
.badge-solucionado{background:#16a34a;color:#fff;border-color:#15803d}
.badge-fechado{background:#111827;color:#fff;border-color:#030712}
.form .field select,.form .field input,.form .field textarea{width:100%}
.star-wrap{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.star-wrap input{display:none}
.star-wrap label{cursor:pointer;font-size:22px;color:#bbb}
.star-wrap label:before{content:"\2605"!important}
.star-wrap input:checked~label,.star-wrap label:hover,.star-wrap label:hover~label{color:#f5a524}
.paste-hint{font-size:12px;color:var(--muted);margin-top:4px}
.paste-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:8px}
.paste-item{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.paste-item img{width:100%;height:90px;object-fit:cover;display:block}
.paste-item.file{
  min-height:90px;
  padding:10px 8px 8px;
  display:grid;
  align-content:start;
  gap:6px;
  background:#0b2b53;
}
.paste-item .file-ext{
  display:inline-block;
  width:max-content;
  border:1px solid #3b6aa1;
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  color:#dbe9ff;
  font-weight:700;
}
.paste-item .file-name{
  font-size:12px;
  color:#d2e4ff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.paste-item button{position:absolute;top:6px;right:6px;border:0;border-radius:999px;width:24px;height:24px;cursor:pointer;background:rgba(17,24,39,.85);color:#fff}
.msg-attachments{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:8px}
.msg-attachments a,.msg-attachments button{border:1px solid var(--line);border-radius:10px;overflow:hidden;display:block;background:#0b2f58;padding:0;cursor:pointer}
.msg-attachments img{width:100%;height:110px;object-fit:cover;display:block}
.attachment-open.is-file{
  width:100%;
  min-height:110px;
  padding:10px;
  display:grid;
  align-content:start;
  gap:8px;
  text-align:left;
}
.attachment-open.is-file .file-ext{
  display:inline-block;
  width:max-content;
  border:1px solid #3b6aa1;
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  color:#dbe9ff;
  font-weight:700;
}
.attachment-open.is-file .file-name{
  font-size:12px;
  color:#d2e4ff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-grid{display:grid;grid-template-columns:320px 1fr;gap:12px}
.profile-card{border:1px solid #2b4f82;border-radius:12px;padding:12px;background:#0b2b52}
.profile-card input[type="file"]{max-width:100%}
.avatar{width:96px;height:96px;border-radius:50%;border:2px solid #2f5f9a;object-fit:cover;display:block;background:#0b1f3a}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.admin-grid .full{grid-column:1 / -1}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{border-bottom:1px solid #214979;padding:8px;text-align:left;font-size:13px}
.back-btn{border:1px solid #3f7dca;background:#0f4e90;color:#fff;border-radius:10px;padding:11px 16px;cursor:pointer;font-weight:800;box-shadow:0 10px 24px rgba(26,114,224,.28)}
.open-box{border:1px solid #2b5488;border-radius:14px;padding:14px;background:linear-gradient(180deg,#0b2b52 0%,#0a2445 100%)}
.user-menu-wrap{position:relative}
.user-menu-btn{border:1px solid #2e5e99;background:#0b2f59;border-radius:999px;padding:2px;cursor:pointer}
.user-menu{position:absolute;right:0;top:50px;min-width:180px;border:1px solid #2e5e99;border-radius:10px;background:#0a284d;display:grid;z-index:20;overflow:hidden}
.user-menu button{background:transparent;border:0;color:#e7f0ff;padding:10px 12px;text-align:left;cursor:pointer}
.user-menu button:hover{background:#0f3a6d}
.image-viewer{position:fixed;inset:0;background:rgba(2,8,20,.92);display:grid;place-items:center;z-index:99}
.image-viewer img{max-width:min(96vw,1400px);max-height:90vh;border:1px solid #2a5f9a;border-radius:10px}
.file-viewer{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(2,8,20,.92);
  padding:22px;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:10px;
}
.file-viewer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.file-viewer-head #fileViewerZoomWrap .btn-soft{
  padding:6px 10px;
  min-width:40px;
}
.file-viewer-head #fileViewerZoomLabel{
  min-width:44px;
  text-align:center;
  font-weight:700;
  color:#334155;
}
.file-viewer-body{
  border:1px solid #2b5e98;
  border-radius:12px;
  background:#071a31;
  overflow:auto;
  min-height:60vh;
}
.file-viewer-frame{
  width:100%;
  min-height:72vh;
  border:0;
  background:#fff;
}
.file-viewer-text{
  margin:0;
  padding:14px;
  white-space:pre-wrap;
  font-family:Consolas,"Courier New",monospace;
  color:#d5e7ff;
  font-size:13px;
  line-height:1.5;
}
.xml-viewer .xml-decl{color:#5b21b6}
.xml-viewer .xml-comment{color:#64748b}
.xml-viewer .xml-tag{color:#0f4ea1;font-weight:700}
.xml-viewer .xml-tag-selectable{cursor:pointer}
.xml-viewer .xml-tag-selectable:hover{text-decoration:underline;text-decoration-thickness:1px}
.xml-viewer .xml-attr{color:#b91c1c;font-weight:700}
.xml-viewer .xml-value{color:#9a3412}
.file-viewer-download{
  padding:20px;
  display:grid;
  gap:10px;
  justify-items:start;
}
.tutorial-viewer{
  position:fixed;
  inset:0;
  z-index:101;
  background:rgba(2,8,20,.92);
  padding:22px;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:10px;
}
.tutorial-viewer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tutorial-viewer-head h3{
  margin:0;
  font-size:20px;
}
.tutorial-viewer-body{
  border:1px solid #2b5e98;
  border-radius:12px;
  background:#071a31;
  overflow:auto;
  padding:14px;
}
.tutorial-content{
  display:grid;
  gap:12px;
}
.tutorial-panel{
  border:1px solid #295486;
  border-radius:12px;
  padding:12px;
  background:linear-gradient(180deg,#0b2f59 0%,#0a274c 100%);
}
.tutorial-panel h4{
  margin:0 0 8px 0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#9dc0ea;
}
.tutorial-panel p{margin:0;line-height:1.55}
.tutorial-panel ol,.tutorial-panel ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
}
.guided-tour{
  position:fixed;
  inset:0;
  z-index:102;
  background:rgba(2,8,20,.72);
  display:block;
  padding:0;
}
.guided-tour-panel{
  position:fixed;
  width:min(520px, calc(100vw - 24px));
  border:1px solid #2b5e98;
  border-radius:14px;
  background:linear-gradient(180deg,#0b2f59 0%,#0a274c 100%);
  padding:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.guided-tour-meta{font-size:12px;color:#9dc0ea;margin-bottom:6px}
.guided-tour-panel h4{margin:0 0 8px 0;font-size:18px}
.guided-tour-panel p{margin:0;line-height:1.5;color:#dce8f8}
.guided-tour-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.tour-focus{
  position:relative;
  z-index:103;
  outline:2px solid #60a5fa;
  outline-offset:4px;
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(2,8,20,.28);
}
.support-footer{margin-top:18px;padding:20px 12px 28px;border-top:1px solid #1f3f71;display:grid;justify-items:center;gap:6px;color:#b9cfee}
.support-footer-logo{width:124px;height:auto;display:block;opacity:.95}
.table-wrap{scrollbar-width:thin;scrollbar-color:#2c639f #081c36}
.table-wrap::-webkit-scrollbar{height:10px;width:10px}
.table-wrap::-webkit-scrollbar-track{background:#081c36;border-radius:999px}
.table-wrap::-webkit-scrollbar-thumb{background:#2c639f;border-radius:999px;border:2px solid #081c36}
.panel#appBox,
.open-box,
.surface,
.detail-wide,
.profile-card,
.actions-box,
.survey-box{background:#ffffff;color:#0f172a;border-color:#d7e2f2}
.sys-sub,
.muted-text,
.ticket-sub,
.msg small,
.pill,
.small{color:#475569}
.surface-head{background:#f8fbff;border-bottom-color:#dde7f6}
.surface-head h3{color:#0f172a}
.ticket-table th{background:#f3f8ff;color:#35598a;border-bottom-color:#d9e5f7}
.ticket-table td{border-bottom-color:#e3ecfa;color:#0f172a}
.ticket-row:hover{background:#f5f9ff}
.ticket-row.active{background:#eaf3ff;box-shadow:inset 3px 0 0 #0a78ff}
.status-inline{background:#f5f9ff;border-color:#cfdef4}
.filters-inline-wrap .status-inline{background:#f8fbff}
.status-inline .status-label{color:#486187}
.msg{background:#f7fbff;border-color:#d4e4fb;color:#0f172a}
.msg.role-cliente{background:#f2faf6;border-color:#b8decc}
.msg.role-tecnico{background:#f1f6fd;border-color:#b7cdea}
.msg.role-admin{background:#fbf6ef;border-color:#d8c5ad}
.msg.role-system{background:#f6f7f9;border-color:#d6dbe3}
.msg-role.role-cliente{background:#dcfce7;border-color:#86efac;color:#14532d}
.msg-role.role-tecnico{background:#dbeafe;border-color:#93c5fd;color:#1e3a8a}
.msg-role.role-admin{background:#ffedd5;border-color:#fdba74;color:#7c2d12}
.msg-role.role-system{background:#e5e7eb;border-color:#9ca3af;color:#1f2937}
.attachment-open.is-file,
.paste-item.file{background:#f4f8ff}
.attachment-open.is-file .file-name,
.paste-item .file-name{color:#314b70}
.attachment-open.is-file .file-ext,
.paste-item .file-ext{color:#2f4f7c;border-color:#adc7e8}
.detail-empty{background:#f8fbff;color:#486187;border-color:#bfd4f2}
.detail-head-compact{background:linear-gradient(180deg,#f4f8ff 0%,#eef5ff 100%);border-color:#c9dbf5}
.detail-title{color:#0f172a}
.detail-section{background:#f7fbff;border-color:#cfe1f8}
.detail-section h4{color:#456891}
.detail-description{color:#0f172a}
.btn-soft{background:#eef5ff;border-color:#c9dbf5;color:#10315a}
.btn-soft.primary{background:#0a78ff;border-color:#0a78ff;color:#fff}
.user-menu{background:#ffffff;border-color:#d4e2f5}
.user-menu button{color:#0f172a}
.user-menu button:hover{background:#f2f7ff}
.support-footer{border-top-color:#d9e6f8;color:#4b5e7b}
.file-viewer-body{background:#ffffff;border-color:#cfe0f6}
.file-viewer-text{color:#0f172a}
.tutorial-viewer-body{background:#ffffff;border-color:#cfe0f6}
.tutorial-panel{background:linear-gradient(180deg,#f4f8ff 0%,#eef5ff 100%);border-color:#c9dbf5}
.tutorial-panel h4{color:#456891}
.guided-tour{background:rgba(15,23,42,.45)}
.guided-tour-panel{background:linear-gradient(180deg,#f4f8ff 0%,#eef5ff 100%);border-color:#c9dbf5}
.guided-tour-meta{color:#456891}
.guided-tour-panel p{color:#334155}
.tour-focus{outline-color:#2563eb;box-shadow:0 0 0 9999px rgba(148,163,184,.28)}
.survey-modal{
  position:fixed;
  inset:0;
  z-index:110;
  display:grid;
  place-items:center;
  background:rgba(15,23,42,.52);
  padding:14px;
}
.survey-modal-panel{
  width:min(680px, 100%);
  border:1px solid #c6daf6;
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 26px 56px rgba(15,23,42,.26);
  padding:16px;
}
.survey-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.survey-modal-head h3{
  margin:0;
  color:#0f172a;
}
.survey-stars{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:6px;
}
.survey-stars input{display:none}
.survey-stars label{
  cursor:pointer;
  font-size:42px;
  line-height:1;
  color:#b8c3d5;
  text-shadow:0 1px 0 rgba(15,23,42,.12);
}
.survey-stars label:before{content:"\2605"!important}
.survey-stars input:checked~label,
.survey-stars label:hover,
.survey-stars label:hover~label{
  color:#f59e0b;
}
.survey-thanks{
  margin-top:10px;
  border:1px solid #bbf7d0;
  background:#ecfdf3;
  color:#14532d;
  border-radius:10px;
  padding:10px 12px;
  font-weight:600;
}
.user-profile-modal{
  position:fixed;
  inset:0;
  z-index:111;
  display:grid;
  place-items:center;
  background:rgba(15,23,42,.52);
  padding:14px;
}
.user-profile-panel{
  width:min(640px, 100%);
  border:1px solid #c6daf6;
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 26px 56px rgba(15,23,42,.26);
  padding:16px;
}
.user-profile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.user-profile-head h3{margin:0;color:#0f172a}
.user-profile-body{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:14px;
  align-items:start;
}
.user-profile-avatar{
  width:130px;
  height:130px;
  border-radius:14px;
  border:1px solid #bfd5f3;
  object-fit:cover;
  background:#f5f9ff;
}
.user-profile-fields{display:grid;gap:6px}
.user-profile-name{
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  color:#0f172a;
  margin-bottom:2px;
}
.timeline{scrollbar-color:#8ab2e3 #e8f1fc}
.timeline::-webkit-scrollbar-track{background:#e8f1fc}
.timeline::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7ca7dc,#6592ca);border-color:#e8f1fc}
.table-wrap{scrollbar-color:#8ab2e3 #e8f1fc}
.table-wrap::-webkit-scrollbar-track{background:#e8f1fc}
.table-wrap::-webkit-scrollbar-thumb{background:#7ea9df;border-color:#e8f1fc}
@media (max-width:900px){
  .profile-grid,.admin-grid{grid-template-columns:1fr}
  .timeline::before{left:18px;transform:none}
  .msg-row{width:100%;margin-left:0!important;padding:0 0 0 34px!important}
  .msg-row.mine,.msg-row.other{justify-content:flex-start}
  .msg-row::before{left:13px!important;right:auto!important}
  .msg-gap{
    position:static;
    margin:0 0 4px;
    font-size:11px;
    color:#6b7f99;
    white-space:normal;
  }
  .msg-gap.opposite-left,.msg-gap.opposite-right{text-align:left}
  .msg{max-width:100%;min-width:0}
}
@media (max-width:760px){
  .msg{min-width:100%;max-width:100%}
  .detail-head-compact{grid-template-columns:1fr;gap:8px}
  .detail-topline{flex-wrap:wrap}
  .detail-title{font-size:22px;white-space:normal}
  .detail-dates{flex-wrap:wrap;margin-left:0;justify-content:flex-start}
  .login-logo{width:156px}
  .login-name{font-size:28px}
  .panel#loginBox{
    width:min(100%, 100%);
    padding:22px 16px;
    margin:8px auto 0;
  }
  .page-head{
    min-height:88px;
    padding:10px 12px;
  }
  .page-head-center{
    gap:8px;
  }
  .page-head-logo{width:96px}
  .page-head-title{font-size:24px}
  .page-head-sub{font-size:12px}
  .phone-whatsapp-row{
    grid-template-columns:1fr;
    gap:6px;
    align-items:start;
  }
  .whatsapp-inline{
    height:auto;
    padding:2px 0 0;
  }
  .auth-mode .panel#loginBox{margin:8px auto 0}
  .support-head{margin-bottom:14px}
  .support-head .inline{width:100%}
  .filters-inline-wrap{width:100%}
  .status-inline{width:100%;justify-content:flex-start}
  .table-wrap{max-height:none;overflow:visible}
  .ticket-table{min-width:0;border-spacing:0 10px}
  .ticket-table thead{display:none}
  .ticket-table tbody,.ticket-table tr,.ticket-table td{display:block;width:100%}
  .ticket-row{
    border:1px solid #c9dbf5;
    border-radius:12px;
    overflow:hidden;
    background:#ffffff;
    box-shadow:0 8px 18px rgba(15,23,42,.10);
  }
  .ticket-table td{
    border-bottom:1px solid #e3ecfa;
    padding:9px 12px;
    color:#0f172a;
  }
  .ticket-table td:last-child{border-bottom:0}
  .ticket-table td::before{
    content:attr(data-label);
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#486187;
    margin-bottom:4px;
    font-weight:700;
  }
  .ticket-row.active{box-shadow:inset 3px 0 0 #0a78ff,0 8px 18px rgba(15,23,42,.14)}
  .file-viewer{
    padding:12px;
  }
  .guided-tour{
    padding:0;
  }
  .tutorial-viewer{
    padding:12px;
  }
  .tutorial-viewer-head{
    flex-direction:column;
    align-items:flex-start;
  }
.file-viewer-frame{
    min-height:68vh;
  }
  .user-profile-body{
    grid-template-columns:1fr;
    justify-items:start;
  }
  .user-profile-avatar{
    width:110px;
    height:110px;
  }
  .user-profile-name{
    font-size:24px;
  }
}

/* Login visual upgrade */
body.auth-mode .panel#loginBox{
  border:1px solid #2f7fc3;
  background:
    radial-gradient(circle at 12% -8%, rgba(95,196,255,.26), transparent 42%),
    radial-gradient(circle at 88% 0%, rgba(34,197,94,.16), transparent 34%),
    linear-gradient(180deg,#0d3360 0%,#0a274a 100%);
  box-shadow:0 22px 42px rgba(15,53,96,.32);
}
body.auth-mode .panel#loginBox h2{
  color:#eef6ff;
  font-size:44px;
  line-height:1;
  margin:10px 0 12px;
}
body.auth-mode .panel#loginBox .field label{
  color:#b9d4f2;
  font-weight:600;
}
body.auth-mode .panel#loginBox input,
body.auth-mode .panel#loginBox textarea{
  background:rgba(6,26,52,.68);
  border:1px solid rgba(121,172,226,.62);
  color:#f1f7ff;
}
body.auth-mode .panel#loginBox input::placeholder,
body.auth-mode .panel#loginBox textarea::placeholder{
  color:#8fb0d4;
}
body.auth-mode .panel#loginBox input:focus,
body.auth-mode .panel#loginBox textarea:focus{
  border-color:#6fc6ff;
  box-shadow:0 0 0 3px rgba(68,167,233,.22);
}
body.auth-mode .panel#loginBox .btn.primary{
  background:linear-gradient(90deg,#2a95de,#4dc2ff);
  border-color:#47b4f2;
  color:#ffffff;
}
body.auth-mode .panel#loginBox .btn-soft{
  background:rgba(225,240,255,.12);
  color:#deeeff;
  border-color:rgba(121,172,226,.56);
}
body.auth-mode .login-brand{
  background:linear-gradient(180deg,rgba(8,36,68,.86) 0%,rgba(8,31,58,.72) 100%);
  border-color:rgba(120,173,227,.58);
}
body.auth-mode .login-logo{
  filter:brightness(1.24) contrast(1.13) saturate(1.08) drop-shadow(0 8px 18px rgba(0,0,0,.38));
}
body.auth-mode .login-name{
  color:#eef6ff;
  text-shadow:0 6px 20px rgba(8,30,58,.4);
}

/* Final readability lock */
#appBox,
#appBox .surface,
#appBox .detail-wide,
#appBox .detail-head-compact,
#appBox .detail-section,
#appBox .actions-box,
#appBox .open-box,
#appBox .survey-box,
#appBox .profile-card{
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:#d7e2f2 !important;
}
#appBox .surface-head{
  background:#f8fbff !important;
  border-bottom-color:#dde7f6 !important;
}
#appBox .surface-head h3,
#appBox h2,
#appBox h3,
#appBox h4{
  color:#0f172a !important;
}
#appBox .ticket-table th{
  background:linear-gradient(180deg,#1978c2 0%,#145f9d 100%) !important;
  color:#eff7ff !important;
  border-bottom-color:#2c80c2 !important;
}
#appBox .ticket-table td,
#appBox .ticket-title,
#appBox .detail-title,
#appBox .detail-description,
#appBox .file-viewer-text,
#appBox .tutorial-panel p{
  color:#0f172a !important;
}
#appBox .ticket-table td{border-bottom-color:#e3ecfa !important;}
#appBox .ticket-sub,
#appBox .small,
#appBox .muted-text,
#appBox .status-inline .status-label,
#appBox .detail-section h4,
#appBox .msg small{
  color:#475569 !important;
}
#appBox .ticket-row:hover{background:#f5f9ff !important;}
#appBox .ticket-row.active{background:#eaf3ff !important;box-shadow:inset 3px 0 0 #0a78ff !important;}

#appBox .pill{
  background:#eef5ff !important;
  color:#22466f !important;
  border-color:#c9dbf5 !important;
}
#appBox .btn-soft{
  background:#eef5ff !important;
  border-color:#c9dbf5 !important;
  color:#10315a !important;
}
#appBox .btn-soft.primary{
  background:#0a78ff !important;
  border-color:#0a78ff !important;
  color:#fff !important;
}

#appBox .msg{background:#f7fbff !important;border-color:#d4e4fb !important;color:#0f172a !important;}
#appBox .msg.role-cliente{background:#f2faf6 !important;border-color:#b8decc !important;}
#appBox .msg.role-tecnico{background:#f1f6fd !important;border-color:#b7cdea !important;}
#appBox .msg.role-admin{background:#fbf6ef !important;border-color:#d8c5ad !important;}
#appBox .msg.role-system{background:#f6f7f9 !important;border-color:#d6dbe3 !important;}
#appBox .msg-author{color:#0f172a !important;}
#appBox .msg-time{color:#64748b !important;}
#appBox .msg-avatar{border-color:#a9c3e7 !important;}
#appBox .msg-gap{color:#6b7f99 !important;}

#appBox .survey-modal-panel,
#appBox .survey-modal-head h3{
  color:#0f172a !important;
}
#appBox .whatsapp-inline span{
  color:#0f172a !important;
}
#appBox .user-profile-panel,
#appBox .user-profile-head h3,
#appBox .user-profile-name{
  color:#0f172a !important;
}

#appBox .detail-empty{
  background:#f8fbff !important;
  color:#486187 !important;
  border-color:#bfd4f2 !important;
}