/*
 * LocaliPet — Arquivo de Pistas: prévia dentro do aplicativo.
 *
 * A aparência impressa e o PDF premium são deliberadamente independentes.
 * Não modificar o gerador, a captura de mapa, os dados, as datas nem
 * os cálculos a partir desta folha. Todos os estilos abaixo são screen-only.
 *
 * A arte transparente faz parte da cena do cabeçalho; não é um sticker/card.
 */
@media screen {
  .shell[data-locali-route="pistas"] {
    --clue-ui-deep: #073e43;
    --clue-ui-muted: #496661;
    --clue-ui-border: rgba(255,255,255,.83);
    --clue-ui-glass: linear-gradient(140deg,rgba(255,255,255,.71),rgba(255,255,255,.32) 64%,rgba(255,235,224,.28));
    --clue-ui-shadow: 0 9px 30px rgba(7,62,67,.075), inset 0 1px 0 rgba(255,255,255,.86);
  }

  /* The menu keeps Painel selected, but its dedicated route stops inheriting
     the Diário hero. Clue PWA content scrolls normally, unlike full-screen map. */
  .shell[data-locali-route="pistas"] .clue-report {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--clue-ui-deep);
    font-family: Nunito,ui-sans-serif,system-ui,sans-serif;
  }
  .shell[data-locali-route="pistas"] .clue-report::after,
  .shell[data-locali-route="pistas"] .clue-brand-strip {
    display: none;
  }

  /* One continuous storybook scene: meadow + character, without a rectangle
     around the picture. Text has its own quiet area above the artwork. */
  .shell[data-locali-route="pistas"] .clue-masthead {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 286px;
    margin: 0;
    padding: 22px 24px 190px;
    overflow: hidden;
    text-align: left;
    border: 0;
    border-radius: 29px;
    background: linear-gradient(150deg,rgba(232,251,243,.93),rgba(237,248,237,.68) 62%,rgba(255,240,228,.77));
  }
  .shell[data-locali-route="pistas"] .clue-masthead::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
      radial-gradient(ellipse 52% 55% at 7% 79%,rgba(147,205,170,.35),transparent 97%),
      radial-gradient(ellipse 60% 43% at 88% 90%,rgba(246,209,176,.28),transparent 100%);
    pointer-events: none;
  }
  .shell[data-locali-route="pistas"] .clue-masthead::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 -21px;
    width: auto;
    height: 234px;
    display: block;
    pointer-events: none;
    background: url('/pet-scene-explore.webp') center bottom / auto 256px no-repeat;
    opacity: .98;
    -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 15%,#000 84%,transparent 100%);
    mask-image: linear-gradient(to bottom,transparent 0%,#000 15%,#000 84%,transparent 100%);
  }
  .shell[data-locali-route="pistas"] .clue-kicker {
    position: relative;
    z-index: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    transform: none;
    color: #4e8078;
    background: none;
    font: 900 10px/1.45 Nunito,sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .shell[data-locali-route="pistas"] .clue-headline {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 470px !important;
    margin: 11px 0 6px !important;
    font: 900 clamp(29px,6.4vw,45px)/1.04 Nunito,ui-sans-serif,system-ui,sans-serif !important;
    color: var(--clue-ui-deep) !important;
    letter-spacing: -.047em;
    text-align: left;
    text-wrap: balance;
  }
  .shell[data-locali-route="pistas"] .clue-subhead {
    position: relative;
    z-index: 1;
    max-width: 310px;
    margin: 0;
    color: var(--clue-ui-muted);
    text-align: left;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
  }

  /* Only actual controls: selected period and PDF download. The removed theme
     selector only recolored this HTML and did not affect the generated PDF. */
  .shell[data-locali-route="pistas"] .clue-toolbar {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(140px,1fr);
    gap: 10px;
    align-items: end;
    justify-content: stretch;
    margin: 0;
    padding: 2px 0 0;
  }
  .shell[data-locali-route="pistas"] .clue-control {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: #4d7167;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.3;
  }
  .shell[data-locali-route="pistas"] .clue-period {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 45px;
    padding: 10px 35px 10px 14px;
    border: 1px solid rgba(7,62,67,.13);
    border-radius: 17px;
    color: var(--clue-ui-deep);
    background: rgba(255,255,255,.74);
    font: 850 13px/1.25 Nunito,sans-serif;
    box-shadow: 0 2px 9px rgba(7,62,67,.035);
  }
  .shell[data-locali-route="pistas"] .clue-toolbar .clue-print {
    width: 100%;
    min-height: 45px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 999px;
    font: 900 13px/1.2 Nunito,sans-serif;
  }
  .shell[data-locali-route="pistas"] .clue-control select:focus-visible,
  .shell[data-locali-route="pistas"] .clue-toolbar .clue-print:focus-visible {
    outline: 3px solid #168c86;
    outline-offset: 2px;
  }

  /* Glass data surfaces belong to the new LocaliPet identity, not to a
     newspaper/wanted-poster theme. Keep dynamic data and photo intact. */
  .shell[data-locali-route="pistas"] .clue-top-grid {
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    align-items: stretch;
    gap: 13px;
  }
  .shell[data-locali-route="pistas"] .clue-top-story,
  .shell[data-locali-route="pistas"] .clue-paper {
    min-width: 0;
    border: 1px solid var(--clue-ui-border);
    border-radius: 25px;
    background: var(--clue-ui-glass);
    box-shadow: var(--clue-ui-shadow);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
  .shell[data-locali-route="pistas"] .clue-top-story {
    grid-template-columns: 106px minmax(0,1fr);
    gap: 14px;
    padding: 17px;
    align-items: center;
  }
  .shell[data-locali-route="pistas"] .clue-portrait {
    width: 104px;
    height: 104px;
    aspect-ratio: 1;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transform: none;
    border: 1px solid rgba(255,255,255,.9);
    outline: none;
    border-radius: 22px;
    background: #e6f3e9;
    box-shadow: none;
  }
  .shell[data-locali-route="pistas"] .clue-portrait img {width:100%;height:100%;object-fit:cover;border-radius:20px}
  .shell[data-locali-route="pistas"] .clue-wanted-name {display:none}
  .shell[data-locali-route="pistas"] .clue-stamp {
    padding: 0;
    border: 0;
    background: none;
    color: #618e82;
    border-radius: 0;
    transform: none;
    font: 900 9px/1.4 Nunito,sans-serif;
    letter-spacing: .09em;
  }
  .shell[data-locali-route="pistas"] .clue-top-story .clue-pet-name {
    margin: 6px 0 7px;
    color: var(--clue-ui-deep);
    font: 900 clamp(19px,4.9vw,27px)/1.07 Nunito,sans-serif !important;
    text-transform: none;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
  }
  .shell[data-locali-route="pistas"] .clue-hero-description {
    margin: 0;
    color: var(--clue-ui-muted);
    font: 650 12px/1.55 Nunito,sans-serif;
  }
  .shell[data-locali-route="pistas"] .clue-paper {padding:17px}
  .shell[data-locali-route="pistas"] .clue-paper h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 13px;
    color: var(--clue-ui-deep);
    font: 900 clamp(17px,4.2vw,22px)/1.2 Nunito,sans-serif;
    letter-spacing: -.025em;
  }
  .shell[data-locali-route="pistas"] .clue-profile-name {display:none}
  .shell[data-locali-route="pistas"] .clue-metrics {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .shell[data-locali-route="pistas"] .clue-metric {
    gap: 8px;
    padding: 12px;
    min-height: 78px;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 17px;
    background: rgba(228,248,237,.46);
  }
  .shell[data-locali-route="pistas"] .clue-metric:nth-child(2n) {
    background: rgba(255,237,218,.42);
  }
  .shell[data-locali-route="pistas"] .clue-metric small {
    color: #55746d;
    opacity: 1;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.36;
  }
  .shell[data-locali-route="pistas"] .clue-metric strong {
    color: var(--clue-ui-deep);
    font-size: clamp(13px,2vw,18px);
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  /* Real MapLibre map is the evidence: no illustration inside map tiles,
     fake trajectories, substituted map graphics, or overlapping hero. */
  .shell[data-locali-route="pistas"] .clue-dossier-grid {
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
    gap: 13px;
    margin: 0;
    align-items: start;
  }
  .shell[data-locali-route="pistas"] .clue-map-section,
  .shell[data-locali-route="pistas"] .clue-timeline {
    min-width: 0;
    overflow: hidden;
  }
  .shell[data-locali-route="pistas"] .clue-map {
    width: 100%;
    height: clamp(315px,41vw,455px);
    min-height: 315px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(188,212,199,.8);
    border-radius: 19px;
    background: #e4efe9;
    box-shadow: inset 0 1px 5px rgba(7,62,67,.035);
    overflow: hidden;
  }
  .shell[data-locali-route="pistas"] .clue-map :is(.maplibregl-map,.maplibregl-canvas-container,.maplibregl-canvas) {
    max-width: 100%;
  }
  .shell[data-locali-route="pistas"] .clue-map-status,
  .shell[data-locali-route="pistas"] .clue-map-caption {
    margin: 9px 1px 0;
    color: #52756e;
    font-size: 11px;
    line-height: 1.5;
  }
  .shell[data-locali-route="pistas"] .clue-map-status:empty {display:none}
  .shell[data-locali-route="pistas"] .clue-timeline {background:var(--clue-ui-glass)}
  .shell[data-locali-route="pistas"] .clue-evidence {
    position: relative;
    min-height: 0;
    margin: 0 0 0 11px;
    padding: 15px 3px 16px 23px;
    border: 0;
    border-left: 2px dashed #a9d5c5;
    border-radius: 0;
    background: transparent;
    animation: none;
    transform: none;
  }
  .shell[data-locali-route="pistas"] .clue-evidence:last-child {padding-bottom:3px}
  .shell[data-locali-route="pistas"] .clue-evidence::before {
    content: "🐾";
    position: absolute;
    left: -16px;
    top: 13px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255,255,255,.89);
    border-radius: 50%;
    background: #d5f3e5;
    font-size: 14px;
    box-shadow: none;
  }
  .shell[data-locali-route="pistas"] .clue-evidence--stop::before {background:#fff0d7}
  .shell[data-locali-route="pistas"] .clue-evidence::after {display:none}
  .shell[data-locali-route="pistas"] .clue-number {display:none}
  .shell[data-locali-route="pistas"] .clue-evidence h3 {
    margin: 0 0 5px;
    font: 900 14px/1.25 Nunito,sans-serif;
    color: var(--clue-ui-deep);
  }
  .shell[data-locali-route="pistas"] .clue-evidence time {
    color: #567c71;
    font-size: 12px;
    font-weight: 800;
  }
  .shell[data-locali-route="pistas"] .clue-evidence p,
  .shell[data-locali-route="pistas"] .clue-evidence small {
    color: #54726c;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .shell[data-locali-route="pistas"] .clue-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 13px;
    margin: 0;
  }
  .shell[data-locali-route="pistas"] .clue-favorites-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
  }
  .shell[data-locali-route="pistas"] .clue-favorite {
    gap: 5px;
    padding: 12px 7px;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 15px;
    background: rgba(235,249,241,.55);
  }
  .shell[data-locali-route="pistas"] .clue-favorite i {font-size:25px}
  .shell[data-locali-route="pistas"] .clue-favorite strong {font-size:12px}
  .shell[data-locali-route="pistas"] .clue-favorite small {font-size:10px}
  .shell[data-locali-route="pistas"] .clue-summary {
    position:relative;
    isolation:isolate;
    overflow: hidden;
    padding-bottom: 119px;
    background: var(--clue-ui-glass);
  }
  .shell[data-locali-route="pistas"] .clue-summary::after {
    content:"";
    position:absolute;
    z-index:-1;
    bottom:-10px;
    right:0;
    left:0;
    height:135px;
    background: url('/pet-scene-history.webp') center bottom / auto 156px no-repeat;
    pointer-events:none;
    -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 24%,#000 84%,transparent 100%);
    mask-image: linear-gradient(to bottom,transparent 0%,#000 24%,#000 84%,transparent 100%);
  }
  .shell[data-locali-route="pistas"] .clue-summary p {
    color: var(--clue-ui-muted);
    font-size: 12px;
    line-height: 1.52;
  }
  .shell[data-locali-route="pistas"] .clue-disclaimer {
    border-top: 1px solid rgba(7,62,67,.11);
    padding-top: 10px;
    font-size: 10px !important;
  }
  .shell[data-locali-route="pistas"] .clue-caveat {
    border-left-color: #e89c85;
    border-radius: 11px;
    background: rgba(255,233,219,.63);
  }
  .shell[data-locali-route="pistas"] .clue-print-status {
    margin: 0 0 14px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 15px;
    background: rgba(255,255,255,.45);
    color: #4f7168;
    font-size: 12px;
    line-height: 1.45;
  }

  /* Mobile: accessible tap targets, two columns only for short metrics;
     section cards stack and never clip labels or map controls. */
  @media (max-width: 899px) {
    .shell[data-locali-route="pistas"] .clue-masthead {
      min-height: 291px;
      padding: 20px 18px 181px;
      margin: 0;
    }
    .shell[data-locali-route="pistas"] .clue-masthead::after {
      height: 227px;
      bottom: -17px;
      background-size: auto 238px;
    }
    .shell[data-locali-route="pistas"] .clue-top-grid,
    .shell[data-locali-route="pistas"] .clue-dossier-grid,
    .shell[data-locali-route="pistas"] .clue-bottom-grid {grid-template-columns: minmax(0,1fr)}
    .shell[data-locali-route="pistas"] .clue-top-story {grid-template-columns: 96px minmax(0,1fr);padding:14px}
    .shell[data-locali-route="pistas"] .clue-portrait {width:94px;height:94px}
    .shell[data-locali-route="pistas"] .clue-metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
    .shell[data-locali-route="pistas"] .clue-map {min-height:320px;height:clamp(320px,42dvh,425px)}
    .shell[data-locali-route="pistas"] .clue-report {gap:12px}
  }
  @media (max-width: 389px) {
    .shell[data-locali-route="pistas"] .clue-masthead {min-height:271px;padding:17px 15px 164px}
    .shell[data-locali-route="pistas"] .clue-masthead::after {height:207px;background-size:auto 216px}
    .shell[data-locali-route="pistas"] .clue-headline {font-size:28px!important}
    .shell[data-locali-route="pistas"] .clue-top-story {grid-template-columns:85px minmax(0,1fr);gap:10px}
    .shell[data-locali-route="pistas"] .clue-portrait {width:83px;height:83px}
    .shell[data-locali-route="pistas"] .clue-favorites-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
    .shell[data-locali-route="pistas"] .clue-toolbar {grid-template-columns:minmax(0,1fr)}
  }
  @media (min-width: 900px) {
    .shell[data-locali-route="pistas"] .clue-masthead {
      min-height: 235px;
      padding: 34px 44% 35px 28px;
      justify-content: center;
    }
    .shell[data-locali-route="pistas"] .clue-masthead::after {
      top:0;bottom:0;left:47%;right:0;
      height:auto;
      background-size: auto 285px;
      background-position:right 12px bottom -42px;
    }
    .shell[data-locali-route="pistas"] .clue-metrics {grid-template-columns:repeat(3,minmax(0,1fr))}
    .shell[data-locali-route="pistas"] .clue-map {min-height:400px}
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .shell[data-locali-route="pistas"] .clue-top-story,
    .shell[data-locali-route="pistas"] .clue-paper {
      background: #f8faf5;
      border: 1px solid #9db9ad;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .shell[data-locali-route="pistas"] .clue-report * {animation:none!important;transition:none!important}
  }
}