/* ==========================================================================
   base.css — .brain/ui/base.css · primitivos usados por todos os componentes
   (.k-btn, .k-field, .k-input, .k-dd/.k-pop/.k-menu, .k-badge).
   ========================================================================== */
/* .brain/ui/base.css — primitivos usados por todos os componentes */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--k-radius);border:1px solid transparent;font:600 var(--k-fs)/1 var(--k-font);cursor:pointer;white-space:nowrap;transition:background var(--k-t),border-color var(--k-t),transform .1s}
.k-btn:focus-visible{outline:none;box-shadow:var(--k-focus)}
.k-btn:active{transform:translateY(1px)}
.k-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.k-btn--primary{background:var(--k-primary);color:var(--k-on-primary)}.k-btn--primary:hover{background:var(--k-primary-hover)}
.k-btn--secondary{background:var(--k-surface);color:var(--k-text);border-color:var(--k-border)}.k-btn--secondary:hover{background:var(--k-surface-2)}
.k-btn--ghost{background:transparent;color:var(--k-primary)}.k-btn--ghost:hover{background:var(--k-surface)}
.k-btn--danger{background:var(--k-danger);color:#fff}
.k-btn--sm{height:32px;padding:0 12px;font-size:var(--k-fs-sm)}.k-btn--lg{height:48px;padding:0 24px;font-size:var(--k-fs-lg)}
.k-btn--icon{width:40px;padding:0}.k-btn--block{width:100%}.k-btn svg{width:16px;height:16px}
.k-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.k-label{font-weight:600;font-size:var(--k-fs-sm)}
.k-help{font-size:var(--k-fs-sm);color:var(--k-muted)}
.k-input,.k-textarea{width:100%;height:40px;padding:0 12px;border:1px solid var(--k-border);border-radius:var(--k-radius);background:var(--k-bg);color:var(--k-text);font:var(--k-fs) var(--k-font);transition:border-color var(--k-t),box-shadow var(--k-t)}
.k-textarea{height:auto;min-height:96px;padding:12px;resize:vertical;line-height:1.5}
.k-input:focus,.k-textarea:focus{outline:none;border-color:var(--k-primary);box-shadow:var(--k-focus)}
.k-input::placeholder{color:var(--k-muted)}
.k-field.is-error .k-input{border-color:var(--k-danger)}.k-field.is-error .k-help{color:var(--k-danger)}
/* gatilho + popover de qualquer dropdown */
.k-dd{position:relative;display:inline-block;min-width:0}
.k-dd__btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:200px;height:40px;padding:0 12px 0 14px;border:1px solid var(--k-border);border-radius:var(--k-radius);background:var(--k-bg);color:var(--k-text);font:500 var(--k-fs) var(--k-font);cursor:pointer;text-align:left}
.k-dd__btn:focus-visible{outline:none;box-shadow:var(--k-focus)}
.k-dd__btn::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--k-muted);border-bottom:2px solid var(--k-muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--k-t)}
.k-dd.is-open .k-dd__btn::after{transform:rotate(225deg) translateY(-2px)}
.k-dd__btn .is-placeholder{color:var(--k-muted)}
.k-pop{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;z-index:60;display:none;background:var(--k-bg);border:1px solid var(--k-border);border-radius:var(--k-radius);box-shadow:var(--k-shadow);padding:6px}
.k-pop--right{left:auto;right:0}
.k-dd.is-open .k-pop{display:block;animation:k-pop .15s ease}
@keyframes k-pop{from{opacity:0;transform:translateY(-4px)}}
.k-menu{margin:0;padding:0;list-style:none}
.k-menu li,.k-menu [role=option],.k-menu [role=menuitem]{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:var(--k-radius-sm);cursor:pointer;color:var(--k-text)}
.k-menu li:hover,.k-menu li:focus,.k-menu li.is-active{background:var(--k-surface);outline:none}
.k-menu li[aria-selected="true"]{color:var(--k-primary);font-weight:600}
.k-menu li.is-danger{color:var(--k-danger)}
.k-menu hr{border:0;border-top:1px solid var(--k-border);margin:6px 0}
.k-menu small{color:var(--k-muted)}
.k-menu li svg{width:16px;height:16px;flex:none}
.k-menu li>span{flex:1;display:flex;align-items:center;gap:8px}
@media (max-width:480px){.k-pop{position:fixed;left:8px;right:8px;top:auto;bottom:8px;min-width:0;padding:10px}}
.k-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--k-surface-2);color:var(--k-text)}
.k-badge--success{background:color-mix(in srgb,var(--k-success) 18%,transparent);color:var(--k-success)}
.k-badge--warning{background:color-mix(in srgb,var(--k-warning) 18%,transparent);color:var(--k-warning)}
.k-badge--danger{background:color-mix(in srgb,var(--k-danger) 18%,transparent);color:var(--k-danger)}
.k-badge--info{background:color-mix(in srgb,var(--k-info) 18%,transparent);color:var(--k-info)}
.k-badge--primary{background:color-mix(in srgb,var(--k-primary) 18%,transparent);color:var(--k-primary)}