/*==========================================================
  TABERNA IOSEPHI - IOSEPHILE
  Leitor unico de obras, de pagina unica.
==========================================================*/

body.ipad-aberto {
    overflow:hidden;
}

/* Objeto fisico sobre a mesa. */
.hotspot-ipad {
    z-index:1002;
}

.hotspot-ipad .ipad-objeto {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    padding:1.5%;
    box-sizing:border-box;
    pointer-events:none;
    filter:drop-shadow(0 5px 5px rgba(20,9,3,.55));
    transition:transform .22s ease, filter .22s ease;
}

.hotspot-ipad:hover .ipad-objeto,
.hotspot-ipad:focus-within .ipad-objeto {
    transform:translateY(-2px) scale(1.025);
    filter:drop-shadow(0 7px 7px rgba(20,9,3,.68)) brightness(1.06);
}

/* Overlay. */
#ipadOverlay {
    position:fixed;
    inset:0;
    z-index:17000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:14px;
    overflow:hidden;
    background:rgba(13,9,6,.80);
    backdrop-filter:blur(3px);
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

#ipadOverlay.aberto {
    display:flex;
}

/* O palco tem o tamanho visual real do aparelho transformado.
   Por isso, no landscape, a rolagem ja existe em 100%. */
.ipad-palco {
    position:relative;
    flex:0 0 auto;
    min-width:0;
    min-height:0;
    margin:0 auto;
}

.ipad-palco > .ipad-aparelho {
    position:absolute;
    left:0;
    top:0;
    margin:0;
    transform-origin:top left;
}

.ipad-aparelho {
    box-sizing:border-box;
    width:520px;
    height:752px;
    min-width:0;
    min-height:0;
    max-width:none;
    max-height:none;
    padding:30px 24px 58px;
    overflow:hidden;
    border:4px solid #111;
    border-radius:34px;
    background:linear-gradient(145deg,#171717,#030303 58%,#202020);
    box-shadow:0 28px 80px rgba(0,0,0,.72), inset 0 0 0 2px #333;
    animation:iosephileAcordar .34s ease-out;
}

.iosephile-marca {
    position:absolute;
    left:50%;
    top:8px;
    transform:translateX(-50%);
    color:#8b8b8b;
    font:600 9px/1 Arial,sans-serif;
    letter-spacing:.22em;
    text-shadow:0 1px 1px #000;
    pointer-events:none;
    user-select:none;
}

.ipad-tela {
    box-sizing:border-box;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    overflow:hidden;
    border:1px solid #303030;
    background:
        repeating-linear-gradient(0deg,rgba(65,45,24,.025) 0 1px,transparent 1px 5px),
        #ead8ac;
    color:#382515;
    box-shadow:inset 0 0 28px rgba(80,48,20,.12);
    aspect-ratio:210 / 297;
}

.ipad-ficha,
.ipad-leitura,
.ipad-obras {
    box-sizing:border-box;
    width:100%;
    height:100%;
    min-height:0;
    max-height:100%;
    overflow:auto;
    padding:22px 20px 30px;
    scrollbar-width:thin;
    scrollbar-color:#8b6336 transparent;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:auto;
    touch-action:pan-y;
}

.ipad-ficha[hidden],
.ipad-leitura[hidden],
.ipad-obras[hidden] {
    display:none !important;
}

/* Ficha. */
.ipad-cabecalho {
    text-align:center;
}

#ipadSelo {
    display:inline-block;
    padding:4px 9px;
    border:1px solid rgba(100,44,23,.55);
    border-radius:3px;
    color:#6c2f1d;
    font-size:.72rem;
    font-weight:bold;
    letter-spacing:.08em;
}

.ipad-cabecalho h2 {
    margin:14px 0 18px;
    font:normal clamp(1.7rem,6vw,2.5rem)/1.08 Georgia,"Times New Roman",serif;
}

.ipad-dados {
    margin:0 0 20px;
    border:1px solid rgba(74,45,21,.42);
}

.ipad-dados div {
    display:grid;
    grid-template-columns:38% 62%;
    border-bottom:1px solid rgba(74,45,21,.30);
}

.ipad-dados div:last-child {
    border-bottom:0;
}

.ipad-dados dt,
.ipad-dados dd {
    margin:0;
    padding:8px 10px;
}

.ipad-dados dt {
    border-right:1px solid rgba(74,45,21,.30);
    font-size:.72rem;
    font-weight:bold;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.ipad-dados dd {
    font-size:.88rem;
}

.ipad-resumo {
    margin:0;
    font:1rem/1.55 Georgia,"Times New Roman",serif;
    text-align:justify;
    white-space:pre-line;
}

/* Catalogo. */
.ipad-obras-cabecalho {
    margin-bottom:14px;
    text-align:center;
}

.ipad-obras-cabecalho h2 {
    margin:0 0 5px;
    font:normal 1.65rem/1.1 Georgia,"Times New Roman",serif;
}

.ipad-obras-cabecalho p {
    margin:0;
    font:.84rem/1.35 Arial,sans-serif;
    color:#6a5038;
}

.ipad-lista-obras {
    display:grid;
    gap:7px;
}

.ipad-item-obra {
    width:100%;
    padding:10px 12px;
    border:1px solid rgba(74,45,21,.34);
    border-radius:4px;
    background:rgba(255,249,224,.28);
    color:#382515;
    text-align:left;
    cursor:pointer;
}

.ipad-item-obra:hover,
.ipad-item-obra:focus-visible {
    background:rgba(139,99,54,.16);
    outline:2px solid rgba(92,56,26,.45);
    outline-offset:1px;
}

.ipad-item-obra strong,
.ipad-item-obra span {
    display:block;
}

.ipad-item-obra strong {
    font:700 .93rem/1.25 Georgia,"Times New Roman",serif;
}

.ipad-item-obra span {
    margin-top:3px;
    font:.7rem/1.2 Arial,sans-serif;
    color:#76583b;
}

/* Leitura: sempre uma pagina. */
.ipad-leitura {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:14px;
    text-align:center;
    touch-action:pan-y;
}

.ipad-pagina-area {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
}

.ipad-pagina-canvas {
    display:block;
    max-width:100%;
    max-height:100%;
    margin:0 auto;
    background:#fff;
    box-shadow:0 3px 12px rgba(0,0,0,.24);
    user-select:none;
}

.ipad-leitura-estado {
    position:absolute;
    left:50%;
    top:50%;
    z-index:2;
    transform:translate(-50%,-50%);
    margin:0;
    padding:8px 12px;
    border-radius:4px;
    background:rgba(234,216,172,.94);
    color:#382515;
    font:.82rem/1.25 Arial,sans-serif;
    white-space:nowrap;
    pointer-events:none;
}

.ipad-leitura-estado[hidden] {
    display:none !important;
}


/* Busca textual dentro do PDF. */
.ipad-tela {
    position:relative;
}

.ipad-busca {
    position:absolute;
    z-index:20;
    left:10px;
    right:10px;
    top:10px;
    box-sizing:border-box;
    padding:9px 10px 8px;
    border:1px solid rgba(66,43,20,.55);
    border-radius:6px;
    background:rgba(247,236,203,.97);
    box-shadow:0 5px 18px rgba(48,31,15,.28);
    color:#382515;
    text-align:left;
}

.ipad-busca[hidden] {
    display:none !important;
}

.ipad-busca > label {
    display:block;
    margin:0 0 5px;
    font:700 .74rem/1.1 Arial,sans-serif;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.ipad-busca-linha {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:5px;
}

.ipad-busca input,
.ipad-busca button {
    box-sizing:border-box;
    min-height:32px;
    border:1px solid rgba(70,45,21,.55);
    border-radius:4px;
    font:.82rem Arial,sans-serif;
}

.ipad-busca input {
    min-width:0;
    padding:5px 7px;
    background:#fffdf5;
    color:#2f2115;
}

.ipad-busca button {
    padding:5px 9px;
    background:#6f4d2b;
    color:#fff8e7;
    cursor:pointer;
}

.ipad-busca .ipad-busca-fechar {
    width:32px;
    padding:0;
    font-size:1.15rem;
    line-height:1;
}

#ipadBuscaEstado {
    display:block;
    min-height:1.15em;
    margin-top:5px;
    font:.70rem/1.15 Arial,sans-serif;
    color:#5f432a;
}

/* A pagina continua sendo um canvas, mas recebe uma camada transparente
   por cima para preservar os links existentes no proprio PDF. */
.ipad-pagina-container {
    position:relative;
    display:inline-block;
    flex:0 0 auto;
    line-height:0;
}

.ipad-pdf-links {
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
}

.ipad-pdf-link {
    position:absolute;
    display:block;
    box-sizing:border-box;
    pointer-events:auto;
    cursor:pointer;
    background:transparent;
    border:1px solid transparent;
    border-radius:2px;
}

.ipad-pdf-link:hover,
.ipad-pdf-link:focus-visible {
    background:rgba(164,122,54,.10);
    border-color:rgba(118,79,31,.35);
    outline:1px solid rgba(118,79,31,.45);
    outline-offset:0;
}

/* Teclas no suporte inferior. */
.ipad-controles {
    --tecla-ipad:42px;
    position:absolute;
    left:12px;
    right:12px;
    bottom:8px;
    height:50px;
    display:grid;
    grid-template-columns:repeat(6,var(--tecla-ipad));
    justify-content:center;
    align-items:end;
    gap:7px;
    overflow:visible;
    color:#d6d6d6;
    touch-action:manipulation;
}

.ipad-controles .tecla-icone {
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--tecla-ipad);
    min-width:var(--tecla-ipad);
    height:var(--tecla-ipad);
    min-height:var(--tecla-ipad);
    margin:0;
    padding:0;
    border:1px solid #5f5f5f;
    border-radius:6px;
    background:linear-gradient(#343434,#1d1d1d);
    color:#f2f2f2;
    text-decoration:none;
    cursor:pointer;
    touch-action:manipulation;
}

.ipad-controles .tecla-icone:hover,
.ipad-controles .tecla-icone:focus-visible {
    background:linear-gradient(#494949,#282828);
    outline:2px solid #d8c59a;
    outline-offset:2px;
}

.ipad-controles .tecla-icone:disabled,
.ipad-controles .tecla-icone[aria-disabled="true"] {
    opacity:.34;
    cursor:default;
    pointer-events:none;
}

.ipad-controles .icone-tecla {
    display:block;
    width:27px;
    height:27px;
}

#ipadPosicao {
    position:absolute;
    left:50%;
    bottom:47px;
    transform:translateX(-50%);
    min-width:0;
    color:#d6d6d6;
    font:.70rem Arial,sans-serif;
    text-align:center;
    white-space:nowrap;
    pointer-events:none;
}

/* Portrait: objeto inteiro. */
#ipadOverlay.ipad-portrait-fit {
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:10px;
}

/* Landscape touch: prioridade para largura/leitura.
   A altura pode exceder a viewport; o proprio overlay rola. */
#ipadOverlay.ipad-landscape-leitura {
    align-items:flex-start;
    justify-content:center;
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px 10px 86px;
}

#ipadOverlay.ipad-landscape-leitura .ipad-palco {
    margin:0 auto 26px;
}

#ipadOverlay.ipad-landscape-leitura .ipad-ficha,
#ipadOverlay.ipad-landscape-leitura .ipad-obras {
    overscroll-behavior:auto;
}

@media (max-width:360px) {
    .ipad-controles {
        --tecla-ipad:38px;
        gap:5px;
    }

    .ipad-controles .icone-tecla {
        width:24px;
        height:24px;
    }
}

@keyframes iosephileAcordar {
    0% { opacity:.15; filter:brightness(.12); }
    45% { opacity:1; filter:brightness(.55); }
    100% { opacity:1; filter:brightness(1); }
}