/* ════════════════════════════════════════════════════════════════════════
RadioHost — tema azul/ciano, claro/escuro via [data-theme] no
════════════════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="light"] {
--rh-primary: #0ea5e9;
--rh-primary-dark: #0369a1;
--rh-primary-light: #38bdf8;
--rh-accent: #06b6d4;
--rh-success: #10b981;
--rh-danger: #ef4444;
--rh-warning: #f59e0b;
--rh-bg: #f2f6fb;
--rh-surface: #ffffff;
--rh-surface-2: #f7fafc;
--rh-text: #0f172a;
--rh-text-secondary: #5b6b83;
--rh-border: #e3e9f2;
--rh-hero-from: #082f49;
--rh-hero-to: #0b1220;
--rh-shadow: 0 10px 30px rgba(15, 23, 42, .08);
--rh-scrollbar-thumb: #c9d4e3;
--rh-scrollbar-track: transparent;
--rh-sidebar-bg: #eef1f6;
--rh-sidebar-text: #0f172a;
--rh-sidebar-link: #55627a;
--rh-sidebar-active-bg: #e0f2fe;
--rh-sidebar-active-text: #0369a1;
}
:root[data-theme="dark"] {
--rh-primary: #3b82f6;
--rh-primary-dark: #2563eb;
--rh-primary-light: #60a5fa;
--rh-accent: #3b82f6;
--rh-success: #34d399;
--rh-danger: #f87171;
--rh-warning: #fbbf24;
--rh-bg: #080b14;
--rh-surface: #101524;
--rh-surface-2: #0c1120;
--rh-text: #e6edf7;
--rh-text-secondary: #8b96ab;
--rh-border: #1e2740;
--rh-hero-from: #080b14;
--rh-hero-to: #030509;
--rh-shadow: 0 10px 30px rgba(0, 0, 0, .55);
--rh-scrollbar-thumb: #263355;
--rh-scrollbar-track: transparent;
--rh-sidebar-bg: var(--rh-hero-to);
--rh-sidebar-text: #fff;
--rh-sidebar-link: #cbd5e1;
--rh-sidebar-active-bg: rgba(56,189,248,.18);
--rh-sidebar-active-text: #fff;
}
* { box-sizing: border-box; }
html, body {
overflow-x: hidden;
max-width: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--rh-bg);
color: var(--rh-text);
transition: background-color .2s ease, color .2s ease;
}
img, svg, table, .table-responsive, pre { max-width: 100%; }
a { color: var(--rh-primary); text-decoration: none; }
a:hover { color: var(--rh-primary-dark); }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; }
/* Scrollbar discreta (não remove, só deixa elegante) */
* { scrollbar-width: thin; scrollbar-color: var(--rh-scrollbar-thumb) var(--rh-scrollbar-track); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--rh-scrollbar-thumb); border-radius: 8px; }
/* Scrollbar praticamente invisível (só aparece sutilmente ao passar o mouse) —
usada no card de detalhes do cliente, que costuma rolar bastante, e em todo
.modal-body do sistema (modais com modal-dialog-scrollable), para que a
barra de rolagem não fique poluindo visualmente os modais. */
.rh-scroll-subtle,
.modal-body {
scrollbar-color: transparent transparent;
}
.rh-scroll-subtle::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
background: transparent;
}
.rh-scroll-subtle:hover,
.modal-body:hover {
scrollbar-color: var(--rh-scrollbar-thumb) transparent;
}
.rh-scroll-subtle:hover::-webkit-scrollbar-thumb,
.modal-body:hover::-webkit-scrollbar-thumb {
background: var(--rh-scrollbar-thumb);
}
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
/* ── Botões ───────────────────────────────────────────────────────────── */
.rh-btn-primary {
background: var(--rh-accent);
border: none;
color: #fff;
font-weight: 700;
box-shadow: 0 4px 14px rgba(6, 182, 212, .28);
transition: filter .15s ease, transform .15s ease;
}
/* Precisa redeclarar o background aqui: a regra .btn:hover do Bootstrap
(classe + pseudo-classe) é mais específica que .rh-btn-primary sozinha
(só classe), então sem isso o hover cai para --bs-btn-hover-bg (não
definida para esta classe) e o botão vira transparente/branco. */
.rh-btn-primary:hover { background: var(--rh-accent); color: #fff; filter: brightness(1.1); transform: translateY(-1px); }
.rh-btn-primary:disabled, .rh-btn-primary.disabled { opacity: .6; transform: none; }
/* Botões retangulares com cantos discretos (5px) em vez de "pill" — aplica-se
apenas a botões reais (.btn), não a badges/avatares que também usam a
utilidade .rounded-pill do Bootstrap. */
.btn.rounded-pill { border-radius: 5px !important; }
.rh-btn-icon {
width: 38px; height: 38px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--rh-border); background: var(--rh-surface); color: var(--rh-text-secondary);
transition: all .15s ease;
}
.rh-btn-icon:hover { border-color: var(--rh-primary); color: var(--rh-primary); }
.rh-icon-btn {
width: 40px !important; height: 40px !important; padding: 0 !important;
border-radius: 5px !important;
display: inline-flex !important; align-items: center; justify-content: center;
font-size: 1.05rem;
}
/* Barra de ações do detalhe da fatura (admin): botões compactos para caber
Editar/WhatsApp/Pagamento/"..."/Fechar numa única linha sem parecer pesado. */
.rh-invoice-actions .rh-icon-btn {
width: 30px !important; height: 30px !important;
font-size: .85rem;
}
.rh-invoice-actions .dropdown-toggle::after { display: none; }
.rh-invoice-actions .btn-success.rounded-pill,
.rh-invoice-actions .dropdown-toggle { height: 30px; display: inline-flex; align-items: center; font-size: .8rem; }
/* Botão de fechar (X) da visualização em split-view de faturas — menor que o
padrão de 40px do .rh-icon-btn, já que fica ao lado das abas, não da barra
de ações. */
.rh-icon-btn-sm { width: 26px !important; height: 26px !important; font-size: .75rem; }
/* Botões e form-controls em dark mode */
[data-theme="dark"] .btn-outline-secondary { color: var(--rh-text-secondary); border-color: var(--rh-border); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--rh-surface-2); color: var(--rh-text); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
background-color: var(--rh-surface-2); color: var(--rh-text); border-color: var(--rh-border);
}
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus {
background-color: var(--rh-surface-2); color: var(--rh-text);
}
[data-theme="dark"] .form-control::placeholder { color: #64748b; }
[data-theme="dark"] .modal-content { background: var(--rh-surface); color: var(--rh-text); }
[data-theme="dark"] .dropdown-menu { background: var(--rh-surface); border-color: var(--rh-border); }
[data-theme="dark"] .dropdown-item { color: var(--rh-text); }
[data-theme="dark"] .dropdown-item:hover { background: var(--rh-surface-2); color: var(--rh-text); }
[data-theme="dark"] .table { color: var(--rh-text); }
[data-theme="dark"] .table-rh { border-color: var(--rh-border); }
[data-theme="dark"] .nav-pills .nav-link { color: var(--rh-text-secondary); }
[data-theme="dark"] hr { border-color: var(--rh-border); }
/* ── Landing page ─────────────────────────────────────────────────────── */
.rh-navbar {
background: rgba(8, 15, 30, 0.85);
backdrop-filter: blur(8px);
position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
}
.rh-navbar .navbar-brand { font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.rh-navbar .nav-link { color: #cbd5e1 !important; font-weight: 500; }
.rh-navbar .nav-link:hover { color: #fff !important; }
.rh-navbar .navbar-toggler { border-color: rgba(255,255,255,.35); }
.rh-navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
.rh-navbar .navbar-collapse {
background: #0b1220; border-radius: 14px; padding: 16px; margin-top: 12px;
border: 1px solid rgba(255,255,255,.08);
}
}
/* Páginas simples (sem hero) que usam .rh-navbar fixa precisam desse respiro no topo,
senão o conteúdo nasce escondido atrás da barra fixa. */
body.rh-simple-page { padding-top: 88px; }
@media (max-width: 575.98px) {
body.rh-simple-page { padding-top: 76px; }
}
.rh-hero {
background: radial-gradient(circle at 20% 20%, var(--rh-hero-from) 0%, var(--rh-hero-to) 65%, #000 100%);
color: #fff;
padding: 150px 0 90px;
position: relative;
overflow: hidden;
}
.rh-hero::after {
content: "";
position: absolute; inset: 0;
background: repeating-linear-gradient(120deg, rgba(56,189,248,.06) 0 2px, transparent 2px 40px);
pointer-events: none;
}
.rh-hero .badge-live { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.4); }
.rh-hero h1 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.rh-hero .lead { color: #cbd5e1; }
.rh-gradient-text {
background: linear-gradient(90deg, var(--rh-accent), var(--rh-primary-light));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.rh-hero-image {
max-width: 100%; border-radius: 20px; border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.rh-placeholder-img {
width: 100%; aspect-ratio: 16/10; border-radius: 20px;
background: linear-gradient(135deg, #0c2540, #0891b2);
border: 2px dashed rgba(255,255,255,.3);
display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
color: rgba(255,255,255,.75); text-align: center; padding: 20px;
}
.rh-section-title { font-weight: 800; letter-spacing: -0.02em; color: var(--rh-text); }
.rh-section-sub { color: var(--rh-text-secondary); }
section { background: var(--rh-bg); }
.rh-section-alt { background: var(--rh-surface-2); }
.rh-feature-icon {
width: 56px; height: 56px; border-radius: 16px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--rh-primary-dark), var(--rh-primary));
color: #fff; font-size: 24px; flex-shrink: 0;
}
.rh-feature-card h5, .rh-feature-card p { color: var(--rh-text); }
.rh-feature-card p { color: var(--rh-text-secondary); }
/* ── Cards de plano (estilo tabela de preços com itens) ──────────────────── */
.rh-plan-card {
border: 1px solid var(--rh-border);
border-radius: 18px;
transition: transform .18s ease, box-shadow .18s ease;
background: var(--rh-surface);
height: 100%;
display: flex; flex-direction: column;
}
.rh-plan-card:hover { transform: translateY(-6px); box-shadow: var(--rh-shadow); }
.rh-plan-card.featured { border: 2px solid var(--rh-primary); position: relative; }
.rh-plan-card.featured::before {
content: "MAIS POPULAR";
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: linear-gradient(90deg, var(--rh-primary-dark), var(--rh-primary));
color: #fff; font-size: 11px; font-weight: 800;
padding: 5px 16px; border-radius: 20px; letter-spacing: .06em; white-space: nowrap;
}
.rh-plan-badge {
display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em;
color: var(--rh-primary-dark); background: color-mix(in srgb, var(--rh-primary) 12%, transparent);
padding: 4px 12px; border-radius: 20px; margin-bottom: 10px;
}
[data-theme="dark"] .rh-plan-badge { color: var(--rh-primary-light); }
/* ── Miniatura de vídeo (lista de tutoriais) ─────────────────────────────
YouTube tem uma URL de miniatura estática previsível (sem chamada de API);
quando não há miniatura real (Vimeo, ou URL não reconhecida), mostra um
bloco com gradiente e ícone de play como marcador simples. */
.rh-tutorial-cover {
position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; cursor: pointer;
background: linear-gradient(135deg, var(--rh-primary), var(--rh-primary-dark));
}
.rh-tutorial-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-tutorial-cover i {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-size: 2.5rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.rh-tutorial-thumb {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 36px; border-radius: 6px; overflow: hidden;
background: linear-gradient(135deg, var(--rh-primary), var(--rh-primary-dark));
}
.rh-tutorial-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-tutorial-thumb i { position: absolute; font-size: 1.1rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.rh-plan-name { color: var(--rh-text); font-weight: 800; }
.rh-plan-desc { color: var(--rh-text-secondary); min-height: 40px; }
.rh-plan-price { font-size: 2.4rem; font-weight: 800; color: var(--rh-text); }
.rh-plan-price small { font-size: 1rem; font-weight: 500; color: var(--rh-text-secondary); }
.rh-plan-card .feature-list { list-style: none; padding: 0; margin: 0 0 20px; flex-grow: 1; }
.rh-plan-card .feature-list li {
padding: 8px 0; color: var(--rh-text-secondary); display: flex; align-items: flex-start; gap: 8px;
border-bottom: 1px dashed var(--rh-border); font-size: .93rem;
}
.rh-plan-card .feature-list li:last-child { border-bottom: none; }
.rh-plan-card .feature-list li i { color: var(--rh-success); margin-top: 2px; }
/* ── Carrossel de planos (3 visíveis, swipe no mobile, setas no desktop) ── */
.rh-plan-carousel-wrap { display: flex; align-items: center; gap: 10px; }
.rh-plan-carousel {
display: flex; gap: 20px; flex: 1 1 auto; min-width: 0;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; padding: 6px 2px 14px;
scrollbar-width: none; -ms-overflow-style: none;
}
.rh-plan-carousel::-webkit-scrollbar { display: none; }
.rh-plan-slide {
flex: 0 0 calc((100% - 40px) / 3); max-width: 300px; min-width: 220px;
scroll-snap-align: start;
}
@media (max-width: 991px) { .rh-plan-slide { flex: 0 0 70%; } }
@media (max-width: 575px) { .rh-plan-slide { flex: 0 0 84%; } }
.rh-carousel-arrow {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
border: 1px solid var(--rh-border); background: var(--rh-surface); color: var(--rh-text);
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.rh-carousel-arrow:hover:not(:disabled) { color: #fff; background: var(--rh-primary); border-color: var(--rh-primary); }
.rh-carousel-arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 767px) { .rh-carousel-arrow { display: none !important; } }
/* ── Listas com paginação/busca silenciosas ──────────────────────────────── */
.rh-ajax-list.rh-ajax-loading { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
footer.rh-footer { background: var(--rh-hero-to); color: #94a3b8; }
footer.rh-footer a { color: #cbd5e1; text-decoration: none; }
footer.rh-footer a:hover { color: #fff; }
/* Modais com