/* =========================================================
   Sobre.razor.css — Portal Tenant
   Usa SOMENTE var(--...) do design system. Zero Tailwind.
   ========================================================= */

/* Layout two-column: nav lateral fixa + conteúdo principal */
.sobre-layout {
    display:flex;
    gap:2rem;
    align-items:flex-start;
}

.sobre-nav {
    flex:0 0 13.75rem;
    position:sticky;
    top:1.5rem;
    background:var(--bg-surface);
    border:0.0625rem solid var(--border-soft);
    border-radius:var(--radius-xs);
    padding:1rem;
    font-size:0.8125rem;
}

.sobre-nav-label {
    font-weight:var(--fw-bold);
    color:var(--fg-secondary);
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.7rem;
    margin-bottom:0.5rem;
}

.sobre-nav-list {
    list-style:none;
    padding:0;
    margin:0;
}

.sobre-nav-list li {
    margin-bottom:0.25rem;
}

.sobre-nav-list a {
    display:block;
    padding:0.25rem 0.5rem;
    border-radius:0.25rem;
    color:var(--fg-secondary);
    text-decoration:none;
    line-height:1.4;
    transition:background 0.15s, color 0.15s;
}

.sobre-nav-list a:hover {
    background:var(--bg-muted);
    color:var(--brand-droplet-blue);
}

.sobre-main {
    flex:1;
    min-width:0;
}

/* Sections */
.sobre-sec {
    margin-bottom:1.25rem;
    padding:1.5rem;
}

.sobre-h2 {
    font-size:1.125rem;
    font-weight:var(--fw-bold);
    color:var(--fg-strong);
    margin:0 0 1rem;
    padding-bottom:0.5rem;
    border-bottom:0.0625rem solid var(--border-soft);
}

.sobre-h3 {
    font-size:0.9375rem;
    font-weight:var(--fw-bold);
    color:var(--fg-default);
    margin:1.25rem 0 0.75rem;
}

.sobre-sec p {
    color:var(--fg-default);
    line-height:1.65;
    margin-bottom:0.75rem;
    font-size:0.875rem;
}

/* Table */
.sobre-table-wrap {
    overflow-x:auto;
    margin:1rem 0;
}

.sobre-table {
    width:100%;
    border-collapse:collapse;
    font-size:0.8125rem;
}

.sobre-table th {
    background:var(--bg-muted);
    color:var(--fg-secondary);
    font-weight:var(--fw-bold);
    text-align:left;
    padding:0.6rem 0.875rem;
    border:0.0625rem solid var(--border-soft);
}

.sobre-table td {
    color:var(--fg-default);
    padding:0.6rem 0.875rem;
    border:0.0625rem solid var(--border-soft);
    line-height:1.5;
    vertical-align:top;
}

.sobre-table tr:nth-child(even) td {
    background:var(--bg-muted);
}

/* Phases list */
.sobre-phases {
    padding-left:0;
    list-style:none;
    counter-reset:phase;
    margin:0.75rem 0;
}

.sobre-phases li {
    counter-increment:phase;
    display:flex;
    gap:0.75rem;
    align-items:flex-start;
    padding:0.625rem 0;
    border-bottom:0.0625rem solid var(--border-soft);
    color:var(--fg-default);
    font-size:0.875rem;
    line-height:1.6;
}

.sobre-phases li:last-child {
    border-bottom:none;
}

.sobre-phases li::before {
    content:counter(phase);
    flex-shrink:0;
    width:1.5rem;
    height:1.5rem;
    background:var(--brand-droplet-blue);
    color:var(--white);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.75rem;
    font-weight:var(--fw-bold);
    margin-top:0.1rem;
}

/* Note / blockquote */
.sobre-note {
    background:var(--bg-muted);
    border-left:0.1875rem solid var(--brand-droplet-blue);
    border-radius:0 var(--r-2) var(--r-2) 0;
    padding:0.75rem 1rem;
    margin:1rem 0 0;
    font-size:0.8125rem;
    color:var(--fg-default);
    line-height:1.6;
}

/* Tenant type list */
.sobre-tenant-list {
    list-style:none;
    padding:0;
    margin:0.75rem 0;
}

.sobre-tenant-list li {
    display:flex;
    gap:0.625rem;
    align-items:flex-start;
    padding:0.625rem 0;
    border-bottom:0.0625rem solid var(--border-soft);
    font-size:0.875rem;
    color:var(--fg-default);
    line-height:1.55;
    flex-wrap:wrap;
}

.sobre-tenant-list li:last-child {
    border-bottom:none;
}

/* Badge variants */
.sobre-badge-green {
    background:var(--success-bg);
    color:var(--success-dark);
    border:0.0625rem solid var(--success-light);
}

.sobre-badge-purple {
    background:var(--violet-soft-bg);
    color:var(--violet-soft-fg);
    border:0.0625rem solid var(--violet-soft-border);
}

.sobre-badge-orange {
    background:var(--alert-light);
    color:var(--alert);
    border:0.0625rem solid var(--alert-bg);
}

.sobre-badge-gray {
    background:var(--bg-muted);
    color:var(--fg-secondary);
    border:0.0625rem solid var(--border-soft);
}

/* Bullet list */
.sobre-ul {
    list-style:none;
    padding:0;
    margin:0.75rem 0;
}

.sobre-ul li {
    display:flex;
    gap:0.5rem;
    align-items:flex-start;
    padding:0.375rem 0;
    color:var(--fg-default);
    font-size:0.875rem;
    line-height:1.6;
}

.sobre-ul li::before {
    content:"›";
    color:var(--brand-droplet-blue);
    font-weight:var(--fw-bold);
    flex-shrink:0;
    margin-top:0.05rem;
}

.sobre-ul code {
    background:var(--bg-muted);
    border:0.0625rem solid var(--border-soft);
    border-radius:0.1875rem;
    padding:0.1em 0.35em;
    font-size:0.8125rem;
}

/* Footer note */
.sobre-footer {
    font-size:0.75rem;
    color:var(--fg-muted);
    text-align:right;
    margin-top:1.5rem;
    padding-top:0.75rem;
    border-top:0.0625rem solid var(--border-soft);
    font-style:italic;
}

/* ==============================================
   Diagrama sd-* (árvore Tenant→Contratos→Projects)
   ============================================== */
.sobre-diagram {
    background:var(--bg-muted);
    border:0.0625rem solid var(--border-soft);
    border-radius:var(--radius-xs);
    padding:1.25rem;
    margin:1rem 0;
    font-size:0.8125rem;
}

.sd-node {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0.4rem 0.875rem;
    border-radius:var(--r-2);
    font-size:0.8125rem;
    font-weight:var(--fw-bold);
    line-height:1.35;
    border:0.09375rem solid var(--border-strong);
    background:var(--bg-surface);
    color:var(--fg-default);
}

.sd-root {
    background:var(--brand-droplet-blue);
    color:var(--white);
    border-color:var(--brand-droplet-blue);
    font-size:0.9rem;
    display:block;
    width:fit-content;
    margin:0 auto 1rem;
}

.sd-contract {
    background:var(--action-bg);
    color:var(--action-fg);
    border-color:var(--brand-droplet-blue);
    white-space:nowrap;
}

.sd-project {
    background:var(--bg-surface);
    color:var(--fg-secondary);
    border-color:var(--border-soft);
    font-size:0.76rem;
    font-weight:normal;
}

.sd-row {
    display:flex;
    gap:1.5rem;
    justify-content:center;
    flex-wrap:wrap;
}

.sd-branch {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
}

.sd-children {
    display:flex;
    flex-direction:column;
    gap:0.375rem;
    padding-left:1rem;
    border-left:0.125rem solid var(--border-soft);
    margin-top:0.25rem;
}

.sd-market {
    gap:1.5rem;
    align-items:center;
}

.sd-market .sd-node {
    flex:1;
    min-width:7.5rem;
    padding:0.75rem;
}

.sd-market .sd-root {
    display:inline-flex;
    width:auto;
    margin:0;
}

.sd-caption {
    color:var(--fg-secondary);
    font-size:0.775rem;
    margin-top:0.875rem;
    line-height:1.55;
    font-style:italic;
}

/* ==============================================
   Fluxo sf-* (onboarding e configuração)
   ============================================== */
.sobre-flow {
    background:var(--bg-muted);
    border:0.0625rem solid var(--border-soft);
    border-radius:var(--radius-xs);
    padding:1.25rem;
    margin:1rem 0;
    font-size:0.8125rem;
    display:flex;
    flex-direction:column;
    gap:0;
}

.sf-step {
    background:var(--bg-surface);
    border:0.0625rem solid var(--border-soft);
    border-radius:var(--r-2);
    padding:0.625rem 0.875rem;
    color:var(--fg-default);
    line-height:1.5;
    display:flex;
    align-items:flex-start;
    gap:0.5rem;
}

.sf-step.sf-parallel {
    background:var(--bg-muted);
    border-style:dashed;
    border-color:var(--border-soft);
    margin-left:1.25rem;
    margin-top:0.125rem;
}

.sf-step.sf-active {
    background:var(--brand-droplet-green);
    border-color:var(--brand-droplet-green);
    color:var(--fg-strong);
    font-weight:var(--fw-bold);
}

.sf-n {
    flex-shrink:0;
    width:1.25rem;
    height:1.25rem;
    background:var(--brand-droplet-blue);
    color:var(--white);
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0.7rem;
    font-weight:var(--fw-bold);
    margin-top:0.1rem;
}

.sf-arrow {
    text-align:center;
    color:var(--fg-muted);
    font-size:1.125rem;
    line-height:1.2;
    padding:0.0625rem 0;
}

.sf-step code {
    background:var(--bg-muted);
    border:0.0625rem solid var(--border-soft);
    border-radius:0.1875rem;
    padding:0.05em 0.3em;
    font-size:0.775rem;
}

/* ==============================================
   Sequência sq-* (jornada End-User)
   ============================================== */
.sobre-seq {
    background:var(--bg-muted);
    border:0.0625rem solid var(--border-soft);
    border-radius:var(--radius-xs);
    padding:1.25rem;
    margin:1rem 0;
    font-size:0.8125rem;
    display:flex;
    flex-direction:column;
    gap:0.125rem;
}

.sq-step {
    background:var(--bg-surface);
    border:0.0625rem solid var(--border-soft);
    border-radius:var(--r-2);
    padding:0.6rem 0.875rem;
    color:var(--fg-default);
    line-height:1.5;
}

.sq-step.sq-active {
    background:var(--brand-droplet-green);
    border-color:var(--brand-droplet-green);
    color:var(--fg-strong);
    font-weight:var(--fw-bold);
}

.sq-actor {
    display:inline-block;
    background:var(--action-bg);
    color:var(--action-fg);
    border:0.0625rem solid var(--brand-droplet-blue);
    border-radius:0.25rem;
    padding:0.05em 0.4em;
    font-size:0.75rem;
    font-weight:var(--fw-bold);
    margin-right:0.375rem;
    white-space:nowrap;
}

.sq-step code {
    background:var(--bg-muted);
    border:0.0625rem solid var(--border-soft);
    border-radius:0.1875rem;
    padding:0.05em 0.3em;
    font-size:0.775rem;
}

/* FAQ */
.sobre-faq {
    list-style:none;
    padding:0;
    margin:0.75rem 0;
}

.sobre-faq li {
    padding:0.75rem 0;
    border-bottom:0.0625rem solid var(--border-soft);
}

.sobre-faq li:last-child {
    border-bottom:none;
}

.sobre-faq-q {
    font-weight:var(--fw-bold);
    color:var(--fg-strong);
    font-size:0.875rem;
    margin-bottom:0.375rem;
}

.sobre-faq-a {
    color:var(--fg-default);
    font-size:0.8125rem;
    line-height:1.6;
}

.sobre-faq-a code {
    background:var(--bg-muted);
    border:0.0625rem solid var(--border-soft);
    border-radius:0.1875rem;
    padding:0.05em 0.3em;
    font-size:0.775rem;
}

/* Imagens responsivas */
.sobre-img {
    max-width:100%;
    height:auto;
    border-radius:var(--radius-xs);
    border:0.0625rem solid var(--border-soft);
    display:block;
    margin:1rem 0;
}
.sobre-img-caption {
    font-size:0.75rem;
    color:var(--fg-muted);
    font-style:italic;
    margin-top:0.25rem;
    margin-bottom:1rem;
}

/* Code blocks (pre) */
.sobre-pre {
    background:var(--code-bg-dark);
    color:var(--border-soft);
    padding:1rem 1.25rem;
    border-radius:var(--radius-xs);
    overflow-x:auto;
    margin:0.75rem 0;
    font-family:'Fira Code', 'JetBrains Mono', Consolas, monospace;
    font-size:0.8125rem;
    line-height:1.55;
    white-space:pre;
    min-width:0;
}
.sobre-pre code {
    background:transparent;
    color:inherit;
    padding:0;
    font-size:inherit;
}

/* Inline code */
.sobre-inline-code {
    background:var(--info-light);
    color:var(--info-dark);
    border:0.0625rem solid var(--info);
    border-radius:0.1875rem;
    padding:0.1em 0.4em;
    font-family:'Fira Code', Consolas, monospace;
    font-size:0.8125rem;
}

/* Blockquote */
.sobre-quote {
    border-left:0.1875rem solid var(--brand-droplet-blue);
    background:var(--bg-muted);
    padding:0.75rem 1rem;
    border-radius:0 var(--r-2) var(--r-2) 0;
    margin:0.75rem 0;
    font-size:0.875rem;
    color:var(--fg-default);
    line-height:1.65;
}
.sobre-quote strong { color:var(--fg-strong); }

/* Ordered list */
.sobre-ol {
    padding-left:1.5rem;
    margin:0.75rem 0;
}
.sobre-ol li {
    color:var(--fg-default);
    font-size:0.875rem;
    line-height:1.65;
    margin-bottom:0.375rem;
}

/* Responsive */
@media (max-width:48rem) {
    .sobre-layout {
        flex-direction:column;
    }

    .sobre-nav {
        flex:none;
        width:100%;
        position:static;
    }
}

/* Clickable image link */
.sobre-img-link {
    display:block;
    cursor:zoom-in;
    text-decoration:none;
}
.sobre-img-link:hover .sobre-img {
    opacity:0.88;
    box-shadow:0 0.375rem 1.5rem rgba(var(--black-rgb),0.18);
    transition:opacity 0.15s, box-shadow 0.15s;
}
.sobre-img-caption a {
    color:var(--brand-droplet-blue);
    text-decoration:underline;
    font-size:0.75rem;
}
.sobre-img-caption a:hover {
    opacity:0.75;
}