/* Paleta por categoria */
:root{
  --cat-transporte:  #2563eb; /* azul */
  --cat-alimentacao: #ef4444; /* vermelho */
  --cat-estagio:     #16a34a; /* verde */
  --cat-biblioteca:  #7c3aed; /* roxo */
  --cat-secretaria:  #f59e0b; /* âmbar */
  --brand-blue:      #1a73e8;
  --circle-size: 84px; /* ex.: 84px ~ bom p/ logos; aumente se quiser */
  --orbit-radius: 140px;
  --text-color: #e5e7eb;
  /* ===== THEME (DARK DEFAULT) ===== */
  --bg-site:   #212121;  /* fundo geral */
  --bg-side:   #1f1f1f;  /* fundo da side results */
  --border-color: #313335; /* bordas em geral */
  --bg-search: #4d5156; /* fundo da search bar */
  --text-color: #e8e8e8; /* texto principal */
  --link-color: #99c3ff; /* links (result-title) no escuro */
  --url-color:  #e8e8e8; /* URL (linha verde vira branco no escuro) */
  --fav-star-color: #ffffff; /* estrela dos favoritos no escuro */
  --stroke-color: rgba(255, 255, 255, 0.25);
  --surface-color: rgba(255, 255, 255, 0.15);
  --surface-color-hover: rgba(255, 255, 255, 0.25);
  --circle-icons: rgba(26, 115, 232, 0.35);
  --button-icon: url(./assets/moon-stars.svg);
}
.hidden{ display:none; }
.icon-button{
  background: transparent;
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 16px;
}

/* ===== Acessibilidade de foco ===== */
:focus-visible{
  outline: 3px solid rgba(26,115,232,.6);
  outline-offset: 2px;
}

/* ===== Respeitar prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce){
  #rotator, #rotator > div, .fa-globe.fa-spin{
    animation: none !important;
  }
}

/* ====== Linha base de tipografia na lateral ====== */
.side-results, .side-results * { line-height: 1.5; }

.user-avatar,
.user-avatar-button {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 0;
  background: #f43f5e; /* rosa estilo Google */
  color: white;
  font: 700 14px/32px system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  text-align: center;
  cursor: pointer;
}
.user-avatar-button {
  margin-left: 32px;
}

.user-avatar--lg{
  width: 64px;
  height: 64px;
  line-height: 64px;
  display: inline-block;
  background: #f43f5e;
  border-radius: 50%;
  font-size: 28px;
}
/* ---------- Popover do usuário ---------- */
.user-popover{
  position: absolute;
  top: 64px;
  right: 20px;
  background: var(--bg-side);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  padding: 14px 14px 10px;
  width: 280px;
  z-index: 1500;
  color: var(--text-color);
}
.user-popover__close{
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-color);
}
.user-card__title{
  margin: 0 20px 8px 0;
  text-align: center;
  font-weight: 700;
}
.user-card__avatar{
  text-align: center;
  position: relative;
  margin-bottom: 10px;
}
.user-card__camera{
  position:absolute;
  bottom:2px;
  left: calc(50% + 28px); /* desloca para a direita do centro */
  transform: translateX(-50%);
  width:22px;height:22px;
  background:#fff url(./assets/camera.svg) no-repeat center;
  background-size:12px 12px;
  border:1px solid #e5e7eb;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}

.user-card__settings{
  display: block;
  margin: 0 auto 8px;
  border: 0;
  background: #f3f4f6;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.user-card__chips{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}
.chip{
  background: #eef2ff;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 12px;
}
.user-card__actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.btn-ghost{
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}

/* ----- Toggle simples (atalhos) ----- */
.toggle{
  display:flex; align-items:center; gap:8px; margin-top:8px;
  font-size: 13px;
}
.toggle input{ width:16px; height:16px; }
.muted{ color:#9ca3af; font-size:12px; }

/* ----- Switch sem ícone interno (Site Settings) ----- */
.switch-no-icon { position: relative; width: 64px; }
.switch-no-icon button{ width:32px; height:32px; background:#fff; border:0; border-radius:50%; position:absolute; left:-2%; top:50%; transform:translateY(-50%); }
.switch-no-icon span{ display:block; width:64px; height:24px; background: var(--surface-color); border-radius:9999px; }
.switch-no-icon.is-off button{ left:50%; }

/* ---------- Switch (tema) ---------- */
#switch {
    margin: 6px 0;
    position: relative;
    width: 64px;
}
#switch button {
    width: 32px;
    height: 32px;
    background: white var(--button-icon) no-repeat center;
    border: 0;
    border-radius: 50%;
    position: absolute;
    left: -2%;
    top: 50%;
    animation: button-slide-in 0.4s;
    z-index: 1;
    transform: translateY(-50%);
}
.light #switch button {
    background: white var(--button-icon) no-repeat center;
    animation: button-slide-out 0.5s forwards;
}
#switch span {
    display: block;
    width: 64px;
    height: 24px;
    background: var(--surface-color);
    border: var(--stroke-color);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 9999px;
}
#switch:hover button {
    border: 1.5px solid DarkSlateBlue;
    outline: 3px solid var(--circle-icons);
}
#switch:hover span {
    border: 1.5px solid white;
    outline: 3px solid var(--circle-icons);
}
.light #switch:hover button, 
.light #switch:hover span {
    border: 1.5px solid rgba(0, 0, 0, 0.8);
    outline: 3px solid var(--circle-icons);
}
/* Tema claro (ajusta variáveis e ícone do botão) */
.light {
    /* ===== THEME (LIGHT) ===== */
    --bg-site:   #F9FAFA;
    --bg-side:   #ffffff;
    --border-color: #e5e7eb;
    --bg-search: #ffffff;
    --text-color: #111827;
    --link-color: var(--brand-blue); /* links azuis no claro */
    --url-color:  #166534;           /* mantém verde no claro */
    --fav-star-color: #000000;       /* estrela preta no claro */

    --stroke-color: rgba(0, 0, 0, 0.5);
    --stroke-color-hover: rgba(0, 0, 0, 0.8);
    --surface-color: rgba(0, 0, 0, 0.1);
    --surface-color-hover: rgba(0, 0, 0, 0.05);
    --circle-icons: rgba(0, 0, 0, 0.2);
    --text-animation: rgb(32, 122, 71);
    --button-icon: url(./assets/sun.svg);
}
/*The Orbital Spin*/
 @-moz-keyframes circle { 
    from {
        -moz-transform:rotate(360deg);
    }
    to {
        -moz-transform:rotate(0deg);
    }
}
@-o-keyframes circle {
    from {
        -o-transform:rotate(360deg);
    }
    to {
        -o-transform:rotate(0deg);
    }
}
@-webkit-keyframes circle {
    from {
        -webkit-transform:rotate(360deg);
    }
    to {
        -webkit-transform:rotate(0deg);
    }
}
@keyframes circle {
    from {
        transform:rotate(360deg);
    }
    to {
        transform:rotate(0deg);
    }
}
@-moz-keyframes inner-circle {
    from {
        -moz-transform:rotate(-360deg);
    }
    to {
        -moz-transform:rotate(0deg);
    }
}
@-webkit-keyframes inner-circle {
    from {
        -webkit-transform:rotate(-360deg);
    }
    to {
        -webkit-transform:rotate(0deg);
    }
}
@-o-keyframes inner-circle {
    from {
        -o-transform:rotate(-360deg);
    }
    to {
        -o-transform:rotate(0deg);
    }
}
@keyframes inner-circle {
    from {
        transform:rotate(-360deg);
    }
    to {
        transform:rotate(0deg);
    }
}

/*Some Font Awesomeness*/

.fa-globe {
  font-size: 150px !important;
  text-shadow: 3px 4px 12px #2C2D2E;
}

 .fa-globe.fa-spin {
  -webkit-animation: spin 60s infinite linear;
  -moz-animation: spin 60s infinite linear;
  -o-animation: spin 60s infinite linear;
  animation: spin 60s infinite linear;
}

/*.central-circle .fa-spin:hover {
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}*/



#rotator {
    width:350px;
    height:350px;
    margin:0 auto;
    font-size:10px;
    line-height:1;
    -moz-animation: circle 60s linear infinite;
    -webkit-animation:circle 60s linear infinite;
    -o-animation: circle 60s linear infinite;
    animation: circle 60s linear infinite;
    transform-origin: 50% 50%;
    /*Borders visible to view mechanics*/
    border-radius: 2px;
}
/*
#rotator:hover {
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}*/
#rotator > div {
    -moz-animation: inner-circle 60s linear infinite;
    -o-animation: inner-circle 60s linear infinite;
    -webkit-animation: inner-circle 60s linear infinite;
    animation: inner-circle 60s linear infinite;
    background-color:#e1e1e1;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 100%;
    text-rendering: geometricPrecision;
}
/*#rotator:hover > div {
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}*/

  @keyframes button-slide-out {
    from {
        left: -2%;
    }

    to {
        left: 50%;
    }
  }

  @keyframes button-slide-in {
    from {
        left: 50%;
    }

    to {
        left: -2%;
    }
  }

.spin-container {
    position: relative;
    height: 350px;
    width: 350px;
    overflow: visible;
    margin: 50px auto;
    /*Borders visible to view mechanics*/
    border-radius: 2px;
}
.central-circle {
    display: table;
    position: absolute;
    border-radius: 100%;
    width: 150px;
    height: 150px;
    left: 100px;
    top: 100px;
}

.central-circle a {
  color: #333;
    text-decoration: none;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 2px;
    position: relative;
}

/* The outer limits*/

.small-circle {
    display: table;
    box-shadow: 2px 2px 6px #2C2D2E;
    background: -webkit-radial-gradient(100px 100px, circle, #BBB, #D8D8D8);
    background: -moz-radial-gradient(100px 100px, circle, #BBB, #D8D8D8);
    background: radial-gradient(100px 100px, circle, #BBB, #D8D8D8);
}
.small-circle a {
    color: inherit;
    text-decoration: none;
    display: table-cell;
    text-align: center;
    vertical-align: middle;

}

.circle-img{
  width: calc(var(--circle-size) - 10px);
  height: calc(var(--circle-size) - 10px);
  border-radius: 50%;
  display: block;
  margin: 5px auto;
  object-fit: cover;
}

/* Anel colorido por categoria */
.cat-transporte { border: 3px solid var(--cat-transporte); }
.cat-alimentacao{ border: 3px solid var(--cat-alimentacao); }
.cat-estagio    { border: 3px solid var(--cat-estagio); }
.cat-biblioteca { border: 3px solid var(--cat-biblioteca); }
.cat-secretaria { border: 3px solid var(--cat-secretaria); }

/* Popovers (menu e favoritos) */
.popover{
  position: absolute;
  top: 60px;           /* abaixo do header */
  right: 20px;
  width: 260px;
  background: var(--bg-side);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 12px;
  z-index: 1000;
}
.popover h4{
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 700;
}
.popover label{
  display: block;
  font-size: 14px;
  padding: 6px 0 10px 0;
  cursor: pointer;
  border-bottom: 5px solid transparent; /* base para o highlight por categoria */
}
/* highlight por categoria (cor combina com a borda das esferas) */
.popover label[data-cat="transporte"]  { border-bottom-color: var(--cat-transporte); }
.popover label[data-cat="alimentacao"] { border-bottom-color: var(--cat-alimentacao); }
.popover label[data-cat="estagio"]     { border-bottom-color: var(--cat-estagio); }
.popover label[data-cat="biblioteca"]  { border-bottom-color: var(--cat-biblioteca); }
.popover label[data-cat="secretaria"]  { border-bottom-color: var(--cat-secretaria); }

/* espaço entre itens */
.popover label + label{
  margin-top: 6px;
}
.popover-list{
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  max-height: 260px;
  overflow: auto;
}
.popover-item{ padding: 4px 0; }
.popover-link{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-color);
  font-size: 14px;
  text-align: left;          /* garante alinhamento de texto à esquerda */
}
/* reforça para não ser sobrescrito por regras globais acidentais */
.popover-list li a.popover-link{
  display: flex !important;
}
.popover-thumb{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e5e7eb;
}
html:not(.light) #favsPopover .popover-thumb[src*="ufpr-logo"]{
  width: 28px;
  height: 28px;
  object-fit: contain;
  padding: 1px;
}
.words {
    position: relative;
    z-index: 999;
}
/*The Following is just fluff, ignore or delete it as desired*/
 body {
    background: var(--bg-site);
    color: var(--text-color);
 }

.intro {
    display: block;
    max-width: 100%;
    text-align: center;
    padding: 2px;
}
.intro p {
    color: #f7f7f7;
    font-size: 12px;
    line-height: 80%;
}

/* Aqui comeca a estilizacao da search bar estilo google  */

.intro header ul {
  list-style-type: none;
  overflow: hidden;
}

.intro header li {
  float: right;
}

.intro header li a {
  color: var(--text-color);
  display: block;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size:14px;
}
.intro header li a:hover {
  text-decoration: underline;
}
.grid{
  height:23px;
  position:relative;
  bottom:4px;
}
.signbutton{
  background-color: #4885ed;
  color: #fff;
  border:none;
  border-radius:3px;
  padding:7px 10px;
  position:relative;
  bottom:7px;
  font-weight:bold;
}

/* ========= LATERAL (Resultados estilo Google) ========= */
.side-results{
  position: absolute;
  top: 10px;              /* abaixo do cabeçalho/logo */
  left: 10px;
  height: 95vh;
  width: 360px;
  background: var(--bg-side);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 16px 16px 8px;
  overflow-y: auto;
  z-index: 5;             /* abaixo dos popovers/toasts */
}
.side-results__header{
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: 8px;
}
.results-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.result-item{ padding: 10px 0 14px; border-bottom: 1px solid var(--border-color); }
.result-item:last-child{ border-bottom: 0; }
.result-title{
  font-size: 18px;
  line-height: 1.2;
  color: var(--link-color);
  text-decoration: none;
}
.result-title:hover{
  text-decoration: underline;
  filter: brightness(1.08);
}
.result-url{
  font-size: 13px;
  color: var(--url-color); /* branco no escuro, verde no claro */
  margin: 2px 0 4px;
}
.result-snippet{
  font-size: 14px;
  color: var(--text-color);
  margin: 0;
}

/* ===== Modais (dialogs genéricos) ===== */
.modal.hidden{ display:none; }
.modal__backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:3000; }
.modal__card{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--bg-side); color:var(--text-color); border:1px solid var(--border-color); border-radius:12px; min-width:320px; max-width:90vw; z-index:3001; box-shadow:0 18px 40px rgba(0,0,0,.3); }
.modal__header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border-color); }
.modal__content{ padding:14px 16px; display:grid; gap:14px; }
.modal__close{ background:transparent; border:0; font-size:20px; cursor:pointer; color:var(--text-color); }
.setting-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.setting-label{ font-size:14px; }
.shortcuts-list{ margin:0; padding-left:18px; }
.shortcuts-list li{ margin:6px 0; }
.shortcuts-list kbd{ border:1px solid var(--border-color); border-bottom-width:2px; padding:1px 6px; border-radius:4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ========= TOASTS (notificações inferiores) ========= */
.toast-stack{
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2000;
}
.toast{
  width: 320px;
  background: var(--bg-side);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  overflow: hidden;
}
.toast-body{
  padding: 12px 14px 4px;
  font-size: 14px;
  color: var(--text-color);
}
.toast-actions{
  padding: 8px 14px 12px;
  display: flex;
  gap: 8px;
}

.help-fab{
   position: fixed;
   right: 25px;
   bottom: 25px;
   width: 32px;
   height: 32px;
   border-radius: 9999px;
   border: 0;
   background: var(--brand-blue);
   color: #fff;
   font: 700 18px/32px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
   box-shadow: 0 10px 24px rgba(0,0,0,.18);
   cursor: pointer;
   z-index: 2100; /* acima dos toasts */
 }
 .help-fab:hover{ filter: brightness(1.05); }
.btn{
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
.btn-primary{
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  color: #fff;
}
.btn-star{ display:flex; align-items:center; gap:6px; }
/* ===== Floating menu de ajuda ===== */
.help-menu{
  position: fixed; z-index: 3100; background: var(--bg-side); color:var(--text-color);
  border:1px solid var(--border-color); border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.22);
  padding:6px; min-width:220px;
}
.help-menu.hidden{ display:none; }
.help-menu__item{ display:block; width:100%; text-align:left; padding:8px 10px; border:0; background:transparent; cursor:pointer; border-radius:8px; color: var(--text-color); }
.help-menu__item:hover{ background: var(--surface-color-hover); }

/* alinhamento do ícone de grid e estrela */
.grid{ cursor:pointer; }
.icon-button .fa-star{
  font-size:16px;
  color: var(--fav-star-color);
}
.logo{
  margin-top:80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bar{
  margin:0 auto;
  width:575px;
  border-radius:30px;
  border:1px solid var(--border-color);
  background: var(--bg-search);
}
.bar:hover{
  box-shadow: 1px 1px 8px 1px #dcdcdc;
}
.bar:focus-within{
  box-shadow: 1px 1px 8px 1px #dcdcdc;
  outline:none;
}
.searchbar{
  height:45px;
  border:none;
  width:500px;
  font-size:16px;
  outline: none;
  background: var(--bg-search);
  color: var(--text-color);
}
.searchbar::placeholder{ color: var(--text-color); opacity:.7; }
.voice{
  height:20px;
  position:relative;
  top:5px;
  left:10px;
}
.buttons{
  margin-top:30px;
}
.button{
  background-color: #ebebeb;
  border:none;
  color:#505050;
  font-size:15px;
  padding: 10px 20px;
  margin:5px;
  border-radius:4px;
  outline:none;
}
.button:hover{
  border: 1px solid #c8c8c8;
  padding: 9px 19px;
  color:#808080;
}
.button:focus{
  border:1px solid #4885ed;
  padding: 9px 19px;
}

.ufpr {
    max-height: 150px;
}
html:not(.light) .ufpr {
    /* Tamanho base no dark */
    max-height: 120px; /* você pode ajustar */
}

/* ====== Padding SÓ na logo branca (tema escuro) ======
   A imagem recebe padding extra para "compensar" a diferença
   de área útil entre as versões preta e branca do brasão.    */
html:not(.light) .logo .ufpr{
    display: inline-block;     /* garante que o padding seja aplicado ao <img> */
    box-sizing: border-box;   /* padding soma fora da imagem */
    padding: 30px 24px 14px 24px;/* <-- ajuste esses valores como preferir */
}
.search-ufpr {
    max-height: 100px;
}
/* ajuda a posicionar corretamente o popover em telas pequenas */
@media (max-width: 640px){
  .popover{ right: 8px; left: 8px; width: auto; }
  .side-results{
    position: static;
    width: auto;
    height: auto;
  }
}