/* ===== Variables y base ===== */
:root{
  --app-max: 720px;
  --app-pad: 20px;
  --brand: #0d6efd;

  /* Glass al estilo que pediste */
  --glass-bg: rgba(255,255,255,.20);
  --glass-border: rgba(255,255,255,.30);
  --glass-blur: 8px;
  --glass-shadow: 0 4px 8px rgba(0,0,0,.20);
}

html, body{ margin:0; padding:0; height:100%; }

/* Fondo SIEMPRE fijo (también móvil) */
body{
  min-height:100vh; display:flex; flex-direction:column;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.10)),
    url('img/Enguera_Tourist_Info_1_Nerea_Perez.jpg') center/cover no-repeat fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Contenido principal */
.main-content{ flex:1; display:flex; flex-direction:column; justify-content:flex-start; }

/* Contenedor base (sin glass; el glass lo aplica la clase .glass) */
.container.app-scope{
  width: calc(100% - var(--app-pad)*2);
  max-width: var(--app-max);
  border-radius: 15px;
  padding: var(--app-pad);
  margin: 20px auto 40px auto;
  box-shadow: var(--glass-shadow);
}

/* ===== GLASS principal ===== */
.container.app-scope.glass{
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

/* Tarjetas de resultados con mini-glass */
.result{
  border: 1px solid var(--glass-border);
  padding: 12px;
  margin: 10px 0;
  border-radius: 15px;
  background: var(--glass-bg);
  backdrop-filter: blur(calc(var(--glass-blur) - 2px));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px));
  box-shadow: var(--glass-shadow);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  outline: none;
}
.result:hover, .result:focus-within{
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0,0,0,.22);
}

/* Detalle con transición */
.detalle{
  display:block;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .25s ease, opacity .25s ease;
}
.detalle.open{ max-height:1000px; opacity:1; }

/* Footer semioscuro con transparencia */
.footer{
  width:100%;
  text-align:center;
  padding:4px 0;
  font-size:16px;
  height:34px;
  position:relative;
  margin-top:auto;
  color:#f8f9fa;
  background-color: rgba(52,58,64,.70);
  border-top-left-radius: 12px; border-top-right-radius: 12px;
}
.footer a{ color:#f8f9fa; text-decoration:none; }

/* Botón “Subir” */
#backToTop{
  display:block;
  position:fixed;
  bottom:40px; right:30px; z-index:99;
  border:none; outline:none;
  background-color:#007bff;
  color:#fff; cursor:pointer;
  padding:10px 15px;
  border-radius:5px;
  font-size:16px;
  box-shadow:0 4px 6px rgba(0,0,0,.20);
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .18s ease, transform .18s ease, background-color .12s ease;
}
#backToTop:hover{ background-color:#0056b3; }
#backToTop.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
#backToTop:focus{ outline:2px solid #fff; outline-offset:3px; }

/* Responsive */
@media (max-width: 600px){
  .container.app-scope, .result{ width: calc(100% - 20px); padding: 14px; }
}

/* Fallback si no hay soporte para backdrop-filter */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .container.app-scope.glass{ background: rgba(255,255,255,.92); }
  .result{ background: rgba(255,255,255,.92); }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}