/* Explain: Styles for the prescription builder UI, including catalog, items, and clinical info. */
/* Construtor de receita — catálogo de medicamentos e itens editáveis */
.rx-builder { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .rx-builder { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); align-items: start; } }
.rx-builder__main { display: grid; gap: 1.25rem; align-content: start; }

.rx-cat-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.35rem; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: 0.8rem; margin-bottom: 0.85rem; }
.rx-cat-tab { flex: 1 1 auto; min-height: 40px; padding: 0.5rem 0.6rem; border: none; border-radius: 0.55rem; background: transparent; font-size: 0.76rem; font-weight: 600; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; transition: background 0.18s ease, color 0.18s ease; }
.rx-cat-tab:hover { color: var(--primary-hover); }
.rx-cat-tab.is-active { background: var(--surface-color); color: var(--primary-hover); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
.rx-cat-tab--action { border: 1px dashed var(--primary-color); color: var(--primary-hover); }
.rx-cat-tab--action:hover { background: var(--primary-soft); }

.rx-search { position: relative; margin-bottom: 0.85rem; }
.rx-search > i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.85rem; pointer-events: none; }
.rx-search .clinic-field { padding-left: 2.4rem; }

.rx-cat-list { display: grid; gap: 0.5rem; max-height: 34rem; overflow-y: auto; padding-right: 0.3rem; }
.rx-cat-group { border: 1px solid var(--border-color); border-radius: 0.75rem; background: var(--surface-color); overflow: hidden; }
.rx-cat-group__head { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.85rem; border: none; background: var(--surface-alt); font-size: 0.82rem; font-weight: 700; color: var(--text-color); cursor: pointer; text-align: left; }
.rx-cat-count { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; font-weight: 600; color: var(--text-muted); }
.rx-cat-count .chev { transition: transform 0.2s ease; }
.rx-cat-group.is-open .rx-cat-count .chev { transform: rotate(180deg); }
.rx-cat-group__body { display: none; padding: 0.35rem; }
.rx-cat-group.is-open .rx-cat-group__body { display: grid; gap: 0.25rem; }
.rx-med-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 42px; padding: 0.5rem 0.6rem; border: 1px solid transparent; border-radius: 0.55rem; background: transparent; font-size: 0.8rem; color: var(--text-color); text-align: left; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease; }
.rx-med-row:hover { background: var(--primary-soft); border-color: var(--primary-color); color: var(--primary-hover); }
.rx-med-row i { flex-shrink: 0; color: var(--primary-color); font-size: 0.75rem; }
.rx-empty-search { font-size: 0.8rem; color: var(--text-muted); text-align: center; line-height: 1.55; padding: 1.5rem 0.5rem; }

.rx-item { border: 1px solid var(--border-color); border-radius: 0.85rem; background: var(--surface-color); overflow: hidden; }
.rx-item + .rx-item { margin-top: 0.85rem; }
.rx-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border-color); background: var(--surface-alt); }
.rx-item__id { display: flex; align-items: flex-start; gap: 0.6rem; min-width: 0; }
.rx-item__title { display: block; font-size: 0.92rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.rx-item__tag { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-hover); background: var(--primary-soft); padding: 0.15rem 0.5rem; border-radius: 999px; margin-top: 0.3rem; }
.rx-item__num { width: 1.6rem; height: 1.6rem; flex-shrink: 0; border-radius: 50%; background: var(--primary-color); color: #fff; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; }
.rx-item__body { padding: 1rem; }

.rx-clin { border: 1px solid var(--border-color); border-radius: 0.7rem; background: var(--surface-alt); padding: 0.75rem 0.85rem; margin-bottom: 0.9rem; }
.rx-clin__head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secondary-color); margin-bottom: 0.55rem; }
.rx-clin__head i { color: var(--primary-color); }
.rx-clin__grid { display: grid; gap: 0.5rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rx-clin__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rx-clin__row { font-size: 0.76rem; line-height: 1.45; color: var(--text-color); }
.rx-clin__row b { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.1rem; }
.rx-clin__toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem; padding: 0; border: none; background: none; font-size: 0.72rem; font-weight: 600; color: var(--primary-hover); cursor: pointer; }
.rx-clin__toggle i { transition: transform 0.2s ease; }
.rx-clin__ref { display: none; margin-top: 0.5rem; padding: 0.6rem 0.7rem; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 0.55rem; font-size: 0.76rem; line-height: 1.5; color: var(--text-color); }
.rx-clin__ref.is-open { display: block; }

.rx-fields { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .rx-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rx-fields .rx-col-2 { grid-column: 1 / -1; }
}
.rx-dur { display: flex; align-items: center; gap: 0.5rem; }
.rx-dur span { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }