/* Scoped styles for Pavimentação app */
:root { --primary-gradient: linear-gradient(135deg, #0284c7 0%, #075985 100%); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.card { background: var(--color-surface); border-radius: 0.75rem; border: 1px solid var(--color-border); box-shadow: var(--shadow-2); transition: all 0.2s ease-in-out; }
.card:hover { box-shadow: var(--shadow-3); }
.input-field { width: 100%; padding: 0.625rem 0.875rem; background-color: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 0.5rem; color: var(--color-text); font-size: 0.875rem; transition: all 0.2s; }
.input-field:focus { outline: none; border-color: var(--color-primary); background-color: var(--color-surface); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12); }
.label-text { display: block; font-size: 0.75rem; font-weight: 500; color: var(--color-text-soft); margin-bottom: 0.375rem; }
.layer-visual { transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.2); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
.tooltip { position: relative; }
.tooltip:before { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 0.5rem; background: #1e293b; color: white; font-size: 0.75rem; border-radius: 0.25rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; white-space: nowrap; margin-bottom: 0.5rem; z-index: 50; }
.tooltip:hover:before { opacity: 1; }