/* ══════════════════════════════════════════════
   SPACESHIELD AI v5.2 · tecnologia.css
   Painel TECNOLOGIA · Maturidade do Stack Técnico
   Backend · Frontend · DevOps · CloudDev
══════════════════════════════════════════════ */

.tec-panel { display: flex; flex-direction: column; gap: 16px; }

/* ── HEADER ── */
.tec-header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            16px;
    flex-wrap:      wrap;
    padding:        14px 16px;
    background:     var(--bg3);
    border:         1px solid var(--border);
    border-radius:  6px;
}
.tec-main-title { font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--accent); letter-spacing: 1px; }
.tec-subtitle   { font-size: 10px; color: var(--text2); margin-top: 4px; }
.tec-info       { font-size: 9px;  color: var(--text3); margin-top: 3px; }

.tec-pct-wrap { text-align: center; min-width: 90px; }
.tec-pct-val  { font-family: 'Share Tech Mono', monospace; font-size: 26px; color: var(--accent); }
.tec-pct-lbl  { font-size: 8px; color: var(--text3); letter-spacing: .5px; margin-top: 2px; }

/* ── GRÁFICO (Chart.js) ── */
.tec-chart-wrap {
    background:    var(--bg3);
    border:        1px solid var(--border);
    border-radius: 6px;
    padding:       14px 16px;
    height:        150px;
}

/* ── KPI ROW ── */
.tec-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 10px; }
.tec-kpi {
    background:    var(--bg3);
    border:        1px solid var(--border);
    border-radius: 6px;
    padding:       12px 10px;
    text-align:    center;
}
.tec-kpi-icon { font-size: 18px; margin-bottom: 4px; }
.tec-kpi-val  { font-family: 'Share Tech Mono', monospace; font-size: 20px; color: var(--text1); }
.tec-kpi-lbl  { font-size: 8px; color: var(--text3); letter-spacing: .5px; margin: 3px 0 8px; }
.tec-kpi-bar  { height: 5px; background: var(--bg4); border-radius: 3px; overflow: hidden; }
.tec-kpi-fill { height: 100%; border-radius: 3px; transition: width .5s ease; background: var(--accent); }

.tec-kpi-green  .tec-kpi-val,  .tec-kpi-green  .tec-kpi-fill { color: var(--green);  background: var(--green); }
.tec-kpi-accent .tec-kpi-val,  .tec-kpi-accent .tec-kpi-fill { color: var(--accent); background: var(--accent); }
.tec-kpi-yellow .tec-kpi-val,  .tec-kpi-yellow .tec-kpi-fill { color: var(--yellow); background: var(--yellow); }
.tec-kpi-purple .tec-kpi-val,  .tec-kpi-purple .tec-kpi-fill { color: var(--purple); background: var(--purple); }

/* ── FILTER ROW ── */
.tec-filter-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tec-filter-btn {
    font-family:   'Share Tech Mono', monospace;
    font-size:     9px;
    padding:       6px 12px;
    background:    var(--bg3);
    color:         var(--text3);
    border:        1px solid var(--border);
    border-radius: 3px;
    cursor:        pointer;
    letter-spacing: .5px;
    transition:    all .2s;
}
.tec-filter-btn:hover  { color: var(--text1); border-color: rgba(0,212,255,.4); }
.tec-filter-active     { color: var(--accent); border-color: var(--accent); background: rgba(0,212,255,.08); }

/* ── CATEGORY CARDS ── */
.tec-cats { display: flex; flex-direction: column; gap: 14px; }
.tec-card {
    background:    var(--bg3);
    border:        1px solid var(--border);
    border-radius: 6px;
    padding:       14px 16px;
    border-left:   3px solid var(--accent);
}
.tec-card-green   { border-left-color: var(--green); }
.tec-card-accent  { border-left-color: var(--accent); }
.tec-card-yellow  { border-left-color: var(--yellow); }
.tec-card-purple  { border-left-color: var(--purple); }

.tec-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tec-card-title { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: var(--text1); letter-spacing: .5px; }
.tec-card-icon  { margin-right: 4px; }
.tec-card-pct-wrap { text-align: right; }
.tec-card-pct     { font-family: 'Share Tech Mono', monospace; font-size: 18px; color: var(--text1); }
.tec-card-pct-sub { font-size: 8px; color: var(--text3); }

.tec-bar-wrap { height: 8px; background: var(--bg4); border-radius: 4px; overflow: hidden; margin: 10px 0; }
.tec-bar-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }
.tec-bar-green  { background: linear-gradient(to right, var(--green), rgba(0,255,136,.5)); }
.tec-bar-accent { background: linear-gradient(to right, var(--accent), rgba(0,212,255,.5)); }
.tec-bar-yellow { background: linear-gradient(to right, var(--yellow), rgba(255,214,0,.5)); }
.tec-bar-purple { background: linear-gradient(to right, var(--purple), rgba(155,89,255,.5)); }

.tec-card-resumo { font-size: 10px; color: var(--text2); line-height: 1.6; margin-bottom: 10px; }

.tec-items-lbl, .tec-need-lbl { font-size: 9px; color: var(--text3); letter-spacing: .5px; margin: 10px 0 6px; }
.tec-need-lbl { color: var(--yellow); }
.tec-need-lbl-ok { color: var(--green); margin-bottom: 0; }

.tec-items { display: flex; flex-direction: column; gap: 4px; }
.tec-item  { display: flex; align-items: flex-start; gap: 8px; font-size: 10px; padding: 3px 0; }
.tec-item-check { flex-shrink: 0; }
.tec-item-done    .tec-item-txt { color: var(--text1); }
.tec-item-pending .tec-item-txt { color: var(--text3); }

.tec-need-list { display: flex; flex-direction: column; gap: 6px; }
.tec-need-item {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    background:    var(--bg4);
    border:        1px solid var(--border);
    border-radius: 5px;
    padding:       8px 10px;
}
.tec-need-num {
    flex-shrink:    0;
    font-family:    'Share Tech Mono', monospace;
    font-size:      10px;
    color:          var(--bg);
    background:     var(--yellow);
    border-radius:  50%;
    width:          18px;
    height:         18px;
    display:        flex;
    align-items:    center;
    justify-content: center;
}
.tec-need-txt { font-size: 10px; color: var(--text2); line-height: 1.5; }

/* ── SUMMARY ── */
.tec-summary {
    background:    var(--bg3);
    border:        1px solid var(--border);
    border-radius: 6px;
    padding:       14px 16px;
}
.tec-sum-title { font-size: 10px; color: var(--accent); letter-spacing: .5px; margin-bottom: 10px; }
.tec-sum-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 8px; }
.tec-sum-item  { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; padding: 6px 0; border-bottom: 1px solid rgba(0,212,255,.06); }
.tec-sum-lbl   { color: var(--text2); }
.tec-sum-val   { color: var(--text1); font-family: 'Share Tech Mono', monospace; font-size: 9px; text-align: right; }

/* ── CATÁLOGO DE TECNOLOGIAS ── */
.tec-catalog-lbl { font-size: 9px; color: var(--accent); letter-spacing: .5px; margin: 14px 0 8px; }

.tec-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 8px; }
.tec-catalog-item {
    background:    var(--bg4);
    border:        1px solid var(--border);
    border-left:   3px solid var(--border);
    border-radius: 5px;
    padding:       8px 10px;
}
.tec-catalog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.tec-catalog-name { font-size: 10px; color: var(--text1); font-family: 'Share Tech Mono', monospace; }
.tec-catalog-desc { font-size: 9px; color: var(--text3); line-height: 1.5; }

.tec-catalog-badge {
    font-size:      7px;
    padding:        2px 6px;
    border-radius:  10px;
    letter-spacing: .5px;
    white-space:    nowrap;
}

.tec-catalog-item.tec-cat-done   { border-left-color: var(--green); }
.tec-catalog-item.tec-cat-ready  { border-left-color: var(--yellow); }
.tec-catalog-item.tec-cat-suggested { border-left-color: var(--text3); }

.tec-catalog-badge.tec-cat-done      { background: rgba(0,255,136,.1);  color: var(--green); }
.tec-catalog-badge.tec-cat-ready     { background: rgba(255,214,0,.1);  color: var(--yellow); }
.tec-catalog-badge.tec-cat-suggested { background: rgba(134,173,201,.12); color: var(--text2); }

/* Totais do catálogo geral (seção de resumo) */
.tec-catalog-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 10px; margin-top: 10px; }
.tec-catalog-total {
    text-align:    center;
    background:    var(--bg4);
    border:        1px solid var(--border);
    border-radius: 6px;
    padding:       10px 8px;
}
.tec-catalog-total-val { display: block; font-family: 'Share Tech Mono', monospace; font-size: 20px; color: var(--text1); }
.tec-catalog-total-lbl { display: block; font-size: 8px; color: var(--text3); letter-spacing: .5px; margin-top: 3px; }
.tec-catalog-total.tec-cat-done      .tec-catalog-total-val { color: var(--green); }
.tec-catalog-total.tec-cat-ready     .tec-catalog-total-val { color: var(--yellow); }
.tec-catalog-total.tec-cat-suggested .tec-catalog-total-val { color: var(--text2); }

/* ── RESPONSIVO ── */
@media (max-width: 640px) {
    .tec-header { flex-direction: column; align-items: flex-start; }
    .tec-card-head { flex-direction: column; align-items: flex-start; }
    .tec-card-pct-wrap { text-align: left; }
}