.label:hover {
    cursor: pointer;
}

.ocultar {
    display:none;
}

:root {
    --primary: #433d3d;
    --secondary: #e10203;
    --secondary_hover: #e15602;
    --terciary: #bfbfbf;
    --secondary-back: #b09e9e;
    --secondary-back-hover: #d1cccc;
    --terciary-active: #e68c8c;
    --info: rgb(6, 140, 250);
    --info-active: rgb(136, 185, 207);
}

.titulo_ingreso {
    text-align: center;
    color: var(--terciary);
    border: 1px solid var(--primary);
    background-color: var(--primary);
}

a {
    color: inherit;
}

a:hover {
    color: var(--secondary_hover);
}


.activeli {
    /* border-bottom: 2px solid var(--secondary-back); */
    margin-right: 10px;
    color: var(--terciary-active);
}


.button_menu {
    background-color: var(--secondary); 
    color: var(--terciary); 

 }

 .button_menu:hover {
    background-color: var(--secondary_hover); 
    color: white;
 }


.principal_menu {
    background-color: var(--primary); 
    border-bottom: 2px solid white;
    color: white; 
    width: 100%;
    padding: 0.33333rem 0.5rem;
    display: inline-block;
}

.display_only_large {
    display: revert;
}

.display_only_small {
    display: none;
}


@media only screen and (max-width: 500px) {

    * {
        font-size: 10px;
    }

    .display_only_large {
        display: none;
    }

    .display_only_small {
        display: revert;
    }

    .button {
        padding: 0.7em 0.4em;
    }
    .label{
        font-size: 10px;
        white-space: normal;
    }
}

.button, .button.disabled, .button[disabled], .button.disabled:hover, .button[disabled]:hover, .button.disabled:focus, .button[disabled]:focus {
    background-color: var(--secondary-back);
    color: var(--secondary); }
  .button:hover, .button:focus {
    background-color: var(--secondary-back-hover);
    color: var(--secondary); }
  .button.primary, .button.primary.disabled, .button.primary[disabled], .button.primary.disabled:hover, .button.primary[disabled]:hover, .button.primary.disabled:focus, .button.primary[disabled]:focus {
    background-color: var(--secondary-back);
    color: var(--secondary); }
  .button.primary:hover, .button.primary:focus {
    background-color: var(--secondary-back-hover);
    color: var(--secondary); }
  .button.secondary, .button.secondary.disabled, .button.secondary[disabled], .button.secondary.disabled:hover, .button.secondary[disabled]:hover, .button.secondary.disabled:focus, .button.secondary[disabled]:focus {
    background-color: #767676;
    color: var(--secondary); }
  .button.secondary:hover, .button.secondary:focus {
    background-color: #5e5e5e;
    color: #fefefe; }
  .button.success, .button.success.disabled, .button.success[disabled], .button.success.disabled:hover, .button.success[disabled]:hover, .button.success.disabled:focus, .button.success[disabled]:focus {
    background-color: #3adb76;
    color: #0a0a0a; }
  .button.success:hover, .button.success:focus {
    background-color: #22bb5b;
    color: #0a0a0a; }
  .button.warning, .button.warning.disabled, .button.warning[disabled], .button.warning.disabled:hover, .button.warning[disabled]:hover, .button.warning.disabled:focus, .button.warning[disabled]:focus {
    background-color: #ffae00;
    color: #0a0a0a; }
  .button.warning:hover, .button.warning:focus {
    background-color: #cc8b00;
    color: #0a0a0a; }
  .button.alert, .button.alert.disabled, .button.alert[disabled], .button.alert.disabled:hover, .button.alert[disabled]:hover, .button.alert.disabled:focus, .button.alert[disabled]:focus {
    background-color: #cc4b37;
    color: #fefefe; }
  .button.alert:hover, .button.alert:focus {
    background-color: #a53b2a;
    color: #fefefe; }
  .button.info, .button.info.disabled, .button.info[disabled], .button.info.disabled:hover, .button.info[disabled]:hover, .button.info.disabled:focus, .button.info[disabled]:focus {
    background-color: var(--info);
    color: #fefefe; }
  .button.info:hover, .button.info:focus {
    background-color: var(--info-active);
    color: #fefefe; }

    body {
      background-color: #f0f4f8;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  .header {
      background-color: #3498db;
      color: white;
      padding: 20px 0;
      margin-bottom: 2rem;
  }
  .header h1 {
      font-weight: bold;
  }
  .accommodation-card {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      margin-bottom: 2rem;
      transition: transform 0.3s ease;
  }
  .accommodation-card:hover {
      transform: translateY(-5px);
  }
  .accommodation-image {
      width: 100%;
      height: 250px;
      object-fit: cover;
  }
  .accommodation-info {
      padding: 1rem;
  }
  .accommodation-name {
      font-size: 1.4em;
      font-weight: bold;
      margin-bottom: 0.5rem;
  }
  .accommodation-stars {
      color: #f39c12;
      margin-bottom: 0.5rem;
  }
  .accommodation-description {
      color: #555;
      margin-bottom: 0.5rem;
  }
  .accommodation-price {
      font-weight: bold;
      color: #27ae60;
  }
  .search-container {
      margin-bottom: 2rem;
      background-color: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .button-search {
      background-color: #2ecc71;
      font-weight: bold;
      transition: background-color 0.3s ease;
  }
  .button-search:hover {
      background-color: #27ae60;
  }
  .search-input {
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      padding: 0.5rem;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .search-input:focus {
      border-color: #3498db;
      box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
  }
  .search-label {
      font-weight: bold;
      color: #34495e;
      margin-bottom: 0.5rem;
  }
  .search-title {
      color: #2c3e50;
      margin-bottom: 1.5rem;
  }