/* ===== /recursos — layout de página (.rc-*) e fundação de mockups (.mock-*) ===== */

/* ---- Hub ---- */
.rc-hub-hero { padding: 5rem 1.5rem 3rem; text-align: center; }
.rc-hub-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; margin: 0 0 .75rem; }
.rc-hub-hero p { color: #6b7280; max-width: 40rem; margin: 0 auto; font-size: 1.125rem; }
.rc-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem 5rem; }
.rc-hub-card { display: flex; flex-direction: column; gap: .75rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 2rem; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.rc-hub-card:hover { border-color: hsl(250,85%,60%); box-shadow: 0 8px 30px rgba(80,60,220,.10); transform: translateY(-2px); }
.rc-hub-card .feature-icon { width: 3rem; height: 3rem; }
.rc-hub-card h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.rc-hub-card p { color: #6b7280; margin: 0; line-height: 1.55; }
.rc-hub-card .rc-link { margin-top: auto; }

/* ---- Link "Conhecer" ---- */
.rc-link { color: hsl(250,85%,60%); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.rc-link .icon { width: 1rem; height: 1rem; }

/* ---- Página de recurso: seção do mockup secundário e "Veja também" ---- */
.rc-secondary { padding: 4rem 1.5rem; background: #f8f8fb; }
.rc-secondary__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.rc-secondary__text h2 { font-size: 1.75rem; font-weight: 800; margin: 0 0 .75rem; }
.rc-secondary__text p { color: #6b7280; line-height: 1.6; }
.rc-secondary__inner > div { min-width: 0; }
@media (max-width: 860px) { .rc-secondary__inner { grid-template-columns: 1fr; } }
.rc-others { padding: 3rem 1.5rem 4rem; max-width: 1100px; margin: 0 auto; }
.rc-others h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.rc-others__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.rc-others__card { border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1.25rem; text-decoration: none; color: inherit; transition: border-color .15s; }
.rc-others__card:hover { border-color: hsl(250,85%,60%); }
.rc-others__card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; }
.rc-others__card p { font-size: .875rem; color: #6b7280; margin: 0; }

/* ---- Mockup: janela de app ---- */
/* min-width:0 evita que o item do grid do hero cresça para caber o
   conteúdo (ex.: mock-table com várias colunas), o que estourava a
   página no mobile (Financeiro e Clientes). O scroll horizontal do
   conteúdo largo fica contido dentro da própria janela do mockup. */
.nb-hero__mockup { min-width: 0; }
.mock-window { background: #fff; border: 1px solid #e5e7eb; border-radius: .875rem; box-shadow: 0 20px 50px rgba(20,20,45,.12); overflow-x: auto; overflow-y: hidden; font-size: .8125rem; text-align: left; }
.mock-bar { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; border-bottom: 1px solid #f0f0f4; background: #fafafc; }
.mock-dots { display: flex; gap: .375rem; }
.mock-dot { width: .625rem; height: .625rem; border-radius: 50%; }
.mock-dot--red { background: #f87171; } .mock-dot--yellow { background: #fbbf24; } .mock-dot--green { background: #34d399; }
.mock-bar__title { color: #9ca3af; font-size: .75rem; font-weight: 500; }
.mock-body { padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }

/* ---- Mockup: blocos genéricos ---- */
.mock-card { border: 1px solid #eceef2; border-radius: .625rem; padding: .875rem; background: #fff; }
.mock-card__title { font-weight: 700; font-size: .875rem; margin-bottom: .625rem; color: #111827; }
.mock-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .375rem 0; }
.mock-row__label { color: #6b7280; }
.mock-row__value { font-weight: 600; color: #111827; }
.mock-divider { border: 0; border-top: 1px dashed #e5e7eb; margin: .25rem 0; }
.mock-note { font-size: .75rem; color: #9ca3af; line-height: 1.45; }
.mock-highlight { display: flex; justify-content: space-between; align-items: center; background: hsl(250,85%,97%); border: 1px solid hsl(250,85%,88%); border-radius: .5rem; padding: .625rem .75rem; font-weight: 600; }
.mock-highlight strong { color: hsl(250,85%,55%); font-size: 1rem; }

/* ---- Mockup: badges ---- */
.mock-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .125rem .625rem; font-size: .6875rem; font-weight: 600; line-height: 1.6; background: #f3f4f6; color: #374151; }
.mock-badge--green { background: #ecfdf5; color: #047857; }
.mock-badge--amber { background: #fffbeb; color: #b45309; }
.mock-badge--red   { background: #fef2f2; color: #b91c1c; }
.mock-badge--primary { background: hsl(250,85%,96%); color: hsl(250,85%,50%); }
.mock-badge--outline { background: #fff; border: 1px solid #e5e7eb; }

/* ---- Mockup: botões, inputs, selects ---- */
.mock-btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; border-radius: .5rem; font-weight: 600; font-size: .8125rem; padding: .5rem .875rem; border: 1px solid transparent; }
.mock-btn--primary { background: hsl(250,85%,60%); color: #fff; }
.mock-btn--ghost { border-color: #e5e7eb; color: #374151; background: #fff; }
.mock-btn--block { width: 100%; }
.mock-input, .mock-select { border: 1px solid #e5e7eb; border-radius: .5rem; padding: .5rem .625rem; color: #111827; background: #fff; display: flex; justify-content: space-between; align-items: center; }
.mock-field label { display: block; font-size: .6875rem; font-weight: 600; color: #6b7280; margin-bottom: .25rem; }
.mock-select::after { content: "⌄"; color: #9ca3af; }

/* ---- Mockup: métricas ---- */
.mock-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .625rem; }
.mock-metric { border: 1px solid #eceef2; border-radius: .625rem; padding: .625rem .75rem; }
.mock-metric__label { font-size: .6875rem; color: #6b7280; margin-bottom: .125rem; }
.mock-metric__value { font-size: 1.0625rem; font-weight: 800; color: #111827; }
.mock-metric--green .mock-metric__value { color: #047857; }
.mock-metric--amber .mock-metric__value { color: #b45309; }
.mock-metric--red   .mock-metric__value { color: #b91c1c; }

/* ---- Mockup: tabela ---- */
.mock-table { width: 100%; border-collapse: collapse; }
.mock-table th { text-align: left; font-size: .6875rem; text-transform: none; color: #9ca3af; font-weight: 600; padding: .375rem .5rem; border-bottom: 1px solid #f0f0f4; }
.mock-table td { padding: .5rem; border-bottom: 1px solid #f6f7f9; vertical-align: middle; color: #374151; }
.mock-table tr:last-child td { border-bottom: 0; }
.mock-table .mock-cell-main { font-weight: 600; color: #111827; }
.mock-table .mock-cell-sub { font-size: .6875rem; color: #9ca3af; }
.mock-table .mock-cell-right { text-align: right; }
.mock-amount--pos { color: #047857; font-weight: 600; }
.mock-amount--neg { color: #b91c1c; font-weight: 600; }

/* ---- Mockup: seleção (radio-cards, checkboxes de dia, toggle, switch) ---- */
.mock-choices { display: grid; gap: .5rem; }
.mock-choice { display: flex; align-items: flex-start; gap: .625rem; border: 1px solid #e5e7eb; border-radius: .625rem; padding: .625rem .75rem; }
.mock-choice--selected { border-color: hsl(250,85%,60%); background: hsl(250,85%,98%); }
.mock-choice__radio { width: .875rem; height: .875rem; border-radius: 50%; border: 2px solid #d1d5db; margin-top: .125rem; flex: none; }
.mock-choice--selected .mock-choice__radio { border-color: hsl(250,85%,60%); background: radial-gradient(circle, hsl(250,85%,60%) 45%, #fff 50%); }
.mock-choice__title { font-weight: 600; color: #111827; }
.mock-choice__desc { font-size: .6875rem; color: #9ca3af; }
.mock-days { display: flex; gap: .375rem; flex-wrap: wrap; }
.mock-day { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; border-radius: .5rem; font-weight: 600; font-size: .6875rem; color: #6b7280; }
.mock-day--on { background: hsl(250,85%,60%); border-color: hsl(250,85%,60%); color: #fff; }
.mock-toggle { display: inline-flex; border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; }
.mock-toggle span { padding: .3125rem .75rem; font-weight: 600; color: #6b7280; }
.mock-toggle span.mock-toggle--on { background: hsl(250,85%,60%); color: #fff; }

/* ---- Mockup: tags e avatar ---- */
.mock-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: hsl(250,85%,94%); color: hsl(250,85%,50%); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .6875rem; flex: none; }
.mock-tags { display: flex; gap: .375rem; flex-wrap: wrap; }

/* ---- Ajustes do mockup no hero (nb-hero__mockup já centraliza) ---- */
.nb-hero__mockup .mock-window { width: 100%; max-width: 420px; }
.rc-secondary .mock-window { max-width: 420px; margin: 0 auto; }