/*
 * Banda de consulta: el único bloque oscuro de la página. Presenta la ficha y cuenta
 * qué se revisa en la primera reunión. La ficha en sí está en ficha.css.
 */
@layer components {
  .consult {
    padding-block: var(--space-2xl);
    background-color: var(--color-tinta);
    color: var(--color-on-tinta);
    /* Sobre fondo oscuro el anillo de foco pasa a ser el resaltador. */
    --color-focus: var(--color-highlight);
  }

  .consult .section__intro {
    color: var(--color-on-tinta-soft);
  }

  .consult__meeting {
    display: grid;
    gap: var(--space-s);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--color-line-on-tinta);
  }

  .consult__meeting-title {
    font-family: var(--font-brand);
    font-size: var(--step-0);
    font-stretch: 100%;
    letter-spacing: 0;
    line-height: var(--leading-snug);
  }

  .consult__meeting-list {
    display: grid;
    gap: var(--space-2xs);
    color: var(--color-on-tinta-soft);
  }

  /* Cada punto lleva una casilla vacía, como la lista de una ficha por llenar. */
  .consult__meeting-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--space-xs);
  }

  .consult__meeting-list li::before {
    content: "";
    inline-size: 0.6875rem;
    block-size: 0.6875rem;
    border: 0.09375rem solid currentColor;
    border-radius: var(--radius-mark);
    translate: 0 0.05em;
  }

  .consult__direct {
    color: var(--color-on-tinta-soft);
  }

  .consult__direct a {
    color: var(--color-on-tinta);
    font-weight: 600;
    white-space: nowrap;
  }
}