/*
 * modern-ui.css - visual refresh layer for the html5full skin.
 *
 * Loaded LAST in head.jsp so it overrides the legacy skin styles without
 * editing them. Purely cosmetic: no layout math, no behavior. Every rule
 * targets chrome the reader sees (zoom overlay, modal popups, toasts,
 * toolbar micro-interactions) and preserves the existing DOM and JS hooks
 * (.zoomless / .zoommore / .closeicon / #modalBox stay untouched).
 *
 * Palette is intentionally neutral (near-black glass + soft neutrals) so it
 * blends with every tenant skin instead of imposing a brand color.
 */

/* ============================================================
 * 1. Zoom overlay control (shown while a page is zoomed in)
 * Replaces the old amateur PNG bar with a floating glass pill.
 * ============================================================ */
.zoomtools {
    position: fixed !important;
    top: auto !important;
    bottom: 28px !important;
    left: 0;
    right: 0;
    width: 100%;
    height: auto !important;
    cursor: default !important;
    pointer-events: none; /* let clicks pass except on the pill itself */
}

.zoomtools > div {
    width: auto !important;
    max-width: -webkit-max-content;
    max-width: max-content;
    height: auto !important;
    margin: 0 auto !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    padding: 6px !important;
    line-height: normal !important;
    pointer-events: auto;
    background: rgba(24, 26, 30, 0.72) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 999px !important;
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18);
}

.zoomtools span {
    position: relative;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: background-color 0.15s ease, -webkit-transform 0.1s ease;
    transition: background-color 0.15s ease, -webkit-transform 0.1s ease;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.zoomtools span:hover {
    background: rgba(255, 255, 255, 0.14);
}

.zoomtools span:active {
    -webkit-transform: scale(0.92);
    transform: scale(0.92);
}

.zoomtools span img {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.92;
}

.zoomtools span:hover img {
    opacity: 1;
}

/* thin divider separating the close action from the zoom actions */
.zoomtools .closeicon {
    margin-left: 2px !important;
}

.zoomtools .closeicon::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.16);
}

/* ============================================================
 * 2. "ESC para fechar" hint - modern toast pill
 * ============================================================ */
.esc {
    position: fixed !important;
    top: auto !important;
    bottom: 84px !important;
}

.esc > div {
    width: auto !important;
    max-width: -webkit-max-content;
    max-width: max-content;
    height: auto !important;
    margin: 0 auto !important;
    padding: 8px 18px !important;
    line-height: 1.2 !important;
    font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    letter-spacing: 0.02em;
    background: rgba(24, 26, 30, 0.78) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px !important;
    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* ============================================================
 * 3. Modal popups (#modalBox) - kill the 2000s shadow-sprite
 * frame and render a clean, rounded, elevated card instead.
 * Behavior and inner content are untouched.
 * ============================================================ */

/* neutralize the legacy corner/surface sprite decorations */
#modalBox #modalBoxBody div[class^="modalboxStyleContainer_corner_"],
#modalBox #modalBoxBody div[class^="modalboxStyleContainer_surface_"] {
    background-image: none !important;
}

#modalBox #modalBoxBody {
    padding: 0 !important;
}

#modalBox .modalBoxBodyContent {
    -webkit-border-radius: 16px;
    border-radius: 16px;
    overflow: hidden;
    -webkit-box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32), 0 4px 14px rgba(0, 0, 0, 0.16);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32), 0 4px 14px rgba(0, 0, 0, 0.16);
}

/* image galleries keep flush edges but still get rounded corners */
#modalBox.modalBoxBodyContentImageContainer .modalBoxBodyContent {
    border-radius: 14px;
}

/* modern circular close button: dark X svg centered on a soft circle.
 * Uses a real SVG background (reliable across this legacy stack) instead of
 * pseudo-elements, and hides the legacy sprite/text span. */
#modalBox #modalBoxCloseButton {
    top: 12px !important;
    right: 12px !important;
    z-index: 2147483000;
}

#modalBox #modalBoxCloseButton a.closeModalBox {
    width: 34px !important;
    height: 34px !important;
    background: rgba(15, 18, 22, 0.07) url(../pics/close-dark.svg) center center no-repeat !important;
    background-size: 15px 15px !important;
    border-radius: 50%;
    position: relative;
    -webkit-transition: background-color 0.15s ease;
    transition: background-color 0.15s ease;
}

#modalBox #modalBoxCloseButton a.closeModalBox:hover {
    background-color: rgba(15, 18, 22, 0.14) !important;
}

#modalBox #modalBoxCloseButton a.closeModalBox span {
    display: none;
}

/* softer, blurred backdrop behind popups */
#modalBoxFaderLayer {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* modern form controls INSIDE popups only (search / contact / recommend).
 * height:auto is required: legacy .CampoTexto/.BotaoBranco fix height to 25px,
 * which combined with vertical padding on border-box cramps and vertically
 * off-centers the content. */
#modalBox input[type="text"],
#modalBox input[type="email"],
#modalBox input[type="password"],
#modalBox textarea,
#modalBox select {
    border: 1px solid #d9dce0;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: auto;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.3;
    outline: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#modalBox input[type="text"]:focus,
#modalBox input[type="email"]:focus,
#modalBox input[type="password"]:focus,
#modalBox textarea:focus,
#modalBox select:focus {
    border-color: #7aa7f0;
    -webkit-box-shadow: 0 0 0 3px rgba(122, 167, 240, 0.28);
    box-shadow: 0 0 0 3px rgba(122, 167, 240, 0.28);
}

/* Buttons: single-line labels centered via line-height == box height with
 * zero vertical padding. This reliably vertically centers the value text of an
 * <input type="button">, which ignores flexbox and honors line-height. */
#modalBox input[type="button"],
#modalBox input[type="submit"],
#modalBox button,
#modalBox .BotaoBranco {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: auto;
    min-height: 0;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background: #f4f5f7;
    color: #1f2328;
    border: 1px solid #d7dade;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background-color 0.15s ease, -webkit-transform 0.08s ease;
    transition: background-color 0.15s ease, transform 0.08s ease;
}

#modalBox input[type="button"]:hover,
#modalBox input[type="submit"]:hover,
#modalBox button:hover,
#modalBox .BotaoBranco:hover {
    background: #e9ebee;
}

#modalBox input[type="button"]:active,
#modalBox input[type="submit"]:active,
#modalBox button:active,
#modalBox .BotaoBranco:active {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

/* ============================================================
 * 4. Instant-search box - clean floating card
 * ============================================================ */
#searchinstant {
    background: #ffffff;
    border: 1px solid #e6e8eb;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
    padding: 16px 18px;
    font-size: 13px;
    color: #2b2f36;
}

#searchinstant #keywordbody {
    border: 1px solid #d9dce0;
    border-radius: 10px;
    height: auto;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.3;
    outline: none;
    margin: 8px 8px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#searchinstant .BotaoBranco {
    border-radius: 10px;
    height: auto;
    min-height: 0;
    padding: 0 16px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background: #f4f5f7;
    color: #1f2328;
    border: 1px solid #d7dade;
    margin-top: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#searchinstant .BotaoBranco:hover {
    background: #e9ebee;
}

/* ============================================================
 * 5. Subtle micro-interactions on the top toolbar icons
 * (icons themselves are per-skin PNGs; we only add motion)
 * ============================================================ */
#basic-modal span a {
    -webkit-transition: -webkit-transform 0.15s ease, opacity 0.15s ease;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

#basic-modal span a:hover {
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

/* ============================================================
 * 6. Modern, unobtrusive scrollbars for the side panels
 * (editions / index / summary docks and search results)
 * ============================================================ */
.scroll_on::-webkit-scrollbar,
.scrollsection::-webkit-scrollbar,
#edicao_container::-webkit-scrollbar,
.dockindice::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scroll_on::-webkit-scrollbar-thumb,
.scrollsection::-webkit-scrollbar-thumb,
#edicao_container::-webkit-scrollbar-thumb,
.dockindice::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 999px;
}

.scroll_on::-webkit-scrollbar-thumb:hover,
.scrollsection::-webkit-scrollbar-thumb:hover,
#edicao_container::-webkit-scrollbar-thumb:hover,
.dockindice::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

.scroll_on::-webkit-scrollbar-track,
.scrollsection::-webkit-scrollbar-track,
#edicao_container::-webkit-scrollbar-track,
.dockindice::-webkit-scrollbar-track {
    background: transparent;
}

/* ============================================================
 * 7. Reliable close affordance for popups
 * The modalbox plugin binds close via jQuery .live() (removed in
 * jQuery 1.9), so clicks can silently do nothing. modern-ui.js
 * re-binds it defensively; these rules guarantee the close targets
 * stay on top and receive pointer events.
 * ============================================================ */
#modalBox #modalBoxCloseButton,
#modalBox #modalBoxCloseButton a.closeModalBox,
#modalBox .modalboxheader a.closeModalBox {
    z-index: 2147483000;
    pointer-events: auto !important;
    cursor: pointer;
}

/* the popup's own title bar (search / contact / etc.) - modernized to match */
#modalBox .modalboxheader {
    height: auto;
    min-height: 44px;
    line-height: 44px;
    padding: 0 52px 0 20px;
    font-size: 15px;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--mui-line, #ececee);
    text-align: left;
}

/* The popup's own header close link is the real, always-rendered X for these
 * popups (search / recommend / contact). Give it the modern circular style and
 * draw the X with pseudo-elements over the hidden legacy image. It is
 * positioned identically to the plugin's #modalBoxCloseButton (top:12/right:12)
 * so if both ever appear they superimpose into one crisp X instead of the
 * offset double-glyph seen before. */
#modalBox .modalboxheader a.closeModalBox {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    position: absolute;
    top: 12px;
    right: 50px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(15, 18, 22, 0.07) url(../pics/close-dark.svg) center center no-repeat !important;
    background-size: 15px 15px !important;
    -webkit-transition: background-color 0.15s ease;
    transition: background-color 0.15s ease;
}

#modalBox .modalboxheader a.closeModalBox:hover {
    background-color: rgba(15, 18, 22, 0.14) !important;
}

#modalBox .modalboxheader a.closeModalBox img {
    display: none !important;
}

/* ============================================================
 * 8. Side dock panels (abas) - editions / index / pages / notes
 * Modernize the panels the tabs open: soft card, clean header,
 * rounded edition thumbnails with a real hover state.
 * ============================================================ */

/* panel title bar injected as <div id="header"><li class="header">...</li> */
#tab_left #dock li.header {
    list-style: none;
    display: block;
    padding: 14px 18px 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1c1f24;
    border-bottom: 1px solid #ececee;
    line-height: 1.2;
}

/* editions grid */
#edicao_container {
    padding: 14px 12px;
}

#edicao_container .filter_box {
    color: #5b616b;
    font-size: 13px;
    padding: 4px 6px 10px;
}

#edicao_container .filter_box a {
    color: #0077cc;
    text-decoration: none;
    font-weight: 600;
}

#edicao_container .filter_fields .CampoTexto {
    height: auto;
    border: 1px solid #d9dce0;
    border-radius: 8px;
    padding: 7px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#edicao_container .filter_fields .BotaoBranco {
    height: auto;
    min-height: 0;
    border: 1px solid #d7dade;
    border-radius: 8px;
    padding: 0 16px;
    line-height: 34px;
    text-align: center;
    vertical-align: middle;
    background: #f4f5f7;
    color: #1f2328;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background-color 0.15s ease;
    transition: background-color 0.15s ease;
}

#edicao_container .filter_fields .BotaoBranco:hover {
    background: #e9ebee;
}

#edicao_container .box {
    border: 1px solid #e6e7e9;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin: 6px;
    -webkit-transition: box-shadow 0.15s ease, border-color 0.15s ease, -webkit-transform 0.12s ease;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

#edicao_container .box:hover {
    background-color: #fff !important;
    border-color: #cfd2d6;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

#edicao_container #selected {
    background-color: #fff !important;
    border-color: #0077cc !important;
    -webkit-box-shadow: 0 0 0 2px rgba(0, 119, 204, 0.35);
    box-shadow: 0 0 0 2px rgba(0, 119, 204, 0.35);
}

#edicao_container .boxcover img {
    border-radius: 4px;
}

/* index / notes rows get a smoother hover */
.dockindice li,
#item_pesquisa_conteudo {
    -webkit-transition: background-color 0.12s ease;
    transition: background-color 0.12s ease;
}

/* ============================================================
 * 9. Top toolbar icons - centered on the bar, independent of the
 * logo width and the icon count.
 *
 * The legacy layout used per-count .size3..size10 fixed pixel
 * widths plus absolute translate centering INSIDE #top_middle,
 * which starts after the (variable-width) logo - so the row was
 * never truly centered on screen and drifted with the icon set.
 *
 * Fix: absolutely center the icon group against the full-width
 * #top bar (so the logo can grow/shrink with no effect), and lay
 * the icons out with flexbox by their real content width. The
 * group box is only as wide as the icons (width:auto), so it does
 * not cover or block the logo / right-side area.
 * ============================================================ */
#top {
    position: relative;
}

#top #top_middle {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    z-index: 20;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#top #basic-modal {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* each icon is a natural-width flex item; drop the legacy per-size
 * fixed widths and use symmetric margins for spacing (reliable even
 * where flex `gap` is not honored, so the icons never end up glued). */
#top #basic-modal > span {
    width: auto !important;
    margin: 0 14px !important;
    float: none !important;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}