/* Variables de colores del sitio publicitario */
:root {
  --navbar-bg: #e1e5ce;        /* Verde claro - fondo del navbar */
  --navbar-text: #00524b;      /* Verde oscuro - texto y enlaces */
  --navbar-hover: #2e4f47;     /* Verde medio - hover */
}

/* Fondo del header principal */
header.navbar {
  padding: .75rem 0;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15) !important;
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid rgba(0, 82, 75, 0.1);
}

/* Enlaces de navegación */
.nav-link {
  color: var(--navbar-text) !important;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--navbar-hover) !important;
}

/* Logo/brand */
.navbar-brand {
  color: var(--navbar-text) !important;
}

.navbar-brand:hover {
  color: var(--navbar-hover) !important;
}

/* Botón de toggle del menú móvil */
.navbar-toggler {
  border-color: var(--navbar-text) !important;
  color: var(--navbar-text) !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 82, 75, 0.25) !important;
}

.navbar-toggler .bi {
  color: var(--navbar-text) !important;
}

/* Dropdown toggle */
.dropdown-toggle {
  color: var(--navbar-text) !important;
}

.dropdown-toggle:hover {
  color: var(--navbar-hover) !important;
}

/* SVG icons */
.nav-link svg,
.dropdown-toggle svg,
.navbar-toggler svg {
  color: var(--navbar-text) !important;
  fill: var(--navbar-text) !important;
}

.nav-link:hover svg,
.dropdown-toggle:hover svg {
  color: var(--navbar-hover) !important;
  fill: var(--navbar-hover) !important;
}

/* Estilos para el offcanvas (menú móvil) */
.offcanvas {
  background-color: var(--navbar-bg) !important;
}

.offcanvas-title {
  color: var(--navbar-text) !important;
}

.offcanvas .nav-link {
  color: var(--navbar-text) !important;
}

.offcanvas .nav-link:hover {
  color: var(--navbar-hover) !important;
}

/* Dropdown menu items */
.dropdown-item {
  color: var(--navbar-text) !important;
}

.dropdown-item:hover {
  color: var(--navbar-hover) !important;
  background-color: rgba(0, 82, 75, 0.1) !important;
}

@media(min-width: 992px) {
  .navbar nav .nav-item i.bi {
    font-size: 1.25rem !important;
  }
}
body.home-index {
  .card {
    .card-text {
      height: 3.6rem;
      line-height: 1.2rem;
    }

    .card-img-top {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 243px;
    }
  }
}
.form-signup, .form-signin, .form-unlock, .form-reset-password, .form-confirmation {
  max-width: 330px;

  .form-floating:focus-within {
    z-index: 2;
  }
}

.form-signin {
  input#user_password {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.form-signup {
  input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    &.is-invalid {
      margin-bottom: 0px;
    }
  }

  input#user_password {
    margin-bottom: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  input#user_password_confirmation {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
.edit_memorial, .new_memorial {  
  .image-preview {
    &:hover, &:focus {
      section {
        opacity: 75% !important;
      }
    }
  }
  
  button.delete svg {
    fill: currentColor;
  }

  [data-dropzone-target=gallery] {
    margin-top: -1px;
  }

  [data-dropzone-target=overlay].draggedover {
    border-width: 0.2em;
    border-style: dashed;
    border-color: rgba(0, 0, 0, 0.4);
    background-color: rgba(255, 255, 255, 0.5);
  }

  .memorial-video-url-fields {
    .position-relative > input.with-remove-button {
      padding-right: calc(1.5em + 1rem);
      /* text-truncate */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      & + button:active {
        border: 0px !important;
      }
    }

    .form-control.with-remove-button {
      &.is-invalid {
        background-image: none !important;
      }
    }
    
    .position-relative ~ .invalid-feedback {
      display: block;
    }
  }
}

body.memorials-show .container-xxl {
  min-width: 100vw !important;
  padding: 0 !important;
}
#scanner-modal {  
  #qr-reader {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
  }

  #qr-reader__dashboard_section {
    background-color: #f8f9fa;
  }

  #qr-reader__status_span {
    background-color: #e9ecef;
    color: #212529;
    padding: 5px;
    border-radius: 3px;
  }

  #qr-reader__dashboard button#html5-qrcode-button-camera-stop {
    display: none !important;
  }
}
/*





*/

html, body {
  height: 100%;
}

.field_with_errors {
  padding: 2px;
  background-color: red;
}

.font-montserrat{
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.nav-item {
  list-style-type: none !important;
}

.bi {
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  fill: currentcolor;
}

.mx-n2 {
  margin-right: -.5rem !important;
  margin-left: -.5rem !important;
}

.h-24 {
  height: calc(.25rem * 24);
}

.object-cover {
	object-fit: cover;
}

.bg-fixed {
	background-attachment: fixed;
}

.vh-20 {
	height: 20vh;
}

.min-vh-20 {
	min-height: 20vh;
}