/* ==========================================================================
   styles.css — small global helpers shared across pages.
   Layout/shell now lives in shell.css; design tokens in albergue-tokens.css.
   ========================================================================== */

img { max-width: 100%; }

/* --------------------------------------------------------------------------
   Enumerated tag chip (used in perfil, objetivos)
   -------------------------------------------------------------------------- */
.tag {
    display: inline-block;
    margin: 0 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   Estado badge base (colours come from .badge-estado--NN in albergue-tokens.css)
   -------------------------------------------------------------------------- */
.badge-estado {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Mensagens do sistema (django.contrib.messages)
   -------------------------------------------------------------------------- */
.mensagens-sistema {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
}
.mensagem-sistema {
    padding: 10px 15px;
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}
.mensagem-sistema--success {
    background: var(--state-aprovado-bg);
    border-color: var(--color-accent-lime);
    color: var(--color-accent-lime-ink);
}
.mensagem-sistema--error {
    background: var(--state-a-validar-bg);
    border-color: var(--color-accent-pink);
    color: var(--state-a-validar-ink);
}

/* Comunidade inativa — modo de leitura (FR04.7/FR11.5 de multi-comunidade) */
.aviso-modo-leitura {
    padding: 10px 15px;
    border-radius: var(--radius);
    margin: 0 0 var(--space-4);
    background: var(--state-a-validar-bg);
    border: 1px solid var(--color-accent-pink);
    color: var(--state-a-validar-ink);
}