/*!
 * Aquest és el CSS específic per a La Torre del Coure...
 * Recordar que els import s'han de fer al començament del fitxer
 * Autor: Albert Juanals
 */


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@font-face {
    font-family: 'Argos';
    src: url('/AJ/css/font/Tipografias/Argos/Argos-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Argos';
    src: url('/AJ/css/font/Tipografias/Argos/Argos-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Argos';
    src: url('/AJ/css/font/Tipografias/Argos/Argos-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Argos';
    src: url('/AJ/css/font/Tipografias/Argos/Argos-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Argos';
    src: url('/AJ/css/font/Tipografias/Argos/Argos-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Argos';
    src: url('/AJ/css/font/Tipografias/Argos/Argos-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'InstaStory';
    src: url('/AJ/css/font/Tipografias/InstaStory/InstaStory.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'InstaStory';
    src: url('/AJ/css/font/Tipografias/InstaStory/InstaStory-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: bold;
}
@font-face {
    font-family: 'InstaStory';
    src: url('/AJ/css/font/Tipografias/InstaStory/InstaStory-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'InstaStory';
    src: url('/AJ/css/font/Tipografias/InstaStory/InstaStory-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'InstaStory Outline';
    src: url('/AJ/css/font/Tipografias/InstaStory/InstaStory-Outline.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'InstaStory Outline';
    src: url('/AJ/css/font/Tipografias/InstaStory/InstaStory-OutlineBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'InstaStory Outline';
    src: url('/AJ/css/font/Tipografias/InstaStory/InstaStory-OutlineItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'InstaStory Outline';
    src: url('/AJ/css/font/Tipografias/InstaStory/InstaStory-OutlineBoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'InstaStory Thin';
    src: url('/AJ/css/font/Tipografias/InstaStory/InstaStory-Thin.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'InstaStory Thin';
    src: url('/AJ/css/font/Tipografias/InstaStory/InstaStory-ThinItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'InstaStory Signature';
    src: url('/AJ/css/font/Tipografias/InstaStory/InstaStorySignature.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

/*  Colors generals de l'aplicació de La Torre del Coure */

:root {
  --LTdC-marro: rgb(202, 99, 58);
  --LTdC-negre: rgb(43, 45, 43);
  --LTdC-blanc: rgb(240, 239, 233);
  --LTdC-blanc-blanc: rgb(255, 255, 255);
  --LTdC-marro-clar-transp: rgba(200, 140, 100, 0.35);
}

.LTdC-header-background-foto {
    background: url('/AJ/imatges/LTdCext_002.jpg') no-repeat center top;
    background-size: cover;
}

.LTdC-border-marro {
  border: 1px solid var(--LTdC-marro);
}

.LTdC-background-marro {
  background-color: var(--LTdC-marro);
}

.LTdC-background-blanc {
  background-color: var(--LTdC-blanc);
}

.LTdC-background-transparent {
    background-color: transparent !important;
}

.LTdC-menu1-blanc {
  font-family: 'InstaStory', bold;
  color: var(--LTdC-blanc);
  font-size: 4.5rem;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.LTdC-menu2-blanc {
  font-family: 'InstaStory', bold;
  color: var(--LTdC-blanc);
  font-size: 2.2rem;
  font-weight: 200;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.LTdC-menu2-negre {
  font-family: 'InstaStory', bold;
  color: var(--LTdC-negre);
  font-size: 2.2rem;
  font-weight: 200;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.LTdC-menu3-negre {
  font-family: 'Argos', bold;
  color: var(--LTdC-negre);
  font-size: 1.2rem;
  font-weight: 200;
  letter-spacing: 0.2px;
}

.LTdC-titol1-blanc {
  font-family: 'Argos', serif;
  color: var(--LTdC-negre);
  font-size: 3.6rem;
  font-weight: bold;
  letter-spacing: 0.2px;
}

.LTdC-titol2-blanc {
  font-family: 'Argos', serif;
  color: var(--LTdC-negre);
  font-size: 2.5rem;
  font-weight: 200;
  letter-spacing: 0.2px;
}

.LTdC-titol-marro1 {
  font-family: 'Argos', serif;
  color: var(--LTdC-marro);
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.LTdC-titol-marro2 {
  font-family: 'Argos', serif;
  color: var(--LTdC-marro);
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.LTdC-text-box {
    background: var(--LTdC-blanc);
    border-radius: 0px;
    padding: 0px 0px;
    color: var(--LTdC-negre);
    font-family: 'Argos', serif;
    font-size: 2.0rem;
    font-weight: 400;
    letter-spacing: 0.2px;
    display: flex;
    flex-direction: column;      /* Apila els fills en vertical */
    align-items: center;         /* Centra horitzontalment */
    justify-content: center;     /* Centra verticalment */
    box-sizing: border-box;
}

.LTdC-text-box2 {
    background: var(--LTdC-blanc);
    border-radius: 0px;
    padding: 0px 0px;
    color: var(--LTdC-negre);
    font-family: 'Argos', serif;
    font-size: 2.0rem;
    font-weight: 400;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;         /* Centra horitzontalment */
    justify-content: center;     /* Centra verticalment */
    box-sizing: border-box;
}

.LTdC-box-blanc-blanc {
    background: var(--LTdC-blanc-blanc);
    border-radius: 0px;
    padding: 20px 20px;
    display: flex;
    flex-direction: column;      /* Apila els fills en vertical */
    align-items: center;         /* Centra horitzontalment */
    justify-content: center;     /* Centra verticalment */
    box-sizing: border-box;
}

.LTdC-text2-blanc,
.aj-benvinguda-text-box {
  font-family: 'Argos', serif;
  color: var(--LTdC-negre);
  font-size: 2.0rem;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.LTdC-dropdown-item {
  color: var(--LTdC-blanc) !important;
  border: none;
  width: 100%;
  text-align: left;
}

.LTdC-dropdown-item:hover,
.LTdC-dropdown-item:focus {
  color: var(--LTdC-blanc) !important;
}

.LTdC-navbar-marro-clar {
  background-color: var(--LTdC-marro-clar-transp) !important;
  backdrop-filter: blur(2px); /* Opcional: dona un efecte de difuminat al fons */
}

.LTdC-navbar-marro {
  background-color: var(--LTdC-marro) !important;
  backdrop-filter: blur(2px); /* Opcional: dona un efecte de difuminat al fons */
}

/* ===== TARGETES D'HABITACIONS ===== */
.LTdC-hab-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    padding: 0 2%;
    margin: 0 0 40px 0;
    box-sizing: border-box;
}

.LTdC-hab-card {
    flex: 0 0 calc(33.33% - 16px);
    max-width: calc(33.33% - 16px);
    background: var(--LTdC-blanc-blanc);
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.LTdC-hab-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.LTdC-hab-desc-curta {
    padding: 16px 20px 8px;
    font-family: 'Argos', serif;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--LTdC-marro);
    flex: 0 0 auto;           /* Queda a l'esquerra amb la seva amplada natural */
}

.LTdC-hab-desc-llarga {
    padding: 0 20px 16px;
    font-family: 'Argos', serif;
    font-size: 1.3rem;
    color: var(--LTdC-negre);
    flex-grow: 1;
}

.LTdC-hab-card .aj-habitacio-botons {
    padding: 12px 20px 20px;
    justify-content: center;
}

@media (max-width: 900px) {
    .LTdC-hab-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

.LTdC-hab-cap {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px 4px;
}

.LTdC-hab-desc-subtitol {
    font-family: 'Argos', serif;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--LTdC-negre);
    flex: 0 0 auto;           /* Amplada natural, no s'eixampla */
    margin-left: auto;        /* Empeny l'element cap a l'extrem dret */
    padding: 16px 20px 8px;   /* Afegim padding per alinear-lo verticalment amb el nom */
}

/*  Llista - seleccionar totes les linies */

#bulkOptionsContainer {
    padding: 0px;;
}

/*!
 * Spinner de transició de pàgina (CSS pur, sense GIF)
 * S'activa en fer clic en un link de navegació o enviar un formulari.
 */
#load-screen {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.75);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#load-screen.visible {
  opacity: 1;
  pointer-events: all;
}
#loading {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(203, 99, 59, 0.2);
  border-top-color: #cb633b;
  border-radius: 50%;
  animation: aj-spin .7s linear infinite;
}
@keyframes aj-spin {
  to { transform: rotate(360deg); }
}
        
/*!
 * Estil pel "pager" que és per a crear els indexos de paginació (final del index.php) - estem creant la class active_link
 */

.pager li .active_link {
background: rgb(178, 241, 96) !important;
}

    
/*!
 * Caixes de text amb títol i barra de progrés - W3Schools Scroll Indicator
 */
 /* Style the header: fixed position (always stay at the top) */

  .aj-content {
    padding: 10px 10px;
    padding-right: 15px;
    padding-left: 15px;
    width: 95%;
    margin-left: 25px;
    border: 1px solid rgb(193, 193, 193);
    height: 200px;
    background: rgb(232, 232, 232);
    overflow: auto;
  }

/*!
 * Caixes de text sense barra de progrés del 80% de l'amplada - W3Schools Scroll Indicator
 */
  .aj-content-80 {
    width: 95%;
    margin-left: 10px;
    margin-top: 10px;
/*    text-align: center; */
    border: 1px solid rgb(18, 18, 18);
    height: 100px;
    background: rgb(18, 18, 18);
    overflow: auto;
  }

/*!
 * Contenidor amb una fotografia i un titular a dalt a l'esquerra
 */
  .aj-container {
    position: relative;
    max-width: auto;
    height: auto;
    margin: 0 auto;
  }
  
  .aj-container img {
    vertical-align: middle;
    height: 400px;
    width: auto;
  }
  
  .aj-container .content {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.6 ); /* Black background with 0.6 opacity */
    color: #f1f1f1;
    width: 30%;
    padding-left: 20px;
  }

  .aj-container .fade {   /* Fading animation */
      animation-name: fade;
      animation-duration: 5.5s;
    }

    @keyframes fade {
      from {opacity: .6} 
      to {opacity: 1}
    }

  /* Layout horitzontal per foto + text */
  .aj-benvinguda-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 20px;
    margin-top: 0px;
    width: 100vw;      /* Amplada total de la finestra */
    max-width: 100vw;  /* Evita que es limiti */
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .aj-benvinguda-marge-esquerra {
    flex: 0 0 10%;
    max-width: 10%;
  }

  .aj-benvinguda-foto {
    flex: 0 0 30%;
    max-width: 30%;
    position: relative;
  }

  .aj-benvinguda-foto img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
  }

  .aj-benvinguda-titol {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--LTdC-blanc);
    padding: 12px 20px;
    font-size: 2.8rem;
    border-radius: 8px;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    width: 90%;             /* <-- més llarg (ajusta el percentatge segons vulguis) */
    min-width: 120px;       /* opcional: per evitar que sigui massa petit en pantalles petites */
    max-width: 95%; 
  }

  .aj-benvinguda-espai {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .aj-benvinguda-text {
    flex: 0 0 40%;
    max-width: 40%;
    background: var(--LTdC-blanc);
    border-radius: 12px;
    padding: 24px 28px;
    color: var(--LTdC-negre);
    font-size: 1.3rem;
    box-shadow: 0 2px 12px rgba(44, 111, 181, 0.08);
    display: flex;
    align-items: center;
  }

  .aj-benvinguda-text-box {
      background: var(--LTdC-blanc);
      border-radius: 12px;
      padding: 32px 36px;
      color: var(--LTdC-negre);
      font-size: 2.8rem;
      display: flex;
      flex-direction: column;      /* Apila els fills en vertical */
      align-items: center;         /* Centra horitzontalment */
      justify-content: center;     /* Centra verticalment */
      box-sizing: border-box;
  }

  .aj-benvinguda-text-box-small {
    font-size: 1.8rem;
  }

  .aj-benvinguda-marge-dreta {
    flex: 0 0 10%;
    max-width: 10%;
  }

  .aj-habitacio-botons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
  }

  .aj-btn-habitacio {
    background: var(--LTdC-marro, #a4583d);
    color: var(--LTdC-blanc, #fff);
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 1.3rem;
    font-family: 'Oswald', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(44, 111, 181, 0.08);
    transition: background 0.2s, color 0.2s, transform 0.1s;
    text-decoration: none;
    display: inline-block;
  }
  .aj-btn-habitacio:hover,
  .aj-btn-habitacio:focus {
    background: #c97a4a;
    color: #fffbe6;
    transform: translateY(-2px) scale(1.03);
    text-decoration: none;
  }

  .aj-paragraf-destacat {
    font-size: 3.2rem;   /* O la mida que vulguis */
    font-weight: bold;
    margin-bottom: 12px;
    text-align: center; 
  }

  .aj-benvinguda-text-superposat {
      position: absolute;
      top: 90px;
      left: 0;
      width: 100%;
      min-height: 90px;
      text-align: left !important ;
      padding: 32px 40px 32px 40px; /* padding esquerra per a la indentació */
      background: var(--LTdC-marro-clar-transp);
      border-radius: 12px;
      box-sizing: border-box;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
  }

  /* Opcional: estil diferent pel botó de reserva */
  .aj-btn-reserva {
    background: #fffbe6;
    color: var(--LTdC-marro, #a4583d);
    border: 2px solid var(--LTdC-marro, #a4583d);
  }
  .aj-btn-reserva:hover,
  .aj-btn-reserva:focus {
    background: #ffe0b2;
    color: #a4583d;
  }


  /* Responsive: apila en columnes en pantalles petites */
  @media (max-width: 900px) {
    .aj-benvinguda-row {
      flex-direction: column !important;
      align-items: stretch !important;
      min-height: unset !important;
    }
    .aj-benvinguda-marge-esquerra,
    .aj-benvinguda-espai,
    .aj-benvinguda-marge-dreta {
      display: none !important;
    }
    .aj-benvinguda-foto,
    .aj-benvinguda-text {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      width: 100% !important;
      height: auto !important;
      min-height: unset !important;
      margin-bottom: 0 !important;
    }
    /* Text box dins de files: amplada completa i centrat */
    .aj-benvinguda-row .LTdC-text-box {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      width: 100% !important;
      height: auto !important;
      min-height: unset !important;
      padding: 20px 24px;
    }
    .aj-benvinguda-foto img {
      width: 100% !important;
      height: 260px !important;
      object-fit: cover;
    }
    .aj-benvinguda-titol {
      position: static;
      margin-bottom: 12px;
      display: block;
    }
    .aj-espai-v {
      height: 20px !important;
    }
  }

  .aj-missatge-ok {
  background: var(--LTdC-negre, #2b2d2b);
  color: var(--LTdC-blanc, #fff);
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 10px;
  padding: 18px 32px;
  margin: 32px auto;
  text-align: center;
  max-width: 420px;
  box-shadow: 0 4px 18px rgba(44,111,181,0.10);
}

/*!
 * Estils recomanats pel GitHub Copilot al programar Estades
 */

    .search-result-item {
      padding: 10px;
      cursor: pointer;
  }
  .search-result-item:hover {
      background-color: #f0f0f0;
  }
  .form-group .form-control {
      width: 100%;
  }
  .form-group .form-control-inline {
      display: inline-block;
      width: calc(25% - 10px);
      margin-right: 10px;
  }
  .form-group .form-control-inline:last-child {
      margin-right: 0;
  }
  .form-group .form-control-half {
      display: inline-block;
      width: calc(12.5% - 10px);
      margin-right: 10px;
  }
  .form-group .form-control-half:last-child {
      margin-right: 0;
  }

  .underline-group {
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 0px; /* Espai entre línies */
}

.underline-group::after {
    content: "";
    position: absolute;
    left: 0; /* Ajustem l'amplada del subratllat */
    right: 10; /* Ajustem l'amplada del subratllat */
    bottom: 0;
    height: 2px;
    background-color: #ff6600; /* Color diferent per a la línia */
}
  
.highlight-group {
  position: relative;
  padding: 10px;
  margin-bottom: 0px; /* Espai entre grups */
  border: 1px solid #ff6600; /* Color del quadre */
  border-radius: 5px; /* Corbes suaus a les cantonades */
  background-color: #fff5e6; /* Color de fons pàlid */
}

.highlight-group input {
  background-color: #fff; /* Color de fons dels camps d'entrada */
  border: 1px solid #ced4da; /* Contorn dels camps d'entrada */
  border-radius: 4px; /* Corbes suaus als camps d'entrada */
  padding: 5px; /* Espai intern dels camps d'entrada */
}


/* Estil del popup */
.popup {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1000;
  font-size: 14px;
  color: #333;
  border-radius: 5px;
}

/* Fletxa del popup */
.popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #ccc transparent transparent transparent;
}

/* texturitzat del cap de setmana a la llista d'estades */
.cap-de-setmana {
  background-image: repeating-linear-gradient(
      45deg, 
      darkgray, 
      darkgray 2px, 
      transparent 2px, 
      transparent 4px
  );
  background-size: 100% 100%;
}

/* Estils per als diferents estats */
.estat-1 {
  background-color: yellow; /* R - Reserva Pendent - Groc */
}

.estat-2 {
  background-color: lightblue; /* A - Reserva Assignada - Blau cel */
}

.estat-3 {
  background-color: lightgreen; /* E - Estada - Verd clar */
}

.estat-4 {
  background-color: red; /* P - Pendent de cobrar - Vermell */
}

.estat-5 {
  background-color: white; /* L - Cobrada - Blanc */
}

.estat-6 {
  background-color: white; /* C - Cancel·lada - Blanc */
  text-decoration: line-through; /* Text tatxat */
}

.estat-6 button {
  text-decoration: line-through !important; /* Força el text tatxat */
}

.estat-6 .text-estat {
  text-decoration: line-through;
}

.estat-alerta {
  background-color: #ff9999 !important; /* Vermell intens */
  color: white !important; /* Text blanc per contrast */
}

/* Combinació de patró de cap de setmana amb colors d'estat */
.cap-de-setmana.estat-A {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      lightblue 2px,
      lightblue 4px
  );
}

.cap-de-setmana.estat-E {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      yellow 2px,
      yellow 4px
  );
}

.cap-de-setmana.estat-P {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      white 2px,
      white 4px
  );
  color: white; /* Text blanc per contrast */
}

.cap-de-setmana.estat-L {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      lightgreen 2px,
      lightgreen 4px
  );
}

.cap-de-setmana.estat-R {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      red 2px,
      red 4px
  );
}

.cap-de-setmana.estat-C {
  background-image: repeating-linear-gradient(
      45deg,
      darkgray,
      darkgray 2px,
      white 2px,
      white 4px
  );
  text-decoration: line-through; /* Text tatxat */
}

/* Fixar la primera columna de la taula */
.table-responsive th:first-child,
.table-responsive td:first-child {
    position: sticky;
    left: 0;
    z-index: 3; /* Assegura que la primera columna estigui per sobre de les altres */
    background-color: lightgray; /* Color de fons per a la columna fixa */
    border: 1px solid red !important; /* Força els límits de les cel·les */
}

.table-responsive th,
.table-responsive td {
    overflow: hidden; /* Evita que el contingut sobresurti */
    text-overflow: ellipsis; /* Mostra punts suspensius si el text és massa llarg */
    white-space: nowrap; /* Evita que el text es trenqui en diverses línies */
    border: 1px solid red !important; /* Força els límits de les cel·les */
}

/* Ajustar el botó per fer-lo més petit */
.btn-custom {
    padding: 0; /* Elimina el farciment intern */
    margin: 0; /* Elimina els marges */
    font-size: 14px; /* Ajusta el tamany de la lletra */
    line-height: 1; /* Redueix l'alçada de la línia */
    background: none; /* Elimina el fons */
    border: none; /* Elimina la vora */
    color: #007bff; /* Manté el color d'enllaç de Bootstrap */
    cursor: pointer; /* Manté el cursor de mà */
}

/* Opcional: Subratllat en passar el ratolí */
.btn-custom:hover {
    text-decoration: underline;
}

/* Ajustar el formulari per evitar espai addicional */
form {
    margin: 0; /* Elimina els marges del formulari */
    padding: 0; /* Elimina el farciment del formulari */
    display: inline; /* Assegura que el formulari es comporti com un element en línia */
}

/* barra de control dels trams de preus */ 
.barra-responsive {
    display: flex;
    width: 100%;
    min-width: 200px;
    max-width: 100vw;
    height: 20px;
}
.dia-barra {
    flex: 1 1 0;
    min-width: 1px;
    height: 20px;
    margin: 0;
}
.dies-labels, .mesos-labels {
    display: flex;
    width: 100%;
    min-width: 200px;
    max-width: 100vw;
}
.dia-label {
    flex: 1 1 0;
    min-width: 1px;
    text-align: center;
    font-size: 10px;
    height: 14px;
    line-height: 14px;
    color: #333;
}
.mes-label {
    flex: 1 1 0;
    min-width: 1px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    height: 14px;
    line-height: 14px;
    color: #333;
}
@media (max-width: 600px) {
    .barra-responsive, .dia-barra { height: 12px; }
    .dia-label, .mes-label { font-size: 8px; height: 10px; line-height: 10px; }
}


/* parpelleig dels trams de preus */ 
@keyframes parpelleigBuit {
    0%, 100% { background: #fff; }
    50% { background: #a94442; } /* Vermell fosc */
}
@keyframes parpelleigMulti {
    0%, 100% { background: #fff; }
    50% { background: #003366; } /* Blau fosc */
}
.parpelleig-buit {
    animation: parpelleigBuit 2s infinite;
}
.parpelleig-multi {
    animation: parpelleigMulti 2s infinite;
}

@keyframes parpelleigBuitBarra {
    0%, 100% { background: #eee; }
    50% { background: #a94442; } /* Vermell fosc */
}
@keyframes parpelleigMultiBarra {
    0%, 100% { background: #eee; }
    50% { background: #003366; } /* Blau fosc */
}
.parpelleig-buit-barra {
    animation: parpelleigBuitBarra 2s infinite;
}
.parpelleig-multi-barra {
    animation: parpelleigMultiBarra 2s infinite;
}

/* Ajustar la mida de la taula preustrams */
.table th, .table td {
    max-width: 80px;
    width: 70px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 1.4rem !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preustrams-input {
    width: 48px !important;    /* Amplada */
    min-width: 40px;           /* Amplada mínima */
    max-width: 60px;           /* Amplada màxima */
    padding-left: 2px;         /* Farciment esquerra */
    padding-right: 2px;        /* Farciment dreta */
    font-size: 1.3rem;         /* Mida de la lletra */
    text-align: center;         /* Text alineat a la dreta */
    /* Si vols controlar l'alçada: */
    height: 20px;              /* (Exemple d'alçada, pots ajustar-la) */
}

.table input,
.form-control {
    font-size: 1.2rem !important;
}

/* Chrome, Safari, Edge */
.preustrams-input::-webkit-outer-spin-button,
.preustrams-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox i estàndard */
.preustrams-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* Afegits per preus trams */
/* Força scroll disponible per la pàgina de preus */
html.preustrams-page,
body.preustrams-page {
  overflow:auto !important;
  height:auto !important;
}

/* Elimina margin/padding excessiu si cal */
body.preustrams-page { margin-top:60px; padding-top:0 !important; }

.preustrams-header-bar {
    background:#222; color:#fff; padding:15px 20px; border-bottom:3px solid #444;
    display:flex; flex-direction:column; height: 62px;
}
.preustrams-selector { display:flex; flex-wrap:wrap; gap:15px; align-items:center; width:100%; }
.preustrams-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.est-badge { font-size:1rem; }
.preustrams-wrapper { padding:20px 15px; }
.preustrams-section { margin-bottom:28px; background:lavenderblush; padding:10px 5px; }
.preustrams-panel {
    background:#f8f8f8; border:2px solid lightgray; border-radius:8px;
    padding:12px 10px 10px 10px;
}
.preustrams-table, .preustrams-matriu { background:#f9f9f9; }
.preus-inline { display:flex; align-items:center; justify-content:center; gap:4px; }
.preus-inline input { width:80px; }

.barra-responsive { display:flex; }
.dies-labels, .mesos-labels { display:flex; }
.dia-label, .mes-label { width:8px; font-size:10px; text-align:center; }
.parpelleig-multi-barra { animation: flash 1s infinite; }
.parpelleig-buit-barra { animation: flash-soft 2s infinite; }
@keyframes flash { 0%,100% { opacity:1; } 50% { opacity:.3; } }
@keyframes flash-soft { 0%,100% { opacity:1; } 50% { opacity:.55; } }

/* Si la side-nav (fixed) està tapant contingut, assegura espai lateral: */
body.preustrams-page #page-wrapper {
    min-height: auto;
    overflow: visible;
}

.preustrams-subnav {
  background:#121212;
  border:none;
  border-radius:0;
  min-height:52px;
  margin-bottom:15px;
}
.preustrams-subnav .navbar-brand.preustrams-title {
  color:#fff;
  font-size:14px;
  font-weight:600;
  padding-top:25px;
  padding-bottom:15px;
}
.preustrams-subnav .navbar-brand.preustrams-title:hover {
  color:#e0e0e0;
}
.preustrams-form {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin:0;
  gap:18px;
}
.preustrams-group {
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
}
.preustrams-label {
  background:#121212;
  color:lightblue;
  font-size:14px;
  line-height:14px;
  padding:0;
  margin-top:12px;
  display:inline-block;
}

/* Highlight for the active filter button in estades list
   Keep the original state's background color (from .estat-X) and do not force blue/white.
   We emphasize the active button by increasing vertical padding, min-height, border and a subtle shadow.
*/
.filter-active {
  background-color: inherit !important; /* keep the state's own background */
  color: inherit !important; /* keep the original text color */
  border: 2px solid rgba(0,0,0,0.18) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08) !important;
  display: inline-block;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 44px !important; /* make the active button taller */
  line-height: 1.2;
  transform: scale(1.1);
  transform-origin: center center;
  transition: padding .12s ease, box-shadow .12s ease, transform .08s ease;
}

/* Optional small scale on hover/focus to emphasise interaction */
.filter-active:hover, .filter-active:focus {
  transform: translateY(-2px) scaleY(1.02);
}

/* Title color for the estades list - keep it consistent with menu points */
.list-title {
  color: #CCCCFF; /* lavender-blue per la petició */
}
.preustrams-select,
.preustrams-select-wide {
  height:28px;
  margin-top:12px;
  padding:2px 6px;
  font-size:16px;
}
.preustrams-select { width:90px; }
.preustrams-select-wide { width:110px; }
.preustrams-buttons .btn {
  height:28px;
  line-height:14px;
  margin-top:12px;
  font-size:12px;
  padding:4px 8px;
}
.preustrams-estat {
  margin-top:12px;
}
.est-badge {
  font-size:12px;
  padding:6px 10px;
}

fieldset.border {
  border: 1px solid #ccc !important;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
}
legend.w-auto {
  font-size: 1rem;
  font-weight: bold;
}

.titol-contacte {
    font-size: 1.2rem !important; /* El doble de la mida normal */
    font-weight: bold;
}

/* fer els fieldset d'e-mails i telèfons una mica més compactes */
fieldset.compact { padding: .5rem; }
fieldset.compact .titol-contacte { font-size: 1.5rem; }

.hr-separador {
    border: 0;
    height: 1px;
    background: #222; /* Més fosc */
    margin: 10px 0 20px 0;
    opacity: 1;
}

/* Compacta les columnes de radio i accions */
#taulaEmails th, #taulaTelfs th, #taulaAdreces th,
#taulaEmails td, #taulaTelfs td, #taulaAdreces td {
    vertical-align: middle;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.titol-contacte { font-size: 1.7rem; font-weight: bold; }
.input-estret { width: 60px !important; min-width: 0 !important; }
.input-accio { width: 35px !important; min-width: 0 !important; }
.input-princ { width: 25px !important; min-width: 0 !important; }

.tooltip-popup {
    position: absolute;
    z-index: 9999;
    background: #fff;
    color: #333;
    border: 1px solid #888;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    font-size: 0.95em;
    white-space: pre-line;
    max-width: 350px;
    display: none;
}

.formulari-bloc {
    border: 2px solid #b3b3e6;         /* Color lavanda-blau suau */
    border-radius: 12px;
    background: #f8f8ff;               /* Lila/blanc suau */
    box-shadow: 0 2px 12px rgba(44, 111, 181, 0.08);
    padding: 8px 24px 12px 24px;
    margin: 0;   
    max-width: 100%;        /* Amplada màxima: 100% de la finestra */
    width: 100%;            /* Amplada real: 100% de la finestra */
    box-sizing: border-box;  /* Inclou el padding i border dins l'amplada */
}

.navbar,
.navbar-inverse,
.LTdC-background-marro {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* També pels <a> dins de .dropdown-menu */
.LTdC-dropdown-marro > li > a,
.LTdC-dropdown-marro > li > a:focus,
.LTdC-dropdown-marro > li > a:hover {
    color: var(--LTdC-blanc) !important;
    background-color: var(--LTdC-marro) !important;
}

.LTdC-dropdown-marro > li > form > input[type="submit"] {
    color: var(--LTdC-blanc) !important;
    background-color: var(--LTdC-marro) !important;
    border: none;
    width: 100%;
    text-align: left;
}
.LTdC-dropdown-marro > li > form > input[type="submit"]:hover,
.LTdC-dropdown-marro > li > form > input[type="submit"]:focus {
    color: var(--LTdC-blanc) !important;
    background-color: var(--LTdC-marro) !important;
}

.LTdC-dropdown-negre > li > a,
.LTdC-dropdown-negre > li > a:focus,
.LTdC-dropdown-negre > li > a:hover {
    color: var(--LTdC-blanc) !important;
    background-color: var(--LTdC-negre) !important;
}

.LTdC-dropdown-negre,
.LTdC-dropdown-negre > li,
.LTdC-dropdown-negre > li > a {
    color: var(--LTdC-blanc) !important;
    background-color: var(--LTdC-negre) !important;
}

.LTdC-dropdown-item,
.LTdC-dropdown-item:focus,
.LTdC-dropdown-item:hover {
    color: var(--LTdC-blanc) !important;
    border: none;
}

/* Força el color blanc als punts de menú desplegables de la navbar */
.LTdC-background-marro .navbar-nav > .dropdown > a,
.LTdC-background-marro .navbar-nav > .dropdown > a:focus,
.LTdC-background-marro .navbar-nav > .dropdown > a:hover,
.LTdC-background-marro .dropdown-toggle {
    color: var(--LTdC-negre) !important;
}
/* Evita el quadrat negre quan el desplegable s'obre (Bootstrap 3 afegeix .open al li) */
.LTdC-background-marro .navbar-nav > .open > a,
.LTdC-background-marro .navbar-nav > .open > a:hover,
.LTdC-background-marro .navbar-nav > .open > a:focus {
    background-color: var(--LTdC-marro) !important;
    color: var(--LTdC-negre) !important;
}
.LTdC-background-negre .navbar-nav > .dropdown > a,
.LTdC-background-negre .navbar-nav > .dropdown > a:focus,
.LTdC-background-negre .navbar-nav > .dropdown > a:hover,
.LTdC-background-negre .dropdown-toggle {
    color: var(--LTdC-blanc) !important;
    background-color: var(--LTdC-negre) !important;
}

.flatpickr-calendar {
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(44,111,181,0.12);
    font-size: 1.15em;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: #a4583d;
    color: #fff;
}
.flatpickr-day.today {
    border-color: #a4583d;
}
.flatpickr-day.disabled, .flatpickr-day.disabled:hover {
    background: #eee;
    color: #bbb;
    cursor: not-allowed;
}
.flatpickr-input {
    background: #fffbe6;
    border: 1.5px solid #a4583d;
    border-radius: 8px;
    font-size: 1.2em;
    color: #2b2d2b;
}

.slider-arrow-btn {
    position: absolute;
    margin: 0 2px;
    top: 95%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    border: none;
    color: #fff;
    font-size: 1.6rem;
    border-radius: 6px;
    width: 36px;
    height: 20px;
    z-index: 2;
    cursor: pointer;
    padding: 0;
    opacity: 0.85;
    transition: background 0.2s, opacity 0.2s;
}
.slider-arrow-btn:hover {
    background: rgba(0,0,0,0.32);
    opacity: 1;
}


/* ===== NAVBAR: alçada consistent en pantalles grans ===== */
@media (min-width: 901px) {
    .LTdC-navbar-marro .container-fluid {
        min-height: 80px;
    }
}

/* ===== LOGO NAVBAR ===== */
.LTdC-logo-icona {
    height: 35px;
    display: block;
    margin: 0 auto 5px auto;
}
.LTdC-logo-text {
    height: 18px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* ===== TABLET (768px–900px): logo petit + hamburguesa a la dreta ===== */
@media (min-width: 768px) and (max-width: 900px) {

    /* Logo petit (igual que <767px) */
    .LTdC-logo-icona { height: 22px; margin-bottom: 3px; }
    .LTdC-logo-text  { height: 12px; }

    /* navbar-header ocupa tot l'ample → toggle queda a la dreta */
    .navbar-header {
        float: none !important;
        width: 100% !important;
        display: block !important;
    }
    .navbar-toggle {
        float: right !important;
    }
}

/* ===== RESPONSIVE MÒBIL (max 767px) ===== */
@media (max-width: 767px) {

    /* --- Logo navbar --- */
    .LTdC-logo-icona { height: 22px; margin-bottom: 3px; }
    .LTdC-logo-text  { height: 12px; }

    /* --- Tipografia --- */
    .LTdC-titol-marro1      { font-size: 1.6rem; }
    .LTdC-titol-marro2      { font-size: 1.4rem; }
    .LTdC-text-box          { font-size: 1.3rem; }
    .LTdC-text-box2         { font-size: 1.3rem; }
    .LTdC-text2-blanc,
    .aj-benvinguda-text-box { font-size: 1.3rem; }
    .LTdC-menu2-negre       { font-size: 1.4rem; }
    .LTdC-menu3-negre       { font-size: 0.9rem; }
    .LTdC-hab-desc-curta    { font-size: 1.3rem; }
    .LTdC-hab-desc-llarga   { font-size: 1.1rem; }

    /* --- Navbar col·lapsat: redueix padding i alçada dels ítems --- */
    .navbar-nav > li > a,
    .navbar-nav > li > input,
    .navbar-nav > li > form > input,
    .navbar-nav > li > form > button {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;
    }
    /* Submenús desplegables: lletra més petita i padding reduït */
    .dropdown-menu > li > a,
    .dropdown-menu > li > form > button {
        padding: 4px 14px !important;
        font-size: 1.1rem !important;
    }

    /* --- Espais verticals: redueix tots --- */
    .aj-espai-v { height: 20px !important; max-height: 20px !important; }

    /* --- Text boxes dins de files: amplada completa --- */
    .aj-benvinguda-row .LTdC-text-box {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        padding: 16px 20px;
    }

    /* --- Footer: columnes apilades, centra contingut --- */
    footer .row {
        display: block !important;   /* Elimina flex per apilament correcte */
    }
    footer .col-md-4,
    footer .col-sm-4 {
        width: 100% !important;
        float: none !important;
        padding: 10px 20px;
        text-align: center;
    }

    /* --- Mapa al footer: alçada explícita --- */
    footer iframe      { height: 180px !important; }
    footer a > div     { height: 180px !important; }

    /* --- Fila principal: elimina min-height inline --- */
    .aj-benvinguda-row {
        min-height: unset !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .aj-benvinguda-marge-esquerra,
    .aj-benvinguda-espai,
    .aj-benvinguda-marge-dreta {
        display: none !important;
    }
    .aj-benvinguda-foto {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* --- Foto de capçalera: alçada reduïda --- */
    .aj-benvinguda-row .aj-benvinguda-foto img {
        height: 240px !important;
    }

    /* --- Targetes habitacions: amplada completa --- */
    .LTdC-hab-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* --- Subtítol habitació: evita overflow en textos llargs --- */
    .LTdC-hab-desc-subtitol {
        flex: 1 1 auto;
        min-width: 0;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* --- Logo al footer: mida reduïda --- */
    footer img[style*="height: 35px"] { height: 28px !important; }
    footer img[style*="height: 18px"] { height: 14px !important; }
}

/* ===== RESPONSIVE TELÈFON (max 480px) ===== */
/* ===== NAVBAR: col·lapse a 900px en lloc de 768px (Bootstrap override) ===== */

/* A pantalles grans (≥901px): forcem navbar expandit usant el sistema de floats de Bootstrap */
@media (min-width: 901px) {
    .navbar-toggle {
        display: none !important;
    }
    .navbar-collapse,
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
        border-top: none !important;
        box-shadow: none !important;
    }
    /* Restaurem els floats de Bootstrap 3 */
    .navbar-nav {
        float: left !important;
    }
    .navbar-right {
        float: right !important;
        margin-right: -15px !important;
    }
}

/* A pantalles petites (≤900px): forcem navbar col·lapsat */
@media (max-width: 900px) {
    .navbar-toggle {
        display: block !important;
    }
    .navbar-collapse.collapse {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    .navbar-collapse.in,
    .navbar-collapse.collapsing {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    /* En col·lapsat, els ítems ocupen tot l'ample (com Bootstrap per defecte) */
    .navbar-nav,
    .navbar-right {
        float: none !important;
        margin: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 900px) {
    /* A reserves.php: la foto passa a ocupar tota l'amplada quan el text cau a sota */
    .aj-reserves-foto {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* Espais verticals encara més petits */
    .aj-espai-v { height: 8px !important; max-height: 8px !important; }

    /* Elimina el marge inferior entre foto i text al apilament */
    .aj-benvinguda-foto,
    .aj-benvinguda-text {
        margin-bottom: 0 !important;
    }

    /* Redueix el padding superior del bloc de text en telèfon */
    .aj-benvinguda-row .LTdC-text-box {
        padding-top: 8px !important;
    }
    .aj-benvinguda-row .LTdC-titol-marro1 {
        padding-top: 6px !important;
    }
}