/* =========================================================
   Registro de Saídas - Instrucamp
   ========================================================= */

/* Paleta alinhada ao site instrucamp.com.br
   fundo #060910 · superfície #111827 · azul #1E3A8A · ação #2563EB
   destaque #CC3366 · texto claro #F0F4FF · tipografia Inter */

/* As variáveis ficam no :root porque o modal e o toast são montados no body,
   fora do container do painel — se ficassem só no .ris-app, os elementos de
   fora herdariam cor nenhuma e sumiriam no fundo. */
:root {
	--ris-escuro: #060910;
	--ris-escuro-2: #0d1117;
	--ris-escuro-3: #111827;
	--ris-azul: #1e3a8a;
	--ris-azul-forte: #17306f;
	--ris-azul-claro: #2563eb;
	--ris-azul-suave: #eef3fd;
	--ris-destaque: #cc3366;
	--ris-texto-claro: #f0f4ff;
	--ris-texto: #0f172a;
	--ris-texto-suave: #64748b;
	--ris-borda: #e2e8f0;
	--ris-fundo: #f5f7fb;
	--ris-branco: #ffffff;
	--ris-verde: #16a34a;
	--ris-verde-forte: #15803d;
	--ris-amarelo: #ca8a04;
	--ris-vermelho: #dc2626;
	--ris-vermelho-forte: #b91c1c;
	--ris-laranja: #ea580c;
	--ris-raio: 10px;
	--ris-fonte: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ris-sombra: 0 1px 2px rgba(6, 9, 16, .06), 0 4px 14px rgba(6, 9, 16, .06);
}

.ris-app {
	box-sizing: border-box;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--ris-texto);
	font-size: 14px;
	line-height: 1.5;
	background: var(--ris-fundo);
	border-radius: var(--ris-raio);
	padding: 0;
	margin: 0 auto;
	max-width: 1280px;
	min-height: 420px;
}

/* O modal e o toast vivem fora do .ris-app; repetir o escopo aqui garante que
   tipografia, formulários e tabelas sejam os mesmos dentro e fora do painel. */
.ris-app *, .ris-app *::before, .ris-app *::after,
.ris-modal-fundo *, .ris-modal-fundo *::before, .ris-modal-fundo *::after { box-sizing: border-box; }

.ris-modal-fundo {
	font-family: var(--ris-fonte);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ris-texto);
}

.ris-app p, .ris-modal-fundo p { margin: 0 0 10px; }
.ris-app h1, .ris-app h2, .ris-app h3, .ris-app h4,
.ris-modal-fundo h1, .ris-modal-fundo h2, .ris-modal-fundo h3, .ris-modal-fundo h4 { margin: 0 0 10px; line-height: 1.25; color: var(--ris-texto); }
.ris-app a, .ris-modal-fundo a { color: var(--ris-azul-claro); }
.ris-app table, .ris-modal-fundo table { border-collapse: collapse; width: 100%; }

/* ---------- Boot / carregamento ---------- */
.ris-boot { padding: 60px 20px; text-align: center; color: var(--ris-texto-suave); }
.ris-spinner {
	width: 34px; height: 34px; margin: 0 auto 14px;
	border: 3px solid var(--ris-borda); border-top-color: var(--ris-azul-claro);
	border-radius: 50%; animation: ris-girar .8s linear infinite;
}
@keyframes ris-girar { to { transform: rotate(360deg); } }

/* ---------- Painel em tela cheia ----------
   O painel sai do container do tema e passa a ocupar a janela inteira.
   O cabeçalho, a navegação e a faixa de demonstração ficam fixos; só o
   conteúdo rola, o que mantém o menu sempre alcançável. */
.ris-app--cheia {
	position: fixed; inset: 0; z-index: 99990;
	max-width: none; margin: 0; border-radius: 0; min-height: 0;
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--ris-fundo);
}
.ris-app--cheia .ris-topo { border-radius: 0; }
.ris-app--cheia .ris-topo,
.ris-app--cheia .ris-nav,
.ris-app--cheia .ris-faixa-demo,
.ris-app--cheia .ris-boot { flex: 0 0 auto; }
.ris-app--cheia .ris-conteudo {
	flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
	-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.ris-app--cheia .ris-boot { margin: auto; }

/* Impede a rolagem da página atrás do painel (evita barra dupla). */
body.ris-tela-cheia { overflow: hidden; }

/* No celular, cabeçalho + menu + faixa consomem quase um terço da tela se
   ficarem fixos. Aí o painel inteiro rola junto e o topo sai do caminho. */
@media (max-width: 720px) {
	.ris-app--cheia {
		display: block; overflow-y: auto;
		-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
	}
	.ris-app--cheia .ris-conteudo { overflow: visible; }
}

/* Não cobre a barra de administração do WordPress. */
body.admin-bar .ris-app--cheia, body.admin-bar .ris-app--login { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .ris-app--cheia, body.admin-bar .ris-app--login { top: 46px; }
}

/* Link discreto para voltar ao site, já que o menu do tema fica coberto. */
.ris-voltar-site, a.ris-voltar-site {
	color: rgba(240, 244, 255, .6) !important; font-size: 12px; font-weight: 600;
	text-decoration: none !important; padding: 7px 10px; border-radius: 7px;
	white-space: nowrap; font-family: var(--ris-fonte);
}
.ris-voltar-site:hover, .ris-voltar-site:focus, a.ris-voltar-site:hover, a.ris-voltar-site:focus {
	color: #fff !important; background-color: rgba(255, 255, 255, .12) !important;
}

/* ---------- Login ---------- */

/* Em tela de login o painel sai do container do tema e ocupa a janela inteira. */
.ris-app--login {
	position: fixed; inset: 0; z-index: 99990;
	max-width: none; margin: 0; border-radius: 0;
	overflow-y: auto; background: var(--ris-escuro);
	-webkit-overflow-scrolling: touch;
}

.ris-login {
	display: flex; justify-content: center; align-items: center;
	padding: 40px 16px; background: var(--ris-escuro);
	border-radius: var(--ris-raio); min-height: 420px;
	background-image:
		radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .30), transparent 62%),
		radial-gradient(circle at 88% 96%, rgba(204, 51, 102, .16), transparent 55%);
}
.ris-app--login .ris-login { min-height: 100vh; min-height: 100dvh; border-radius: 0; }
.ris-login__card {
	background: var(--ris-branco); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45); width: 100%; max-width: 430px; overflow: hidden;
}
.ris-login__marca {
	background: var(--ris-escuro); padding: 26px 28px 22px; text-align: center;
	border-bottom: 3px solid var(--ris-azul);
}
.ris-login__marca img { max-height: 64px; max-width: 260px; display: inline-block; }
.ris-login__marca-texto { color: var(--ris-texto-claro); font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.ris-login__corpo { padding: 26px 28px 28px; }
.ris-login__titulo { text-align: center; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.ris-login__sub { text-align: center; color: var(--ris-texto-suave); font-size: 13px; margin-bottom: 22px; }
.ris-login__rodape { margin-top: 16px; text-align: center; font-size: 13px; }
.ris-login__rodape button {
	background-color: transparent !important; background-image: none !important; border: 0 !important;
	color: var(--ris-azul-claro) !important; cursor: pointer; padding: 4px 8px; font-size: 13px;
	border-radius: 6px; font-family: var(--ris-fonte); box-shadow: none !important;
}
.ris-login__rodape button:hover, .ris-login__rodape button:focus {
	color: var(--ris-azul) !important; background-color: var(--ris-azul-suave) !important; text-decoration: underline !important;
}
.ris-login__assinatura { text-align: center; color: rgba(240, 244, 255, .45); font-size: 11px; margin-top: 18px; }

/* ---------- Cabeçalho ---------- */
.ris-topo {
	background: var(--ris-escuro); color: var(--ris-texto-claro);
	border-radius: var(--ris-raio) var(--ris-raio) 0 0;
	padding: 14px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ris-topo__marca { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 200px; }
.ris-topo__marca img { max-height: 40px; max-width: 190px; }
.ris-topo__titulo { font-size: 16px; font-weight: 700; line-height: 1.2; }
.ris-topo__sub { font-size: 12px; color: rgba(240, 244, 255, .6); }
.ris-topo__usuario { display: flex; align-items: center; gap: 10px; }
.ris-avatar {
	width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
	font-weight: 700; font-size: 13px; color: #fff; flex: 0 0 auto;
}
.ris-topo__nome { font-size: 13px; font-weight: 600; }
.ris-topo__perfil { font-size: 11px; color: rgba(240, 244, 255, .6); }
.ris-sair, button.ris-sair {
	background-color: rgba(255,255,255,.12) !important; background-image: none !important;
	color: var(--ris-texto-claro) !important; border: 1px solid rgba(255,255,255,.16) !important;
	border-radius: 7px; padding: 7px 13px; cursor: pointer; font-size: 12px; font-weight: 600;
	font-family: var(--ris-fonte); text-decoration: none !important; box-shadow: none !important;
}
.ris-sair:hover, .ris-sair:focus, button.ris-sair:hover, button.ris-sair:focus {
	background-color: rgba(255,255,255,.26) !important; color: #fff !important; border-color: rgba(255,255,255,.34) !important;
}

/* ---------- Navegação ---------- */
.ris-nav {
	display: flex; gap: 2px; background: var(--ris-escuro-3); padding: 0 10px; overflow-x: auto;
	scrollbar-width: thin;
}
.ris-nav button {
	background-color: transparent !important; background-image: none !important; border: 0 !important;
	color: rgba(240, 244, 255, .68) !important; padding: 12px 15px; cursor: pointer;
	font-size: 13px; font-weight: 600; white-space: nowrap;
	border-bottom: 3px solid transparent !important; border-radius: 0;
	font-family: var(--ris-fonte); text-decoration: none !important; box-shadow: none !important;
	transition: background-color .15s, color .15s;
}
.ris-nav button:hover, .ris-nav button:focus {
	background-color: rgba(255, 255, 255, .08) !important; color: #fff !important;
}
.ris-nav button.ativo, .ris-nav button.ativo:hover {
	color: #fff !important; border-bottom-color: var(--ris-azul-claro) !important;
	background-color: rgba(37, 99, 235, .22) !important;
}
.ris-nav .ris-badge { margin-left: 6px; }

/* ---------- Faixa de demonstração ---------- */
.ris-faixa-demo {
	background: repeating-linear-gradient(45deg, #cc3366, #cc3366 12px, #b82d5b 12px, #b82d5b 24px);
	color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em;
	padding: 8px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ris-faixa-demo button {
	background-color: rgba(255, 255, 255, .22) !important; background-image: none !important;
	border: 0 !important; color: #fff !important; border-radius: 6px;
	padding: 4px 11px; font-size: 11px; font-weight: 700; cursor: pointer;
	font-family: var(--ris-fonte); text-decoration: none !important; box-shadow: none !important;
}
.ris-faixa-demo button:hover, .ris-faixa-demo button:focus {
	background-color: rgba(255, 255, 255, .4) !important; color: #fff !important;
}

/* ---------- Conteúdo ---------- */
.ris-conteudo { padding: 20px; }
.ris-secao { margin-bottom: 24px; }
.ris-secao__titulo {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	flex-wrap: wrap; margin-bottom: 12px;
}
.ris-secao__titulo h2 { font-size: 16px; margin: 0; }
.ris-secao__titulo p { margin: 2px 0 0; font-size: 12px; color: var(--ris-texto-suave); }

.ris-card {
	background: var(--ris-branco); border: 1px solid var(--ris-borda);
	border-radius: var(--ris-raio); box-shadow: var(--ris-sombra); padding: 18px;
}
.ris-card + .ris-card { margin-top: 16px; }
.ris-grid > .ris-card + .ris-card { margin-top: 0; } /* no grid o espaçamento vem do gap */
.ris-card__titulo { font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------- Grid ---------- */
.ris-grid { display: grid; gap: 16px; }
.ris-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ris-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ris-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ris-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---------- KPIs ---------- */
.ris-kpi {
	background: var(--ris-branco); border: 1px solid var(--ris-borda); border-radius: var(--ris-raio);
	padding: 14px 16px; box-shadow: var(--ris-sombra); border-left: 4px solid var(--ris-azul-claro);
}
.ris-kpi__rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ris-texto-suave); font-weight: 700; }
.ris-kpi__valor { font-size: 26px; font-weight: 800; line-height: 1.15; margin: 4px 0 2px; }
.ris-kpi__extra { font-size: 12px; color: var(--ris-texto-suave); }
.ris-kpi--verde { border-left-color: var(--ris-verde); }
.ris-kpi--amarelo { border-left-color: var(--ris-amarelo); }
.ris-kpi--vermelho { border-left-color: var(--ris-vermelho); }
.ris-kpi--laranja { border-left-color: var(--ris-laranja); }

/* ---------- Formulários ---------- */
.ris-campo { margin-bottom: 14px; }
.ris-campo label { display: block; font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 5px; }
.ris-campo .ris-dica { font-size: 11px; color: var(--ris-texto-suave); font-weight: 400; margin-top: 4px; display: block; }
.ris-app input[type="text"], .ris-app input[type="email"], .ris-app input[type="password"],
.ris-app input[type="date"], .ris-app input[type="time"], .ris-app input[type="number"],
.ris-app input[type="tel"], .ris-app input[type="url"], .ris-app select, .ris-app textarea,
.ris-modal-fundo input[type="text"], .ris-modal-fundo input[type="email"], .ris-modal-fundo input[type="password"],
.ris-modal-fundo input[type="date"], .ris-modal-fundo input[type="time"], .ris-modal-fundo input[type="number"],
.ris-modal-fundo input[type="tel"], .ris-modal-fundo input[type="url"], .ris-modal-fundo select, .ris-modal-fundo textarea {
	width: 100% !important; padding: 9px 11px !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important;
	font-size: 14px !important; font-family: var(--ris-fonte) !important; color: var(--ris-texto) !important;
	background-color: #fff !important; background-image: none !important;
	box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important;
	transition: border-color .15s, box-shadow .15s;
}
.ris-app input:focus, .ris-app select:focus, .ris-app textarea:focus,
.ris-modal-fundo input:focus, .ris-modal-fundo select:focus, .ris-modal-fundo textarea:focus {
	outline: none !important; border-color: var(--ris-azul-claro) !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
}
.ris-app textarea, .ris-modal-fundo textarea { min-height: 82px !important; resize: vertical; }
.ris-app input[type="checkbox"], .ris-modal-fundo input[type="checkbox"] {
	width: auto !important; margin-right: 6px; accent-color: var(--ris-azul-claro);
}
.ris-app select, .ris-modal-fundo select { appearance: auto; }
.ris-check { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #334155; cursor: pointer; }
.ris-linha { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---------- Botões ----------
   Os temas do WordPress costumam definir estilos próprios para button/a,
   principalmente no :hover. Cada estado abaixo declara cor de fundo, texto e
   borda de forma explícita para que o botão nunca dependa do tema e nunca
   "suma" ao passar o mouse. */

.ris-btn,
a.ris-btn,
button.ris-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	background-color: var(--ris-azul) !important;
	background-image: none !important;
	color: #fff !important;
	border: 1px solid var(--ris-azul) !important;
	border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700;
	line-height: 1.3; cursor: pointer; text-decoration: none !important;
	text-transform: none !important; letter-spacing: normal;
	font-family: var(--ris-fonte); box-shadow: none !important;
	filter: none !important; opacity: 1;
	transition: background-color .15s, border-color .15s, color .15s;
}
.ris-btn:hover, .ris-btn:focus, .ris-btn:focus-visible, .ris-btn:active,
a.ris-btn:hover, a.ris-btn:focus, a.ris-btn:active,
button.ris-btn:hover, button.ris-btn:focus, button.ris-btn:active {
	background-color: var(--ris-azul-forte) !important;
	border-color: var(--ris-azul-forte) !important;
	color: #fff !important;
	text-decoration: none !important;
}
.ris-btn:focus-visible { outline: 2px solid var(--ris-azul-claro) !important; outline-offset: 2px; }
.ris-btn:disabled, .ris-btn[disabled] { opacity: .55 !important; cursor: not-allowed; }

.ris-btn--bloco { width: 100%; }

.ris-btn--secundario, a.ris-btn--secundario, button.ris-btn--secundario {
	background-color: #fff !important; color: var(--ris-azul) !important; border-color: #cbd5e1 !important;
}
.ris-btn--secundario:hover, .ris-btn--secundario:focus, .ris-btn--secundario:active,
button.ris-btn--secundario:hover, button.ris-btn--secundario:focus, button.ris-btn--secundario:active {
	background-color: var(--ris-azul-suave) !important; color: var(--ris-azul) !important; border-color: var(--ris-azul-claro) !important;
}

.ris-btn--perigo, a.ris-btn--perigo, button.ris-btn--perigo {
	background-color: var(--ris-vermelho) !important; border-color: var(--ris-vermelho) !important; color: #fff !important;
}
.ris-btn--perigo:hover, .ris-btn--perigo:focus, .ris-btn--perigo:active,
button.ris-btn--perigo:hover, button.ris-btn--perigo:focus, button.ris-btn--perigo:active {
	background-color: var(--ris-vermelho-forte) !important; border-color: var(--ris-vermelho-forte) !important; color: #fff !important;
}

.ris-btn--sucesso, a.ris-btn--sucesso, button.ris-btn--sucesso {
	background-color: var(--ris-verde) !important; border-color: var(--ris-verde) !important; color: #fff !important;
}
.ris-btn--sucesso:hover, .ris-btn--sucesso:focus, .ris-btn--sucesso:active,
button.ris-btn--sucesso:hover, button.ris-btn--sucesso:focus, button.ris-btn--sucesso:active {
	background-color: var(--ris-verde-forte) !important; border-color: var(--ris-verde-forte) !important; color: #fff !important;
}

/* Usado sobre o cabeçalho escuro, onde o azul principal fica fechado demais. */
.ris-btn--destaque, button.ris-btn--destaque {
	background-color: var(--ris-azul-claro) !important; border-color: var(--ris-azul-claro) !important; color: #fff !important;
}
.ris-btn--destaque:hover, .ris-btn--destaque:focus, .ris-btn--destaque:active,
button.ris-btn--destaque:hover, button.ris-btn--destaque:focus {
	background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important;
}

.ris-btn--pequeno { padding: 6px 11px; font-size: 12px; border-radius: 7px; }

.ris-btn--link, button.ris-btn--link {
	background-color: transparent !important; border-color: transparent !important;
	color: var(--ris-azul-claro) !important; padding: 4px 6px; font-weight: 600;
}
.ris-btn--link:hover, button.ris-btn--link:hover {
	background-color: var(--ris-azul-suave) !important; color: var(--ris-azul) !important; border-color: transparent !important;
}

.ris-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Alertas ---------- */
.ris-alerta {
	border-radius: 8px; padding: 11px 14px; font-size: 13px; margin-bottom: 14px;
	border-left: 4px solid var(--ris-azul-claro); background: var(--ris-azul-suave); color: #1e3a8a;
}
.ris-alerta--erro { background: #fef2f2; border-left-color: var(--ris-vermelho); color: #991b1b; }
.ris-alerta--sucesso { background: #f0fdf4; border-left-color: var(--ris-verde); color: #166534; }
.ris-alerta--aviso { background: #fff7ed; border-left-color: var(--ris-laranja); color: #9a3412; }
.ris-alerta strong { display: block; margin-bottom: 3px; }
.ris-alerta li strong { display: inline; margin: 0; }
.ris-alerta ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Badges ---------- */
.ris-badge {
	display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px;
	font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.ris-badge--agendada { background: #dbeafe; color: #1e40af; }
.ris-badge--pendente { background: #fef3c7; color: #92400e; }
.ris-badge--em_andamento { background: #e0f2fe; color: #075985; }
.ris-badge--concluida { background: #dcfce7; color: #166534; }
.ris-badge--cancelada { background: #fee2e2; color: #991b1b; }
.ris-badge--recusada { background: #fee2e2; color: #991b1b; }
.ris-badge--planejada { background: #dbeafe; color: #1e40af; }
.ris-badge--realizada { background: #dcfce7; color: #166534; }
.ris-badge--remarcada { background: #fef3c7; color: #92400e; }
.ris-badge--atraso { background: #ffedd5; color: #9a3412; }
.ris-badge--neutro { background: #e2e8f0; color: #334155; }

/* ---------- Tabelas ---------- */
.ris-tabela-wrap { overflow-x: auto; border: 1px solid var(--ris-borda); border-radius: var(--ris-raio); background: #fff; }
.ris-tabela { min-width: 660px; }
.ris-tabela th {
	background: #f8fafc; text-align: left; font-size: 11px; text-transform: uppercase;
	letter-spacing: .04em; color: #475569; padding: 10px 12px; border-bottom: 1px solid var(--ris-borda);
	white-space: nowrap;
}
.ris-tabela td { padding: 11px 12px; border-bottom: 1px solid #f1f5f9; font-size: 13px; vertical-align: middle; }
.ris-tabela tbody tr:last-child td { border-bottom: 0; }
.ris-tabela tbody tr:hover { background: #f8fafc; }
.ris-tabela .ris-col-acoes { text-align: right; white-space: nowrap; }
.ris-tabela .ris-col-sel { width: 38px; text-align: center; padding-right: 0; }
.ris-tabela tbody tr:has(.ris-sel:checked) { background: #eff6ff; }

/* ---------- Barra de seleção dos logs ---------- */
.ris-selbarra {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	background: #f8fafc; border: 1px solid var(--ris-borda); border-radius: 8px;
	padding: 10px 14px; margin-bottom: 12px;
}
.ris-selbarra__contagem { font-size: 12px; color: var(--ris-texto-suave); }
.ris-selbarra__contagem--ativa { color: var(--ris-azul); font-weight: 700; }
.ris-selbarra__acoes { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.ris-selbarra__acoes select { width: auto; min-width: 210px; font-size: 12px; padding: 6px 9px; }
.ris-pessoa { display: flex; align-items: center; gap: 9px; }
.ris-pessoa__nome { font-weight: 600; }
.ris-pessoa__sub { font-size: 11px; color: var(--ris-texto-suave); }
.ris-avatar--pequeno { width: 30px; height: 30px; font-size: 11px; }

/* ---------- Filtros ---------- */
.ris-filtros {
	background: #fff; border: 1px solid var(--ris-borda); border-radius: var(--ris-raio);
	padding: 14px 16px; margin-bottom: 16px; display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end;
}
.ris-filtros .ris-campo { margin-bottom: 0; }
.ris-filtros__acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Calendário ---------- */
.ris-cal__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ris-cal__mes { font-size: 16px; font-weight: 700; text-transform: capitalize; min-width: 190px; text-align: center; }
.ris-cal__nav { display: flex; gap: 6px; align-items: center; }
.ris-cal__modos { display: flex; gap: 4px; background: #e2e8f0; padding: 3px; border-radius: 8px; }
.ris-cal__modos button {
	background-color: transparent !important; background-image: none !important; border: 0 !important;
	padding: 6px 13px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer;
	color: #475569 !important; font-family: var(--ris-fonte); text-decoration: none !important; box-shadow: none !important;
}
.ris-cal__modos button:hover, .ris-cal__modos button:focus { background-color: #fff !important; color: var(--ris-azul) !important; }
.ris-cal__modos button.ativo, .ris-cal__modos button.ativo:hover {
	background-color: #fff !important; color: var(--ris-azul) !important; box-shadow: var(--ris-sombra) !important;
}

.ris-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--ris-borda); border: 1px solid var(--ris-borda); border-radius: var(--ris-raio); overflow: hidden; }
.ris-cal-cab { background: #f8fafc; padding: 8px 6px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #475569; }
.ris-cal-dia { background: #fff; min-height: 104px; padding: 6px; position: relative; }
.ris-cal-dia--fora { background: #f8fafc; opacity: .6; }
.ris-cal-dia--hoje { background: #eff6ff; }
.ris-cal-dia--feriado { background: #fef2f2; }
.ris-cal-dia--fds { background: #fbfcfe; }
.ris-cal-dia__num { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
.ris-cal-dia--hoje .ris-cal-dia__num { color: var(--ris-azul-claro); }
.ris-cal-dia__contador { font-size: 10px; background: #e2e8f0; color: #475569; border-radius: 999px; padding: 1px 6px; }
.ris-evento {
	display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
	font-size: 11px; padding: 3px 6px; border-radius: 5px; margin-bottom: 3px;
	color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	border-left: 3px solid rgba(0,0,0,.25); font-family: inherit;
}
.ris-evento:hover, .ris-evento:focus { filter: brightness(1.25); outline: 1px solid rgba(255,255,255,.7); }
.ris-evento--cancelada { opacity: .5; text-decoration: line-through; }
.ris-cal-dia__mais {
	font-size: 10px; color: var(--ris-texto-suave) !important; cursor: pointer;
	background-color: transparent !important; border: 0 !important; padding: 2px 4px; font-weight: 600;
	font-family: var(--ris-fonte); border-radius: 4px; box-shadow: none !important;
}
.ris-cal-dia__mais:hover { color: var(--ris-azul) !important; background-color: var(--ris-azul-suave) !important; text-decoration: underline; }

/* Linha do tempo (dia) */
.ris-timeline { border: 1px solid var(--ris-borda); border-radius: var(--ris-raio); background: #fff; overflow: hidden; }
.ris-timeline__hora { display: grid; grid-template-columns: 64px 1fr; border-bottom: 1px solid #f1f5f9; min-height: 46px; }
.ris-timeline__hora:last-child { border-bottom: 0; }
.ris-timeline__rotulo { background: #f8fafc; padding: 8px; font-size: 11px; font-weight: 700; color: #64748b; text-align: center; border-right: 1px solid var(--ris-borda); }
.ris-timeline__itens { padding: 6px 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ris-timeline__vazio { color: #cbd5e1; font-size: 11px; padding: 6px; }
.ris-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
	font-size: 12px; font-weight: 600; color: #fff; border: 0; cursor: pointer; font-family: inherit;
}
.ris-chip:hover, .ris-chip:focus { filter: brightness(1.25); outline: 2px solid rgba(15, 23, 42, .25); }
.ris-chip--vazio { background: #f1f5f9; color: #64748b; }

/* ---------- Modal ---------- */
.ris-modal-fundo {
	position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 99999;
	display: flex; align-items: flex-start; justify-content: center; padding: 24px 14px; overflow-y: auto;
}
.ris-modal {
	background: #fff; border-radius: 14px; width: 100%; max-width: 620px; box-shadow: 0 20px 50px rgba(0,0,0,.28);
	animation: ris-subir .18s ease-out;
}
.ris-modal--largo { max-width: 900px; }
@keyframes ris-subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ris-modal__topo {
	padding: 16px 20px; border-bottom: 1px solid var(--ris-borda);
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ris-modal__topo h3 { margin: 0; font-size: 16px; }
.ris-modal__fechar, button.ris-modal__fechar {
	background-color: transparent !important; background-image: none !important; border: 0 !important;
	font-size: 24px; line-height: 1; cursor: pointer; color: #94a3b8 !important; padding: 0 6px;
	border-radius: 6px; font-family: var(--ris-fonte); box-shadow: none !important;
}
.ris-modal__fechar:hover, .ris-modal__fechar:focus {
	background-color: #f1f5f9 !important; color: var(--ris-vermelho) !important;
}
.ris-modal__corpo { padding: 20px; }
.ris-modal__rodape { padding: 14px 20px; border-top: 1px solid var(--ris-borda); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; background: #f8fafc; border-radius: 0 0 14px 14px; }

/* ---------- Detalhes ---------- */
.ris-detalhes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 18px; }
.ris-detalhe__rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ris-texto-suave); font-weight: 700; }
.ris-detalhe__valor { font-size: 14px; margin-top: 2px; word-break: break-word; }

.ris-historico { list-style: none; margin: 0; padding: 0; }
.ris-historico li { padding: 10px 0 10px 18px; border-left: 2px solid var(--ris-borda); position: relative; }
.ris-historico li::before {
	content: ''; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px;
	border-radius: 50%; background: var(--ris-azul-claro); border: 2px solid #fff;
}
.ris-historico__data { font-size: 11px; color: var(--ris-texto-suave); }
.ris-historico__texto { font-size: 13px; }
.ris-historico__diff { font-size: 12px; color: #475569; margin-top: 4px; }
.ris-historico__diff span { background: #f1f5f9; border-radius: 4px; padding: 1px 5px; }

/* ---------- Gráficos ---------- */
.ris-chart { width: 100%; }
.ris-chart-svg { width: 100%; height: auto; display: block; }
.ris-chart-grid { stroke: #eef2f7; stroke-width: 1; }
.ris-chart-eixo { stroke: #cbd5e1; stroke-width: 1; }
.ris-chart-axis { font-size: 11px; fill: #64748b; font-family: inherit; }
.ris-chart-valor { font-size: 11px; fill: #334155; font-weight: 700; font-family: inherit; }
.ris-chart-legenda { font-size: 12px; fill: #334155; font-family: inherit; }
.ris-chart-centro { font-size: 24px; font-weight: 800; fill: #0f172a; font-family: inherit; }
.ris-chart-trilho { fill: #f1f5f9; }
.ris-chart-bar, .ris-chart-fatia { transition: opacity .15s; }
.ris-chart-bar:hover, .ris-chart-fatia:hover { opacity: .82; }
.ris-chart-vazio { padding: 40px 16px; text-align: center; color: var(--ris-texto-suave); font-size: 13px; }

/* ---------- Diversos ---------- */
.ris-vazio { text-align: center; padding: 34px 16px; color: var(--ris-texto-suave); font-size: 13px; }
.ris-vazio strong { display: block; color: #475569; font-size: 14px; margin-bottom: 4px; }
.ris-legenda-tipos { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; font-size: 12px; margin-top: 12px; }
.ris-legenda-tipos__titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ris-texto-suave); margin-right: 2px; }
.ris-cal__cores button { font-size: 12px !important; }
.ris-cal-dia__semana { display: none; font-weight: 600; text-transform: capitalize; color: var(--ris-texto-suave); }
.ris-cal__dica { display: none; }
.ris-legenda-tipos span { display: inline-flex; align-items: center; gap: 5px; color: #475569; }
.ris-ponto { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ris-carregando { text-align: center; padding: 30px; color: var(--ris-texto-suave); font-size: 13px; }
.ris-nota { font-size: 12px; color: var(--ris-texto-suave); }
.ris-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ris-destaque { background: #fef9c3; padding: 2px 5px; border-radius: 4px; }
.ris-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--ris-borda); margin-bottom: 16px; overflow-x: auto; }
.ris-abas button {
	background-color: transparent !important; background-image: none !important; border: 0 !important;
	padding: 10px 14px; font-size: 13px; font-weight: 700; color: #64748b !important; cursor: pointer;
	border-bottom: 2px solid transparent !important; border-radius: 0; white-space: nowrap;
	font-family: var(--ris-fonte); text-decoration: none !important; box-shadow: none !important;
}
.ris-abas button:hover, .ris-abas button:focus { color: var(--ris-azul) !important; background-color: var(--ris-azul-suave) !important; }
.ris-abas button.ativo, .ris-abas button.ativo:hover {
	color: var(--ris-azul) !important; border-bottom-color: var(--ris-azul) !important; background-color: transparent !important;
}
.ris-toast {
	position: fixed; bottom: 22px; right: 22px; z-index: 100000; max-width: 340px;
	background: #0f172a; color: #fff; padding: 12px 16px; border-radius: 9px;
	box-shadow: 0 10px 30px rgba(0,0,0,.3); font-size: 13px; animation: ris-subir .2s;
}
.ris-toast--erro { background: #991b1b; }
.ris-toast--sucesso { background: #166534; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
	.ris-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ris-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.ris-conteudo { padding: 14px; }
	.ris-grid--2, .ris-grid--3, .ris-grid--4 { grid-template-columns: 1fr; }
	.ris-topo { padding: 12px 14px; }
	.ris-cal-dia { min-height: 76px; }
	.ris-evento { font-size: 10px; }
	.ris-modal { max-width: 100%; }
	.ris-cal__mes { min-width: auto; font-size: 14px; }
	.ris-kpi__valor { font-size: 22px; }
}
@media (max-width: 520px) {
	.ris-cal-grade { font-size: 11px; }
	.ris-cal-dia__num { font-size: 11px; }
}

/* ---------- Calendário no celular ----------
   Mês: cada saída vira um ponto na cor do setor e o toque no dia abre a
   visão do dia. Semana: os dias ficam empilhados, um embaixo do outro. */
@media (max-width: 720px) {
	.ris-cal__topo { gap: 8px; }
	.ris-cal__mes { order: -1; flex: 1 1 100%; text-align: center; }
	.ris-cal__nav { flex: 1 1 auto; }
	.ris-cal__modos { flex: 1 1 auto; justify-content: center; }
	.ris-cal__modos button { flex: 1 1 0; padding-left: 6px !important; padding-right: 6px !important; }
	.ris-cal__cores { flex: 1 1 100%; order: 3; }

	.ris-cal-grade--mes .ris-cal-cab { padding: 6px 2px; font-size: 10px; }
	.ris-cal-grade--mes .ris-cal-dia { min-height: 58px; padding: 4px 3px; cursor: pointer; }
	.ris-cal-grade--mes .ris-cal-dia:not([data-acao]) { cursor: default; }
	.ris-cal-grade--mes .ris-cal-dia__num { margin-bottom: 3px; }
	.ris-cal-grade--mes .ris-cal-dia__contador { padding: 0 5px; font-size: 9px; }
	.ris-cal-grade--mes .ris-evento {
		display: inline-block; width: 9px; height: 9px; padding: 0; margin: 0 2px 2px 0;
		border-radius: 50%; border-left: 0; font-size: 0; line-height: 0; vertical-align: top;
		pointer-events: none;
	}
	.ris-cal-grade--mes .ris-cal-dia__mais { display: none; }
	.ris-cal-grade--mes .ris-cal-dia .ris-pessoa__sub { display: none; }
	.ris-cal-grade--mes + .ris-cal__dica { display: block; font-size: 12px; color: var(--ris-texto-suave); margin: 8px 0 0; text-align: center; }

	.ris-cal-grade--semana { grid-template-columns: 1fr; }
	.ris-cal-grade--semana .ris-cal-cab { display: none; }
	.ris-cal-grade--semana .ris-cal-dia { min-height: 0; padding: 10px 12px; }
	.ris-cal-grade--semana .ris-cal-dia__semana { display: inline; }
	.ris-cal-grade--semana .ris-evento { font-size: 12px; padding: 6px 8px; }

	.ris-timeline__hora { grid-template-columns: 52px 1fr; }
	.ris-timeline__rotulo { padding: 8px 4px; }
	.ris-chip { max-width: 100%; white-space: normal; text-align: left; }
}