/* Visual de produção para as telas de abertura e detalhes do ticket. */
:root{
    --brand:#25333d;
    --ink:#18252e;
    --ink-2:#303f48;
    --body:#53616a;
    --muted:#78858d;
    --line:#dfe4e6;
    --card:#fff;
    --soft:#f7f8f8;
    --radius:12px;
}
*{box-sizing:border-box}
body{
    min-height:100vh;
    margin:0;
    background:#f6f7f7;
    color:var(--body);
    font-family:"Inter","Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
a{color:#1d4056}
a:hover{color:#132e40}
.ticket-header{
    position:relative;
    z-index:10;
    background:#fff;
    border-bottom:1px solid #e6e9ea;
}
.ticket-header__inner{
    max-width:1100px;
    min-height:72px;
    margin:0 auto;
    padding:15px 28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
}
.ticket-brand{display:flex;align-items:center;gap:14px;min-width:0;text-decoration:none!important}
[hidden]{display:none!important}
.ticket-brand__logo{display:block;max-width:150px;max-height:38px;width:auto;height:auto;object-fit:contain;object-position:left center}
.ticket-brand__name{
    color:#162630;
    font-size:19px;
    font-weight:700;
    letter-spacing:-.035em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ticket-brand__section{
    padding-left:14px;
    border-left:1px solid #d7dcde;
    color:#718088;
    font-size:12px;
    font-weight:600;
    letter-spacing:.03em;
    white-space:nowrap;
}
.ticket-nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ticket-nav a{
    color:#45535c;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
}
.ticket-nav a:hover{color:#162630;text-decoration:underline}
.ticket-nav__primary{
    border:1px solid #dce2e4;
    border-radius:8px;
    padding:10px 14px;
    background:#fff;
}
.ticket-tag{
    color:#677780;
    background:#f2f4f5;
    border:1px solid #e4e8e9;
    border-radius:5px;
    padding:5px 8px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.tk-shell{max-width:1100px;padding:54px 28px 72px}
.tk-hero{margin-bottom:26px}
.tk-hero__ic{display:none}
.tk-hero h1{
    color:#17252e;
    font-size:34px;
    font-weight:700;
    letter-spacing:-.045em;
    line-height:1.15;
}
.tk-hero p{margin-top:8px;color:#6b7880;font-size:15px;line-height:1.5}
.tk-card,.tk-thead,.tk-rating-card{
    background:#fff;
    border:1px solid #e1e5e6;
    border-radius:12px;
    box-shadow:0 8px 30px rgba(25,38,48,.035);
}
.tk-card__band,.tk-rating-card__band{display:none}
.tk-card__body{padding:32px 36px}
.tk-sec{border-top:1px solid #e8ebec;padding:28px 0}
.tk-sec:first-of-type{padding-top:2px}
.tk-sec__label{
    color:#58666e;
    font-size:11px;
    letter-spacing:.10em;
    font-weight:700;
    margin-bottom:20px;
}
.tk-sec__label .n{
    width:24px;
    height:24px;
    border:1px solid #dbe1e3;
    border-radius:50%;
    background:#fff;
    color:#4d5d66;
    font-size:11px;
}
.tk-grid2{gap:20px}
.tk-field{margin-bottom:20px}
.tk-label{
    color:#394750;
    font-size:12px;
    letter-spacing:0;
    font-weight:650;
    text-transform:none;
    margin-bottom:9px;
}
.tk-input,textarea.tk-input,select.tk-input,.tk-rating-comment{
    min-height:48px;
    border:1px solid #d6dddf;
    border-radius:8px;
    background:#fff;
    color:#1d2e38;
    font-family:inherit;
    font-size:14px;
    box-shadow:none;
}
.tk-input:focus,textarea.tk-input:focus,select.tk-input:focus,.tk-rating-comment:focus{
    border-color:#72848f;
    box-shadow:0 0 0 3px rgba(79,103,117,.11);
}
.tk-input::placeholder,textarea.tk-input::placeholder{color:#9ba5aa}
textarea.tk-input{min-height:155px;line-height:1.65}
#pin{width:218px;letter-spacing:.28em;font-variant-numeric:tabular-nums}
.tk-help{
    width:38px;
    height:38px;
    color:#52636c;
    background:#fff;
    border:1px solid #d6dddf;
    border-radius:8px;
    box-shadow:none;
}
.tk-help:hover{background:#f3f5f5;border-color:#bbc7cb}
.tk-btn{
    min-height:44px;
    border:1px solid #25333d;
    border-radius:8px;
    background:#25333d;
    color:#fff;
    box-shadow:none;
    font-family:inherit;
    font-size:13px;
    font-weight:650;
    letter-spacing:0;
    padding:11px 18px;
}
.tk-btn:hover:not(:disabled){background:#354650;filter:none;transform:none}
.tk-btn:disabled{opacity:.48}
.tk-btn--ghost{
    color:#3f4e57;
    border:1px solid #d9e0e2;
    background:#fff;
    box-shadow:none;
}
.tk-btn--ghost:hover:not(:disabled){background:#f7f8f8}
.tk-alert{
    border-radius:8px;
    font-size:13px;
    font-weight:550;
    line-height:1.55;
}
.tk-alert--err{color:#8e3840;background:#fff8f8;border-color:#edd7d9}
.tk-alert--warn{color:#765c26;background:#fdfbf5;border-color:#e9dfc5}
.tk-alert--info{color:#365464;background:#f6f9fa;border-color:#dce7eb}
#pin_invalido{margin-top:16px}
#pin_invalido .tk-alert{
    padding:15px 18px;
    border:1px solid #e7d4d6;
    box-shadow:none;
    font-size:14px;
}
#pin_invalido .tk-alert__link{color:#71323a;font-weight:700}
.tk-drop{
    border:1px dashed #bfc9cd;
    border-radius:8px;
    background:#fafbfb;
    padding:24px;
}
.tk-drop:hover{background:#f5f7f7;border-color:#9aabb2}
.tk-drop__ic{color:#71838d}
.tk-drop__label{color:#384750;font-size:13px;font-weight:650}
.tk-drop small{color:#7d8990}
.tk-check input{
    border-color:#b8c4c9;
    border-radius:5px;
    background:#fff;
}
.tk-check input:checked{background:#2e4553;border-color:#2e4553}
.tk-check label{color:#68757d;font-size:12px;line-height:1.65}
.tk-note{
    background:#fff;
    border:1px solid #e1e5e6;
    border-radius:10px;
    box-shadow:none;
    color:#5d6b74;
    font-size:13px;
    line-height:1.6;
}
.tk-note svg{color:#637984}
.tk-modal__bg{background:rgba(20,31,38,.48)}
.tk-modal__box{border:1px solid #dfe4e6;border-radius:12px}
.tk-modal__head{background:#f8f9f9}
.tk-modal__head h5{font-weight:700}
.tk-thead{padding:28px 32px;align-items:center}
.tk-thead__code{color:#17252e;font-size:24px;font-weight:700;letter-spacing:-.03em}
.tk-thead__meta{color:#78858d;font-size:12px;line-height:1.6}
.tk-thead__subject{color:#46545d;font-size:14px;line-height:1.5}
.tk-thead__right{gap:10px}
.tk-statuslabel{color:#8a969c;font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.08em}
.tk-status{
    border:1px solid #dde4e6;
    border-radius:999px;
    background:#f4f6f7;
    color:#3b505b;
    font-size:11px;
    font-weight:650;
    padding:8px 12px;
}
.tk-status--open{background:#eff4f5;color:#355261;border-color:#d9e5e9}
.tk-status--wait{background:#f8f6ef;color:#776638;border-color:#e9e2cb}
.tk-status--closed{background:#f2f4f4;color:#65737a;border-color:#e1e5e6}
.tk-thread,#respostas-container{gap:14px}
.tk-thread{margin-top:22px}
.tk-msg{
    display:flex;
    flex-direction:column;
    border:1px solid #e1e5e6;
    border-left:1px solid #e1e5e6;
    border-radius:10px;
    background:#fff;
    box-shadow:0 6px 20px rgba(25,38,48,.025);
}
.tk-msg--support{border-left:2px solid #738995}
.tk-msg__rail,.tk-msg--support .tk-msg__rail{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    width:100%;
    background:#fff;
    border-bottom:1px solid #edf0f0;
    padding:15px 20px;
    text-align:left;
}
.tk-msg__avatar{
    width:34px;
    height:34px;
    margin:0 4px 0 0;
    border-radius:50%;
    background:#e7ecee;
    color:#48606b;
    box-shadow:none;
    font-size:11px;
    font-weight:700;
}
.tk-msg__avatar img{background:#fff}
.tk-msg__role,.tk-msg--support .tk-msg__role,.tk-msg--client .tk-msg__role{
    order:3;
    margin:0 0 0 5px;
    border-radius:4px;
    background:#f1f4f5;
    color:#687880;
    padding:4px 7px;
    font-size:10px;
    font-weight:650;
    letter-spacing:0;
    text-transform:none;
}
.tk-msg--support .tk-msg__role{background:#edf3f5;color:#4b6674}
.tk-msg__cap{display:none}
.tk-msg__who{order:1;margin:0;color:#2e3d46;font-size:13px;font-weight:650}
.tk-msg__date{order:2;margin:0 0 0 auto;color:#849098;font-size:11px;line-height:1.4}
.tk-msg__date br{display:block}
.tk-msg__main{width:100%;padding:20px 24px}
.tk-msg__text{color:#3f4d55;font-size:14px;line-height:1.75}
.tk-chip{
    background:#f7f9f9;
    border:1px solid #dce4e6;
    border-radius:6px;
    color:#485f6b;
    font-size:11px;
    font-weight:650;
    padding:7px 10px;
}
.tk-chip:hover{background:#eef3f4}
.tk-rating-card{margin-top:22px}
.tk-rating-card__body{padding:26px 30px}
.tk-rating-card__title{color:#1f2d36;font-size:18px;font-weight:700}
.tk-rating-card__optional{background:#f3f5f5;color:#708087}
.tk-rating-card--saved{background:#fff;border-color:#dfe5e5}
.tk-rating-result-comment{border-left-color:#95a8af;background:#f9fbfb}
.tk-success,.tk-feedback,.tk-feedback--ok,.tk-feedback--err,.tk-feedback--warn{
    background:#fff;
    color:#263640;
    border:1px solid #e1e6e7;
    border-radius:10px;
    box-shadow:none;
}
.tk-success__ic,.tk-feedback__ic{
    background:#edf2f3;
    color:#526b77;
}
.tk-success__ic svg,.tk-feedback__ic svg{stroke:#526b77}
.tk-success__text,.tk-feedback__text{color:#63727a}
.ticket-footer{background:#fff;border-top:1px solid #e5e9ea}
.ticket-footer__inner{
    max-width:1100px;
    margin:0 auto;
    padding:20px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    color:#859097;
    font-size:11px;
    line-height:1.5;
}
.ticket-footer__copy{max-width:calc(100% - 110px)}
.ticket-footer__credit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    margin-left:auto;
    padding:0;
    background:transparent;
    line-height:0;
}
.ticket-footer__credit:hover{opacity:.75}
.ticket-footer__credit img{display:block;width:72px;height:auto;filter:brightness(.75);opacity:.68}
@media (max-width:720px){
    .ticket-header__inner{padding:16px 20px;align-items:flex-start}
    .ticket-brand{flex-wrap:wrap;gap:6px}
    .ticket-brand__section{border:0;padding:0;width:100%}
    .ticket-nav{gap:10px;justify-content:flex-end}
    .ticket-tag{display:none}
    .tk-shell{padding:32px 18px 55px}
    .tk-hero h1{font-size:28px}
    .tk-card__body,.tk-thead,.tk-rating-card__body{padding:24px 20px}
    .tk-msg__rail,.tk-msg--support .tk-msg__rail{padding:13px 16px}
    .tk-msg__date{width:100%;margin:0 0 0 47px}
    .tk-msg__main{padding:18px}
    .ticket-footer__inner{padding:18px 20px;flex-direction:row;align-items:center}
}
@media (max-width:480px){
    .ticket-header__inner{display:block}
    .ticket-nav{justify-content:flex-start;margin-top:14px}
    .tk-grid2{grid-template-columns:1fr}
    .tk-thead__right{align-items:flex-start}
    #pin{max-width:calc(100vw - 120px)}
}