/* ========= 🌾 Portal Ebrenc - portal.css ========= */

/* Fondo general */
body {
  background: linear-gradient(135deg, #eef2f3, #e0e7ec);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #212529;
}


.header-bg {
  background: linear-gradient(135deg, #e8f5ff 0%,#b1bcf1, #d49725 100%);
}

.test-wrapper{
  max-width:800px;
  margin:auto;
  padding:20px;
}

.disclaimer {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 10px;color:gray;

}

.orgull {
  font-family: 'Segoe Script', 'Brush Script MT', cursive;
  font-size: 24px;          /* un puntet més gran */
  font-weight: 700;         /* lleugerament més nítid */
  color: #0A3769;           /* blau fosc */
  margin-left: 8px;        /* més separació de "ALEGO" */
  display: inline-block;    /* permet ajustar vertical */
  vertical-align: bottom;   /* alineat amb la base de la imatge */
  line-height: 1;           /* sense espais extra */
}

.separaDalt {padding-top: 10px;}



/* Links del menú */
.header-custom .nav-link {
  color: #fff !important;
  font-weight: 600;
  margin-left: 8px;
  padding: 6px 14px !important;
  border-radius: 20px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
  background: rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease-in-out;
}

.header-custom .nav-link:hover {
  background: rgba(0, 0, 0, 0.65);
  color: #ffc107 !important;
  border: 1px solid rgba(255,193,7,0.6);
  text-shadow: 2px 2px 6px rgba(0,0,0,1);
}

/* ===== CONTENIDO PRINCIPAL ===== */
main.container {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  padding: 2rem;
  margin-top: 2rem;
  flex-grow: 1;
  max-width: 900px;
}

/* ===== FOOTER ===== */
footer.portal-footer {
  background: #2c3e50;
  color: #adb5bd;
  padding: 12px;
  font-size: 0.8rem;
  text-align: center;
  margin-top: auto;
}
footer.portal-footer a {
  color: #adb5bd;
  text-decoration: none;
}
footer.portal-footer a:hover {
  text-decoration: underline;
}

/* ===== Navbar móvil (arreglos) ===== */
@media (max-width: 991.98px){
  /* Panel del menú desplegado */
  .navbar-custom .navbar-collapse{
    position: absolute;      /* se pega bajo la barra */
    top: 100%;
    left: 0;
    right: 0;
    margin: .5rem 1rem;      /* aire a los lados y abajo */
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    padding: .25rem;
    z-index: 1000;
  }
  /* Lista y enlaces: sin “píldoras” ni fondos raros */
  .navbar-custom .navbar-nav{padding: .25rem;}
  .navbar-custom .navbar-nav .nav-link{
    display: block;
    padding: .75rem 1rem;
    color: #1f2937;                 /* texto oscuro en panel claro */
    background: transparent !important;
    border-radius: 8px;             /* esquinas suaves, no “píldora” */
    box-shadow: none !important;
  }
  .navbar-custom .navbar-nav .nav-link:hover,
  .navbar-custom .navbar-nav .nav-link:focus{
    background: rgba(0,0,0,.06) !important;
    color: #111827;
  }
  .navbar-custom .navbar-nav .nav-link.active{
    background: rgba(43,115,255,.12) !important;
    color: #1d4ed8 !important;
    font-weight: 600;
  }
  /* Más aire bajo el header */
  header.header-custom{padding-bottom:.25rem;}
}
/* Icono del toggler sobre fondos oscuros (por si tu tema es dark en desktop) */
.navbar-custom .navbar-toggler{
  border-color: rgba(255,255,255,.55);
}
.navbar-custom .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}




/* ===== Navbar mòbil: panell fosc (override) ===== */
@media (max-width: 991.98px){
  .navbar-custom .navbar-collapse{
    background: linear-gradient(135deg, rgba(17,24,39,.92), rgba(30,41,59,.88)); /* fosc */
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
  }

  /* Enllaços en blanc, sense “pill” ni ombres del tema */
  .navbar-custom .navbar-nav .nav-link{
    color: #f8fafc !important;
    background: transparent !important;
    border-radius: 10px;
    text-shadow: none !important;
    margin-left: 0 !important;
    padding: .8rem 1rem !important;
  }
  .navbar-custom .navbar-nav .nav-link:hover,
  .navbar-custom .navbar-nav .nav-link:focus{
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
  }
  .navbar-custom .navbar-nav .nav-link.active{
    background: rgba(43,115,255,.28) !important;
    color: #ffffff !important;
    font-weight: 700;
  }

  /* Separadors suaus entre ítems (opcional) */
  .navbar-custom .navbar-nav .nav-item + .nav-item{
    border-top: 1px solid rgba(255,255,255,.08);
  }

  /* Una mica més d’aire sota el header */
  header.header-custom{ padding-bottom: .6rem; }
}


/* Badge del tipus: petit, sense fons ni borde, dalt-dreta */
.explorar .poi-card{ position: relative; }
.explorar .poi-type-badge{
  position:absolute; top:6px; right:8px;
  font-size:.62rem; font-weight:700; letter-spacing:.04em;
  color:#94a3b8; background:transparent; border:0; padding:0;
}

/* Cos i peu de card */
.explorar .poi-card .card-body{ padding-top:12px; }

.explorar .poi-footer{
  display:flex; align-items:center; gap:14px;
  color:#64748b; font-size:.875rem; margin-top:.35rem;
}
.explorar .poi-footer .loc,
.explorar .poi-footer .maplink{
  display:inline-flex; align-items:center; gap:.35rem;
}
.explorar .poi-footer .maplink{
  color:#64748b; text-decoration:none;
}
.explorar .poi-footer .maplink:hover{
  color:#1d4ed8; text-decoration:underline;
}
.explorar .poi-footer svg{ display:block; }

.video-home {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;    /* límit opcional */
}

.video-home iframe {
  width: 100%;
  aspect-ratio: 16/10;
  display: block;
  border-radius: 12px;  /* opcional */
}


.container.video-mode {
  max-width: 1000px;    /* o 1200 si vols més ample */
  padding: 0;           /* ✨ elimina padding que encongeix el vídeo */
}


.video-caption {
  margin-top: 0.3rem;       /* poc aire, lligat al vídeo */
  font-size: 1rem;          /* mida normal */
  font-style: italic;       /* estil subtítol */
  text-align: center;       /* centrat */
  color: #444;              /* gris elegant */
}

.video-caption::before {
  color: #e63946;           /* vermell suau */
  font-style: normal;       /* l’icona no en cursiva */
  font-weight: bold;
}


/* ===== Alta compacta (unificada) ===== */

/* contenidor opcional per empènyer cap avall */
.alta-bottom{
  display:flex;               /* posa la targeta a baix dins d'aquest wrap */
  flex-direction:column;
  min-height:38vh;            /* ajusta segons t'agradi (30–50vh) */
  justify-content:flex-end;
}

/* targeta */
.alta-card{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(17,24,39,.06);
}
.alta-card--xs{ max-width:380px; padding:10px; }  /* més petita */
.alta-card__title{ margin:0 0 8px; font-weight:600; font-size:.95rem; }

/* formulari XS */
.alta-form{ font-size:.88rem; }
.alta-row{ margin-bottom:8px; }

/* línia compacta: etiqueta + camp */
.alta-row--inline{ display:flex; align-items:center; gap:8px; }
.alta-row--inline .form-label{
  width:92px; margin:0; font-weight:600; font-size:.82rem; color:#374151;
}
.alta-row--inline .form-control{ flex:1; }

/* inputs compactes */
.alta-form .form-control{
  height:2rem; padding:.3rem .5rem; font-size:.88rem; border-radius:10px;
}

/* textarea estil camp 2 línies (mateixa línia amb label) */
.textarea-2lines{
  height:2.8rem;              /* “doble” alçada baixeta */
  min-height:2.8rem; max-height:6rem; resize:vertical;
}

/* accions */
.alta-actions{ display:flex; justify-content:flex-end; margin-top:4px; }
.btn-xs{ padding:.28rem .6rem; font-size:.85rem; border-radius:10px; }

/* +33% aproximadament respecte a un card XS típic (~420px -> ~560px) */
.alta-card--wide { max-width: 560px; }

/* Assegura que els camps aprofiten l’ample nou */
.alta-card--wide .form-control,
.alta-card--wide textarea { width: 100%; }

/* Si vols reforçar alçada del textarea a CSS, a més de rows="4" */
.alta-form .textarea-2lines { min-height: 4.8rem; }