/* Só o que o Tailwind e o Basecoat não cobrem. O visual está em base.html e nas classes do Basecoat. */
:root {
  --cadeado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='1.5' y='4.5' width='7' height='5' rx='1'/%3E%3Cpath d='M3 4.5V3a2 2 0 0 1 4 0v1.5' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* indicador de carregamento do htmx */
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

.giro { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: gira .8s linear infinite; vertical-align: -2px; }
@keyframes gira { to { transform: rotate(360deg); } }

@media print {
  header, .barra-acoes, #painel, .paineis, .legenda, #toaster { display: none !important; }
  .tabela-rolagem { max-height: none; overflow: visible; }
}

/* balão do passo a passo (Driver.js): segue as cores do Basecoat no claro e no escuro */
.driver-popover.tour-escala { background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: 10px; max-width: 340px; box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.driver-popover.tour-escala * { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.driver-popover.tour-escala .driver-popover-title { font-size: 16px; color: var(--popover-foreground); }
.driver-popover.tour-escala .driver-popover-description { font-size: 14px; line-height: 1.5; color: var(--popover-foreground); }
.driver-popover.tour-escala .driver-popover-progress-text { color: var(--muted-foreground); }
.driver-popover.tour-escala .driver-popover-close-btn { color: var(--muted-foreground); }
.driver-popover.tour-escala .driver-popover-close-btn:hover { color: var(--popover-foreground); }
.driver-popover.tour-escala .driver-popover-footer button { text-shadow: none; font-size: 13px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--background); color: var(--foreground); }
.driver-popover.tour-escala .driver-popover-footer .driver-popover-next-btn { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.driver-popover.tour-escala .driver-popover-arrow { border-color: var(--popover); }
.driver-popover.tour-escala .driver-popover-arrow-side-left { border-right-color: transparent; border-bottom-color: transparent; border-top-color: transparent; }
.driver-popover.tour-escala .driver-popover-arrow-side-right { border-left-color: transparent; border-bottom-color: transparent; border-top-color: transparent; }
.driver-popover.tour-escala .driver-popover-arrow-side-top { border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
.driver-popover.tour-escala .driver-popover-arrow-side-bottom { border-left-color: transparent; border-top-color: transparent; border-right-color: transparent; }

/* passo a passo guiado (static/guia.js) */
.guia-widget { position: fixed; left: 16px; bottom: 16px; z-index: 1000000001; width: 320px; max-width: calc(100vw - 32px); padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 10px 30px rgb(0 0 0 / .3); display: grid; gap: 8px; font-size: 13px; }
.guia-widget[hidden] { display: none; }
.driver-active .guia-widget, .driver-active .guia-widget * { pointer-events: auto; }
.guia-widget .guia-prog { color: var(--muted-foreground); }
.guia-widget .guia-barra { height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.guia-widget .guia-barra span { display: block; height: 100%; background: var(--primary); transition: width .3s; }
.guia-widget .guia-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.guia-widget .guia-msg { color: var(--destructive); }
.driver-popover.guia-pop .guia-aviso { margin-top: 8px; padding: 8px; border-radius: 6px; background: var(--muted); font-size: 13px; }
.guia-alvo { animation: guia-pulso 1.6s ease-out infinite; border-radius: 6px; }
@keyframes guia-pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 70%, transparent); }
  70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .guia-alvo { animation: none; outline: 3px solid var(--primary); } }
.driver-popover.guia-pop .guia-entendi { margin-top: 10px; text-align: right; }
.guia-widget.no-alto { left: auto; right: 16px; bottom: auto; top: 72px; }