/* Elementos difíceis — complementos ao tema do Lab. */
.el-index ol { columns: 3 220px; padding-left: 1.4em; }
.el-box { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--radius); padding: 18px; margin: 18px 0; scroll-margin-top: 16px; }
.el-box h2 { font-size: 1.2rem; }
.el-train { color: var(--mu); }
.el-train b { color: var(--tx); }
.el-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.el-wrap > .field { min-width: 220px; flex: 1; }
.el-result { min-height: 2.5em; margin-top: 10px; }
.el-arena { position: relative; height: 180px; border: 1px dashed var(--ln); border-radius: 8px; background: var(--bg); overflow: hidden; }
.el-arena .btn { position: absolute; transition: left .2s, top .2s; }
@media (prefers-reduced-motion: reduce) { .el-arena .btn { transition: none; } }
.el-list { list-style: none; padding: 0; margin: 8px 0 0; }
.el-list li { padding: 6px 8px; border-bottom: 1px solid var(--ln); }
.el-ok { color: #dff5b0; } .el-bad { color: var(--err); }
.el-kanban { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.el-col { min-height: 150px; background: var(--bg); border: 2px dashed var(--ln); border-radius: 8px; padding: 10px; }
.el-col.el-over { border-color: var(--g2); }
.el-card { background: var(--sf2); border: 1px solid var(--ln); border-radius: 8px; padding: 10px; margin: 8px 0; cursor: grab; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.el-hover { position: relative; display: inline-block; }
.el-submenu { display: none; position: absolute; left: 0; top: 100%; z-index: 5; list-style: none; margin: 0; padding: 6px 0; min-width: 180px; background: var(--sf2); border: 1px solid var(--ln); border-radius: 8px; }
.el-hover:hover .el-submenu, .el-hover:focus-within .el-submenu { display: block; }
.el-submenu a { display: block; padding: 8px 14px; color: var(--tx); text-decoration: none; }
.el-submenu a:hover, .el-submenu a:focus { background: var(--sf); color: var(--g2); }
.el-table-wrap { overflow-x: auto; }
.el-sort { background: none; border: 0; color: var(--tx); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
th[aria-sort="ascending"] .el-sort::after { content: " ▲"; color: var(--g2); }
th[aria-sort="descending"] .el-sort::after { content: " ▼"; color: var(--g2); }
.el-pager { margin-top: 10px; }
.el-date { position: relative; }
.el-cal { position: absolute; z-index: 6; top: 100%; left: 0; background: var(--sf2); border: 1px solid var(--ln); border-radius: 10px; padding: 10px; width: 290px; }
.el-cal-head { justify-content: space-between; margin-bottom: 8px; text-transform: capitalize; }
.el-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.el-cal-dow { color: var(--mu); font-size: .8rem; }
.el-cal-day { background: var(--bg); color: var(--tx); border: 1px solid var(--ln); border-radius: 6px; padding: 6px 0; cursor: pointer; font: inherit; }
.el-cal-day:hover { border-color: var(--g2); }
.el-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; gap: 8px; }
.el-toast { background: var(--ok-bg); color: #dff5b0; border: 1px solid #4f6e03; padding: 12px 16px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.el-frame { width: 100%; height: 330px; border: 1px solid var(--ln); border-radius: 8px; background: var(--bg); }
.el-scroll { height: 220px; overflow-y: auto; border: 1px solid var(--ln); border-radius: 8px; background: var(--bg); padding: 0 10px; }
.el-tip-wrap { position: relative; display: inline-block; }
.el-tip { visibility: hidden; opacity: 0; position: absolute; left: 0; top: calc(100% + 6px); width: 280px; background: #e6e9ec; color: #0f1216; padding: 8px 10px; border-radius: 6px; font-size: .9rem; z-index: 5; transition: opacity .15s; }
.el-tip-wrap:hover .el-tip, .el-tip-wrap:focus-within .el-tip { visibility: visible; opacity: 1; }
.el-dialog { background: var(--sf); color: var(--tx); border: 1px solid var(--ln); border-radius: 12px; padding: 20px; max-width: 420px; }
.el-dialog::backdrop { background: rgba(0,0,0,.6); }
.el-tab { background: var(--bg); color: var(--tx); border: 1px solid var(--ln); border-bottom: 0; border-radius: 8px 8px 0 0; padding: 8px 16px; font: inherit; cursor: pointer; }
.el-tab[aria-selected="true"] { background: var(--sf2); color: var(--g2); font-weight: 700; }
.el-panel { background: var(--sf2); border: 1px solid var(--ln); border-radius: 0 8px 8px 8px; padding: 14px; }
.el-tabs [role="tablist"] { gap: 4px; }
.el-acc-btn { width: 100%; text-align: left; background: var(--bg); color: var(--tx); border: 1px solid var(--ln); border-radius: 8px; padding: 10px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.el-acc-btn[aria-expanded="true"] { color: var(--g2); }
.el-accordion h3 { margin: 8px 0 0; font-size: 1rem; }
.el-acc-panel { padding: 10px 12px; }
@media (max-width: 640px) { .el-kanban { grid-template-columns: 1fr; } }