/* Estilos que o Tailwind (CDN) não cobre: animações, toasts, esqueleto de carregamento. */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: #f8fafc;
    min-height: 100vh;
    min-height: 100dvh;
}

/* O atributo hidden vence classes de exibição do Tailwind (flex, grid...). */
[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid #6d28d9;
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    background: #6d28d9;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}
.skip-link:focus { top: 1rem; }

/* Modal: entra deslizando no celular e com leve zoom no computador. */
.modal-panel {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 180ms ease, transform 180ms ease;
}
.modal-panel.open {
    opacity: 1;
    transform: none;
}

/* Toasts */
/* No celular os avisos ficam no topo, para não cobrir os botões dos modais (que abrem por baixo). */
#toast-container {
    position: fixed;
    top: 0.75rem;
    left: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}
@media (min-width: 640px) {
    #toast-container { top: auto; left: auto; right: 1.25rem; bottom: 1.25rem; align-items: flex-end; }
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 26rem;
    color: #fff;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: none; }
.toast-success { background: #0f172a; }
.toast-error { background: #b91c1c; }
.toast-action {
    font-weight: 600;
    color: #c4b5fd;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    white-space: nowrap;
}
.toast-error .toast-action { color: #fff; text-decoration: underline; }
.toast-action:hover { background: rgba(255, 255, 255, 0.1); }

/* Menus <details> */
details[data-menu] > summary::-webkit-details-marker { display: none; }

/* Esqueleto de carregamento */
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 0.5rem;
}
@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Construtor */
.b-fields { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .b-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b-fields > .b-field { grid-column: span 2; }
    .b-fields > .b-field.b-half { grid-column: span 1; }
}
.b-ghost { opacity: 0.35; }
.sortable-drag { box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.3); }
@media (max-width: 1023px) {
    .b-panel { display: none; position: fixed; z-index: 45; }
    .b-panel[data-open] { display: block; }
    #b-library { left: 0; right: 0; bottom: 0; max-height: 80vh; border-radius: 1rem 1rem 0 0; box-shadow: 0 -10px 30px -10px rgba(15, 23, 42, 0.3); }
    #b-props { inset: 0; }
    .b-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 44; }
}
@media (min-width: 1024px) {
    .b-backdrop { display: none; }
    .b-root > .b-panel, .b-canvas-col { height: 100%; }
}

/* Tela de entrada */
.login-hero {
    background:
        radial-gradient(ellipse at top right, rgba(216, 180, 254, 0.28), transparent 55%),
        linear-gradient(150deg, #4c1d95 0%, #6d28d9 55%, #7e22ce 100%);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    body { background: #fff; }
    .print-card { box-shadow: none !important; break-inside: avoid; }
    details > summary { list-style: none; }
}

/* Caixas e botões de opção na cor da marca (sem o plugin de formulários do Tailwind). */
input[type="radio"], input[type="checkbox"] { accent-color: #6d28d9; }