/* UI Kit Kids for Christ · depende de 02-design-tokens/tokens.css. Prefixo: kfc- */

/* Botão */
.kfc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--size-touch-kids);padding:0 var(--space-6);border:var(--border-width-strong) solid transparent;border-radius:var(--radius-full);background:var(--color-action);color:var(--color-on-action);font:var(--font-weight-bold) var(--font-size-caption)/1 var(--font-family-body);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background var(--duration-fast),transform var(--duration-fast)}
.kfc-btn svg{width:var(--size-icon-sm);height:var(--size-icon-sm);flex:none}
.kfc-btn:hover,.kfc-btn.is-hover{background:var(--color-action-hover);color:var(--color-bg)}
.kfc-btn:active,.kfc-btn.is-pressed{transform:scale(.96)}
.kfc-btn:focus-visible,.kfc-btn.is-focus{outline:var(--border-width-strong) solid var(--color-focus);outline-offset:var(--space-1)}
.kfc-btn:disabled,.kfc-btn.is-disabled{background:var(--color-surface-alt);color:var(--color-text-muted);border-color:var(--color-border);cursor:not-allowed;transform:none}
.kfc-btn--highlight{background:var(--color-highlight);color:var(--color-on-highlight)}
.kfc-btn--highlight:hover,.kfc-btn--highlight.is-hover{background:var(--color-highlight);color:var(--color-on-highlight);border-color:var(--color-on-highlight)}
.kfc-btn--secondary{background:transparent;color:var(--color-action);border-color:currentColor}
.kfc-btn--ghost{background:transparent;color:var(--color-link)}
.kfc-btn--ghost:hover,.kfc-btn--ghost.is-hover{background:var(--color-info-bg);color:var(--color-text)}
.kfc-btn--lg{min-height:var(--size-touch-xl);padding:0 var(--space-8);font-size:var(--font-size-body-sm)}
.kfc-btn--block{display:flex;width:100%}
.kfc-iconbtn{display:inline-grid;place-items:center;width:var(--size-icon-badge);height:var(--size-icon-badge);border:0;border-radius:var(--radius-full);background:var(--color-action);color:var(--color-on-action);cursor:pointer;flex:none}
.kfc-iconbtn svg{width:var(--size-icon-md);height:var(--size-icon-md)}
.kfc-iconbtn--soft{background:var(--color-info-bg);color:var(--color-text)}
.kfc-iconbtn--highlight{background:var(--color-highlight);color:var(--color-on-highlight)}

/* Campo */
.kfc-field{display:grid;gap:var(--space-2)}
.kfc-label{font-size:var(--font-size-caption);font-weight:var(--font-weight-bold)}
.kfc-input{width:100%;min-height:var(--size-touch-kids);padding:0 var(--space-4);border:var(--border-width-strong) solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit}
.kfc-input::placeholder{color:var(--color-text-muted)}
.kfc-input:focus,.kfc-input.is-focus{outline:var(--border-width-strong) solid var(--color-focus);outline-offset:var(--space-1);border-color:var(--color-action)}
.kfc-input:disabled{background:var(--color-surface-alt);border-color:var(--color-border)}
.kfc-hint{font-size:var(--font-size-caption);color:var(--color-text-muted)}
.kfc-field.is-error .kfc-input{border-color:var(--color-error)}
.kfc-field.is-error .kfc-hint{color:var(--color-error);font-weight:var(--font-weight-bold)}
.kfc-field.is-success .kfc-input{border-color:var(--color-success)}
.kfc-field.is-success .kfc-hint{color:var(--color-success);font-weight:var(--font-weight-bold)}
.kfc-search{position:relative}
.kfc-search svg{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);width:var(--size-icon-sm);height:var(--size-icon-sm);color:var(--color-text-muted)}
.kfc-search .kfc-input{padding-left:var(--space-12);border-radius:var(--radius-full)}
.kfc-check{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--size-touch-min);cursor:pointer}
.kfc-check input{appearance:none;width:var(--space-6);height:var(--space-6);margin:0;border:var(--border-width-strong) solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);display:grid;place-items:center;flex:none}
.kfc-check input[type=radio]{border-radius:var(--radius-full)}
.kfc-check input:checked{background:var(--color-action);border-color:var(--color-action)}
.kfc-check input:checked::after{content:"";width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--color-on-action)}
.kfc-switch{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--size-touch-min);cursor:pointer}
.kfc-switch input{appearance:none;width:var(--space-12);height:var(--space-6);margin:0;padding:var(--space-1);border-radius:var(--radius-full);background:var(--color-border-strong);display:flex;transition:background var(--duration-fast);flex:none}
.kfc-switch input::after{content:"";width:var(--space-4);height:var(--space-4);border-radius:var(--radius-full);background:var(--color-surface);transition:transform var(--duration-fast)}
.kfc-switch input:checked{background:var(--color-action)}
.kfc-switch input:checked::after{transform:translateX(var(--space-6))}

/* Chip, badge e número */
.kfc-chip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--size-touch-min);padding:0 var(--space-4);border:0;border-radius:var(--radius-md);background:var(--color-brand-soft-blue);color:var(--color-brand-primary-navy);font:var(--font-weight-bold) var(--font-size-overline)/1 var(--font-family-body);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase}
.kfc-chip--yellow{background:var(--color-brand-soft-yellow)}
.kfc-chip--green{background:var(--color-brand-soft-green)}
.kfc-chip--pink{background:var(--color-brand-soft-pink)}
.kfc-chip--orange{background:var(--color-brand-soft-orange)}
.kfc-chip.is-selected{outline:var(--border-width-strong) solid var(--color-brand-primary-navy)}
.kfc-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--color-info-bg);color:var(--color-info);font-size:var(--font-size-overline);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase}
.kfc-badge svg{width:var(--space-4);height:var(--space-4)}
.kfc-badge--success{background:var(--color-success-bg);color:var(--color-success)}
.kfc-badge--warning{background:var(--color-warning-bg);color:var(--color-warning)}
.kfc-badge--error{background:var(--color-error-bg);color:var(--color-error)}
.kfc-num{display:inline-grid;place-items:center;width:var(--space-8);height:var(--space-8);border-radius:var(--radius-full);background:var(--color-brand-primary-blue-functional);color:var(--color-brand-neutral-white);font-size:var(--font-size-overline);font-weight:var(--font-weight-bold);flex:none}
.kfc-num--yellow{background:var(--color-brand-secondary-yellow);color:var(--color-brand-primary-navy)}
.kfc-num--green{background:var(--color-brand-tertiary-green);color:var(--color-brand-primary-navy)}
.kfc-num--pink{background:var(--color-brand-tertiary-pink);color:var(--color-brand-primary-navy)}
.kfc-num--orange{background:var(--color-brand-tertiary-orange);color:var(--color-brand-primary-navy)}
.kfc-num--sky{background:var(--color-brand-secondary-sky);color:var(--color-brand-primary-navy)}
.kfc-num--purple{background:var(--color-brand-tertiary-purple)}

/* Card e item de lista */
.kfc-card{background:var(--color-surface);color:var(--color-text);border:var(--border-width-hairline) solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden}
.kfc-card__media{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.kfc-card__body{display:grid;gap:var(--space-2);padding:var(--space-5)}
.kfc-card__title{font:var(--font-weight-title) var(--font-size-h3)/var(--line-height-snug) var(--font-family-title)}
.kfc-overline{font-size:var(--font-size-overline);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-link)}
.kfc-list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.kfc-item{display:flex;align-items:center;gap:var(--space-3);min-height:var(--size-touch-xl);padding:0 var(--space-4);border-radius:var(--radius-lg);background:var(--color-surface);border:var(--border-width-hairline) solid var(--color-border);color:var(--color-text);font-weight:var(--font-weight-bold);text-decoration:none}
.kfc-item > span:nth-child(2){flex:1}
.kfc-item svg{width:var(--size-icon-sm);height:var(--size-icon-sm);color:var(--color-text-muted)}
.kfc-item:hover,.kfc-item.is-selected{border-color:var(--color-action);background:var(--color-info-bg)}

/* Feedback */
.kfc-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-info-bg);color:var(--color-text);font-size:var(--font-size-caption)}
.kfc-alert svg{width:var(--size-icon-md);height:var(--size-icon-md);flex:none;color:var(--color-info)}
.kfc-alert b{display:block;color:var(--color-info)}
.kfc-alert--success{background:var(--color-success-bg)}.kfc-alert--success svg,.kfc-alert--success b{color:var(--color-success)}
.kfc-alert--warning{background:var(--color-warning-bg)}.kfc-alert--warning svg,.kfc-alert--warning b{color:var(--color-warning)}
.kfc-alert--error{background:var(--color-error-bg)}.kfc-alert--error svg,.kfc-alert--error b{color:var(--color-error)}

/* Navegação */
.kfc-appbar{display:flex;align-items:center;gap:var(--space-3);min-height:var(--size-touch-xl);padding:0 var(--space-4);color:var(--color-text)}
.kfc-appbar__title{flex:1;font-size:var(--font-size-overline);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--color-link)}
.kfc-appbar svg{width:var(--size-icon-md);height:var(--size-icon-md)}
.kfc-tabbar{display:flex;background:var(--color-surface);border-top:var(--border-width-hairline) solid var(--color-border)}
.kfc-tab{flex:1;display:grid;justify-items:center;gap:var(--space-1);padding:var(--space-2) 0 var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-overline);font-weight:var(--font-weight-bold);text-decoration:none}
.kfc-tab svg{width:var(--size-icon-md);height:var(--size-icon-md);padding:var(--space-1);box-sizing:content-box;border-radius:var(--radius-full)}
.kfc-tab.is-active{color:var(--color-text)}
.kfc-tab.is-active svg{background:var(--color-highlight);color:var(--color-on-highlight)}

/* Áudio e progresso */
.kfc-progress{height:var(--space-2);border-radius:var(--radius-full);background:var(--color-border);overflow:hidden}
.kfc-progress > i{display:block;height:100%;width:var(--value,40%);border-radius:var(--radius-full);background:var(--color-action)}
.kfc-progress--highlight > i{background:var(--color-highlight)}
.kfc-player{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-xl);background:var(--color-surface);border:var(--border-width-hairline) solid var(--color-border);color:var(--color-text)}
.kfc-player__meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kfc-player__meta{min-width:0;display:grid;gap:var(--space-2);font-size:var(--font-size-overline);font-weight:var(--font-weight-bold)}
.kfc-player .kfc-iconbtn--soft{width:var(--size-touch-min);height:var(--size-touch-min)}

/* Opção de resposta */
.kfc-option{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:var(--size-touch-xl);padding:0 var(--space-4);border:var(--border-width-strong) solid transparent;border-radius:var(--radius-lg);background:var(--color-brand-soft-blue);color:var(--color-brand-primary-navy);font:var(--font-weight-bold) var(--font-size-body-sm)/1 var(--font-family-body);cursor:pointer}
.kfc-option svg{width:var(--size-icon-sm);height:var(--size-icon-sm)}
.kfc-option.is-selected{border-color:var(--color-brand-primary-blue-functional)}
.kfc-option.is-correct{background:var(--color-brand-soft-green);border-color:var(--color-brand-tertiary-green)}
.kfc-option.is-retry{background:var(--color-brand-soft-yellow);border-color:var(--color-brand-secondary-yellow)}

/* Diálogo e accordion */
.kfc-dialog{display:grid;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);border:var(--border-width-hairline) solid var(--color-border);max-width:22rem}
.kfc-dialog__title{font:var(--font-weight-title) var(--font-size-h3)/var(--line-height-snug) var(--font-family-title)}
.kfc-dialog__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.kfc-accordion{border:var(--border-width-hairline) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text)}
.kfc-accordion + .kfc-accordion{margin-top:var(--space-2)}
.kfc-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--size-touch-xl);padding:0 var(--space-5);font-weight:var(--font-weight-bold);cursor:pointer;list-style:none}
.kfc-accordion summary::-webkit-details-marker{display:none}
.kfc-accordion summary svg{width:var(--size-icon-sm);height:var(--size-icon-sm);transition:transform var(--duration-fast)}
.kfc-accordion[open] summary svg{transform:rotate(180deg)}
.kfc-accordion p{margin:0;padding:0 var(--space-5) var(--space-5);color:var(--color-text-muted)}

/* Placa da logo */
.kfc-logo-plate{display:grid;place-items:center;aspect-ratio:1;width:var(--size-logo-plate-min);padding:var(--space-2);border-radius:var(--radius-lg);background:var(--color-brand-neutral-white)}
.kfc-logo-plate img{display:block;width:100%;height:100%;object-fit:contain}

@media (prefers-reduced-motion:reduce){.kfc-btn,.kfc-switch input,.kfc-switch input::after,.kfc-accordion summary svg{transition:none}}