/*
 * utils.css — Classes utilitárias SHIAI
 * Gerado automaticamente a partir dos inline styles mais comuns nos templates.
 * NÃO editar manualmente os blocos marcados com [gerado].
 * Imports: carregado após app.css no base.html
 */

/* ── Ícones SVG ── */
.icon-14  { width: 14px; height: 14px; }
.icon-16  { width: 16px; height: 16px; }
.icon-18  { width: 18px; height: 18px; }
.icon-20  { width: 20px; height: 20px; }
.icon-20c { width: 20px; height: 20px; cursor: pointer; flex-shrink: 0; }

/* ── Display ── */
.d-inline-shiai { display: inline; }
.d-block-shiai  { display: block; }

/* ── Cores de texto ── */
.text-danger-var   { color: var(--color-danger); }
.text-gray-400     { color: var(--color-gray-400); }
.text-gray-500     { color: var(--color-gray-500); }
.text-gray-600     { color: var(--color-gray-600); }
.text-gray-700     { color: var(--color-gray-700); }
.text-gray-900     { color: var(--color-gray-900); }

/* ── Tipografia (Tailwind-style aliases) ── */
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.text-sm       { font-size: 0.875rem; }
.text-lg       { font-size: 1.125rem; }
.text-xl       { font-size: 1.25rem; }

/* ── Fonte + cor combinados ── */
.text-sm-gray-500  { font-size: var(--font-size-sm); color: var(--color-gray-500); }
.text-sm-gray-600  { font-size: var(--font-size-sm); color: var(--color-gray-600); }
.text-sm-gray-700  { font-size: var(--font-size-sm); color: var(--color-gray-700); }
.text-sm-500       { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-gray-700); }
.text-xs-gray-500  { font-size: var(--font-size-xs); color: var(--color-gray-500); }
.text-xs           { font-size: var(--font-size-xs); }
.text-xs-mt1       { font-size: var(--font-size-xs); margin-top: var(--spacing-1); }
.text-xl           { font-size: var(--font-size-xl); }
.text-lg-500       { font-size: var(--font-size-lg); font-weight: 500; margin-top: var(--spacing-1); }
.text-xs-10        { font-size: 10px; }
.fw-600            { font-weight: 600; }
.fw-500-gray-900   { font-weight: 500; color: var(--color-gray-900); }
.text-muted-normal { color: var(--color-gray-500); font-weight: normal; }
.text-gray-600-sm  { color: var(--color-gray-600); font-size: var(--font-size-sm); }

/* ── Margin ── */
.m-0-shiai   { margin: 0; }
.mb-0-shiai  { margin-bottom: 0; }
.mb-2-shiai  { margin-bottom: var(--spacing-2); }
.mb-3-shiai  { margin-bottom: var(--spacing-3); }
.mb-4-shiai  { margin-bottom: var(--spacing-4); }
.mb-5-shiai  { margin-bottom: var(--spacing-5); }
.mb-6        { margin-bottom: var(--spacing-6) !important; }
.mb-6-shiai  { margin-bottom: var(--spacing-6); }
.mb-8-shiai  { margin-bottom: var(--spacing-8); }
.mt-2-shiai  { margin-top: var(--spacing-2); }
.mt-3-shiai  { margin-top: var(--spacing-3); }
.mt-4-shiai  { margin-top: var(--spacing-4); }
.ml-2-shiai  { margin-left: var(--spacing-2); }
.ml-4px      { margin-left: 4px; }

/* ── Padding ── */
.p-4-shiai        { padding: var(--spacing-4); }
.p-xs             { padding: var(--spacing-1) var(--spacing-2); font-size: var(--font-size-xs); }
.p-sm             { padding: var(--spacing-2) var(--spacing-3); }

/* ── Largura ── */
.w-100-shiai { width: 100%; }

/* ── Flex (Tailwind-style aliases usados nos templates) ── */
.flex         { display: flex; }
.flex-1       { flex: 1; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.flex-wrap-shiai { flex-wrap: wrap; }
.gap-1        { gap: 4px; }
.gap-2        { gap: 8px; }
.gap-3        { gap: 12px; }
.gap-4        { gap: 16px; }
.flex-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}
.flex-row-gap2 { display: flex; align-items: center; gap: var(--spacing-2); cursor: pointer; padding: var(--spacing-3); border: 1px solid var(--color-gray-300); border-radius: var(--border-radius-md); transition: all var(--transition-base); }
.flex-row-gap3 { display: flex; align-items: center; gap: var(--spacing-3); }

/* ── Grid ── */
.grid-auto-300 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-6);
}
.col-full       { grid-column: 1 / -1; }
.col-full-mb0   { grid-column: 1 / -1; margin-bottom: 0; }

/* ── Hints e labels de formulário ── */
.field-hint {
  display: block;
  margin-top: var(--spacing-1);
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
}
.field-hint-muted {
  display: block;
  margin-top: var(--spacing-1);
  color: var(--color-gray-500);
  font-weight: normal;
}
.field-hint-sm {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

/* ── Hidden com margin ── */
.hidden-mt3 { margin-top: var(--spacing-3); display: none; }