/* =============================================================================
   Tema ICEA do portal do cliente do osTicket
   Identidade do Meu ICEA e do S.A.S. (~/NTICEA/meu-icea/src/app/globals.css):
   vinho institucional, navy no rodape, Inter, neutros claros.

   Carrega DEPOIS do CSS padrao do osTicket (osticket.css e theme.css) e so
   sobrescreve: nenhum arquivo do osTicket e editado. Os templates que mudam
   estao em patches/ (cabecalho, rodape, login e consulta de status).
   ============================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('inter-latin-wght-normal.woff2') format('woff2-variations'),
       url('inter-latin-wght-normal.woff2') format('woff2');
}

:root {
  --brand: #962038;
  --brand-dark: #7a1a2e;
  --brand-darker: #5e1424;
  --brand-bg: #fdf2f4;
  --brand-lighter: #f2d5db;
  --navy: #1a1a2e;
  --navy-light: #2d2d44;
  --accent: #e6a817;

  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface-muted: #f8f9fa;
  --border: #dee2e6;
  --border-light: #e9ecef;
  --text: #212529;
  --text-secondary: #495057;
  --text-muted: #626a72;

  --ok-bg: #e3f4e8;   --ok-text: #17552a;   --ok: #2b9348;
  --warn-bg: #fff3cd; --warn-text: #664d03; --warn: #e6a817;
  --err-bg: #fdecee;  --err-text: #8a1c2b;  --err: #c0392b;
  --info-bg: #e7f1fb; --info-text: #0b4a8b; --info: #2f6fb3;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --container: 1120px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------------------------------------------------------------- base */
html { background: var(--bg); }
body.icea {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.icea,
body.icea input,
body.icea select,
body.icea textarea,
body.icea button,
body.icea table { font-family: var(--font); }

.icea a { color: var(--brand); text-decoration: none; }
.icea a:hover { color: var(--brand-dark); text-decoration: underline; }
.icea :focus-visible { outline: 3px solid rgba(150, 32, 56, .35); outline-offset: 2px; }

.icea h1, .icea h2, .icea h3 { color: var(--text); font-weight: 700; letter-spacing: -.01em; }
.icea h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .5rem; }
.icea h2 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
.icea h3 { font-size: 1.05rem; }
.icea hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }

.icea-pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff !important; padding: .5rem 1rem;
}
.icea-pular:focus { left: 1rem; top: .5rem; }

/* ---------------------------------------------------------------- topo */
.icea-topo {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.icea-topo__barra,
.icea-topo__menu {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.icea-topo__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px;
}
.icea-marca { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.icea-marca:hover { text-decoration: none !important; opacity: .9; }
.icea-marca__logo { height: 36px; width: auto; display: block; }
.icea-marca__texto {
  display: flex; flex-direction: column; line-height: 1.15;
  padding-left: 14px; border-left: 1px solid var(--border);
}
.icea-marca__nome { font-size: 1.05rem; font-weight: 700; color: var(--brand); }
.icea-marca__sub { font-size: .75rem; font-weight: 500; color: var(--text-muted); }

.icea-usuario { display: flex; align-items: center; gap: 14px; font-size: .9rem; flex-wrap: wrap; justify-content: flex-end; }
.icea-usuario__nome { color: var(--text-secondary); font-weight: 500; }
.icea-usuario a:not(.icea-botao) { color: var(--text-secondary); font-weight: 500; }
.icea-usuario a:not(.icea-botao):hover { color: var(--brand); }

/* Menu: pilulas como os links do navbar do portal */
.icea #nav {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0; padding: 0 0 10px; height: auto;
  background: none; border: 0; box-shadow: none; white-space: normal;
}
.icea #nav li { display: block; }
.icea #nav li a {
  display: inline-flex; align-items: center; gap: 8px;
  height: auto; line-height: 1.2; margin: 0;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: none !important;
  color: var(--text-secondary);
  font-size: .9rem; font-weight: 500;
}
.icea #nav li a:hover { color: var(--brand); background-color: var(--brand-bg) !important; text-decoration: none; }
.icea #nav li a.active { color: var(--brand); background-color: var(--brand-bg) !important; font-weight: 600; }
.icea #nav li a::before {
  font-family: 'FontAwesome'; font-weight: normal; font-size: 1rem;
  width: 1.1em; text-align: center; opacity: .85;
}
.icea #nav li a.home::before    { content: "\f015"; }
.icea #nav li a.kb::before      { content: "\f02d"; }
.icea #nav li a.new::before     { content: "\f067"; }
.icea #nav li a.status::before  { content: "\f002"; }
.icea #nav li a.tickets::before { content: "\f0f6"; }

/* ---------------------------------------------------------------- conteudo */
.icea #container {
  width: auto; max-width: var(--container);
  margin: 28px auto 40px; padding: 0 24px;
  background: none; box-shadow: none;
  flex: 1 0 auto; box-sizing: border-box; width: 100%;
}
.icea #content {
  margin: 0; min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px 36px;
}
.icea #content::after { content: ""; display: table; clear: both; }

/* ---------------------------------------------------------------- mensagens */
.icea #msg_error, .icea #msg_notice, .icea #msg_warning, .icea #msg_info,
.icea .error_bar, .icea .warning_bar, .icea .notice_bar, .icea .warning-banner {
  border-radius: var(--radius);
  padding: 12px 16px 12px 44px;
  margin: 0 0 20px;
  font-size: .925rem; font-weight: 500;
  border: 1px solid transparent;
  background-image: none;
  position: relative;
  text-align: left;
}
.icea #msg_error::before, .icea #msg_notice::before, .icea #msg_warning::before, .icea #msg_info::before,
.icea .error_bar::before, .icea .warning_bar::before, .icea .notice_bar::before, .icea .warning-banner::before {
  font-family: 'FontAwesome'; position: absolute; left: 16px; top: 12px; font-weight: normal;
}
.icea #msg_error, .icea .error_bar { background-color: var(--err-bg); color: var(--err-text); border-color: #f5c2c7; }
.icea #msg_error::before, .icea .error_bar::before { content: "\f06a"; color: var(--err); }
.icea #msg_notice, .icea .notice_bar { background-color: var(--ok-bg); color: var(--ok-text); border-color: #b7e0c3; }
.icea #msg_notice::before, .icea .notice_bar::before { content: "\f058"; color: var(--ok); }
.icea #msg_warning, .icea .warning_bar, .icea .warning-banner { background-color: var(--warn-bg); color: var(--warn-text); border-color: #ffe69c; }
.icea #msg_warning::before, .icea .warning_bar::before, .icea .warning-banner::before { content: "\f071"; color: var(--warn); }
.icea #msg_info { background-color: var(--info-bg); color: var(--info-text); border-color: #b6d4f2; }
.icea #msg_info::before { content: "\f05a"; color: var(--info); }
.icea .error { color: var(--err); }
.icea font.error { font-weight: 500; }

/* ---------------------------------------------------------------- botoes */
/* :visited incluso: o tema padrao pinta .blue.button:visited de azul e
   .green.button:visited de verde, e sem ele o botao mudava de cor depois do
   primeiro clique. */
.icea .button, .icea .button:visited, .icea .btn, .icea .action-button,
.icea input[type=submit], .icea input[type=button], .icea input[type=reset],
.icea button:not(.redactor-toolbar button):not([class*=re-]) {
  max-width: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 .9rem/1.2 var(--font);
  padding: 10px 18px; min-height: 40px; box-sizing: border-box;
  border-radius: var(--radius);
  border: 1px solid var(--brand);
  background: var(--brand); color: #fff;
  cursor: pointer; text-shadow: none; box-shadow: none;
  text-decoration: none !important;
  transition: background-color .15s, border-color .15s, color .15s;
}
.icea .button:hover, .icea .btn:hover,
.icea input[type=submit]:hover,
.icea button:not(.redactor-toolbar button):not([class*=re-]):hover {
  background: var(--brand-dark); border-color: var(--brand-dark); color: #fff;
}
/* O osticket.js pinta o texto do submit de vermelho quando o formulario muda
   (style inline). Sobre o vinho some; o legado trocava no JS, aqui e no CSS. */
.icea input[type=submit] { color: #fff !important; }

/* Secundarios: recomecar, cancelar, acoes do ticket */
.icea input[type=reset], .icea input[type=button], .icea .action-button,
.icea .icea-botao--contorno {
  background: var(--surface); color: var(--text-secondary); border-color: var(--border);
}
.icea input[type=reset]:hover, .icea input[type=button]:hover, .icea .action-button:hover,
.icea .icea-botao--contorno:hover {
  background: var(--surface-muted); color: var(--brand); border-color: var(--brand-lighter);
}
.icea .action-button { min-height: 34px; padding: 6px 12px; font-size: .825rem; }
.icea .action-button i { color: inherit; }

.icea-botao {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; min-height: 38px; box-sizing: border-box;
  border-radius: var(--radius); border: 1px solid var(--brand);
  background: var(--brand); color: #fff !important;
  font-weight: 600; font-size: .9rem;
}
.icea-botao:hover { background: var(--brand-dark); border-color: var(--brand-dark); text-decoration: none !important; }
.icea .icea-botao--contorno { color: var(--text-secondary) !important; }

/* ---------------------------------------------------------------- formularios */
.icea input[type=text], .icea input[type=email], .icea input[type=password],
.icea input[type=tel], .icea input[type=number], .icea input[type=date],
.icea input[type=search], .icea input:not([type]), .icea select, .icea textarea {
  font: 400 .95rem/1.4 var(--font);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  box-sizing: border-box;
  max-width: 100%;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.icea select { padding-right: 32px; min-height: 40px; }
.icea input:focus, .icea select:focus, .icea textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(150, 32, 56, .15);
}
.icea label { color: var(--text-secondary); font-weight: 500; }
.icea .form-header h3, .icea .form-header b { color: var(--text); }
.icea .form-header em, .icea em { color: var(--text-muted); }

/* Editor (redactor) e area de anexos */
.icea .redactor-box, .icea .redactor-box.redactor-styles-on {
  border: 1px solid var(--border) !important; border-radius: var(--radius); overflow: hidden;
}
.icea .redactor-toolbar { background: var(--surface-muted); border-bottom: 1px solid var(--border-light); box-shadow: none; }
.icea .filedrop .dropzone {
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--surface-muted); color: var(--text-muted); padding: 10px 14px;
}

/* ---------------------------------------------------------------- pagina inicial */
/* Grid, nao flex: alem de sidebar e texto, o #landing_page tem um div.clear e
   o bloco de artigos da base de conhecimento, que ocupam a largura toda. */
.icea #landing_page {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "texto acoes"; column-gap: 40px; align-items: start;
}
.icea #landing_page > * { grid-column: 1 / -1; }
.icea #landing_page > .clear { display: none; }
.icea #landing_page .main-content { grid-area: texto; width: auto; }
.icea #landing_page .sidebar {
  grid-area: acoes; float: none; width: auto; margin: 0;
  background: var(--surface-muted); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 20px;
}
.icea #landing_page .sidebar p { margin: 0 0 10px; }
.icea #landing_page .sidebar p:last-child { margin: 0; }
.icea #landing_page .front-page-button .button { width: 100%; min-height: 46px; font-size: .95rem; }
.icea #landing_page .front-page-button { width: auto; }
.icea #landing_page .front-page-button .button { display: flex !important; width: 100%; box-sizing: border-box; }
.icea #landing_page .front-page-button .blue.button::before { font-family: 'FontAwesome'; content: "\f067"; font-weight: normal; margin-right: 8px; }
.icea #landing_page .front-page-button .blue.button,
.icea #landing_page .front-page-button .blue.button:visited {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.icea #landing_page .front-page-button .blue.button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.icea #landing_page .front-page-button .green.button,
.icea #landing_page .front-page-button .green.button:visited {
  background: var(--surface); color: var(--brand); border-color: var(--brand-lighter);
}
.icea #landing_page .front-page-button .green.button:hover { background: var(--brand-bg); border-color: var(--brand); color: var(--brand-dark); }
.icea #landing_page .front-page-button .green.button::before { font-family: 'FontAwesome'; content: "\f002"; font-weight: normal; margin-right: 8px; }
.icea #landing_page .sidebar .content section { margin-top: 16px; }
.icea #landing_page .sidebar .content .header { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.icea .thread-body, .icea .thread-body p, .icea .thread-body li, .icea .thread-body div { font-family: var(--font); }
.icea #landing_page .thread-body { font-size: 1rem; color: var(--text-secondary); padding: 0; }
.icea #landing_page .thread-body h1 { color: var(--text); font-size: 1.75rem; margin-bottom: .75rem; }
.icea #landing_page .thread-body ol, .icea #landing_page .thread-body ul { padding-left: 1.4rem; }
.icea #landing_page .search-form { margin-bottom: 20px; }
.icea #landing_page + .clear + div:empty { display: none; }

/* ---------------------------------------------------------------- login e consulta */
.icea-login { max-width: 440px; margin: 8px auto; }
.icea-login h1 { text-align: center; }
.icea-login__intro { text-align: center; color: var(--text-muted); margin: 0 0 24px; }
/* #clientLogin traz cadeado e borda do tema padrao, com especificidade de id */
.icea #clientLogin.icea-login__form {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-muted); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 24px;
  background-image: none; width: auto; box-sizing: border-box;
}
.icea-login__form label { margin-top: 8px; font-size: .875rem; }
.icea-login__form input[type=text], .icea-login__form input[type=email], .icea-login__form input[type=password] {
  width: 100%; min-height: 44px; font-size: 1rem;
}
.icea-login__entrar { margin-top: 16px; width: 100%; min-height: 46px !important; font-size: 1rem !important; }
.icea-login__erro {
  background: var(--err-bg); color: var(--err-text); border-radius: var(--radius);
  padding: 10px 12px; font-weight: 500; font-size: .9rem;
}
.icea-login__form .external-auth { margin-top: 12px; text-align: center; }
.icea-login__ajuda { text-align: center; color: var(--text-muted); font-size: .875rem; margin-top: 18px; }

/* ---------------------------------------------------------------- lista de tickets */
.icea #ticketSearchForm { margin: 8px 0 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.icea #ticketSearchForm input[type=text] { min-width: 240px; }
.icea h1 .refresh, .icea h1 a.refresh { color: var(--brand); font-size: 1.1rem; }
.icea .states { display: flex; gap: 12px; font-size: .9rem; align-items: center; }
.icea .states a { color: var(--text-secondary); }
.icea .states a.active, .icea .states small { color: var(--brand); font-weight: 600; }

.icea table#ticketTable {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  font-size: .9rem;
}
.icea #ticketTable caption { text-align: left; padding: 0 0 10px; color: var(--text-muted); font-weight: 500; background: none; border: 0; }
.icea #ticketTable th, .icea #ticketTable td { border-left: 0; border-right: 0; }
.icea #ticketTable a, .icea #ticketTable .link { color: var(--brand); cursor: pointer; }
.icea #ticketTable td { vertical-align: middle; }
/* O assunto e um div.truncate com max-height de 1.2em: com a entrelinha do
   tema ele cortava a linha ao meio. */
.icea #ticketTable .truncate { max-height: 1.45em !important; line-height: 1.45; font-weight: 500; }
.icea #ticketTable a:hover { color: var(--brand-dark); }
.icea .search.well {
  background: var(--surface-muted); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 16px; box-shadow: none;
}
.icea .states, .icea .states * { font-size: .875rem !important; }
.icea .states a { font-weight: 500; }
.icea #ticketTable th {
  background: var(--surface-muted); color: var(--text-secondary);
  font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.icea #ticketTable th a { color: var(--text-secondary); }
.icea #ticketTable td { padding: 11px 12px; border-bottom: 1px solid var(--border-light); background: var(--surface); }
.icea #ticketTable tr:last-child td { border-bottom: 0; }
.icea #ticketTable tbody tr:hover td { background: var(--brand-bg); }
.icea #ticketTable tbody tr:nth-child(2n) td { background: #fcfcfd; }
.icea #ticketTable tbody tr:nth-child(2n):hover td { background: var(--brand-bg); }

/* ---------------------------------------------------------------- ticket aberto */
.icea h1 .icon-refresh + a, .icea h1 small { color: var(--text-muted); font-weight: 500; }
.icea #ticketInfo { width: 100%; margin-bottom: 8px; }
.icea table.custom-data { margin-top: 8px; }
.icea table.custom-data th, .icea table.custom-data td { background: transparent; padding: 6px 10px; }
.icea table.custom-data tbody tr:nth-child(odd) th, .icea table.custom-data tbody tr:nth-child(odd) td { background: var(--surface-muted); }
.icea table.custom-data th { color: var(--text-muted); font-weight: 500; text-align: left; width: 30%; }
.icea table.custom-data .headline { background: transparent !important; }
.icea #ticketInfo > tbody > tr > td > h1 { font-size: 1.4rem; }
.icea .infoTable { background: none; }
.icea .infoTable th, .icea .infoTable td { padding: 6px 10px; vertical-align: top; }
.icea .infoTable th {
  color: var(--text-muted); font-weight: 500; text-align: left; white-space: nowrap;
}
.icea table.infoTable { border-collapse: separate; border-spacing: 0; }
.icea #ticketInfo .headline, .icea .headline {
  font-weight: 700; color: var(--text); border-bottom: 2px solid var(--brand-lighter);
  padding: 8px 10px; font-size: .95rem;
}
.icea #ticketInfo td[width="50%"] > table, .icea #ticketInfo table[width="100%"] {
  background: var(--surface-muted); border-radius: var(--radius);
}

/* Conversa (thread.css): so cores. A estrutura (setas, avatar ao lado) e do
   osTicket - e a propria .thread-entry tem a classe "avatar", entao nada de
   recorte ou raio em .avatar aqui. */
.icea .thread-entry.message .header { background-color: var(--surface-muted); border-color: var(--border); color: var(--text); }
.icea .thread-entry.response .header { background-color: var(--brand-bg); border-color: var(--brand-lighter); color: var(--text); }
.icea .thread-entry.message .thread-body { border-color: var(--border); }
.icea .thread-entry.response .thread-body { border-color: var(--brand-lighter); }
.icea .thread-entry .header b { font-weight: 600; }
.icea .thread-event { color: var(--text-muted); }
.icea .thread-entry .attachments { background-color: var(--surface-muted); border-top-color: var(--border-light); }
.icea span.avatar img { border-radius: 50%; }

/* Formulario de resposta */
.icea #reply {
  background: var(--surface-muted); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 20px 24px; margin-top: 24px;
}
.icea #reply h2 { margin-top: 0; }
.icea p.buttons, .icea #reply p[style*="center"], .icea form p[style*="text-align:center"] {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}

/* Abrir ticket */
.icea #ticketForm table { width: 100%; }
.icea #ticketForm td { padding: 6px 0; vertical-align: top; }
.icea #ticketForm select#topicId { width: 100%; max-width: 480px; }
.icea #ticketForm hr { margin: 16px 0; }
.icea #ticketForm .form-header { margin-top: 12px; }
.icea #ticketForm input[type=text], .icea #ticketForm textarea { width: 100%; max-width: 640px; }

/* ---------------------------------------------------------------- rodape */
.icea #footer.icea-rodape {
  background: var(--navy); color: rgba(255, 255, 255, .78);
  text-align: left; font-size: .875rem; margin: 0;
  flex-shrink: 0;
}
.icea-rodape__conteudo, .icea-rodape__base {
  max-width: var(--container); margin: 0 auto; padding: 0 24px; box-sizing: border-box;
}
.icea-rodape__conteudo {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; padding-top: 32px; padding-bottom: 24px; flex-wrap: wrap;
}
.icea-rodape__marca { display: flex; flex-direction: column; gap: 4px; }
.icea-rodape__marca strong { color: #fff; font-size: 1rem; }
.icea-rodape__marca address { font-style: normal; color: rgba(255, 255, 255, .62); font-size: .825rem; margin-top: 6px; }
.icea-rodape__links { display: flex; gap: 20px; flex-wrap: wrap; }
.icea #footer .icea-rodape__links a { color: rgba(255, 255, 255, .85); font-weight: 500; }
.icea #footer .icea-rodape__links a:hover { color: #fff; }
.icea-rodape__base {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8rem; color: rgba(255, 255, 255, .62);
}
.icea #footer #poweredBy {
  display: inline; width: auto; height: auto; margin: 0;
  text-indent: 0; background: none; color: rgba(255, 255, 255, .62); font-size: .8rem;
}
.icea #footer #poweredBy:hover { color: #fff; }
.icea #footer p { margin: 0; }

/* ---------------------------------------------------------------- telas pequenas */
@media (max-width: 760px) {
  .icea-topo { position: static; }
  .icea-topo__barra { flex-wrap: wrap; padding-top: 10px; padding-bottom: 6px; }
  .icea-marca__logo { height: 30px; }
  .icea-marca__sub { display: none; }
  .icea #nav li a { padding: 8px 10px; font-size: .85rem; }
  .icea #container { margin-top: 16px; padding: 0 12px; }
  .icea #content { padding: 22px 18px; border-radius: var(--radius); }
  .icea #landing_page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "acoes" "texto"; row-gap: 24px; }
  .icea #ticketTable { display: block; overflow-x: auto; }
  .icea #ticketInfo, .icea #ticketInfo > tbody, .icea #ticketInfo > tbody > tr,
  .icea #ticketInfo > tbody > tr > td { display: block; width: 100% !important; }
}

@media (max-width: 480px) {
  .icea-topo__barra { flex-wrap: nowrap; padding-left: 16px; padding-right: 16px; }
  .icea-topo__menu { padding-left: 12px; padding-right: 12px; }
  .icea-marca { gap: 10px; }
  .icea-marca__logo { height: 26px; }
  .icea-marca__texto { padding-left: 10px; }
  .icea-marca__nome { font-size: .875rem; }
  .icea-usuario { gap: 8px; flex-wrap: nowrap; }
  .icea-usuario__nome, .icea-usuario a[href$="profile.php"] { display: none; }
  .icea-botao__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .icea-botao { padding: 8px 12px; }
}

@media print {
  .icea-topo, .icea-rodape { display: none; }
  .icea #content { border: 0; box-shadow: none; padding: 0; }
}