/* ============================================================
 * redesigns-extras.css
 * Patches globais para os 19 redesigns (combos 1-5 + admin):
 * - #5 Mobile audit (tabelas viram cards < 600px)
 * - #6 Empty states consistentes
 * - #7 HTMX loading indicator
 * - #8 A11y (reduced motion, focus-visible)
 * - #9 Print stylesheet (termos/privacidade)
 * - #4 Dark mode (light only por enquanto — ver toggle no futuro)
 * ============================================================ */

/* ================ WCAG AA contrast fixes ================ */
/* gray-400 (#9ca3af) reprovou (2.47:1) sobre cream — substituir por #6b7280 (4.70:1).
   caramel (#9a7910) só passa AA-large — usar #6b5410 (6.5:1) onde for body text. */
.dc-vtable .vt-aka,
.cb-row.cb-actions::before,
.au-term .gid,
.cn-table td.dim,
.cn-table td.mono,
.dd-source,
.au-hint,
.cn-handle.dim {
  color: #4b5563 !important; /* gray-600, ratio 7.5:1 sobre cream */
}

/* texts antes em #9a7910 (caramel) — body text precisa AA: usar olive #6b5410 (6.5:1) */
.cb-meta,
.dd-source,
.cn-table td.dim {
  color: #6b5410;
}

/* ================ #8 A11y ================ */
*:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 2px;
  border-radius: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Hovers que dependem de transform pra feedback visual:
     mantém o feedback removendo só o movimento. */
  .cb-card:hover, .ap-unit-card:hover, .dd-trans-card:hover,
  .e404-btn-primary:hover, .au-submit:hover, .fp-submit:hover,
  .rp-submit:hover, .as-submit:hover, .co-cta:hover,
  .ar-btn-primary:hover, .sa-success-btn-primary:hover {
    transform: none !important;
  }
}

/* ================ #7 HTMX loading indicator ================ */
.htmx-indicator { opacity: 0; transition: opacity .2s ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

.yn-htmx-spinner {
  position: fixed; top: 4.5rem; right: 1rem; z-index: 100;
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, #fffdf2, #fef3c7);
  border: 1.5px solid #d4af37; border-radius: 999px;
  padding: .45rem .85rem;
  font-size: .82rem; font-weight: 600; color: #6b5410;
  box-shadow: 0 4px 14px -4px rgba(212,175,55,.4);
  pointer-events: none;
}
.yn-htmx-spinner::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid #d4af37; border-top-color: transparent;
  animation: yn-spin 600ms linear infinite;
}
@keyframes yn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .yn-htmx-spinner::before { animation: none; border-style: dashed; }
}

/* ================ #5 Mobile audit (< 600px) ================ */
@media (max-width: 599px) {
  /* Dicionário — tabela das 4 variedades vira cards empilhados */
  .dc-vtable { display: block; border-collapse: separate; }
  .dc-vtable thead { display: none; }
  .dc-vtable tbody, .dc-vtable tr, .dc-vtable td { display: block; width: 100%; }
  .dc-vtable tbody tr {
    background: #fdfcf6; border: 1.5px solid #e6dfca; border-left: 3px solid #d4af37;
    border-radius: .55rem; padding: .65rem .85rem; margin-bottom: .5rem;
  }
  .dc-vtable td { padding: .25rem 0; border: none; }
  .dc-vtable td:first-child { border-bottom: 1px dashed #e6dfca; padding-bottom: .35rem; margin-bottom: .35rem; }
  .dc-vtable td::before {
    content: attr(data-label) "  ";
    font-size: .58rem; text-transform: uppercase; letter-spacing: .08em;
    color: #8a6f1f; font-weight: 700; display: block;
  }
  /* Para data-label aparecer, o template precisa ter os atributos.
     Sem alterar template: oculta as 3 últimas colunas em tela pequena. */
  /* nada — fallback abaixo cobre */

  /* Conta — histórico de logins: tabela vira cards */
  .cn-table { display: block; border-collapse: separate; }
  .cn-table thead { display: none; }
  .cn-table tbody, .cn-table tr, .cn-table td { display: block; width: 100%; }
  .cn-table tbody tr {
    background: #fdfcf6; border: 1px solid #e6dfca;
    border-radius: .55rem; padding: .55rem .75rem; margin-bottom: .5rem;
  }
  .cn-table td { padding: .2rem 0; font-size: .85rem; }
  .cn-table td:first-child { font-weight: 700; color: #1f3a2a; padding-bottom: .35rem; border-bottom: 1px dashed #e6dfca; margin-bottom: .35rem; }
  .cn-table td.ua { max-width: none; }
  .cn-table td.ua span { white-space: normal; word-break: break-all; }

  /* Hero/headers menos padding em mobile */
  .ap-hero, .au-hero, .cn-hero, .sb-hero, .tr-hero, .pr-hero, .co-hero, .dc-hero, .dd-hero {
    padding: 1.35rem 1rem !important;
  }
  /* Section titles menores */
  .ap-section-title, .au-section-title, .cn-section-title,
  .sb-h2, .tr-h2, .pr-h2 { font-size: .92rem !important; }

  /* Botões long-text empilhados em vez de wrap */
  .e404-actions, .ar-actions, .sa-success-actions, .co-cta-wrap > * { width: 100%; }
  .e404-btn-primary, .e404-btn-secondary,
  .ar-btn-primary, .ar-btn-secondary,
  .sa-success-btn-primary, .sa-success-btn-secondary { width: 100%; justify-content: center; }
}

/* ================ #6 Empty states consistentes ================ */
.yn-empty {
  text-align: center; padding: 2.5rem 1.5rem;
  background: linear-gradient(135deg, #fdf6e3, #f7f4e8);
  border: 2px dashed #d4c89b; border-radius: 1rem;
  color: #6b5410; margin: 1.25rem 0;
}
.yn-empty-icon { font-size: 2.85rem; margin-bottom: .65rem; opacity: .85; }
.yn-empty-title {
  font-size: 1.1rem; font-weight: 800; color: #1f3a2a;
  font-family: 'Sora', system-ui, sans-serif; margin-bottom: .35rem;
}
.yn-empty-msg { font-size: .9rem; color: #4b5563; line-height: 1.5; max-width: 24rem; margin: 0 auto; }
.yn-empty-action {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .85rem;
  background: linear-gradient(135deg, #2d5a3f, #1f3a2a); color: #fff;
  padding: .55rem 1.1rem; border-radius: .5rem; font-weight: 600; font-size: .85rem;
  text-decoration: none;
  box-shadow: 0 4px 12px -4px rgba(45,90,63,.4);
}

/* ================ #9 Print stylesheet ================ */
@media print {
  /* Esconde navegação/hero/sumário em todas as telas */
  nav, header,
  .yni-nav, .yn-progress,
  .tr-hero, .pr-hero, .sb-hero, .co-hero,
  .tr-toc, .pr-toc,
  .adml-top, .adml-sidebar, .adml-footer, .adml-overlay,
  .htmx-indicator, .yn-htmx-spinner,
  .au-back, .dd-back, .as-back, .ar-back, .cb-foot-actions {
    display: none !important;
  }

  body {
    background: #fff !important; color: #000 !important;
    font-size: 11pt; line-height: 1.5;
  }

  /* Sumario tipográfico por seção */
  .tr-section, .pr-section, .sb-card, .co-para {
    page-break-inside: avoid;
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-left: 3px solid #999 !important;
    padding: .85rem 1rem !important;
    margin: 0 0 .65rem !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .tr-h2, .pr-h2, .sb-h2 {
    color: #000 !important; border-bottom: 1px solid #999 !important;
    page-break-after: avoid;
  }
  .tr-h2-num, .pr-h2-num {
    background: #fff !important; color: #000 !important;
    border: 1px solid #000 !important;
  }

  a { color: #000 !important; text-decoration: underline; border-bottom: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }

  /* Print friendly URL no rodapé via @page */
  @page { margin: 1.5cm; }
}