/* theme.css — Plantão10 v7
   3 temas: light (padrão) · hospital (alto contraste) · carvao (escuro suave)
   ========================================================================= */

/* =========================================
   TEMA CLARO (padrão — :root)
   ========================================= */
:root {
    --bg-body:      #eef2f8;
    --bg-container: #ffffff;
    --text-main:    #1a2133;

    --border-color:     #96a8c2;
    --rec-split-border: #ccd6ea;
    --accent-color:     #1053a4;
    --accent-hover:     #0d4289;
    --input-bg:         #edf2fb;
    --tab-inactive:     #d4deee;

    --header-height: 85px;
    --glass-bg:      rgba(255,255,255,0.75);
    --glass-border:  1px solid rgba(255,255,255,0.2);

    --danger-color:  #C0392B;
    --success-color: #0d8a62;
    --hover-row:     #e3eaf5;

    /* FAB "Calcular doses" (mobile) — laranja da família flat dos botões */
    --fab-calc-bg: #d35400;

    /* Calculadora de doses — acento laranja dedicado (casa com o FAB) */
    --calc-accent:        #d35400;
    --calc-accent-hover:  #b8480a;
    --calc-accent-tint:   rgba(211,84,0,0.10);
    --calc-accent-tint2:  rgba(211,84,0,0.18);
    --calc-accent-shadow: rgba(211,84,0,0.28);

    --accent-secondary:       #14a874;
    --accent-secondary-hover: #0d8a62;

    --heading-color:     #1053a4;
    --tab-active-bg:     #1053a4;
    --tab-active-border: #0d4289;
    --tab-active-text:   #ffffff;

    /* Variáveis do split layout (receitas-split.css) */
    --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);

    /* Botões +/- /X dos sintomas */
    --btn-ctrl-bg:            #f0f0f0;
    --btn-ctrl-border:        #ccc;
    --btn-ctrl-text:          #555;
    --btn-ctrl-hover:         #e0e0e0;
    --btn-ctrl-active-bg:     #ccc;
    --btn-ctrl-active-border: #aaa;
    --btn-ctrl-active-text:   #333;

    /* Botões copiar / reset (actions.css) */
    --btn-copy-bg:        #1053a4;
    --btn-copy-bg-hover:  #0d4289;
    --btn-copy-text:      #ffffff;
    --btn-copy-border:    #1053a4;
    --btn-reset-bg:       #e8e8e8;
    --btn-reset-text:     #555;
    --btn-reset-border:   #ccc;
}

/* =========================================
   TEMA HOSPITAL — alto contraste
   Para monitores ruins de plantão.
   ========================================= */
[data-theme="hospital"] {
    --bg-body:      #0a0d12;
    --bg-container: #161a22;
    --text-main:    #f5f7fa;

    --border-color:     #4a5468;
    --rec-split-border: #2b313d;
    --accent-color:     #5b9eff;
    --accent-hover:     #79b3ff;
    --input-bg:         #1f242f;
    --tab-inactive:     #1f242f;

    --glass-bg:     rgba(22,26,34,0.90);
    --glass-border: 1px solid rgba(255,255,255,0.08);

    --danger-color:  #ff6b6b;
    --success-color: #2ad99c;
    --hover-row:     #232936;

    /* FAB "Calcular doses" (mobile) — laranja mais vivo sobre fundo escuro */
    --fab-calc-bg: #e67e22;

    /* Calculadora de doses — laranja mais luminoso p/ não pesar no escuro */
    --calc-accent:        #f6852f;
    --calc-accent-hover:  #ff9d52;
    --calc-accent-tint:   rgba(246,133,47,0.16);
    --calc-accent-tint2:  rgba(246,133,47,0.26);
    --calc-accent-shadow: rgba(0,0,0,0.45);

    --accent-secondary:       #2ad99c;
    --accent-secondary-hover: #4be8b1;

    --heading-color:     #ffffff;
    --tab-active-bg:     #2c3445;
    --tab-active-border: #5b9eff;
    --tab-active-text:   #ffffff;

    --bg-panel:        #11151c;
    --bg-panel2:       #0d1017;
    --text-secondary:  #b8c2d6;
    --text-muted:      #8c97ae;
    --border-strong:   #4a5468;
    --accent-tint:     rgba(91,158,255,0.14);
    --accent-tint2:    rgba(91,158,255,0.22);
    --accent-sec-tint: rgba(42,217,156,0.14);
    --premium-bg:      #1f1808;
    --premium-text:    #ffd470;
    --premium-border:  rgba(255,200,80,0.40);
    --shadow-split:    0 1px 3px rgba(0,0,0,0.45);

    --btn-ctrl-bg:            #1f242f;
    --btn-ctrl-border:        #4a5468;
    --btn-ctrl-text:          #b8c2d6;
    --btn-ctrl-hover:         #2c3445;
    --btn-ctrl-active-bg:     #0a0d12;
    --btn-ctrl-active-border: #5b9eff;
    --btn-ctrl-active-text:   #ffffff;

    --btn-copy-bg:       #1e3460;
    --btn-copy-bg-hover: #2a4d80;
    --btn-copy-text:     #ffffff;
    --btn-copy-border:   #2a4d80;
    --btn-reset-bg:      #1f242f;
    --btn-reset-text:    #8c97ae;
    --btn-reset-border:  #4a5468;
}

/* =========================================
   TEMA CARVÃO — escuro suave, azulado
   ========================================= */
[data-theme="carvao"] {
    --bg-body:      #161922;
    --bg-container: #1e2230;
    --text-main:    #eef1f8;

    --border-color:     #3a4257;
    --rec-split-border: #2a3144;
    --accent-color:     #4d8df0;
    --accent-hover:     #6ba1f5;
    --input-bg:         #232839;
    --tab-inactive:     #232839;

    --glass-bg:     rgba(30,34,48,0.90);
    --glass-border: 1px solid rgba(255,255,255,0.07);

    --danger-color:  #ff7373;
    --success-color: #28d49b;
    --hover-row:     #262d40;

    /* FAB "Calcular doses" (mobile) — laranja mais vivo sobre fundo escuro */
    --fab-calc-bg: #e67e22;

    /* Calculadora de doses — laranja mais luminoso p/ não pesar no escuro */
    --calc-accent:        #f6852f;
    --calc-accent-hover:  #ff9d52;
    --calc-accent-tint:   rgba(246,133,47,0.16);
    --calc-accent-tint2:  rgba(246,133,47,0.26);
    --calc-accent-shadow: rgba(0,0,0,0.45);

    --accent-secondary:       #28d49b;
    --accent-secondary-hover: #45e0ad;

    --heading-color:     #ffffff;
    --tab-active-bg:     #2c3447;
    --tab-active-border: #4d8df0;
    --tab-active-text:   #ffffff;

    --bg-panel:        #1a1e2b;
    --bg-panel2:       #161924;
    --text-secondary:  #a8b3cc;
    --text-muted:      #7d88a3;
    --border-strong:   #3a4257;
    --accent-tint:     rgba(77,141,240,0.12);
    --accent-tint2:    rgba(77,141,240,0.22);
    --accent-sec-tint: rgba(40,212,155,0.12);
    --premium-bg:      #221a08;
    --premium-text:    #ffd470;
    --premium-border:  rgba(255,200,80,0.35);
    --shadow-split:    0 1px 3px rgba(0,0,0,0.40);

    --btn-ctrl-bg:            #232839;
    --btn-ctrl-border:        #3a4257;
    --btn-ctrl-text:          #a8b3cc;
    --btn-ctrl-hover:         #2c3447;
    --btn-ctrl-active-bg:     #161922;
    --btn-ctrl-active-border: #4d8df0;
    --btn-ctrl-active-text:   #ffffff;

    --btn-copy-bg:       #1e2f50;
    --btn-copy-bg-hover: #2a4070;
    --btn-copy-text:     #ffffff;
    --btn-copy-border:   #2a4070;
    --btn-reset-bg:      #232839;
    --btn-reset-text:    #7d88a3;
    --btn-reset-border:  #3a4257;
}

/* =========================================
   TOOLTIP PARA O TÍTULO EDITÁVEL
   ========================================= */
.title-editable { cursor: pointer; position: relative; }
.title-editable:hover::after {
    content: attr(data-tooltip);
    position: absolute; top: 100%; left: 0;
    background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;
    font-size: 0.75rem; white-space: nowrap; margin-top: 5px; z-index: 100;
    font-weight: normal; pointer-events: none;
}

/* =========================================
   MENU SUSPENSO DO USUÁRIO (DROPDOWN)
   ========================================= */
.user-dropdown-container { position: relative; display: inline-block; }
.user-dropdown-menu {
    display: none;
    position: absolute; top: 120%; right: 0; width: 260px;
    background: var(--bg-container); border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 6000; overflow: hidden;
    animation: fadeInMenu 0.2s ease;
}
.user-dropdown-container.open .user-dropdown-menu { display: block; }

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-header {
    padding: 15px; display: flex; align-items: center; gap: 12px;
    background: var(--hover-row);
}
.dropdown-header .avatar-large {
    width: 45px; height: 45px;
    background: var(--accent-color); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: bold;
}
.dropdown-header strong { display: block; color: var(--text-main); font-size: 0.95rem; }
.dropdown-header span   { display: block; color: var(--text-muted); font-size: 0.75rem; }

.badge-plano {
    display: inline-block;
    background: var(--tab-inactive); color: var(--text-main);
    font-size: 0.65rem; padding: 2px 6px; border-radius: 4px;
    margin-top: 5px; font-weight: bold;
    border: 1px solid var(--border-color);
}

.user-dropdown-menu hr { border: none; border-top: 1px solid var(--border-color); margin: 0; }
.user-dropdown-menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 15px; color: var(--text-main);
    text-decoration: none; font-size: 0.9rem; transition: 0.2s;
}
.user-dropdown-menu a:hover { background: var(--hover-row); }
.user-dropdown-menu a i { color: var(--text-muted); width: 16px; text-align: center; }

.dropdown-upgrade { background: var(--accent-tint); color: var(--accent-color) !important; font-weight: bold; }
.dropdown-upgrade:hover { background: var(--accent-tint2) !important; }
.dropdown-upgrade i { color: var(--accent-color) !important; }

/* FIX DO ÍCONE DA ENGRENAGEM NO CONFIG */
.page-title i.fa-cog { color: var(--text-main) !important; }

/* =========================================
   SELETOR DE TEMA (dropdown no header)
   ========================================= */
.tema-picker-wrap { position: relative; display: inline-block; }

.btn-tema-picker {
    /* herda o estilo de .btn-receita.empty — nenhum style extra necessário */
}

.tema-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 310px;
    background: var(--bg-container);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16,30,60,0.18), 0 4px 12px rgba(16,30,60,0.06);
    z-index: 6100; overflow: hidden; padding: 6px;
    animation: fadeInMenu 0.16s ease-out;
}
[data-theme="hospital"] .tema-menu,
[data-theme="carvao"]   .tema-menu {
    box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4);
}
.tema-menu::before {
    content: "";
    position: absolute; top: -7px; right: 14px;
    width: 12px; height: 12px;
    background: var(--bg-container);
    border-left: 1px solid var(--border-color);
    border-top:  1px solid var(--border-color);
    transform: rotate(45deg);
}

.tema-menu-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}
.tema-menu-head-icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    color: #fff; display: flex; align-items: center; justify-content: center;
}
.tema-menu-title { font-size: 0.85rem; font-weight: 700; color: var(--text-main); }
.tema-menu-sub   { font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }

.tema-opt {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 10px; border: 1.5px solid transparent;
    background: transparent; border-radius: 9px; cursor: pointer;
    text-align: left; color: var(--text-main); font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
}
.tema-opt:hover    { background: var(--hover-row); }
.tema-opt.selected { background: var(--accent-tint); border-color: var(--accent-color); }

/* Miniatura de preview do tema */
.tema-opt-preview {
    width: 44px; height: 32px; border-radius: 7px; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    flex-shrink: 0; border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.tema-opt-preview .tp-bg  { grid-row: 1/3; grid-column: 1/2; }
.tema-opt-preview .tp-card{ grid-row: 1/2; grid-column: 2/3; }
.tema-opt-preview .tp-acc { grid-row: 2/3; grid-column: 2/3; }

/* Swatches por tema */
.tp-light    .tp-bg  { background: #eef2f8; }
.tp-light    .tp-card{ background: #ffffff; }
.tp-light    .tp-acc { background: #1053a4; }
.tp-hospital .tp-bg  { background: #0a0d12; }
.tp-hospital .tp-card{ background: #161a22; }
.tp-hospital .tp-acc { background: #5b9eff; }
.tp-carvao   .tp-bg  { background: #161922; }
.tp-carvao   .tp-card{ background: #1e2230; }
.tp-carvao   .tp-acc { background: #4d8df0; }

.tema-opt-meta { flex: 1; min-width: 0; }
.tema-opt-name {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 600; color: var(--text-main);
}
.tema-opt-tag {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--accent-color);
    background: var(--accent-tint2); padding: 1px 7px; border-radius: 8px;
}
.tema-opt-default {
    font-size: 0.6rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted);
    padding: 1px 6px; border-radius: 8px; border: 1px solid var(--border-color);
}
.tema-opt-desc {
    display: block; font-size: 0.72rem; color: var(--text-muted);
    margin-top: 2px; line-height: 1.3;
}
.tema-opt-check { color: var(--accent-color); font-size: 0.85rem; flex-shrink: 0; opacity: 0; }
.tema-opt.selected .tema-opt-check { opacity: 1; }