/*
 * HOLDING BARBER - AREA DO ALUNO
 * Fundacao visual: tokens, base, container, botoes, formularios, cards, superficies e icones.
 *
 * Escopo
 * - Carregada por application/views/template/inc/header.php (paginas autenticadas do aluno:
 *   template/header.php e template/header_full.php), sob <body class="holding-aluno">, e por
 *   application/views/template/inc/header_login.php (somente a tela de login), sob
 *   <body class="holding-login">.
 * - Secoes 1 a 8 (tokens, base, layout, tipografia, botoes, formularios, cards e icones) sao a
 *   fundacao compartilhada pelas duas raizes: :is(.holding-aluno, .holding-login) mantem a mesma
 *   especificidade de antes. Secoes 9 a 12, 14, 16 e 17 (shell, header, player, Meus Cursos, Meu historico,
 *   avaliacao, acesso ainda nao liberado) seguem so em .holding-aluno; as secoes 13, 18 e 20 (login, cadastro e
 *   cadastro institucional) sao so de .holding-login. A secao 19 (aviso hb-alert) vale para as duas raizes.
 * - O comportamento do header fica em componentes/js/holding-aluno.js (mesmo template); o do
 *   login, em componentes/js/holding-login.js.
 * - O cadastro (matricular) usa o mesmo documento do login (template/inc/header_login.php, secao 18).
 * - O cadastro institucional (instituicao/{endereco}) tem documento proprio com a mesma raiz
 *   (views/instituicao/inc/topo.php, secao 20).
 * - Admin, checkout (desativado), matricula externa, a tela antiga de igreja (sem uso), demonstracao
 *   (desativada) e as APIs de PDF nao carregam esta folha.
 *
 * Convencoes
 * - Valores visuais ficam nos tokens --holding-* abaixo. Nao escrever hex fora do bloco de tokens.
 *   Unica excecao: o chevron do .hb-select, que e um data URI e nao enxerga custom properties.
 * - Componentes novos usam o prefixo .hb- para nao colidir com o Bootstrap 3 (.btn, .card,
 *   .container, .form-control) nem com classes legadas (ex.: .card e .card-title de ver.php).
 * - Regras de elemento usam :where(.holding-aluno, .holding-login), que mantem a especificidade de elemento:
 *   vencem os padroes do Bootstrap e do styles.css pela ordem de carga, mas perdem para qualquer
 *   classe legada. Por isso a cor de titulos NAO e aplicada em h1-h6 (quebraria os titulos
 *   brancos dos cards de modulo); use .hb-page-title, .hb-section-title ou .hb-card__title.
 * - Medidas em px: o Bootstrap 3 define html { font-size: 10px }, entao 1rem = 10px aqui.
 * - Espacamento em multiplos de 4px.
 * - Breakpoints alinhados ao grid do Bootstrap 3 ainda em uso: 768px / 992px / 1200px
 *   (custom properties nao funcionam dentro de @media).
 * - Icones novos: SVG inline no estilo Lucide (viewBox 24, stroke 2) com a classe .hb-icon.
 */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

.holding-aluno,
.holding-login {
  /* Marca */
  --holding-green: #005D3D;
  --holding-green-hover: #004A31;
  --holding-green-active: #003D28;
  --holding-green-tint: rgba(0, 93, 61, 0.08);
  --holding-green-tint-strong: rgba(0, 93, 61, 0.16);
  --holding-jade: #2ADB9C;
  --holding-gold: #DCB770;
  --holding-velvet: #272727;
  --holding-velvet-overlay: rgba(39, 39, 39, 0.62);
  --holding-velvet-overlay-hover: rgba(39, 39, 39, 0.45);
  --holding-velvet-glass: rgba(39, 39, 39, 0.86);
  /* Veu das capas de curso: verde profundo no alto e preto na base, igual para todas as fotos */
  --holding-capa-veu: linear-gradient(180deg, rgba(0, 45, 30, 0.16) 0%, rgba(20, 20, 20, 0.22) 100%);

  /* Neutros (holding_dossie) */
  --holding-heading: #222222;
  --holding-text: #444444;
  --holding-text-muted: #575757;
  --holding-text-inverse: #FFFFFF;
  --holding-text-inverse-muted: rgba(255, 255, 255, 0.72);
  --holding-background: #FFFFFF;
  --holding-surface: #FFFFFF;
  --holding-surface-subtle: #F5F5F5;
  --holding-surface-strong: #EBEBEB;
  --holding-surface-hover: #FAFAFA;
  --holding-border: #DDDDDD;
  --holding-input-border: #D4D4D4;

  /* Status (holding_dossie) */
  --holding-success: #0F7D15;
  --holding-danger: #AB0F0E;
  --holding-danger-hover: #890C0B;
  --holding-danger-tint: rgba(171, 15, 14, 0.05);
  --holding-danger-border: rgba(171, 15, 14, 0.28);
  --holding-success-tint: rgba(15, 125, 21, 0.06);
  --holding-success-border: rgba(15, 125, 21, 0.3);
  --holding-info: #0288D1;
  --holding-warning: #CF4D03;
  /* Texto de status sobre fundo suave: info e warning puros nao chegam a 4,5:1 em texto pequeno */
  --holding-success-text: #0B5E10;
  --holding-info-text: #0268A8;
  --holding-info-tint: rgba(2, 136, 209, 0.08);
  --holding-info-border: rgba(2, 136, 209, 0.32);
  --holding-warning-text: #9A3A02;
  --holding-warning-tint: rgba(207, 77, 3, 0.08);
  --holding-warning-border: rgba(207, 77, 3, 0.32);

  /* Foco */
  --holding-focus-ring: var(--holding-green);
  --holding-focus-ring-soft: rgba(0, 93, 61, 0.22);
  --holding-focus-ring-danger: rgba(171, 15, 14, 0.22);

  /* Tipografia (pilha do sistema do holding_dossie, sem webfont) */
  --holding-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Roboto,
    Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --holding-font-size-xs: 12px;
  --holding-font-size-sm: 13px;
  --holding-font-size-base: 14px;
  --holding-font-size-content: 16px;
  --holding-font-size-lg: 18px;
  --holding-font-size-xl: 24px;
  --holding-font-size-2xl: 28px;
  --holding-line-height-tight: 1.25;
  --holding-line-height-snug: 1.4;
  --holding-line-height-base: 1.6;
  --holding-line-height-content: 1.7;
  --holding-font-weight-regular: 400;
  --holding-font-weight-medium: 500;
  --holding-font-weight-semibold: 600;
  --holding-font-weight-bold: 700;

  /* Espacamento (escala de 4px) */
  --holding-space-1: 4px;
  --holding-space-2: 8px;
  --holding-space-3: 12px;
  --holding-space-4: 16px;
  --holding-space-5: 20px;
  --holding-space-6: 24px;
  --holding-space-8: 32px;
  --holding-space-10: 40px;
  --holding-space-12: 48px;
  --holding-space-16: 64px;

  /* Raios */
  --holding-radius-card: 8px;
  --holding-radius-button: 4px;
  --holding-radius-control: 3px;
  --holding-radius-dropdown: 3px;
  --holding-radius-pill: 999px;

  /* Sombras: discretas; superficies comuns usam borda */
  --holding-shadow-header: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
  --holding-shadow-dropdown: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
  --holding-shadow-card: 0 2px 4px -1px rgba(0, 0, 0, 0.1);

  /* Header (anatomia do HoldingHeader do holding_dossie) */
  --holding-header-link: rgba(255, 255, 255, 0.85);
  --holding-header-link-hover: rgba(255, 255, 255, 0.15);
  --holding-header-indicator: var(--holding-gold);
  --holding-logo-height: 35px;

  /* Dimensoes */
  --holding-touch-target: 44px;
  --holding-header-height: 50px;
  --holding-container-max: 1400px;
  --holding-curso-card-max: 352px;
  --holding-gutter: var(--holding-space-4);

  /* Movimento */
  --holding-transition: 150ms ease;
  --holding-transition-card: 200ms ease;
}

@media (min-width: 768px) {
  .holding-aluno,
  .holding-login {
    --holding-gutter: var(--holding-space-6);
  }
}

@media (min-width: 1200px) {
  .holding-aluno,
  .holding-login {
    --holding-gutter: var(--holding-space-8);
  }
}


/* ==========================================================================
   2. Base
   ========================================================================== */

.holding-aluno,
.holding-login {
  background-color: var(--holding-background);
  color: var(--holding-text);
  font-family: var(--holding-font-sans);
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-base);
  accent-color: var(--holding-green);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* hidden precisa vencer o display dos componentes (ex.: .hb-btn e inline-flex). */
:is(.holding-aluno, .holding-login) [hidden] {
  display: none !important;
}

:where(.holding-aluno, .holding-login) a {
  color: var(--holding-green);
}

:where(.holding-aluno, .holding-login) a:hover,
:where(.holding-aluno, .holding-login) a:focus {
  color: var(--holding-green-hover);
}


/* ==========================================================================
   3. Layout
   ========================================================================== */

/* Nao aninhar dentro do .container do Bootstrap (largura fixa de 750/970/1170px). */
:is(.holding-aluno, .holding-login) .hb-container {
  width: 100%;
  max-width: var(--holding-container-max);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--holding-gutter);
  padding-left: var(--holding-gutter);
}


/* ==========================================================================
   4. Tipografia
   ========================================================================== */

:is(.holding-aluno, .holding-login) .hb-page-title {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-xl);
  font-weight: var(--holding-font-weight-regular);
  line-height: var(--holding-line-height-tight);
}

:is(.holding-aluno, .holding-login) .hb-section-title {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-lg);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

:is(.holding-aluno, .holding-login) .hb-overline {
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-xs);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:is(.holding-aluno, .holding-login) .hb-text-muted {
  color: var(--holding-text-muted);
}

/* Textos longos de aula / conteudo de apoio. */
:is(.holding-aluno, .holding-login) .hb-content {
  color: var(--holding-text);
  font-size: var(--holding-font-size-content);
  line-height: var(--holding-line-height-content);
}

:is(.holding-aluno, .holding-login) .hb-content p,
:is(.holding-aluno, .holding-login) .hb-content ul,
:is(.holding-aluno, .holding-login) .hb-content ol {
  margin: 0 0 var(--holding-space-4);
}

:is(.holding-aluno, .holding-login) .hb-content > :last-child {
  margin-bottom: 0;
}

:is(.holding-aluno, .holding-login) .hb-divider {
  height: 1px;
  margin: var(--holding-space-6) 0;
  border: 0;
  background-color: var(--holding-border);
}

/* Detalhe de marca: usar com moderacao (titulos de destaque, certificado, conquistas). */
:is(.holding-aluno, .holding-login) .hb-divider--gold {
  width: var(--holding-space-8);
  height: 2px;
  margin: var(--holding-space-4) 0;
  background-color: var(--holding-gold);
}


/* ==========================================================================
   5. Botoes
   ========================================================================== */

:is(.holding-aluno, .holding-login) .hb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--holding-space-2);
  min-height: var(--holding-touch-target);
  margin: 0;
  padding: var(--holding-space-2) var(--holding-space-5);
  border: 1px solid transparent;
  border-radius: var(--holding-radius-button);
  background-color: transparent;
  color: var(--holding-text);
  font-family: inherit;
  font-size: var(--holding-font-size-base);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-tight);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--holding-transition), border-color var(--holding-transition),
    color var(--holding-transition);
}

:is(.holding-aluno, .holding-login) .hb-btn:hover,
:is(.holding-aluno, .holding-login) .hb-btn:focus {
  text-decoration: none;
}

:is(.holding-aluno, .holding-login) .hb-btn:focus:not(:focus-visible) {
  outline: none;
}

:is(.holding-aluno, .holding-login) .hb-btn:focus-visible {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: 2px;
}

:is(.holding-aluno, .holding-login) .hb-btn > svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Primario: CTA principal, Verde Montanha */
:is(.holding-aluno, .holding-login) .hb-btn--primary {
  border-color: var(--holding-green);
  background-color: var(--holding-green);
  color: var(--holding-text-inverse);
}

:is(.holding-aluno, .holding-login) .hb-btn--primary:hover,
:is(.holding-aluno, .holding-login) .hb-btn--primary:focus {
  border-color: var(--holding-green-hover);
  background-color: var(--holding-green-hover);
  color: var(--holding-text-inverse);
}

:is(.holding-aluno, .holding-login) .hb-btn--primary:active {
  border-color: var(--holding-green-active);
  background-color: var(--holding-green-active);
}

/* Secundario: contorno neutro */
:is(.holding-aluno, .holding-login) .hb-btn--secondary {
  border-color: var(--holding-border);
  background-color: var(--holding-surface);
  color: var(--holding-text);
}

:is(.holding-aluno, .holding-login) .hb-btn--secondary:hover,
:is(.holding-aluno, .holding-login) .hb-btn--secondary:focus {
  border-color: var(--holding-input-border);
  background-color: var(--holding-surface-subtle);
  color: var(--holding-heading);
}

:is(.holding-aluno, .holding-login) .hb-btn--secondary:active {
  background-color: var(--holding-surface-strong);
}

/* Outline: contorno na cor da marca */
:is(.holding-aluno, .holding-login) .hb-btn--outline {
  border-color: var(--holding-green);
  background-color: var(--holding-surface);
  color: var(--holding-green);
}

:is(.holding-aluno, .holding-login) .hb-btn--outline:hover,
:is(.holding-aluno, .holding-login) .hb-btn--outline:focus {
  border-color: var(--holding-green-hover);
  background-color: var(--holding-green-tint);
  color: var(--holding-green-hover);
}

:is(.holding-aluno, .holding-login) .hb-btn--outline:active {
  background-color: var(--holding-green-tint-strong);
}

/* Danger: acoes destrutivas */
:is(.holding-aluno, .holding-login) .hb-btn--danger {
  border-color: var(--holding-danger);
  background-color: var(--holding-danger);
  color: var(--holding-text-inverse);
}

:is(.holding-aluno, .holding-login) .hb-btn--danger:hover,
:is(.holding-aluno, .holding-login) .hb-btn--danger:focus {
  border-color: var(--holding-danger-hover);
  background-color: var(--holding-danger-hover);
  color: var(--holding-text-inverse);
}

:is(.holding-aluno, .holding-login) .hb-btn--danger:focus-visible {
  outline-color: var(--holding-danger);
}

/* Largura total apenas quando pedida explicitamente */
:is(.holding-aluno, .holding-login) .hb-btn--block {
  display: flex;
  width: 100%;
}

:is(.holding-aluno, .holding-login) .hb-btn:disabled,
:is(.holding-aluno, .holding-login) .hb-btn.is-disabled,
:is(.holding-aluno, .holding-login) .hb-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================================================
   6. Formularios
   ========================================================================== */

:is(.holding-aluno, .holding-login) .hb-field {
  display: flex;
  flex-direction: column;
  gap: var(--holding-space-2);
  min-width: 0;
}

:is(.holding-aluno, .holding-login) .hb-label {
  display: block;
  max-width: 100%;
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

/* 16px no mobile evita o zoom automatico do iOS ao focar o campo; 14px a partir de 768px. */
:is(.holding-aluno, .holding-login) .hb-input,
:is(.holding-aluno, .holding-login) .hb-select,
:is(.holding-aluno, .holding-login) .hb-textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--holding-touch-target);
  margin: 0;
  padding: var(--holding-space-2) var(--holding-space-3);
  border: 1px solid var(--holding-input-border);
  border-radius: var(--holding-radius-control);
  background-color: var(--holding-surface);
  box-shadow: none;
  color: var(--holding-text);
  font-family: inherit;
  font-size: var(--holding-font-size-content);
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--holding-transition), box-shadow var(--holding-transition);
}

@media (min-width: 768px) {
  :is(.holding-aluno, .holding-login) .hb-input,
  :is(.holding-aluno, .holding-login) .hb-select,
  :is(.holding-aluno, .holding-login) .hb-textarea {
    font-size: var(--holding-font-size-base);
  }
}

:is(.holding-aluno, .holding-login) .hb-input::placeholder,
:is(.holding-aluno, .holding-login) .hb-textarea::placeholder {
  color: var(--holding-text-muted);
  opacity: 1;
}

:is(.holding-aluno, .holding-login) .hb-input:focus,
:is(.holding-aluno, .holding-login) .hb-select:focus,
:is(.holding-aluno, .holding-login) .hb-textarea:focus {
  border-color: var(--holding-green);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--holding-focus-ring-soft);
}

/* Chevron "chevron-down" do Lucide; data URI nao le custom properties (cor = --holding-text-muted). */
:is(.holding-aluno, .holding-login) .hb-select {
  padding-right: var(--holding-space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23575757' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right var(--holding-space-3) center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

:is(.holding-aluno, .holding-login) .hb-select[multiple],
:is(.holding-aluno, .holding-login) .hb-select[size]:not([size="1"]) {
  padding-right: var(--holding-space-3);
  background-image: none;
}

:is(.holding-aluno, .holding-login) .hb-textarea {
  min-height: 96px;
  line-height: var(--holding-line-height-base);
  resize: vertical;
}

:is(.holding-aluno, .holding-login) .hb-input:disabled,
:is(.holding-aluno, .holding-login) .hb-select:disabled,
:is(.holding-aluno, .holding-login) .hb-textarea:disabled {
  background-color: var(--holding-surface-subtle);
  color: var(--holding-text-muted);
  cursor: not-allowed;
}

:is(.holding-aluno, .holding-login) .hb-input[readonly],
:is(.holding-aluno, .holding-login) .hb-textarea[readonly] {
  background-color: var(--holding-surface-subtle);
}

:is(.holding-aluno, .holding-login) .hb-help {
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
  line-height: 1.5;
}

:is(.holding-aluno, .holding-login) .hb-error {
  margin: 0;
  color: var(--holding-danger);
  font-size: var(--holding-font-size-sm);
  font-weight: var(--holding-font-weight-medium);
  line-height: 1.5;
}

/* Erro: .is-invalid no campo, no wrapper .hb-field ou aria-invalid="true" */
:is(.holding-aluno, .holding-login) .hb-input.is-invalid,
:is(.holding-aluno, .holding-login) .hb-select.is-invalid,
:is(.holding-aluno, .holding-login) .hb-textarea.is-invalid,
:is(.holding-aluno, .holding-login) .hb-input[aria-invalid="true"],
:is(.holding-aluno, .holding-login) .hb-select[aria-invalid="true"],
:is(.holding-aluno, .holding-login) .hb-textarea[aria-invalid="true"],
:is(.holding-aluno, .holding-login) .hb-field.is-invalid .hb-input,
:is(.holding-aluno, .holding-login) .hb-field.is-invalid .hb-select,
:is(.holding-aluno, .holding-login) .hb-field.is-invalid .hb-textarea {
  border-color: var(--holding-danger);
}

:is(.holding-aluno, .holding-login) .hb-input.is-invalid:focus,
:is(.holding-aluno, .holding-login) .hb-select.is-invalid:focus,
:is(.holding-aluno, .holding-login) .hb-textarea.is-invalid:focus,
:is(.holding-aluno, .holding-login) .hb-input[aria-invalid="true"]:focus,
:is(.holding-aluno, .holding-login) .hb-select[aria-invalid="true"]:focus,
:is(.holding-aluno, .holding-login) .hb-textarea[aria-invalid="true"]:focus,
:is(.holding-aluno, .holding-login) .hb-field.is-invalid .hb-input:focus,
:is(.holding-aluno, .holding-login) .hb-field.is-invalid .hb-select:focus,
:is(.holding-aluno, .holding-login) .hb-field.is-invalid .hb-textarea:focus {
  box-shadow: 0 0 0 3px var(--holding-focus-ring-danger);
}


/* ==========================================================================
   7. Cards e superficies
   ========================================================================== */

:is(.holding-aluno, .holding-login) .hb-card {
  position: relative;
  padding: var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
  color: var(--holding-text);
}

@media (min-width: 768px) {
  :is(.holding-aluno, .holding-login) .hb-card {
    padding: var(--holding-space-5);
  }
}

/* Modificadores de padding vem depois do @media para prevalecer em qualquer largura. */
:is(.holding-aluno, .holding-login) .hb-card--compact {
  padding: var(--holding-space-4);
}

:is(.holding-aluno, .holding-login) .hb-card--spacious {
  padding: var(--holding-space-6);
}

:is(.holding-aluno, .holding-login) .hb-card--accent {
  border-left: 4px solid var(--holding-green);
}

/* Uso restrito: conquistas e certificado. */
:is(.holding-aluno, .holding-login) .hb-card--accent-gold {
  border-left: 4px solid var(--holding-gold);
}

:is(.holding-aluno, .holding-login) .hb-card__title {
  margin: 0 0 var(--holding-space-2);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

:is(.holding-aluno, .holding-login) .hb-card__description {
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-base);
}

/* Superficie escura para player e midia. O foco passa a usar Jade (contraste 8,3:1). */
:is(.holding-aluno, .holding-login) .hb-surface-velvet {
  --holding-focus-ring: var(--holding-jade);
  background-color: var(--holding-velvet);
  color: var(--holding-text-inverse);
}

:is(.holding-aluno, .holding-login) .hb-surface-velvet .hb-text-muted {
  color: var(--holding-text-inverse-muted);
}


/* ==========================================================================
   8. Icones (SVG inline no estilo Lucide)
   ========================================================================== */

:is(.holding-aluno, .holding-login) .hb-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(.holding-aluno, .holding-login) .hb-icon--sm {
  width: 14px;
  height: 14px;
}

:is(.holding-aluno, .holding-login) .hb-icon--lg {
  width: 20px;
  height: 20px;
}


/* ==========================================================================
   9. Shell
   ========================================================================== */

.holding-aluno .hb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.holding-aluno .hb-skip-link {
  position: absolute;
  top: var(--holding-space-2);
  left: var(--holding-space-2);
  z-index: 1040;
  padding: var(--holding-space-2) var(--holding-space-4);
  border-radius: var(--holding-radius-button);
  background-color: var(--holding-surface);
  box-shadow: var(--holding-shadow-dropdown);
  color: var(--holding-green);
  font-weight: var(--holding-font-weight-semibold);
  transform: translateY(-200%);
}

.holding-aluno .hb-skip-link:focus {
  outline: 2px solid var(--holding-green);
  outline-offset: 2px;
  color: var(--holding-green);
  text-decoration: none;
  transform: none;
}

/*
 * <main> aberto em template/inc/header.php e fechado em template/footer.php.
 * Ainda sem fundo proprio: o neutro claro (--holding-surface-subtle) entra tela a tela,
 * pela classe de pagina do <body> (ex.: .hb-page-pages-meus-cursos .hb-main).
 */
.holding-aluno .hb-main {
  display: block;
  min-height: calc(100vh - var(--holding-header-height));
  /* Espaco final da pagina (substitui os 4 <br> que template/footer.php emitia: ~88px). */
  padding-bottom: calc(var(--holding-space-16) + var(--holding-space-6));
}

/* Recebe o foco ao fechar um aviso (holding-aluno.js): sem contorno num bloco do tamanho da tela. */
.holding-aluno .hb-main:focus {
  outline: none;
}


/* ==========================================================================
   10. Header
   Marcacao propria (.hb-*): nao usa .navbar do Bootstrap nem as regras do styles.css.
   ========================================================================== */

/* Sticky: fica no fluxo (nao cobre o conteudo como o antigo navbar-fixed-top) e segue visivel. */
.holding-aluno .hb-app-header {
  --holding-focus-ring: var(--holding-text-inverse);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1030; /* abaixo do backdrop/modal do Bootstrap (1040/1050) */
  min-height: 0; /* neutraliza header { min-height: 230px } do styles.css */
  margin: 0; /* neutraliza header { margin-bottom: 5px } do styles.css */
  background-color: var(--holding-green);
  box-shadow: var(--holding-shadow-header);
  color: var(--holding-text-inverse);
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-base);
}

.holding-aluno .hb-app-header__inner {
  display: flex;
  align-items: center;
  min-height: var(--holding-header-height);
}

.holding-aluno .hb-app-header a:focus:not(:focus-visible),
.holding-aluno .hb-app-header button:focus:not(:focus-visible) {
  outline: none;
}

.holding-aluno .hb-app-header a:focus-visible,
.holding-aluno .hb-app-header button:focus-visible {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: -2px;
}

/* Marca: logo oficial (PNG 66x85) exibido a 35px de altura, sem ampliar */
.holding-aluno .hb-brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--holding-space-3);
  min-height: var(--holding-touch-target);
  margin-left: calc(var(--holding-space-1) * -1);
  padding: var(--holding-space-1) var(--holding-space-2) var(--holding-space-1) var(--holding-space-1);
  border-radius: var(--holding-radius-button);
  color: var(--holding-text-inverse);
  text-decoration: none;
}

.holding-aluno .hb-brand:hover,
.holding-aluno .hb-brand:focus {
  background-color: var(--holding-header-link-hover);
  color: var(--holding-text-inverse);
  text-decoration: none;
}

.holding-aluno .hb-brand__logo {
  display: block;
  width: auto;
  height: var(--holding-logo-height);
}

.holding-aluno .hb-brand__name {
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-tight);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Botao do menu compacto: so aparece abaixo de 768px */
.holding-aluno .hb-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--holding-touch-target);
  height: var(--holding-touch-target);
  margin: 0 -10px 0 auto; /* alinha o icone de 24px ao gutter */
  padding: 0;
  border: 0;
  border-radius: var(--holding-radius-button);
  background-color: transparent;
  color: var(--holding-text-inverse);
  cursor: pointer;
}

.holding-aluno .hb-menu-toggle:hover,
.holding-aluno .hb-menu-toggle[aria-expanded="true"] {
  background-color: var(--holding-header-link-hover);
}

.holding-aluno .hb-menu-toggle .hb-icon {
  width: 24px;
  height: 24px;
}

.holding-aluno .hb-menu-toggle .hb-menu-toggle__fechar,
.holding-aluno .hb-menu-toggle[aria-expanded="true"] .hb-menu-toggle__abrir {
  display: none;
}

.holding-aluno .hb-menu-toggle[aria-expanded="true"] .hb-menu-toggle__fechar {
  display: inline-block;
}

.holding-aluno .hb-nav__list,
.holding-aluno .hb-user__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Menu do usuario: botao (desktop) */
.holding-aluno .hb-user__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--holding-space-2);
  min-height: var(--holding-touch-target);
  margin: 0 calc(var(--holding-space-3) * -1) 0 0;
  padding: 0 var(--holding-space-3);
  border: 0;
  border-radius: var(--holding-radius-control);
  background-color: transparent;
  color: var(--holding-text-inverse);
  font-family: inherit;
  font-size: var(--holding-font-size-base);
  font-weight: var(--holding-font-weight-medium);
  cursor: pointer;
}

.holding-aluno .hb-user__toggle:hover,
.holding-aluno .hb-user__toggle[aria-expanded="true"] {
  background-color: var(--holding-header-link-hover);
}

.holding-aluno .hb-user__name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holding-aluno .hb-user__chevron {
  transition: transform var(--holding-transition);
}

.holding-aluno .hb-user__toggle[aria-expanded="true"] .hb-user__chevron {
  transform: rotate(180deg);
}

/* Itens do menu do usuario (desktop e mobile) */
.holding-aluno .hb-user__link {
  display: flex;
  align-items: center;
  gap: var(--holding-space-3);
  min-height: var(--holding-touch-target);
  padding: var(--holding-space-2) var(--holding-space-4);
  color: var(--holding-text);
  font-size: var(--holding-font-size-base);
  text-decoration: none;
  white-space: nowrap;
}

.holding-aluno .hb-user__link:hover,
.holding-aluno .hb-user__link:focus {
  background-color: var(--holding-surface-subtle);
  color: var(--holding-heading);
  text-decoration: none;
}

/* Desktop e tablet: navegacao horizontal + usuario a direita */
@media (min-width: 768px) {
  .holding-aluno .hb-app-menu {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    align-self: stretch;
    min-width: 0;
    margin-left: var(--holding-space-6);
  }

  .holding-aluno .hb-nav,
  .holding-aluno .hb-nav__list {
    display: flex;
    align-items: stretch;
  }

  .holding-aluno .hb-nav__list {
    gap: var(--holding-space-1);
  }

  /* O li ocupa os 50px do header: o indicador do item ativo fica rente a base do header. */
  .holding-aluno .hb-nav__item {
    position: relative;
    display: flex;
    align-items: center;
  }

  .holding-aluno .hb-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--holding-space-2);
    min-height: var(--holding-touch-target);
    padding: 0 var(--holding-space-4);
    border-radius: var(--holding-radius-control);
    color: var(--holding-header-link);
    font-weight: var(--holding-font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
  }

  .holding-aluno .hb-nav__link:hover,
  .holding-aluno .hb-nav__link:focus {
    background-color: var(--holding-header-link-hover);
    color: var(--holding-text-inverse);
    text-decoration: none;
  }

  .holding-aluno .hb-nav__link[aria-current="page"],
  .holding-aluno .hb-nav__link[aria-current="true"] {
    color: var(--holding-text-inverse);
  }

  /* Item ativo: linha dourada de 2px, so como detalhe (o texto continua branco) */
  .holding-aluno .hb-nav__link[aria-current="page"]::after,
  .holding-aluno .hb-nav__link[aria-current="true"]::after {
    content: "";
    position: absolute;
    right: var(--holding-space-4);
    bottom: 0;
    left: var(--holding-space-4);
    height: 2px;
    background-color: var(--holding-header-indicator);
  }

  .holding-aluno .hb-user {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: var(--holding-space-4);
  }

  .holding-aluno .hb-user__identity {
    display: none;
  }

  .holding-aluno .hb-user__menu {
    --holding-focus-ring: var(--holding-green);
    position: absolute;
    top: calc(100% + var(--holding-space-1));
    right: calc(var(--holding-space-3) * -1);
    z-index: 1;
    min-width: 180px;
    padding: var(--holding-space-2) 0;
    border-radius: var(--holding-radius-dropdown);
    background-color: var(--holding-surface);
    box-shadow: var(--holding-shadow-dropdown);
  }

  .hb-js .holding-aluno .hb-user__menu {
    display: none;
  }

  .hb-js .holding-aluno .hb-user.is-open .hb-user__menu {
    display: block;
  }
}

/* Mobile: logo a esquerda, botao de menu a direita, painel abaixo do header */
@media (max-width: 767px) {
  .holding-aluno .hb-app-header__inner {
    flex-wrap: wrap;
  }

  .holding-aluno .hb-menu-toggle {
    display: inline-flex;
  }

  /* Sem JS o painel fica aberto no fluxo; com JS (.hb-js) vira uma area sobreposta recolhivel. */
  .holding-aluno .hb-app-menu {
    --holding-focus-ring: var(--holding-green);
    flex: 0 0 calc(100% + var(--holding-gutter) * 2);
    margin: 0 calc(var(--holding-gutter) * -1);
    padding: var(--holding-space-2) 0;
    border-bottom: 1px solid var(--holding-border);
    background-color: var(--holding-surface);
    box-shadow: var(--holding-shadow-dropdown);
    color: var(--holding-text);
  }

  .hb-js .holding-aluno .hb-app-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100vh - var(--holding-header-height));
    margin: 0;
    overflow-y: auto;
  }

  .hb-js .holding-aluno .hb-app-header.is-menu-open .hb-app-menu {
    display: block;
  }

  .holding-aluno .hb-nav__link,
  .holding-aluno .hb-user__link {
    display: flex;
    align-items: center;
    gap: var(--holding-space-3);
    min-height: var(--holding-space-12);
    padding: var(--holding-space-2) var(--holding-gutter);
    color: var(--holding-text);
    font-size: var(--holding-font-size-content);
    text-decoration: none;
  }

  .holding-aluno .hb-nav__link:hover,
  .holding-aluno .hb-nav__link:focus {
    background-color: var(--holding-surface-subtle);
    color: var(--holding-heading);
    text-decoration: none;
  }

  /* No painel branco o item ativo usa o Verde Montanha (o dourado nao tem contraste sobre branco). */
  .holding-aluno .hb-nav__link[aria-current="page"],
  .holding-aluno .hb-nav__link[aria-current="true"] {
    background-color: var(--holding-green-tint);
    box-shadow: inset 3px 0 0 var(--holding-green);
    color: var(--holding-green);
    font-weight: var(--holding-font-weight-semibold);
  }

  .holding-aluno .hb-user {
    margin-top: var(--holding-space-2);
    padding-top: var(--holding-space-2);
    border-top: 1px solid var(--holding-border);
  }

  .holding-aluno .hb-user__toggle {
    display: none;
  }

  .holding-aluno .hb-user__identity {
    display: flex;
    align-items: center;
    gap: var(--holding-space-3);
    margin: 0;
    padding: var(--holding-space-2) var(--holding-gutter);
    color: var(--holding-text-muted);
    font-size: var(--holding-font-size-sm);
  }

  .holding-aluno .hb-user__menu {
    display: block;
  }
}


/* ==========================================================================
   11. Curso / player (application/views/ver.php + componentes/js/holding-player.js)
   ========================================================================== */

.holding-aluno .hb-curso {
  padding: var(--holding-space-6) 0 var(--holding-space-12);
}

/* Cabecalho da aula */
.holding-aluno .hb-aula-cabecalho {
  min-height: 0; /* neutraliza header { min-height: 230px } do styles.css */
  margin-bottom: var(--holding-space-5);
}

.holding-aluno .hb-aula-cabecalho__topo {
  display: flex;
  align-items: center;
  margin-bottom: var(--holding-space-2);
}

.holding-aluno .hb-aula-cabecalho__topo .hb-overline {
  min-width: 0;
  margin: 0;
}

/*
 * Voltar para Meus Cursos: so a seta (rotulo em aria-label/title). Alvo de 44px com margens
 * negativas: a linha nao cresce, a seta fica alinhada a borda do titulo e do player e o texto
 * do sobretitulo comeca 8px depois dela.
 */
.holding-aluno .hb-aula-voltar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--holding-touch-target);
  height: var(--holding-touch-target);
  margin: calc(var(--holding-space-3) * -1) calc(var(--holding-space-2) - (var(--holding-touch-target) - 18px) / 2) calc(var(--holding-space-3) * -1) calc((var(--holding-touch-target) - 18px) / -2);
  border-radius: var(--holding-radius-button);
  color: var(--holding-text-muted);
  transition: color var(--holding-transition);
}

.holding-aluno .hb-aula-voltar .hb-icon {
  width: 18px;
  height: 18px;
}

.holding-aluno .hb-aula-voltar:hover,
.holding-aluno .hb-aula-voltar:focus {
  color: var(--holding-green);
  text-decoration: none;
}

.holding-aluno .hb-aula-voltar:focus:not(:focus-visible) {
  outline: none;
}

.holding-aluno .hb-aula-voltar:focus-visible {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: -8px;
}

.holding-aluno .hb-aula-cabecalho__sep {
  margin: 0 var(--holding-space-1);
}

.holding-aluno .hb-aula-cabecalho__titulo {
  margin: 0;
  color: var(--holding-heading);
  font-size: 20px;
  font-weight: var(--holding-font-weight-regular);
  line-height: var(--holding-line-height-tight);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .holding-aluno .hb-aula-cabecalho__titulo {
    font-size: var(--holding-font-size-xl);
  }
}

/* Grade: principal + lateral (minmax(0, 1fr) impede o iframe de alargar a coluna) */
.holding-aluno .hb-curso__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--holding-space-6);
  align-items: start;
}

@media (min-width: 992px) {
  .holding-aluno .hb-curso__grade {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

/* Player: superficie velvet, 16:9 sem altura fixa */
.holding-aluno .hb-player {
  overflow: hidden;
  border-radius: var(--holding-radius-card);
}

.holding-aluno .hb-player__quadro {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 16 / 9) {
  .holding-aluno .hb-player__quadro {
    height: 0;
    padding-top: 56.25%;
  }
}

.holding-aluno .hb-player__quadro iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.holding-aluno .hb-player__vazio {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--holding-space-6);
  color: var(--holding-text-inverse-muted);
  text-align: center;
}

/* Modulo (ou curso) sem aulas: aviso no lugar do player ("Conteudo em breve" no H1) */
.holding-aluno .hb-conteudo-vazio {
  display: flex;
  align-items: center;
  gap: var(--holding-space-4);
  padding: var(--holding-space-6);
}

.holding-aluno .hb-conteudo-vazio__icone {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--holding-space-12);
  height: var(--holding-space-12);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-green-tint);
  color: var(--holding-green);
}

.holding-aluno .hb-conteudo-vazio__texto {
  margin: 0;
  color: var(--holding-text);
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-base);
}

/* Sem coluna lateral (curso sem aulas e sem avaliacao/certificado): uma coluna so */
@media (min-width: 992px) {
  .holding-aluno .hb-curso__grade--unica {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Conclusao da aula, logo abaixo do player: mensagem a esquerda e acao a direita (empilhado no
 * mobile, CTA em largura total). Pendente: neutro claro. Concluida: verde muito suave + check.
 */
.holding-aluno .hb-aula-conclusao {
  display: flex;
  flex-direction: column;
  gap: var(--holding-space-4);
  margin-top: var(--holding-space-4);
  padding: var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface-subtle);
}

.holding-aluno .hb-aula-conclusao.is-concluida {
  border-color: var(--holding-green-tint-strong);
  background-color: var(--holding-green-tint);
}

.holding-aluno .hb-aula-conclusao__mensagem {
  display: flex;
  align-items: flex-start;
  gap: var(--holding-space-3);
  min-width: 0;
}

.holding-aluno .hb-aula-conclusao__mensagem:focus:not(:focus-visible) {
  outline: none;
}

.holding-aluno .hb-aula-conclusao__icone {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--holding-green);
}

.holding-aluno .hb-aula-conclusao__titulo {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-aula-conclusao__texto {
  margin: 2px 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-aula-conclusao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--holding-space-2);
}

.holding-aluno .hb-aula-conclusao__erro {
  margin: 0;
  color: var(--holding-danger);
  font-size: var(--holding-font-size-sm);
}

@media (max-width: 767px) {
  .holding-aluno .hb-aula-conclusao__acoes .hb-btn {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .holding-aluno .hb-aula-conclusao {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--holding-space-4) var(--holding-space-5);
  }

  .holding-aluno .hb-aula-conclusao__mensagem {
    flex: 1 1 240px;
  }

  .holding-aluno .hb-aula-conclusao__acoes {
    flex-shrink: 0;
  }

  .holding-aluno .hb-aula-conclusao__erro {
    flex-basis: 100%;
  }
}

/* Durante o POST o botao fica desabilitado, mas sem o esmaecimento forte de :disabled */
.holding-aluno .hb-btn.is-loading:disabled {
  opacity: 0.8;
  cursor: progress;
}

.holding-aluno .hb-curso-concluido {
  display: flex;
  align-items: flex-start;
  gap: var(--holding-space-3);
  margin-top: var(--holding-space-4);
}

.holding-aluno .hb-curso-concluido__icone {
  margin-top: 1px;
  color: var(--holding-green);
}

.holding-aluno .hb-curso-concluido__titulo {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-curso-concluido__texto {
  margin: var(--holding-space-1) 0 0;
  color: var(--holding-text-muted);
}

/* Materiais da aula: so os complementares (texto, audio, PDF) e, com mais de um video, o seletor */
.holding-aluno .hb-materiais {
  margin-top: var(--holding-space-6);
  padding-top: var(--holding-space-5);
  border-top: 1px solid var(--holding-border);
}

.holding-aluno .hb-materiais__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--holding-space-2);
  margin-top: var(--holding-space-3);
}

.holding-aluno .hb-materiais__grupo + .hb-materiais__lista {
  margin-top: var(--holding-space-4);
}

.holding-aluno .hb-materiais__rotulo {
  margin: var(--holding-space-3) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

.holding-aluno .hb-materiais__rotulo + .hb-materiais__lista {
  margin-top: var(--holding-space-2);
}

/* Botao compacto: mesma altura de toque (44px), menos respiro lateral */
.holding-aluno .hb-material {
  padding-right: var(--holding-space-4);
  padding-left: var(--holding-space-3);
  font-weight: var(--holding-font-weight-medium);
}

.holding-aluno .hb-material > svg {
  color: var(--holding-green);
}

/* Video em exibicao no seletor: contorno e fundo verdes suaves (o estado tambem vai em aria-pressed) */
.holding-aluno .hb-material[aria-pressed="true"],
.holding-aluno .hb-material[aria-pressed="true"]:hover,
.holding-aluno .hb-material[aria-pressed="true"]:focus {
  border-color: var(--holding-green);
  background-color: var(--holding-green-tint);
  color: var(--holding-green-active);
}

/*
 * Modais dos materiais (texto de apoio, audio). Bootstrap 3 cuida de abrir/fechar; aqui so o visual:
 * cabecalho com sobretitulo (aula) + titulo (material) + fechar, corpo com a tipografia de leitura
 * (.hb-content) e rodape com as acoes. A centralizacao vertical continua a do styles.css legado.
 */
.holding-aluno .hb-modal__dialogo {
  width: calc(100% - var(--holding-space-8));
  max-width: 600px;
  margin: var(--holding-space-6) auto;
}

.holding-aluno .hb-modal__conteudo {
  overflow: hidden;
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
  box-shadow: var(--holding-shadow-dropdown);
}

.holding-aluno .hb-modal__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--holding-space-3);
  padding: var(--holding-space-4) var(--holding-space-2) var(--holding-space-4) var(--holding-space-4);
  border-bottom: 1px solid var(--holding-border);
}

.holding-aluno .hb-modal__titulos {
  min-width: 0;
  padding-top: var(--holding-space-2);
}

.holding-aluno .hb-modal__titulos .hb-overline {
  margin-bottom: var(--holding-space-1);
  overflow-wrap: anywhere;
}

.holding-aluno .hb-modal__titulo {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-lg);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  overflow-wrap: anywhere;
}

.holding-aluno .hb-modal__fechar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--holding-touch-target);
  height: var(--holding-touch-target);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--holding-radius-button);
  background-color: transparent;
  color: var(--holding-text-muted);
  cursor: pointer;
  transition: color var(--holding-transition), background-color var(--holding-transition);
}

.holding-aluno .hb-modal__fechar:hover {
  background-color: var(--holding-surface-subtle);
  color: var(--holding-heading);
}

.holding-aluno .hb-modal__fechar:focus:not(:focus-visible) {
  outline: none;
}

.holding-aluno .hb-modal__fechar:focus-visible {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: -4px;
}

.holding-aluno .hb-modal__corpo {
  padding: var(--holding-space-5) var(--holding-space-4);
}

/* Texto cadastrado no admin: imagens e tabelas nao estouram a modal */
.holding-aluno .hb-modal__corpo img {
  max-width: 100%;
  height: auto;
}

.holding-aluno .hb-modal__corpo table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.holding-aluno .hb-modal__audio {
  display: block;
  width: 100%;
}

.holding-aluno .hb-modal__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--holding-space-2);
  padding: var(--holding-space-3) var(--holding-space-4);
  border-top: 1px solid var(--holding-border);
}

@media (max-width: 479px) {
  .holding-aluno .hb-modal__rodape .hb-btn {
    flex: 1 1 auto;
  }
}

@media (min-width: 768px) {
  .holding-aluno .hb-modal__dialogo {
    margin: var(--holding-space-8) auto;
  }

  .holding-aluno .hb-modal__cabecalho {
    padding: var(--holding-space-5) var(--holding-space-3) var(--holding-space-4) var(--holding-space-6);
  }

  .holding-aluno .hb-modal__corpo {
    padding: var(--holding-space-6);
  }

  .holding-aluno .hb-modal__rodape {
    padding: var(--holding-space-4) var(--holding-space-6);
  }
}

/* Progresso do curso */
.holding-aluno .hb-progresso__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--holding-space-3);
  margin-bottom: var(--holding-space-3);
}

.holding-aluno .hb-progresso__titulo {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-base);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-progresso__percentual {
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.holding-aluno .hb-progresso__trilha {
  height: 6px;
  overflow: hidden;
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-surface-strong);
}

.holding-aluno .hb-progresso__preenchimento {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--holding-green);
  transition: width 300ms ease;
}

.holding-aluno .hb-progresso__resumo {
  margin: var(--holding-space-2) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

/* Lista de aulas do modulo: estados concluida / atual / nao concluida (atual + concluida coexistem) */
.holding-aluno .hb-aulas {
  margin-top: var(--holding-space-4);
  padding: 0;
  overflow: hidden;
}

.holding-aluno .hb-aulas__cabecalho {
  padding: var(--holding-space-4) var(--holding-space-4) var(--holding-space-3);
  border-bottom: 1px solid var(--holding-border);
}

.holding-aluno .hb-aulas__cabecalho .hb-overline {
  margin-bottom: var(--holding-space-1);
}

.holding-aluno .hb-aulas__titulo {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-base);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-aulas__lista {
  margin: 0;
  padding: var(--holding-space-1) 0;
  list-style: none;
}

.holding-aluno .hb-aulas__lista--extras {
  border-top: 1px solid var(--holding-border);
}

/* Modulo sem aulas: so os extras, logo abaixo do cabecalho (que ja tem a linha) */
.holding-aluno .hb-aulas__cabecalho + .hb-aulas__lista--extras {
  border-top: 0;
}

.holding-aluno .hb-aula-link {
  display: flex;
  align-items: flex-start;
  gap: var(--holding-space-3);
  min-height: var(--holding-touch-target);
  padding: var(--holding-space-3) var(--holding-space-4);
  color: var(--holding-text);
  line-height: var(--holding-line-height-snug);
  text-decoration: none;
}

.holding-aluno .hb-aula-link:hover,
.holding-aluno .hb-aula-link:focus {
  background-color: var(--holding-surface-subtle);
  color: var(--holding-heading);
  text-decoration: none;
}

.holding-aluno .hb-aula-link:focus:not(:focus-visible) {
  outline: none;
}

.holding-aluno .hb-aula-link:focus-visible {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: -2px;
}

.holding-aluno .hb-aula-link__icone {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--holding-text-muted);
}

.holding-aluno .hb-aula-link__titulo {
  min-width: 0;
  overflow-wrap: anywhere;
}

.holding-aluno .hb-aula-link.is-concluida .hb-aula-link__icone {
  color: var(--holding-green);
}

.holding-aluno .hb-aula-link.is-atual {
  background-color: var(--holding-green-tint);
  box-shadow: inset 3px 0 0 var(--holding-green);
  color: var(--holding-heading);
  font-weight: var(--holding-font-weight-semibold);
}

.holding-aluno .hb-aula-link.is-atual .hb-aula-link__icone {
  color: var(--holding-green);
}

/*
 * Avaliacao do modulo na lista (AvaliacaoAluno_model::acaoPlayer): o texto diz a acao e a situacao;
 * a cor do icone so reforca. Indisponivel: texto, sem link.
 */
.holding-aluno .hb-aula-link__detalhe {
  display: block;
  margin-top: 2px;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-xs);
  font-weight: var(--holding-font-weight-regular);
}

.holding-aluno .hb-aula-link--avaliacao.is-continuar .hb-aula-link__icone,
.holding-aluno .hb-aula-link--avaliacao.is-aprovado .hb-aula-link__icone,
.holding-aluno .hb-aula-link--avaliacao.is-refazer .hb-aula-link__icone {
  color: var(--holding-green);
}

.holding-aluno .hb-aula-link--avaliacao.is-indisponivel,
.holding-aluno .hb-aula-link--avaliacao.is-indisponivel:hover {
  background-color: transparent;
  color: var(--holding-text-muted);
  cursor: default;
}

/*
 * Modulos do curso: cards editoriais claros. Sobretitulo "Modulo 01", nome, aulas concluidas do modulo
 * e seta; miniatura opcional a esquerda (.hb-modulos--thumbs, mais abaixo). Grade: 1 coluna no mobile, 2 no tablet, ate 3 no desktop
 * (maximo 352px cada, alinhadas a esquerda, como Meus Cursos).
 */
.holding-aluno .hb-modulos {
  margin-top: var(--holding-space-10);
}

.holding-aluno .hb-modulos .hb-section-title {
  margin-bottom: var(--holding-space-4);
}

.holding-aluno .hb-modulos__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--holding-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .holding-aluno .hb-modulos__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .holding-aluno .hb-modulos__grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .holding-aluno .hb-modulos__grade {
    grid-template-columns: repeat(3, minmax(0, var(--holding-curso-card-max)));
    justify-content: start;
  }
}

.holding-aluno .hb-modulos__grade > li {
  display: flex;
  min-width: 0;
}

/*
 * Card do modulo: sobretitulo, nome (elemento principal) e rodape preso a base com o estado das
 * aulas e a seta. O rodape em margin-top: auto alinha os cards da mesma linha sem altura fixa.
 */
.holding-aluno .hb-modulo-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--holding-touch-target);
  padding: var(--holding-space-4) var(--holding-space-5);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
  color: var(--holding-text);
  text-decoration: none;
  transition: border-color var(--holding-transition-card), background-color var(--holding-transition-card);
}

.holding-aluno .hb-modulo-card:hover,
.holding-aluno .hb-modulo-card:focus {
  color: var(--holding-text);
  text-decoration: none;
}

.holding-aluno .hb-modulo-card:focus:not(:focus-visible) {
  outline: none;
}

.holding-aluno .hb-modulo-card:focus-visible {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: 2px;
}

/* min-height = altura do selo "Modulo atual": nomes alinhados entre cards da mesma linha */
.holding-aluno .hb-modulo-card__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--holding-space-1) var(--holding-space-2);
  min-height: var(--holding-space-5);
  margin-bottom: var(--holding-space-2);
}

.holding-aluno .hb-modulo-card__nome {
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  overflow-wrap: anywhere;
}

.holding-aluno .hb-modulo-card__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--holding-space-3);
  margin-top: auto;
  padding-top: var(--holding-space-4);
}

.holding-aluno .hb-modulo-card__aulas {
  display: inline-flex;
  align-items: center;
  gap: var(--holding-space-2);
  min-width: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

/* Estado das aulas: concluido e parcial em verde; nao iniciado em cinza neutro */
.holding-aluno .hb-modulo-card__estado {
  color: var(--holding-green);
}

.holding-aluno .hb-modulo-card.is-nao-iniciado .hb-modulo-card__estado {
  color: var(--holding-text-muted);
}

.holding-aluno .hb-modulo-card__seta {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--holding-green);
  transition: transform var(--holding-transition-card);
}

/* Hover so com mouse: borda um pouco mais escura, fundo quase imperceptivel e seta avanca 3px */
@media (hover: hover) and (pointer: fine) {
  .holding-aluno .hb-modulo-card:hover {
    border-color: var(--holding-input-border);
    background-color: var(--holding-surface-hover);
  }

  .holding-aluno .hb-modulo-card:hover .hb-modulo-card__seta {
    transform: translateX(3px);
  }
}

/* Modulo atual: verde muito suave, acento verde a esquerda e o selo "Modulo atual" */
.holding-aluno .hb-modulo-card.is-atual,
.holding-aluno .hb-modulo-card.is-atual:hover {
  border-color: var(--holding-green-tint-strong);
  background-color: var(--holding-green-tint);
  box-shadow: inset 3px 0 0 var(--holding-green);
}

/* Selo discreto: fundo branco, contorno verde suave, texto verde */
.holding-aluno .hb-modulo-card__selo {
  padding: 0 var(--holding-space-2);
  border: 1px solid var(--holding-green-tint-strong);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-surface);
  color: var(--holding-green);
  font-size: var(--holding-font-size-xs);
  font-weight: var(--holding-font-weight-semibold);
  line-height: 18px;
  letter-spacing: 0.02em;
}

/*
 * Miniatura do modulo (cu_periodos.imagem, ver.php). So existe com .hb-modulos--thumbs, isto e, quando
 * algum modulo do curso tem imagem valida; sem nenhuma, nada abaixo se aplica e os cards ficam como antes.
 * Coluna a esquerda em 4:3 (80x60 no mobile, 96x72 a partir de 768px). Sobretitulo, nome e rodape seguem
 * na coluna da direita, na mesma ordem. Imagem decorativa: sem zoom no hover (o hover do card continua o
 * mesmo).
 */
.holding-aluno .hb-modulos--thumbs .hb-modulo-card {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--holding-space-4);
}

.holding-aluno .hb-modulos--thumbs .hb-modulo-card > :not(.hb-modulo-card__thumb) {
  grid-column: 2;
}

.holding-aluno .hb-modulo-card__thumb {
  position: relative;
  display: block;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  width: 80px;
  height: 60px;
  overflow: hidden;
  border-radius: var(--holding-radius-button);
  background-color: var(--holding-velvet);
}

.holding-aluno .hb-modulo-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sem imagem: bloco velvet com o numero do modulo em dourado discreto */
.holding-aluno .hb-modulo-card__thumb--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
}

.holding-aluno .hb-modulo-card__thumb-numero {
  color: var(--holding-gold);
  font-size: var(--holding-font-size-lg);
  font-weight: var(--holding-font-weight-regular);
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Bloqueado: foto em cinza e mais apagada, cadeado ao centro; a informacao continua no texto do rodape */
.holding-aluno .hb-modulo-card.is-bloqueado .hb-modulo-card__thumb img {
  filter: grayscale(1);
  opacity: 0.55;
}

.holding-aluno .hb-modulo-card__thumb-cadeado {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--holding-text-inverse);
}

@media (min-width: 768px) {
  .holding-aluno .hb-modulos--thumbs .hb-modulo-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .holding-aluno .hb-modulo-card__thumb {
    width: 96px;
    height: 72px;
  }
}

/*
 * 992-1199px: o .container fixo (970px) deixa 3 cards de ~303px; com a miniatura (mesmo reduzida a 88px)
 * o texto ficaria com ~159px, nome e rodape quebrariam e o card iria de 121 para 164px. Nessa faixa, so
 * com miniaturas, a grade usa 2 colunas, como no tablet. Sem miniaturas continua com 3.
 */
@media (min-width: 992px) and (max-width: 1199px) {
  .holding-aluno .hb-modulos--thumbs .hb-modulos__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==========================================================================
   12. Meus Cursos (application/views/pages/meus_cursos.php)
   ========================================================================== */

/* Primeira tela a adotar o fundo neutro do shell (classe de pagina no <body>). */
.holding-aluno.hb-page-pages-meus-cursos .hb-main {
  background-color: var(--holding-surface-subtle);
}

.holding-aluno .hb-meus-cursos {
  padding-top: var(--holding-space-8);
  padding-bottom: var(--holding-space-6);
}

.holding-aluno .hb-meus-cursos__abertura {
  margin-bottom: var(--holding-space-8);
}

/* Desktop: abertura um pouco mais proxima da secao (32px -> 20px); mobile mantem 32px */
@media (min-width: 1200px) {
  .holding-aluno .hb-meus-cursos__abertura {
    margin-bottom: var(--holding-space-5);
  }
}

.holding-aluno .hb-meus-cursos__saudacao {
  margin: 0 0 var(--holding-space-2);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-xl);
  font-weight: var(--holding-font-weight-regular);
  line-height: var(--holding-line-height-tight);
}

@media (min-width: 768px) {
  .holding-aluno .hb-meus-cursos__saudacao {
    font-size: var(--holding-font-size-2xl);
  }
}

.holding-aluno .hb-meus-cursos__intro {
  max-width: 60ch;
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-content);
}

/* Cabecalho da secao: linha neutra com um segmento dourado discreto no inicio */
.holding-aluno .hb-meus-cursos__secao {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--holding-space-1) var(--holding-space-4);
  margin-bottom: var(--holding-space-6);
  padding-bottom: var(--holding-space-3);
  border-bottom: 1px solid var(--holding-border);
}

.holding-aluno .hb-meus-cursos__secao::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--holding-space-8);
  height: 2px;
  background-color: var(--holding-gold);
}

.holding-aluno .hb-meus-cursos__contagem {
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

/*
 * Grade: 1 coluna (limitada) no mobile, 2 colunas fluidas no tablet e, no desktop, ate 3 colunas
 * de no maximo 352px alinhadas a esquerda (o respiro fica a direita). Colunas fixas: 1 curso nao estica.
 */
.holding-aluno .hb-cursos-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--holding-space-6);
  max-width: 560px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .holding-aluno .hb-cursos-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

@media (min-width: 1200px) {
  .holding-aluno .hb-cursos-grade {
    grid-template-columns: repeat(3, minmax(0, var(--holding-curso-card-max)));
    justify-content: start;
  }
}

.holding-aluno .hb-cursos-grade__item {
  display: flex;
  min-width: 0;
}

/* Card: o CTA cobre o card inteiro (::after), com um unico ponto de foco por curso */
.holding-aluno .hb-curso-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
  transition: border-color var(--holding-transition), box-shadow var(--holding-transition);
}

.holding-aluno .hb-curso-card:hover {
  border-color: var(--holding-input-border);
  box-shadow: var(--holding-shadow-card);
}

.holding-aluno .hb-curso-card__capa {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--holding-velvet);
}

@supports not (aspect-ratio: 16 / 9) {
  .holding-aluno .hb-curso-card__capa {
    height: 0;
    padding-top: 56.25%;
  }
}

.holding-aluno .hb-curso-card__capa > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 280ms ease;
}

/* Veu editorial sobre a foto (o JPG nao e alterado); o selo fica acima dele */
.holding-aluno .hb-curso-card__capa::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: var(--holding-capa-veu);
  pointer-events: none;
  transition: opacity 280ms ease;
}

/* Hover so em dispositivos com mouse: zoom quase imperceptivel e veu um pouco mais leve */
@media (hover: hover) and (pointer: fine) {
  .holding-aluno .hb-curso-card:hover .hb-curso-card__capa > img {
    transform: scale(1.018);
  }

  .holding-aluno .hb-curso-card:hover .hb-curso-card__capa::after {
    opacity: 0.7;
  }
}

.holding-aluno .hb-curso-card__capa-vazia {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.holding-aluno .hb-curso-card__capa-vazia img {
  width: auto;
  height: var(--holding-space-12);
}

/* Selo de curso concluido: velvet translucido e check dourado sobre a capa */
.holding-aluno .hb-curso-card__selo {
  position: absolute;
  z-index: 1; /* acima do veu da capa */
  top: var(--holding-space-3);
  left: var(--holding-space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--holding-space-2);
  padding: var(--holding-space-1) var(--holding-space-3);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-velvet-glass);
  color: var(--holding-text-inverse);
  font-size: var(--holding-font-size-xs);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-curso-card__selo .hb-icon {
  color: var(--holding-gold);
}

.holding-aluno .hb-curso-card__corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--holding-space-4);
}

@media (min-width: 768px) {
  .holding-aluno .hb-curso-card__corpo {
    padding: var(--holding-space-5);
  }
}

.holding-aluno .hb-curso-card__corpo .hb-overline {
  margin-bottom: var(--holding-space-2);
}

.holding-aluno .hb-curso-card__titulo {
  margin: 0 0 var(--holding-space-5);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-lg);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  overflow-wrap: anywhere;
}

.holding-aluno .hb-curso-card__progresso-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--holding-space-2);
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

.holding-aluno .hb-curso-card__percentual {
  color: var(--holding-heading);
  font-weight: var(--holding-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.holding-aluno .hb-curso-card__resumo {
  margin: var(--holding-space-2) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

/*
 * Altura consistente: o espaco livre fica entre o titulo e o progresso, entao progresso e CTA
 * ficam ancorados na base e alinhados entre os cards da linha (titulos de 1 ou 2 linhas).
 */
.holding-aluno .hb-curso-card__progresso,
.holding-aluno .hb-curso-card__corpo > .hb-curso-card__resumo {
  margin-top: auto;
}

.holding-aluno .hb-curso-card__acao {
  padding-top: var(--holding-space-5);
}

/* Tablet e desktop: CTA com largura do conteudo, no canto inferior direito */
@media (min-width: 768px) {
  .holding-aluno .hb-curso-card__acao {
    display: flex;
    justify-content: flex-end;
  }
}

/* Desktop: card mais compacto (o mobile e o tablet mantem os espacos anteriores) */
@media (min-width: 1200px) {
  .holding-aluno .hb-curso-card__corpo {
    padding: var(--holding-space-4);
  }

  .holding-aluno .hb-curso-card__corpo .hb-overline {
    margin-bottom: var(--holding-space-1);
  }

  .holding-aluno .hb-curso-card__titulo {
    margin-bottom: var(--holding-space-4);
  }

  .holding-aluno .hb-curso-card__progresso-topo {
    margin-bottom: var(--holding-space-1);
  }

  .holding-aluno .hb-curso-card__resumo {
    margin-top: var(--holding-space-1);
  }

  .holding-aluno .hb-curso-card__acao {
    padding-top: var(--holding-space-4);
  }
}

.holding-aluno a.hb-curso-card__cta::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@media (max-width: 767px) {
  .holding-aluno .hb-curso-card__cta {
    width: 100%;
  }
}

/* Estado vazio: bloco em toda a largura da secao; o texto interno fica com largura contida */
.holding-aluno .hb-meus-cursos__vazio {
  width: 100%;
  padding: var(--holding-space-12) var(--holding-space-6);
  text-align: center;
}

.holding-aluno .hb-meus-cursos__vazio-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--holding-space-12);
  height: var(--holding-space-12);
  margin-bottom: var(--holding-space-4);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-green-tint);
  color: var(--holding-green);
}

.holding-aluno .hb-meus-cursos__vazio-titulo {
  margin: 0 0 var(--holding-space-2);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-meus-cursos__vazio-texto {
  max-width: 44ch;
  margin: 0 auto;
  color: var(--holding-text-muted);
}


/* ==========================================================================
   13. Login (application/views/login.php + componentes/js/holding-login.js)
   Somente sob <body class="holding-login"> (template/inc/header_login.php).
   Abaixo de 992px: logo com fundo verde + formulario. A partir de 992px: peca vertical da marca
   (52%, componentes/images/login-holding-*) + formulario sem logo (48%).
   ========================================================================== */

/* min-height: 100vh de fallback; 100dvh acompanha a barra de endereco do celular. */
.holding-login .hb-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.holding-login .hb-login__visual {
  display: none;
}

/* Formulario: coluna sem card.
   Celular: ancorada no alto, com respiro superior que acompanha a altura da tela (32px a 64px;
   svh nao muda quando a barra de endereco recolhe). A partir de 768px: centralizada por margin
   auto (nao corta o topo se o conteudo passar da altura, ex.: tela baixa). */
.holding-login .hb-login__painel {
  display: flex;
  flex-direction: column;
  padding: var(--holding-space-10) var(--holding-space-6);
  padding-top: clamp(var(--holding-space-8), 8vh, var(--holding-space-16));
  padding-top: clamp(var(--holding-space-8), 8svh, var(--holding-space-16));
  background-color: var(--holding-surface);
}

.holding-login .hb-login__conteudo {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* Marca: logo com fundo verde (PNG 192px, exibido a 56px) + nome, so abaixo de 992px, onde a peca
   vertical some. Nome na tipografia do .hb-brand__name do header, em 18px para acompanhar o icone. */
.holding-login .hb-login__marca {
  display: flex;
  align-items: center;
  gap: var(--holding-space-3);
  margin-bottom: var(--holding-space-6);
}

.holding-login .hb-login__logo {
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.holding-login .hb-login__marca-nome {
  color: var(--holding-green);
  font-size: var(--holding-font-size-lg);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-tight);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Identificacao da area: sobretitulo colado ao "Bem-vindo". */
.holding-login .hb-login__area {
  margin-bottom: var(--holding-space-3);
}

.holding-login .hb-login__titulo {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-2xl);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-tight);
  letter-spacing: -0.01em;
}

.holding-login .hb-login__subtitulo {
  margin: var(--holding-space-2) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-content);
  line-height: var(--holding-line-height-snug);
}

.holding-login .hb-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--holding-space-5);
  margin: var(--holding-space-8) 0 0;
}

/* Mensagens do backend (erro de login, cadastro indisponivel, cadastro concluido): componente hb-alert (secao 19). */

/* Senha: o botao de visibilidade ocupa 44x44 no fim do campo. */
.holding-login .hb-login__senha {
  position: relative;
}

.holding-login .hb-login__senha .hb-input {
  padding-right: var(--holding-touch-target);
}

/* O Edge tem o proprio "revelar senha"; escondido para nao duplicar com o botao. */
.holding-login .hb-login__senha .hb-input::-ms-reveal,
.holding-login .hb-login__senha .hb-input::-ms-clear {
  display: none;
}

.holding-login .hb-login__ver-senha {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--holding-touch-target);
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--holding-radius-control);
  background-color: transparent;
  color: var(--holding-text-muted);
  cursor: pointer;
  transition: color var(--holding-transition);
}

.holding-login .hb-login__ver-senha:hover {
  color: var(--holding-heading);
}

.holding-login .hb-login__ver-senha:focus:not(:focus-visible) {
  outline: none;
}

.holding-login .hb-login__ver-senha:focus-visible {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: -6px;
  color: var(--holding-heading);
}

.holding-login .hb-login__ver-senha .hb-login__icone-ocultar,
.holding-login .hb-login__ver-senha.is-visivel .hb-login__icone-mostrar {
  display: none;
}

.holding-login .hb-login__ver-senha.is-visivel .hb-login__icone-ocultar {
  display: inline-block;
}

.holding-login .hb-login__entrar {
  min-height: var(--holding-space-12);
  margin-top: var(--holding-space-1);
  font-size: var(--holding-font-size-content);
}

.holding-login .hb-login__cadastro {
  margin: var(--holding-space-6) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-base);
  text-align: center;
}

/* Sublinhado: o verde nao tem contraste suficiente com o texto cinza para ser a unica pista. */
.holding-login .hb-login__cadastro a {
  border-radius: 2px;
  color: var(--holding-green);
  font-weight: var(--holding-font-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.holding-login .hb-login__cadastro a:hover {
  color: var(--holding-green-hover);
  text-decoration-thickness: 2px;
}

.holding-login .hb-login__cadastro a:focus:not(:focus-visible) {
  outline: none;
}

.holding-login .hb-login__cadastro a:focus-visible {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .holding-login .hb-login__painel {
    padding: var(--holding-space-12) var(--holding-space-8);
  }

  .holding-login .hb-login__conteudo {
    margin: auto;
  }

  .holding-login .hb-login__marca {
    margin-bottom: var(--holding-space-10);
  }
}

@media (min-width: 992px) {
  .holding-login .hb-login {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  }

  /* Velvet enquanto a imagem carrega. A arte ja vem escurecida: sem veu nem filtro por cima. */
  .holding-login .hb-login__visual {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--holding-velvet);
  }

  /* A marca fica no centro da arte: cover centralizado corta so as bordas da foto. */
  .holding-login .hb-login__foto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* A marca da peca vertical substitui logo + nome no formulario. */
  .holding-login .hb-login__marca {
    display: none;
  }

  .holding-login .hb-login__painel {
    padding: var(--holding-space-12) var(--holding-space-10);
  }
}


/* ==========================================================================
   14. Meu historico (application/views/pages/historicos.php e historico_ver.php)
   Dados prontos em Historico_model. Lista e modulos: tabela a partir de 992px; abaixo, cards
   (so um dos dois fica visivel). Progresso reaproveita .hb-progresso__* do player.
   ========================================================================== */

.holding-aluno.hb-page-pages-historicos .hb-main,
.holding-aluno.hb-page-pages-historico-ver .hb-main {
  background-color: var(--holding-surface-subtle);
}

.holding-aluno .hb-historico {
  padding-top: var(--holding-space-8);
  padding-bottom: var(--holding-space-12);
}

/* Cabecalho de secao: mesmo desenho de Meus Cursos (linha neutra + segmento dourado no inicio) */
.holding-aluno .hb-historico__secao {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--holding-space-1) var(--holding-space-4);
  margin-bottom: var(--holding-space-6);
  padding-bottom: var(--holding-space-3);
  border-bottom: 1px solid var(--holding-border);
}

.holding-aluno .hb-historico__secao::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--holding-space-8);
  height: 2px;
  background-color: var(--holding-gold);
}

/* Na lista, o cabecalho da secao e o da pagina: contagem alinhada a base do bloco de titulo */
.holding-aluno .hb-historico__secao--pagina {
  align-items: flex-end;
  padding-bottom: var(--holding-space-4);
}

.holding-aluno .hb-historico__titulo {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-xl);
  font-weight: var(--holding-font-weight-regular);
  line-height: var(--holding-line-height-tight);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .holding-aluno .hb-historico__titulo {
    font-size: var(--holding-font-size-2xl);
  }
}

.holding-aluno .hb-historico__intro {
  max-width: 60ch;
  margin: var(--holding-space-2) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-content);
}

.holding-aluno .hb-historico__contagem {
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

/* Detalhe: voltar, nome do curso + selo, resumo e modulos */
.holding-aluno .hb-historico-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--holding-space-2);
  min-height: var(--holding-touch-target);
  margin: calc(var(--holding-space-3) * -1) 0 var(--holding-space-2) calc(var(--holding-space-1) * -1);
  padding: 0 var(--holding-space-2) 0 var(--holding-space-1);
  border-radius: var(--holding-radius-button);
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-base);
  font-weight: var(--holding-font-weight-semibold);
  text-decoration: none;
  transition: color var(--holding-transition);
}

.holding-aluno .hb-historico-voltar:hover,
.holding-aluno .hb-historico-voltar:focus {
  color: var(--holding-green);
  text-decoration: none;
}

.holding-aluno .hb-historico__curso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--holding-space-2) var(--holding-space-3);
  margin-bottom: var(--holding-space-6);
}

.holding-aluno .hb-historico-resumo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--holding-space-4);
  margin-bottom: var(--holding-space-10);
}

.holding-aluno .hb-historico-resumo__avaliacoes {
  padding-top: var(--holding-space-4);
  border-top: 1px solid var(--holding-border);
}

/* Mesma linha de titulo nos dois blocos (a do progresso tem o percentual de 16px) */
.holding-aluno .hb-historico-resumo .hb-progresso__topo {
  align-items: center;
  min-height: var(--holding-space-6);
}

.holding-aluno .hb-historico-resumo__valor {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .holding-aluno .hb-historico-resumo {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--holding-space-6);
  }

  .holding-aluno .hb-historico-resumo__avaliacoes {
    padding-top: 0;
    padding-left: var(--holding-space-6);
    border-top: 0;
    border-left: 1px solid var(--holding-border);
  }
}

/*
 * Acao do resumo (Iniciar / Continuar / Revisar curso): no mobile abaixo do resumo, em largura
 * total; no tablet numa linha propria, a direita; no desktop uma terceira coluna discreta a direita.
 */
.holding-aluno .hb-historico-resumo__acao .hb-btn {
  width: 100%;
}

@media (min-width: 768px) {
  .holding-aluno .hb-historico-resumo__acao {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .holding-aluno .hb-historico-resumo__acao .hb-btn {
    width: auto;
  }
}

@media (min-width: 992px) {
  .holding-aluno .hb-historico-resumo--com-acao {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  }

  .holding-aluno .hb-historico-resumo__acao {
    grid-column: auto;
    align-self: center;
  }
}

/* Selos de situacao: texto sempre presente; cor so reforca */
.holding-aluno .hb-historico-selo {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--holding-space-2);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-surface-subtle);
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-xs);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  white-space: nowrap;
}

.holding-aluno .hb-historico-selo--sucesso {
  border-color: var(--holding-success-border);
  background-color: var(--holding-success-tint);
  color: var(--holding-success-text);
}

.holding-aluno .hb-historico-selo--andamento {
  border-color: var(--holding-info-border);
  background-color: var(--holding-info-tint);
  color: var(--holding-info-text);
}

.holding-aluno .hb-historico-selo--perigo {
  border-color: var(--holding-danger-border);
  background-color: var(--holding-danger-tint);
  color: var(--holding-danger);
}

.holding-aluno .hb-historico-selo--alerta {
  border-color: var(--holding-warning-border);
  background-color: var(--holding-warning-tint);
  color: var(--holding-warning-text);
}

/* Sem aulas / sem avaliacao: so contorno tracejado, sem preenchimento */
.holding-aluno .hb-historico-selo--vazio {
  border-style: dashed;
  border-color: var(--holding-input-border);
  background-color: transparent;
}

/* Link de acao discreto (lista -> detalhe) */
.holding-aluno .hb-historico-link {
  display: inline-flex;
  align-items: center;
  gap: var(--holding-space-2);
  min-height: var(--holding-touch-target);
  padding: 0 var(--holding-space-1);
  border-radius: var(--holding-radius-button);
  color: var(--holding-green);
  font-size: var(--holding-font-size-base);
  font-weight: var(--holding-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.holding-aluno .hb-historico-link:hover,
.holding-aluno .hb-historico-link:focus {
  color: var(--holding-green-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.holding-aluno .hb-historico-link:focus:not(:focus-visible),
.holding-aluno .hb-historico-voltar:focus:not(:focus-visible) {
  outline: none;
}

.holding-aluno .hb-historico-link:focus-visible,
.holding-aluno .hb-historico-voltar:focus-visible {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: 2px;
}

/* Tabela (>= 992px) */
.holding-aluno .hb-historico-tabela-moldura {
  display: none;
  overflow: hidden;
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
}

.holding-aluno .hb-historico-tabela {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--holding-text);
  font-size: var(--holding-font-size-base);
}

.holding-aluno .hb-historico-tabela thead th {
  padding: var(--holding-space-3) var(--holding-space-5);
  border-bottom: 1px solid var(--holding-border);
  background-color: var(--holding-surface-subtle);
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-xs);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.holding-aluno .hb-historico-tabela tbody th,
.holding-aluno .hb-historico-tabela tbody td {
  padding: var(--holding-space-4) var(--holding-space-5);
  border-top: 1px solid var(--holding-border);
  line-height: var(--holding-line-height-snug);
  text-align: left;
  vertical-align: middle;
}

.holding-aluno .hb-historico-tabela tbody tr:first-child th,
.holding-aluno .hb-historico-tabela tbody tr:first-child td {
  border-top: 0;
}

.holding-aluno .hb-historico-tabela tbody tr {
  transition: background-color var(--holding-transition);
}

.holding-aluno .hb-historico-tabela tbody tr:hover {
  background-color: var(--holding-surface-hover);
}

.holding-aluno .hb-historico-tabela__principal {
  color: var(--holding-heading);
  font-weight: var(--holding-font-weight-semibold);
  overflow-wrap: anywhere;
}

.holding-aluno .hb-historico-tabela__secundario {
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

.holding-aluno .hb-historico-tabela__numero {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Coluna de acao: largura do conteudo, alinhada a direita (o link ja tem 44px de altura) */
.holding-aluno .hb-historico-tabela .hb-historico-tabela__acao {
  width: 1%;
  padding-top: 0;
  padding-bottom: 0;
  text-align: right;
}

.holding-aluno .hb-historico-tabela--cursos tbody th {
  width: 34%;
}

/* Larguras fixas nas colunas curtas: a tabela fica igual de um curso para outro */
.holding-aluno .hb-historico-tabela--modulos tbody th {
  width: 32%;
}

.holding-aluno .hb-historico-tabela--modulos thead th:nth-child(2) {
  width: 13%;
}

.holding-aluno .hb-historico-tabela--modulos thead th:nth-child(4) {
  width: 9%;
}

.holding-aluno .hb-historico-tabela--modulos thead th:nth-child(5) {
  width: 17%;
}

/*
 * Miniatura da capa (so na lista): 56x40 na tabela, 52x52 no card. Mesmo arquivo e mesmo veu das
 * capas de Meus Cursos, mais leve; sem capa, monograma sobre velvet. Decorativa (alt vazio).
 */
.holding-aluno .hb-historico-curso {
  display: flex;
  align-items: center;
  gap: var(--holding-space-3);
  min-width: 0;
}

.holding-aluno .hb-historico-thumb {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--holding-radius-button);
  background-color: var(--holding-velvet);
}

.holding-aluno .hb-historico-thumb > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.holding-aluno .hb-historico-thumb::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: var(--holding-capa-veu);
  opacity: 0.7;
  pointer-events: none;
}

.holding-aluno .hb-historico-thumb--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
}

.holding-aluno .hb-historico-thumb--vazia > img {
  width: auto;
  height: 24px;
  object-fit: contain;
}

/* Progresso compacto na tabela: barra + percentual na mesma linha, aulas abaixo */
.holding-aluno .hb-historico-progresso {
  min-width: 160px;
  max-width: 220px;
}

.holding-aluno .hb-historico-progresso__linha {
  display: flex;
  align-items: center;
  gap: var(--holding-space-3);
  margin-bottom: var(--holding-space-1);
}

.holding-aluno .hb-historico-progresso__linha .hb-progresso__trilha {
  flex: 1 1 auto;
}

.holding-aluno .hb-historico-progresso__percentual {
  min-width: 4ch;
  color: var(--holding-heading);
  font-weight: var(--holding-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Cards (< 992px): um por curso ou por modulo; 2 colunas a partir de 768px */
.holding-aluno .hb-historico-cartoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--holding-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .holding-aluno .hb-historico-cartoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--holding-space-4);
  }
}

.holding-aluno .hb-historico-cartao {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
}

.holding-aluno .hb-historico-cartao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--holding-space-2) var(--holding-space-3);
  margin-bottom: var(--holding-space-4);
}

.holding-aluno .hb-historico-cartao__titulo {
  flex: 1 1 12rem;
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  overflow-wrap: anywhere;
}

/* Card da lista: miniatura a esquerda; nome e selo empilhados ao lado (o selo nao divide a linha com o nome) */
.holding-aluno .hb-historico-cartao__topo--curso {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--holding-space-3);
}

.holding-aluno .hb-historico-cartao__topo--curso .hb-historico-thumb {
  width: 52px;
  height: 52px;
}

.holding-aluno .hb-historico-cartao__topo--curso .hb-historico-thumb--vazia > img {
  height: 28px;
}

.holding-aluno .hb-historico-cartao__identificacao {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--holding-space-2);
  min-width: 0;
}

.holding-aluno .hb-historico-cartao__identificacao .hb-historico-cartao__titulo {
  flex: 0 1 auto;
}

.holding-aluno .hb-historico-cartao__bloco + .hb-historico-cartao__bloco {
  margin-top: var(--holding-space-3);
  padding-top: var(--holding-space-3);
  border-top: 1px solid var(--holding-border);
}

.holding-aluno .hb-historico-cartao__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--holding-space-4);
}

.holding-aluno .hb-historico-cartao__bloco > .hb-historico-cartao__linha {
  margin-bottom: var(--holding-space-2);
}

.holding-aluno .hb-historico-cartao__bloco.hb-historico-cartao__linha {
  margin-bottom: 0;
}

.holding-aluno .hb-historico-cartao__rotulo {
  flex-shrink: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

.holding-aluno .hb-historico-cartao__valor {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-base);
  font-weight: var(--holding-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.holding-aluno .hb-historico-cartao__secundario {
  margin: var(--holding-space-2) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

.holding-aluno .hb-historico-cartao__linha .hb-historico-cartao__secundario {
  margin: 0;
  text-align: right;
}

.holding-aluno .hb-historico-cartao__acao {
  display: flex;
  justify-content: flex-end;
  margin: var(--holding-space-2) calc(var(--holding-space-1) * -1) calc(var(--holding-space-2) * -1) 0;
}

/* Modulos: lista de definicao em grade; rotulo acima do valor; avaliacao na largura toda */
.holding-aluno .hb-historico-cartao__dados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--holding-space-3) var(--holding-space-4);
  margin: 0;
  padding-top: var(--holding-space-3);
  border-top: 1px solid var(--holding-border);
}

.holding-aluno .hb-historico-cartao__campo {
  min-width: 0;
}

.holding-aluno .hb-historico-cartao__campo--largo {
  grid-column: 1 / -1;
}

.holding-aluno .hb-historico-cartao__dados dt {
  margin-bottom: 2px;
  font-weight: var(--holding-font-weight-regular);
}

.holding-aluno .hb-historico-cartao__dados dd {
  margin: 0;
  text-align: left;
}

.holding-aluno .hb-historico-cartao__valor--vazio {
  color: var(--holding-text-muted);
  font-weight: var(--holding-font-weight-regular);
}

@media (min-width: 992px) {
  .holding-aluno .hb-historico-tabela-moldura {
    display: block;
  }

  .holding-aluno .hb-historico-cartoes {
    display: none;
  }
}

/* Estado vazio: bloco em toda a largura da secao (mesmo desenho do vazio de Meus Cursos) */
.holding-aluno .hb-historico-vazio {
  width: 100%;
  padding: var(--holding-space-12) var(--holding-space-6);
  text-align: center;
}

.holding-aluno .hb-historico-vazio__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--holding-space-12);
  height: var(--holding-space-12);
  margin-bottom: var(--holding-space-4);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-green-tint);
  color: var(--holding-green);
}

.holding-aluno .hb-historico-vazio__titulo {
  margin: 0 0 var(--holding-space-2);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-historico-vazio__texto {
  max-width: 44ch;
  margin: 0 auto;
  color: var(--holding-text-muted);
}


/* ==========================================================================
   15. Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :is(.holding-aluno, .holding-login) .hb-btn,
  :is(.holding-aluno, .holding-login) .hb-input,
  :is(.holding-aluno, .holding-login) .hb-select,
  :is(.holding-aluno, .holding-login) .hb-textarea,
  .holding-login .hb-login__ver-senha,
  .holding-aluno .hb-historico-voltar,
  .holding-aluno .hb-historico-tabela tbody tr,
  .holding-aluno .hb-user__chevron,
  .holding-aluno .hb-progresso__preenchimento,
  .holding-aluno .hb-modulo-card,
  .holding-aluno .hb-modulo-card__seta,
  .holding-aluno .hb-aula-voltar,
  .holding-aluno .hb-curso-card,
  .holding-aluno .hb-curso-card__capa > img,
  .holding-aluno .hb-curso-card__capa::after {
    transition: none;
  }

  .holding-aluno .hb-curso-card:hover .hb-curso-card__capa > img {
    transform: none;
  }

  .holding-aluno .hb-modulo-card:hover .hb-modulo-card__seta {
    transform: none;
  }

  /* Modais dos materiais: sem a animacao de entrada do Bootstrap */
  .holding-aluno .hb-modal.fade .modal-dialog,
  .holding-aluno .hb-modal__fechar {
    transition: none;
  }
}


/* ==========================================================================
   16. Avaliacao do modulo (application/views/avaliacao.php, efetuar_avaliacao.php e
   resultado_avaliacao.php + componentes/js/holding-avaliacao.js)
   Area de leitura centralizada no .hb-container, sobre o neutro claro. Tudo sob .hb-avaliacao
   (o <dialog> da prova tambem fica dentro dele): nada vaza para outras telas. Os elementos
   legados que aparecem aqui (legend, fieldset, label, dl, dialog) sao neutralizados pelas classes.
   ========================================================================== */

.holding-aluno.hb-page-pages-avaliacao .hb-main,
.holding-aluno.hb-page-pages-efetuar-avaliacao .hb-main,
.holding-aluno.hb-page-pages-resultado-avaliacao .hb-main {
  background-color: var(--holding-surface-subtle);
}

.holding-aluno .hb-avaliacao {
  /* Largura de leitura (introducao, questoes, resultado e revisao) */
  --holding-avaliacao-leitura: 840px;
  padding-top: var(--holding-space-6);
  padding-bottom: var(--holding-space-12);
}

@media (min-width: 768px) {
  .holding-aluno .hb-avaliacao {
    padding-top: var(--holding-space-8);
  }
}

.holding-aluno .hb-avaliacao__leitura {
  max-width: var(--holding-avaliacao-leitura);
  margin-right: auto;
  margin-left: auto;
}

/* Voltar ao curso: mesmo desenho do "Voltar ao historico" */
.holding-aluno .hb-avaliacao-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--holding-space-2);
  min-height: var(--holding-touch-target);
  margin: calc(var(--holding-space-3) * -1) 0 var(--holding-space-2) calc(var(--holding-space-1) * -1);
  padding: 0 var(--holding-space-2) 0 var(--holding-space-1);
  border-radius: var(--holding-radius-button);
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-base);
  font-weight: var(--holding-font-weight-semibold);
  text-decoration: none;
  transition: color var(--holding-transition);
}

.holding-aluno .hb-avaliacao-voltar:hover,
.holding-aluno .hb-avaliacao-voltar:focus {
  color: var(--holding-green);
  text-decoration: none;
}

.holding-aluno .hb-avaliacao-voltar:focus:not(:focus-visible) {
  outline: none;
}

.holding-aluno .hb-avaliacao-voltar:focus-visible {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: 2px;
}

/* Sobretitulo (Modulo 01 · Avaliacao) + titulo da pagina */
.holding-aluno .hb-avaliacao__sobretitulo {
  margin-bottom: var(--holding-space-2);
  overflow-wrap: anywhere;
}

.holding-aluno .hb-avaliacao__sep {
  margin: 0 var(--holding-space-1);
  color: var(--holding-gold);
}

.holding-aluno .hb-avaliacao__titulo {
  margin: 0;
  color: var(--holding-heading);
  font-size: 20px;
  font-weight: var(--holding-font-weight-regular);
  line-height: var(--holding-line-height-tight);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .holding-aluno .hb-avaliacao__titulo {
    font-size: var(--holding-font-size-xl);
  }
}

@media (min-width: 992px) {
  .holding-aluno .hb-avaliacao__titulo {
    font-size: var(--holding-font-size-2xl);
  }
}

.holding-aluno .hb-avaliacao__descricao {
  margin: var(--holding-space-2) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-content);
  line-height: var(--holding-line-height-base);
}

/* Aviso (servidor ou JS): role="alert", recebe o foco; vermelho so no icone, no titulo e na borda */
.holding-aluno .hb-avaliacao-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--holding-space-3);
  margin: 0 0 var(--holding-space-5);
  padding: var(--holding-space-4);
  border: 1px solid var(--holding-danger-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
  color: var(--holding-text);
}

.holding-aluno .hb-avaliacao-aviso:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--holding-focus-ring-danger);
}

.holding-aluno .hb-avaliacao-aviso__icone {
  margin-top: 1px;
  color: var(--holding-danger);
}

.holding-aluno .hb-avaliacao-aviso__titulo {
  margin: 0;
  color: var(--holding-danger);
  font-size: var(--holding-font-size-base);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-avaliacao-aviso__texto {
  margin: 0;
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-base);
}

.holding-aluno .hb-avaliacao-aviso__titulo + .hb-avaliacao-aviso__texto {
  margin-top: 2px;
}

.holding-aluno .hb-avaliacao-aviso__lista {
  margin: var(--holding-space-1) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

.holding-aluno .hb-avaliacao-aviso__lista:empty {
  display: none;
}

.holding-aluno .hb-avaliacao-aviso__lista a {
  color: var(--holding-green);
  font-weight: var(--holding-font-weight-semibold);
  text-decoration: underline;
}

.holding-aluno .hb-avaliacao-aviso__lista a:hover,
.holding-aluno .hb-avaliacao-aviso__lista a:focus {
  color: var(--holding-green-hover);
}

/* --------------------------------------------------------------------------
   Introducao
   -------------------------------------------------------------------------- */

.holding-aluno .hb-avaliacao-intro {
  padding: var(--holding-space-6) var(--holding-space-5);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
}

@media (min-width: 768px) {
  .holding-aluno .hb-avaliacao-intro {
    padding: var(--holding-space-10) var(--holding-space-12);
  }
}

/* Questoes / valor / media: linhas no mobile, tres colunas a partir de 768px */
.holding-aluno .hb-avaliacao-metricas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--holding-space-6) 0 0;
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
}

.holding-aluno .hb-avaliacao-metricas__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--holding-space-4);
  min-width: 0;
  padding: var(--holding-space-3) var(--holding-space-4);
}

.holding-aluno .hb-avaliacao-metricas__item + .hb-avaliacao-metricas__item {
  border-top: 1px solid var(--holding-border);
}

.holding-aluno .hb-avaliacao-metricas__rotulo {
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
  font-weight: var(--holding-font-weight-medium);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-avaliacao-metricas__valor {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-lg);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .holding-aluno .hb-avaliacao-metricas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .holding-aluno .hb-avaliacao-metricas__item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--holding-space-1);
    padding: var(--holding-space-4) var(--holding-space-5);
  }

  .holding-aluno .hb-avaliacao-metricas__item + .hb-avaliacao-metricas__item {
    border-top: 0;
    border-left: 1px solid var(--holding-border);
  }
}

.holding-aluno .hb-avaliacao-orientacao {
  margin-top: var(--holding-space-6);
  padding-top: var(--holding-space-6);
  border-top: 1px solid var(--holding-border);
}

.holding-aluno .hb-avaliacao-orientacao__titulo {
  margin: 0 0 var(--holding-space-3);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-avaliacao-orientacao__lista {
  display: grid;
  gap: var(--holding-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.holding-aluno .hb-avaliacao-orientacao__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--holding-space-3);
  color: var(--holding-text);
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-base);
}

.holding-aluno .hb-avaliacao-orientacao__icone {
  margin-top: 3px;
  color: var(--holding-green);
}

/* Reprovacao ainda bloqueada: quando a nova tentativa abre (data do model) */
.holding-aluno .hb-avaliacao-espera {
  display: flex;
  align-items: flex-start;
  gap: var(--holding-space-3);
  margin-top: var(--holding-space-6);
  padding: var(--holding-space-4) var(--holding-space-5);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface-subtle);
}

.holding-aluno .hb-avaliacao-espera__icone {
  margin-top: 2px;
  color: var(--holding-text-muted);
}

.holding-aluno .hb-avaliacao-espera__rotulo {
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
  font-weight: var(--holding-font-weight-semibold);
}

.holding-aluno .hb-avaliacao-espera__data {
  margin: 2px 0 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-lg);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  font-variant-numeric: tabular-nums;
}

.holding-aluno .hb-avaliacao-espera__texto,
.holding-aluno .hb-avaliacao-nota {
  margin: var(--holding-space-1) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
  line-height: var(--holding-line-height-base);
}

.holding-aluno .hb-avaliacao-nota {
  margin-top: var(--holding-space-5);
}

/* Acoes: empilhadas e com largura total no mobile; em linha e centralizadas a partir de 768px */
.holding-aluno .hb-avaliacao-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--holding-space-3);
  margin: var(--holding-space-8) 0 0;
}

.holding-aluno .hb-avaliacao-acoes .hb-btn {
  width: 100%;
}

@media (min-width: 768px) {
  .holding-aluno .hb-avaliacao-acoes {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .holding-aluno .hb-avaliacao-acoes .hb-btn {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Prova
   -------------------------------------------------------------------------- */

.holding-aluno .hb-avaliacao-cabecalho {
  margin-bottom: var(--holding-space-6);
}

.holding-aluno .hb-avaliacao-progresso {
  margin: var(--holding-space-3) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-base);
  font-variant-numeric: tabular-nums;
}

/* Preenchimento do formulario (nao e nota nem progresso do curso): linha fina dourada */
.holding-aluno .hb-avaliacao-progresso__trilha {
  height: 3px;
  margin-top: var(--holding-space-3);
  overflow: hidden;
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-surface-strong);
}

.holding-aluno .hb-avaliacao-progresso__preenchimento {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--holding-gold);
  transition: width var(--holding-transition-card);
}

.holding-aluno .hb-avaliacao-questoes {
  display: grid;
  gap: var(--holding-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .holding-aluno .hb-avaliacao-questoes {
    gap: var(--holding-space-5);
  }
}

.holding-aluno .hb-avaliacao-questao {
  min-width: 0;
  margin: 0;
  padding: var(--holding-space-5) var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
  /* Link "Sem resposta: questao 02" e o header fixo no topo */
  scroll-margin-top: calc(var(--holding-header-height) + var(--holding-space-4));
}

@media (min-width: 768px) {
  .holding-aluno .hb-avaliacao-questao {
    padding: var(--holding-space-6) var(--holding-space-8);
  }
}

.holding-aluno .hb-avaliacao-questao.is-pendente {
  border-color: var(--holding-danger-border);
  box-shadow: inset 3px 0 0 var(--holding-danger);
}

/* float tira a <legend> de cima da borda do <fieldset> (posicao padrao dos navegadores) */
.holding-aluno .hb-avaliacao-questao__legenda {
  float: left;
  width: 100%;
  margin: 0 0 var(--holding-space-4);
  padding: 0;
  border: 0;
  color: var(--holding-heading);
  font-size: inherit;
  line-height: inherit;
}

.holding-aluno .hb-avaliacao-questao__pendente,
.holding-aluno .hb-avaliacao-alternativas {
  clear: both;
}

.holding-aluno .hb-avaliacao-questao__numero {
  display: block;
  margin-bottom: var(--holding-space-2);
}

.holding-aluno .hb-avaliacao-questao__enunciado {
  display: block;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .holding-aluno .hb-avaliacao-questao__enunciado {
    font-size: var(--holding-font-size-lg);
  }
}

/* Texto cadastrado no admin dentro do enunciado e das alternativas */
.holding-aluno .hb-avaliacao-questao__enunciado p,
.holding-aluno .hb-avaliacao-alternativa__texto p,
.holding-aluno .hb-resultado-questao__enunciado p,
.holding-aluno .hb-resultado-resposta__texto p,
.holding-aluno .hb-resultado-questao__explicacao-texto p {
  margin: 0;
}

.holding-aluno .hb-avaliacao-questao__enunciado img,
.holding-aluno .hb-resultado-questao__enunciado img {
  max-width: 100%;
  height: auto;
}

.holding-aluno .hb-avaliacao-questao__pendente {
  display: flex;
  align-items: center;
  gap: var(--holding-space-1);
  margin: calc(var(--holding-space-2) * -1) 0 var(--holding-space-3);
  color: var(--holding-danger);
  font-size: var(--holding-font-size-sm);
  font-weight: var(--holding-font-weight-semibold);
}

.holding-aluno .hb-avaliacao-alternativas {
  display: grid;
  gap: var(--holding-space-2);
}

@media (min-width: 768px) {
  .holding-aluno .hb-avaliacao-alternativas {
    gap: var(--holding-space-3);
  }
}

/* A alternativa inteira e o <label>; o radio real fica invisivel sob a letra (focavel e anunciado) */
.holding-aluno .hb-avaliacao-alternativa {
  position: relative;
  display: block;
  max-width: none;
  margin: 0;
  font-weight: var(--holding-font-weight-regular);
  cursor: pointer;
}

.holding-aluno .hb-avaliacao-alternativa__input {
  position: absolute;
  top: 50%;
  left: var(--holding-space-4);
  width: 28px;
  height: 28px;
  margin: -14px 0 0;
  opacity: 0;
}

.holding-aluno .hb-avaliacao-alternativa__caixa {
  display: flex;
  align-items: center;
  gap: var(--holding-space-3);
  min-height: 56px;
  padding: var(--holding-space-3) var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
  color: var(--holding-text);
  transition: border-color var(--holding-transition), background-color var(--holding-transition),
    box-shadow var(--holding-transition);
}

.holding-aluno .hb-avaliacao-alternativa:hover .hb-avaliacao-alternativa__caixa {
  border-color: var(--holding-input-border);
  background-color: var(--holding-surface-hover);
}

.holding-aluno .hb-avaliacao-alternativa__letra {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--holding-input-border);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-surface);
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
  font-weight: var(--holding-font-weight-semibold);
  line-height: 1;
  transition: border-color var(--holding-transition), background-color var(--holding-transition),
    color var(--holding-transition);
}

.holding-aluno .hb-avaliacao-alternativa__texto {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--holding-font-size-content);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.holding-aluno .hb-avaliacao-alternativa__check {
  width: 18px;
  height: 18px;
  color: var(--holding-green);
  visibility: hidden;
}

/* Selecionada: borda verde (2px), fundo verde suave, letra preenchida e check (nao so cor) */
.holding-aluno .hb-avaliacao-alternativa__input:checked + .hb-avaliacao-alternativa__caixa {
  border-color: var(--holding-green);
  background-color: var(--holding-green-tint);
  box-shadow: inset 0 0 0 1px var(--holding-green);
  color: var(--holding-heading);
}

.holding-aluno .hb-avaliacao-alternativa__input:checked + .hb-avaliacao-alternativa__caixa .hb-avaliacao-alternativa__letra {
  border-color: var(--holding-green);
  background-color: var(--holding-green);
  color: var(--holding-text-inverse);
}

.holding-aluno .hb-avaliacao-alternativa__input:checked + .hb-avaliacao-alternativa__caixa .hb-avaliacao-alternativa__check {
  visibility: visible;
}

.holding-aluno .hb-avaliacao-alternativa__input:focus + .hb-avaliacao-alternativa__caixa {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: 2px;
}

.holding-aluno .hb-avaliacao-alternativa__input:focus:not(:focus-visible) + .hb-avaliacao-alternativa__caixa {
  outline: none;
}

/* Envio: contador + Finalizar; empilhado no mobile */
.holding-aluno .hb-avaliacao-envio {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--holding-space-3);
  margin-top: var(--holding-space-6);
  padding: var(--holding-space-5) var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
}

.holding-aluno .hb-avaliacao-envio__contador {
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-base);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.holding-aluno .hb-avaliacao-envio__botao {
  width: 100%;
}

@media (min-width: 768px) {
  .holding-aluno .hb-avaliacao-envio {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--holding-space-5) var(--holding-space-8);
  }

  .holding-aluno .hb-avaliacao-envio__contador {
    text-align: left;
  }

  .holding-aluno .hb-avaliacao-envio__botao {
    width: auto;
    margin-left: auto;
  }
}

/* Confirmacao (<dialog> nativo: foco preso, Esc fecha). ::backdrop herda as custom properties
   do <dialog> nos navegadores atuais; nos antigos fica o veu padrao do navegador. */
.holding-aluno .hb-avaliacao-dialogo {
  width: calc(100% - var(--holding-space-8));
  max-width: 480px;
  padding: var(--holding-space-6);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
  box-shadow: var(--holding-shadow-dropdown);
  color: var(--holding-text);
}

.holding-aluno .hb-avaliacao-dialogo::backdrop {
  background-color: var(--holding-velvet-overlay);
}

.holding-aluno .hb-avaliacao-dialogo__titulo {
  margin: 0 0 var(--holding-space-2);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-lg);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-avaliacao-dialogo__texto {
  margin: 0;
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-base);
}

.holding-aluno .hb-avaliacao-dialogo__acoes {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--holding-space-3);
  margin-top: var(--holding-space-6);
}

.holding-aluno .hb-avaliacao-dialogo__acoes .hb-btn {
  width: 100%;
}

@media (min-width: 768px) {
  .holding-aluno .hb-avaliacao-dialogo__acoes {
    flex-direction: row;
    justify-content: flex-end;
  }

  .holding-aluno .hb-avaliacao-dialogo__acoes .hb-btn {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Resultado
   -------------------------------------------------------------------------- */

.holding-aluno .hb-resultado {
  padding: var(--holding-space-8) var(--holding-space-5);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
  text-align: center;
}

@media (min-width: 768px) {
  .holding-aluno .hb-resultado {
    padding: var(--holding-space-12);
  }
}

.holding-aluno .hb-resultado__topo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.holding-aluno .hb-resultado__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--holding-space-3);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-surface-subtle);
  color: var(--holding-text-muted);
}

.holding-aluno .hb-resultado__icone .hb-icon {
  width: 24px;
  height: 24px;
}

.holding-aluno .hb-resultado__contexto {
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
  font-weight: var(--holding-font-weight-medium);
}

/* Situacao (de is_aprovado): selo com texto, nunca so cor */
.holding-aluno .hb-resultado__situacao {
  display: inline-flex;
  align-items: center;
  margin: var(--holding-space-2) 0 0;
  padding: var(--holding-space-1) var(--holding-space-3);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-surface-subtle);
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.holding-aluno .hb-resultado--aprovado .hb-resultado__icone {
  background-color: var(--holding-success-tint);
  color: var(--holding-success);
}

.holding-aluno .hb-resultado--aprovado .hb-resultado__situacao {
  border-color: var(--holding-success-border);
  background-color: var(--holding-success-tint);
  color: var(--holding-success-text);
}

.holding-aluno .hb-resultado--nao-aprovado .hb-resultado__icone {
  background-color: var(--holding-danger-tint);
  color: var(--holding-danger);
}

.holding-aluno .hb-resultado--nao-aprovado .hb-resultado__situacao {
  border-color: var(--holding-danger-border);
  background-color: var(--holding-danger-tint);
  color: var(--holding-danger);
}

.holding-aluno .hb-resultado--indisponivel .hb-resultado__icone {
  background-color: var(--holding-warning-tint);
  color: var(--holding-warning-text);
}

.holding-aluno .hb-resultado--indisponivel .hb-resultado__situacao {
  border-color: var(--holding-warning-border);
  background-color: var(--holding-warning-tint);
  color: var(--holding-warning-text);
}

/* Nota: "Sua nota" vem primeiro no HTML (leitor de tela) e aparece embaixo do numero */
.holding-aluno .hb-resultado__nota {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  margin: var(--holding-space-6) 0 0;
}

.holding-aluno .hb-resultado__nota-valor {
  color: var(--holding-heading);
  font-size: 48px;
  font-weight: var(--holding-font-weight-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .holding-aluno .hb-resultado__nota-valor {
    font-size: 56px;
  }
}

.holding-aluno .hb-resultado__nota-rotulo {
  margin-top: var(--holding-space-2);
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-base);
}

.holding-aluno .hb-resultado__media {
  margin: var(--holding-space-1) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-base);
}

/* Acertos / erros / duracao (so tentativa do aluno) */
.holding-aluno .hb-resultado-metricas {
  display: flex;
  justify-content: center;
  max-width: 480px;
  margin: var(--holding-space-6) auto 0;
  padding-top: var(--holding-space-5);
  border-top: 1px solid var(--holding-border);
}

.holding-aluno .hb-resultado-metricas__item {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 var(--holding-space-3);
}

.holding-aluno .hb-resultado-metricas__item + .hb-resultado-metricas__item {
  border-left: 1px solid var(--holding-border);
}

.holding-aluno .hb-resultado-metricas__rotulo {
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
  font-weight: var(--holding-font-weight-medium);
}

.holding-aluno .hb-resultado-metricas__valor {
  margin: var(--holding-space-1) 0 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-lg);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-tight);
  font-variant-numeric: tabular-nums;
}

/* Nota lancada pela coordenacao */
.holding-aluno .hb-resultado__coordenacao {
  max-width: 480px;
  margin: var(--holding-space-6) auto 0;
  padding-top: var(--holding-space-5);
  border-top: 1px solid var(--holding-border);
  color: var(--holding-text);
  font-size: var(--holding-font-size-base);
}

.holding-aluno .hb-resultado__coordenacao p {
  margin: 0;
}

.holding-aluno .hb-resultado__coordenacao .hb-resultado__data {
  margin-top: var(--holding-space-1);
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

/* Nova tentativa (nao aprovado do aluno): data ou aviso de liberacao, sem gabarito */
.holding-aluno .hb-resultado-tentativa {
  max-width: 520px;
  margin: var(--holding-space-6) auto 0;
  padding: var(--holding-space-4) var(--holding-space-5);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface-subtle);
  text-align: left;
}

.holding-aluno .hb-resultado-tentativa__titulo {
  margin: 0 0 var(--holding-space-1);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-base);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
}

.holding-aluno .hb-resultado-tentativa__texto {
  margin: 0;
  color: var(--holding-text);
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-base);
}

.holding-aluno .hb-resultado-tentativa__texto strong {
  color: var(--holding-heading);
  font-weight: var(--holding-font-weight-semibold);
}

.holding-aluno .hb-resultado-tentativa__icone {
  margin-right: var(--holding-space-1);
  color: var(--holding-text-muted);
}

.holding-aluno .hb-resultado__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--holding-space-3);
  margin-top: var(--holding-space-8);
}

.holding-aluno .hb-resultado__acoes .hb-btn,
.holding-aluno .hb-resultado__form {
  width: 100%;
}

.holding-aluno .hb-resultado__form {
  margin: 0;
}

@media (min-width: 768px) {
  .holding-aluno .hb-resultado__acoes {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .holding-aluno .hb-resultado__acoes .hb-btn,
  .holding-aluno .hb-resultado__form {
    width: auto;
  }
}

/* Revisao das respostas (so aprovado do aluno) */
.holding-aluno .hb-resultado-revisao {
  margin-top: var(--holding-space-10);
}

.holding-aluno .hb-resultado-revisao__secao {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--holding-space-1) var(--holding-space-4);
  margin-bottom: var(--holding-space-5);
  padding-bottom: var(--holding-space-3);
  border-bottom: 1px solid var(--holding-border);
}

/* Mesmo detalhe dourado dos cabecalhos de secao de Meus Cursos e Meu historico */
.holding-aluno .hb-resultado-revisao__secao::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--holding-space-8);
  height: 2px;
  background-color: var(--holding-gold);
}

.holding-aluno .hb-resultado-revisao__contagem {
  margin: 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

.holding-aluno .hb-resultado-revisao__lista {
  display: grid;
  gap: var(--holding-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.holding-aluno .hb-resultado-questao {
  padding: var(--holding-space-5) var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
}

@media (min-width: 768px) {
  .holding-aluno .hb-resultado-questao {
    padding: var(--holding-space-6) var(--holding-space-8);
  }
}

.holding-aluno .hb-resultado-questao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--holding-space-2);
  margin-bottom: var(--holding-space-3);
}

.holding-aluno .hb-resultado-questao__numero {
  margin: 0;
}

.holding-aluno .hb-resultado-selo {
  display: inline-flex;
  align-items: center;
  gap: var(--holding-space-1);
  padding: 2px var(--holding-space-2);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-pill);
  font-size: var(--holding-font-size-xs);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  white-space: nowrap;
}

.holding-aluno .hb-resultado-selo--correta {
  border-color: var(--holding-success-border);
  background-color: var(--holding-success-tint);
  color: var(--holding-success-text);
}

.holding-aluno .hb-resultado-selo--incorreta {
  border-color: var(--holding-danger-border);
  background-color: var(--holding-danger-tint);
  color: var(--holding-danger);
}

.holding-aluno .hb-resultado-questao__enunciado {
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  overflow-wrap: anywhere;
}

.holding-aluno .hb-resultado-questao__respostas {
  display: grid;
  gap: var(--holding-space-2);
  margin: var(--holding-space-4) 0 0;
}

.holding-aluno .hb-resultado-resposta {
  padding: var(--holding-space-3) var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
}

.holding-aluno .hb-resultado-resposta--correta,
.holding-aluno .hb-resultado-resposta--gabarito {
  border-color: var(--holding-success-border);
  background-color: var(--holding-success-tint);
}

/* Resposta errada: vermelho so na marca lateral */
.holding-aluno .hb-resultado-resposta--incorreta {
  box-shadow: inset 3px 0 0 var(--holding-danger);
}

.holding-aluno .hb-resultado-resposta__rotulo {
  margin: 0 0 var(--holding-space-1);
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-xs);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.holding-aluno .hb-resultado-resposta__valor {
  display: flex;
  align-items: flex-start;
  gap: var(--holding-space-2);
  margin: 0;
  color: var(--holding-text);
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-base);
}

.holding-aluno .hb-resultado-resposta__letra {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--holding-input-border);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-surface);
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-xs);
  font-weight: var(--holding-font-weight-semibold);
  line-height: 1;
}

.holding-aluno .hb-resultado-resposta--correta .hb-resultado-resposta__letra,
.holding-aluno .hb-resultado-resposta--gabarito .hb-resultado-resposta__letra {
  border-color: var(--holding-success-border);
  color: var(--holding-success-text);
}

.holding-aluno .hb-resultado-resposta__texto {
  min-width: 0;
  padding-top: 1px;
  overflow-wrap: anywhere;
}

.holding-aluno .hb-resultado-resposta__vazia {
  color: var(--holding-text-muted);
  font-style: italic;
}

.holding-aluno .hb-resultado-questao__explicacao {
  margin-top: var(--holding-space-4);
  padding: var(--holding-space-3) var(--holding-space-4);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface-subtle);
}

.holding-aluno .hb-resultado-questao__explicacao-rotulo {
  margin: 0 0 var(--holding-space-1);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-sm);
  font-weight: var(--holding-font-weight-semibold);
}

.holding-aluno .hb-resultado-questao__explicacao-texto {
  color: var(--holding-text);
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-base);
}

@media (prefers-reduced-motion: reduce) {
  .holding-aluno .hb-avaliacao-voltar,
  .holding-aluno .hb-avaliacao-alternativa__caixa,
  .holding-aluno .hb-avaliacao-alternativa__letra,
  .holding-aluno .hb-avaliacao-progresso__preenchimento {
    transition: none;
  }
}

/* ==========================================================================
   17. Acesso ainda nao liberado (application/views/pages/acesso_pendente.php)
   Painel central sobre o neutro claro, no mesmo desenho das telas da avaliacao. Acoes numa coluna
   centralizada de ate 360px (largura total no mobile). Tudo sob .hb-acesso-pendente.
   Sem transicoes proprias (as dos .hb-btn ja respeitam a secao 15).
   ========================================================================== */

.holding-aluno.hb-page-pages-acesso-pendente .hb-main {
  background-color: var(--holding-surface-subtle);
}

.holding-aluno .hb-acesso-pendente {
  padding-top: var(--holding-space-6);
  padding-bottom: var(--holding-space-12);
}

@media (min-width: 768px) {
  .holding-aluno .hb-acesso-pendente {
    padding-top: var(--holding-space-12);
  }
}

.holding-aluno .hb-acesso-pendente__leitura {
  max-width: 640px;
  margin-right: auto;
  margin-left: auto;
}

.holding-aluno .hb-acesso-pendente__painel {
  padding: var(--holding-space-8) var(--holding-space-5);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
  text-align: center;
}

@media (min-width: 768px) {
  .holding-aluno .hb-acesso-pendente__painel {
    padding: var(--holding-space-12);
  }
}

/* Icone discreto: cadeado no verde suave da marca (estado de espera, nao de erro) */
.holding-aluno .hb-acesso-pendente__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--holding-space-12);
  height: var(--holding-space-12);
  margin-bottom: var(--holding-space-4);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-green-tint);
  color: var(--holding-green);
}

.holding-aluno .hb-acesso-pendente__titulo {
  margin: 0;
  color: var(--holding-heading);
  font-size: 20px;
  font-weight: var(--holding-font-weight-regular);
  line-height: var(--holding-line-height-tight);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .holding-aluno .hb-acesso-pendente__titulo {
    font-size: var(--holding-font-size-xl);
  }
}

@media (min-width: 992px) {
  .holding-aluno .hb-acesso-pendente__titulo {
    font-size: var(--holding-font-size-2xl);
  }
}

.holding-aluno .hb-acesso-pendente__texto {
  max-width: 480px;
  margin: var(--holding-space-3) auto 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-content);
  line-height: var(--holding-line-height-base);
  text-wrap: pretty;
}

/* Curso e modulo: bloco neutro de contexto */
.holding-aluno .hb-acesso-pendente__contexto {
  margin: var(--holding-space-6) 0 0;
  padding: var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface-subtle);
}

.holding-aluno .hb-acesso-pendente__curso {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-content);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  overflow-wrap: anywhere;
}

.holding-aluno .hb-acesso-pendente__modulo {
  margin: var(--holding-space-1) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-snug);
  overflow-wrap: anywhere;
}

/* Sem canal configurado: orientacao neutra, sem link */
.holding-aluno .hb-acesso-pendente__sem-canal {
  max-width: 480px;
  margin: var(--holding-space-6) auto 0;
  color: var(--holding-text);
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-base);
  text-wrap: pretty;
}

/* Acoes: uma coluna centralizada, com a mesma largura para todos os botoes (largura total no mobile) */
.holding-aluno .hb-acesso-pendente__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--holding-space-3);
  max-width: 360px;
  margin: var(--holding-space-6) auto 0;
}

.holding-aluno .hb-acesso-pendente__acoes .hb-btn {
  width: 100%;
}

.holding-aluno .hb-acesso-pendente__acoes--voltar {
  margin-top: var(--holding-space-3);
}

/* Telefone e e-mail longos quebram dentro do botao em vez de vazar */
.holding-aluno .hb-acesso-pendente__valor {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Card de modulo nao liberado no player (ver.php, .hb-modulo-card.is-bloqueado): estado neutro, sem cor
   de erro; o card continua clicavel e leva a esta tela. Cadeado e texto em cinza, fundo neutro claro. */
.holding-aluno .hb-modulo-card.is-bloqueado {
  background-color: var(--holding-surface-subtle);
}

.holding-aluno .hb-modulo-card.is-bloqueado .hb-modulo-card__estado {
  color: var(--holding-text-muted);
}

/* ==========================================================================
   18. Cadastro (application/views/matricular/index.php + componentes/js/holding-cadastro.js)
   Irma do login: mesmo documento (<body class="holding-login">, template/inc/header_login.php), mesma
   peca vertical e mesma coluna de formulario. Aqui so o que o cadastro tem a mais. Fica fora do ar
   enquanto holding_cadastro_publico = FALSE (application/config/holding.php).
   ========================================================================== */

/* Lista de erros do envio (validacao do servidor) dentro do aviso (hb-alert--error, secao 19) */
.holding-login .hb-cadastro__erros {
  margin: 0;
  padding-left: var(--holding-space-4);
}

.holding-login .hb-cadastro__erros li + li {
  margin-top: var(--holding-space-1);
}

.holding-login .hb-cadastro__aviso:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--holding-focus-ring-danger);
}

/* Curso ja escolhido pelo link (matricular/{id}): contexto de leitura, sem campo */
.holding-login .hb-cadastro__curso {
  margin: 0;
  padding: var(--holding-space-3) var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-button);
  background-color: var(--holding-surface-subtle);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-base);
  font-weight: var(--holding-font-weight-semibold);
  overflow-wrap: anywhere;
}

.holding-login .hb-cadastro__curso span {
  display: block;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-xs);
  font-weight: var(--holding-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Telefone e WhatsApp lado a lado quando ha largura; empilhados no celular */
.holding-login .hb-cadastro__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--holding-space-5);
}

@media (min-width: 480px) {
  .holding-login .hb-cadastro__linha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--holding-space-4);
  }
}


/* ==========================================================================
   19. Aviso (hb-alert): mensagens de uma requisicao e avisos de formulario
   Marcacao: hb_alerta() em application/helpers/holding_helper.php (shell: template/inc/header.php;
   login.php; matricular/index.php). Fechar: componentes/js/holding-aluno.js (o botao so aparece
   com o script). Variantes: --error, --success, --info, --warning. Papel: alert (erro/atencao) ou
   status (sucesso/informacao). Funciona dentro de .hb-container e do .container do player.
   ========================================================================== */

/* Faixa de avisos do shell, logo abaixo do header; a tela abaixo mantem o proprio respiro. */
.holding-aluno .hb-alertas {
  display: grid;
  gap: var(--holding-space-3);
  padding-top: var(--holding-space-6);
}

:is(.holding-aluno, .holding-login) .hb-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--holding-space-3);
  padding: var(--holding-space-3) var(--holding-space-4);
  border: 1px solid var(--holding-info-border);
  border-radius: var(--holding-radius-button);
  background-color: var(--holding-info-tint);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-base);
  line-height: var(--holding-line-height-snug);
}

/* Icone de 16px centralizado na primeira linha (14px x 1.4 = ~20px). */
:is(.holding-aluno, .holding-login) .hb-alert__icone {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--holding-info-text);
}

:is(.holding-aluno, .holding-login) .hb-alert__texto {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

:is(.holding-aluno, .holding-login) .hb-alert__texto p {
  margin: 0;
}

/* Fechar: alvo de 44x44; as margens negativas evitam que o alvo aumente a altura do aviso. */
:is(.holding-aluno, .holding-login) .hb-alert__fechar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--holding-touch-target);
  height: var(--holding-touch-target);
  margin: calc((var(--holding-touch-target) - 20px) / -2) calc(var(--holding-space-3) * -1) calc((var(--holding-touch-target) - 20px) / -2) 0;
  padding: 0;
  border: 0;
  border-radius: var(--holding-radius-button);
  background: transparent;
  color: var(--holding-text-muted);
  cursor: pointer;
  transition: color var(--holding-transition);
}

:is(.holding-aluno, .holding-login) .hb-alert__fechar:hover {
  color: var(--holding-heading);
}

:is(.holding-aluno, .holding-login) .hb-alert__fechar:focus {
  outline: none;
}

:is(.holding-aluno, .holding-login) .hb-alert__fechar:focus-visible {
  outline: 2px solid var(--holding-focus-ring);
  outline-offset: -6px;
}

:is(.holding-aluno, .holding-login) .hb-alert--error {
  border-color: var(--holding-danger-border);
  background-color: var(--holding-danger-tint);
}

:is(.holding-aluno, .holding-login) .hb-alert--error .hb-alert__icone {
  color: var(--holding-danger);
}

:is(.holding-aluno, .holding-login) .hb-alert--success {
  border-color: var(--holding-success-border);
  background-color: var(--holding-success-tint);
}

:is(.holding-aluno, .holding-login) .hb-alert--success .hb-alert__icone {
  color: var(--holding-success);
}

:is(.holding-aluno, .holding-login) .hb-alert--warning {
  border-color: var(--holding-warning-border);
  background-color: var(--holding-warning-tint);
}

:is(.holding-aluno, .holding-login) .hb-alert--warning .hb-alert__icone {
  color: var(--holding-warning-text);
}


/* ==========================================================================
   20. Cadastro institucional (application/views/instituicao/*, Fase 6C.4)
   Pagina publica da instituicao (instituicao/{endereco}): formulario, conclusao e avisos. Mesmo
   documento do login (<body class="holding-login">, views/instituicao/inc/topo.php), mas sem a peca
   vertical: um cartao centralizado sobre o fundo neutro, com a propria marca (a do login some a partir
   de 992px). Campos, botoes e avisos sao os componentes das secoes 5, 6 e 19.
   ========================================================================== */

.holding-login .hb-publico {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--holding-space-6) var(--holding-space-4) var(--holding-space-10);
}

/* Celular: cartao no alto (como o login); a partir de 768px, centralizado na altura. */
.holding-login .hb-publico__cartao {
  width: 100%;
  max-width: 520px;
  margin: 0;
  padding: var(--holding-space-6) var(--holding-space-5);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-card);
  background-color: var(--holding-surface);
  box-shadow: var(--holding-shadow-card);
}

@media (min-width: 768px) {
  .holding-login .hb-publico {
    padding: var(--holding-space-10) var(--holding-space-6);
  }

  .holding-login .hb-publico__cartao {
    margin: auto 0;
    padding: var(--holding-space-8);
  }
}

.holding-login .hb-publico__marca {
  display: flex;
  align-items: center;
  gap: var(--holding-space-3);
  margin-bottom: var(--holding-space-6);
}

.holding-login .hb-publico__logo {
  display: block;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.holding-login .hb-publico__marca-nome {
  color: var(--holding-green);
  font-size: var(--holding-font-size-lg);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-tight);
  letter-spacing: 0.01em;
}

.holding-login .hb-publico__titulo {
  margin: 0;
  color: var(--holding-heading);
  font-size: var(--holding-font-size-2xl);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-tight);
  letter-spacing: -0.01em;
}

.holding-login .hb-publico__texto {
  margin: var(--holding-space-3) 0 0;
  color: var(--holding-text);
  font-size: var(--holding-font-size-content);
  line-height: var(--holding-line-height-snug);
}

/* Instituicao pela qual o aluno se cadastra: contexto de leitura, nao e campo. */
.holding-login .hb-publico__instituicao {
  margin: var(--holding-space-4) 0 0;
  padding: var(--holding-space-3) var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-button);
  background-color: var(--holding-surface-subtle);
}

.holding-login .hb-publico__instituicao-rotulo {
  display: block;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
}

.holding-login .hb-publico__instituicao-nome {
  display: block;
  margin-top: var(--holding-space-1);
  color: var(--holding-heading);
  font-size: var(--holding-font-size-lg);
  font-weight: var(--holding-font-weight-semibold);
  line-height: var(--holding-line-height-snug);
  overflow-wrap: anywhere;
}

.holding-login .hb-publico__aviso {
  margin-top: var(--holding-space-5);
}

.holding-login .hb-publico__aviso .hb-alert__texto p + p {
  margin-top: var(--holding-space-1);
}

.holding-login .hb-publico__aviso-acao a {
  font-weight: var(--holding-font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.holding-login .hb-publico__form {
  display: flex;
  flex-direction: column;
  gap: var(--holding-space-5);
  margin: var(--holding-space-6) 0 0;
}

.holding-login .hb-publico__opcional {
  font-weight: var(--holding-font-weight-regular);
}

.holding-login .hb-publico__form .hb-btn--block {
  margin-top: var(--holding-space-2);
}

.holding-login .hb-publico__rodape {
  margin: var(--holding-space-6) 0 0;
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-base);
  text-align: center;
}

/* Sublinhado: o verde nao tem contraste suficiente com o texto cinza para ser a unica pista (como no login). */
.holding-login .hb-publico__rodape a {
  color: var(--holding-green);
  font-weight: var(--holding-font-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Conclusao */
.holding-login .hb-publico__selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--holding-space-4);
  border-radius: var(--holding-radius-pill);
  background-color: var(--holding-success-tint);
  color: var(--holding-success);
}

.holding-login .hb-publico__selo .hb-icon {
  width: 28px;
  height: 28px;
}

.holding-login .hb-publico__resumo {
  display: grid;
  gap: var(--holding-space-3);
  margin: var(--holding-space-5) 0 0;
  padding: var(--holding-space-4);
  border: 1px solid var(--holding-border);
  border-radius: var(--holding-radius-button);
  background-color: var(--holding-surface-subtle);
}

.holding-login .hb-publico__resumo dt {
  color: var(--holding-text-muted);
  font-size: var(--holding-font-size-sm);
  font-weight: var(--holding-font-weight-semibold);
}

.holding-login .hb-publico__resumo dd {
  margin: 0;
  color: var(--holding-heading);
  overflow-wrap: anywhere;
}

.holding-login .hb-publico__cartao--concluido .hb-btn--block,
.holding-login .hb-publico__cartao .hb-btn--secondary,
.holding-login .hb-publico__cartao--erro .hb-btn--block {
  margin-top: var(--holding-space-6);
}