/**
 * css/analise_swot.css
 * Linkar em index.html: <link rel="stylesheet" href="css/analise_swot.css">
 *
 * Matriz SWOT 2×2 com eixos + chips numerados com peso em estrelas +
 * painel lateral de detalhe + matriz TOWS de cruzamentos — mesma
 * linguagem visual de css/modelo_canvas.css e css/cadeia_valor.css
 * (faixa gradiente ::before, sec-icon translúcido, card com gradiente
 * e hover que levanta). Botões/badges/inputs vêm das classes globais.
 */

/* ===== Layout do editor: board + painel lateral ===== */
.sw-layout { display: flex; gap: 16px; align-items: flex-start; }
.sw-board { flex: 1; min-width: 0; }

/* ===== Abas internas do editor (Matriz | Cruzamentos) ===== */
.sw-abas { display: flex; gap: 8px; border-bottom: 1px solid var(--line); }
.sw-aba { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 10px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.sw-aba:hover { color: var(--text); }
.sw-aba.active { color: var(--green); border-bottom-color: var(--green); }

/* ===== Matriz 2×2 com eixos ===== */
.sw-matriz { display: grid; grid-template-columns: 24px 1fr 1fr; gap: 12px; }
.sw-eixo { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.sw-eixo.v { writing-mode: vertical-rl; transform: rotate(180deg); }

/* ===== Quadrante (mesmo DNA do .mc-sec) ===== */
.sw-sec { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 170px; }
.sw-sec::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.sw-verde::before    { background: linear-gradient(90deg, #4ade80, var(--green2)); }
.sw-amarelo::before  { background: linear-gradient(90deg, var(--warn), var(--warn2)); }
.sw-azul::before     { background: linear-gradient(90deg, var(--blue), var(--info)); }
.sw-vermelho::before { background: linear-gradient(90deg, #f87171, var(--danger2)); }

.sw-sec-title { display: flex; align-items: center; gap: 9px; }
.sw-sec-title h3 { font-size: 11.5px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .5px; margin: 0; min-width: 0; }
.sw-sec-sub { font-size: 9.5px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; display: block; margin-top: 2px; }
.sw-sec-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.sw-verde .sw-sec-icon    { background: rgba(74, 222, 128, .12); color: #4ade80; }
.sw-amarelo .sw-sec-icon  { background: rgba(245, 158, 11, .12); color: var(--warn); }
.sw-azul .sw-sec-icon     { background: rgba(56, 189, 248, .12); color: var(--blue); }
.sw-vermelho .sw-sec-icon { background: rgba(248, 113, 113, .12); color: #f87171; }

.sw-count { font-size: 9px; color: var(--muted); font-weight: 700; margin-left: auto; }
.sw-add-btn { width: 24px; height: 24px; border-radius: 7px; border: 1px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; flex-shrink: 0; margin-left: 6px; }
.sw-add-btn:hover { border-color: var(--green); color: var(--green); }

/* ===== Chips de fator ===== */
.sw-cards { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; align-content: flex-start; flex: 1; }
.sw-item { background: linear-gradient(180deg, var(--panel2), var(--bg2)); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: all .15s; line-height: 1.35; }
.sw-item:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.sw-item.sel { border-color: var(--green); background: rgba(34, 197, 94, .08); }
.sw-item.inativo { opacity: .42; }
.sw-item.inativo > :not(.sw-estrelas) { text-decoration: line-through; }
.sw-item[draggable="true"] { cursor: grab; }
.sw-item.dragging { opacity: .45; }

.sw-num { font-size: 9.5px; font-weight: 800; }
.sw-verde .sw-num    { color: #4ade80; }
.sw-amarelo .sw-num  { color: var(--warn); }
.sw-azul .sw-num     { color: var(--blue); }
.sw-vermelho .sw-num { color: #f87171; }

.sw-estrelas { display: inline-flex; gap: 1px; font-size: 7.5px; color: var(--warn); }
.sw-estrelas .off { color: var(--line); }

.sw-empty { color: var(--muted); font-style: italic; font-size: 11px; margin-top: 11px; }

/* ===== Painel lateral de detalhe (igual .mc-detail) ===== */
.sw-detail { width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; flex-shrink: 0; display: flex; flex-direction: column; gap: 13px; position: sticky; top: 80px; }
.sw-detail-empty { text-align: center; color: var(--muted); font-size: 11.5px; padding: 30px 10px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.sw-detail-empty i { font-size: 32px; color: var(--line); }
.sw-dp-head { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.sw-dp-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.sw-dp-verde    { background: rgba(74, 222, 128, .12); color: #4ade80; }
.sw-dp-amarelo  { background: rgba(245, 158, 11, .12); color: var(--warn); }
.sw-dp-azul     { background: rgba(56, 189, 248, .12); color: var(--blue); }
.sw-dp-vermelho { background: rgba(248, 113, 113, .12); color: #f87171; }
.sw-dp-title { font-size: 14px; font-weight: 700; line-height: 1.3; word-break: break-word; }
.sw-dp-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.sw-tag-verde    { color: #4ade80; }
.sw-tag-amarelo  { color: var(--warn); }
.sw-tag-azul     { color: var(--blue); }
.sw-tag-vermelho { color: #f87171; }
.sw-dp-field label { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 5px; }
.sw-dp-field .val { font-size: 11.5px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; line-height: 1.5; }
.sw-dp-move { display: flex; gap: 8px; }
.sw-dp-move .btn { flex: 1; justify-content: center; }
.sw-dp-actions { display: flex; gap: 7px; }
.sw-dp-actions .btn { flex: 1; justify-content: center; font-size: 11.5px; padding: 8px 8px; }

/* ===== Matriz TOWS (cruzamentos) ===== */
.sw-tows-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sw-tows { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; position: relative; overflow: hidden; }
.sw-tows::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.sw-tows.sw-verde::before    { background: linear-gradient(90deg, #4ade80, var(--green2)); }
.sw-tows.sw-amarelo::before  { background: linear-gradient(90deg, var(--warn), var(--warn2)); }
.sw-tows.sw-azul::before     { background: linear-gradient(90deg, var(--blue), var(--info)); }
.sw-tows.sw-vermelho::before { background: linear-gradient(90deg, #f87171, var(--danger2)); }
.sw-tows-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sw-tows-head b { font-size: 12px; }
.sw-tows.sw-verde    .sw-tows-head b { color: #4ade80; }
.sw-tows.sw-amarelo  .sw-tows-head b { color: var(--warn); }
.sw-tows.sw-azul     .sw-tows-head b { color: var(--blue); }
.sw-tows.sw-vermelho .sw-tows-head b { color: #f87171; }
.sw-tows-sub { font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }
.sw-tows-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }

.sw-estrategia { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 12px; line-height: 1.5; position: relative; }
.sw-tows.sw-verde    .sw-estrategia { border-left: 3px solid #4ade80; }
.sw-tows.sw-amarelo  .sw-estrategia { border-left: 3px solid var(--warn); }
.sw-tows.sw-azul     .sw-estrategia { border-left: 3px solid var(--blue); }
.sw-tows.sw-vermelho .sw-estrategia { border-left: 3px solid #f87171; }
.sw-vinc { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.sw-chip { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--surface-alt); display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.sw-chip b { font-size: 9.5px; font-weight: 800; }
.sw-chip-verde b    { color: #4ade80; }
.sw-chip-amarelo b  { color: var(--warn); }
.sw-chip-azul b     { color: var(--blue); }
.sw-chip-vermelho b { color: #f87171; }
.sw-chip.tarefa { border-color: var(--purple); color: var(--purple); background: transparent; }
.sw-estrategia-acoes { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
.sw-estrategia-acoes .btn { padding: 4px 9px; font-size: 10.5px; }

/* ===== Picker de fatores/usuários dos modais ===== */
.sw-fator-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-fator-opt { border: 1px solid var(--line); border-radius: 999px; background: var(--surface-alt); color: var(--muted); font-size: 10.5px; font-weight: 600; padding: 5px 11px; cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; gap: 5px; }
.sw-fator-opt:hover { color: var(--text); }
.sw-fator-opt.sel { border-color: var(--green); background: rgba(34, 197, 94, .12); color: var(--green); }
.sw-fopt-verde b    { color: #4ade80; }
.sw-fopt-amarelo b  { color: var(--warn); }
.sw-fopt-azul b     { color: var(--blue); }
.sw-fopt-vermelho b { color: #f87171; }

/* ===== Estrelas clicáveis do modal de fator ===== */
.sw-estrelas-input { display: flex; gap: 5px; font-size: 18px; color: var(--warn); cursor: pointer; }
.sw-estrelas-input .off { color: var(--line); }
.sw-estrelas-input i:hover { transform: scale(1.15); }

/* ===== Tabela (desktop) e lista simples (mobile) da tela de lista ===== */
.sw-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.sw-table { width: 100%; border-collapse: collapse; background: var(--panel); min-width: 640px; }
.sw-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-alt); }
.sw-table td { padding: 11px 14px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.sw-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .015); }
.sw-table tbody tr:hover { background: rgba(34, 197, 94, .04); }

.sw-mobile-list { display: none; }
.sw-mobile-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.sw-mobile-item:last-child { border-bottom: none; }
.sw-mobile-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-alt); display: flex; align-items: center; justify-content: center; color: var(--muted); }

/* ===== Responsivo ===== */
@media (max-width: 1100px) {
  .sw-detail { display: none; }
}

@media (max-width: 768px) {
  .sw-table-wrap { display: none; }
  .sw-mobile-list { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }

  .sw-layout { flex-direction: column; }
  /* no mobile o painel lateral vira bloco abaixo do board */
  .sw-detail { display: flex; width: 100%; position: static; }

  /* matriz empilha: eixos somem, quadrantes em coluna */
  .sw-matriz { display: flex; flex-direction: column; }
  .sw-eixo { display: none; }
  .sw-tows-grid { grid-template-columns: 1fr; }
}