body{
  display:flex;
  min-height:100vh;
  flex-direction:column;
  position:relative;
}
.fijo{
  flex:1 0 auto;
}

.img-small{
  width:3rem;
  height:3rem;
  object-fit:cover;
  border-radius:.3rem;
}
table.table > tbody > tr > td{
  vertical-align:middle;
}

.btn-outline-light{
  background-color:rgba(255,255,255,0.1) !important;
  border:none !important;
  color:rgba(255,255,255,0.8) !important;
}

.btn-outline-light:hover{
  background-color:rgba(255,255,255,0.2) !important;
  color:rgba(255,255,255,1) !important;
}

.icon-radius{
  color:white;
  width:1.85rem;
  height:1.85rem;
  text-align:center;
  border-radius:50%;
  font-size:12px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.icon-radius.disabled{
  color:rgba(255,255,255,0.3) !important;
}
.icon-radius:hover.disabled{
  background:none !important;
  color:rgba(255,255,255,0.3) !important;
  cursor:default;
}

.icon-radius:hover{
  background-color:rgba(255,255,255,0.2) !important;
  color:rgba(255,255,255,1) !important;
}

.carousel-caption > h1{

text-shadow: 3px 0px 7px rgba(81,67,21,0.8), 
	  -3px 0px 7px rgba(81,67,21,0.8), 
	  0px 4px 7px rgba(81,67,21,0.8);
}

.carousel-caption{
  top:11.5rem;
}

nav#navbar{
  transition:all 1s ease;
}

.mi-flex{
  display:flex;
  justify-content:center;
  align-items:center;
}
.mi-flex > span{
  margin-left:.75rem;
}
.mi-flex > img{

  display:block;
}
.marginTop{
  margin-top:2.5rem;
}




.toggle {
  cursor: pointer;
  display: inline-block;
}

.toggle-switch {
  display: inline-block;
  background: #ccc;
  border-radius: 16px;
  width: 29px;
  height: 16px;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
}
.toggle-switch:before, .toggle-switch:after {
  content: "";
}
.toggle-switch:before {
  display: block;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  width: 12px;
  height: 12px;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.25s;
}
.toggle:hover .toggle-switch:before {
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.toggle-checkbox:checked + .toggle-switch {
  background: #386bc0;
}
.toggle-checkbox:checked + .toggle-switch:before {
  left: 15px;
}

.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}

.toggle-label {
  margin-left: 5px;
  position: relative;
  top: 1px;
}


/* Contenedor de cards: asegura que todas las cards se estiren al mismo alto */
.row.products {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;              /* espacio entre cards */
  align-items: stretch;    /* estira todas las cards al mismo alto */
}

/* Card completa: flex column para ordenar body y footer */
.card.index-card {
  display: flex;
  flex-direction: column;  /* organiza header, body y footer verticalmente */
  height: 100%;            /* todas las cards ocupan el mismo alto */
}

/* Card body: crece para ocupar espacio disponible y organizar contenido */
.card-body.index-card {
  flex: 1 1 auto;          /* body crece según el espacio disponible */
  display: flex;
  flex-direction: column;  /* título, descripción y precio en columna */
}

/* Título: máximo 2 líneas, recorte con ellipsis */
.card-title.index-card {
  display: -webkit-box;       
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;     /* máximo 2 líneas */
  overflow: hidden;           /* recorta el exceso */
  text-overflow: ellipsis;    /* agrega "..." al final */
  line-height: 24px;          /* altura de línea */
  max-height: 48px;           /* 2 líneas * 24px */
  min-height: 48px;
  margin-bottom: 0.5rem;      /* espacio debajo del título */
}

/* Descripción: máximo 2 líneas, recorte con ellipsis */
.card-text.index-card {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;     
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
  max-height: 40px;
  min-height: 40px;      /* asegura que aunque la descripción sea corta, el espacio exista */
  margin-bottom: 1rem;
}

/* Footer: siempre al fondo de la card */
.card-footer.index-card {
  margin-top: auto;
}

    .quantity-control {
      display: flex;
      align-items: center;
      border: 2px solid #ced4da; /* borde alrededor */
      border-radius: 3px;
    }

    .quantity-control button {
      margin: 0;
      border: none;
      border-radius: 0;
      padding: 4px 10px;         /* más pequeño */
      background: #f5f5f5;
      cursor: pointer;
      font-size: 14px;           /* texto/icono más pequeño */
      height: 30px;              /* altura fija */
      box-sizing: border-box;
    }

    .quantity-control button:hover {
      background: #e9ecef;
    }

    .quantity-control input {
      margin: 0;
      border: 0;
      border-radius: 0;
      text-align: center;
      width: 45px;               /* ancho más compacto */
      background-color: #f5f5f5;
      padding: 4px 10px;         /* mismo padding que los botones */
      height: 30px;              /* misma altura que los botones */
      box-sizing: border-box;
      font-size: 14px;
    }

    /* Quitar borde/efecto al hacer focus */
    .quantity-control input:focus {
      outline: none;
      box-shadow: none;
    }

    /* Elimina flechas en inputs numéricos */
    .quantity-control input::-webkit-outer-spin-button,
    .quantity-control input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .quantity-control input[type=number] {
      -moz-appearance: textfield;
    }