/* ============================================================
   receitas-split.css
   Split Layout v7 — browser esquerdo + workspace direito
   Traduz o design de "Prescrições - Redesign.html" (referência)
   para a estrutura DOM real de partials/tab_receitas.php.

   IMPORTANTE: carregar DEPOIS de receitas.css em partials/head.php.
   ============================================================ */

/* ── VARIÁVEIS DE COMPATIBILIDADE (não existem em theme.css) ── */
:root {
    --bg-panel:        #f4f7fd;
    --bg-panel2:       #edf1f9;
    --text-secondary:  #4e6080;
    --text-muted:      #8a9ab8;
    --border-strong:   #96a8c2;
    --accent-tint:     rgba(16,83,164,0.07);
    --accent-tint2:    rgba(16,83,164,0.14);
    --accent-sec-tint: rgba(20,168,116,0.10);
    --premium-bg:      #f7ece4;
    --premium-text:    #9e4d0f;
    --premium-border:  rgba(245,158,11,0.35);
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --shadow-split:    0 1px 3px rgba(16,30,60,0.07), 0 1px 2px rgba(16,30,60,0.04);
}
/* Variáveis dark movidas para theme.css — hospital + carvao */

/* ────────────────────────────────────────────
   SPLIT LAYOUT — wrapper
   ──────────────────────────────────────────── */
.rec-split {
    display: flex;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    /* Duas colunas fixas preenchendo a altura restante da viewport (abaixo do header).
       O scroll da página passa a ser interno em cada coluna; o footer aparece ao rolar a página. */
    height: calc(100vh - var(--header-height, 85px) - 24px);
    min-height: 480px;
}

/* ────────────────────────────────────────────
   BROWSER ESQUERDO (rec-browser)
   ──────────────────────────────────────────── */
.rec-split .rec-browser {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--rec-split-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-split);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Barra de busca: agora vive no topo da coluna (com leve margem do header e cantos arredondados).
   Não é mais sticky em relação à página — a coluna inteira é que tem altura fixa. */
.rec-split .browser-sticky-bar {
    position: relative;
    z-index: 20;
    background: var(--bg-panel);
    border: 1px solid var(--rec-split-border);
    border-radius: var(--r-md);
    margin: 5px 20px 12px 20px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.rec-split .browser-sticky-bar .search-input-wrapper { padding: 0; }

/* Cabeçalho: perfil + busca. Colapsa quando o usuário rola .browser-list (classe .head-collapsed em .rec-browser). */
.rec-split .browser-head {
    flex-shrink: 0;
    padding: 12px 12px 8px;
    background: var(--bg-panel);
    overflow: hidden;
    max-height: 200px;
    opacity: 1;
    transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.22s ease;
}
.rec-split .rec-browser.head-collapsed .browser-head {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.rec-split .browser-profile-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
}
.rec-split .bp-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-secondary);
    flex-shrink: 0;
}
.rec-split .bp-lbl {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    flex: 1;
}
.rec-split .bp-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-secondary);
}

/* Busca */
.rec-split .browser-head .search-input-wrapper,
.rec-split .browser-sticky-bar .search-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
}
.rec-split .browser-head .search-icon,
.rec-split .browser-sticky-bar .search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.72rem;
    pointer-events: none;
}
.rec-split .browser-head .search-receitas,
.rec-split .browser-sticky-bar .search-receitas {
    width: 100%;
    max-width: none;
    padding: 10px 110px 10px 28px;
    border: 1.5px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
    border-radius: 8px;
    background: var(--bg-container);
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 400;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rec-split .browser-head .search-receitas:focus,
.rec-split .browser-sticky-bar .search-receitas:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-tint), 0 2px 8px rgba(0, 0, 0, 0.08);
}
.rec-split .browser-head .search-receitas::placeholder,
.rec-split .browser-sticky-bar .search-receitas::placeholder {
    color: var(--text-muted);
}
.rec-split .browser-head .search-clear-btn,
.rec-split .browser-sticky-bar .search-clear-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 14px;
    line-height: 1;
}
.rec-split .browser-head .search-clear-btn:hover,
.rec-split .browser-sticky-bar .search-clear-btn:hover { color: var(--text-main); }

/* Barra filtro/adicionar — #btn-filtrar-cat à esquerda, .bf-add à direita */
.rec-split .browser-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}
.rec-split .btn-filtrar-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--rec-split-border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
    white-space: nowrap;
}
.rec-split .btn-filtrar-cat i { font-size: 0.68rem; opacity: 0.7; }
.rec-split .btn-filtrar-cat:hover { background: var(--hover-row); color: var(--text-main); }
.rec-split .btn-filtrar-cat.open { background: var(--hover-row); }
.rec-split .btn-filtrar-cat.has-filter {
    background: var(--accent-tint);
    color: var(--accent-color);
    border-color: var(--accent-color);
    font-weight: 600;
}
.rec-split .btn-filtrar-cat.has-filter i { opacity: 1; }

/* Pills de categoria (colapsável) */
.rec-split .browser-pills {
    display: none;
    flex-wrap: wrap;
    gap: 4px;
    overflow-x: auto;
    padding: 8px 12px;
    border-bottom: 1px solid var(--rec-split-border);
    background: var(--bg-panel);
    margin-bottom: 0;
    scrollbar-width: none;
    flex-shrink: 0;
}
.rec-split .browser-pills.open {
    display: flex;
    position: relative;
    z-index: 19;
}
.rec-split .browser-pills::-webkit-scrollbar { display: none; }

/* Dot colorido nas pills */
.rec-split .browser-pills .pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.rec-split .browser-pills .pill-cat {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 12px;
    border: 1px solid var(--rec-split-border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s;
}
.rec-split .browser-pills .pill-cat:hover { background: var(--hover-row); }
.rec-split .browser-pills .pill-cat.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
    font-weight: 600;
}
.rec-split .browser-pills .pill-cat.active .pill-dot { opacity: 0.85; }

/* Lista: scroll interno (a coluna .rec-browser tem altura fixa). */
.rec-split .browser-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 12px;
    background: var(--bg-container);
}
.rec-split .browser-list::-webkit-scrollbar { width: 4px; }
.rec-split .browser-list::-webkit-scrollbar-track { background: transparent; }
.rec-split .browser-list::-webkit-scrollbar-thumb {
    background: var(--rec-split-border);
    border-radius: 4px;
}

/* Wrapper de cada seção */
.rec-split .rec-sec-wrapper { display: block; }

/* Header de cada seção (não sticky — rola com a página) */
.rec-split .rec-sec-hdr {
    position: static;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 6px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--rec-split-border);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    height: 19px;
}
.rec-split .rec-sec-hdr i { font-size: 0.72rem; opacity: 0.8; }

/* Favoritas — destaque âmbar/amarelo */
[data-theme="light"] .rec-split .sec-favoritas .rec-sec-hdr { background: rgb(255 254 252); }
.rec-split .sec-favoritas .rec-sec-hdr {
    color: #7a5000;
    background: var(--bg-panel);
    border-top: 3px solid rgba(255, 185, 0, 0.50);
}
.rec-split .sec-favoritas .sec-rec-count {
    background: rgba(245,158,11,0.14);
    color: #b45309;
}
.rec-split .sec-favoritas .sec-btn-ctrl {
    border-color: #f59e0b;
    color: #b45309;
}
.rec-split .sec-favoritas .sec-btn-ctrl:hover { background: rgba(245,158,11,0.10); }
html:not([data-theme="light"]) .rec-split .sec-favoritas .rec-sec-hdr { color: #fbbf24; }
html:not([data-theme="light"]) .rec-split .sec-favoritas .sec-rec-count { color: #fbbf24; }
html:not([data-theme="light"]) .rec-split .sec-favoritas .sec-btn-ctrl { border-color: #fbbf24; color: #fbbf24; }

/* Suas Receitas — destaque verde */
[data-theme="light"] .rec-split .sec-suas .rec-sec-hdr { background: #f6fcfa; }
.rec-split .sec-suas .rec-sec-hdr {
    color: var(--accent-secondary);
    background: var(--bg-panel);
    border-top: 3px solid var(--accent-secondary);
}
.rec-split .sec-suas .sec-rec-count {
    background: var(--accent-sec-tint);
    color: var(--accent-secondary);
}

/* Perfil — destaque azul */
.rec-split .sec-perfil .rec-sec-hdr {
    color: var(--accent-color);
    background: var(--bg-panel);
    border-top: 3px solid var(--accent-color);
}
.rec-split .sec-perfil .sec-rec-count {
    background: var(--accent-tint2);
    color: var(--accent-color);
}

/* Badge de contagem */
.rec-split .sec-rec-count {
    margin-left: auto;
    background: var(--rec-split-border);
    color: var(--text-muted);
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
}

/* Botão de ordem (A-Z) */
.rec-split .sec-btn-ctrl {
    margin-left: 0 !important;
    font-size: 0.62rem !important;
    padding: 2px 7px !important;
    height: auto !important;
    border: 1px solid var(--accent-secondary);
    background: transparent;
    color: var(--accent-secondary);
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}
.rec-split .sec-btn-ctrl:hover { background: var(--accent-sec-tint); }

/* Lista flat (override da grid existente) */
.rec-split .rec-sec-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: none !important;
}

/* ────────────────────────────────────────────
   ITEM DE RECEITA (receita-tab-item no contexto split)
   ──────────────────────────────────────────── */
.rec-split .receita-tab-item {
    max-width: none;
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    cursor: pointer;
    border: none;
    border-bottom: 1px solid var(--rec-split-border);
    border-radius: 0;
    background: transparent;
    transition: background 0.10s;
    position: relative;
    min-height: 60px;
    box-shadow: none;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main);
}
.rec-split .receita-tab-item:last-child { border-bottom: none; }
.rec-split .receita-tab-item:hover { background: var(--hover-row); }

/* Estado ativo */
.rec-split .receita-tab-item.active {
    background: var(--accent-tint2) !important;
    border-left: 3px solid var(--accent-color);
    padding-left: 9px;
    color: var(--accent-color);
    font-weight: 600;
    box-shadow: none;
}
.rec-split .receita-tab-item.active i { color: var(--accent-color); }

/* Badge de categoria → barra colorida fina (ri-bar da referência) */
.rec-split .rec-cat-badge {
    width: 3px;
    min-width: 3px;
    height: auto;
    align-self: stretch;
    margin: 8px 4px 8px 0;
    padding: 0;
    border-radius: 2px;
    background: var(--cat-icon-color, var(--rec-split-border));
    flex-shrink: 0;
    font-size: 0;
    display: block;
}
.rec-split .rec-cat-badge i { display: none; }

/* Wrapper título + coroa inline — coroa fica colada ao texto, após "..." se truncado */
.rec-split .rec-title-wrap {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    margin-right: auto;
}
.rec-split .rec-nome {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rec-split .rec-crown-inline {
    flex-shrink: 0;
    color: #b45309;
    font-size: 0.75rem;
    line-height: 1;
}
html:not([data-theme="light"]) .rec-split .rec-crown-inline { color: #fbbf24; }

/* Cadeado — aparece em receitas que o usuário atual não pode acessar */
.rec-split .rec-lock-tag {
    flex-shrink: 0;
    color: var(--text-soft, #94a3b8);
    font-size: 0.70rem;
    opacity: 0.75;
    line-height: 1;
}

/* Tag "Grátis" — aparece antes do nome para visitantes */
.rec-split .rec-gratis-tag {
    flex-shrink: 0;
    background: #10b981;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

/* Ícone calculadora — fórmulas de dose */
.rec-split .rec-fx-badge {
    font-size: 0.60rem;
    color: var(--accent-color);
    opacity: 0.55;
    flex-shrink: 0;
}

/* Estrela de favorita — inline no final */
.rec-split .btn-fav-inline {
    position: static;
    background: none;
    border: none;
    padding: 10px 0 10px 5px;
    line-height: 1;
    font-size: 0.78rem;
    color: #fbbf24;
    cursor: default;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 2;
    flex-shrink: 0;
}
.rec-split .btn-fav-inline.is-fav { opacity: 1; }
.rec-split .btn-fav-inline.is-interactive { cursor: pointer; }
.rec-split .receita-tab-item:hover .btn-fav-inline.is-interactive {
    opacity: 1;
    pointer-events: auto;
}

/* Badge de receita do usuário — inline */
.rec-split .rec-user-badge {
    position: static;
    font-size: 0.60rem;
    color: var(--accent-secondary);
    opacity: 0.75;
    pointer-events: none;
    line-height: 1;
    flex-shrink: 0;
}
.rec-split .receita-tab-item:hover .rec-user-badge { opacity: 1; }

/* Badge premium — inline */

.rec-split .rec-premium-badge {
    position: static;
    font-size: 0.68rem;
    color: #b45309;
    pointer-events: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.rec-split .rec-premium-badge .fa-lock { font-size: 0.58rem; opacity: 0.65; }
html:not([data-theme="light"]) .rec-split .rec-premium-badge { color: #fbbf24; }

/* Premium item — segue o padrão das demais receitas; apenas a coroa diferencia */

/* Item fake "Adicione suas receitas" */
.rec-split .receita-tab-item[data-is-fake="true"] {
    color: var(--accent-secondary);
    font-weight: 700;
}
.rec-split .receita-tab-item[data-is-fake="true"] .rec-cat-badge {
    display: none;
}
.rec-split .receita-tab-item[data-is-fake="true"]::before {
    content: "+ ";
    color: var(--accent-secondary);
    font-weight: 700;
    margin-right: 4px;
}

/* ────────────────────────────────────────────
   BOTÃO ADICIONAR RECEITA (na filter-bar)
   ──────────────────────────────────────────── */
.rec-split .bf-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1.5px dashed var(--accent-secondary);
    background: transparent;
    color: var(--accent-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}
.rec-split .bf-add:hover {
    background: var(--accent-secondary);
    color: #fff;
    border-color: var(--accent-secondary);
    border-style: solid;
    filter: brightness(1.08);
}
/* Legenda do FAB (mobile) escondida no desktop — re-exibida em receitas-mobile.css */
.bf-add .bf-add-legend { display: none; }

/* ────────────────────────────────────────────
   WORKSPACE DIREITO (rec-workspace-panel)
   ──────────────────────────────────────────── */
.rec-split .rec-workspace-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    overflow: hidden;
    position: relative; /* contém o FAB pediátrico no mobile */
}

/* Barra de dados do paciente — sempre no DOM, visibilidade via .bar-visible */
.rec-split .rec-workspace-panel .dados-paciente-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: var(--bg-container);
    border: 1px solid var(--rec-split-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-split);
    /* Estado oculto — sem layout impact */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 16px;
    margin-bottom: 0;
    transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.22s ease, margin-bottom 0.22s ease;
}

/* Estado visível */
.rec-split .rec-workspace-panel .dados-paciente-bar.bar-visible {
    max-height: 250px;
    opacity: 1;
    padding: 11px 16px;
    margin-bottom: 10px;
}

/* Estado bloqueado (free / visitante) */
.rec-split .rec-workspace-panel .dados-paciente-bar.bar-locked .dp-campo,
.rec-split .rec-workspace-panel .dados-paciente-bar.bar-locked .dp-btn-reset {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.rec-split .rec-workspace-panel .dados-paciente-bar.bar-locked .dp-btn-calc {
    opacity: 0.7;
    cursor: pointer;
}
.rec-split .rec-workspace-panel .dados-paciente-bar.bar-locked .dp-btn-calc::after {
    content: ' 🔒';
    font-size: 0.8em;
}

/* Editor card (era .editor-card na referência) */
.rec-split .rec-workspace-panel .receita-workspace {
    flex: 1 1 auto;
    background: var(--bg-container);
    border: 1px solid var(--rec-split-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-split);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    gap: 0;
    min-height: 0;
}

/* Header do editor (era .editor-hdr) */
.rec-split .rec-workspace-panel .receita-header-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 11px;
    margin-bottom: 0;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--rec-split-border);
    border-radius: 0;
    flex-shrink: 0;
}
.rec-split .rec-workspace-panel .receita-header-info h3#receita-titulo-display {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    flex: 1;
    min-width: 0;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    overflow: hidden;
}
/* Coluna direita: título + rótulo de categoria */
.rec-split .rec-workspace-panel .titulo-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
/* Linha principal: título + botão editar */
.rec-split .rec-workspace-panel .titulo-linha {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    white-space: nowrap;
}
.rec-split .rec-workspace-panel .titulo-linha #span-titulo-rec {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Rótulo de categoria — abaixo do título, à direita do ícone */
.rec-split .rec-workspace-panel .titulo-cat-label {
    font-size: 0.70rem;
    color: var(--text-muted);
    line-height: 1.5;
    font-weight: 100 !important;
}
/* receita-header-right: controles de fonte ao lado do título */
.rec-split .rec-workspace-panel .receita-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Botões de ação na base do editor */
.rec-split .rec-workspace-panel .receita-actions-bottom {
    display: flex; 
    align-items: center; 
    gap: 6px;
}

.editor-actions-left {
    display: flex; 
    align-items: center; 
    gap: 5px;
}
.editor-actions-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }


/* Controles de tamanho de fonte — padronizados como botões secundários compactos */
.rec-split .rec-workspace-panel .font-size-controls {
    display: flex;
    gap: 2px;
}
.rec-split .rec-workspace-panel .btn-font-size {
    padding: 5px 7px;
    border: 1px solid var(--rec-split-border);
    border-radius: 6px;
    background: var(--bg-panel);
    color: var(--text-muted);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rec-split .rec-workspace-panel .btn-font-size span { display: block; }
.rec-split .rec-workspace-panel #btn-font-sm span { font-size: 10px; }
.rec-split .rec-workspace-panel #btn-font-md span { font-size: 13px; }
.rec-split .rec-workspace-panel #btn-font-lg span { font-size: 16px; }
.rec-split .rec-workspace-panel .btn-font-size:hover {
    background: var(--hover-row);
    border-color: var(--border-strong);
    color: var(--text-main);
}
.rec-split .rec-workspace-panel .btn-font-size.active {
    background: var(--accent-tint);
    border-color: var(--accent-color);
    color: var(--accent-color);
    opacity: 1;
}


/* Body do editor (era .editor-body) */
.rec-split .rec-workspace-panel .receita-workspace-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    padding: 0;
    gap: 0;
}

/* Coluna do editor (era .editor-col) */
.rec-split .rec-workspace-panel .receita-editor-col {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 16px 14px;
    gap: 10px;
}

/* Wrapper do editor: flex column que cresce para preencher o espaço disponível, mínimo 360px */
.rec-split .rec-workspace-panel .editor-receita-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 360px;
    overflow: hidden;
}

/* Textarea — preenche o wrapper (auto-grow até o espaço disponível, mínimo 360px) */
.rec-split .rec-workspace-panel .editor-receita {
    flex: 1 1 auto;
    width: 100%;
    min-height: 360px;
    padding: 15px 16px;
    border: 1.5px solid var(--rec-split-border);
    border-radius: var(--r-md);
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    line-height: 1.68;
    background: var(--input-bg);
    color: var(--text-main);
    resize: none;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* ────────────────────────────────────────────
   Editor toolbar (acima do textarea)
   Ações: Resetar (vermelho), Salvar (verde), Ajuda, Copiar (azul), Enviar (cinza)
   ──────────────────────────────────────────── */
.rec-split .rec-workspace-panel .editor-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-bottom: 4px;
}
.rec-split .rec-workspace-panel .editor-toolbar .et-btn { flex-shrink: 0; height: 48px; }
.rec-split .rec-workspace-panel .editor-toolbar .et-spacer {
    flex: 1 1 auto;
}
.rec-split .rec-workspace-panel .et-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.13s, filter 0.13s, opacity 0.13s, border-color 0.13s, color 0.13s;
}
.rec-split .rec-workspace-panel .et-btn i { font-size: 0.85rem; }
.rec-split .rec-workspace-panel .et-btn:not([disabled]):hover { filter: brightness(1.07); }
.rec-split .rec-workspace-panel .et-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent !important;
    color: var(--text-muted) !important;
    border-color: var(--rec-split-border) !important;
    filter: none !important;
}
.rec-split .rec-workspace-panel .et-btn-danger  { background: var(--danger-color, #C0392B); }
.rec-split .rec-workspace-panel .et-btn-success { background: var(--success-color, #0d8a62); }
.rec-split .rec-workspace-panel .et-btn-info    { background: var(--btn-copy-bg, #1053a4); }
.rec-split .rec-workspace-panel .et-btn-outline-info {
    background: #fff;
    color: var(--btn-copy-bg, #1053a4);
    border: 1px solid var(--btn-copy-bg, #1053a4);
}
.rec-split .rec-workspace-panel .et-btn-outline-info:not([disabled]):hover {
    background: var(--accent-tint, rgba(16,83,164,0.07));
}
html:not([data-theme="light"]) .rec-split .rec-workspace-panel .et-btn-outline-info {
    background: transparent;
}
.rec-split .rec-workspace-panel .et-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--rec-split-border);
}
.rec-split .rec-workspace-panel .et-btn-ghost:not([disabled]):hover {
    background: var(--hover-row);
    color: var(--text-main);
}

/* Mirror: deve espelhar exatamente o textarea — mesmos padding, line-height e border-width */
.rec-split .rec-workspace-panel .editor-receita-mirror {
    padding: 15px 16px;
    line-height: 1.68;
    border-width: 1.5px;
    border-radius: var(--r-md);
}
.rec-split .rec-workspace-panel .editor-receita:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.rec-split .rec-workspace-panel .btn-action-receita {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 8px; font-family: inherit; font-weight: 600; cursor: pointer;
    transition: background 0.13s, box-shadow 0.13s, border-color 0.13s, opacity 0.13s;
    white-space: nowrap; line-height: 1;
}
.rec-split .rec-workspace-panel .btn-action-receita.sec {
    padding: 9px 20px; font-size: 0.86rem;
    border: none;
    background: var(--btn-copy-bg); 
    color: #fff;
    box-shadow: 0 2px 10px rgba(30,52,96,0.30);
}
.rec-split .rec-workspace-panel .btn-action-receita.sec:hover {
    filter: brightness(1.07); 
    box-shadow: 0 4px 14px rgba(42,77,128,0.40); 
    background: var(--btn-copy-bg-hover); 
}

html:not([data-theme="light"]) .rec-split .rec-workspace-panel .btn-action-receita.sec { box-shadow: none; }




.rec-split .rec-workspace-panel .btn-action-receita.prim {
    padding: 8px 18px; font-size: 0.84rem;
    border: 1px solid var(--accent-color);
    background: transparent; color: var(--accent-color);
}
.rec-split .rec-workspace-panel .btn-action-receita.prim:hover {
    background: var(--accent-tint2); 
    border-color: var(--accent-hover);
}
html:not([data-theme="light"]) .rec-split .rec-workspace-panel .btn-action-receita.prim {
    border-color: var(--accent-color); 
    color: var(--accent-color);
}
html:not([data-theme="light"]) .rec-split .rec-workspace-panel .btn-action-receita.prim:hover {
    background: var(--accent-tint2);
}




/* Painel Inteligente (era .painel-int) */
.rec-split .rec-workspace-panel #painel-inteligente {
    width: 260px;
    flex-shrink: 0;
    border-left: 1px solid var(--rec-split-border);
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.rec-split .rec-workspace-panel #painel-inteligente #pi-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 2px;
}
.rec-split .rec-workspace-panel #painel-inteligente #pi-admin-section {
    flex-shrink: 0;
}
/* Dados do paciente fica no TOPO do painel inteligente (não mais entre header e editor).
   Layout vertical (peso em cima, idade embaixo) por causa da largura estreita do painel. */
.rec-split .rec-workspace-panel #painel-inteligente .dados-paciente-bar {
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 10px 10px 30px 10px;
    border-radius: var(--r-md);
}
.rec-split .rec-workspace-panel #painel-inteligente .dados-paciente-bar .dp-campos {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rec-split .rec-workspace-panel #painel-inteligente .dados-paciente-bar .dp-acoes {
    display: flex;
    gap: 6px;
}

/* Admin bar dentro do Painel Inteligente */
.pi-admin-bar {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border: 1px dashed rgba(230,34,34,0.30);
    background-color: rgba(230,34,34,0.06);
    margin: 50px 10px 10px 10px;
}
.pi-admin-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #e62222;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.pi-admin-label i { margin-right: 4px; }
.pi-admin-bar .btn-admin-rec {
    font-size: 0.72rem;
    padding: 5px 8px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background: var(--bg-container);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.12s;
    width: 100%;
    text-align: left;
}
.pi-admin-bar .btn-admin-rec:hover { background: var(--hover-row); }
.pi-admin-bar .btn-admin-ok { color: #27ae60; border-color: #27ae60; }
.pi-admin-bar .btn-admin-warn { color: #e67e22; border-color: #e67e22; }
.pi-admin-bar .btn-admin-prem-on { color: #b45309; border-color: #b45309; }
.pi-admin-bar .btn-admin-prem-off { color: var(--text-muted); }

/* Estado vazio do painel */
.pi-vazio .pi-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    text-align: center;
    color: var(--text-muted);
}
.pi-placeholder-icon {
    font-size: 1.4rem;
    opacity: 0.35;
}
.pi-vazio .pi-placeholder p {
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.7;
}

/* Seção de observação da receita */
.pi-obs-section {
    background: rgba(0, 160, 190, 0.07);
    border-radius: 6px;
    padding: 8px 10px !important;
    margin-bottom: 4px;
}
.pi-obs-titulo {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pi-obs-texto {
    font-size: 0.75rem;
    color: var(--text-main);
    line-height: 1.5;
    margin: 0;
}

/* pi-alerta — dark fix */
html:not([data-theme="light"]) .pi-alerta-section {
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.45);
}
html:not([data-theme="light"]) .pi-alerta-titulo { color: #fbbf24; }
html:not([data-theme="light"]) .pi-alerta-count,
html:not([data-theme="light"]) .pi-alerta-lista li { color: #fcd34d; }
html:not([data-theme="light"]) .pi-obs-section { background: rgba(0, 160, 190, 0.10); }
html:not([data-theme="light"]) .pi-obs-titulo { color: #22d3ee; }

/* ────────────────────────────────────────────
   MOBILE (< 900px) — fluxo mestre-detalhe
   ──────────────────────────────────────────── */

/* Botão Voltar: oculto no desktop */
.btn-mobile-voltar { display: none; }

@media (max-width: 900px) {
    .rec-split { flex-direction: column; }

    /* Estado padrão: lista visível, workspace oculto */
    .rec-split .rec-browser {
        position: static;
        width: 100% !important;
        max-height: none !important;
    }
    .rec-split .rec-workspace-panel { display: none; width: 100%; }

    /* Estado detalhe (.mobile-rec-detail): lista oculta, workspace visível */
    .rec-split.mobile-rec-detail .rec-browser { display: none; }
    .rec-split.mobile-rec-detail .rec-workspace-panel {
        display: flex;
        flex-direction: column;
    }
    .rec-split.mobile-rec-detail .receita-workspace-body { flex-direction: column; }
    .rec-split.mobile-rec-detail #painel-inteligente {
        width: 100%;
        max-height: 40vh;
        border-left: none;
        border-top: 1px solid var(--rec-split-border);
    }

    /* Textarea: auto-grow sem scroll */
    .rec-split.mobile-rec-detail .editor-receita-wrapper { flex: none; }
    .rec-split.mobile-rec-detail .editor-receita {
        flex: none !important;
        min-height: auto !important;
        height: auto;
        overflow: hidden;
        resize: none;
    }

    /* No modo detalhe: deixa a página crescer com o conteúdo (evita sobrepor o footer).
       Toda a cadeia (split → panel → workspace → body → editor-col) precisa abandonar
       o sizing por flex (flex:1 / altura travada) e passar a ter altura natural de
       conteúdo; caso contrário o textarea cresce mas os ancestrais continuam presos à
       altura da viewport e o conteúdo expandido escorrega por baixo do footer. */
    .rec-split.mobile-rec-detail {
        height: auto;
        min-height: auto;
    }
    .rec-split.mobile-rec-detail .rec-workspace-panel {
        height: auto;
        overflow: visible;
    }
    .rec-split.mobile-rec-detail .receita-workspace {
        flex: none;
        height: auto;
        overflow: visible;
        min-height: 0;
    }
    .rec-split.mobile-rec-detail .receita-workspace-body {
        flex: none;
        height: auto;
        overflow: visible;
        min-height: 0;
    }
    .rec-split.mobile-rec-detail .receita-editor-col {
        flex: none;
        height: auto;
        overflow: visible;
    }

    /* Botão Voltar */
    .btn-mobile-voltar {
        display: flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: none;
        color: var(--accent-color);
        font-size: 0.9rem;
        font-weight: 600;
        padding: 10px 16px 4px;
        cursor: pointer;
        font-family: inherit;
    }
    .btn-mobile-voltar i { font-size: 0.85rem; }

    .rec-split .browser-sticky-bar {
        margin: 10px 20px 10px 20px !important;
    }
}
.pb-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-secondary);
    white-space: nowrap;
}




html:not([data-theme="light"]) .pi-obs-titulo { color: #22d3ee; }

/* Desktop: oculta elementos exclusivos do mobile */
@media (min-width: 901px) {
    #pi-obs-mobile,
    #fab-calc-pediatrica,
    #drawer-calc-pediatrica,
    #drawer-calc-backdrop {
        display: none !important;
    }
    /* status-save-receita não recebe mais botões; mantém o nó no DOM (compat) sem reservar espaço */
    #status-save-receita:empty { display: none; }
}