/* Mensajes de sistema (§6.19): banda surface con borde izquierdo 2px por tipo (§2.3). */

.c-messages {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
  margin: var(--space-5) auto;
  padding: var(--space-5) var(--space-6);
  background: var(--div-surface);
  border-inline-start: 2px solid var(--div-accent-strong);
  box-shadow: var(--shadow-1);
  color: var(--div-ink);
  font-size: var(--fs-body);
}

.c-messages--status {
  border-inline-start-color: var(--color-status);
}

.c-messages--warning {
  border-inline-start-color: var(--color-warning);
}

.c-messages--error {
  border-inline-start-color: var(--color-error);
}

.c-messages .c-icon {
  flex: none;
  margin-block-start: .2em;
}

.c-messages .c-icon svg {
  width: 20px;
  height: 20px;
}

.c-messages--status .c-icon {
  color: var(--color-status);
}

.c-messages--warning .c-icon {
  color: var(--color-warning);
}

.c-messages--error .c-icon {
  color: var(--color-error);
}

.c-messages a {
  color: var(--div-accent-strong);
}

.c-messages ul {
  margin: 0;
  padding-inline-start: var(--space-5);
}

.c-messages > :last-child {
  margin-block-end: 0;
}

/* Cierre × fino. */
.c-messages button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 auto;
  color: var(--div-ink-soft);
  transition: color var(--dur-fast) var(--ease-out);
}

.c-messages button:hover,
.c-messages button:focus-visible {
  color: var(--div-ink);
}

.c-messages button svg {
  width: 20px;
  height: 20px;
}