/* ui-components.css: camada visual do Cortex (estilo Jarvis) por area, para nao colidir com theme.css.
   Regras: so variaveis do tema (--panel, --panel2, --line, --t1..--t6, --acc, --acc-rgb, --acc2); nada roxo.
   O Tailwind e COMPILADO (sem build): tudo que ele nao tem vive aqui.

   Sumario
     1. botoes      .btn .btn-primary .btn-ghost .btn-danger .btn-ok .btn-warn .btn-sm .btn-xs .btn-icon
     2. cartoes     .card .card-title .card-sub
     3. campos      .field .field-label .field-hint
     4. cabecalhos  .page-head .page-title .page-sub .page-actions .page-back
     5. HUD         .hud-tile* .hud-bar* .tabular
     6. esqueleto   .skel (varredura)
     7. avisos      .alert .alert-ok .alert-warn .alert-err .alert-info
     8. utilidades  .inline-flex .select-none .text-right (faltam no compilado)
     9. reduced motion
*/

/* ------------------------------ 1. botoes -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: .5rem; border: 1px solid transparent;
  font-size: .875rem; line-height: 1.25rem; font-weight: 500;
  color: var(--t2); background: transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none; vertical-align: middle;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .45); }
.btn svg { flex-shrink: 0; }

/* acento translucido com borda (o padrao bg-accent/20 text-accent border-accent/40) */
.btn-primary {
  background: rgba(var(--acc-rgb), .16); color: var(--acc);
  border-color: rgba(var(--acc-rgb), .45);
}
.btn-primary:hover:not(:disabled) { background: rgba(var(--acc-rgb), .26); }
html:not(.light) .btn-primary { text-shadow: 0 0 10px rgba(var(--acc-rgb), .35); }

/* borda --line, texto --t2 */
.btn-ghost { border-color: var(--line-strong); color: var(--t2); }
.btn-ghost:hover:not(:disabled) { border-color: rgba(var(--acc-rgb), .55); color: var(--t1); }

/* rose: acoes destrutivas */
.btn-danger {
  background: rgba(244, 63, 94, .10); color: #fda4af;
  border-color: rgba(244, 63, 94, .32);
}
.btn-danger:hover:not(:disabled) { background: rgba(244, 63, 94, .20); }
html.light .btn-danger { color: #be123c; }

/* esmeralda: confirmar/aceitar */
.btn-ok {
  background: rgba(16, 185, 129, .14); color: #6ee7b7;
  border-color: rgba(16, 185, 129, .42);
}
.btn-ok:hover:not(:disabled) { background: rgba(16, 185, 129, .24); }
html.light .btn-ok { color: #047857; }

/* ambar: acoes sensiveis (confidencial, 2FA) */
.btn-warn {
  background: rgba(245, 158, 11, .12); color: #fcd34d;
  border-color: rgba(245, 158, 11, .42);
}
.btn-warn:hover:not(:disabled) { background: rgba(245, 158, 11, .22); }
html.light .btn-warn { color: #92600a; }

/* texto puro (links de acao dentro de cartoes) */
.btn-link { padding: .25rem .4rem; color: var(--t4); border-color: transparent; }
.btn-link:hover:not(:disabled) { color: var(--acc); }
.btn-link.perigo:hover:not(:disabled) { color: #fb7185; }

.btn-sm { padding: .375rem .75rem; font-size: .8rem; line-height: 1.1rem; gap: .35rem; }
.btn-xs { padding: .25rem .6rem; font-size: .72rem; line-height: 1rem; gap: .3rem; border-radius: .45rem; }
.btn-block { width: 100%; }
.btn-icon { padding: .35rem; width: 2rem; height: 2rem; border-radius: .5rem; color: var(--t5); }
.btn-icon:hover:not(:disabled) { color: var(--t2); background: rgba(var(--acc-rgb), .10); }
.btn-icon.perigo:hover:not(:disabled) { color: #fb7185; }

/* ------------------------------ 2. cartoes ------------------------------- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 1rem;
  padding: 1.25rem; box-shadow: var(--shadow-panel);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.card.tight { padding: 1rem; }
.card.flush { padding: 0; overflow: hidden; }
.card.destaque { border-color: rgba(var(--acc-rgb), .35); }
.card.atencao { border-color: rgba(245, 158, 11, .45); }
.card.erro { border-color: rgba(244, 63, 94, .35); }
.card-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: 14px; font-weight: 600; color: var(--t1); line-height: 1.3;
  margin: 0 0 .75rem;
}
.card-title svg { color: var(--acc); flex-shrink: 0; }
.card-title .card-badge { margin-left: auto; font-weight: 500; }
/* rotulo HUD (maiusculo, espacado): o padrao dos h2 do painel */
.card-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--t4); margin: 0 0 .75rem;
}
.card-label svg { color: var(--t4); }
/* rotulos de atencao mantem a cor semaforica (mesma especificidade do Tailwind, carregado antes) */
.card-label.text-amber-300, .card-label.text-amber-300 svg { color: #fcd34d; }
.card-label.text-rose-300, .card-label.text-rose-300 svg { color: #fda4af; }
html.light .card-label.text-amber-300, html.light .card-label.text-amber-300 svg { color: #92600a; }
html.light .card-label.text-rose-300, html.light .card-label.text-rose-300 svg { color: #be123c; }
.card-sub { font-size: .75rem; color: var(--t5); margin: -.35rem 0 .75rem; line-height: 1.5; }

/* ------------------------------ 3. campos -------------------------------- */
.field {
  display: block; width: 100%;
  background: var(--panel2); border: 1px solid var(--line); border-radius: .5rem;
  padding: .5rem .75rem; font-size: .875rem; line-height: 1.25rem;
  color: var(--t2); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field::placeholder { color: var(--t5); }
.field:focus { border-color: var(--acc); box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .35); }
.field:disabled { opacity: .6; }
.field.sm { padding: .375rem .6rem; font-size: .75rem; line-height: 1rem; }
.field.xs { padding: .25rem .5rem; font-size: .72rem; line-height: 1rem; }
.field.auto { width: auto; display: inline-block; }
.field.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
textarea.field { min-height: 5rem; resize: vertical; }
select.field { padding-right: 1.75rem; }
input[type="date"].field, input[type="time"].field { color: var(--t3); }
input[type="color"].field { padding: 1px; width: 24px; height: 24px; }
/* botao nativo do <input type=file> */
input[type="file"].field::file-selector-button {
  margin-right: .75rem; padding: .3rem .75rem; border-radius: .45rem; cursor: pointer;
  background: rgba(var(--acc-rgb), .16); color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb), .45); font-size: .8rem;
}
.field-label { display: block; font-size: .75rem; color: var(--t4); margin-bottom: .25rem; }
.field-hint { font-size: 11px; color: var(--t5); margin-top: .35rem; line-height: 1.45; }

/* ---------------------------- 4. cabecalhos ------------------------------ */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.page-head.compact { margin-bottom: 1rem; }
.page-title {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--t1); margin: 0;
}
.page-title svg { color: var(--acc); flex-shrink: 0; }
html:not(.light) .page-title svg { filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), .55)); }
.page-title .badge {
  font-size: .75rem; font-weight: 500; padding: .1rem .55rem; border-radius: 999px;
  background: rgba(var(--acc-rgb), .16); color: var(--acc);
}
.page-sub { font-size: .8rem; color: var(--t4); margin: .25rem 0 0; line-height: 1.5; }
.page-sub a { color: var(--acc); }
.page-sub a:hover { text-decoration: underline; }
.page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.page-actions form { margin: 0; }
.page-back {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; color: var(--t4); text-decoration: none; margin-bottom: .75rem;
}
.page-back:hover { color: var(--acc); }

/* ------------------------------- 5. HUD ---------------------------------- */
.tabular { font-variant-numeric: tabular-nums; }
.hud-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .hud-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hud-tiles.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hud-tile {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: .9rem;
  padding: .85rem 1rem .8rem; min-width: 0;
}
.hud-tile::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(var(--acc-rgb), .7), transparent 70%);
}
.hud-tile.acc2::before { background: linear-gradient(90deg, rgba(var(--acc2-rgb), .7), transparent 70%); }
.hud-tile-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--t5); margin-bottom: .35rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hud-tile-value {
  font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--t1);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  display: flex; align-items: baseline; gap: .3rem; min-width: 0;
}
.hud-tile-value.acc { color: var(--acc); }
html:not(.light) .hud-tile-value.acc { text-shadow: 0 0 12px rgba(var(--acc-rgb), .45); }
.hud-tile-unit { font-size: 10px; font-weight: 500; color: var(--t5); letter-spacing: .08em; text-transform: uppercase; }
.hud-tile-foot { font-size: 11px; color: var(--t5); margin-top: .3rem; }

/* barra de proporcao (custo por modelo, progresso) */
.hud-bar { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--t3); }
.hud-bar + .hud-bar { margin-top: .45rem; }
.hud-bar .nome { width: 9rem; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; color: var(--t4); }
.hud-bar .trilho { display: block; flex: 1; height: 6px; border-radius: 999px; background: rgba(var(--panel2-rgb), .9); overflow: hidden; border: 1px solid var(--line); }
.hud-bar .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acc), var(--acc2)); min-width: 2px; transition: width .4s ease; box-shadow: 0 0 8px rgba(var(--acc-rgb), .5); }
.hud-bar .valor { width: 4.5rem; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; color: var(--t2); }
.hud-bar .pct { width: 2.6rem; text-align: right; flex-shrink: 0; font-size: 10px; color: var(--t5); font-variant-numeric: tabular-nums; }

/* tabela de dados (custos) */
.hud-table { width: 100%; font-size: .85rem; border-collapse: collapse; }
.hud-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--t5); font-weight: 500; padding: .65rem .75rem; border-bottom: 1px solid var(--line); text-align: left; }
.hud-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); color: var(--t3); vertical-align: middle; }
.hud-table tr:last-child td { border-bottom: none; }
.hud-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.hud-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.hud-table .fraco { color: var(--t5); font-size: .75rem; }
.hud-table td svg { color: var(--t4); margin-right: .3rem; }

/* ----------------------------- 6. esqueleto ------------------------------ */
.skel {
  position: relative; overflow: hidden; pointer-events: none;
  background: rgba(var(--panel2-rgb), .8); border-radius: .5rem; color: transparent !important;
  min-height: 1em;
}
.skel > * { visibility: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--acc-rgb), .16) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: skel-sweep 1.6s linear infinite;
}
.skel.linha { height: .9em; width: 60%; }
.skel.linha.curta { width: 35%; }
.skel.bloco { height: 2rem; width: 100%; }
@keyframes skel-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ------------------------------- 7. avisos ------------------------------- */
.alert {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .875rem; border-radius: .75rem; padding: .75rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--line); background: var(--panel2); color: var(--t2);
}
.alert svg { flex-shrink: 0; margin-top: .1rem; }
.alert-ok { background: rgba(16, 185, 129, .10); border-color: rgba(16, 185, 129, .3); color: #6ee7b7; }
.alert-warn { background: rgba(245, 158, 11, .10); border-color: rgba(245, 158, 11, .3); color: #fcd34d; }
.alert-err { background: rgba(244, 63, 94, .10); border-color: rgba(244, 63, 94, .3); color: #fda4af; }
.alert-info { background: rgba(var(--acc-rgb), .10); border-color: rgba(var(--acc-rgb), .3); color: var(--t2); }
html.light .alert-ok { color: #047857; }
html.light .alert-warn { color: #92600a; }
html.light .alert-err { color: #be123c; }

/* chips pequenos de metadados (kanban, e-mail) */
.tag {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 11px; line-height: 1; padding: .22rem .45rem; border-radius: .3rem;
  background: rgba(var(--panel2-rgb), .9); color: var(--t3); white-space: nowrap;
}
.tag svg { flex-shrink: 0; }
.tag.acc { background: rgba(var(--acc-rgb), .14); color: var(--acc); }
.tag.acc2 { background: rgba(var(--acc2-rgb), .14); color: var(--acc2); }
.tag.warn { background: rgba(245, 158, 11, .15); color: #fcd34d; }
.tag.err { background: rgba(244, 63, 94, .15); color: #fda4af; }
.tag.ok { background: rgba(16, 185, 129, .15); color: #6ee7b7; }
html.light .tag.warn { color: #92600a; }
html.light .tag.err { color: #be123c; }
html.light .tag.ok { color: #047857; }

/* fechar (x) de modais */
.modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: .45rem; color: var(--t5);
  background: transparent; border: 0; cursor: pointer; flex-shrink: 0;
}
.modal-close:hover { color: var(--t1); background: rgba(var(--acc-rgb), .10); }

/* modais: nunca mais altos que a tela — o conteúdo rola por dentro do cartão
   (antes o cartão esticava para fora e só dava para ver tudo tirando o zoom) */
.fixed.inset-0 > .card {
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  overflow-y: auto; overscroll-behavior: contain;
}

/* ----------------------------- 8. utilidades ----------------------------- */
.inline-flex { display: inline-flex; }
/* .hidden do Tailwind vem ANTES desta camada: sem isto, .btn/.field/.tag
   (que definem display) venceriam o .hidden que o JS liga e desliga */
.btn.hidden, .field.hidden, .tag.hidden, .alert.hidden, .card.hidden,
.hud-tile.hidden, .inline-flex.hidden, .rotulo-inline.hidden, .modal-close.hidden { display: none; }
.select-none { -webkit-user-select: none; user-select: none; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.overflow-hidden { overflow: hidden; }
.rotulo-inline { display: inline-flex; align-items: center; gap: .3rem; }
.ic-brain { stroke-width: 14; }

/* ------------------- 8b. blocos que abrem e fecham ------------------------ */
/* <details class="conf">: o conteudo fechado CONTINUA sendo enviado no form. */
details.conf { border: 1px solid var(--line); border-radius: .7rem;
               background: var(--panel2); margin-top: .55rem; }
details.conf > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
                         gap: .55rem; padding: .7rem .85rem; user-select: none; }
details.conf > summary::-webkit-details-marker { display: none; }
details.conf > summary::marker { content: ""; }
details.conf > summary:hover { background: rgba(var(--acc-rgb), .05); border-radius: .7rem; }
details.conf[open] > summary { border-bottom: 1px solid var(--line); border-radius: .7rem .7rem 0 0; }
.conf-seta { display: inline-block; width: .8rem; text-align: center; color: var(--t4);
             font-size: 1.2rem; line-height: 1; transition: transform .15s; }
details.conf[open] .conf-seta { transform: rotate(90deg); }
.conf-nome { font-size: .85rem; font-weight: 500; color: var(--t2);
             display: inline-flex; align-items: center; gap: .4rem; }
.conf-nome svg { color: var(--acc); }
.conf-resumo { margin-left: auto; font-size: .7rem; color: var(--t5); text-align: right;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.conf-corpo { padding: .85rem; }
/* variante "cartao inteiro": o proprio card e o bloco que abre */
details.conf.solta { border: none; background: transparent; margin-top: 0; }
details.conf.solta > summary { padding: 0; }
details.conf.solta > summary:hover { background: transparent; }
details.conf.solta[open] > summary { border-bottom: none; }
details.conf.solta .conf-nome { font-size: 14px; font-weight: 600; color: var(--t1); }
details.conf.solta .conf-nome svg { color: var(--acc); }
details.conf.solta > .conf-corpo { padding: .85rem 0 0; }

/* ------------------------- 9. menos movimento ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .skel::after, .hud-bar .fill { animation: none; transition: none; }
  .conf-seta { transition: none; }
  .animate-pulse { animation: none; }
  .btn, .field, .hud-tile, .modal-close, .page-back { transition: none; }
}