/* Autocomplete de medicamento (CMED).
 *
 * Folha própria porque o componente aparece em três telas de shells
 * diferentes: o portal público, que não carrega o tema do aplicativo, e as
 * duas telas de dentro de `/app/`. Depender de classe do Duralux deixaria
 * a lista sem estilo justamente no portal.
 */

.nd-med-lista {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 19rem;
    overflow-y: auto;
    margin-top: 2px;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(40, 60, 80, .16);
    scrollbar-width: thin;
}

.nd-med-lista[hidden] {
    display: none;
}

.nd-med-opcao {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.nd-med-opcao:hover,
.nd-med-opcao:focus-visible {
    background: #eef1fb;
}

.nd-med-titulo {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #283c50;
    line-height: 1.3;
}

.nd-med-meta {
    display: block;
    font-size: 10.5px;
    color: #64748b;
    /* Laboratório e substância são longos; uma linha só mantém a lista
     * legível sem virar parágrafo. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nd-med-tarja {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 6px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
}

/* A tarja que sugere controle especial é a única colorida. Pintar todas
 * faria a que importa desaparecer no meio das outras. */
.nd-med-tarja.is-especial {
    color: #9a3412;
    background: #ffedd5;
}

.nd-med-vazio {
    margin: 0;
    padding: 10px;
    font-size: 11.5px;
    color: #64748b;
}

.nd-med-aviso {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px dashed #fdba74;
    border-radius: 8px;
    background: #fff7ed;
    font-size: 11.5px;
    color: #9a3412;
}