/* WCL Tutoriais — Accordion Help + Full Narration + Guided Tour */

/* =========================================================================
   TRIGGER DO BOTÃO "COMO USAR ESTA PÁGINA"
   ========================================================================= */
.wcl-tutoriais-trigger{
	display:inline-flex;align-items:center;gap:8px;
	padding:10px 18px;
	background:#fff;border:1px solid #cbdcec;border-radius:999px;
	color:#24405f;font-size:13px;font-weight:800;cursor:pointer;
	transition:.2s;
}
.wcl-tutoriais-trigger:hover{border-color:var(--wcl-blue,#0878ff);color:var(--wcl-blue,#0878ff)}
.wcl-tutoriais-trigger:focus{
	outline:none;box-shadow:0 0 0 3px rgba(8,120,255,.3);
}

/* =========================================================================
   ACCORDION HELP (SANFONA)
   ========================================================================= */
.wcl-tutoriais-help{
	margin:16px 0;
}
.wcl-tutoriais-help-trigger{
	display:flex;align-items:center;gap:10px;
	width:100%;max-width:100%;
	padding:14px 20px;
	background:#fff;border:1px solid #cbdcec;border-radius:10px;
	color:#24405f;font-size:14px;font-weight:700;cursor:pointer;
	text-align:left;
	transition:.2s;
}
.wcl-tutoriais-help-trigger:hover{
	border-color:var(--wcl-blue,#0878ff);
	color:var(--wcl-blue,#0878ff);
	background:#f7f9fd;
}
.wcl-tutoriais-help-trigger:focus{
	outline:none;box-shadow:0 0 0 3px rgba(8,120,255,.3);
}
.wcl-tutoriais-help-trigger[aria-expanded="true"]{
	border-color:var(--wcl-blue,#0878ff);
	background:#f0f6ff;
	color:var(--wcl-blue,#0878ff);
}
.wcl-tutoriais-help-icon{
	flex-shrink:0;width:28px;height:28px;
	display:inline-grid;place-items:center;
	background:var(--wcl-blue,#0878ff);color:#fff;border-radius:50%;
	font-size:14px;font-weight:900;
}
.wcl-tutoriais-help-trigger[aria-expanded="true"] .wcl-tutoriais-help-icon{
	background:#24405f;
}
.wcl-tutoriais-help-label{flex:1}
.wcl-tutoriais-help-chevron{
	flex-shrink:0;transition:transform .2s;
	font-size:12px;color:var(--wcl-muted,#59708e);
}
.wcl-tutoriais-help-trigger[aria-expanded="true"] .wcl-tutoriais-help-chevron{
	transform:rotate(180deg);
}

.wcl-tutoriais-help-panel{
	overflow:hidden;
	border:1px solid #dfe8f5;
	border-top:none;
	border-radius:0 0 10px 10px;
	background:#fff;
	animation:wcl-accordion-down .25s ease;
}
@keyframes wcl-accordion-down{
	from{opacity:0;max-height:0}to{opacity:1;max-height:2000px}
}
@media(prefers-reduced-motion:reduce){
	.wcl-tutoriais-help-panel{animation:none}
}
.wcl-tutoriais-help-panel[hidden]{display:none}

.wcl-tutoriais-help-content{padding:20px 24px 24px}

/* Header da ajuda */
.wcl-tutoriais-help-header{margin-bottom:16px}
.wcl-tutoriais-help-eyebrow{color:var(--wcl-blue,#0878ff);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.wcl-tutoriais-help-header h2{margin:6px 0 0;font-size:1.25rem;line-height:1.3;color:var(--wcl-ink,#10213a)}
.wcl-tutoriais-help-excerpt{margin:8px 0 0;color:var(--wcl-muted,#59708e);font-size:.92rem;line-height:1.6}

/* Body da ajuda */
.wcl-tutoriais-help-body{color:var(--wcl-muted,#59708e);font-size:.95rem;line-height:1.75}
.wcl-tutoriais-help-body p{margin:0 0 14px}
.wcl-tutoriais-help-body h3{margin:20px 0 8px;color:var(--wcl-ink,#10213a);font-size:1.05rem}
.wcl-tutoriais-help-body h4{margin:16px 0 6px;color:var(--wcl-ink,#10213a);font-size:.95rem}
.wcl-tutoriais-help-body ul{margin:0 0 14px;padding-left:22px}
.wcl-tutoriais-help-body ol{margin:0 0 14px;padding-left:22px}
.wcl-tutoriais-help-body li{margin-bottom:6px}
.wcl-tutoriais-help-body strong{color:var(--wcl-ink,#10213a)}
.wcl-tutoriais-help-body code{background:#f1f5fa;padding:2px 6px;border-radius:4px;font-size:.9em}

/* Seção de passos */
.wcl-tutoriais-help-section-title{color:var(--wcl-ink,#10213a);font-size:1rem;margin:24px 0 12px;padding-top:16px;border-top:1px solid #e8eef6}
.wcl-tutoriais-help-steps{margin:0;padding:0;list-style:none;counter-reset:step}
.wcl-tutoriais-step{
	position:relative;padding:14px 14px 14px 48px;
	margin-bottom:10px;
	background:#f7f9fd;border:1px solid #dfe8f5;border-radius:10px;
}
.wcl-tutoriais-step::before{
	counter-increment:step;content:counter(step);
	position:absolute;left:12px;top:14px;
	width:26px;height:26px;display:grid;place-items:center;
	background:var(--wcl-blue,#0878ff);color:#fff;border-radius:50%;
	font-size:12px;font-weight:900;
}
.wcl-tutoriais-step strong{display:block;color:var(--wcl-ink,#10213a);font-size:.9rem;margin-bottom:4px}
.wcl-tutoriais-step p{margin:0;color:var(--wcl-muted,#59708e);font-size:.88rem;line-height:1.6}

/* =========================================================================
   CONTROLES DE NARRAÇÃO (AUDIO PLAYER)
   ========================================================================= */
.wcl-tutoriais-help-audio{
	margin-top:24px;padding-top:20px;border-top:1px solid #e8eef6;
}
.wcl-tutoriais-audio-controls{
	display:flex;flex-wrap:wrap;gap:8px;align-items:center;
	margin-bottom:8px;
}
.wcl-tutoriais-audio-btn{
	display:inline-flex;align-items:center;gap:6px;
	padding:10px 16px;
	background:#fff;border:1px solid #cbdcec;border-radius:8px;
	color:#24405f;font-size:12px;font-weight:700;cursor:pointer;
	transition:.15s;
	white-space:nowrap;
}
.wcl-tutoriais-audio-btn:hover{
	border-color:var(--wcl-blue,#0878ff);
	color:var(--wcl-blue,#0878ff);
	background:#f7f9fd;
}
.wcl-tutoriais-audio-btn:focus{
	outline:none;box-shadow:0 0 0 3px rgba(8,120,255,.3);
}
.wcl-tutoriais-audio-btn:disabled{
	opacity:.5;cursor:not-allowed;
}
.wcl-tutoriais-audio-btn[aria-pressed="true"]{
	background:var(--wcl-blue,#0878ff);border-color:var(--wcl-blue,#0878ff);color:#fff;
}
.wcl-tutoriais-audio-btn svg{flex-shrink:0}
.wcl-tutoriais-audio-btn-text{display:none} /* Oculto por padrão, mostrado em telas maiores */

.wcl-tutoriais-audio-status{
	min-height:1.2em;font-size:12px;color:var(--wcl-muted,#59708e);
}

/* Ações da ajuda (botão tour) */
.wcl-tutoriais-help-actions{margin-top:20px;padding-top:16px;border-top:1px solid #e8eef6;display:flex;gap:12px;flex-wrap:wrap}
.wcl-tutoriais-tour-start{
	display:inline-flex;align-items:center;gap:8px;
	padding:12px 20px;
	background:var(--wcl-blue,#0878ff);border:1px solid var(--wcl-blue,#0878ff);border-radius:8px;
	color:#fff;font-size:13px;font-weight:700;cursor:pointer;
	transition:.15s;
}
.wcl-tutoriais-tour-start:hover{filter:brightness(1.08)}
.wcl-tutoriais-tour-start:focus{outline:none;box-shadow:0 0 0 3px rgba(8,120,255,.3)}
.wcl-tutoriais-tour-start svg{flex-shrink:0}

/* =========================================================================
   FIELD HELP (mantido)
   ========================================================================= */
.wcl-field-help{position:relative;display:inline-flex;vertical-align:middle;margin-left:6px}
.wcl-field-help-trigger{
	width:18px;height:18px;display:inline-grid;place-items:center;
	background:#eef5ff;border:1px solid #b8d0ef;border-radius:50%;
	color:var(--wcl-blue,#0878ff);font-size:11px;font-weight:900;cursor:pointer;
}
.wcl-field-help-trigger[aria-expanded="true"]{background:var(--wcl-blue,#0878ff);color:#fff;border-color:var(--wcl-blue,#0878ff)}
.wcl-field-help-popover{
	position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);
	width:260px;padding:12px 14px;
	background:#10213a;color:#d6e8ff;border-radius:10px;
	font-size:12px;font-weight:600;line-height:1.5;
	box-shadow:0 12px 32px rgba(2,14,34,.22);
	z-index:10;
}
.wcl-field-help-popover::after{
	content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
	border:6px solid transparent;border-top-color:#10213a;
}
.wcl-field-help-popover[hidden]{display:none}

/* =========================================================================
   TOUR GUIADO (mantido)
   ========================================================================= */
.wcl-tutoriais-tour-overlay{position:fixed;inset:0;z-index:9997;background:rgba(2,14,34,.62);backdrop-filter:blur(1px)}
.wcl-tutoriais-tour-overlay[hidden]{display:none}
.wcl-tutoriais-tour-highlight{position:fixed;z-index:9998;pointer-events:none;border:2px solid var(--wcl-blue,#0878ff);border-radius:8px;box-shadow:0 0 0 4px rgba(8,120,255,.25),0 8px 32px rgba(2,14,34,.18);transition:all .25s ease}
.wcl-tutoriais-tour-tooltip{
	position:fixed;z-index:9999;
	width:min(360px,90vw);padding:20px;
	background:#fff;border:1px solid #dfe8f5;border-radius:12px;
	box-shadow:0 16px 40px rgba(2,14,34,.18);
}
.wcl-tutoriais-tour-tooltip[hidden]{display:none}
.wcl-tutoriais-tour-tooltip h3{margin:0 0 6px;font-size:.95rem;color:var(--wcl-ink,#10213a)}
.wcl-tutoriais-tour-tooltip p{margin:0;color:var(--wcl-muted,#59708e);font-size:.88rem;line-height:1.6}
.wcl-tutoriais-tour-counter{color:var(--wcl-blue,#0878ff);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.wcl-tutoriais-tour-nav{display:flex;gap:8px;justify-content:space-between;margin-top:16px}
.wcl-tutoriais-tour-nav button{padding:8px 16px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer}
.wcl-tutoriais-tour-prev,.wcl-tutoriais-tour-close2{background:#fff;border:1px solid #cbdcec;color:#24405f}
.wcl-tutoriais-tour-next,.wcl-tutoriais-tour-finish{background:var(--wcl-blue,#0878ff);border:1px solid var(--wcl-blue,#0878ff);color:#fff}
@media(prefers-reduced-motion:reduce){.wcl-tutoriais-tour-highlight{transition:none}}

/* =========================================================================
   ADMIN STEPS (mantido)
   ========================================================================= */
.wcl-tutoriais-steps-admin .wcl-tutoriais-step-row{
	display:flex;align-items:flex-start;gap:10px;
	padding:12px;background:#f7f9fd;border:1px solid #dfe8f5;border-radius:8px;margin-bottom:8px;
}
.wcl-tutoriais-step-number{
	flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;
	background:var(--wcl-blue,#0878ff);color:#fff;border-radius:50%;font-size:12px;font-weight:900;
}
.wcl-tutoriais-step-fields{flex:1;display:grid;gap:6px}
.wcl-tutoriais-step-extra{display:flex;gap:8px;flex-wrap:wrap}
.wcl-tutoriais-step-actions{display:flex;flex-direction:column;gap:4px}
.wcl-tutoriais-step-actions .button{padding:4px 8px;min-width:28px;text-align:center}
.wcl-tutoriais-admin .widefat code{font-size:12px}

/* =========================================================================
   RESPONSIVIDADE
   ========================================================================= */
@media(max-width:768px){
	.wcl-tutoriais-help-trigger{padding:12px 16px;font-size:13px}
	.wcl-tutoriais-help-content{padding:16px 16px 20px}
	.wcl-tutoriais-help-header h2{font-size:1.15rem}
	.wcl-tutoriais-step{padding:12px 12px 12px 42px}
	.wcl-tutoriais-step::before{width:22px;height:22px;font-size:11px;left:10px;top:12px}

	/* Áudio: mostrar apenas ícones em mobile */
	.wcl-tutoriais-audio-btn{padding:10px 12px}
	.wcl-tutoriais-audio-btn-text{display:none}
}

@media(min-width:769px){
	/* Desktop: mostrar ícone + texto curto */
	.wcl-tutoriais-audio-btn-text{display:inline}
	.wcl-tutoriais-audio-controls{gap:12px}

	/* Duas colunas para conteúdo largo se houver espaço */
	.wcl-tutoriais-help-content{
		display:grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		align-items: start;
	}
	.wcl-tutoriais-help-header,
	.wcl-tutoriais-help-body,
	.wcl-tutoriais-help-steps,
	.wcl-tutoriais-help-audio,
	.wcl-tutoriais-help-actions{
		grid-column: 1 / -1; /* padrão: full width */
	}
	/* Se quiser duas colunas para body + steps, descomente:
	.wcl-tutoriais-help-body{grid-column:1}
	.wcl-tutoriais-help-steps{grid-column:2}
	*/
}

@media(max-width:480px){
	.wcl-tutoriais-help-trigger{padding:10px 12px;font-size:12px}
	.wcl-tutoriais-help-icon{width:24px;height:24px;font-size:12px}
	.wcl-tutoriais-help-content{padding:12px}
	.wcl-tutoriais-audio-btn{padding:8px 10px}
	.wcl-tutoriais-tour-start{padding:10px 16px;font-size:12px}
}

/* =========================================================================
   HIGH CONTRAST / ACESSIBILIDADE EXTRA
   ========================================================================= */
@media (prefers-contrast: high){
	.wcl-tutoriais-help-trigger{border-width:2px}
	.wcl-tutoriais-audio-btn{border-width:2px}
	.wcl-tutoriais-step{border-width:2px}
}

@media (prefers-reduced-motion: reduce){
	.wcl-tutoriais-help-panel{animation:none}
	.wcl-tutoriais-tour-highlight{transition:none}
	.wcl-tutoriais-audio-btn{transition:none}
	.wcl-tutoriais-help-chevron{transition:none}
}

/* Foco visível global */
.wcl-tutoriais-help-trigger:focus-visible,
.wcl-tutoriais-audio-btn:focus-visible,
.wcl-tutoriais-tour-start:focus-visible,
.wcl-tutoriais-tour-nav button:focus-visible,
.wcl-field-help-trigger:focus-visible{
	outline:3px solid var(--wcl-blue,#0878ff);
	outline-offset:2px;
}

/* Screen reader only */
.wcl-sr-only{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}