/* ==========================================================================
   E-tick — identidade do viewer (todos os tours)
   Fonte da verdade: ../../DESIGN.md. Entra pelo gancho viewer/header/custom.php.
   Carregado após index.css e ANTES do <style> gerado pelo JSON
   de UI do tour; por isso as propriedades de cor levam !important.
   ========================================================================== */

:root {
    --et-ink: #08121F;
    --et-ink-glass: rgba(8, 18, 31, .78);
    --et-ink-glass-strong: rgba(8, 18, 31, .9);

    --et-primary: #0B5394;
    --et-primary-strong: #083E70;
    --et-primary-soft: rgba(11, 83, 148, .10);
    --et-primary-on-dark: #6FB0EA;

    --et-accent: #F2A413;
    --et-accent-text: #8A5703;

    --et-surface: #FFFFFF;
    --et-surface-sunken: #F3F6F8;
    --et-border: #E3E9EF;
    --et-text: #0F1E33;
    --et-text-muted: #5A6B82;
    --et-on-ink: #FFFFFF;
    --et-on-ink-muted: rgba(255, 255, 255, .72);

    --et-radius-sm: 8px;
    --et-radius-md: 12px;
    --et-radius-pill: 999px;

    --et-shadow-sm: 0 1px 2px rgba(8, 18, 31, .18);
    --et-shadow-md: 0 4px 12px rgba(8, 18, 31, .22), 0 1px 3px rgba(8, 18, 31, .12);
    --et-shadow-lg: 0 16px 40px rgba(8, 18, 31, .32);

    --et-ease: cubic-bezier(.2, .7, .3, 1);
    --et-dur: 180ms;
    --et-text-shadow: 0 1px 2px rgba(8, 18, 31, .55);
}

/* --------------------------------------------------------------------------
   1. Botões de controle (rodapé e barra de setas)
   -------------------------------------------------------------------------- */
.controls_btn,
.ms_control {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    box-shadow: var(--et-shadow-sm);
    transition: transform var(--et-dur) var(--et-ease),
                background-color var(--et-dur) var(--et-ease),
                color var(--et-dur) var(--et-ease),
                box-shadow var(--et-dur) var(--et-ease),
                opacity var(--et-dur) var(--et-ease);
}
.controls_btn:not(.whatsapp_control):not(.facebook_control),
.ms_control:not(.whatsapp_control):not(.facebook_control) {
    background-color: var(--et-ink-glass) !important;
    color: var(--et-on-ink) !important;
}
.controls_btn:not(.whatsapp_control):not(.facebook_control):hover,
.ms_control:not(.whatsapp_control):not(.facebook_control):hover {
    background-color: var(--et-primary) !important;
    color: var(--et-on-ink) !important;
    transform: translateY(-1px);
    box-shadow: var(--et-shadow-md);
}
.controls_btn:not(.whatsapp_control):not(.facebook_control).active_control,
.ms_control:not(.whatsapp_control):not(.facebook_control).active_control {
    background-color: var(--et-ink-glass-strong) !important;
    color: var(--et-accent) !important;
}
.controls_btn:focus-visible,
.ms_control:focus-visible,
.controls_arrows i:focus-visible {
    outline: 2px solid var(--et-accent);
    outline-offset: 2px;
}

.controls_arrows {
    height: 36px;
    border-radius: var(--et-radius-pill);
    background-color: var(--et-ink-glass) !important;
    color: var(--et-on-ink) !important;
    box-shadow: var(--et-shadow-sm);
}
.controls_arrows i {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: var(--et-radius-pill);
    font-size: 15px;
    color: var(--et-on-ink) !important;
    transition: background-color var(--et-dur) var(--et-ease), color var(--et-dur) var(--et-ease);
}
.controls_arrows i:hover {
    background-color: var(--et-primary) !important;
}
.list_control_alt,
.arrows_nav .prev_arrow,
.arrows_nav .next_arrow,
.list_slider .list_left,
.list_slider .list_right,
.list_slider .pointer_list_back i {
    background-color: var(--et-ink-glass) !important;
    color: var(--et-on-ink) !important;
}
.list_control_alt:hover,
.arrows_nav .prev_arrow:hover,
.arrows_nav .next_arrow:hover {
    background-color: var(--et-primary) !important;
}

/* --------------------------------------------------------------------------
   2. Cabeçalho: nome do tour, categoria, ambiente
   -------------------------------------------------------------------------- */
.header_vt,
.header_vt_vr {
    text-shadow: var(--et-text-shadow);
}
.name_vt {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding-top: 8px;
}
.category_room_vt {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .85;
}
.room_vt {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Ícones do topo (menu, lista, áudio, mapa, planta, tela cheia) */
.song_control,
.map_control,
.map_tour_control,
.fullscreen_control,
.menu_controls .title i,
.list_alt_menu .title i,
.list_bookmarks_menu .title i {
    color: var(--et-on-ink) !important;
    filter: drop-shadow(0 1px 2px rgba(8, 18, 31, .6));
    transition: color var(--et-dur) var(--et-ease), transform var(--et-dur) var(--et-ease);
}
.song_control:hover,
.map_control:hover,
.map_tour_control:hover,
.fullscreen_control:hover,
.menu_controls .title i:hover,
.list_alt_menu .title i:hover,
.list_bookmarks_menu .title i:hover {
    color: var(--et-accent) !important;
}

/* --------------------------------------------------------------------------
   3. Menus suspensos (menu principal e lista de ambientes)
   -------------------------------------------------------------------------- */
.menu_controls .dropdown,
.list_alt_menu .dropdown,
.list_bookmarks_menu .dropdown {
    background: var(--et-surface) !important;
    color: var(--et-text) !important;
    border-radius: var(--et-radius-md);
    box-shadow: var(--et-shadow-lg);
    padding: 6px 0;
}
.menu_controls .arrow,
.list_alt_menu .arrow,
.list_bookmarks_menu .arrow {
    border-bottom-color: var(--et-surface) !important;
}
.menu_controls p,
.list_alt_menu p,
.list_bookmarks_menu p {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 8px 16px;
    color: var(--et-text) !important;
    transition: background-color var(--et-dur) var(--et-ease), color var(--et-dur) var(--et-ease);
}
.menu_controls p:hover,
.list_alt_menu p:hover,
.list_bookmarks_menu p:hover {
    background-color: var(--et-primary-soft) !important;
    color: var(--et-primary) !important;
}
.menu_controls p i,
.list_alt_menu p i,
.list_bookmarks_menu p i {
    color: var(--et-primary) !important;
}
.menu_controls .active,
.list_alt_menu .active {
    color: var(--et-primary) !important;
}

/* --------------------------------------------------------------------------
   4. Caixa de boas-vindas / anotações
   -------------------------------------------------------------------------- */
.annotation {
    background-color: var(--et-ink-glass) !important;
    color: var(--et-on-ink) !important;
    border-radius: var(--et-radius-md);
    border-left: 3px solid var(--et-accent);
    padding: 12px 14px;
    box-shadow: var(--et-shadow-md);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.annotation_title {
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}
.annotation hr {
    border-top: 1px solid rgba(255, 255, 255, .18) !important;
    color: transparent !important;
}
.annotation_description {
    color: var(--et-on-ink-muted);
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   5. Contador de visitantes e controle de navegação
   -------------------------------------------------------------------------- */
.visitors_rt_stats,
.list_slider .stat_visitors_rt_rooms {
    background-color: var(--et-ink-glass) !important;
    color: var(--et-on-ink) !important;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-radius: var(--et-radius-pill);
    padding: 3px 10px;
    box-shadow: var(--et-shadow-sm);
}
.nav_control {
    background-color: var(--et-ink-glass) !important;
    box-shadow: var(--et-shadow-sm);
}
.nav_control i {
    color: var(--et-on-ink-muted) !important;
    transition: color var(--et-dur) var(--et-ease);
}
.nav_control i:hover {
    color: var(--et-on-ink) !important;
}
.nav_control .nav_rotate.active_rotate {
    color: var(--et-accent) !important;
}

/* --------------------------------------------------------------------------
   6. Mapa interno (planta)
   -------------------------------------------------------------------------- */
.map_bar {
    background-color: var(--et-surface-sunken) !important;
    border-top: 1px solid var(--et-border);
    border-radius: 0 0 var(--et-radius-md) var(--et-radius-md);
    padding: 5px 6px;
}
.map_name {
    color: var(--et-text) !important;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.info_map_btn,
.map_selector_control i,
.map_zoom_plus_control i,
.map_zoom_minus_control i,
.map_zoom_control i,
.map_close_control i {
    color: var(--et-primary) !important;
    transition: color var(--et-dur) var(--et-ease);
}
.map_close_control i:hover,
.map_zoom_plus_control i:hover,
.map_zoom_minus_control i:hover,
.map_zoom_control i:hover,
.map_selector_control i:hover {
    color: var(--et-primary-strong) !important;
}

/* --------------------------------------------------------------------------
   7. Tooltip de hotspot e tira de miniaturas
   -------------------------------------------------------------------------- */
.tooltip_text,
.tooltip_text_embed,
.tooltip_text_embed_m {
    background-color: var(--et-surface) !important;
    color: var(--et-text) !important;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--et-radius-sm);
    box-shadow: var(--et-shadow-md);
    padding: 6px 10px;
}
.list_slider .slidee li.active,
.list_slider .slidee_cat li.active {
    box-shadow: 0 0 0 2px var(--et-accent) !important;
}

/* --------------------------------------------------------------------------
   8. Menu lateral, "powered by", carregamento
   -------------------------------------------------------------------------- */
#menu_sidebar,
#menu_sidebar #ms_close {
    background: var(--et-ink-glass-strong) !important;
    color: var(--et-on-ink);
}
#menu_sidebar a {
    color: var(--et-primary-on-dark);
}
.poweredby span {
    color: var(--et-on-ink-muted) !important;
    text-shadow: var(--et-text-shadow);
}
#loading_pano {
    color: var(--et-accent);
}

/* --------------------------------------------------------------------------
   9. Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .controls_btn, .ms_control, .controls_arrows i, .song_control, .map_control,
    .map_tour_control, .fullscreen_control, .menu_controls p, .list_alt_menu p,
    .nav_control i, .map_close_control i {
        transition: none !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   10. Imagem de introdução ("clique e arraste")
   O produto limita a 400 px; as nossas são 1600×1200 com texto de apoio, e a
   520 px o menor texto fica com 13 px.
   -------------------------------------------------------------------------- */
.intro_img img {
    max-width: 520px;
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   11. Caixa de informação institucional (#info_panel_div, tipo "panel")
   O painel do produto é branco, 360px, encostado à esquerda. Aqui ele vira um
   cartão com cabeçalho em tinta, no mesmo tom da identidade.
   -------------------------------------------------------------------------- */
.et-ib {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    font-size: .875rem;
    color: var(--et-text);
}
.et-ib .et-ib__head {
    background:
        radial-gradient(circle at 20% -10%, rgba(11, 83, 148, .55), rgba(11, 83, 148, 0) 60%),
        var(--et-ink);
    color: var(--et-on-ink);
    padding: 1.75rem 1.25rem 1.5rem;
}
.et-ib .et-ib__eyebrow {
    display: block;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--et-accent);
    margin-bottom: .5rem;
}
.et-ib .et-ib__title {
    margin: 0 0 .25rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #fff;
}
.et-ib .et-ib__sub {
    margin: 0 0 .875rem;
    font-size: .8125rem;
    color: var(--et-on-ink-muted);
}
.et-ib .et-ib__badge {
    display: inline-block;
    padding: .3rem .625rem;
    border-radius: var(--et-radius-pill);
    border: 1px solid rgba(242, 164, 19, .45);
    background: rgba(242, 164, 19, .12);
    color: var(--et-accent);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.et-ib .et-ib__body {
    flex: 1 1 auto;
    padding: 1.25rem;
}
.et-ib .et-ib__h3 {
    margin: 0 0 .75rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--et-text-muted);
}
.et-ib .et-ib__h3 + * { margin-top: 0; }
.et-ib .et-ib__mesa,
.et-ib .et-ib__kv {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: .75rem;
}
.et-ib .et-ib__mesa li {
    display: grid;
    gap: .1rem;
    padding-left: .75rem;
    border-left: 2px solid var(--et-border);
}
.et-ib .et-ib__mesa li:first-child {
    border-left-color: var(--et-accent);
}
.et-ib .et-ib__mesa b {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--et-text-muted);
}
.et-ib .et-ib__mesa span {
    font-weight: 600;
    line-height: 1.35;
}
.et-ib .et-ib__kv li {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    line-height: 1.45;
}
.et-ib .et-ib__kv i {
    flex: 0 0 1.1rem;
    margin-top: .2rem;
    text-align: center;
    color: var(--et-primary);
}
.et-ib .et-ib__kv a { color: var(--et-primary); font-weight: 600; }
.et-ib .et-ib__foot {
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--et-border);
    background: var(--et-surface-sunken);
    font-size: .6875rem;
    color: var(--et-text-muted);
}
/* O produto envolve a caixa em .info_panel_content, de altura automática, então
   a folha do cartão não estica até o pé do painel. Em vez de forçar o layout
   do produto, o fundo do painel recebe o mesmo tom do rodapé do cartão. */
#info_panel_div {
    background-color: var(--et-surface-sunken) !important;
}
.et-ib .et-ib__body {
    background: var(--et-surface);
}

/* --------------------------------------------------------------------------
   12. Celular
   O produto encolhe o tour como se o painel de informação fosse uma faixa de
   280px no topo, mas desenha o painel como uma coluna de 360px e altura cheia.
   Em telas estreitas o cartão fica cortado. Aqui ele vira uma tela inteira,
   que é o padrão de folha de detalhe no celular.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    #info_panel_div {
        width: 100% !important;
        height: 100% !important;
        left: -100%;
    }

    /* O nome do tour tem largura fixa de 40% no produto e quebra em três
       linhas num celular. */
    .name_vt,
    .room_vt,
    .category_room_vt {
        width: 82%;
        min-width: 0;
    }
    .name_vt { font-size: .8125rem; }
    .room_vt { font-size: .6875rem; }

    /* A caixa de boas-vindas ocupava quase metade da tela. */
    .annotation {
        max-width: 58vw;
        padding: 10px 12px;
        font-size: .8125rem;
    }
    .annotation_title { font-size: .875rem; }
    .annotation_description { font-size: .75rem; }
}